Merge branch 'develop' into feat/CW-3082

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/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/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/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, defineEmits } 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/conversationCardComponents/CardLabels.vue

@@ -46,6 +46,11 @@ export default {
       type: Number,
       required: true,
     },
+    conversationLabels: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {

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/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

@@ -508,15 +508,31 @@
   },
   "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",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
         "TOOLTIP": "Percentage of SLAs created were completed successfully"
       },
-      "NO_OF_BREACHES": {
-        "LABEL": "Number of Breaches",
-        "TOOLTIP": "The total SLA breaches in a certain period."
+      "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

@@ -240,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

@@ -65,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"

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,6 +4,10 @@ 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
       );

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/reports/SLAReports.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="flex flex-col flex-1 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,
+      from: 0,
+      to: 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      slaReports: 'slaReports/getAll',
+      slaMetrics: 'slaReports/getMetrics',
+      slaMeta: 'slaReports/getMeta',
+      uiFlags: 'slaReports/getUIFlags',
+    }),
+  },
+  mounted() {
+    this.fetchSLAMetrics();
+    this.fetchSLAReports();
+  },
+  methods: {
+    fetchSLAReports({ pageNumber } = {}) {
+      this.$store.dispatch('slaReports/get', {
+        page: pageNumber || this.pageNumber,
+        from: this.from,
+        to: this.to,
+      });
+    },
+    fetchSLAMetrics() {
+      this.$store.dispatch('slaReports/getMetrics', {
+        from: this.from,
+        to: this.to,
+      });
+    },
+    onPageChange(pageNumber) {
+      this.fetchSLAReports({ pageNumber });
+    },
+    onFilterChange({ from, to }) {
+      this.from = from;
+      this.to = to;
+      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/SLA/SLAMetricCard.vue

@@ -1,7 +1,7 @@
 <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 text-slate-700 dark:text-slate-200 font-medium"
+      class="inline-flex items-center gap-1 text-sm font-medium text-slate-700 dark:text-slate-200"
     >
       {{ label }}
       <fluent-icon
@@ -9,12 +9,12 @@
         size="14"
         icon="information"
         type="outline"
-        class="flex-shrink-0 text-sm font-normal flex sm:font-medium text-slate-500 dark:text-slate-500"
+        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 animate-pulse"
+      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">

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

@@ -13,9 +13,18 @@
       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_BREACHES.LABEL')"
+      :label="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.LABEL')"
       :value="noOfBreaches"
-      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.TOOLTIP')"
+      :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>
@@ -32,6 +41,10 @@ defineProps({
     type: Number,
     required: true,
   },
+  noOfConversations: {
+    type: Number,
+    required: true,
+  },
   isLoading: {
     type: Boolean,
     default: false,

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

@@ -0,0 +1,91 @@
+<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">
+      <reports-filters-date-range @on-range-change="onDateRangeChange" />
+      <woot-date-range-picker
+        v-if="isDateRangeSelected"
+        show-range
+        class="no-margin auto-width"
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        @change="onCustomDateRangeChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
+import ReportsFiltersDateRange from '../Filters/DateRange.vue';
+import subDays from 'date-fns/subDays';
+import { DATE_RANGE_OPTIONS } from '../../constants';
+import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
+
+export default {
+  components: {
+    WootDateRangePicker,
+    ReportsFiltersDateRange,
+  },
+
+  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,
+      });
+    },
+    onDateRangeChange(selectedRange) {
+      this.selectedDateRange = selectedRange;
+      this.emitChange();
+    },
+    onCustomDateRangeChange(value) {
+      this.customDateRange = value;
+      this.emitChange();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.filter-container {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+</style>

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"
+          :all-missed-slas="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/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/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/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/modules/SLAReports.js

@@ -1,11 +1,12 @@
 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: {
-    numberOfSLABreaches: 0,
+    numberOfConversations: 0,
+    numberOfSLAMisses: 0,
     hitRate: '0%',
   },
   uiFlags: {
@@ -59,6 +60,11 @@ export const actions = {
       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 = {
@@ -72,19 +78,21 @@ export const mutations = {
   [types.SET_SLA_REPORTS]: MutationHelpers.set,
   [types.SET_SLA_REPORTS_METRICS](
     _state,
-    { number_of_sla_breaches: numberOfSLABreaches, hit_rate: hitRate }
+    {
+      number_of_sla_misses: numberOfSLAMisses,
+      hit_rate: hitRate,
+      total_applied_slas: numberOfConversations,
+    }
   ) {
     _state.metrics = {
-      numberOfSLABreaches,
+      numberOfSLAMisses,
       hitRate,
+      numberOfConversations,
     };
   },
-  [types.SET_SLA_REPORTS_META](
-    _state,
-    { total_applied_slas: totalAppliedSLAs, current_page: currentPage }
-  ) {
+  [types.SET_SLA_REPORTS_META](_state, { count, current_page: currentPage }) {
     _state.meta = {
-      count: totalAppliedSLAs,
+      count,
       currentPage,
     };
   },

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

@@ -21,4 +21,33 @@ describe('#getters', () => {
       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

@@ -23,12 +23,14 @@ describe('#mutations', () => {
     it('set metrics', () => {
       const state = { metrics: {} };
       mutations[types.SET_SLA_REPORTS_METRICS](state, {
-        number_of_sla_breaches: 1,
+        number_of_sla_misses: 1,
         hit_rate: '100%',
+        total_applied_slas: 1,
       });
       expect(state.metrics).toEqual({
-        numberOfSLABreaches: 1,
+        numberOfSLAMisses: 1,
         hitRate: '100%',
+        numberOfConversations: 1,
       });
     });
   });
@@ -37,7 +39,7 @@ describe('#mutations', () => {
     it('set meta', () => {
       const state = { meta: {} };
       mutations[types.SET_SLA_REPORTS_META](state, {
-        total_applied_slas: 1,
+        count: 1,
         current_page: 1,
       });
       expect(state.meta).toEqual({

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

@@ -273,5 +273,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;