Merge branch 'develop' into report-rewrite

app/javascript/dashboard/api/slaReports.js

@@ -0,0 +1,76 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class SLAReportsAPI extends ApiClient {
+  constructor() {
+    super('applied_slas', { accountScoped: true });
+  }
+
+  get({
+    from,
+    to,
+    assigned_agent_id,
+    inbox_id,
+    team_id,
+    sla_policy_id,
+    label_list,
+    page,
+  } = {}) {
+    return axios.get(this.url, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        team_id,
+        sla_policy_id,
+        label_list,
+        page,
+      },
+    });
+  }
+
+  download({
+    from,
+    to,
+    assigned_agent_id,
+    inbox_id,
+    team_id,
+    sla_policy_id,
+  } = {}) {
+    return axios.get(`${this.url}/download`, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        team_id,
+        sla_policy_id,
+      },
+    });
+  }
+
+  getMetrics({
+    from,
+    to,
+    assigned_agent_id,
+    inbox_id,
+    team_id,
+    label_list,
+    sla_policy_id,
+  } = {}) {
+    return axios.get(`${this.url}/metrics`, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        label_list,
+        team_id,
+        sla_policy_id,
+      },
+    });
+  }
+}
+
+export default new SLAReportsAPI();

app/javascript/dashboard/api/specs/slaReports.spec.js

@@ -0,0 +1,102 @@
+import SLAReportsAPI from '../slaReports';
+import ApiClient from '../ApiClient';
+
+describe('#SLAReports API', () => {
+  it('creates correct instance', () => {
+    expect(SLAReportsAPI).toBeInstanceOf(ApiClient);
+    expect(SLAReportsAPI.apiVersion).toBe('/api/v1');
+    expect(SLAReportsAPI).toHaveProperty('get');
+    expect(SLAReportsAPI).toHaveProperty('getMetrics');
+  });
+
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('#get', () => {
+      SLAReportsAPI.get({
+        page: 1,
+        from: 1622485800,
+        to: 1623695400,
+        assigned_agent_id: 1,
+        inbox_id: 1,
+        team_id: 1,
+        sla_policy_id: 1,
+        label_list: ['label1'],
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/applied_slas', {
+        params: {
+          page: 1,
+          since: 1622485800,
+          until: 1623695400,
+          assigned_agent_id: 1,
+          inbox_id: 1,
+          team_id: 1,
+          sla_policy_id: 1,
+          label_list: ['label1'],
+        },
+      });
+    });
+    it('#getMetrics', () => {
+      SLAReportsAPI.getMetrics({
+        from: 1622485800,
+        to: 1623695400,
+        assigned_agent_id: 1,
+        inbox_id: 1,
+        team_id: 1,
+        sla_policy_id: 1,
+        label_list: ['label1'],
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/applied_slas/metrics',
+        {
+          params: {
+            since: 1622485800,
+            until: 1623695400,
+            assigned_agent_id: 1,
+            inbox_id: 1,
+            team_id: 1,
+            sla_policy_id: 1,
+            label_list: ['label1'],
+          },
+        }
+      );
+    });
+    it('#download', () => {
+      SLAReportsAPI.download({
+        from: 1622485800,
+        to: 1623695400,
+        assigned_agent_id: 1,
+        inbox_id: 1,
+        team_id: 1,
+        sla_policy_id: 1,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/applied_slas/download',
+        {
+          params: {
+            since: 1622485800,
+            until: 1623695400,
+            assigned_agent_id: 1,
+            inbox_id: 1,
+            team_id: 1,
+            sla_policy_id: 1,
+          },
+        }
+      );
+    });
+  });
+});

app/javascript/dashboard/assets/scss/_date-picker.scss

@@ -1,6 +1,13 @@
 @import '~vue2-datepicker/scss/index';
 
 .date-picker {
+  // To be removed one SLA reports date picker is created
+  &.small {
+    .mx-input {
+      @apply h-8 text-sm;
+    }
+  }
+
   &.no-margin {
     .mx-input {
       @apply mb-0;

app/javascript/dashboard/assets/scss/_layout.scss

@@ -11,6 +11,7 @@ body {
     'Segoe UI',
     Roboto,
     'Helvetica Neue',
+    Tahoma,
     Arial,
     sans-serif !important;
   -moz-osx-font-smoothing: grayscale;

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -153,6 +153,29 @@
 }
 
 .multiselect-wrap--small {
+  // To be removed one SLA reports date picker is created
+  &.tiny {
+    .multiselect.no-margin {
+      @apply min-h-[32px];
+    }
+
+    .multiselect__select {
+      @apply min-h-[32px] h-8;
+
+      &::before {
+        @apply top-[60%];
+      }
+    }
+
+    .multiselect__tags {
+      @apply min-h-[32px] max-h-[32px];
+
+      .multiselect__single {
+        @apply pt-1 pb-1;
+      }
+    }
+  }
+
   .multiselect__tags,
   .multiselect__input,
   .multiselect {

app/javascript/dashboard/assets/scss/widgets/_base.scss

@@ -63,12 +63,12 @@ input:focus {
 }
 
 // Inputs
-input[type='text'],
-input[type='number'],
-input[type='password'],
-input[type='date'],
-input[type='email'],
-input[type='url'] {
+input[type='text']:not(.reset-base),
+input[type='number']:not(.reset-base),
+input[type='password']:not(.reset-base),
+input[type='date']:not(.reset-base),
+input[type='email']:not(.reset-base),
+input[type='url']:not(.reset-base) {
   @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
 
   &[disabled] {

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -118,7 +118,7 @@ button {
     @apply border border-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
 
     &.secondary {
-      @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
+      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
     }
 
     &.success {

app/javascript/dashboard/components/ChatList.vue

@@ -1,14 +1,14 @@
 <template>
   <div
-    class="conversations-list-wrap flex-basis-clamp flex-shrink-0 overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
-    :class="{
-      hide: !showConversationList,
-      'list--full-width': isOnExpandedLayout,
-    }"
+    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    :class="[
+      { hidden: !showConversationList },
+      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
+    ]"
   >
     <slot />
     <div
-      class="flex items-center justify-between py-0 px-4"
+      class="flex items-center justify-between px-4 py-0"
       :class="{
         'pb-3 border-b border-slate-75 dark:border-slate-700':
           hasAppliedFiltersOrActiveFolders,
@@ -16,7 +16,7 @@
     >
       <div class="flex max-w-[85%] justify-center items-center">
         <h1
-          class="text-xl break-words overflow-hidden whitespace-nowrap font-medium text-ellipsis text-black-900 dark:text-slate-100 mb-0"
+          class="text-xl font-medium break-words truncate text-black-900 dark:text-slate-100"
           :title="pageTitle"
         >
           {{ pageTitle }}
@@ -107,7 +107,7 @@
 
     <p
       v-if="!chatListLoading && !conversationList.length"
-      class="overflow-auto p-4 flex justify-center items-center"
+      class="flex items-center justify-center p-4 overflow-auto"
     >
       {{ $t('CHAT_LIST.LIST.404') }}
     </p>
@@ -127,7 +127,7 @@
     />
     <div
       ref="conversationList"
-      class="conversations-list flex-1"
+      class="flex-1 conversations-list"
       :class="{ 'overflow-hidden': isContextMenuOpen }"
     >
       <virtual-list
@@ -136,16 +136,16 @@
         :data-sources="conversationList"
         :data-component="itemComponent"
         :extra-props="virtualListExtraProps"
-        class="w-full overflow-auto h-full"
+        class="w-full h-full overflow-auto"
         footer-tag="div"
       >
         <template #footer>
           <div v-if="chatListLoading" class="text-center">
-            <span class="spinner mt-4 mb-4" />
+            <span class="mt-4 mb-4 spinner" />
           </div>
           <p
             v-if="showEndOfListMessage"
-            class="text-center text-slate-400 dark:text-slate-300 p-4"
+            class="p-4 text-center text-slate-400 dark:text-slate-300"
           >
             {{ $t('CHAT_LIST.EOF') }}
           </p>
@@ -1034,24 +1034,10 @@ export default {
 </style>
 
 <style scoped lang="scss">
-.conversations-list-wrap {
-  &.hide {
-    @apply hidden;
-  }
-
-  &.list--full-width {
-    @apply basis-full;
-  }
-}
-
 .conversations-list {
   @apply overflow-hidden hover:overflow-y-auto;
 }
 
-.load-more--button {
-  @apply text-center rounded-none;
-}
-
 .tab--chat-type {
   @apply py-0 px-4;
 

app/javascript/dashboard/components/CustomAttribute.vue

@@ -2,23 +2,27 @@
   <div class="py-3 px-4">
     <div class="flex items-center mb-1">
       <h4 class="text-sm flex items-center m-0 w-full error">
-        <div v-if="isAttributeTypeCheckbox" class="checkbox-wrap">
+        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
           <input
             v-model="editedValue"
-            class="checkbox"
+            class="!my-0 mr-2 ml-0"
             type="checkbox"
             @change="onUpdate"
           />
         </div>
         <div class="flex items-center justify-between w-full">
           <span
-            class="attribute-name w-full text-slate-800 dark:text-slate-100 font-medium text-sm mb-0"
-            :class="{ error: $v.editedValue.$error }"
+            class="w-full font-medium text-sm mb-0"
+            :class="
+              $v.editedValue.$error
+                ? 'text-red-400 dark:text-red-500'
+                : 'text-slate-800 dark:text-slate-100'
+            "
           >
             {{ label }}
           </span>
           <woot-button
-            v-if="showActions"
+            v-if="showCopyAndDeleteButton"
             v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
             variant="link"
             size="medium"
@@ -31,7 +35,7 @@
       </h4>
     </div>
     <div v-if="notAttributeTypeCheckboxAndList">
-      <div v-show="isEditing">
+      <div v-if="isEditing" v-on-clickaway="onClickAway">
         <div class="mb-2 w-full flex items-center">
           <input
             ref="inputfield"
@@ -61,7 +65,7 @@
       </div>
       <div
         v-show="!isEditing"
-        class="value--view"
+        class="flex group"
         :class="{ 'is-editable': showActions }"
       >
         <a
@@ -69,35 +73,35 @@
           :href="hrefURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ urlValue }}
         </a>
         <p
           v-else
-          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ displayValue || '---' }}
         </p>
         <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
           <woot-button
-            v-if="showActions"
+            v-if="showCopyAndDeleteButton"
             v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
             variant="link"
             size="small"
             color-scheme="secondary"
             icon="clipboard"
-            class-names="edit-button"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
             @click="onCopy"
           />
           <woot-button
-            v-if="showActions"
+            v-if="showEditButton"
             v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
             variant="link"
             size="small"
             color-scheme="secondary"
             icon="edit"
-            class-names="edit-button"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
             @click="onEdit"
           />
         </div>
@@ -126,6 +130,7 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -138,7 +143,7 @@ export default {
   components: {
     MultiselectDropdown,
   },
-  mixins: [customAttributeMixin],
+  mixins: [customAttributeMixin, clickaway],
   props: {
     label: { type: String, required: true },
     values: { type: Array, default: () => [] },
@@ -160,11 +165,18 @@ export default {
       editedValue: null,
     };
   },
-
   computed: {
+    showCopyAndDeleteButton() {
+      return this.value && this.showActions;
+    },
+    showEditButton() {
+      return !this.value && this.showActions;
+    },
     displayValue() {
       if (this.isAttributeTypeDate) {
-        return new Date(this.value || new Date()).toLocaleDateString();
+        return this.value
+          ? new Date(this.value || new Date()).toLocaleDateString()
+          : '';
       }
       if (this.isAttributeTypeCheckbox) {
         return this.value === 'false' ? false : this.value;
@@ -230,6 +242,10 @@ export default {
       this.isEditing = false;
       this.editedValue = this.formattedValue;
     },
+    contactId() {
+      // Fix to solve validation not resetting when contactId changes in contact page
+      this.$v.$reset();
+    },
   },
 
   validations() {
@@ -268,6 +284,10 @@ export default {
         this.$refs.inputfield.focus();
       }
     },
+    onClickAway() {
+      this.$v.$reset();
+      this.isEditing = false;
+    },
     onEdit() {
       this.isEditing = true;
       this.$nextTick(() => {
@@ -294,6 +314,7 @@ export default {
     },
     onDelete() {
       this.isEditing = false;
+      this.$v.$reset();
       this.$emit('delete', this.attributeKey);
     },
     onCopy() {
@@ -304,35 +325,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.checkbox-wrap {
-  @apply flex items-center;
-}
-.checkbox {
-  @apply my-0 mr-2 ml-0;
-}
-.attribute-name {
-  &.error {
-    @apply text-red-400 dark:text-red-500;
-  }
-}
-
-.edit-button {
-  @apply hidden;
-}
-
-.value--view {
-  @apply flex;
-
-  &.is-editable:hover {
-    .value {
-      @apply bg-slate-50 dark:bg-slate-700 mb-0;
-    }
-    .edit-button {
-      @apply block;
-    }
-  }
-}
-
 ::v-deep {
   .selector-wrap {
     @apply m-0 top-1;

app/javascript/dashboard/components/Modal.vue

@@ -7,7 +7,13 @@
       @mousedown="handleMouseDown"
     >
       <div
-        :class="modalContainerClassName"
+        :class="{
+          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
+          'rounded-xl w-[37.5rem]': !fullWidth,
+          'items-center rounded-none flex h-full justify-center w-full':
+            fullWidth,
+          [size]: true,
+        }"
         @mouse.stop
         @mousedown="event => event.stopPropagation()"
       >
@@ -16,7 +22,7 @@
           color-scheme="secondary"
           icon="dismiss"
           variant="clear"
-          class="absolute ltr:right-2 rtl:left-2 top-2 z-10"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
           @click="close"
         />
         <slot />
@@ -60,15 +66,6 @@ export default {
     };
   },
   computed: {
-    modalContainerClassName() {
-      let className =
-        'modal-container rtl:text-right shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem] bg-white dark:bg-slate-800 skip-context-menu';
-      if (this.fullWidth) {
-        return `${className} items-center rounded-none flex h-full justify-center w-full`;
-      }
-
-      return `${className} ${this.size}`;
-    },
     modalClassName() {
       const modalClassNameMap = {
         centered: '',

app/javascript/dashboard/components/ModalHeader.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col items-start pt-8 px-8 pb-0">
+  <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
     <h2
       ref="modalHeaderTitle"
-      class="text-slate-800 text-lg font-semibold dark:text-slate-50"
+      class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
     >
       {{ headerTitle }}
     </h2>
     <p
       v-if="headerContent"
       ref="modalHeaderContent"
-      class="w-full break-words text-slate-600 mt-2 text-sm dark:text-slate-300"
+      class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
     >
       {{ headerContent }}
       <span
         v-if="headerContentValue"
-        class="font-semibold text-sm text-slate-600 dark:text-slate-300"
+        class="text-sm font-semibold text-slate-600 dark:text-slate-300"
       >
         {{ headerContentValue }}
       </span>

app/javascript/dashboard/components/layout/config/sidebarItems/reports.js

@@ -12,6 +12,7 @@ const reports = accountId => ({
     'label_reports',
     'inbox_reports',
     'team_reports',
+    'sla_reports',
   ],
   menuItems: [
     {
@@ -71,6 +72,14 @@ const reports = accountId => ({
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
       toStateName: 'team_reports',
     },
+    {
+      icon: 'document-list-clock',
+      label: 'REPORTS_SLA',
+      hasSubMenu: false,
+      featureFlag: FEATURE_FLAGS.SLA,
+      toState: frontendURL(`accounts/${accountId}/reports/sla`),
+      toStateName: 'sla_reports',
+    },
   ],
 });
 

app/javascript/dashboard/components/ui/Label.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="ltr:mr-1 rtl:ml-1 mb-1"
+    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
     :class="labelClass"
     :style="labelStyle"
     :title="description"
@@ -111,7 +111,7 @@ export default {
 
 <style scoped lang="scss">
 .label {
-  @apply inline-flex items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
+  @apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
 
   &.small {
     @apply text-xs py-0.5 px-1 leading-tight h-5;

app/javascript/dashboard/components/widgets/TableFooter.vue

@@ -1,171 +1,48 @@
 <template>
   <footer
     v-if="isFooterVisible"
-    class="bg-white dark:bg-slate-800 h-12 border-t border-solid border-slate-75 dark:border-slate-700/50 flex items-center justify-between px-6"
+    class="h-12 flex items-center justify-between px-6"
   >
-    <div class="left-aligned-wrap">
-      <div class="text-xs text-slate-600 dark:text-slate-200">
-        <strong>{{ firstIndex }}</strong>
-        - <strong>{{ lastIndex }}</strong> of
-        <strong>{{ totalCount }}</strong> items
-      </div>
-    </div>
-    <div class="right-aligned-wrap">
-      <div
-        v-if="totalCount"
-        class="primary button-group pagination-button-group"
-      >
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          class-names="goto-first"
-          :is-disabled="hasFirstPage"
-          @click="onFirstPage"
-        >
-          <fluent-icon icon="chevron-left" size="18" />
-          <fluent-icon
-            icon="chevron-left"
-            size="18"
-            :class="pageFooterIconClass"
-          />
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          :is-disabled="hasPrevPage"
-          @click="onPrevPage"
-        >
-          <fluent-icon icon="chevron-left" size="18" />
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          @click.prevent
-        >
-          {{ currentPage }}
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          :is-disabled="hasNextPage"
-          @click="onNextPage"
-        >
-          <fluent-icon icon="chevron-right" size="18" />
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          class-names="goto-last"
-          :is-disabled="hasLastPage"
-          @click="onLastPage"
-        >
-          <fluent-icon icon="chevron-right" size="18" />
-          <fluent-icon
-            icon="chevron-right"
-            size="18"
-            :class="pageFooterIconClass"
-          />
-        </woot-button>
-      </div>
-    </div>
+    <table-footer-results
+      :first-index="firstIndex"
+      :last-index="lastIndex"
+      :total-count="totalCount"
+    />
+    <table-footer-pagination
+      v-if="totalCount"
+      :current-page="currentPage"
+      :total-pages="totalPages"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @page-change="$emit('page-change', $event)"
+    />
   </footer>
 </template>
 
-<script>
-import rtlMixin from 'shared/mixins/rtlMixin';
-
-export default {
-  components: {},
-  mixins: [rtlMixin],
-  props: {
-    currentPage: {
-      type: Number,
-      default: 1,
-    },
-    pageSize: {
-      type: Number,
-      default: 25,
-    },
-    totalCount: {
-      type: Number,
-      default: 0,
-    },
+<script setup>
+import { computed } from 'vue';
+import TableFooterResults from './TableFooterResults.vue';
+import TableFooterPagination from './TableFooterPagination.vue';
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
   },
-  computed: {
-    pageFooterIconClass() {
-      return this.isRTLView ? '-mr-3' : '-ml-3';
-    },
-    isFooterVisible() {
-      return this.totalCount && !(this.firstIndex > this.totalCount);
-    },
-    firstIndex() {
-      return this.pageSize * (this.currentPage - 1) + 1;
-    },
-    lastIndex() {
-      return Math.min(this.totalCount, this.pageSize * this.currentPage);
-    },
-    searchButtonClass() {
-      return this.searchQuery !== '' ? 'show' : '';
-    },
-    hasLastPage() {
-      return !!Math.ceil(this.totalCount / this.pageSize);
-    },
-    hasFirstPage() {
-      return this.currentPage === 1;
-    },
-    hasNextPage() {
-      return this.currentPage === Math.ceil(this.totalCount / this.pageSize);
-    },
-    hasPrevPage() {
-      return this.currentPage === 1;
-    },
+  pageSize: {
+    type: Number,
+    default: 25,
   },
-  methods: {
-    onNextPage() {
-      if (this.hasNextPage) {
-        return;
-      }
-      const newPage = this.currentPage + 1;
-      this.onPageChange(newPage);
-    },
-    onPrevPage() {
-      if (this.hasPrevPage) {
-        return;
-      }
-      const newPage = this.currentPage - 1;
-      this.onPageChange(newPage);
-    },
-    onFirstPage() {
-      if (this.hasFirstPage) {
-        return;
-      }
-      const newPage = 1;
-      this.onPageChange(newPage);
-    },
-    onLastPage() {
-      if (this.hasLastPage) {
-        return;
-      }
-      const newPage = Math.ceil(this.totalCount / this.pageSize);
-      this.onPageChange(newPage);
-    },
-    onPageChange(page) {
-      this.$emit('page-change', page);
-    },
+  totalCount: {
+    type: Number,
+    default: 0,
   },
-};
+});
+const totalPages = computed(() => Math.ceil(props.totalCount / props.pageSize));
+const firstIndex = computed(() => props.pageSize * (props.currentPage - 1) + 1);
+const lastIndex = computed(() =>
+  Math.min(props.totalCount, props.pageSize * props.currentPage)
+);
+const isFooterVisible = computed(
+  () => props.totalCount && !(firstIndex.value > props.totalCount)
+);
 </script>
-
-<style lang="scss" scoped>
-.goto-first,
-.goto-last {
-  i:last-child {
-    @apply -ml-1;
-  }
-}
-</style>

app/javascript/dashboard/components/widgets/TableFooterPagination.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="flex items-center bg-slate-50 dark:bg-slate-800 h-8 rounded-lg">
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasFirstPage"
+      class-names="dark:!bg-slate-800 !opacity-100 ltr:rounded-l-lg ltr:rounded-r-none rtl:rounded-r-lg rtl:rounded-l-none"
+      :class="buttonClass(hasFirstPage)"
+      @click="onFirstPage"
+    >
+      <fluent-icon
+        icon="chevrons-left"
+        size="20"
+        icon-lib="lucide"
+        :class="hasFirstPage && 'opacity-40'"
+      />
+    </woot-button>
+    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasPrevPage"
+      class-names="dark:!bg-slate-800 !opacity-100 rounded-none"
+      :class="buttonClass(hasPrevPage)"
+      @click="onPrevPage"
+    >
+      <fluent-icon
+        icon="chevron-left-single"
+        size="20"
+        icon-lib="lucide"
+        :class="hasPrevPage && 'opacity-40'"
+      />
+    </woot-button>
+
+    <div
+      class="flex px-3 items-center gap-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
+    >
+      <span class="text-sm text-slate-800 dark:text-slate-75">
+        {{ currentPage }}
+      </span>
+      <span class="text-slate-600 dark:text-slate-500">/</span>
+      <span class="text-sm text-slate-600 dark:text-slate-500">
+        {{ totalPages }}
+      </span>
+    </div>
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasNextPage"
+      class-names="dark:!bg-slate-800 !opacity-100 rounded-none"
+      :class="buttonClass(hasNextPage)"
+      @click="onNextPage"
+    >
+      <fluent-icon
+        icon="chevron-right-single"
+        size="20"
+        icon-lib="lucide"
+        :class="hasNextPage && 'opacity-40'"
+      />
+    </woot-button>
+    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      class-names="dark:!bg-slate-800 !opacity-100 ltr:rounded-r-lg ltr:rounded-l-none rtl:rounded-l-lg rtl:rounded-r-none"
+      :class="buttonClass(hasLastPage)"
+      :is-disabled="hasLastPage"
+      @click="onLastPage"
+    >
+      <fluent-icon
+        icon="chevrons-right"
+        size="20"
+        icon-lib="lucide"
+        :class="hasLastPage && 'opacity-40'"
+      />
+    </woot-button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+// Props
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalCount: {
+    type: Number,
+    default: 0,
+  },
+  totalPages: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const hasLastPage = computed(
+  () => props.currentPage === props.totalPages || props.totalPages === 1
+);
+const hasFirstPage = computed(() => props.currentPage === 1);
+const hasNextPage = computed(() => props.currentPage === props.totalPages);
+const hasPrevPage = computed(() => props.currentPage === 1);
+
+const emit = defineEmits(['page-change']);
+
+function buttonClass(hasPage) {
+  if (hasPage) {
+    return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
+  }
+  return 'dark:hover:!bg-slate-700/50';
+}
+
+function onPageChange(newPage) {
+  emit('page-change', newPage);
+}
+
+const onNextPage = () => {
+  if (!onNextPage.value) {
+    onPageChange(props.currentPage + 1);
+  }
+};
+const onPrevPage = () => {
+  if (!hasPrevPage.value) {
+    onPageChange(props.currentPage - 1);
+  }
+};
+const onFirstPage = () => {
+  if (!hasFirstPage.value) {
+    onPageChange(1);
+  }
+};
+const onLastPage = () => {
+  if (!hasLastPage.value) {
+    onPageChange(props.totalPages);
+  }
+};
+</script>

app/javascript/dashboard/components/widgets/TableFooterResults.vue

@@ -0,0 +1,28 @@
+<template>
+  <span class="text-sm text-slate-700 dark:text-slate-200 font-medium">
+    {{
+      $t('GENERAL.SHOWING_RESULTS', {
+        firstIndex,
+        lastIndex,
+        totalCount,
+      })
+    }}
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  firstIndex: {
+    type: Number,
+    default: 0,
+  },
+  lastIndex: {
+    type: Number,
+    default: 0,
+  },
+  totalCount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>

app/javascript/dashboard/components/widgets/TableHeaderCell.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  span: {
+    type: Number,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+    default: '',
+  },
+});
+
+const spanClass = computed(() => {
+  if (props.span === 1) return 'col-span-1';
+  if (props.span === 2) return 'col-span-2';
+  if (props.span === 3) return 'col-span-3';
+  if (props.span === 4) return 'col-span-4';
+  if (props.span === 5) return 'col-span-5';
+  if (props.span === 6) return 'col-span-6';
+  if (props.span === 7) return 'col-span-7';
+  if (props.span === 8) return 'col-span-8';
+  if (props.span === 9) return 'col-span-9';
+  if (props.span === 10) return 'col-span-10';
+
+  return 'col-span-1';
+});
+</script>
+<template>
+  <div
+    class="flex items-center px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
+    :class="spanClass"
+  >
+    <slot>
+      {{ label }}
+    </slot>
+  </div>
+</template>

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

@@ -86,7 +86,11 @@
           {{ unreadCount > 9 ? '9+' : unreadCount }}
         </span>
       </div>
-      <card-labels :conversation-id="chat.id" />
+      <card-labels :conversation-id="chat.id" class="mt-0.5 mx-2 mb-0">
+        <template v-if="hasSlaPolicyId" #before>
+          <SLA-card-label :chat="chat" class="ltr:mr-1 rtl:ml-1" />
+        </template>
+      </card-labels>
     </div>
     <woot-context-menu
       v-if="showContextMenu"
@@ -125,6 +129,7 @@ import alertMixin from 'shared/mixins/alertMixin';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
 import PriorityMark from './PriorityMark.vue';
+import SLACardLabel from './components/SLACardLabel.vue';
 
 export default {
   components: {
@@ -135,6 +140,7 @@ export default {
     TimeAgo,
     MessagePreview,
     PriorityMark,
+    SLACardLabel,
   },
 
   mixins: [inboxMixin, timeMixin, conversationMixin, alertMixin],
@@ -252,6 +258,9 @@ export default {
       const stateInbox = this.inbox;
       return stateInbox.name || '';
     },
+    hasSlaPolicyId() {
+      return this.chat?.sla_policy_id;
+    },
   },
   methods: {
     onCardClick(e) {

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

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
+    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
   >
     <div
-      class="flex-1 w-full min-w-0 flex flex-col items-center justify-center"
+      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
       :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
     >
-      <div class="flex justify-start items-center min-w-0 w-fit max-w-full">
+      <div class="flex items-center justify-start max-w-full min-w-0 w-fit">
         <back-button
           v-if="showBackButton"
           :back-url="backButtonUrl"
@@ -19,10 +19,10 @@
           :status="currentContact.availability_status"
         />
         <div
-          class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-fit overflow-hidden"
+          class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
         >
           <div
-            class="flex items-center flex-row gap-1 m-0 p-0 w-fit max-w-full"
+            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
           >
             <woot-button
               variant="link"
@@ -31,7 +31,7 @@
               @click.prevent="$emit('contact-panel-toggle')"
             >
               <span
-                class="text-base leading-tight font-medium text-slate-900 dark:text-slate-100"
+                class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
               >
                 {{ currentContact.name }}
               </span>
@@ -46,7 +46,7 @@
           </div>
 
           <div
-            class="conversation--header--actions items-center flex text-xs gap-2 text-ellipsis overflow-hidden whitespace-nowrap"
+            class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
           >
             <inbox-name v-if="hasMultipleInboxes" :inbox="inbox" />
             <span
@@ -67,9 +67,10 @@
         </div>
       </div>
       <div
-        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0"
+        class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
         :class="{ 'justify-end': isContactPanelOpen }"
       >
+        <SLA-card-label v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
         <more-actions :conversation-id="currentChat.id" />
       </div>
     </div>
@@ -85,6 +86,7 @@ import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Thumbnail from '../Thumbnail.vue';
+import SLACardLabel from './components/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
@@ -95,6 +97,7 @@ export default {
     InboxName,
     MoreActions,
     Thumbnail,
+    SLACardLabel,
   },
   mixins: [inboxMixin, agentMixin, eventListenerMixins],
   props: {
@@ -173,6 +176,9 @@ export default {
     hasMultipleInboxes() {
       return this.$store.getters['inboxes/getInboxes'].length > 1;
     },
+    hasSlaPolicyId() {
+      return this.chat?.sla_policy_id;
+    },
   },
 
   methods: {

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

@@ -1,47 +1,65 @@
 <template>
   <div
-    class="flex items-center px-2 truncate border min-w-fit border-slate-75 dark:border-slate-700"
-    :class="showExtendedInfo ? 'py-[5px] rounded-lg' : 'py-0.5 gap-1 rounded'"
+    v-if="hasSlaThreshold"
+    class="relative flex items-center border cursor-pointer min-w-fit border-slate-100 dark:border-slate-700"
+    :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
   >
     <div
-      class="flex items-center gap-1"
-      :class="
-        showExtendedInfo &&
-        'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-75 dark:border-slate-700'
-      "
+      v-on-clickaway="closeSlaPopover"
+      class="flex items-center w-full truncate"
+      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
+      @mouseover="openSlaPopover()"
     >
-      <fluent-icon
-        size="14"
-        :icon="slaStatus.icon"
-        type="outline"
-        :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
-        class="flex-shrink-0"
-        :class="slaTextStyles"
-      />
-      <span
-        v-if="showExtendedInfo"
-        class="text-xs font-medium"
-        :class="slaTextStyles"
+      <div
+        class="flex items-center gap-1"
+        :class="
+          showExtendedInfo &&
+          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
+        "
       >
-        {{ slaStatusText }}
+        <fluent-icon
+          size="14"
+          :icon="slaStatus.icon"
+          type="outline"
+          :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
+          class="flex-shrink-0"
+          :class="slaTextStyles"
+        />
+        <span
+          v-if="showExtendedInfo"
+          class="text-xs font-medium"
+          :class="slaTextStyles"
+        >
+          {{ slaStatusText }}
+        </span>
+      </div>
+      <span
+        class="text-xs font-medium"
+        :class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
+      >
+        {{ slaStatus.threshold }}
       </span>
     </div>
-    <span
-      class="text-xs font-medium"
-      :class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
-    >
-      {{ slaStatus.threshold }}
-    </span>
+    <SLA-popover-card
+      v-if="showSlaPopoverCard"
+      :sla-missed-events="slaEvents"
+      class="right-0 top-7"
+    />
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import { evaluateSLAStatus } from '../helpers/SLAHelper';
+import SLAPopoverCard from './SLAPopoverCard.vue';
+import { mixin as clickaway } from 'vue-clickaway';
 
-// const REFRESH_INTERVAL = 60000;
+const REFRESH_INTERVAL = 60000;
 
 export default {
+  components: {
+    SLAPopoverCard,
+  },
+  mixins: [clickaway],
   props: {
     chat: {
       type: Object,
@@ -55,19 +73,27 @@ export default {
   data() {
     return {
       timer: null,
-      slaStatus: {},
+      showSlaPopover: false,
+      slaStatus: {
+        threshold: null,
+        isSlaMissed: false,
+        type: null,
+        icon: null,
+      },
     };
   },
   computed: {
-    ...mapGetters({
-      activeSLA: 'sla/getSLAById',
-    }),
     slaPolicyId() {
       return this.chat?.sla_policy_id;
     },
-    sla() {
-      if (!this.slaPolicyId) return null;
-      return this.activeSLA(this.slaPolicyId);
+    appliedSLA() {
+      return this.chat?.applied_sla;
+    },
+    slaEvents() {
+      return this.chat?.sla_events;
+    },
+    hasSlaThreshold() {
+      return this.slaStatus?.threshold;
     },
     isSlaMissed() {
       return this.slaStatus?.isSlaMissed;
@@ -79,12 +105,17 @@ export default {
     },
     slaStatusText() {
       const upperCaseType = this.slaStatus?.type?.toUpperCase(); // FRT, NRT, or RT
-      const statusKey = this.isSlaMissed ? 'BREACH' : 'DUE';
+      const statusKey = this.isSlaMissed ? 'MISSED' : 'DUE';
 
       return this.$t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
         status: this.$t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
       });
     },
+    showSlaPopoverCard() {
+      return (
+        this.showExtendedInfo && this.showSlaPopover && this.slaEvents.length
+      );
+    },
   },
   watch: {
     chat() {
@@ -93,10 +124,29 @@ export default {
   },
   mounted() {
     this.updateSlaStatus();
+    this.createTimer();
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
   },
   methods: {
+    createTimer() {
+      this.timer = setTimeout(() => {
+        this.updateSlaStatus();
+        this.createTimer();
+      }, REFRESH_INTERVAL);
+    },
     updateSlaStatus() {
-      this.slaStatus = evaluateSLAStatus(this.sla, this.chat);
+      this.slaStatus = evaluateSLAStatus(this.appliedSLA, this.chat);
+    },
+    openSlaPopover() {
+      if (!this.showExtendedInfo) return;
+      this.showSlaPopover = true;
+    },
+    closeSlaPopover() {
+      this.showSlaPopover = false;
     },
   },
 };

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

@@ -0,0 +1,35 @@
+<script setup>
+import { format, fromUnixTime } from 'date-fns';
+
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+});
+const formatDate = timestamp =>
+  format(fromUnixTime(timestamp), 'MMM dd, yyyy, hh:mm a');
+</script>
+<template>
+  <div class="flex justify-between w-full">
+    <span
+      class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-slate-600 dark:text-slate-200"
+    >
+      {{ label }}
+    </span>
+    <div class="flex flex-col w-full gap-2">
+      <span
+        v-for="item in items"
+        :key="item.id"
+        class="text-sm font-normal text-slate-900 dark:text-slate-25 text-right tabular-nums"
+      >
+        {{ formatDate(item.created_at) }}
+      </span>
+      <slot name="showMore" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,85 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+import wootConstants from 'dashboard/constants/globals';
+import SLAEventItem from './SLAEventItem.vue';
+
+const { SLA_MISS_TYPES } = wootConstants;
+
+const props = defineProps({
+  slaMissedEvents: {
+    type: Array,
+    required: true,
+  },
+});
+
+const shouldShowAllNrts = ref(false);
+
+const frtMisses = computed(() =>
+  props.slaMissedEvents.filter(
+    slaEvent => slaEvent.event_type === SLA_MISS_TYPES.FRT
+  )
+);
+const nrtMisses = computed(() => {
+  const missedEvents = props.slaMissedEvents.filter(
+    slaEvent => slaEvent.event_type === SLA_MISS_TYPES.NRT
+  );
+  return shouldShowAllNrts.value ? missedEvents : missedEvents.slice(0, 6);
+});
+const rtMisses = computed(() =>
+  props.slaMissedEvents.filter(
+    slaEvent => slaEvent.event_type === SLA_MISS_TYPES.RT
+  )
+);
+
+const shouldShowMoreNRTButton = computed(() => nrtMisses.value.length > 6);
+const toggleShowAllNRT = () => {
+  shouldShowAllNrts.value = !shouldShowAllNrts.value;
+};
+</script>
+<template>
+  <div
+    class="absolute flex flex-col items-start bg-[#fdfdfd] dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+  >
+    <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
+      {{ $t('SLA.EVENTS.TITLE') }}
+    </span>
+    <SLA-event-item
+      v-if="frtMisses.length"
+      :label="$t('SLA.EVENTS.FRT')"
+      :items="frtMisses"
+    />
+    <SLA-event-item
+      v-if="nrtMisses.length"
+      :label="$t('SLA.EVENTS.NRT')"
+      :items="nrtMisses"
+    >
+      <template #showMore>
+        <div
+          v-if="shouldShowMoreNRTButton"
+          class="flex flex-col items-end w-full"
+        >
+          <woot-button
+            size="small"
+            :icon="!shouldShowAllNrts ? 'plus-sign' : ''"
+            variant="link"
+            color-scheme="secondary"
+            class="hover:!no-underline !gap-1 hover:!bg-transparent dark:hover:!bg-transparent"
+            @click="toggleShowAllNRT"
+          >
+            {{
+              shouldShowAllNrts
+                ? $t('SLA.EVENTS.HIDE', { count: nrtMisses.length })
+                : $t('SLA.EVENTS.SHOW_MORE', { count: nrtMisses.length })
+            }}
+          </woot-button>
+        </div>
+      </template>
+    </SLA-event-item>
+    <SLA-event-item
+      v-if="rtMisses.length"
+      :label="$t('SLA.EVENTS.RT')"
+      :items="rtMisses"
+    />
+  </div>
+</template>

app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue

@@ -1,13 +1,14 @@
 <template>
   <div
-    v-show="activeLabels.length"
+    v-if="activeLabels.length || $slots.before"
     ref="labelContainer"
-    class="label-container mt-0.5 mx-2 mb-0"
+    v-resize="computeVisibleLabelPosition"
   >
     <div
-      class="labels-wrap flex items-end min-w-0 flex-shrink gap-y-1 flex-wrap"
-      :class="{ expand: showAllLabels }"
+      class="flex items-end flex-shrink min-w-0 gap-y-1"
+      :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
     >
+      <slot name="before" />
       <woot-label
         v-for="(label, index) in activeLabels"
         :key="label.id"
@@ -26,7 +27,7 @@
             ? $t('CONVERSATION.CARD.HIDE_LABELS')
             : $t('CONVERSATION.CARD.SHOW_LABELS')
         "
-        class="show-more--button sticky flex-shrink-0 right-0 mr-6 rtl:rotate-180"
+        class="sticky right-0 flex-shrink-0 mr-6 show-more--button rtl:rotate-180"
         color-scheme="secondary"
         variant="hollow"
         :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
@@ -45,6 +46,11 @@ export default {
       type: Number,
       required: true,
     },
+    conversationLabels: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -59,26 +65,34 @@ export default {
     },
   },
   mounted() {
+    // the problem here is that there is a certain amount of delay between the conversation
+    // card being mounted and the resize event eventually being triggered
+    // This means we need to run the function immediately after the component is mounted
+    // Happens especially when used in a virtual list.
+    // We can make the first trigger, a standard part of the directive, in case
+    // we face this issue again
     this.computeVisibleLabelPosition();
   },
   methods: {
     onShowLabels(e) {
       e.stopPropagation();
       this.showAllLabels = !this.showAllLabels;
+      this.$nextTick(() => this.computeVisibleLabelPosition());
     },
     computeVisibleLabelPosition() {
+      const beforeSlot = this.$slots.before ? 100 : 0;
       const labelContainer = this.$refs.labelContainer;
-      const labels = this.$refs.labelContainer.querySelectorAll('.label');
+      if (!labelContainer) return;
+
+      const labels = Array.from(labelContainer.querySelectorAll('.label'));
       let labelOffset = 0;
       this.showExpandLabelButton = false;
-
-      Array.from(labels).forEach((label, index) => {
+      labels.forEach((label, index) => {
         labelOffset += label.offsetWidth + 8;
-
-        if (labelOffset < labelContainer.clientWidth - 16) {
+        if (labelOffset < labelContainer.clientWidth - 16 - beforeSlot) {
           this.labelPosition = index;
         } else {
-          this.showExpandLabelButton = true;
+          this.showExpandLabelButton = labels.length > 1;
         }
       });
     },
@@ -95,10 +109,6 @@ export default {
 }
 
 .labels-wrap {
-  &.expand {
-    @apply h-auto overflow-visible flex-row flex-wrap;
-  }
-
   .secondary {
     @apply border border-solid border-slate-100 dark:border-slate-700;
   }

app/javascript/dashboard/components/widgets/conversation/helpers/SLAHelper.js

@@ -0,0 +1,117 @@
+const calculateThreshold = (timeOffset, threshold) => {
+  // Calculate the time left for the SLA to breach or the time since the SLA has missed
+  if (threshold === null) return null;
+  const currentTime = Math.floor(Date.now() / 1000);
+  return timeOffset + threshold - currentTime;
+};
+
+const findMostUrgentSLAStatus = SLAStatuses => {
+  // Sort the SLAs based on the threshold and return the most urgent SLA
+  SLAStatuses.sort(
+    (sla1, sla2) => Math.abs(sla1.threshold) - Math.abs(sla2.threshold)
+  );
+  return SLAStatuses[0];
+};
+
+const formatSLATime = seconds => {
+  const units = {
+    y: 31536000, // 60 * 60 * 24 * 365
+    mo: 2592000, // 60 * 60 * 24 * 30
+    d: 86400, // 60 * 60 * 24
+    h: 3600, // 60 * 60
+    m: 60,
+  };
+
+  if (seconds < 60) {
+    return '1m';
+  }
+
+  // we will only show two parts, two max granularity's, h-m, y-d, d-h, m, but no seconds
+  const parts = [];
+
+  Object.keys(units).forEach(unit => {
+    const value = Math.floor(seconds / units[unit]);
+    if (seconds < 60 && parts.length > 0) return;
+    if (parts.length === 2) return;
+    if (value > 0) {
+      parts.push(value + unit);
+      seconds -= value * units[unit];
+    }
+  });
+  return parts.join(' ');
+};
+
+const createSLAObject = (
+  type,
+  {
+    sla_first_response_time_threshold: frtThreshold,
+    sla_next_response_time_threshold: nrtThreshold,
+    sla_resolution_time_threshold: rtThreshold,
+    created_at: createdAt,
+  } = {},
+  {
+    first_reply_created_at: firstReplyCreatedAt,
+    waiting_since: waitingSince,
+    status,
+  } = {}
+) => {
+  // Mapping of breach types to their logic
+  const SLATypes = {
+    FRT: {
+      threshold: calculateThreshold(createdAt, frtThreshold),
+      //   Check FRT only if threshold is not null and first reply hasn't been made
+      condition:
+        frtThreshold !== null &&
+        (!firstReplyCreatedAt || firstReplyCreatedAt === 0),
+    },
+    NRT: {
+      threshold: calculateThreshold(waitingSince, nrtThreshold),
+      // Check NRT only if threshold is not null, first reply has been made and we are waiting since
+      condition:
+        nrtThreshold !== null && !!firstReplyCreatedAt && !!waitingSince,
+    },
+    RT: {
+      threshold: calculateThreshold(createdAt, rtThreshold),
+      // Check RT only if the conversation is open and threshold is not null
+      condition: status === 'open' && rtThreshold !== null,
+    },
+  };
+
+  const SLAStatus = SLATypes[type];
+  return SLAStatus ? { ...SLAStatus, type } : null;
+};
+
+const evaluateSLAConditions = (appliedSla, chat) => {
+  // Filter out the SLA based on conditions and update the object with the breach status(icon, isSlaMissed)
+  const SLATypes = ['FRT', 'NRT', 'RT'];
+  return SLATypes.map(type => createSLAObject(type, appliedSla, chat))
+    .filter(SLAStatus => SLAStatus && SLAStatus.condition)
+    .map(SLAStatus => ({
+      ...SLAStatus,
+      icon: SLAStatus.threshold <= 0 ? 'flame' : 'alarm',
+      isSlaMissed: SLAStatus.threshold <= 0,
+    }));
+};
+
+export const evaluateSLAStatus = (appliedSla, chat) => {
+  if (!appliedSla || !chat)
+    return { type: '', threshold: '', icon: '', isSlaMissed: false };
+
+  // Filter out the SLA and create the object for each breach
+  const SLAStatuses = evaluateSLAConditions(appliedSla, chat);
+
+  // Return the most urgent SLA which is latest to breach or has missed
+  const mostUrgent = findMostUrgentSLAStatus(SLAStatuses);
+  return mostUrgent
+    ? {
+        type: mostUrgent.type,
+        threshold: formatSLATime(
+          mostUrgent.threshold <= 0
+            ? -mostUrgent.threshold
+            : mostUrgent.threshold
+        ),
+        icon: mostUrgent.icon,
+        isSlaMissed: mostUrgent.isSlaMissed,
+      }
+    : { type: '', threshold: '', icon: '', isSlaMissed: false };
+};

app/javascript/dashboard/components/widgets/conversation/helpers/specs/SLAHelper.spec.js

@@ -0,0 +1,150 @@
+import { evaluateSLAStatus } from '../SLAHelper';
+
+beforeEach(() => {
+  jest
+    .spyOn(Date, 'now')
+    .mockImplementation(() => new Date('2024-01-01T00:00:00Z').getTime());
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('SLAHelper', () => {
+  describe('evaluateSLAStatus', () => {
+    it('returns an empty object when sla or chat is not present', () => {
+      expect(evaluateSLAStatus(null, null)).toEqual({
+        type: '',
+        threshold: '',
+        icon: '',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when FRT SLA is missed
+    it('correctly identifies a missed FRT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704066540,
+      };
+      const chatMissed = {
+        first_reply_created_at: 0,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'FRT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when FRT SLA is not missed
+    it('correctly identifies an FRT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704066660,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 0,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'FRT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when NRT SLA is missed
+    it('correctly identifies a missed NRT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065200,
+      };
+      const chatMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 1704065940,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'NRT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when NRT SLA is not missed
+    it('correctly identifies an NRT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065200 - 2000,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 1704066060,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'NRT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when RT SLA is missed
+    it('correctly identifies a missed RT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065340,
+      };
+      const chatMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'RT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when RT SLA is not missed
+    it('correctly identifies an RT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065460,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'RT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+  });
+});

app/javascript/dashboard/constants/globals.js

@@ -59,5 +59,10 @@ export default {
     TYPE: 'type',
     SORT_ORDER: 'sort_order',
   },
+  SLA_MISS_TYPES: {
+    FRT: 'frt',
+    NRT: 'nrt',
+    RT: 'rt',
+  },
 };
 export const DEFAULT_REDIRECT_URL = '/app/';

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -296,6 +296,8 @@
     "BUTTON": "Add custom attribute",
     "NOT_AVAILABLE": "There are no custom attributes available for this contact.",
     "COPY_SUCCESSFUL": "Copied to clipboard successfully",
+    "SHOW_MORE": "Show all attributes",
+    "SHOW_LESS": "Show less attributes",
     "ACTIONS": {
       "COPY": "Copy attribute",
       "DELETE": "Delete attribute",

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -69,7 +69,7 @@
         "FRT": "FRT {status}",
         "NRT": "NRT {status}",
         "RT": "RT {status}",
-        "BREACH": "breach",
+        "MISSED": "missed",
         "DUE": "due"
       }
     },

app/javascript/dashboard/i18n/locale/en/general.json

@@ -0,0 +1,5 @@
+{
+  "GENERAL": {
+    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
+  }
+}

app/javascript/dashboard/i18n/locale/en/index.js

@@ -31,6 +31,7 @@ import teamsSettings from './teamsSettings.json';
 import whatsappTemplates from './whatsappTemplates.json';
 import sla from './sla.json';
 import inbox from './inbox.json';
+import general from './general.json';
 
 export default {
   ...advancedFilters,
@@ -66,4 +67,5 @@ export default {
   ...teamsSettings,
   ...whatsappTemplates,
   ...inbox,
+  ...general,
 };

app/javascript/dashboard/i18n/locale/en/report.json

@@ -138,7 +138,11 @@
         "groupBy": "Year"
       }
     ],
-    "BUSINESS_HOURS": "Business Hours"
+    "BUSINESS_HOURS": "Business Hours",
+    "FILTER_ACTIONS": {
+      "CLEAR_FILTER": "Clear filter",
+      "EMPTY_LIST": "No results found"
+    }
   },
   "AGENT_REPORTS": {
     "HEADER": "Agents Overview",
@@ -516,5 +520,54 @@
     "THURSDAY": "Thursday",
     "FRIDAY": "Friday",
     "SATURDAY": "Saturday"
+  },
+  "SLA_REPORTS": {
+    "HEADER": "SLA Reports",
+    "NO_RECORDS": "SLA applied conversations are not available.",
+    "LOADING": "Loading SLA data...",
+    "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
+    "DOWNLOAD_FAILED": "Failed to download SLA Reports",
+    "DROPDOWN": {
+      "ADD_FIlTER": "Add filter",
+      "CLEAR_ALL": "Clear all",
+      "CLEAR_FILTER": "Clear filter",
+      "EMPTY_LIST": "No results found",
+      "NO_FILTER": "No filters available",
+      "SEARCH": "Search filter",
+      "INPUT_PLACEHOLDER": {
+        "SLA": "SLA name",
+        "AGENTS": "Agent name",
+        "INBOXES": "Inbox name",
+        "LABELS": "Label name",
+        "TEAMS": "Team name"
+      },
+      "SLA": "SLA Policy",
+      "INBOXES": "Inbox",
+      "AGENTS": "Agent",
+      "LABELS": "Label",
+      "TEAMS": "Team"
+    },
+    "METRICS": {
+      "HIT_RATE": {
+        "LABEL": "Hit Rate",
+        "TOOLTIP": "Percentage of SLAs created were completed successfully"
+      },
+      "NO_OF_MISSES": {
+        "LABEL": "Number of Misses",
+        "TOOLTIP": "Total SLA misses in a certain period"
+      },
+      "NO_OF_CONVERSATIONS": {
+        "LABEL": "Number of Conversations",
+        "TOOLTIP": "Total number of conversations with SLA"
+      }
+    },
+    "TABLE": {
+      "HEADER": {
+        "POLICY": "Policy",
+        "CONVERSATION": "Conversation",
+        "AGENT": "Agent"
+      },
+      "VIEW_DETAILS": "View Details"
+    }
   }
 }

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -83,7 +83,10 @@
         "CONVERSATION_CREATION": "Send email notifications when a new conversation is created",
         "CONVERSATION_MENTION": "Send email notifications when you are mentioned in a conversation",
         "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in an assigned conversation",
-        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in a participating conversation"
+        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in a participating conversation",
+        "SLA_MISSED_FIRST_RESPONSE": "Send email notifications when a conversation misses first response SLA",
+        "SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
+        "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
       },
       "API": {
         "UPDATE_SUCCESS": "Your notification preferences are updated successfully",
@@ -98,7 +101,10 @@
         "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Send push notifications when a new message is created in an assigned conversation",
         "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send push notifications when a new message is created in a participating conversation",
         "HAS_ENABLED_PUSH": "You have enabled push for this browser.",
-        "REQUEST_PUSH": "Enable push notifications"
+        "REQUEST_PUSH": "Enable push notifications",
+        "SLA_MISSED_FIRST_RESPONSE": "Send push notifications when a conversation misses first response SLA",
+        "SLA_MISSED_NEXT_RESPONSE": "Send push notifications when a conversation misses next response SLA",
+        "SLA_MISSED_RESOLUTION": "Send push notifications when a conversation misses resolution SLA"
       },
       "PROFILE_IMAGE": {
         "LABEL": "Profile Image"
@@ -234,6 +240,7 @@
     "CAMPAIGNS": "Campaigns",
     "ONGOING": "Ongoing",
     "ONE_OFF": "One off",
+    "REPORTS_SLA": "SLA",
     "REPORTS_BOT": "Bot",
     "REPORTS_AGENT": "Agents",
     "REPORTS_LABEL": "Labels",

app/javascript/dashboard/i18n/locale/en/sla.json

@@ -2,11 +2,18 @@
   "SLA": {
     "HEADER": "SLA",
     "ADD_ACTION": "Add SLA",
+    "ADD_ACTION_LONG": "Create a new SLA Policy",
     "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
     "LEARN_MORE": "Learn more about SLA",
     "LOADING": "Fetching SLAs",
     "LIST": {
       "404": "There are no SLAs available in this account.",
+      "EMPTY": {
+        "TITLE_1": "Enterprise P0",
+        "DESC_1": "Issues raised by enterprise customers, that require immediate attention.",
+        "TITLE_2": "Enterprise P1",
+        "DESC_2": "Issues raised by enterprise customers, that needs to be acknowledged quickly."
+      },
       "BUSINESS_HOURS_ON": "Business hours on",
       "BUSINESS_HOURS_OFF": "Business hours off",
       "RESPONSE_TYPES": {
@@ -58,7 +65,7 @@
     },
     "ADD": {
       "TITLE": "Add SLA",
-      "DESC": "SLAs: Friendly promises for great service!",
+      "DESC": "Friendly promises for great service!",
       "API": {
         "SUCCESS_MESSAGE": "SLA added successfully",
         "ERROR_MESSAGE": "There was an error, please try again"
@@ -76,6 +83,14 @@
         "YES": "Yes, Delete ",
         "NO": "No, Keep "
       }
+    },
+    "EVENTS": {
+      "TITLE": "SLA Misses",
+      "FRT": "First response time",
+      "NRT": "Next response time",
+      "RT": "Resolution time",
+      "SHOW_MORE": "{count} more",
+      "HIDE": "Hide {count} rows"
     }
   }
 }

app/javascript/dashboard/mixins/attributeMixin.js

@@ -29,33 +29,6 @@ export default {
     conversationId() {
       return this.currentChat.id;
     },
-
-    filteredAttributes() {
-      return Object.keys(this.customAttributes).map(key => {
-        const item = this.attributes.find(
-          attribute => attribute.attribute_key === key
-        );
-        if (item) {
-          return {
-            ...item,
-            value: this.customAttributes[key],
-          };
-        }
-
-        return {
-          ...item,
-          value: this.customAttributes[key],
-          attribute_description: key,
-          attribute_display_name: key,
-          attribute_display_type: this.attributeDisplayType(
-            this.customAttributes[key]
-          ),
-          attribute_key: key,
-          attribute_model: this.attributeType,
-          id: Math.random(),
-        };
-      });
-    },
   },
   methods: {
     isAttributeNumber(attributeValue) {

app/javascript/dashboard/mixins/conversation/labelMixin.js

@@ -4,10 +4,15 @@ export default {
   computed: {
     ...mapGetters({ accountLabels: 'labels/getLabels' }),
     savedLabels() {
+      // If conversationLabels is passed as prop, use it
+      if (this.conversationLabels)
+        return this.conversationLabels.split(',').map(item => item.trim());
+      // Otherwise, get labels from store
       return this.$store.getters['conversationLabels/getConversationLabels'](
         this.conversationId
       );
     },
+    // TODO - Get rid of this from the mixin
     activeLabels() {
       return this.accountLabels.filter(({ title }) =>
         this.savedLabels.includes(title)

app/javascript/dashboard/mixins/specs/attributeFixtures.js

@@ -1,26 +0,0 @@
-export default [
-  {
-    attribute_description: 'Product name',
-    attribute_display_name: 'Product name',
-    attribute_display_type: 'text',
-    attribute_key: 'product_name',
-    attribute_model: 'conversation_attribute',
-    created_at: '2021-09-03T10:45:09.587Z',
-    default_value: null,
-    id: 6,
-    updated_at: '2021-09-22T10:40:42.511Z',
-  },
-  {
-    attribute_description: 'Product identifier',
-    attribute_display_name: 'Product id',
-    attribute_display_type: 'number',
-    attribute_key: 'product_id',
-    attribute_model: 'conversation_attribute',
-    created_at: '2021-09-16T13:06:47.329Z',
-    default_value: null,
-    icon: 'fluent-calculator',
-    id: 10,
-    updated_at: '2021-09-22T10:42:25.873Z',
-    value: 2021,
-  },
-];

app/javascript/dashboard/mixins/specs/attributeMixin.spec.js

@@ -1,7 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import attributeMixin from '../attributeMixin';
 import Vuex from 'vuex';
-import attributeFixtures from './attributeFixtures';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -41,43 +40,6 @@ describe('attributeMixin', () => {
     expect(wrapper.vm.conversationId).toEqual(7165);
   });
 
-  it('returns filtered attributes from conversation custom attributes', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-      computed: {
-        attributes() {
-          return attributeFixtures;
-        },
-        contact() {
-          return {
-            id: 7165,
-            custom_attributes: {
-              product_id: 2021,
-            },
-          };
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.filteredAttributes).toEqual([
-      {
-        attribute_description: 'Product identifier',
-        attribute_display_name: 'Product id',
-        attribute_display_type: 'number',
-        attribute_key: 'product_id',
-        attribute_model: 'conversation_attribute',
-        created_at: '2021-09-16T13:06:47.329Z',
-        default_value: null,
-        icon: 'fluent-calculator',
-        id: 10,
-        updated_at: '2021-09-22T10:42:25.873Z',
-        value: 2021,
-      },
-    ]);
-  });
-
   it('return display type if attribute passed', () => {
     const Component = {
       render() {},

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -38,13 +38,10 @@
                 :contact-id="contact.id"
                 attribute-type="contact_attribute"
                 attribute-class="conversation--attribute"
+                attribute-from="contact_panel"
                 :custom-attributes="contact.custom_attributes"
                 class="even"
               />
-              <custom-attribute-selector
-                attribute-type="contact_attribute"
-                :contact-id="contact.id"
-              />
             </accordion-item>
           </div>
           <div v-if="element.name === 'contact_labels'">
@@ -85,7 +82,6 @@ import ContactConversations from 'dashboard/routes/dashboard/conversation/Contac
 import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
 import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
 import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
-import CustomAttributeSelector from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue';
 import draggable from 'vuedraggable';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
@@ -96,7 +92,6 @@ export default {
     ContactInfo,
     ContactLabel,
     CustomAttributes,
-    CustomAttributeSelector,
     draggable,
   },
   mixins: [uiSettingsMixin],

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue

@@ -25,6 +25,7 @@
         @on-sort-change="onSortChange"
       />
       <table-footer
+        class="border-t border-slate-75 dark:border-slate-700/50"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
         :page-size="15"

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -87,10 +87,7 @@
                 attribute-type="contact_attribute"
                 attribute-class="conversation--attribute"
                 class="even"
-                :contact-id="contact.id"
-              />
-              <custom-attribute-selector
-                attribute-type="contact_attribute"
+                attribute-from="conversation_contact_panel"
                 :contact-id="contact.id"
               />
             </accordion-item>
@@ -142,7 +139,6 @@ import ConversationParticipant from './ConversationParticipant.vue';
 import ContactInfo from './contact/ContactInfo.vue';
 import ConversationInfo from './ConversationInfo.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
-import CustomAttributeSelector from './customAttributes/CustomAttributeSelector.vue';
 import draggable from 'vuedraggable';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import MacrosList from './Macros/List.vue';
@@ -154,7 +150,6 @@ export default {
     ContactInfo,
     ConversationInfo,
     CustomAttributes,
-    CustomAttributeSelector,
     ConversationAction,
     ConversationParticipant,
     draggable,

app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue

@@ -1,152 +1,109 @@
-<template>
-  <div class="conversation--details">
-    <contact-details-item
-      v-if="initiatedAt"
-      :title="$t('CONTACT_PANEL.INITIATED_AT')"
-      :value="initiatedAt.timestamp"
-      class="conversation--attribute"
-    />
-    <contact-details-item
-      v-if="browserLanguage"
-      :title="$t('CONTACT_PANEL.BROWSER_LANGUAGE')"
-      :value="browserLanguage"
-      class="conversation--attribute"
-    />
-    <contact-details-item
-      v-if="referer"
-      :title="$t('CONTACT_PANEL.INITIATED_FROM')"
-      :value="referer"
-      class="conversation--attribute"
-    >
-      <a :href="referer" rel="noopener noreferrer nofollow" target="_blank">
-        {{ referer }}
-      </a>
-    </contact-details-item>
-    <contact-details-item
-      v-if="browserName"
-      :title="$t('CONTACT_PANEL.BROWSER')"
-      :value="browserName"
-      class="conversation--attribute"
-    />
-    <contact-details-item
-      v-if="platformName"
-      :title="$t('CONTACT_PANEL.OS')"
-      :value="platformName"
-      class="conversation--attribute"
-    />
-    <contact-details-item
-      v-if="ipAddress"
-      :title="$t('CONTACT_PANEL.IP_ADDRESS')"
-      :value="ipAddress"
-      class="conversation--attribute"
-    />
-    <custom-attributes
-      attribute-type="conversation_attribute"
-      attribute-class="conversation--attribute"
-      :class="customAttributeRowClass"
-    />
-    <custom-attribute-selector attribute-type="conversation_attribute" />
-  </div>
-</template>
-
-<script>
-import { getLanguageName } from '../../../components/widgets/conversation/advancedFilterItems/languages';
+<script setup>
+import { computed } from 'vue';
+import { getLanguageName } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import ContactDetailsItem from './ContactDetailsItem.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
-import CustomAttributeSelector from './customAttributes/CustomAttributeSelector.vue';
+const props = defineProps({
+  conversationAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  contactAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+});
 
-export default {
-  components: {
-    ContactDetailsItem,
-    CustomAttributes,
-    CustomAttributeSelector,
-  },
-  props: {
-    conversationAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-    contactAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  STATIC_ATTRIBUTES: [
+const referer = computed(() => props.conversationAttributes.referer);
+const initiatedAt = computed(
+  () => props.conversationAttributes.initiated_at?.timestamp
+);
+
+const browserInfo = props.conversationAttributes.browser;
+
+const browserName = computed(() => {
+  if (!browserInfo) return '';
+  const { browser_name: name = '', browser_version: version = '' } =
+    browserInfo;
+  return `${name} ${version}`;
+});
+
+const browserLanguage = computed(() =>
+  getLanguageName(props.conversationAttributes.browser_language)
+);
+
+const platformName = computed(() => {
+  if (!browserInfo) return '';
+  const { platform_name: name = '', platform_version: version = '' } =
+    browserInfo;
+  return `${name} ${version}`;
+});
+
+const createdAtIp = computed(() => props.contactAttributes.created_at_ip);
+
+const staticElements = computed(() =>
+  [
     {
-      name: 'initiated_at',
-      label: 'CONTACT_PANEL.INITIATED_AT',
+      content: initiatedAt,
+      title: 'CONTACT_PANEL.INITIATED_AT',
     },
     {
-      name: 'referer',
-      label: 'CONTACT_PANEL.BROWSER',
+      content: browserLanguage,
+      title: 'CONTACT_PANEL.BROWSER_LANGUAGE',
     },
     {
-      name: 'browserName',
-      label: 'CONTACT_PANEL.BROWSER',
+      content: referer,
+      title: 'CONTACT_PANEL.INITIATED_FROM',
+      type: 'link',
     },
     {
-      name: 'platformName',
-      label: 'CONTACT_PANEL.OS',
+      content: browserName,
+      title: 'CONTACT_PANEL.BROWSER',
     },
     {
-      name: 'ipAddress',
-      label: 'CONTACT_PANEL.IP_ADDRESS',
+      content: platformName,
+      title: 'CONTACT_PANEL.OS',
     },
-  ],
-  computed: {
-    referer() {
-      return this.conversationAttributes.referer;
+    {
+      content: createdAtIp,
+      title: 'CONTACT_PANEL.IP_ADDRESS',
     },
-    initiatedAt() {
-      return this.conversationAttributes.initiated_at;
-    },
-    browserName() {
-      if (!this.conversationAttributes.browser) {
-        return '';
-      }
-      const {
-        browser_name: browserName = '',
-        browser_version: browserVersion = '',
-      } = this.conversationAttributes.browser;
-      return `${browserName} ${browserVersion}`;
-    },
-    browserLanguage() {
-      return getLanguageName(this.conversationAttributes.browser_language);
-    },
-    platformName() {
-      if (!this.conversationAttributes.browser) {
-        return '';
-      }
-      const { platform_name: platformName, platform_version: platformVersion } =
-        this.conversationAttributes.browser;
-      return `${platformName || ''} ${platformVersion || ''}`;
-    },
-    ipAddress() {
-      const { created_at_ip: createdAtIp } = this.contactAttributes;
-      return createdAtIp;
-    },
-    customAttributeRowClass() {
-      const attributes = [
-        'initiatedAt',
-        'referer',
-        'browserName',
-        'platformName',
-        'ipAddress',
-      ];
-      const availableAttributes = attributes.filter(
-        attribute => !!this[attribute]
-      );
-      return availableAttributes.length % 2 === 0 ? 'even' : 'odd';
-    },
-  },
-};
+  ].filter(attribute => !!attribute.content.value)
+);
 </script>
+
+<template>
+  <div class="conversation--details">
+    <ContactDetailsItem
+      v-for="element in staticElements"
+      :key="element.title"
+      :title="$t(element.title)"
+      :value="element.content.value"
+      class="conversation--attribute"
+    >
+      <a
+        v-if="element.type === 'link'"
+        :href="referer"
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+        class="text-woot-400 dark:text-woot-600"
+      >
+        {{ referer }}
+      </a>
+    </ContactDetailsItem>
+    <CustomAttributes
+      :class="staticElements.length % 2 === 0 ? 'even' : 'odd'"
+      attribute-class="conversation--attribute"
+      attribute-from="conversation_panel"
+      attribute-type="conversation_attribute"
+    />
+  </div>
+</template>
 <style scoped lang="scss">
 .conversation--attribute {
-  @apply border-slate-50 dark:border-slate-700 border-b border-solid;
-
+  @apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
   &:nth-child(2n) {
-    @apply bg-slate-25 dark:bg-slate-800;
+    @apply bg-slate-25 dark:bg-slate-800/50;
   }
 }
 </style>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

@@ -125,8 +125,9 @@
       >
         <span
           class="flex items-center h-10 px-2 text-sm border-solid bg-slate-50 border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600"
-          >{{ socialProfile.prefixURL }}</span
         >
+          {{ socialProfile.prefixURL }}
+        </span>
         <input
           v-model="socialProfileUserNames[socialProfile.key]"
           class="input-group-field ltr:rounded-l-none rtl:rounded-r-none !mb-0"

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="flex flex-col w-full max-h-[12.5rem]">
-    <h4
-      class="text-sm text-slate-800 dark:text-slate-100 mb-1 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
-    >
-      {{ $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.TITLE') }}
-    </h4>
-    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
-      <input
-        ref="searchbar"
-        v-model="search"
-        type="text"
-        class="search-input"
-        autofocus="true"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.PLACEHOLDER')"
-      />
-    </div>
-    <div
-      class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto h-32"
-    >
-      <div class="w-full h-full">
-        <woot-dropdown-menu>
-          <custom-attribute-drop-down-item
-            v-for="attribute in filteredAttributes"
-            :key="attribute.attribute_display_name"
-            :title="attribute.attribute_display_name"
-            @click="onAddAttribute(attribute)"
-          />
-        </woot-dropdown-menu>
-        <div
-          v-if="noResult"
-          class="w-full justify-center items-center flex mb-2 h-[70%] text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
-        >
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_SELECT.NO_RESULT') }}
-        </div>
-        <woot-button
-          class="float-right"
-          icon="add"
-          size="tiny"
-          @click="addNewAttribute"
-        >
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.ADD.TITLE') }}
-        </woot-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CustomAttributeDropDownItem from './CustomAttributeDropDownItem.vue';
-import attributeMixin from 'dashboard/mixins/attributeMixin';
-export default {
-  components: {
-    CustomAttributeDropDownItem,
-  },
-  mixins: [attributeMixin],
-  props: {
-    attributeType: {
-      type: String,
-      default: 'conversation_attribute',
-    },
-    contactId: { type: Number, default: null },
-  },
-
-  data() {
-    return {
-      search: '',
-    };
-  },
-
-  computed: {
-    filteredAttributes() {
-      return this.attributes
-        .filter(
-          item =>
-            !Object.keys(this.customAttributes).includes(item.attribute_key)
-        )
-        .filter(attribute => {
-          return attribute.attribute_display_name
-            .toLowerCase()
-            .includes(this.search.toLowerCase());
-        });
-    },
-
-    noResult() {
-      return this.filteredAttributes.length === 0;
-    },
-  },
-
-  mounted() {
-    this.focusInput();
-  },
-
-  methods: {
-    focusInput() {
-      this.$refs.searchbar.focus();
-    },
-    addNewAttribute() {
-      this.$router.push(
-        `/app/accounts/${this.accountId}/settings/custom-attributes/list`
-      );
-    },
-    async onAddAttribute(attribute) {
-      this.$emit('add-attribute', attribute);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.search-input {
-  @apply m-0 w-full border border-solid border-transparent h-8 text-sm text-slate-700 dark:text-slate-100 rounded-md focus:border-woot-500 bg-slate-50 dark:bg-slate-900;
-}
-</style>

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDownItem.vue

@@ -1,79 +0,0 @@
-<template>
-  <woot-dropdown-item>
-    <woot-button variant="clear" @click="onClick">
-      <span class="label-text" :title="title">{{ title }}</span>
-    </woot-button>
-  </woot-dropdown-item>
-</template>
-
-<script>
-export default {
-  name: 'AttributeDropDownItem',
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('click', this.title);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.item-wrap {
-  display: flex;
-
-  ::v-deep .button__content {
-    width: 100%;
-  }
-
-  .button-wrap {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-
-    &.active {
-      display: flex;
-      font-weight: var(--font-weight-bold);
-      color: var(--w-700);
-    }
-
-    .name-label-wrap {
-      display: flex;
-      min-width: 0;
-      width: 100%;
-
-      .label-color--display {
-        margin-right: var(--space-small);
-      }
-
-      .label-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        line-height: 1.1;
-        padding-right: var(--space-small);
-        padding-left: var(--space-small);
-      }
-
-      .icon {
-        font-size: var(--font-size-small);
-      }
-    }
-  }
-
-  .label-color--display {
-    border-radius: var(--border-radius-normal);
-    height: var(--space-slab);
-    margin-right: var(--space-smaller);
-    margin-top: var(--space-micro);
-    min-width: var(--space-slab);
-    width: var(--space-slab);
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="custom-attribute--selector">
-    <div
-      v-on-clickaway="closeDropdown"
-      class="label-wrap"
-      @keyup.esc="closeDropdown"
-    >
-      <woot-button
-        size="small"
-        variant="link"
-        icon="add"
-        @click="toggleAttributeDropDown"
-      >
-        {{ $t('CUSTOM_ATTRIBUTES.ADD_BUTTON_TEXT') }}
-      </woot-button>
-
-      <div class="dropdown-wrap">
-        <div
-          :class="{ 'dropdown-pane--open': showAttributeDropDown }"
-          class="dropdown-pane"
-        >
-          <custom-attribute-drop-down
-            v-if="showAttributeDropDown"
-            :attribute-type="attributeType"
-            :contact-id="contactId"
-            @add-attribute="addAttribute"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CustomAttributeDropDown from './CustomAttributeDropDown.vue';
-import alertMixin from 'shared/mixins/alertMixin';
-import attributeMixin from 'dashboard/mixins/attributeMixin';
-import { mixin as clickaway } from 'vue-clickaway';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-
-export default {
-  components: {
-    CustomAttributeDropDown,
-  },
-  mixins: [clickaway, alertMixin, attributeMixin],
-  props: {
-    attributeType: {
-      type: String,
-      default: 'conversation_attribute',
-    },
-    contactId: { type: Number, default: null },
-  },
-  data() {
-    return {
-      showAttributeDropDown: false,
-    };
-  },
-  methods: {
-    async addAttribute(attribute) {
-      try {
-        const {
-          attribute_key: attributeKey,
-          attribute_display_type: attributeDisplayType,
-          default_value: attributeDefaultValue,
-        } = attribute;
-        const isCheckbox = attributeDisplayType === 'checkbox';
-        const defaultValue = isCheckbox ? false : attributeDefaultValue || null;
-        if (this.attributeType === 'conversation_attribute') {
-          await this.$store.dispatch('updateCustomAttributes', {
-            conversationId: this.conversationId,
-            customAttributes: {
-              ...this.customAttributes,
-              [attributeKey]: defaultValue,
-            },
-          });
-        } else {
-          await this.$store.dispatch('contacts/update', {
-            id: this.contactId,
-            custom_attributes: {
-              ...this.customAttributes,
-              [attributeKey]: defaultValue,
-            },
-          });
-        }
-        bus.$emit(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, attributeKey);
-        this.showAlert(this.$t('CUSTOM_ATTRIBUTES.FORM.ADD.SUCCESS'));
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message ||
-          this.$t('CUSTOM_ATTRIBUTES.FORM.ADD.ERROR');
-        this.showAlert(errorMessage);
-      } finally {
-        this.closeDropdown();
-      }
-    },
-
-    toggleAttributeDropDown() {
-      this.showAttributeDropDown = !this.showAttributeDropDown;
-    },
-
-    closeDropdown() {
-      this.showAttributeDropDown = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.custom-attribute--selector {
-  width: 100%;
-  padding: var(--space-slab) var(--space-normal);
-
-  .label-wrap {
-    line-height: var(--space-medium);
-    position: relative;
-
-    .dropdown-wrap {
-      display: flex;
-      left: -1px;
-      margin-right: var(--space-medium);
-      position: absolute;
-      top: var(--space-medium);
-      width: 100%;
-
-      .dropdown-pane {
-        width: 100%;
-        box-sizing: border-box;
-      }
-    }
-  }
-}
-
-.error {
-  color: var(--r-500);
-  font-size: var(--font-size-mini);
-  font-weight: var(--font-weight-medium);
-}
-</style>

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue

@@ -1,23 +1,35 @@
 <template>
   <div class="custom-attributes--panel">
     <custom-attribute
-      v-for="attribute in filteredAttributes"
+      v-for="attribute in displayedAttributes"
       :key="attribute.id"
       :attribute-key="attribute.attribute_key"
       :attribute-type="attribute.attribute_display_type"
       :values="attribute.attribute_values"
       :label="attribute.attribute_display_name"
-      :icon="attribute.icon"
-      emoji=""
       :value="attribute.value"
       :show-actions="true"
       :attribute-regex="attribute.regex_pattern"
       :regex-cue="attribute.regex_cue"
       :class="attributeClass"
+      :contact-id="contactId"
       @update="onUpdate"
       @delete="onDelete"
       @copy="onCopy"
     />
+    <!-- Show more and show less buttons show it if the filteredAttributes length is greater than 5 -->
+    <div v-if="filteredAttributes.length > 5" class="flex px-2 py-2">
+      <woot-button
+        size="small"
+        :icon="showAllAttributes ? 'chevron-up' : 'chevron-down'"
+        variant="clear"
+        color-scheme="primary"
+        class="!px-2 hover:!bg-transparent dark:hover:!bg-transparent"
+        @click="onClickToggle"
+      >
+        {{ toggleButtonText }}
+      </woot-button>
+    </div>
   </div>
 </template>
 
@@ -25,13 +37,14 @@
 import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import attributeMixin from 'dashboard/mixins/attributeMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 
 export default {
   components: {
     CustomAttribute,
   },
-  mixins: [alertMixin, attributeMixin],
+  mixins: [alertMixin, attributeMixin, uiSettingsMixin],
   props: {
     attributeType: {
       type: String,
@@ -42,8 +55,67 @@ export default {
       default: '',
     },
     contactId: { type: Number, default: null },
+    attributeFrom: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showAllAttributes: false,
+    };
+  },
+  computed: {
+    toggleButtonText() {
+      return !this.showAllAttributes
+        ? this.$t('CUSTOM_ATTRIBUTES.SHOW_MORE')
+        : this.$t('CUSTOM_ATTRIBUTES.SHOW_LESS');
+    },
+    filteredAttributes() {
+      return this.attributes.map(attribute => {
+        // Check if the attribute key exists in customAttributes
+        const hasValue = Object.hasOwnProperty.call(
+          this.customAttributes,
+          attribute.attribute_key
+        );
+
+        const isCheckbox = attribute.attribute_display_type === 'checkbox';
+        const defaultValue = isCheckbox ? false : '';
+
+        return {
+          ...attribute,
+          // Set value from customAttributes if it exists, otherwise use default value
+          value: hasValue
+            ? this.customAttributes[attribute.attribute_key]
+            : defaultValue,
+        };
+      });
+    },
+    displayedAttributes() {
+      // Show only the first 5 attributes or all depending on showAllAttributes
+      if (this.showAllAttributes || this.filteredAttributes.length <= 5) {
+        return this.filteredAttributes;
+      }
+      return this.filteredAttributes.slice(0, 5);
+    },
+    showMoreUISettingsKey() {
+      return `show_all_attributes_${this.attributeFrom}`;
+    },
+  },
+  mounted() {
+    this.initializeSettings();
   },
   methods: {
+    initializeSettings() {
+      this.showAllAttributes =
+        this.uiSettings[this.showMoreUISettingsKey] || false;
+    },
+    onClickToggle() {
+      this.showAllAttributes = !this.showAllAttributes;
+      this.updateUISettings({
+        [this.showMoreUISettingsKey]: this.showAllAttributes,
+      });
+    },
     async onUpdate(key, value) {
       const updatedAttributes = { ...this.customAttributes, [key]: value };
       try {
@@ -96,16 +168,17 @@ export default {
   },
 };
 </script>
+
 <style scoped lang="scss">
 .custom-attributes--panel {
   .conversation--attribute {
-    @apply border-slate-50 dark:border-slate-700 border-b border-solid;
+    @apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
   }
 
   &.odd {
     .conversation--attribute {
       &:nth-child(2n + 1) {
-        @apply bg-slate-25 dark:bg-slate-800;
+        @apply bg-slate-25 dark:bg-slate-800/50;
       }
     }
   }
@@ -113,7 +186,7 @@ export default {
   &.even {
     .conversation--attribute {
       &:nth-child(2n) {
-        @apply bg-slate-25 dark:bg-slate-800;
+        @apply bg-slate-25 dark:bg-slate-800/50;
       }
     }
   }

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue

@@ -59,7 +59,7 @@
       :current-page="currentPage"
       :total-count="totalCount"
       :page-size="pageSize"
-      class="dark:bg-slate-900 sticky bottom-0"
+      class="dark:bg-slate-900 bottom-0 border-t border-slate-75 dark:border-slate-700/50"
       @page-change="onPageChange"
     />
   </div>

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue

@@ -9,6 +9,7 @@
         :on-mark-all-done-click="onMarkAllDoneClick"
       />
       <table-footer
+        class="border-t border-slate-75 dark:border-slate-700/50"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
         :page-size="15"

app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue

@@ -57,7 +57,7 @@
       :current-page="Number(meta.currentPage)"
       :total-count="meta.totalEntries"
       :page-size="meta.perPage"
-      class="dark:bg-slate-900"
+      class="!bg-slate-25 dark:!bg-slate-900 border-t border-slate-75 dark:border-slate-700/50"
       @page-change="onPageChange"
     />
   </div>

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -589,7 +589,9 @@ export default {
       return this.inbox.name;
     },
     canLocktoSingleConversation() {
-      return this.isASmsInbox || this.isAWhatsAppChannel;
+      return (
+        this.isASmsInbox || this.isAWhatsAppChannel || this.isAFacebookInbox
+      );
     },
     inboxNameLabel() {
       if (this.isAWebWidgetInbox) {

app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue

@@ -236,6 +236,54 @@
             }}
           </label>
         </div>
+        <div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
+          <input
+            v-model="selectedEmailFlags"
+            class="notification--checkbox"
+            type="checkbox"
+            value="email_sla_missed_first_response"
+            @input="handleEmailInput"
+          />
+          <label for="sla_missed_first_response">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.SLA_MISSED_FIRST_RESPONSE'
+              )
+            }}
+          </label>
+        </div>
+        <div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
+          <input
+            v-model="selectedEmailFlags"
+            class="notification--checkbox"
+            type="checkbox"
+            value="email_sla_missed_next_response"
+            @input="handleEmailInput"
+          />
+          <label for="sla_missed_next_response">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.SLA_MISSED_NEXT_RESPONSE'
+              )
+            }}
+          </label>
+        </div>
+        <div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
+          <input
+            v-model="selectedEmailFlags"
+            class="notification--checkbox"
+            type="checkbox"
+            value="email_sla_missed_resolution"
+            @input="handleEmailInput"
+          />
+          <label for="sla_missed_resolution">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.SLA_MISSED_RESOLUTION'
+              )
+            }}
+          </label>
+        </div>
       </div>
     </div>
     <div
@@ -352,6 +400,57 @@
             }}
           </label>
         </div>
+
+        <div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
+          <input
+            v-model="selectedPushFlags"
+            class="notification--checkbox"
+            type="checkbox"
+            value="push_sla_missed_first_response"
+            @input="handlePushInput"
+          />
+          <label for="sla_missed_first_response">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.SLA_MISSED_FIRST_RESPONSE'
+              )
+            }}
+          </label>
+        </div>
+
+        <div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
+          <input
+            v-model="selectedPushFlags"
+            class="notification--checkbox"
+            type="checkbox"
+            value="push_sla_missed_next_response"
+            @input="handlePushInput"
+          />
+          <label for="sla_missed_next_response">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.SLA_MISSED_NEXT_RESPONSE'
+              )
+            }}
+          </label>
+        </div>
+
+        <div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
+          <input
+            v-model="selectedPushFlags"
+            class="notification--checkbox"
+            type="checkbox"
+            value="push_sla_missed_resolution"
+            @input="handlePushInput"
+          />
+          <label for="sla_missed_resolution">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.SLA_MISSED_RESOLUTION'
+              )
+            }}
+          </label>
+        </div>
       </div>
     </div>
   </div>
@@ -367,6 +466,7 @@ import {
   requestPushPermissions,
   verifyServiceWorkerExistence,
 } from '../../../../helper/pushHelper';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 export default {
   mixins: [alertMixin, configMixin, uiSettingsMixin],
@@ -393,13 +493,18 @@ export default {
   },
   computed: {
     ...mapGetters({
+      accountId: 'getCurrentAccountId',
       emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
       pushFlags: 'userNotificationSettings/getSelectedPushFlags',
       uiSettings: 'getUISettings',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     hasPushAPISupport() {
       return !!('Notification' in window);
     },
+    isSLAEnabled() {
+      return this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.SLA);
+    },
   },
   watch: {
     emailFlags(value) {

app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
+    <SLAReportFilters @filter-change="onFilterChange" />
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
+    </woot-button>
+    <div class="flex flex-col gap-6">
+      <SLAMetrics
+        :hit-rate="slaMetrics.hitRate"
+        :no-of-breaches="slaMetrics.numberOfSLAMisses"
+        :no-of-conversations="slaMetrics.numberOfConversations"
+        :is-loading="uiFlags.isFetchingMetrics"
+      />
+      <SLATable
+        :sla-reports="slaReports"
+        :is-loading="uiFlags.isFetching"
+        :current-page="Number(slaMeta.currentPage)"
+        :total-count="Number(slaMeta.count)"
+        @page-change="onPageChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import SLAMetrics from './components/SLA/SLAMetrics.vue';
+import SLATable from './components/SLA/SLATable.vue';
+import alertMixin from 'shared/mixins/alertMixin';
+import SLAReportFilters from './components/SLA/SLAReportFilters.vue';
+import { generateFileName } from 'dashboard/helper/downloadHelper';
+export default {
+  name: 'SLAReports',
+  components: {
+    SLAMetrics,
+    SLATable,
+    SLAReportFilters,
+  },
+  mixins: [alertMixin],
+  data() {
+    return {
+      pageNumber: 1,
+      activeFilter: {
+        from: 0,
+        to: 0,
+        assigned_agent_id: null,
+        inbox_id: null,
+        team_id: null,
+        sla_policy_id: null,
+        label_list: null,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({
+      slaReports: 'slaReports/getAll',
+      slaMetrics: 'slaReports/getMetrics',
+      slaMeta: 'slaReports/getMeta',
+      uiFlags: 'slaReports/getUIFlags',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('agents/get');
+    this.$store.dispatch('inboxes/get');
+    this.$store.dispatch('teams/get');
+    this.$store.dispatch('labels/get');
+    this.$store.dispatch('sla/get');
+    this.fetchSLAMetrics();
+    this.fetchSLAReports();
+  },
+  methods: {
+    fetchSLAReports({ pageNumber } = {}) {
+      this.$store.dispatch('slaReports/get', {
+        page: pageNumber || this.pageNumber,
+        ...this.activeFilter,
+      });
+    },
+    fetchSLAMetrics() {
+      this.$store.dispatch('slaReports/getMetrics', this.activeFilter);
+    },
+    onPageChange(pageNumber) {
+      this.fetchSLAReports({ pageNumber });
+    },
+    onFilterChange(params) {
+      this.activeFilter = params;
+      this.fetchSLAReports();
+      this.fetchSLAMetrics();
+    },
+    downloadReports() {
+      const type = 'sla';
+      try {
+        this.$store.dispatch('slaReports/download', {
+          fileName: generateFileName({ type, to: this.to }),
+          ...this.requestPayload,
+        });
+      } catch (error) {
+        this.showAlert(this.$t('SLA_REPORTS.DOWNLOAD_FAILED'));
+      }
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-col md:flex-row justify-between mb-4">
-    <div class="md:grid flex flex-col filter-container gap-3 w-full">
+    <div
+      class="md:grid flex-col gap-3 w-full grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] p-5"
+    >
       <reports-filters-date-range @on-range-change="onDateRangeChange" />
       <woot-date-range-picker
         v-if="isDateRangeSelected"

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue

@@ -0,0 +1,74 @@
+<script setup>
+import FilterButton from './FilterButton.vue';
+import FilterListDropdown from './FilterListDropdown.vue';
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: Number,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  activeFilterType: {
+    type: String,
+    default: '',
+  },
+  showMenu: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  enableSearch: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'toggleDropdown',
+  'removeFilter',
+  'addFilter',
+  'closeDropdown',
+]);
+const toggleDropdown = () => emit('toggleDropdown', props.type);
+const removeFilter = () => emit('removeFilter', props.type);
+const addFilter = item => emit('addFilter', item);
+const closeDropdown = () => emit('closeDropdown');
+</script>
+
+<template>
+  <filter-button
+    right-icon="chevron-down"
+    :button-text="name"
+    class="bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
+    @click="toggleDropdown"
+  >
+    <template v-if="showMenu && activeFilterType === type" #dropdown>
+      <filter-list-dropdown
+        v-if="options"
+        v-on-clickaway="closeDropdown"
+        show-clear-filter
+        :list-items="options"
+        :active-filter-id="id"
+        :input-placeholder="placeholder"
+        :enable-search="enableSearch"
+        class="flex flex-col w-[240px] overflow-y-auto left-0 md:left-auto md:right-0 top-10"
+        @click="addFilter"
+        @removeFilter="removeFilter"
+      />
+    </template>
+  </filter-button>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/AddFilterChip.vue

@@ -0,0 +1,98 @@
+<script setup>
+import FilterButton from './FilterButton.vue';
+import FilterListDropdown from './FilterListDropdown.vue';
+import FilterListItemButton from './FilterListItemButton.vue';
+import FilterDropdownEmptyState from './FilterDropdownEmptyState.vue';
+
+import { ref } from 'vue';
+
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  menuOption: {
+    type: Array,
+    default: () => [],
+  },
+  showMenu: {
+    type: Boolean,
+    default: false,
+  },
+  placeholderI18nKey: {
+    type: String,
+    default: '',
+  },
+  enableSearch: {
+    type: Boolean,
+    default: true,
+  },
+  emptyStateMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const hoveredItemId = ref(null);
+
+const showSubMenu = id => {
+  hoveredItemId.value = id;
+};
+
+const hideSubMenu = () => {
+  hoveredItemId.value = null;
+};
+
+const isHovered = id => hoveredItemId.value === id;
+
+const emit = defineEmits(['toggleDropdown', 'addFilter', 'closeDropdown']);
+const toggleDropdown = () => emit('toggleDropdown');
+const addFilter = item => {
+  emit('addFilter', item);
+  hideSubMenu();
+};
+const closeDropdown = () => {
+  hideSubMenu();
+  emit('closeDropdown');
+};
+</script>
+
+<template>
+  <filter-button :button-text="name" left-icon="filter" @click="toggleDropdown">
+    <!-- Dropdown with search and sub-dropdown -->
+    <template v-if="showMenu" #dropdown>
+      <filter-list-dropdown
+        v-on-clickaway="closeDropdown"
+        class="left-0 md:right-0 top-10"
+      >
+        <template #listItem>
+          <filter-dropdown-empty-state
+            v-if="!menuOption.length"
+            :message="emptyStateMessage"
+          />
+          <filter-list-item-button
+            v-for="item in menuOption"
+            :key="item.id"
+            :button-text="item.name"
+            @mouseenter="showSubMenu(item.id)"
+            @mouseleave="hideSubMenu"
+            @focus="showSubMenu(item.id)"
+          >
+            <!-- Submenu with search and clear button  -->
+            <template v-if="item.options && isHovered(item.id)" #dropdown>
+              <filter-list-dropdown
+                :list-items="item.options"
+                :input-placeholder="
+                  $t(`${placeholderI18nKey}.${item.type.toUpperCase()}`)
+                "
+                :enable-search="enableSearch"
+                class="flex flex-col w-[216px] overflow-y-auto top-0 left-36"
+                @click="addFilter"
+              />
+            </template>
+          </filter-list-item-button>
+        </template>
+      </filter-list-dropdown>
+    </template>
+  </filter-button>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterButton.vue

@@ -0,0 +1,47 @@
+<script setup>
+defineProps({
+  buttonText: {
+    type: String,
+    default: '',
+  },
+  rightIcon: {
+    type: String,
+    default: '',
+  },
+  leftIcon: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <button
+    class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
+    @click="$emit('click')"
+  >
+    <slot name="leftIcon">
+      <fluent-icon
+        v-if="leftIcon"
+        :icon="leftIcon"
+        size="18"
+        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+      />
+    </slot>
+    <span
+      v-if="buttonText"
+      class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
+    >
+      {{ buttonText }}
+    </span>
+    <slot name="rightIcon">
+      <fluent-icon
+        v-if="rightIcon"
+        :icon="rightIcon"
+        size="18"
+        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+      />
+    </slot>
+
+    <slot name="dropdown" />
+  </button>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownEmptyState.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
+  >
+    {{ message }}
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterDropdownSearch.vue

@@ -0,0 +1,47 @@
+<script setup>
+defineProps({
+  inputValue: {
+    type: String,
+    default: '',
+  },
+  inputPlaceholder: {
+    type: String,
+    default: '',
+  },
+  showClearFilter: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<template>
+  <div
+    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
+  >
+    <div class="flex items-center w-full gap-2">
+      <fluent-icon
+        icon="search"
+        size="18"
+        class="text-slate-400 dark:text-slate-400"
+      />
+      <input
+        type="text"
+        class="w-full mb-0 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-75 reset-base"
+        :placeholder="inputPlaceholder"
+        :value="inputValue"
+        @input="$emit('input', $event.target.value)"
+      />
+    </div>
+    <!-- Clear filter button -->
+    <woot-button
+      v-if="!inputValue && showClearFilter"
+      size="small"
+      variant="clear"
+      color-scheme="primary"
+      class="!px-1 !py-1.5"
+      @click="$emit('click')"
+    >
+      {{ $t('REPORT.FILTER_ACTIONS.CLEAR_FILTER') }}
+    </woot-button>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListDropdown.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { picoSearch } from '@scmmishra/pico-search';
+import FilterListItemButton from './FilterListItemButton.vue';
+import FilterDropdownSearch from './FilterDropdownSearch.vue';
+import FilterDropdownEmptyState from './FilterDropdownEmptyState.vue';
+
+const props = defineProps({
+  listItems: {
+    type: Array,
+    default: () => [],
+  },
+  enableSearch: {
+    type: Boolean,
+    default: false,
+  },
+  inputPlaceholder: {
+    type: String,
+    default: '',
+  },
+  activeFilterId: {
+    type: Number,
+    default: null,
+  },
+  showClearFilter: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const searchTerm = ref('');
+
+const onSearch = value => {
+  searchTerm.value = value;
+};
+
+const filteredListItems = computed(() => {
+  if (!searchTerm.value) return props.listItems;
+  return picoSearch(props.listItems, searchTerm.value, ['name']);
+});
+
+const isDropdownListEmpty = computed(() => {
+  return !filteredListItems.value.length;
+});
+
+const isFilterActive = id => {
+  if (!props.activeFilterId) return false;
+  return id === props.activeFilterId;
+};
+</script>
+<template>
+  <div
+    class="absolute z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
+    @click.stop
+  >
+    <slot name="search">
+      <filter-dropdown-search
+        v-if="enableSearch && listItems.length"
+        :input-value="searchTerm"
+        :input-placeholder="inputPlaceholder"
+        :show-clear-filter="showClearFilter"
+        @input="onSearch"
+        @click="$emit('removeFilter')"
+      />
+    </slot>
+    <slot name="listItem">
+      <filter-dropdown-empty-state
+        v-if="isDropdownListEmpty"
+        :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
+      />
+      <filter-list-item-button
+        v-for="item in filteredListItems"
+        :key="item.id"
+        :is-active="isFilterActive(item.id)"
+        :button-text="item.name"
+        @click="$emit('click', item)"
+      />
+    </slot>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/FilterListItemButton.vue

@@ -0,0 +1,36 @@
+<script setup>
+defineProps({
+  buttonText: {
+    type: String,
+    default: '',
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<template>
+  <button
+    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
+    @click.stop="$emit('click')"
+    @mouseenter="$emit('mouseenter')"
+    @mouseleave="$emit('mouseleave')"
+    @focus="$emit('focus')"
+  >
+    <div class="inline-flex items-center gap-3 overflow-hidden">
+      <span
+        class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
+      >
+        {{ buttonText }}
+      </span>
+      <fluent-icon
+        v-if="isActive"
+        icon="checkmark"
+        size="18"
+        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+      />
+    </div>
+    <slot name="dropdown" />
+  </button>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue

@@ -0,0 +1,210 @@
+<template>
+  <div
+    class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"
+  >
+    <!-- Active filters section -->
+    <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
+      <active-filter-chip
+        v-for="filter in activeFilters"
+        v-bind="filter"
+        :key="filter.type"
+        :placeholder="
+          $t(
+            `SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER.${filter.type.toUpperCase()}`
+          )
+        "
+        :active-filter-type="activeFilterType"
+        :show-menu="showSubDropdownMenu"
+        enable-search
+        @toggleDropdown="openActiveFilterDropdown"
+        @closeDropdown="closeActiveFilterDropdown"
+        @addFilter="addFilter"
+        @removeFilter="removeFilter"
+      />
+    </div>
+    <!-- Dividing line between Active filters and Add filter button -->
+    <div
+      v-if="hasActiveFilters && !isAllFilterSelected"
+      class="w-full h-px border md:w-px md:h-5 border-slate-75 dark:border-slate-800"
+    />
+    <!-- Add filter and clear filter button -->
+    <div class="flex items-center gap-2">
+      <add-filter-chip
+        v-if="!isAllFilterSelected"
+        placeholder-i18n-key="SLA_REPORTS.DROPDOWN.INPUT_PLACEHOLDER"
+        :name="$t('SLA_REPORTS.DROPDOWN.ADD_FIlTER')"
+        :menu-option="filterListMenuItems"
+        :show-menu="showDropdownMenu"
+        :empty-state-message="$t('SLA_REPORTS.DROPDOWN.NO_FILTER')"
+        @toggleDropdown="showDropdown"
+        @closeDropdown="closeDropdown"
+        @addFilter="addFilter"
+      />
+
+      <!-- Dividing line between Add filter and Clear all filter button -->
+      <div
+        v-if="hasActiveFilters"
+        class="w-px h-5 border border-slate-75 dark:border-slate-800"
+      />
+      <!-- Clear all filter button -->
+      <filter-button
+        v-if="hasActiveFilters"
+        :button-text="$t('SLA_REPORTS.DROPDOWN.CLEAR_ALL')"
+        @click="clearAllFilters"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import {
+  buildFilterList,
+  getActiveFilter,
+  getFilterType,
+} from './helpers/SLAFilterHelpers';
+import FilterButton from '../Filters/v3/FilterButton.vue';
+import ActiveFilterChip from '../Filters/v3/ActiveFilterChip.vue';
+import AddFilterChip from '../Filters/v3/AddFilterChip.vue';
+
+export default {
+  components: {
+    FilterButton,
+    ActiveFilterChip,
+    AddFilterChip,
+  },
+  data() {
+    return {
+      showDropdownMenu: false,
+      showSubDropdownMenu: false,
+      activeFilterType: '',
+      appliedFilters: {
+        assigned_agent_id: null,
+        inbox_id: null,
+        team_id: null,
+        sla_policy_id: null,
+        label_list: null,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({
+      agents: 'agents/getAgents',
+      inboxes: 'inboxes/getInboxes',
+      teams: 'teams/getTeams',
+      labels: 'labels/getLabels',
+      sla: 'sla/getSLA',
+    }),
+    filterListMenuItems() {
+      const filterTypes = [
+        { id: '1', name: this.$t('SLA_REPORTS.DROPDOWN.SLA'), type: 'sla' },
+        {
+          id: '2',
+          name: this.$t('SLA_REPORTS.DROPDOWN.INBOXES'),
+          type: 'inboxes',
+        },
+        {
+          id: '3',
+          name: this.$t('SLA_REPORTS.DROPDOWN.AGENTS'),
+          type: 'agents',
+        },
+        { id: '4', name: this.$t('SLA_REPORTS.DROPDOWN.TEAMS'), type: 'teams' },
+        {
+          id: '5',
+          name: this.$t('SLA_REPORTS.DROPDOWN.LABELS'),
+          type: 'labels',
+        },
+      ];
+      // Filter out the active filters from the filter list
+      // We only want to show the filters that are not already applied
+      // In the add filter dropdown
+      const activeFilters = Object.keys(this.appliedFilters).filter(
+        key => this.appliedFilters[key]
+      );
+      const activeFilterTypes = activeFilters.map(key =>
+        getFilterType(key, 'keyToType')
+      );
+      return filterTypes
+        .filter(({ type }) => !activeFilterTypes.includes(type))
+        .map(({ id, name, type }) => ({
+          id,
+          name,
+          type,
+          options: buildFilterList(this[type], type),
+        }));
+    },
+    activeFilters() {
+      // Get the active filters from the applied filters
+      // and return the filter name, type and options
+      const activeKey = Object.keys(this.appliedFilters).filter(
+        key => this.appliedFilters[key]
+      );
+      return activeKey.map(key => {
+        const filterType = getFilterType(key, 'keyToType');
+        const item = getActiveFilter(
+          this[filterType],
+          filterType,
+          this.appliedFilters[key]
+        );
+        return {
+          id: item.id,
+          name: filterType === 'labels' ? item.title : item.name,
+          type: filterType,
+          options: buildFilterList(this[filterType], filterType),
+        };
+      });
+    },
+    hasActiveFilters() {
+      return Object.values(this.appliedFilters).some(value => value !== null);
+    },
+    isAllFilterSelected() {
+      return !this.filterListMenuItems.length;
+    },
+  },
+  methods: {
+    addFilter(item) {
+      const { type, id, name } = item;
+      const filterKey = getFilterType(type, 'typeToKey');
+      this.appliedFilters[filterKey] = type === 'labels' ? name : id;
+      this.$emit('filter-change', this.appliedFilters);
+      this.resetDropdown();
+    },
+    removeFilter(type) {
+      const filterKey = getFilterType(type, 'typeToKey');
+      this.appliedFilters[filterKey] = null;
+      this.$emit('filter-change', this.appliedFilters);
+    },
+    clearAllFilters() {
+      this.appliedFilters = {
+        assigned_agent_id: null,
+        inbox_id: null,
+        team_id: null,
+        sla_policy_id: null,
+        label_list: null,
+      };
+      this.$emit('filter-change', this.appliedFilters);
+      this.resetDropdown();
+    },
+    showDropdown() {
+      this.showSubDropdownMenu = false;
+      this.showDropdownMenu = !this.showDropdownMenu;
+    },
+    closeDropdown() {
+      this.showDropdownMenu = false;
+    },
+    openActiveFilterDropdown(filterType) {
+      this.closeDropdown();
+      this.activeFilterType = filterType;
+      this.showSubDropdownMenu = !this.showSubDropdownMenu;
+    },
+    closeActiveFilterDropdown() {
+      this.activeFilterType = '';
+      this.showSubDropdownMenu = false;
+    },
+    resetDropdown() {
+      this.closeDropdown();
+      this.closeActiveFilterDropdown();
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
+    <span
+      class="inline-flex items-center gap-1 text-sm font-medium text-slate-700 dark:text-slate-200"
+    >
+      {{ label }}
+      <fluent-icon
+        v-tooltip.right="toolTip"
+        size="14"
+        icon="information"
+        type="outline"
+        class="flex flex-shrink-0 text-sm font-normal sm:font-medium text-slate-500 dark:text-slate-500"
+      />
+    </span>
+    <div
+      v-if="isLoading"
+      class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-800 animate-pulse"
+    />
+
+    <span v-else class="text-2xl font-medium text-slate-900 dark:text-slate-25">
+      {{ value }}
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    toolTip: {
+      type: String,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
+  >
+    <SLAMetricCard
+      :label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
+      :value="hitRate"
+      :tool-tip="$t('SLA_REPORTS.METRICS.HIT_RATE.TOOLTIP')"
+      :is-loading="isLoading"
+    />
+
+    <div
+      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
+    />
+    <SLAMetricCard
+      :label="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.LABEL')"
+      :value="noOfBreaches"
+      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.TOOLTIP')"
+      :is-loading="isLoading"
+    />
+    <div
+      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
+    />
+    <SLAMetricCard
+      :label="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.LABEL')"
+      :value="noOfConversations"
+      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.TOOLTIP')"
+      :is-loading="isLoading"
+    />
+  </div>
+</template>
+
+<script setup>
+import SLAMetricCard from './SLAMetricCard.vue';
+defineProps({
+  hitRate: {
+    type: String,
+    required: true,
+  },
+  noOfBreaches: {
+    type: Number,
+    required: true,
+  },
+  noOfConversations: {
+    type: Number,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
+    <reports-filters-date-range
+      class="sm:min-w-[200px] tiny h-8"
+      @on-range-change="onDateRangeChange"
+    />
+    <woot-date-range-picker
+      v-if="isDateRangeSelected"
+      show-range
+      class="no-margin auto-width sm:min-w-[240px] small h-8"
+      :value="customDateRange"
+      :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+      :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+      @change="onCustomDateRangeChange"
+    />
+    <SLA-filter @filter-change="emitFilterChange" />
+  </div>
+</template>
+<script>
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
+import ReportsFiltersDateRange from '../Filters/DateRange.vue';
+import SLAFilter from '../SLA/SLAFilter.vue';
+import subDays from 'date-fns/subDays';
+import { DATE_RANGE_OPTIONS } from '../../constants';
+import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
+
+export default {
+  components: {
+    WootDateRangePicker,
+    ReportsFiltersDateRange,
+    SLAFilter,
+  },
+
+  data() {
+    return {
+      selectedDateRange: DATE_RANGE_OPTIONS.LAST_7_DAYS,
+      selectedGroupByFilter: null,
+      customDateRange: [new Date(), new Date()],
+    };
+  },
+  computed: {
+    isDateRangeSelected() {
+      return (
+        this.selectedDateRange.id === DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE.id
+      );
+    },
+    to() {
+      if (this.isDateRangeSelected) {
+        return getUnixEndOfDay(this.customDateRange[1]);
+      }
+      return getUnixEndOfDay(new Date());
+    },
+    from() {
+      if (this.isDateRangeSelected) {
+        return getUnixStartOfDay(this.customDateRange[0]);
+      }
+
+      const { offset } = this.selectedDateRange;
+      const fromDate = subDays(new Date(), offset);
+      return getUnixStartOfDay(fromDate);
+    },
+  },
+  watch: {
+    businessHoursSelected() {
+      this.emitChange();
+    },
+  },
+  mounted() {
+    this.emitChange();
+  },
+  methods: {
+    emitChange() {
+      const { from, to } = this;
+      this.$emit('filter-change', {
+        from,
+        to,
+        ...this.selectedGroupByFilter,
+      });
+    },
+    emitFilterChange(params) {
+      this.selectedGroupByFilter = params;
+      this.emitChange();
+    },
+    onDateRangeChange(selectedRange) {
+      this.selectedDateRange = selectedRange;
+      this.emitChange();
+    },
+    onCustomDateRangeChange(value) {
+      this.customDateRange = value;
+      this.emitChange();
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue

@@ -0,0 +1,59 @@
+<script setup>
+import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
+import SLAViewDetails from './SLAViewDetails.vue';
+defineProps({
+  slaName: {
+    type: String,
+    required: true,
+  },
+  conversationId: {
+    type: Number,
+    required: true,
+  },
+  conversation: {
+    type: Object,
+    required: true,
+  },
+  slaEvents: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div
+    class="grid content-center items-center h-16 grid-cols-12 gap-4 px-6 py-0 w-full bg-white border-b last:border-b-0 last:rounded-b-xl border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+  >
+    <div
+      class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      <span class="text-slate-700 dark:text-slate-200">
+        {{ `#${conversationId} ` }}
+      </span>
+      <span class="text-slate-600 dark:text-slate-300">with </span>
+      <span class="text-slate-700 dark:text-slate-200 capitalize truncate">{{
+        conversation.contact.name
+      }}</span>
+      <card-labels
+        class="w-[80%]"
+        :conversation-id="conversationId"
+        :conversation-labels="conversation.labels"
+      />
+    </div>
+    <div
+      class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right col-span-2"
+    >
+      {{ slaName }}
+    </div>
+    <div class="flex items-center gap-2 col-span-2">
+      <user-avatar-with-name
+        v-if="conversation.assignee"
+        :user="conversation.assignee"
+      />
+      <span v-else class="text-slate-600 dark:text-slate-200"> --- </span>
+    </div>
+    <SLAViewDetails :sla-events="slaEvents" />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div
+      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
+    >
+      <div
+        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"
+      >
+        <table-header-cell
+          :span="6"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.CONVERSATION')"
+        />
+        <table-header-cell
+          :span="2"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.POLICY')"
+        />
+        <table-header-cell
+          :span="2"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
+        />
+        <table-header-cell :span="2" label="" />
+      </div>
+
+      <div
+        v-if="isLoading"
+        class="flex items-center rounded-b-xl justify-center h-32 bg-white dark:bg-slate-900"
+      >
+        <spinner />
+        <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
+      </div>
+      <div v-else-if="slaReports.length > 0">
+        <SLA-report-item
+          v-for="slaReport in slaReports"
+          :key="slaReport.applied_sla.id"
+          :sla-name="slaReport.applied_sla.sla_name"
+          :conversation="slaReport.conversation"
+          :conversation-id="slaReport.conversation.id"
+          :sla-events="slaReport.sla_events"
+        />
+      </div>
+      <div
+        v-else
+        class="flex items-center justify-center rounded-b-xl h-32 bg-white dark:bg-slate-900"
+      >
+        {{ $t('SLA_REPORTS.NO_RECORDS') }}
+      </div>
+    </div>
+    <table-footer
+      v-if="shouldShowFooter"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @page-change="onPageChange"
+    />
+  </div>
+</template>
+
+<script>
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
+import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
+import SLAReportItem from './SLAReportItem.vue';
+import Spinner from 'shared/components/Spinner.vue';
+export default {
+  name: 'SLATable',
+  components: {
+    SLAReportItem,
+    TableFooter,
+    Spinner,
+    TableHeaderCell,
+  },
+  props: {
+    slaReports: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    pageSize: {
+      type: Number,
+      default: 25,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      pageNo: 1,
+    };
+  },
+  computed: {
+    shouldShowFooter() {
+      return this.currentPage === 1
+        ? this.totalCount > this.pageSize
+        : this.slaReports.length > 0;
+    },
+  },
+  methods: {
+    onPageChange(page) {
+      this.$emit('page-change', page);
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue

@@ -0,0 +1,55 @@
+<template>
+  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
+    <div
+      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      <div class="relative">
+        <woot-button
+          color-scheme="secondary"
+          variant="link"
+          @click="openSlaEvents"
+        >
+          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
+        </woot-button>
+        <SLA-popover-card
+          v-if="showSlaPopoverCard"
+          :sla-missed-events="slaEvents"
+          class="right-0"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
+export default {
+  components: {
+    SLAPopoverCard,
+  },
+  mixins: [clickaway],
+
+  props: {
+    slaEvents: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      showSlaPopoverCard: false,
+    };
+  },
+
+  methods: {
+    closeSlaEvents() {
+      this.showSlaPopoverCard = false;
+    },
+    openSlaEvents() {
+      this.showSlaPopoverCard = !this.showSlaPopoverCard;
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/helpers/SLAFilterHelpers.js

@@ -0,0 +1,37 @@
+export const buildFilterList = (items, type) =>
+  // Build the filter list for the dropdown
+  items.map(item => ({
+    id: item.id,
+    name: type === 'labels' ? item.title : item.name,
+    type,
+  }));
+
+export const getActiveFilter = (filters, type, key) => {
+  // Method is used to get the active filter from the filter list
+  return filters.find(filterItem =>
+    type === 'labels'
+      ? filterItem.title === key
+      : filterItem.id.toString() === key.toString()
+  );
+};
+
+export const getFilterType = (input, direction) => {
+  // Method is used to map the filter key to the filter type
+  const filterMap = {
+    keyToType: {
+      assigned_agent_id: 'agents',
+      inbox_id: 'inboxes',
+      team_id: 'teams',
+      sla_policy_id: 'sla',
+      label_list: 'labels',
+    },
+    typeToKey: {
+      agents: 'assigned_agent_id',
+      inboxes: 'inbox_id',
+      teams: 'team_id',
+      sla: 'sla_policy_id',
+      labels: 'label_list',
+    },
+  };
+  return filterMap[direction][input];
+};

app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js

@@ -9,6 +9,7 @@ const TeamReports = () => import('./TeamReports.vue');
 const CsatResponses = () => import('./CsatResponses.vue');
 const BotReports = () => import('./BotReports.vue');
 const LiveReports = () => import('./LiveReports.vue');
+const SLAReports = () => import('./SLAReports.vue');
 
 export default {
   routes: [
@@ -151,5 +152,22 @@ export default {
         },
       ],
     },
+    {
+      path: frontendURL('accounts/:accountId/reports'),
+      component: SettingsContent,
+      props: {
+        headerTitle: 'SLA_REPORTS.HEADER',
+        icon: 'document-list-clock',
+        keepAlive: false,
+      },
+      children: [
+        {
+          path: 'sla',
+          name: 'sla_reports',
+          roles: ['administrator'],
+          component: SLAReports,
+        },
+      ],
+    },
   ],
 };

app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue

@@ -4,18 +4,49 @@
     :loading-message="$t('SLA.LOADING')"
   >
     <template #header>
-      <SLA-header @click="openAddPopup" />
+      <SLA-header :show-actions="records.length > 0" @click="openAddPopup" />
     </template>
     <template #loading>
       <SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
     </template>
     <template #body>
-      <p
-        v-if="!records.length"
-        class="flex flex-col items-center justify-center h-full"
-      >
-        {{ $t('SLA.LIST.404') }}
-      </p>
+      <div v-if="!records.length" class="w-full min-h-[12rem] relative">
+        <div class="w-full space-y-3">
+          <SLA-list-item
+            class="opacity-25 dark:opacity-20"
+            :sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
+            :description="$t('SLA.LIST.EMPTY.DESC_1')"
+            first-response="20m"
+            next-response="1h"
+            resolution-time="24h"
+            has-business-hours
+          />
+          <SLA-list-item
+            class="opacity-25 dark:opacity-20"
+            :sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
+            :description="$t('SLA.LIST.EMPTY.DESC_2')"
+            first-response="2h"
+            next-response="4h"
+            resolution-time="4d"
+            has-business-hours
+          />
+        </div>
+        <div
+          class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
+        >
+          <p class="max-w-xs text-sm font-medium text-center">
+            {{ $t('SLA.LIST.404') }}
+          </p>
+          <woot-button
+            color-scheme="primary"
+            icon="plus-sign"
+            class="px-5 mt-4 rounded-xl"
+            @click="openAddPopup"
+          >
+            {{ $t('SLA.ADD_ACTION_LONG') }}
+          </woot-button>
+        </div>
+      </div>
       <div v-if="records.length" class="flex flex-col w-full h-full gap-3">
         <SLA-list-item
           v-for="sla in records"

app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue

@@ -5,6 +5,11 @@
         v-model="name"
         :class="{ error: $v.name.$error }"
         class="w-full"
+        :styles="{
+          borderRadius: '12px',
+          padding: '6px 12px',
+          fontSize: '14px',
+        }"
         :label="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
         :error="getSlaNameErrorMessage"
@@ -13,6 +18,11 @@
       <woot-input
         v-model="description"
         class="w-full"
+        :styles="{
+          borderRadius: '12px',
+          padding: '6px 12px',
+          fontSize: '14px',
+        }"
         :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
       />
@@ -29,23 +39,29 @@
         @isInValid="handleIsInvalid(index, $event)"
       />
 
-      <div class="flex items-center w-full gap-2">
-        <input id="sla_bh" v-model="onlyDuringBusinessHours" type="checkbox" />
-        <label for="sla_bh">
+      <div
+        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
+      >
+        <span for="sla_bh" class="text-slate-700 dark:text-slate-200">
           {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
-        </label>
+        </span>
+        <woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
       </div>
 
-      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
+      <div class="flex items-center justify-end w-full gap-2 mt-8">
+        <woot-button
+          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+          @click.prevent="onClose"
+        >
+          {{ $t('SLA.FORM.CANCEL') }}
+        </woot-button>
         <woot-button
           :is-disabled="isSubmitDisabled"
+          class="px-4 rounded-xl"
           :is-loading="uiFlags.isUpdating"
         >
           {{ submitLabel }}
         </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('SLA.FORM.CANCEL') }}
-        </woot-button>
       </div>
     </form>
   </div>

app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue

@@ -1,18 +1,24 @@
 <template>
-  <div class="relative mt-2 w-full">
+  <div class="flex items-center w-full gap-3">
     <woot-input
       v-model="thresholdTime"
       :class="{ error: $v.thresholdTime.$error }"
-      class="w-full [&>input]:pr-24"
+      class="flex-grow"
+      :styles="{
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+      }"
       :label="label"
       :placeholder="placeholder"
       :error="getThresholdTimeErrorMessage"
       @input="onThresholdTimeChange"
     />
-    <div class="absolute right-px h-9 top-[27px] flex items-center">
+    <!-- the mt-7 handles the label offset -->
+    <div class="mt-7">
       <select
         v-model="thresholdUnitValue"
-        class="h-full rounded-[4px] hover:cursor-pointer font-medium border-1 border-solid bg-transparent border-transparent dark:border-transparent mb-0 py-0 pl-2 pr-7 text-slate-600 dark:text-slate-300 dark:focus:border-woot-500 focus:border-woot-500 text-sm"
+        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
         @change="onThresholdUnitChange"
       >
         <option
@@ -56,9 +62,9 @@ export default {
       thresholdTime: this.threshold || '',
       thresholdUnitValue: this.thresholdUnit,
       options: [
-        { value: 'Minutes', label: 'Minutes' },
-        { value: 'Hours', label: 'Hours' },
-        { value: 'Days', label: 'Days' },
+        { value: 'Minutes', label: 'minutes' },
+        { value: 'Hours', label: 'hours' },
+        { value: 'Days', label: 'days' },
       ],
     };
   },

app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue

@@ -1,5 +1,12 @@
 <script setup>
 import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
+
+defineProps({
+  showActions: {
+    type: Boolean,
+    default: true,
+  },
+});
 </script>
 <template>
   <base-settings-header
@@ -9,7 +16,7 @@ import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
     href="/"
     icon-name="document-list-clock"
   >
-    <template #actions>
+    <template v-if="showActions" #actions>
       <woot-button
         color-scheme="primary"
         icon="plus-sign"

app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue

@@ -4,14 +4,22 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
 <template>
   <base-settings-list-item class="opacity-50">
     <template #title>
-      <div class="w-24 h-[26px] rounded-md bg-slate-50 animate-pulse" />
+      <div
+        class="w-24 h-[26px] rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+      />
     </template>
     <template #description>
-      <div class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 animate-pulse" />
-      <div class="w-48 h-4 rounded-md bg-slate-50 animate-pulse" />
+      <div
+        class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+      />
+      <div
+        class="w-48 h-4 rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+      />
     </template>
     <template #label>
-      <div class="w-32 h-[26px] bg-slate-50 animate-pulse rounded-md" />
+      <div
+        class="w-32 h-[26px] bg-slate-50 dark:bg-slate-700 animate-pulse rounded-md"
+      />
     </template>
     <template #rightSection>
       <div
@@ -22,7 +30,9 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
           :key="ii"
           class="flex justify-end w-1/3 h-full px-4"
         >
-          <div class="w-32 h-full rounded-md bg-slate-50 animate-pulse" />
+          <div
+            class="w-32 h-full rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+          />
         </div>
       </div>
     </template>

app/javascript/dashboard/store/index.js

@@ -45,6 +45,7 @@ import userNotificationSettings from './modules/userNotificationSettings';
 import summaryReports from './modules/summaryReports';
 import webhooks from './modules/webhooks';
 import draftMessages from './modules/draftMessages';
+import SLAReports from './modules/SLAReports';
 
 import LogRocket from 'logrocket';
 import createPlugin from 'logrocket-vuex';
@@ -113,6 +114,7 @@ export default new Vuex.Store({
     webhooks,
     draftMessages,
     sla,
+    slaReports: SLAReports,
   },
   plugins,
 });

app/javascript/dashboard/store/modules/SLAReports.js

@@ -0,0 +1,107 @@
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
+import types from '../mutation-types';
+import SLAReportsAPI from '../../api/slaReports';
+import { downloadCsvFile } from 'dashboard/helper/downloadHelper';
+export const state = {
+  records: [],
+  metrics: {
+    numberOfConversations: 0,
+    numberOfSLAMisses: 0,
+    hitRate: '0%',
+  },
+  uiFlags: {
+    isFetching: false,
+    isFetchingMetrics: false,
+  },
+  meta: {
+    count: 0,
+    currentPage: 1,
+  },
+};
+
+export const getters = {
+  getAll(_state) {
+    return _state.records;
+  },
+  getMeta(_state) {
+    return _state.meta;
+  },
+  getMetrics(_state) {
+    return _state.metrics;
+  },
+  getUIFlags(_state) {
+    return _state.uiFlags;
+  },
+};
+
+export const actions = {
+  get: async function getResponses({ commit }, params) {
+    commit(types.SET_SLA_REPORTS_UI_FLAG, { isFetching: true });
+    try {
+      const response = await SLAReportsAPI.get(params);
+      const { payload, meta } = response.data;
+
+      commit(types.SET_SLA_REPORTS, payload);
+      commit(types.SET_SLA_REPORTS_META, meta);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.SET_SLA_REPORTS_UI_FLAG, { isFetching: false });
+    }
+  },
+  getMetrics: async function getMetrics({ commit }, params) {
+    commit(types.SET_SLA_REPORTS_UI_FLAG, { isFetchingMetrics: true });
+    try {
+      const response = await SLAReportsAPI.getMetrics(params);
+      commit(types.SET_SLA_REPORTS_METRICS, response.data);
+    } catch (error) {
+      // Ignore error
+    } finally {
+      commit(types.SET_SLA_REPORTS_UI_FLAG, { isFetchingMetrics: false });
+    }
+  },
+  download(_, params) {
+    return SLAReportsAPI.download(params).then(response => {
+      downloadCsvFile(params.fileName, response.data);
+    });
+  },
+};
+
+export const mutations = {
+  [types.SET_SLA_REPORTS_UI_FLAG](_state, data) {
+    _state.uiFlags = {
+      ..._state.uiFlags,
+      ...data,
+    };
+  },
+
+  [types.SET_SLA_REPORTS]: MutationHelpers.set,
+  [types.SET_SLA_REPORTS_METRICS](
+    _state,
+    {
+      number_of_sla_misses: numberOfSLAMisses,
+      hit_rate: hitRate,
+      total_applied_slas: numberOfConversations,
+    }
+  ) {
+    _state.metrics = {
+      numberOfSLAMisses,
+      hitRate,
+      numberOfConversations,
+    };
+  },
+  [types.SET_SLA_REPORTS_META](_state, { count, current_page: currentPage }) {
+    _state.meta = {
+      count,
+      currentPage,
+    };
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

app/javascript/dashboard/store/modules/specs/sla/actions.spec.js

@@ -0,0 +1,78 @@
+import axios from 'axios';
+import { actions } from '../../sla';
+import * as types from '../../../mutation-types';
+import SLAList from './fixtures';
+
+const commit = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('#get', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: { payload: SLAList },
+      });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_SLA_UI_FLAG, { isFetching: true }],
+        [types.default.SET_SLA, SLAList],
+        [types.default.SET_SLA_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_SLA_UI_FLAG, { isFetching: true }],
+        [types.default.SET_SLA_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({
+        data: { payload: SLAList[0] },
+      });
+      await actions.create({ commit }, SLAList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_SLA_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_SLA, SLAList[0]],
+        [types.default.SET_SLA_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.create({ commit })).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_SLA_UI_FLAG, { isCreating: true }],
+        [types.default.SET_SLA_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({});
+      await actions.delete({ commit }, 1);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_SLA_UI_FLAG, { isDeleting: true }],
+        [types.default.DELETE_SLA, 1],
+        [types.default.SET_SLA_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.delete({ commit })).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_SLA_UI_FLAG, { isDeleting: true }],
+        [types.default.SET_SLA_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/sla/fixtures.js

@@ -0,0 +1,95 @@
+export default [
+  {
+    id: 1,
+    name: 'Premium SLA',
+    description:
+      'SLA for chatwoot cloud premium and self-hosted premium customers.  SLA for chatwoot cloud premium and self-hosted premium customers',
+    first_response_time_threshold: 14400,
+    next_response_time_threshold: 18000,
+    resolution_time_threshold: 86400,
+    only_during_business_hours: true,
+  },
+  {
+    id: 2,
+    name: 'Enterprise SLA',
+    description:
+      'SLA for chatwoot enterprise and self-hosted enterprise customers.',
+    first_response_time_threshold: 600,
+    next_response_time_threshold: 2400,
+    resolution_time_threshold: 3600,
+    only_during_business_hours: false,
+  },
+  {
+    id: 3,
+    name: 'Business SLA',
+    description:
+      'Chatwoot cloud Business and self-hosted Business customers SLA',
+    first_response_time_threshold: null,
+    next_response_time_threshold: null,
+    resolution_time_threshold: null,
+    only_during_business_hours: false,
+  },
+  {
+    id: 4,
+    name: 'Hacker SLA',
+    description: '',
+    first_response_time_threshold: 60,
+    next_response_time_threshold: 120,
+    resolution_time_threshold: 180,
+    only_during_business_hours: false,
+  },
+  {
+    id: 5,
+    name: 'SLA',
+    description: '',
+    first_response_time_threshold: 120,
+    next_response_time_threshold: 300,
+    resolution_time_threshold: 21600,
+    only_during_business_hours: false,
+  },
+  {
+    id: 6,
+    name: 'ALla',
+    description: '',
+    first_response_time_threshold: 5400,
+    next_response_time_threshold: 9000,
+    resolution_time_threshold: 23040,
+    only_during_business_hours: false,
+  },
+  {
+    id: 7,
+    name: '10',
+    description: '',
+    first_response_time_threshold: 120,
+    next_response_time_threshold: null,
+    resolution_time_threshold: null,
+    only_during_business_hours: false,
+  },
+  {
+    id: 8,
+    name: '11',
+    description: '',
+    first_response_time_threshold: null,
+    next_response_time_threshold: 240,
+    resolution_time_threshold: null,
+    only_during_business_hours: false,
+  },
+  {
+    id: 9,
+    name: '12',
+    description: '',
+    first_response_time_threshold: null,
+    next_response_time_threshold: null,
+    resolution_time_threshold: 300,
+    only_during_business_hours: false,
+  },
+  {
+    id: 10,
+    name: '14',
+    description: '',
+    first_response_time_threshold: null,
+    next_response_time_threshold: null,
+    resolution_time_threshold: null,
+    only_during_business_hours: false,
+  },
+];

app/javascript/dashboard/store/modules/specs/sla/getters.spec.js

@@ -0,0 +1,26 @@
+import { getters } from '../../sla';
+import SLAs from './fixtures';
+
+describe('#getters', () => {
+  it('getSLA', () => {
+    const state = { records: SLAs };
+    expect(getters.getSLA(state)).toEqual(SLAs);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isCreating: false,
+        isUpdating: false,
+        isDeleting: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isCreating: false,
+      isUpdating: false,
+      isDeleting: false,
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/sla/mutations.spec.js

@@ -0,0 +1,34 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../sla';
+import SLAs from './fixtures';
+
+describe('#mutations', () => {
+  describe('#SET_SLA_UI_FLAG', () => {
+    it('set sla ui flags', () => {
+      const state = { uiFlags: {} };
+      mutations[types.SET_SLA_UI_FLAG](state, { isFetching: true });
+      expect(state.uiFlags).toEqual({ isFetching: true });
+    });
+  });
+  describe('#SET_SLA', () => {
+    it('set sla records', () => {
+      const state = { records: [] };
+      mutations[types.SET_SLA](state, SLAs);
+      expect(state.records).toEqual(SLAs);
+    });
+  });
+  describe('#ADD_SLA', () => {
+    it('push newly created sla to the store', () => {
+      const state = { records: [SLAs[0]] };
+      mutations[types.ADD_SLA](state, SLAs[1]);
+      expect(state.records).toEqual([SLAs[0], SLAs[1]]);
+    });
+  });
+  describe('#DELETE_SLA', () => {
+    it('delete sla record', () => {
+      const state = { records: [SLAs[0]] };
+      mutations[types.DELETE_SLA](state, 1);
+      expect(state.records).toEqual([]);
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/slaReports/actions.spec.js

@@ -0,0 +1,55 @@
+import axios from 'axios';
+import { actions } from '../../SLAReports';
+import appliedSlas from './fixtures';
+import types from '../../../mutation-types';
+
+const commit = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+  describe('#get', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: { payload: appliedSlas, meta: { count: 1 } },
+      });
+      await actions.get({ commit }, {});
+      expect(commit.mock.calls).toEqual([
+        [types.SET_SLA_REPORTS_UI_FLAG, { isFetching: true }],
+        [types.SET_SLA_REPORTS, appliedSlas],
+        [types.SET_SLA_REPORTS_META, { count: 1 }],
+        [types.SET_SLA_REPORTS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.get({ commit }, { teamId: 1 })).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_SLA_REPORTS_UI_FLAG, { isFetching: true }],
+        [types.SET_SLA_REPORTS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#getMetrics', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: { metrics: { count: 1 } } });
+      await actions.getMetrics({ commit }, {});
+      expect(commit.mock.calls).toEqual([
+        [types.SET_SLA_REPORTS_UI_FLAG, { isFetchingMetrics: true }],
+        [types.SET_SLA_REPORTS_METRICS, { metrics: { count: 1 } }],
+        [types.SET_SLA_REPORTS_UI_FLAG, { isFetchingMetrics: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.getMetrics({ commit }, { teamId: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_SLA_REPORTS_UI_FLAG, { isFetchingMetrics: true }],
+        [types.SET_SLA_REPORTS_UI_FLAG, { isFetchingMetrics: false }],
+      ]);
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/slaReports/fixtures.js

@@ -0,0 +1,52 @@
+export default [
+  {
+    id: 23,
+    sla_policy_id: 7,
+    conversation_id: 152,
+    sla_status: 'active_with_misses',
+    created_at: '2024-03-31T07:50:53.518Z',
+    updated_at: '2024-03-31T07:55:06.451Z',
+    conversation: {
+      id: 152,
+      uuid: '2f9a988d-418f-47d9-b4dc-c441f28da7c2',
+      account_id: 1,
+    },
+    sla_events: [
+      {
+        id: 14,
+        event_type: 'frt',
+        meta: {},
+        updated_at: 1711871706,
+        created_at: 1711871706,
+      },
+      {
+        id: 15,
+        event_type: 'rt',
+        meta: {},
+        updated_at: 1711871706,
+        created_at: 1711871706,
+      },
+    ],
+  },
+  {
+    id: 24,
+    sla_policy_id: 7,
+    conversation_id: 153,
+    sla_status: 'active_with_misses',
+    created_at: '2024-03-31T07:57:49.659Z',
+    updated_at: '2024-03-31T08:00:31.627Z',
+    conversation: {
+      id: 153,
+      uuid: 'd5d97961-4341-469e-accf-f13f25a14c3c',
+    },
+    sla_events: [
+      {
+        id: 16,
+        event_type: 'rt',
+        meta: {},
+        updated_at: 1711872031,
+        created_at: 1711872031,
+      },
+    ],
+  },
+];

app/javascript/dashboard/store/modules/specs/slaReports/getters.spec.js

@@ -0,0 +1,53 @@
+import { getters } from '../../SLAReports';
+import appliedSlas from './fixtures';
+
+describe('#getters', () => {
+  it('getAppliedSlas', () => {
+    const state = {
+      records: [appliedSlas[0]],
+    };
+    expect(getters.getAll(state)).toEqual([appliedSlas[0]]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: false,
+        isFetchingMetrics: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: false,
+      isFetchingMetrics: false,
+    });
+  });
+
+  it('getMeta', () => {
+    const state = {
+      meta: {
+        count: 0,
+        currentPage: 1,
+      },
+    };
+    expect(getters.getMeta(state)).toEqual({
+      count: 0,
+      currentPage: 1,
+    });
+  });
+
+  it('getMetrics', () => {
+    const state = {
+      metrics: {
+        numberOfConversations: 27,
+        numberOfSLAMisses: 25,
+        hitRate: '7.41%',
+      },
+    };
+
+    expect(getters.getMetrics(state)).toEqual({
+      numberOfConversations: 27,
+      numberOfSLAMisses: 25,
+      hitRate: '7.41%',
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/slaReports/mutations.spec.js

@@ -0,0 +1,51 @@
+import { mutations } from '../../SLAReports';
+import appliedSlas from './fixtures';
+import types from '../../../mutation-types';
+
+describe('#mutations', () => {
+  describe('#SET_SLA_REPORTS', () => {
+    it('Adds sla reports', () => {
+      const state = { records: {} };
+      mutations[types.SET_SLA_REPORTS](state, appliedSlas);
+      expect(state.records).toEqual(appliedSlas);
+    });
+  });
+
+  describe('#SET_SLA_REPORTS_UI_FLAG', () => {
+    it('set ui flags', () => {
+      const state = { uiFlags: {} };
+      mutations[types.SET_SLA_REPORTS_UI_FLAG](state, { isFetching: true });
+      expect(state.uiFlags).toEqual({ isFetching: true });
+    });
+  });
+
+  describe('#SET_SLA_REPORTS_METRICS', () => {
+    it('set metrics', () => {
+      const state = { metrics: {} };
+      mutations[types.SET_SLA_REPORTS_METRICS](state, {
+        number_of_sla_misses: 1,
+        hit_rate: '100%',
+        total_applied_slas: 1,
+      });
+      expect(state.metrics).toEqual({
+        numberOfSLAMisses: 1,
+        hitRate: '100%',
+        numberOfConversations: 1,
+      });
+    });
+  });
+
+  describe('#SET_SLA_REPORTS_META', () => {
+    it('set meta', () => {
+      const state = { meta: {} };
+      mutations[types.SET_SLA_REPORTS_META](state, {
+        count: 1,
+        current_page: 1,
+      });
+      expect(state.meta).toEqual({
+        count: 1,
+        currentPage: 1,
+      });
+    });
+  });
+});

app/javascript/dashboard/store/mutation-types.js

@@ -312,4 +312,10 @@ export default {
   ADD_SLA: 'ADD_SLA',
   EDIT_SLA: 'EDIT_SLA',
   DELETE_SLA: 'DELETE_SLA',
+
+  // SLA Reports
+  SET_SLA_REPORTS_UI_FLAG: 'SET_SLA_REPORTS_UI_FLAG',
+  SET_SLA_REPORTS: 'SET_SLA_REPORTS',
+  SET_SLA_REPORTS_METRICS: 'SET_SLA_REPORTS_METRICS',
+  SET_SLA_REPORTS_META: 'SET_SLA_REPORTS_META',
 };

app/javascript/packs/application.js

@@ -31,6 +31,7 @@ import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 import AnalyticsPlugin from '../dashboard/helper/AnalyticsHelper/plugin';
 import resizeDirective from '../dashboard/helper/directives/resize.js';
+import { directive as onClickaway } from 'vue-clickaway';
 
 Vue.config.env = process.env;
 
@@ -80,6 +81,7 @@ Vue.component('woot-wizard', WootWizard);
 Vue.component('fluent-icon', FluentIcon);
 
 Vue.directive('resize', resizeDirective);
+Vue.directive('on-clickaway', onClickaway);
 const i18nConfig = new VueI18n({
   locale: 'en',
   messages: i18n,

app/javascript/sdk/sdk.js

@@ -23,6 +23,7 @@ export const SDK_CSS = `
 
 .woot-widget-holder iframe {
   border: 0;
+  color-scheme: normal;
   height: 100% !important;
   width: 100% !important;
   max-height: 100vh !important;

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -2,6 +2,7 @@
   "add-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 12 7Z",
   "add-outline": "M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z",
   "add-solid": "M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z",
+  "alarm-outline": "M13 12.6V9q0-.425-.288-.713T12 8q-.425 0-.713.288T11 9v3.975q0 .2.075.388t.225.337l2.8 2.8q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13 12.6ZM12 22q-1.875 0-3.513-.713t-2.85-1.924q-1.212-1.213-1.924-2.85T3 13q0-1.875.713-3.513t1.924-2.85q1.213-1.212 2.85-1.924T12 4q1.875 0 3.513.713t2.85 1.925q1.212 1.212 1.925 2.85T21 13q0 1.875-.713 3.513t-1.924 2.85q-1.213 1.212-2.85 1.925T12 22Zm0-9ZM2.05 7.3q-.275-.275-.275-.7t.275-.7L4.9 3.05q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7L3.45 7.3q-.275.275-.7.275t-.7-.275Zm19.9 0q-.275.275-.7.275t-.7-.275L17.7 4.45q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l2.85 2.85q.275.275.275.7t-.275.7ZM12 20q2.925 0 4.963-2.038T19 13q0-2.925-2.038-4.963T12 6Q9.075 6 7.037 8.038T5 13q0 2.925 2.038 4.963T12 20Z",
   "alarm-on-outline": "m10.95 13.7l-1.425-1.425q-.3-.3-.7-.3t-.7.3q-.3.3-.3.713t.3.712l2.125 2.15q.3.3.7.3t.7-.3l4.25-4.25q.3-.3.3-.712t-.3-.713q-.3-.3-.713-.3t-.712.3L10.95 13.7ZM12 22q-1.875 0-3.512-.713t-2.85-1.924q-1.213-1.213-1.925-2.85T3 13q0-1.875.713-3.513t1.924-2.85q1.213-1.212 2.85-1.924T12 4q1.875 0 3.513.713t2.85 1.925q1.212 1.212 1.925 2.85T21 13q0 1.875-.713 3.513t-1.924 2.85q-1.213 1.212-2.85 1.925T12 22Zm0-9ZM2.05 7.3q-.275-.275-.275-.7t.275-.7L4.9 3.05q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7L3.45 7.3q-.275.275-.7.275t-.7-.275Zm19.9 0q-.275.275-.7.275t-.7-.275L17.7 4.45q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l2.85 2.85q.275.275.275.7t-.275.7ZM12 20q2.925 0 4.963-2.038T19 13q0-2.925-2.038-4.963T12 6Q9.075 6 7.037 8.038T5 13q0 2.925 2.038 4.963T12 20Z",
   "alarm-off-outline": "m19.95 17.25l-1.5-1.5q.275-.675.413-1.313T19 13.1q0-2.9-2.05-5T12 6q-.7 0-1.35.113t-1.3.387L7.85 5q.95-.5 1.988-.75T12 4q1.85 0 3.488.7t2.862 1.938q1.225 1.237 1.938 2.887T21 13.1q0 1.125-.275 2.163t-.775 1.987ZM17.7 4.45q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l2.85 2.85q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275L17.7 4.45ZM12 22q-1.85 0-3.488-.7T5.65 19.4q-1.225-1.2-1.938-2.825T3 13.1q0-1.55.463-2.912T4.8 7.7l-.85-.85l-.5.5q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7l.5-.5L1.4 4.3q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l18.4 18.4q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275l-2.45-2.45q-1.125.825-2.487 1.288T12 22Zm0-1.975q1.05 0 2.05-.325t1.85-.9L6.2 9.15q-.575.875-.887 1.888T5 13.1q0 2.9 2.05 4.913T12 20.025Zm-.95-6.05Zm2.85-2.85Z",
   "alert-outline": "M12 1.996a7.49 7.49 0 0 1 7.496 7.25l.004.25v4.097l1.38 3.156a1.25 1.25 0 0 1-1.145 1.75L15 18.502a3 3 0 0 1-5.995.177L9 18.499H4.275a1.251 1.251 0 0 1-1.147-1.747L4.5 13.594V9.496c0-4.155 3.352-7.5 7.5-7.5ZM13.5 18.5l-3 .002a1.5 1.5 0 0 0 2.993.145l.006-.147ZM12 3.496c-3.32 0-6 2.674-6 6v4.41L4.656 17h14.697L18 13.907V9.509l-.004-.225A5.988 5.988 0 0 0 12 3.496Z",
@@ -112,6 +113,7 @@
   "error-circle-outline": "M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333Zm-.001 10.835a.999.999 0 1 1 0 1.998.999.999 0 0 1 0-1.998ZM11.994 7a.75.75 0 0 1 .744.648l.007.101.004 4.502a.75.75 0 0 1-1.493.103l-.007-.102-.004-4.501a.75.75 0 0 1 .75-.751Z",
   "file-upload-outline": "M6 2a2 2 0 0 0-2 2v5.207a5.48 5.48 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.507 5.507 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2H6Zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207L14.793 7ZM5.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9Zm2.354-4.854a.5.5 0 1 1-.708.708L6 13.707V16.5a.5.5 0 0 1-1 0v-2.793l-1.146 1.147a.5.5 0 1 1-.708-.707l2-2A.5.5 0 0 1 5.497 12h.006a.498.498 0 0 1 .348.144l.003.003l2 2Z",
   "filter-outline": "M13.5 16a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h3Zm3-5a.75.75 0 0 1 0 1.5h-9a.75.75 0 0 1 0-1.5h9Zm3-5a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1 0-1.5h15Z",
+  "flame-outline": "M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3c-1.072-2.143-.224-4.054 2-6c.5 2.5 2 4.9 4 6.5c2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5",
   "flash-on-outline": "m8.294 14-1.767 7.068c-.187.746.736 1.256 1.269.701L19.79 9.27A.75.75 0 0 0 19.25 8h-4.46l1.672-5.013A.75.75 0 0 0 15.75 2h-7a.75.75 0 0 0-.721.544l-3 10.5A.75.75 0 0 0 5.75 14h2.544Zm4.745-5.487a.75.75 0 0 0 .711.987h3.74l-8.824 9.196 1.316-5.264a.75.75 0 0 0-.727-.932h-2.51l2.57-9h5.394l-1.67 5.013Z",
   "flash-settings-outline": "M6.19 2.77c.13-.455.547-.77 1.02-.77h5.25c.724 0 1.236.71 1.007 1.398l-.002.008L12.204 7h2.564c.946 0 1.407 1.144.766 1.811l-.003.004l-.237.242a5.545 5.545 0 0 0-1.374-.027l.894-.912a.056.056 0 0 0 .017-.032a.084.084 0 0 0-.007-.044a.079.079 0 0 0-.025-.034c-.005-.004-.013-.008-.031-.008h-3.27a.5.5 0 0 1-.471-.666L12.52 3.08a.062.062 0 0 0-.06-.08H7.211a.062.062 0 0 0-.06.045l-2.25 7.874c-.01.04.019.08.06.08H6.87a.5.5 0 0 1 .485.62l-1.325 5.3a.086.086 0 0 0-.003.03a.02.02 0 0 0 .003.011a.08.08 0 0 0 .072.04a.03.03 0 0 0 .01-.004a.087.087 0 0 0 .024-.018l.003-.004l2.882-2.94a5.573 5.573 0 0 0 .054 1.372l-2.22 2.267c-.754.782-2.059.06-1.795-.996l1.17-4.679H4.96a1.062 1.062 0 0 1-1.021-1.354l2.25-7.873Zm5.877 8.673a2 2 0 0 1-1.431 2.478l-.461.118a4.702 4.702 0 0 0 .01 1.016l.35.083a2 2 0 0 1 1.456 2.519l-.127.422c.257.204.537.378.835.518l.325-.344a2 2 0 0 1 2.91.002l.337.358c.292-.135.568-.302.822-.498l-.157-.556a2 2 0 0 1 1.431-2.479l.46-.117a4.702 4.702 0 0 0-.01-1.017l-.348-.082a2 2 0 0 1-1.456-2.52l.126-.421a4.32 4.32 0 0 0-.835-.519l-.325.344a2 2 0 0 1-2.91-.001l-.337-.358a4.316 4.316 0 0 0-.821.497l.156.557ZM14.5 15.5a1 1 0 1 1 0-2a1 1 0 0 1 0 2Z",
   "folder-outline": "M8.207 4c.46 0 .908.141 1.284.402l.156.12L12.022 6.5h7.728a2.25 2.25 0 0 1 2.229 1.938l.016.158.005.154v9a2.25 2.25 0 0 1-2.096 2.245L19.75 20H4.25a2.25 2.25 0 0 1-2.245-2.096L2 17.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h3.957Zm1.44 5.979a2.25 2.25 0 0 1-1.244.512l-.196.009-4.707-.001v7.251c0 .38.282.694.648.743l.102.007h15.5a.75.75 0 0 0 .743-.648l.007-.102v-9a.75.75 0 0 0-.648-.743L19.75 8h-7.729L9.647 9.979ZM8.207 5.5H4.25a.75.75 0 0 0-.743.648L3.5 6.25v2.749L8.207 9a.75.75 0 0 0 .395-.113l.085-.06 1.891-1.578-1.89-1.575a.75.75 0 0 0-.377-.167L8.207 5.5Z",
@@ -266,5 +268,9 @@
     "M8.66675 11.1667L10.3334 12.8333L13.6667 9.5",
     "M11.1667 17.8333C14.8486 17.8333 17.8333 14.8486 17.8333 11.1667C17.8333 7.48477 14.8486 4.5 11.1667 4.5C7.48477 4.5 4.5 7.48477 4.5 11.1667C4.5 14.8486 7.48477 17.8333 11.1667 17.8333Z",
     "M19.5001 19.5001L15.9167 15.9167"
-  ]
+  ],
+  "chevrons-left-outline": ["m11 17-5-5 5-5", "m18 17-5-5 5-5"],
+  "chevron-left-single-outline": "m15 18-6-6 6-6",
+  "chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
+  "chevron-right-single-outline": "m9 18 6-6-6-6"
 }

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -7,10 +7,10 @@
     <woot-button
       variant="hollow"
       color-scheme="secondary"
-      class="w-full border border-solid border-slate-200 dark:border-slate-700 px-2.5 hover:border-slate-75 dark:hover:border-slate-600"
+      class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
       @click="toggleDropdown"
     >
-      <div class="flex">
+      <div class="flex gap-1">
         <Thumbnail
           v-if="hasValue && hasThumbnail"
           :src="selectedItem.thumbnail"
@@ -21,19 +21,22 @@
         <div class="flex justify-between w-full min-w-0 items-center">
           <h4
             v-if="!hasValue"
-            class="mt-0 mb-0 mr-2 ml-0 text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+            class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
           >
             {{ multiselectorPlaceholder }}
           </h4>
           <h4
             v-else
-            class="items-center leading-tight my-0 mx-2 overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+            class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
             :title="selectedItem.name"
           >
             {{ selectedItem.name }}
           </h4>
-          <i v-if="showSearchDropdown" class="icon ion-chevron-up" />
-          <i v-else class="icon ion-chevron-down" />
+          <i
+            v-if="showSearchDropdown"
+            class="icon ion-chevron-up text-slate-600 mr-1"
+          />
+          <i v-else class="icon ion-chevron-down text-slate-600 mr-1" />
         </div>
       </div>
     </woot-button>
@@ -137,6 +140,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .dropdown-pane {
   @apply box-border top-[2.625rem] w-full;

app/javascript/widget/api/conversation.js

@@ -38,10 +38,9 @@ const setUserLastSeenAt = async ({ lastSeen }) => {
     { contact_last_seen_at: lastSeen }
   );
 };
-const sendEmailTranscript = async ({ email }) => {
+const sendEmailTranscript = async () => {
   return API.post(
-    `/api/v1/widget/conversations/transcript${window.location.search}`,
-    { email }
+    `/api/v1/widget/conversations/transcript${window.location.search}`
   );
 };
 const toggleStatus = async () => {

app/javascript/widget/components/ChatFooter.vue

@@ -87,7 +87,10 @@ export default {
       return !allowMessagesAfterResolved && status === 'resolved';
     },
     showEmailTranscriptButton() {
-      return this.currentUser && this.currentUser.email;
+      return this.hasEmail;
+    },
+    hasEmail() {
+      return this.currentUser && this.currentUser.has_email;
     },
     hasReplyTo() {
       return (
@@ -141,12 +144,9 @@ export default {
       this.inReplyTo = message;
     },
     async sendTranscript() {
-      const { email } = this.currentUser;
-      if (email) {
+      if (this.hasEmail) {
         try {
-          await sendEmailTranscript({
-            email,
-          });
+          await sendEmailTranscript();
           window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
             message: this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'),
             type: 'success',

app/javascript/widget/components/PreChat/Form.vue

@@ -1,7 +1,7 @@
 <template>
   <FormulateForm
     v-model="formValues"
-    class="flex flex-1 flex-col p-6 overflow-y-auto"
+    class="flex flex-col flex-1 p-6 overflow-y-auto"
     @submit="onSubmit"
   >
     <div
@@ -49,7 +49,7 @@
     />
 
     <custom-button
-      class="font-medium mt-2 mb-5"
+      class="mt-2 mb-5 font-medium"
       block
       :bg-color="widgetColor"
       :text-color="textColor"
@@ -133,9 +133,10 @@ export default {
       return this.preChatFormEnabled ? this.options.preChatFields : [];
     },
     filteredPreChatFields() {
-      const isUserEmailAvailable = !!this.currentUser.email;
-      const isUserPhoneNumberAvailable = !!this.currentUser.phone_number;
+      const isUserEmailAvailable = this.currentUser.has_email;
+      const isUserPhoneNumberAvailable = this.currentUser.has_phone_number;
       const isUserIdentifierAvailable = !!this.currentUser.identifier;
+
       const isUserNameAvailable = !!(
         isUserIdentifierAvailable ||
         isUserEmailAvailable ||
@@ -302,11 +303,10 @@ export default {
     },
     onSubmit() {
       const { emailAddress, fullName, phoneNumber, message } = this.formValues;
-      const { email } = this.currentUser;
       this.$emit('submit', {
         fullName,
         phoneNumber,
-        emailAddress: emailAddress || email,
+        emailAddress,
         message,
         activeCampaignId: this.activeCampaign.id,
         conversationCustomAttributes: this.conversationCustomAttributes,

app/javascript/widget/store/modules/specs/contact/getters.spec.js

@@ -3,8 +3,8 @@ import { getters } from '../../contacts';
 describe('#getters', () => {
   it('getCurrentUser', () => {
     const user = {
-      email: 'thoma@sphadikam.com',
-      name: 'Adu Thoma',
+      has_email: true,
+      has_name: true,
       avatar_url: '',
       identifier_hash: 'malana_hash',
     };
@@ -12,8 +12,8 @@ describe('#getters', () => {
       currentUser: user,
     };
     expect(getters.getCurrentUser(state)).toEqual({
-      email: 'thoma@sphadikam.com',
-      name: 'Adu Thoma',
+      has_email: true,
+      has_name: true,
       avatar_url: '',
       identifier_hash: 'malana_hash',
     });

app/javascript/widget/store/modules/specs/contact/mutations.spec.js

@@ -4,8 +4,8 @@ describe('#mutations', () => {
   describe('#SET_CURRENT_USER', () => {
     it('set current user', () => {
       const user = {
-        email: 'thoma@sphadikam.com',
-        name: 'Adu Thoma',
+        has_email: true,
+        has_name: true,
         avatar_url: '',
         identifier_hash: 'malana_hash',
       };