Merge branch 'develop' into feat/CW-3082

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/components/widgets/conversation/components/SLACardLabel.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="hasSlaThreshold"
-    class="relative flex items-center border cursor-pointer min-w-fit border-slate-75 dark:border-slate-700"
-    :class="showExtendedInfo ? 'rounded-lg' : 'rounded'"
+    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 w-full truncate"
-      :class="showExtendedInfo ? 'h-[26px] px-1.5' : 'h-5 px-2 gap-1'"
+      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
       @mouseover="openSlaPopover()"
       @mouseleave="closeSlaPopover()"
     >
@@ -14,7 +14,7 @@
         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'
+          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
         "
       >
         <fluent-icon

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": {
@@ -78,4 +85,4 @@
       }
     }
   }
-}
+}

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

@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+  buttonText: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <button
+    class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 bg-white dark:bg-slate-900 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" />
+    <span
+      v-if="buttonText"
+      class="text-sm font-medium text-slate-900 dark:text-slate-50"
+    >
+      {{ buttonText }}
+    </span>
+    <slot name="rightIcon" />
+    <div v-if="$slots.dropdown" class="absolute right-0 top-10" @click.stop>
+      <slot name="dropdown" />
+    </div>
+  </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,45 @@
+<script setup>
+defineProps({
+  buttonText: {
+    type: String,
+    default: '',
+  },
+  inputValue: {
+    type: String,
+    default: '',
+  },
+  inputPlaceholder: {
+    type: String,
+    default: '',
+  },
+});
+</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 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>
+    <woot-button
+      size="small"
+      variant="clear"
+      color-scheme="primary"
+      class="!px-1 !py-1.5"
+      @click="$emit('click')"
+    >
+      {{ buttonText }}
+    </woot-button>
+  </div>
+</template>

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

@@ -0,0 +1,73 @@
+<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,
+  },
+  inputButtonText: {
+    type: String,
+    default: '',
+  },
+  emptyListMessage: {
+    type: String,
+    default: '',
+  },
+  inputPlaceholder: {
+    type: String,
+    default: '',
+  },
+});
+
+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;
+});
+</script>
+<template>
+  <div
+    class="z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-72"
+  >
+    <slot name="search">
+      <filter-dropdown-search
+        v-if="enableSearch && listItems.length"
+        :button-text="inputButtonText"
+        :input-value="searchTerm"
+        :input-placeholder="inputPlaceholder"
+        @input="onSearch"
+        @click="onSearch('')"
+      />
+    </slot>
+    <slot name="listItem">
+      <filter-dropdown-empty-state
+        v-if="isDropdownListEmpty"
+        :message="emptyListMessage"
+      />
+      <filter-list-item-button
+        v-for="item in filteredListItems"
+        :key="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="$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/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/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"