Update the UI

* feat: update SLA evaluation logic

* chore: handle nrt

* chore: handle applied_sla status

* chore: refactor spec to bring down expecations in a single block

* chore: fix process_account_applied_sla spec

* chore: add spec to test multiple nrt misses

* feat: persist sla notifications

* feat: revert persist sla notifications

* chore: refactor sla_status to include active_with_misses

* chore: refactor spec

* Update evaluate_applied_sla_service.rb

* minor refactors

* clean up

* move notification related spec

* chore: refactor notifications spec to sla_event model

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/builders/agent_builder.rb

@@ -16,7 +16,6 @@ class AgentBuilder
   def perform
     ActiveRecord::Base.transaction do
       @user = find_or_create_user
-      send_confirmation_if_required
       create_account_user
     end
     @user
@@ -34,11 +33,6 @@ class AgentBuilder
     User.create!(email: email, name: name, password: temp_password, password_confirmation: temp_password)
   end
 
-  # Sends confirmation instructions if the user is persisted and not confirmed.
-  def send_confirmation_if_required
-    @user.send_confirmation_instructions if user_needs_confirmation?
-  end
-
   # Checks if the user needs confirmation.
   # @return [Boolean] true if the user is persisted and not confirmed, false otherwise.
   def user_needs_confirmation?

app/controllers/api/v1/accounts/contacts_controller.rb

@@ -65,6 +65,10 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     contacts = result[:contacts]
     @contacts_count = result[:count]
     @contacts = fetch_contacts(contacts)
+  rescue CustomExceptions::CustomFilter::InvalidAttribute,
+         CustomExceptions::CustomFilter::InvalidOperator,
+         CustomExceptions::CustomFilter::InvalidValue => e
+    render_could_not_create_error(e.message)
   end
 
   def contactable_inboxes

app/controllers/api/v1/accounts/conversations_controller.rb

@@ -44,6 +44,10 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     result = ::Conversations::FilterService.new(params.permit!, current_user).perform
     @conversations = result[:conversations]
     @conversations_count = result[:count]
+  rescue CustomExceptions::CustomFilter::InvalidAttribute,
+         CustomExceptions::CustomFilter::InvalidOperator,
+         CustomExceptions::CustomFilter::InvalidValue => e
+    render_could_not_create_error(e.message)
   end
 
   def mute

app/controllers/concerns/domain_helper.rb

@@ -0,0 +1,5 @@
+module DomainHelper
+  def self.chatwoot_domain?(domain = request.host)
+    [URI.parse(ENV.fetch('FRONTEND_URL', '')).host, URI.parse(ENV.fetch('HELPCENTER_URL', '')).host].include?(domain)
+  end
+end

app/controllers/concerns/switch_locale.rb

@@ -6,6 +6,7 @@ module SwitchLocale
   def switch_locale(&)
     # priority is for locale set in query string (mostly for widget/from js sdk)
     locale ||= locale_from_params
+    locale ||= locale_from_custom_domain
     # if locale is not set in account, let's use DEFAULT_LOCALE env variable
     locale ||= locale_from_env_variable
     set_locale(locale, &)
@@ -16,6 +17,20 @@ module SwitchLocale
     set_locale(locale, &)
   end
 
+  # If the request is coming from a custom domain, it should be for a helpcenter portal
+  # We will use the portal locale in such cases
+  def locale_from_custom_domain(&)
+    return if params[:locale]
+
+    domain = request.host
+    return if DomainHelper.chatwoot_domain?(domain)
+
+    @portal = Portal.find_by(custom_domain: domain)
+    return unless @portal
+
+    @portal.default_locale
+  end
+
   def set_locale(locale, &)
     # if locale is empty, use default_locale
     locale ||= I18n.default_locale

app/controllers/dashboard_controller.rb

@@ -18,6 +18,7 @@ class DashboardController < ActionController::Base
       'LOGO', 'LOGO_DARK', 'LOGO_THUMBNAIL',
       'INSTALLATION_NAME',
       'WIDGET_BRAND_URL', 'TERMS_URL',
+      'BRAND_URL', 'BRAND_NAME',
       'PRIVACY_URL',
       'DISPLAY_MANIFEST',
       'CREATE_NEW_ACCOUNT_FROM_DASHBOARD',

app/controllers/public/api/v1/portals/base_controller.rb

@@ -47,7 +47,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
     @locale = if article.category.present?
                 article.category.locale
               else
-                'en'
+                article.portal.default_locale
               end
 
     I18n.with_locale(@locale, &)

app/controllers/public_controller.rb

@@ -8,8 +8,7 @@ class PublicController < ActionController::Base
 
   def ensure_custom_domain_request
     domain = request.host
-
-    return if [URI.parse(ENV.fetch('FRONTEND_URL', '')).host, URI.parse(ENV.fetch('HELPCENTER_URL', '')).host].include?(domain)
+    return if DomainHelper.chatwoot_domain?(domain)
 
     @portal = ::Portal.find_by(custom_domain: domain)
     return if @portal.present?

app/helpers/application_helper.rb

@@ -2,4 +2,11 @@ module ApplicationHelper
   def available_locales_with_name
     LANGUAGES_CONFIG.map { |_key, val| val.slice(:name, :iso_639_1_code) }
   end
+
+  def feature_help_urls
+    features = YAML.safe_load(Rails.root.join('config/features.yml').read).freeze
+    features.each_with_object({}) do |feature, hash|
+      hash[feature['name']] = feature['help_url'] if feature['help_url']
+    end
+  end
 end

app/helpers/filter_helper.rb

@@ -0,0 +1,84 @@
+module FilterHelper
+  def build_condition_query(model_filters, query_hash, current_index)
+    current_filter = model_filters[query_hash['attribute_key']]
+
+    # Throw InvalidOperator Error if the attribute is a standard attribute
+    # and the operator is not allowed in the config
+    if current_filter.present? && current_filter['filter_operators'].exclude?(query_hash[:filter_operator])
+      raise CustomExceptions::CustomFilter::InvalidOperator.new(
+        attribute_name: query_hash['attribute_key'],
+        allowed_keys: current_filter['filter_operators']
+      )
+    end
+
+    # Every other filter expects a value to be present
+    if %w[is_present is_not_present].exclude?(query_hash[:filter_operator]) && query_hash['values'].blank?
+      raise CustomExceptions::CustomFilter::InvalidValue.new(attribute_name: query_hash['attribute_key'])
+    end
+
+    condition_query = build_condition_query_string(current_filter, query_hash, current_index)
+    # The query becomes empty only when it doesn't match to any supported
+    # standard attribute or custom attribute defined in the account.
+    if condition_query.empty?
+      raise CustomExceptions::CustomFilter::InvalidAttribute.new(key: query_hash['attribute_key'],
+                                                                 allowed_keys: model_filters.keys)
+    end
+
+    condition_query
+  end
+
+  def build_condition_query_string(current_filter, query_hash, current_index)
+    filter_operator_value = filter_operation(query_hash, current_index)
+
+    return handle_nil_filter(query_hash, current_index) if current_filter.nil?
+
+    case current_filter['attribute_type']
+    when 'additional_attributes'
+      handle_additional_attributes(query_hash, filter_operator_value, current_filter['data_type'])
+    else
+      handle_standard_attributes(current_filter, query_hash, current_index, filter_operator_value)
+    end
+  end
+
+  def handle_nil_filter(query_hash, current_index)
+    attribute_type = "#{filter_config[:entity].downcase}_attribute"
+    custom_attribute_query(query_hash, attribute_type, current_index)
+  end
+
+  def handle_additional_attributes(query_hash, filter_operator_value, data_type)
+    if data_type == 'text_case_insensitive'
+      "LOWER(#{filter_config[:table_name]}.additional_attributes ->> '#{query_hash[:attribute_key]}') " \
+        "#{filter_operator_value} #{query_hash[:query_operator]}"
+    else
+      "#{filter_config[:table_name]}.additional_attributes ->> '#{query_hash[:attribute_key]}' " \
+        "#{filter_operator_value} #{query_hash[:query_operator]} "
+    end
+  end
+
+  def handle_standard_attributes(current_filter, query_hash, current_index, filter_operator_value)
+    case current_filter['data_type']
+    when 'date'
+      date_filter(current_filter, query_hash, filter_operator_value)
+    when 'labels'
+      tag_filter_query(query_hash, current_index)
+    when 'text_case_insensitive'
+      text_case_insensitive_filter(query_hash, filter_operator_value)
+    else
+      default_filter(query_hash, filter_operator_value)
+    end
+  end
+
+  def date_filter(current_filter, query_hash, filter_operator_value)
+    "(#{filter_config[:table_name]}.#{query_hash[:attribute_key]})::#{current_filter['data_type']} " \
+      "#{filter_operator_value}#{current_filter['data_type']} #{query_hash[:query_operator]}"
+  end
+
+  def text_case_insensitive_filter(query_hash, filter_operator_value)
+    "LOWER(#{filter_config[:table_name]}.#{query_hash[:attribute_key]}) " \
+      "#{filter_operator_value} #{query_hash[:query_operator]}"
+  end
+
+  def default_filter(query_hash, filter_operator_value)
+    "#{filter_config[:table_name]}.#{query_hash[:attribute_key]} #{filter_operator_value} #{query_hash[:query_operator]}"
+  end
+end

app/javascript/dashboard/api/slaReports.js

@@ -0,0 +1,73 @@
+/* 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,
+    page,
+  } = {}) {
+    return axios.get(this.url, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        team_id,
+        sla_policy_id,
+        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,
+    sla_policy_id,
+  } = {}) {
+    // no ratings for metrics
+    return axios.get(`${this.url}/metrics`, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        team_id,
+        sla_policy_id,
+      },
+    });
+  }
+}
+
+export default new SLAReportsAPI();

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

@@ -1,11 +1,10 @@
 // scss-lint:disable SpaceAfterPropertyColon
-// @import 'shared/assets/fonts/inter';
-
+@import 'shared/assets/fonts/inter';
+// Inter,
 html,
 body {
   font-family:
     'PlusJakarta',
-    Inter,
     -apple-system,
     system-ui,
     BlinkMacSystemFont,

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,13 @@ const reports = accountId => ({
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
       toStateName: 'team_reports',
     },
+    {
+      icon: 'document-list-clock',
+      label: 'REPORTS_SLA',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/reports/sla`),
+      toStateName: 'sla_reports',
+    },
   ],
 });
 

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

@@ -0,0 +1,103 @@
+<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'"
+  >
+    <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'
+      "
+    >
+      <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>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { evaluateSLAStatus } from '../helpers/SLAHelper';
+
+// const REFRESH_INTERVAL = 60000;
+
+export default {
+  props: {
+    chat: {
+      type: Object,
+      default: () => ({}),
+    },
+    showExtendedInfo: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      timer: null,
+      slaStatus: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      activeSLA: 'sla/getSLAById',
+    }),
+    slaPolicyId() {
+      return this.chat?.sla_policy_id;
+    },
+    sla() {
+      if (!this.slaPolicyId) return null;
+      return this.activeSLA(this.slaPolicyId);
+    },
+    isSlaMissed() {
+      return this.slaStatus?.isSlaMissed;
+    },
+    slaTextStyles() {
+      return this.isSlaMissed
+        ? 'text-red-400 dark:text-red-300'
+        : 'text-yellow-600 dark:text-yellow-500';
+    },
+    slaStatusText() {
+      const upperCaseType = this.slaStatus?.type?.toUpperCase(); // FRT, NRT, or RT
+      const statusKey = this.isSlaMissed ? 'BREACH' : 'DUE';
+
+      return this.$t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
+        status: this.$t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
+      });
+    },
+  },
+  watch: {
+    chat() {
+      this.updateSlaStatus();
+    },
+  },
+  mounted() {
+    this.updateSlaStatus();
+  },
+  methods: {
+    updateSlaStatus() {
+      this.slaStatus = evaluateSLAStatus(this.sla, this.chat);
+    },
+  },
+};
+</script>

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

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

app/javascript/dashboard/featureFlags.js

@@ -20,4 +20,14 @@ export const FEATURE_FLAGS = {
   INBOX_VIEW: 'inbox_view',
   SLA: 'sla',
   RESPONSE_BOT: 'response_bot',
+  CHANNEL_EMAIL: 'channel_email',
+  CHANNEL_FACEBOOK: 'channel_facebook',
+  CHANNEL_TWITTER: 'channel_twitter',
+  CHANNEL_WEBSITE: 'channel_website',
+  CUSTOM_REPLY_DOMAIN: 'custom_reply_domain',
+  CUSTOM_REPLY_EMAIL: 'custom_reply_email',
+  DISABLE_BRANDING: 'disable_branding',
+  EMAIL_CONTINUITY_ON_API_CHANNEL: 'email_continuity_on_api_channel',
+  INBOUND_EMAILS: 'inbound_emails',
+  IP_LOOKUP: 'ip_lookup',
 };

app/javascript/dashboard/helper/directives/resize.js

@@ -0,0 +1,41 @@
+import { debounce } from '@chatwoot/utils';
+
+const RESIZE_OBSERVER_DEBOUNCE_TIME = 100;
+
+function createResizeObserver(el, binding) {
+  const { value } = binding;
+  const observer = new ResizeObserver(
+    debounce(entries => {
+      const entry = entries[0];
+      if (entry && value && typeof value === 'function') {
+        value(entry);
+      }
+    }, RESIZE_OBSERVER_DEBOUNCE_TIME)
+  );
+
+  el.cwResizeObserver = observer;
+  observer.observe(el);
+}
+
+function destroyResizeObserver(el) {
+  if (el.cwResizeObserver) {
+    el.cwResizeObserver.unobserve(el);
+    el.cwResizeObserver.disconnect();
+    delete el.cwResizeObserver;
+  }
+}
+
+export default {
+  bind(el, binding) {
+    createResizeObserver(el, binding);
+  },
+  update(el, binding) {
+    if (binding.oldValue !== binding.value) {
+      destroyResizeObserver(el);
+      createResizeObserver(el, binding);
+    }
+  },
+  unbind(el) {
+    destroyResizeObserver(el);
+  },
+};

app/javascript/dashboard/helper/featureHelper.js

@@ -0,0 +1,4 @@
+export function getHelpUrlForFeature(featureName) {
+  const { helpUrls } = window.chatwootConfig;
+  return helpUrls[featureName];
+}

app/javascript/dashboard/helper/specs/directives/resize.spec.js

@@ -0,0 +1,78 @@
+import resize from '../../directives/resize';
+
+class ResizeObserverMock {
+  // eslint-disable-next-line class-methods-use-this
+  observe() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  unobserve() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  disconnect() {}
+}
+
+describe('resize directive', () => {
+  let el;
+  let binding;
+  let observer;
+
+  beforeEach(() => {
+    el = document.createElement('div');
+    binding = {
+      value: jest.fn(),
+    };
+    observer = {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    };
+    window.ResizeObserver = ResizeObserverMock;
+    jest.spyOn(window, 'ResizeObserver').mockImplementation(() => observer);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should create ResizeObserver on bind', () => {
+    resize.bind(el, binding);
+
+    expect(ResizeObserver).toHaveBeenCalled();
+    expect(observer.observe).toHaveBeenCalledWith(el);
+  });
+
+  it('should call callback on observer callback', () => {
+    el = document.createElement('div');
+    binding = {
+      value: jest.fn(),
+    };
+
+    resize.bind(el, binding);
+
+    const entries = [{ contentRect: { width: 100, height: 100 } }];
+    const callback = binding.value;
+    callback(entries[0]);
+
+    expect(binding.value).toHaveBeenCalledWith(entries[0]);
+  });
+
+  it('should destroy and recreate observer on update', () => {
+    resize.bind(el, binding);
+
+    resize.update(el, { ...binding, oldValue: 'old' });
+
+    expect(observer.unobserve).toHaveBeenCalledWith(el);
+    expect(observer.disconnect).toHaveBeenCalled();
+    expect(ResizeObserver).toHaveBeenCalledTimes(2);
+    expect(observer.observe).toHaveBeenCalledTimes(2);
+  });
+
+  it('should destroy observer on unbind', () => {
+    resize.bind(el, binding);
+
+    resize.unbind(el);
+
+    expect(observer.unobserve).toHaveBeenCalledWith(el);
+    expect(observer.disconnect).toHaveBeenCalled();
+  });
+});

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

@@ -44,7 +44,8 @@
       "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
       "CREATED_AT": "Created At",
       "LAST_ACTIVITY": "Last Activity",
-      "REFERER_LINK": "Referrer link"
+      "REFERER_LINK": "Referrer link",
+      "BLOCKED": "Blocked"
     },
     "GROUPS": {
       "STANDARD_FILTERS": "Standard Filters",

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

@@ -64,7 +64,14 @@
       "SNOOZED_UNTIL": "Snoozed until",
       "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
       "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week",
-      "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply"
+      "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply",
+      "SLA_STATUS": {
+        "FRT": "FRT {status}",
+        "NRT": "NRT {status}",
+        "RT": "RT {status}",
+        "BREACH": "breach",
+        "DUE": "due"
+      }
     },
     "RESOLVE_DROPDOWN": {
       "MARK_PENDING": "Mark as pending",

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

@@ -505,5 +505,26 @@
     "THURSDAY": "Thursday",
     "FRIDAY": "Friday",
     "SATURDAY": "Saturday"
+  },
+  "SLA_REPORTS": {
+    "HEADER": "SLA Reports",
+    "NO_RECORDS": "There are no SLA reports available.",
+    "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."
+      }
+    },
+    "TABLE": {
+      "HEADER": {
+        "POLICY_BREACHED": "Policy breached",
+        "CONVERSATION": "Conversation",
+        "AGENT": "Agent"
+      }
+    }
   }
 }

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

@@ -239,6 +239,7 @@
     "REPORTS_LABEL": "Labels",
     "REPORTS_INBOX": "Inbox",
     "REPORTS_TEAM": "Team",
+    "REPORTS_SLA": "SLA",
     "SET_AVAILABILITY_TITLE": "Set yourself as",
     "SLA": "SLA",
     "BETA": "Beta",

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

@@ -1,15 +1,24 @@
 {
   "SLA": {
     "HEADER": "SLA",
-    "HEADER_BTN_TXT": "Add SLA",
+    "ADD_ACTION": "Add SLA",
+    "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",
-    "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>SLA</b> <p>Think of Service Level Agreements (SLAs) like friendly promises between a service provider and a customer.</p> <p> These promises set clear expectations for things like how quickly the team will respond to issues, making sure you always get a reliable and top-notch experience!</p>",
     "LIST": {
       "404": "There are no SLAs available in this account.",
-      "TITLE": "Manage SLA",
-      "DESC": "SLAs: Friendly promises for great service!",
-      "TABLE_HEADER": ["Name", "Description", "FRT", "NRT", "RT", "Business Hours"]
+      "BUSINESS_HOURS_ON": "Business hours on",
+      "BUSINESS_HOURS_OFF": "Business hours off",
+      "RESPONSE_TYPES": {
+        "FRT": "First response time threshold",
+        "NRT": "Next response time threshold",
+        "RT": "Resolution time threshold",
+        "SHORT_HAND": {
+          "FRT": "FRT",
+          "NRT": "NRT",
+          "RT": "RT"
+        }
+      }
     },
     "FORM": {
       "NAME": {

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/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -243,7 +243,7 @@ export default {
           attr.attribute_display_type === 'checkbox'
         );
       });
-      if (isCustomAttributeCheckbox) {
+      if (isCustomAttributeCheckbox || type === 'blocked') {
         return [
           {
             id: true,

app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js

@@ -76,6 +76,14 @@ const filterTypes = [
     filterOperators: OPERATOR_TYPES_5,
     attributeModel: 'standard',
   },
+  {
+    attributeKey: 'blocked',
+    attributeI18nKey: 'BLOCKED',
+    inputType: 'search_select',
+    dataType: 'text',
+    filterOperators: OPERATOR_TYPES_1,
+    attributeModel: 'standard',
+  },
 ];
 
 export const filterAttributeGroups = [
@@ -115,6 +123,10 @@ export const filterAttributeGroups = [
         key: 'last_activity_at',
         i18nKey: 'LAST_ACTIVITY',
       },
+      {
+        key: 'blocked',
+        i18nKey: 'BLOCKED',
+      },
     ],
   },
 ];

app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue

@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingMessage: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div class="flex flex-col w-full h-full gap-10 font-inter">
+    <slot name="header" />
+    <div>
+      <slot v-if="isLoading" name="loading">
+        <woot-loading-state :message="loadingMessage" />
+      </slot>
+      <slot v-else name="body" />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue

@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+  keepAlive: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col w-full h-full px-5 pt-8 pb-3 m-0 overflow-auto bg-white sm:px-16 sm:pt-16 dark:bg-slate-900"
+  >
+    <div class="flex items-start max-w-[900px] w-full">
+      <keep-alive v-if="keepAlive">
+        <router-view />
+      </keep-alive>
+      <router-view v-else />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue

@@ -0,0 +1,102 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  iconName: {
+    type: String,
+    required: true,
+  },
+  href: {
+    type: String,
+    default: '',
+  },
+  linkText: {
+    type: String,
+    default: '',
+  },
+});
+
+const openInNewTab = url => {
+  if (!url) return;
+  window.open(url, '_blank', 'noopener noreferrer');
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-start w-full gap-4">
+    <!-- Header section with icon, title and action button -->
+    <div class="flex items-center justify-between w-full gap-4">
+      <!-- Icon and title container -->
+      <div class="flex items-center gap-3">
+        <div
+          class="flex items-center w-10 h-10 p-1 rounded-full bg-woot-25/60 dark:bg-woot-900/60"
+        >
+          <div
+            class="flex items-center justify-center w-full h-full rounded-full bg-woot-75/70 dark:bg-woot-800/40"
+          >
+            <fluent-icon
+              size="14"
+              :icon="iconName"
+              type="outline"
+              class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+            />
+          </div>
+        </div>
+        <h1
+          class="text-2xl font-medium tracking-[-1.5%] text-slate-900 dark:text-slate-25"
+        >
+          {{ title }}
+        </h1>
+      </div>
+      <!-- Slot for additional actions on larger screens -->
+      <div class="hidden gap-2 sm:flex">
+        <slot name="actions" />
+      </div>
+    </div>
+    <!-- Description and optional link -->
+    <div
+      class="flex flex-col gap-2 text-slate-600 dark:text-slate-300 max-w-[721px] w-full"
+    >
+      <p
+        class="mb-0 text-sm font-normal tracking-[0.5%] line-clamp-5 sm:line-clamp-none"
+      >
+        <slot name="description">{{ description }}</slot>
+      </p>
+      <!-- Conditional link -->
+      <a
+        v-if="href && linkText"
+        :href="href"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="sm:inline-flex hidden tracking-[-0.6%] gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium tracking=[-0.6%] hover:underline"
+      >
+        {{ linkText }}
+        <fluent-icon
+          size="16"
+          icon="chevron-right"
+          type="outline"
+          class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+        />
+      </a>
+    </div>
+    <!-- Mobile view for actions and link -->
+    <div class="flex items-start justify-start w-full gap-3 sm:hidden">
+      <slot name="actions" />
+      <woot-button
+        v-if="href && linkText"
+        color-scheme="secondary"
+        icon="arrow-outwards"
+        class="flex-row-reverse rounded-xl min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
+        @click="openInNewTab(href)"
+      >
+        {{ linkText }}
+      </woot-button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue

@@ -0,0 +1,53 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between shadow-sm group bg-white border border-solid rounded-xl dark:bg-slate-800 border-slate-75 dark:border-slate-700/50 max-w-[900px] w-full"
+  >
+    <!-- left side section -->
+    <slot name="leftSection">
+      <div class="flex flex-col min-w-0 items-start gap-3 max-w-[480px] w-full">
+        <div
+          class="flex items-center justify-between w-full gap-3 sm:justify-normal whitespace-nowrap"
+        >
+          <h3
+            class="justify-between text-sm tracking-[-0.6%] font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </h3>
+          <slot name="label" />
+        </div>
+        <p
+          class="text-sm text-slate-600 tracking-[0.5%] dark:text-slate-300 max-w-[400px] w-full line-clamp-2"
+        >
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </p>
+      </div>
+    </slot>
+
+    <!-- right side section -->
+    <slot name="rightSection" />
+
+    <!-- actions section -->
+    <div
+      v-if="$slots.actions"
+      class="absolute flex-col items-center hidden gap-1 border-none ltr:-right-3 rtl:-left-3 top-3 group-hover:flex"
+    >
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex flex-col flex-1 gap-6 p-4 overflow-auto font-inter">
+    <!-- <SLA-filters /> -->
+    <SLAMetrics
+      :hit-rate="slaMetrics.hitRate"
+      :no-of-breaches="slaMetrics.numberOfSLABreaches"
+      :is-loading="uiFlags.isLoading"
+    />
+    <SLATable
+      :sla-reports="slaReports"
+      :current-page="Number(slaMeta.currentPage)"
+      :total-count="Number(slaMeta.count)"
+      @page-change="onPageChange"
+    />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import SLAMetrics from './components/SLA/SLAMetrics.vue';
+import SLATable from './components/SLA/SLATable.vue';
+// import SLAFilters from './components/SLA/SLAFilters.vue';
+export default {
+  name: 'SLAReports',
+  components: {
+    SLAMetrics,
+    SLATable,
+    // SLAFilters,
+  },
+  data() {
+    return {
+      pageNumber: 1,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      slaReports: 'slaReports/getAll',
+      slaMetrics: 'slaReports/getMetrics',
+      slaMeta: 'slaReports/getMeta',
+      uiFlags: 'slaReports/getUIFlags',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('slaReports/getMetrics');
+    this.fetchSLAReports();
+  },
+  methods: {
+    fetchSLAReports({ pageNumber } = {}) {
+      this.$store.dispatch('slaReports/get', {
+        page: pageNumber || this.pageNumber,
+      });
+    },
+    onPageChange(pageNumber) {
+      this.fetchSLAReports({ pageNumber });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="avatar-container" :style="style" aria-hidden="true">
+    <slot>{{ userInitial }}</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Avatar',
+  props: {
+    username: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: Number,
+      default: 40,
+    },
+  },
+  computed: {
+    style() {
+      return {
+        fontSize: `${Math.floor(this.size / 2.5)}px`,
+      };
+    },
+    userInitial() {
+      const parts = this.username.split(/[ -]/);
+      let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');
+
+      if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
+        initials = initials.replace(/[a-z]+/g, '');
+      }
+      initials = initials.substring(0, 2).toUpperCase();
+
+      return initials;
+    },
+  },
+};
+</script>
+
+<style scoped>
+@tailwind components;
+@layer components {
+  .avatar-color {
+    background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);
+  }
+
+  .dark-avatar-color {
+    background-image: linear-gradient(to top, #135899 0%, #135899 100%);
+  }
+}
+.avatar-container {
+  @apply flex leading-[100%] font-medium items-center justify-center text-center cursor-default avatar-color dark:dark-avatar-color text-woot-600 dark:text-woot-200;
+}
+</style>

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

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="menu text-slate-700 dark:text-slate-200 font-medium text-sm h-11 flex items-center hover:bg-slate-50 dark:hover:bg-slate-100"
+    role="button"
+    @click.stop="$emit('click')"
+  >
+    <span
+      v-if="variant === 'label' && option.color"
+      class="label-pill"
+      :style="{ backgroundColor: option.color }"
+    />
+    <thumbnail
+      v-if="variant === 'agent'"
+      :username="option.label"
+      :src="option.thumbnail"
+      :status="option.status"
+      size="20px"
+      class="agent-thumbnail"
+    />
+    <p class="menu-label overflow-hidden whitespace-nowrap text-ellipsis">
+      {{ option.label }}
+    </p>
+  </div>
+</template>
+
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => {},
+    },
+    variant: {
+      type: String,
+      default: 'default',
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.menu {
+  width: calc(var(--space-mega) * 2);
+  @apply flex items-center flex-nowrap p-1 rounded-sm overflow-hidden cursor-pointer;
+
+  .menu-label {
+    @apply my-0 mx-2 text-xs flex-shrink-0;
+  }
+
+  // &:hover {
+  //   @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-slate-50;
+  // }
+}
+
+.agent-thumbnail {
+  margin-top: 0 !important;
+}
+
+.label-pill {
+  @apply w-4 h-4 rounded-full border border-slate-50 border-solid dark:border-slate-900 flex-shrink-0;
+}
+</style>

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

@@ -0,0 +1,122 @@
+<template>
+  <div
+    class="bg-white dark:bg-slate- rounded-xl border-slate-100 dark:border-slate-900 border-solid border"
+  >
+    <menu-item
+      :option="unreadOption"
+      variant="icon"
+      @click="$emit('mark-as-unread')"
+    />
+    <menu-item-with-submenu :option="priorityConfig">
+      <menu-item
+        v-for="(option, i) in priorityConfig.options"
+        :key="i"
+        :option="option"
+      />
+    </menu-item-with-submenu>
+    <template v-for="option in statusMenuConfig">
+      <menu-item
+        v-if="show(option.key)"
+        :key="option.key"
+        :option="option"
+        variant="icon"
+      />
+    </template>
+    <menu-item
+      v-if="show(snoozeOption.key)"
+      :option="snoozeOption"
+      variant="icon"
+    />
+
+    <menu-item-with-submenu :option="priorityConfig">
+      <menu-item
+        v-for="(option, i) in priorityConfig.options"
+        :key="i"
+        :option="option"
+      />
+    </menu-item-with-submenu>
+  </div>
+</template>
+
+<script>
+import MenuItem from './MenuItem.vue';
+import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
+import wootConstants from 'dashboard/constants/globals';
+import agentMixin from 'dashboard/mixins/agentMixin';
+import { mapGetters } from 'vuex';
+export default {
+  components: {
+    MenuItem,
+    MenuItemWithSubmenu,
+  },
+  mixins: [agentMixin],
+  data() {
+    return {
+      STATUS_TYPE: wootConstants.STATUS_TYPE,
+      unreadOption: {
+        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_UNREAD'),
+        icon: 'mail',
+      },
+      statusMenuConfig: [
+        {
+          key: wootConstants.STATUS_TYPE.RESOLVED,
+          label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.RESOLVED'),
+          icon: 'checkmark',
+        },
+        {
+          key: wootConstants.STATUS_TYPE.PENDING,
+          label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.PENDING'),
+          icon: 'book-clock',
+        },
+        {
+          key: wootConstants.STATUS_TYPE.OPEN,
+          label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.REOPEN'),
+          icon: 'arrow-redo',
+        },
+      ],
+      snoozeOption: {
+        key: wootConstants.STATUS_TYPE.SNOOZED,
+        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.SNOOZE.TITLE'),
+        icon: 'snooze',
+      },
+      priorityConfig: {
+        key: 'priority',
+        label: this.$t('CONVERSATION.PRIORITY.TITLE'),
+        icon: 'warning',
+        options: [
+          {
+            label: this.$t('CONVERSATION.PRIORITY.OPTIONS.NONE'),
+            key: null,
+          },
+          {
+            label: this.$t('CONVERSATION.PRIORITY.OPTIONS.URGENT'),
+            key: 'urgent',
+          },
+          {
+            label: this.$t('CONVERSATION.PRIORITY.OPTIONS.HIGH'),
+            key: 'high',
+          },
+          {
+            label: this.$t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM'),
+            key: 'medium',
+          },
+          {
+            label: this.$t('CONVERSATION.PRIORITY.OPTIONS.LOW'),
+            key: 'low',
+          },
+        ].filter(item => item.key !== this.priority),
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({}),
+  },
+  methods: {
+    show(key) {
+      // If the conversation status is same as the action, then don't display the option
+      // i.e.: Don't show an option to resolve if the conversation is already resolved.
+      return this.status !== key;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <woot-button
+      color-scheme="secondary"
+      icon="plus-sign"
+      class="rounded-xl"
+      @click="openContextMenu"
+    >
+      Add filter
+    </woot-button>
+    <woot-context-menu
+      v-if="showContextMenu"
+      ref="menu"
+      :x="contextMenu.x"
+      :y="contextMenu.y"
+      @close="closeContextMenu"
+    >
+      <SLA-context-menu />
+    </woot-context-menu>
+  </div>
+</template>
+
+<script>
+import SLAContextMenu from './SLAContextMenu.vue';
+export default {
+  name: 'SLAFilters',
+  components: {
+    SLAContextMenu,
+  },
+  props: {},
+  data() {
+    return {
+      showContextMenu: false,
+    };
+  },
+  computed: {},
+  methods: {
+    openContextMenu() {
+      this.showContextMenu = true;
+      this.contextMenu = {
+        x: null,
+        y: null,
+      };
+    },
+    closeContextMenu() {
+      this.showContextMenu = false;
+    },
+  },
+};
+</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 text-slate-700 dark:text-slate-200 font-medium"
+    >
+      {{ label }}
+      <fluent-icon
+        v-tooltip.right="toolTip"
+        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"
+      />
+    </span>
+    <div
+      v-if="isLoading"
+      class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 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,40 @@
+<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_BREACHES.LABEL')"
+      :value="noOfBreaches"
+      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.TOOLTIP')"
+      :is-loading="isLoading"
+    />
+  </div>
+</template>
+
+<script setup>
+import SLAMetricCard from './SLAMetricCard.vue';
+defineProps({
+  hitRate: {
+    type: String,
+    required: true,
+  },
+  noOfBreaches: {
+    type: Number,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

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

@@ -0,0 +1,66 @@
+<script setup>
+import { computed } from 'vue';
+import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
+const props = defineProps({
+  slaName: {
+    type: String,
+    required: true,
+  },
+  conversationId: {
+    type: Number,
+    required: true,
+  },
+  conversation: {
+    type: Object,
+    required: true,
+  },
+});
+
+const assignee = computed(() => props.conversation.assignee);
+</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 border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+  >
+    <div
+      class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+    >
+      {{ slaName }}
+    </div>
+    <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-100">
+        {{ `#${conversationId} ` }}
+      </span>
+      <span class="text-slate-600 dark:text-slate-100">with </span>
+      <span class="text-slate-700 dark:text-slate-100 capitalize truncate">{{
+        conversation.contact.name
+      }}</span>
+      <card-labels
+        class="w-[80%]"
+        :conversation-id="conversationId"
+        :conversation-labels="conversation.labels"
+      />
+    </div>
+    <div class="flex items-center gap-2 col-span-2">
+      <user-avatar-with-name v-if="assignee" :user="assignee" />
+      <span
+        v-else
+        class="text-slate-600 dark:text-slate-200 capitalize truncate"
+      >
+        ---
+      </span>
+    </div>
+
+    <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"
+    >
+      <woot-button color-scheme="secondary" variant="link">
+        View details
+      </woot-button>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <div
+      class="min-w-full border-t border-x rounded-xl border-slate-75 dark:border-slate-800/50"
+    >
+      <!-- Header -->
+      <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"
+      >
+        <div
+          class="flex items-center font-medium text-xs py-2 px-0 tracking-[10%] text-slate-700 dark:text-slate-100 text-left rtl:text-right uppercase col-span-2"
+        >
+          {{ $t('SLA_REPORTS.TABLE.HEADER.POLICY_BREACHED') }}
+        </div>
+        <div
+          class="flex items-center col-span-6 px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
+        >
+          {{ $t('SLA_REPORTS.TABLE.HEADER.CONVERSATION') }}
+        </div>
+        <div
+          class="flex items-center px-0 text-xs font-medium text-left uppercase col-span-2py-2 text-slate-700 dark:text-slate-100 rtl:text-right"
+        >
+          {{ $t('SLA_REPORTS.TABLE.HEADER.AGENT') }}
+        </div>
+        <div
+          class="col-span-2 px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
+        />
+      </div>
+      <div
+        v-show="!slaReports.length"
+        class="flex items-center justify-center h-32 bg-white dark:bg-slate-900"
+      >
+        {{ $t('SLA_REPORTS.NO_RECORDS') }}
+      </div>
+      <SLA-report-item
+        v-for="sla in slaReports"
+        :key="sla.id"
+        :sla-name="sla.sla_policy.name"
+        :conversation="sla.conversation"
+        :conversation-id="sla.conversation_id"
+      />
+    </div>
+    <table-footer
+      v-if="shouldShowFooter"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      class="dark:bg-slate-900 sticky bottom-0 border-none"
+      @page-change="onPageChange"
+    />
+  </div>
+</template>
+
+<script>
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
+import SLAReportItem from './SLAReportItem.vue';
+export default {
+  name: 'SLATable',
+  components: {
+    SLAReportItem,
+    TableFooter,
+  },
+  props: {
+    slaReports: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    pageSize: {
+      type: Number,
+      default: 25,
+    },
+  },
+  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/UserAvatar.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    :style="{ height: size, width: size }"
+    class="rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
+    :title="userName"
+  >
+    <slot>
+      <img
+        v-if="shouldShowImage"
+        :src="src"
+        draggable="false"
+        @load="onImgLoad"
+        @error="onImgError"
+      />
+      <div
+        v-else
+        :style="{ height: size, width: size }"
+        class="flex justify-center items-center rounded-full"
+        aria-hidden="true"
+      >
+        <span :style="{ fontSize: fontSize }" class="font-semibold">{{
+          userInitial
+        }}</span>
+      </div>
+    </slot>
+  </div>
+</template>
+<script>
+import { removeEmoji } from 'shared/helpers/emoji';
+
+export default {
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '24px',
+    },
+    userName: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      hasImageLoaded: false,
+      imgError: false,
+    };
+  },
+  computed: {
+    userNameWithoutEmoji() {
+      return removeEmoji(this.userName);
+    },
+    showStatusIndicator() {
+      if (this.shouldShowStatusAlways) return true;
+      return this.status === 'online' || this.status === 'busy';
+    },
+    avatarSize() {
+      return Number(this.size.replace(/\D+/g, ''));
+    },
+    shouldShowImage() {
+      if (!this.src) {
+        return false;
+      }
+      if (this.hasImageLoaded) {
+        return !this.imgError;
+      }
+      return false;
+    },
+    userInitial() {
+      return this.userName.charAt(0).toUpperCase();
+    },
+    fontSize() {
+      return `${Math.floor(this.avatarSize / 2.5)}px`;
+    },
+  },
+  watch: {
+    src(value, oldValue) {
+      if (value !== oldValue && this.imgError) {
+        this.imgError = false;
+      }
+    },
+  },
+  methods: {
+    onImgError() {
+      this.imgError = true;
+    },
+    onImgLoad() {
+      this.hasImageLoaded = true;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-white dark:bg-slate-700 justify-between hover:bg-woot-75 cursor-pointer dark:hover:bg-slate-800"
+    :class="!subMenuAvailable ? 'opacity-50 cursor-not-allowed' : ''"
+  >
+    <div class="flex items-center">
+      <p class="my-0 mx-2 text-xs">{{ option.label }}</p>
+    </div>
+    <div
+      v-if="subMenuAvailable"
+      class="submenu bg-white dark:bg-slate-700 p-1 shadow-lg rounded-md absolute left-full top-0 hidden min-h-min max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: () => {},
+    },
+    subMenuAvailable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.menu-with-submenu {
+  min-width: calc(6.25rem * 2);
+
+  &:hover {
+    .submenu {
+      @apply block;
+    }
+  }
+}
+</style>

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

@@ -1,99 +1,58 @@
 <template>
-  <div class="flex-1 overflow-auto p-4">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup"
-    >
-      {{ $t('SLA.HEADER_BTN_TXT') }}
-    </woot-button>
-    <div class="flex flex-row gap-4">
-      <div class="w-full xl:w-3/5">
-        <p
-          v-if="!uiFlags.isFetching && !records.length"
-          class="flex h-full items-center flex-col justify-center"
-        >
-          {{ $t('SLA.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('SLA.LOADING')"
+  <settings-layout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('SLA.LOADING')"
+  >
+    <template #header>
+      <SLA-header @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="flex flex-col w-full h-full gap-3">
+        <SLA-list-item
+          v-for="sla in records"
+          :key="sla.title"
+          :sla-name="sla.name"
+          :description="sla.description"
+          :first-response="displayTime(sla.first_response_time_threshold)"
+          :next-response="displayTime(sla.next_response_time_threshold)"
+          :resolution-time="displayTime(sla.resolution_time_threshold)"
+          :has-business-hours="sla.only_during_business_hours"
+          :is-loading="loading[sla.id]"
+          @click="openDeletePopup(sla)"
         />
-        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
-          <thead>
-            <th v-for="thHeader in $t('SLA.LIST.TABLE_HEADER')" :key="thHeader">
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <tr v-for="sla in records" :key="sla.title">
-              <td>
-                <span
-                  class="inline-block overflow-hidden whitespace-nowrap text-ellipsis"
-                >
-                  {{ sla.name }}
-                </span>
-              </td>
-              <td>{{ sla.description }}</td>
-              <td>
-                <span class="flex items-center">
-                  {{ displayTime(sla.first_response_time_threshold) }}
-                </span>
-              </td>
-              <td>
-                <span class="flex items-center">
-                  {{ displayTime(sla.next_response_time_threshold) }}
-                </span>
-              </td>
-              <td>
-                <span class="flex items-center">
-                  {{ displayTime(sla.resolution_time_threshold) }}
-                </span>
-              </td>
-              <td>
-                <span class="flex items-center">
-                  {{ sla.only_during_business_hours }}
-                </span>
-              </td>
-              <td class="button-wrapper">
-                <woot-button
-                  v-tooltip.top="$t('SLA.FORM.DELETE')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  :is-loading="loading[sla.id]"
-                  @click="openDeletePopup(sla)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
       </div>
 
-      <div class="w-1/3 hidden xl:block">
-        <span v-dompurify-html="$t('SLA.SIDEBAR_TXT')" />
-      </div>
-    </div>
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-SLA @close="hideAddPopup" />
-    </woot-modal>
+      <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+        <add-SLA @close="hideAddPopup" />
+      </woot-modal>
 
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('SLA.DELETE.CONFIRM.TITLE')"
-      :message="$t('SLA.DELETE.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="deleteConfirmText"
-      :reject-text="deleteRejectText"
-    />
-  </div>
+      <woot-delete-modal
+        :show.sync="showDeleteConfirmationPopup"
+        :on-close="closeDeletePopup"
+        :on-confirm="confirmDeletion"
+        :title="$t('SLA.DELETE.CONFIRM.TITLE')"
+        :message="$t('SLA.DELETE.CONFIRM.MESSAGE')"
+        :message-value="deleteMessage"
+        :confirm-text="deleteConfirmText"
+        :reject-text="deleteRejectText"
+      />
+    </template>
+  </settings-layout>
 </template>
 <script>
+import SettingsLayout from '../SettingsLayout.vue';
+import SLAHeader from './components/SLAHeader.vue';
+import SLAListItem from './components/SLAListItem.vue';
+import SLAListItemLoading from './components/SLAListItemLoading.vue';
 import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
 
@@ -103,6 +62,10 @@ import alertMixin from 'shared/mixins/alertMixin';
 export default {
   components: {
     AddSLA,
+    SLAHeader,
+    SLAListItem,
+    SLAListItemLoading,
+    SettingsLayout,
   },
   mixins: [alertMixin],
   data() {

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

@@ -0,0 +1,39 @@
+<script setup>
+defineProps({
+  hasBusinessHours: {
+    type: Boolean,
+    required: true,
+  },
+});
+</script>
+<template>
+  <div
+    class="inline-flex items-center min-w-0 gap-1 px-1.5 sm:px-2 py-1 border border-solid rounded-lg border-slate-75 dark:border-slate-700/50"
+  >
+    <fluent-icon
+      size="14"
+      :icon="hasBusinessHours ? 'alarm-on' : 'alarm-off'"
+      type="outline"
+      class="flex-shrink-0"
+      :class="
+        hasBusinessHours
+          ? 'text-slate-600 dark:text-slate-400'
+          : 'text-slate-300 dark:text-slate-700'
+      "
+    />
+    <span
+      class="hidden text-xs tracking-[0.2%] font-normal truncate sm:block"
+      :class="
+        hasBusinessHours
+          ? 'text-slate-600 dark:text-slate-400'
+          : 'text-slate-300 dark:text-slate-700'
+      "
+    >
+      {{
+        hasBusinessHours
+          ? $t('SLA.LIST.BUSINESS_HOURS_ON')
+          : $t('SLA.LIST.BUSINESS_HOURS_OFF')
+      }}
+    </span>
+  </div>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup>
+import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
+</script>
+<template>
+  <base-settings-header
+    :title="$t('SLA.HEADER')"
+    :description="$t('SLA.DESCRIPTION')"
+    :link-text="$t('SLA.LEARN_MORE')"
+    href="/"
+    icon-name="document-list-clock"
+  >
+    <template #actions>
+      <woot-button
+        color-scheme="primary"
+        icon="plus-sign"
+        class="rounded-xl"
+        @click="$emit('click')"
+      >
+        {{ $t('SLA.ADD_ACTION') }}
+      </woot-button>
+    </template>
+  </base-settings-header>
+</template>

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

@@ -0,0 +1,68 @@
+<script setup>
+import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
+import SLAResponseTime from './SLAResponseTime.vue';
+import SLABusinessHoursLabel from './SLABusinessHoursLabel.vue';
+
+defineProps({
+  slaName: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  firstResponse: {
+    type: String,
+    required: true,
+  },
+  nextResponse: {
+    type: String,
+    required: true,
+  },
+  resolutionTime: {
+    type: String,
+    required: true,
+  },
+  hasBusinessHours: {
+    type: Boolean,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<template>
+  <base-settings-list-item
+    class="sm:divide-x sm:divide-slate-75 sm:dark:divide-slate-700/50"
+    :title="slaName"
+    :description="description"
+  >
+    <template #label>
+      <SLA-business-hours-label :has-business-hours="hasBusinessHours" />
+    </template>
+    <template #rightSection>
+      <div
+        class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-slate-75 dark:divide-slate-700/50"
+      >
+        <SLA-response-time response-type="FRT" :response-time="firstResponse" />
+        <SLA-response-time response-type="NRT" :response-time="nextResponse" />
+        <SLA-response-time response-type="RT" :response-time="resolutionTime" />
+      </div>
+    </template>
+    <template #actions>
+      <woot-button
+        v-tooltip.top="$t('SLA.FORM.DELETE')"
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="delete"
+        class-names="grey-btn"
+        :is-loading="isLoading"
+        @click="$emit('click')"
+      />
+    </template>
+  </base-settings-list-item>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup>
+import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
+</script>
+<template>
+  <base-settings-list-item class="opacity-50">
+    <template #title>
+      <div class="w-24 h-[26px] rounded-md bg-slate-50 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" />
+    </template>
+    <template #label>
+      <div class="w-32 h-[26px] bg-slate-50 animate-pulse rounded-md" />
+    </template>
+    <template #rightSection>
+      <div
+        class="flex items-center sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between"
+      >
+        <div
+          v-for="ii in 3"
+          :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>
+      </div>
+    </template>
+  </base-settings-list-item>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup>
+defineProps({
+  responseType: {
+    type: String,
+    default: '',
+  },
+  responseTime: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex flex-row items-start w-full h-full gap-1 sm:items-end sm:px-6 sm:py-2 sm:gap-2 sm:flex-col"
+  >
+    <span
+      class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm ltr:pl-1.5 sm:ltr:pl-0 rtl:pr-1.5 sm:rtl:pr-0 text-slate-600 dark:text-slate-300"
+    >
+      <fluent-icon
+        v-tooltip.left="$t(`SLA.LIST.RESPONSE_TYPES.${responseType}`)"
+        size="14"
+        icon="information"
+        type="outline"
+        class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+      />
+      {{ $t(`SLA.LIST.RESPONSE_TYPES.SHORT_HAND.${responseType}`) }}
+      <span class="flex sm:hidden">:</span>
+    </span>
+    <span
+      class="text-sm sm:text-2xl font-medium tracking-[-1.5%] text-slate-900 dark:text-slate-25"
+    >
+      {{ responseTime }}
+    </span>
+  </div>
+</template>

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

@@ -1,18 +1,14 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const Index = () => import('./Index.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/sla'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'SLA.HEADER',
-        icon: 'document-list-clock',
-        showNewButton: true,
-      },
+      component: SettingsWrapper,
+      props: {},
       children: [
         {
           path: '',

app/javascript/dashboard/store/index.js

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

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

@@ -0,0 +1,99 @@
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
+import types from '../mutation-types';
+import SLAReportsAPI from '../../api/slaReports';
+
+export const state = {
+  records: [],
+  metrics: {
+    numberOfSLABreaches: 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) {
+      // Ignore 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 });
+    }
+  },
+};
+
+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_breaches: numberOfSLABreaches, hit_rate: hitRate }
+  ) {
+    _state.metrics = {
+      numberOfSLABreaches,
+      hitRate,
+    };
+  },
+  [types.SET_SLA_REPORTS_META](
+    _state,
+    { total_applied_slas: totalAppliedSLAs, current_page: currentPage }
+  ) {
+    _state.meta = {
+      count: totalAppliedSLAs,
+      currentPage,
+    };
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

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

@@ -309,4 +309,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

@@ -30,6 +30,7 @@ import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 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';
 
 Vue.config.env = process.env;
 
@@ -78,6 +79,7 @@ Vue.component('woot-switch', WootSwitch);
 Vue.component('woot-wizard', WootWizard);
 Vue.component('fluent-icon', FluentIcon);
 
+Vue.directive('resize', resizeDirective);
 const i18nConfig = new VueI18n({
   locale: 'en',
   messages: i18n,

app/javascript/shared/components/EmojiOrIcon.vue

@@ -4,6 +4,7 @@
     v-else-if="showIcon"
     :size="iconSize"
     :icon="icon"
+    class="flex-shrink-0"
     :class="className"
   />
 </template>

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

@@ -2,6 +2,8 @@
   "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-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",
   "archive-outline": "M19.25 3c.966 0 1.75.784 1.75 1.75v2c0 .698-.408 1.3-1 1.581v9.919A3.75 3.75 0 0 1 16.25 22h-8.5A3.75 3.75 0 0 1 4 18.25V8.332A1.75 1.75 0 0 1 3 6.75v-2C3 3.784 3.784 3 4.75 3h14.5Zm-.75 5.5h-13v9.75a2.25 2.25 0 0 0 2.25 2.25h8.5a2.25 2.25 0 0 0 2.25-2.25V8.5Zm-8.5 3h4a.75.75 0 0 1 .102 1.493L14 13h-4a.75.75 0 0 1-.102-1.493L10 11.5h4-4Zm9.25-7H4.75a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h14.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Z",
   "arrow-chevron-left-outline": "M15 17.898c0 1.074-1.265 1.648-2.073.941l-6.31-5.522a1.75 1.75 0 0 1 0-2.634l6.31-5.522c.808-.707 2.073-.133 2.073.941v11.796Z",
@@ -9,6 +11,7 @@
   "arrow-clockwise-outline": "M12 4.75a7.25 7.25 0 1 0 7.201 6.406c-.068-.588.358-1.156.95-1.156.515 0 .968.358 1.03.87a9.25 9.25 0 1 1-3.432-6.116V4.25a1 1 0 1 1 2.001 0v2.698l.034.052h-.034v.25a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h.666A7.219 7.219 0 0 0 12 4.75Z",
   "arrow-download-outline": "M18.25 20.5a.75.75 0 1 1 0 1.5l-13 .004a.75.75 0 1 1 0-1.5l13-.004ZM11.648 2.012l.102-.007a.75.75 0 0 1 .743.648l.007.102-.001 13.685 3.722-3.72a.75.75 0 0 1 .976-.073l.085.073a.75.75 0 0 1 .072.976l-.073.084-4.997 4.997a.75.75 0 0 1-.976.073l-.085-.073-5.003-4.996a.75.75 0 0 1 .976-1.134l.084.072 3.719 3.714L11 2.755a.75.75 0 0 1 .648-.743l.102-.007-.102.007Z",
   "arrow-expand-outline": "M7.669 14.923a1 1 0 0 1 1.414 1.414l-2.668 2.667H8a1 1 0 0 1 .993.884l.007.116a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 1 1 2 0v1.587l2.669-2.668Zm8.336 6.081a1 1 0 1 1 0-2h1.583l-2.665-2.667a1 1 0 0 1-.083-1.32l.083-.094a1 1 0 0 1 1.414 0l2.668 2.67v-1.589a1 1 0 0 1 .883-.993l.117-.007a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4ZM8 3a1 1 0 0 1 0 2H6.417l2.665 2.668a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.414 0L5 6.412V8a1 1 0 0 1-.883.993L4 9a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4Zm12.005 0a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V6.412l-2.668 2.67a1 1 0 0 1-1.32.083l-.094-.083a1 1 0 0 1 0-1.414L17.589 5h-1.584a1 1 0 0 1-.993-.883L15.005 4a1 1 0 0 1 1-1h4Z",
+  "arrow-outwards-outline": "m16 8.4l-8.875 8.9q-.3.3-.713.3t-.712-.3q-.3-.3-.3-.713t.3-.712L14.6 7H7q-.425 0-.713-.288T6 6q0-.425.288-.713T7 5h10q.425 0 .713.288T18 6v10q0 .425-.288.713T17 17q-.425 0-.713-.288T16 16V8.4Z",
   "arrow-redo-outline": "M19.25 2a.75.75 0 0 0-.743.648l-.007.102v5.69l-4.574-4.56a6.41 6.41 0 0 0-8.878-.179l-.186.18a6.41 6.41 0 0 0 0 9.063l8.845 8.84a.75.75 0 0 0 1.06-1.062l-8.845-8.838a4.91 4.91 0 0 1 6.766-7.112l.178.17L17.438 9.5H11.75a.75.75 0 0 0-.743.648L11 10.25c0 .38.282.694.648.743l.102.007h7.5a.75.75 0 0 0 .743-.648L20 10.25v-7.5a.75.75 0 0 0-.75-.75Z",
   "arrow-right-import-outline": "M21.25 4.5a.75.75 0 0 1 .743.648L22 5.25v13.004a.75.75 0 0 1-1.493.102l-.007-.102V5.25a.75.75 0 0 1 .75-.75Zm-8.603 1.804l.072-.084a.75.75 0 0 1 .977-.073l.084.073l4.997 4.997a.75.75 0 0 1 .073.976l-.073.085l-4.997 5.003a.75.75 0 0 1-1.133-.976l.072-.084l3.711-3.717H2.75a.75.75 0 0 1-.743-.647L2 11.755a.75.75 0 0 1 .648-.743l.102-.007l13.693-.001l-3.724-3.724a.75.75 0 0 1-.072-.976l.072-.084l-.072.084Z",
   "arrow-reply-outline": "M9.277 16.221a.75.75 0 0 1-1.061 1.06l-4.997-5.003a.75.75 0 0 1 0-1.06L8.217 6.22a.75.75 0 0 1 1.061 1.06L5.557 11h7.842c1.595 0 2.81.242 3.889.764l.246.126a6.203 6.203 0 0 1 2.576 2.576c.61 1.14.89 2.418.89 4.135a.75.75 0 0 1-1.5 0c0-1.484-.228-2.52-.713-3.428a4.702 4.702 0 0 0-1.96-1.96c-.838-.448-1.786-.676-3.094-.709L13.4 12.5H5.562l3.715 3.721Z",
@@ -118,6 +121,7 @@
   "headphones-sound-wave-outline": "M3.5 12a8.5 8.5 0 0 1 17 0v2h-2.25a.75.75 0 0 0-.75.75v6.5c0 .414.336.75.75.75H19a3 3 0 0 0 3-3v-7c0-5.523-4.477-10-10-10S2 6.477 2 12v7a3 3 0 0 0 3 3h.75a.75.75 0 0 0 .75-.75v-6.5a.75.75 0 0 0-.75-.75H3.5v-2Zm17 3.5V19a1.5 1.5 0 0 1-1.5 1.5v-5h1.5ZM3.5 19v-3.5H5v5A1.5 1.5 0 0 1 3.5 19Zm9.25-7.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Zm-4 2.25a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5a.75.75 0 0 1 .75-.75Zm7.25.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z",
   "image-outline": "M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z",
   "info-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5Zm-.004 7a.75.75 0 0 1 .744.648l.007.102.003 5.502a.75.75 0 0 1-1.493.102l-.007-.101-.003-5.502a.75.75 0 0 1 .75-.75ZM12 7.003a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997Z",
+  "information-outline": "M12 17q.425 0 .713-.288T13 16v-4q0-.425-.288-.713T12 11q-.425 0-.713.288T11 12v4q0 .425.288.713T12 17Zm0-8q.425 0 .713-.288T13 8q0-.425-.288-.713T12 7q-.425 0-.713.288T11 8q0 .425.288.713T12 9Zm0 13q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z",
   "key-outline": "M15 6a1 1 0 1 1-2 0a1 1 0 0 1 2 0Zm-2.5-4C9.424 2 7 4.424 7 7.5c0 .397.04.796.122 1.175c.058.27-.008.504-.142.638l-4.54 4.54A1.5 1.5 0 0 0 2 14.915V16.5A1.5 1.5 0 0 0 3.5 18h2A1.5 1.5 0 0 0 7 16.5V16h1a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-.18c.493.134 1.007.18 1.5.18c3.076 0 5.5-2.424 5.5-5.5S15.576 2 12.5 2ZM8 7.5C8 4.976 9.976 3 12.5 3S17 4.976 17 7.5S15.024 12 12.5 12c-.66 0-1.273-.095-1.776-.347A.5.5 0 0 0 10 12.1v.9H9a1 1 0 0 0-1 1v1H7a1 1 0 0 0-1 1v.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.586a.5.5 0 0 1 .146-.353l4.541-4.541c.432-.432.522-1.044.412-1.556A4.619 4.619 0 0 1 8 7.5Z",
   "keyboard-outline": "M19.745 5a2.25 2.25 0 0 1 2.25 2.25v9.505a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 16.755V7.25A2.25 2.25 0 0 1 4.25 5h15.495Zm0 1.5H4.25a.75.75 0 0 0-.75.75v9.505c0 .414.336.75.75.75h15.495a.75.75 0 0 0 .75-.75V7.25a.75.75 0 0 0-.75-.75Zm-12.995 8h10.5a.75.75 0 0 1 .102 1.493L17.25 16H6.75a.75.75 0 0 1-.102-1.493l.102-.007h10.5-10.5ZM16.5 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-5.995 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm6 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM6 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm2.995 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z",
   "library-outline": "M4 3h1c1.054 0 1.918.816 1.995 1.85L7 5v14a2.001 2.001 0 0 1-1.85 1.994L5 21H4a2.001 2.001 0 0 1-1.995-1.85L2 19V5c0-1.054.816-1.918 1.85-1.995L4 3h1-1Zm6 0h1c1.054 0 1.918.816 1.995 1.85L13 5v14a2.001 2.001 0 0 1-1.85 1.994L11 21h-1a2.001 2.001 0 0 1-1.995-1.85L8 19V5c0-1.054.816-1.918 1.85-1.995L10 3h1-1Zm6.974 2c.84 0 1.608.531 1.89 1.346l.047.157 3.015 11.745a2 2 0 0 1-1.296 2.392l-.144.043-.969.248a2.002 2.002 0 0 1-2.387-1.284l-.047-.155-3.016-11.745a2 2 0 0 1 1.298-2.392l.143-.043.968-.248c.166-.043.334-.064.498-.064ZM5 4.5H4a.501.501 0 0 0-.492.41L3.5 5v14c0 .244.177.45.41.492L4 19.5h1c.245 0 .45-.178.492-.41L5.5 19V5a.501.501 0 0 0-.41-.492L5 4.5Zm6 0h-1a.501.501 0 0 0-.492.41L9.5 5v14c0 .244.177.45.41.492l.09.008h1c.245 0 .45-.178.492-.41L11.5 19V5a.501.501 0 0 0-.41-.492L11 4.5Zm5.975 2-.063.004-.063.013-.968.247a.498.498 0 0 0-.376.51l.015.1 3.016 11.745a.5.5 0 0 0 .483.375l.063-.003.062-.012.97-.25a.5.5 0 0 0 .374-.519l-.015-.088-3.015-11.747a.501.501 0 0 0-.483-.375Z",
@@ -166,6 +170,7 @@
   "person-outline": "M17.754 14a2.249 2.249 0 0 1 2.25 2.249v.575c0 .894-.32 1.76-.902 2.438-1.57 1.834-3.957 2.739-7.102 2.739-3.146 0-5.532-.905-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.577a2.249 2.249 0 0 1 2.249-2.25h11.501Zm0 1.5H6.253a.749.749 0 0 0-.75.749v.577c0 .536.192 1.054.54 1.461 1.253 1.468 3.219 2.214 5.957 2.214s4.706-.746 5.962-2.214a2.25 2.25 0 0 0 .541-1.463v-.575a.749.749 0 0 0-.749-.75ZM12 2.004a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z",
   "person-filled": "M17.754 14a2.249 2.249 0 0 1 2.249 2.25v.918a2.75 2.75 0 0 1-.513 1.598c-1.545 2.164-4.07 3.235-7.49 3.235c-3.421 0-5.944-1.072-7.486-3.236a2.75 2.75 0 0 1-.51-1.596v-.92A2.249 2.249 0 0 1 6.251 14h11.502ZM12 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10Z",
   "play-circle-outline": "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12Zm8.856-3.845A1.25 1.25 0 0 0 9 9.248v5.504a1.25 1.25 0 0 0 1.856 1.093l5.757-3.189a.75.75 0 0 0 0-1.312l-5.757-3.189Z",
+  "plus-sign-outline": "M12 19q-.425 0-.713-.288T11 18v-5H6q-.425 0-.713-.288T5 12q0-.425.288-.713T6 11h5V6q0-.425.288-.713T12 5q.425 0 .713.288T13 6v5h5q.425 0 .713.288T19 12q0 .425-.288.713T18 13h-5v5q0 .425-.288.713T12 19Z",
   "power-outline": "M8.204 4.82a.75.75 0 0 1 .634 1.36A7.51 7.51 0 0 0 4.5 12.991c0 4.148 3.358 7.51 7.499 7.51s7.499-3.362 7.499-7.51a7.51 7.51 0 0 0-4.323-6.804.75.75 0 1 1 .637-1.358 9.01 9.01 0 0 1 5.186 8.162c0 4.976-4.029 9.01-9 9.01C7.029 22 3 17.966 3 12.99a9.01 9.01 0 0 1 5.204-8.17ZM12 2.496a.75.75 0 0 1 .743.648l.007.102v7.5a.75.75 0 0 1-1.493.102l-.007-.102v-7.5a.75.75 0 0 1 .75-.75Z",
   "quote-outline": "M7.5 6a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.555-1.24 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.64-1.737 2.66-3.674 3.077-5.859A2.5 2.5 0 1 1 7.5 6Zm9 0a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.56-1.238 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.643-1.738 2.662-3.672 3.078-5.859A2.5 2.5 0 1 1 16.5 6Zm-9 1.5a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Zm9 0a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Z",
   "repeat-outline": "m14.712 2.289l-.087-.078a1 1 0 0 0-1.327.078l-.078.087a.999.999 0 0 0 .078 1.326l1.299 1.297H8.999l-.24.004A6.997 6.997 0 0 0 2 11.993a6.94 6.94 0 0 0 1.189 3.899a.999.999 0 0 0 1.626-1.163l-.135-.218A4.997 4.997 0 0 1 9 6.998h5.595l-1.297 1.297l-.078.087a.999.999 0 0 0 1.492 1.326l3.006-3.003l.077-.087a.999.999 0 0 0-.078-1.326l-3.005-3.003Zm6.075 5.771A.999.999 0 0 0 19 8.677c0 .209.064.402.172.561a4.997 4.997 0 0 1-4.17 7.75H9.414l1.294-1.29l.083-.096a1 1 0 0 0-.006-1.23l-.077-.088l-.095-.084a1.001 1.001 0 0 0-1.232.006l-.088.078l-3.005 3.003l-.083.095a1 1 0 0 0 .006 1.231l.077.087l3.005 3.003l.095.084a1 1 0 0 0 1.397-1.41l-.077-.087l-1.304-1.303H15l.24-.003a6.997 6.997 0 0 0 5.546-10.927v.003Z",

app/listeners/notification_listener.rb

@@ -33,6 +33,11 @@ class NotificationListener < BaseListener
     return if event.data[:notifiable_assignee_change].blank?
     return if conversation.pending?
 
+    if assignee.nil?
+      Rail.logger.error "[NotificationListener] Assignee is nil, skipping notification creation for #{conversation.id}"
+      return
+    end
+
     NotificationBuilder.new(
       notification_type: 'conversation_assignment',
       user: assignee,

app/mailers/administrator_notifications/channel_notifications_mailer.rb

@@ -69,6 +69,18 @@ class AdministratorNotifications::ChannelNotificationsMailer < ApplicationMailer
     send_mail_with_liquid(to: email_to, subject: subject) and return
   end
 
+  def automation_rule_disabled(rule)
+    return unless smtp_config_set_or_development?
+
+    @action_url ||= "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{Current.account.id}/settings/automation/list"
+
+    subject = 'Automation rule disabled due to validation errors.'.freeze
+    @meta = {}
+    @meta['rule_name'] = rule.name
+
+    send_mail_with_liquid(to: admin_emails, subject: subject) and return
+  end
+
   private
 
   def admin_emails

app/models/automation_rule.rb

@@ -19,6 +19,7 @@
 #
 class AutomationRule < ApplicationRecord
   include Rails.application.routes.url_helpers
+  include Reauthorizable
 
   belongs_to :account
   has_many_attached :files
@@ -28,6 +29,8 @@ class AutomationRule < ApplicationRecord
   validate :query_operator_presence
   validates :account_id, presence: true
 
+  after_update_commit :reauthorized!, if: -> { saved_change_to_conditions? }
+
   scope :active, -> { where(active: true) }
 
   def conditions_attributes

app/models/concerns/reauthorizable.rb

@@ -50,6 +50,9 @@ module Reauthorizable
       mailer.whatsapp_disconnect(inbox).deliver_later
     when 'Channel::Email'
       mailer.email_disconnect(inbox).deliver_later
+    when 'AutomationRule'
+      update!(active: false)
+      mailer.automation_rule_disabled(self).deliver_later
     end
   end
 

app/models/contact.rb

@@ -169,7 +169,7 @@ class Contact < ApplicationRecord
   end
 
   def self.from_email(email)
-    find_by(email: email.downcase)
+    find_by(email: email&.downcase)
   end
 
   private

app/models/conversation.rb

@@ -6,7 +6,7 @@
 #  additional_attributes  :jsonb
 #  agent_last_seen_at     :datetime
 #  assignee_last_seen_at  :datetime
-#  cached_label_list      :string
+#  cached_label_list      :text
 #  contact_last_seen_at   :datetime
 #  custom_attributes      :jsonb
 #  first_reply_created_at :datetime

app/models/user.rb

@@ -157,7 +157,7 @@ class User < ApplicationRecord
   end
 
   def self.from_email(email)
-    find_by(email: email.downcase)
+    find_by(email: email&.downcase)
   end
 
   private

app/services/automation_rules/condition_validation_service.rb

@@ -5,8 +5,8 @@ class AutomationRules::ConditionValidationService
     @rule = rule
     @account = rule.account
 
-    file = File.read('./lib/filters/filter_keys.json')
-    @filters = JSON.parse(file)
+    file = File.read('./lib/filters/filter_keys.yml')
+    @filters = YAML.safe_load(file)
 
     @conversation_filters = @filters['conversations']
     @contact_filters = @filters['contacts']

app/services/automation_rules/conditions_filter_service.rb

@@ -11,8 +11,9 @@ class AutomationRules::ConditionsFilterService < FilterService
     @account = conversation.account
 
     # setup filters from json file
-    file = File.read('./lib/filters/filter_keys.json')
-    @filters = JSON.parse(file)
+    file = File.read('./lib/filters/filter_keys.yml')
+    @filters = YAML.safe_load(file)
+
     @conversation_filters = @filters['conversations']
     @contact_filters = @filters['contacts']
     @message_filters = @filters['messages']
@@ -44,8 +45,8 @@ class AutomationRules::ConditionsFilterService < FilterService
 
   def rule_valid?
     is_valid = AutomationRules::ConditionValidationService.new(@rule).perform
-
     Rails.logger.info "Automation rule condition validation failed for rule id: #{@rule.id}" unless is_valid
+    @rule.authorization_error! unless is_valid
 
     is_valid
   end

app/services/contacts/filter_service.rb

@@ -2,7 +2,7 @@ class Contacts::FilterService < FilterService
   ATTRIBUTE_MODEL = 'contact_attribute'.freeze
 
   def perform
-    @contacts = contact_query_builder
+    @contacts = query_builder(@filters['contacts'])
 
     {
       contacts: @contacts,
@@ -10,38 +10,6 @@ class Contacts::FilterService < FilterService
     }
   end
 
-  def contact_query_builder
-    contact_filters = @filters['contacts']
-
-    @params[:payload].each_with_index do |query_hash, current_index|
-      current_filter = contact_filters[query_hash['attribute_key']]
-      @query_string += contact_query_string(current_filter, query_hash, current_index)
-    end
-
-    base_relation.where(@query_string, @filter_values.with_indifferent_access)
-  end
-
-  def contact_query_string(current_filter, query_hash, current_index)
-    attribute_key = query_hash[:attribute_key]
-    query_operator = query_hash[:query_operator]
-    filter_operator_value = filter_operation(query_hash, current_index)
-
-    return custom_attribute_query(query_hash, 'contact_attribute', current_index) if current_filter.nil?
-
-    case current_filter['attribute_type']
-    when 'additional_attributes'
-      "  LOWER(contacts.additional_attributes ->> '#{attribute_key}') #{filter_operator_value} #{query_operator} "
-    when 'date_attributes'
-      " (contacts.#{attribute_key})::#{current_filter['data_type']} #{filter_operator_value}#{current_filter['data_type']} #{query_operator} "
-    when 'standard'
-      if attribute_key == 'labels'
-        " #{tag_filter_query('Contact', 'contacts', query_hash, current_index)} "
-      else
-        " LOWER(contacts.#{attribute_key}) #{filter_operator_value} #{query_operator} "
-      end
-    end
-  end
-
   def filter_values(query_hash)
     current_val = query_hash['values'][0]
     if query_hash['attribute_key'] == 'phone_number'
@@ -57,6 +25,13 @@ class Contacts::FilterService < FilterService
     Current.account.contacts
   end
 
+  def filter_config
+    {
+      entity: 'Contact',
+      table_name: 'contacts'
+    }
+  end
+
   private
 
   def equals_to_filter_string(filter_operator, current_index)

app/services/conversations/filter_service.rb

@@ -7,7 +7,7 @@ class Conversations::FilterService < FilterService
   end
 
   def perform
-    @conversations = conversation_query_builder
+    @conversations = query_builder(@filters['conversations'])
     mine_count, unassigned_count, all_count, = set_count_for_all_conversations
     assigned_count = all_count - unassigned_count
 
@@ -22,37 +22,6 @@ class Conversations::FilterService < FilterService
     }
   end
 
-  def conversation_query_builder
-    conversation_filters = @filters['conversations']
-    @params[:payload].each_with_index do |query_hash, current_index|
-      current_filter = conversation_filters[query_hash['attribute_key']]
-      @query_string += conversation_query_string(current_filter, query_hash, current_index)
-    end
-
-    base_relation.where(@query_string, @filter_values.with_indifferent_access)
-  end
-
-  def conversation_query_string(current_filter, query_hash, current_index)
-    attribute_key = query_hash[:attribute_key]
-    query_operator = query_hash[:query_operator]
-    filter_operator_value = filter_operation(query_hash, current_index)
-
-    return custom_attribute_query(query_hash, 'conversation_attribute', current_index) if current_filter.nil?
-
-    case current_filter['attribute_type']
-    when 'additional_attributes'
-      " conversations.additional_attributes ->> '#{attribute_key}' #{filter_operator_value} #{query_operator} "
-    when 'date_attributes'
-      " (conversations.#{attribute_key})::#{current_filter['data_type']} #{filter_operator_value}#{current_filter['data_type']} #{query_operator} "
-    when 'standard'
-      if attribute_key == 'labels'
-        " #{tag_filter_query('Conversation', 'conversations', query_hash, current_index)} "
-      else
-        " conversations.#{attribute_key} #{filter_operator_value} #{query_operator} "
-      end
-    end
-  end
-
   def base_relation
     @account.conversations.includes(
       :taggings, :inbox, { assignee: { avatar_attachment: [:blob] } }, { contact: { avatar_attachment: [:blob] } }, :team, :messages, :contact_inbox
@@ -63,6 +32,13 @@ class Conversations::FilterService < FilterService
     @params[:page] || 1
   end
 
+  def filter_config
+    {
+      entity: 'Conversation',
+      table_name: 'conversations'
+    }
+  end
+
   def conversations
     @conversations.sort_on_last_activity_at.page(current_page)
   end

app/services/filter_service.rb

@@ -1,6 +1,9 @@
 require 'json'
 
 class FilterService
+  include FilterHelper
+  include CustomExceptions::CustomFilter
+
   ATTRIBUTE_MODEL = 'conversation_attribute'.freeze
   ATTRIBUTE_TYPES = {
     date: 'date', text: 'text', number: 'numeric', link: 'text', list: 'text', checkbox: 'boolean'
@@ -9,8 +12,8 @@ class FilterService
   def initialize(params, user)
     @params = params
     @user = user
-    file = File.read('./lib/filters/filter_keys.json')
-    @filters = JSON.parse(file)
+    file = File.read('./lib/filters/filter_keys.yml')
+    @filters = YAML.safe_load(file)
     @query_string = ''
     @filter_values = {}
   end
@@ -106,7 +109,9 @@ class FilterService
     ]
   end
 
-  def tag_filter_query(model_name, table_name, query_hash, current_index)
+  def tag_filter_query(query_hash, current_index)
+    model_name = filter_config[:entity]
+    table_name = filter_config[:table_name]
     query_operator = query_hash[:query_operator]
     @filter_values["value_#{current_index}"] = filter_values(query_hash)
 
@@ -130,10 +135,8 @@ class FilterService
   def custom_attribute_query(query_hash, custom_attribute_type, current_index)
     @attribute_key = query_hash[:attribute_key]
     @custom_attribute_type = custom_attribute_type
-
     attribute_data_type
-
-    return ' ' if @custom_attribute.blank?
+    return '' if @custom_attribute.blank?
 
     build_custom_attr_query(query_hash, current_index)
   end
@@ -155,9 +158,9 @@ class FilterService
     table_name = attribute_model == 'conversation_attribute' ? 'conversations' : 'contacts'
 
     query = if attribute_data_type == 'text'
-              "  LOWER(#{table_name}.custom_attributes ->> '#{@attribute_key}')::#{attribute_data_type} #{filter_operator_value} #{query_operator} "
+              "LOWER(#{table_name}.custom_attributes ->> '#{@attribute_key}')::#{attribute_data_type} #{filter_operator_value} #{query_operator} "
             else
-              "  (#{table_name}.custom_attributes ->> '#{@attribute_key}')::#{attribute_data_type} #{filter_operator_value} #{query_operator} "
+              "(#{table_name}.custom_attributes ->> '#{@attribute_key}')::#{attribute_data_type} #{filter_operator_value} #{query_operator} "
             end
 
     query + not_in_custom_attr_query(table_name, query_hash, attribute_data_type)
@@ -194,4 +197,11 @@ class FilterService
 
     "NOT LIKE :value_#{current_index}"
   end
+
+  def query_builder(model_filters)
+    @params[:payload].each_with_index do |query_hash, current_index|
+      @query_string += " #{build_condition_query(model_filters, query_hash, current_index).strip}"
+    end
+    base_relation.where(@query_string, @filter_values.with_indifferent_access)
+  end
 end

app/views/layouts/vueapp.html.erb

@@ -44,6 +44,7 @@
         vapidPublicKey: new Uint8Array(<%= Base64.urlsafe_decode64(@global_config['VAPID_PUBLIC_KEY']).bytes %>),
         <% end %>
         enabledLanguages: <%= available_locales_with_name.to_json.html_safe %>,
+        helpUrls: <%= feature_help_urls.to_json.html_safe %>,
         selectedLocale: '<%= I18n.locale %>'
       }
       window.globalConfig = <%= raw @global_config.to_json %>

app/views/mailers/administrator_notifications/channel_notifications_mailer/automation_rule_disabled.liquid

@@ -0,0 +1,8 @@
+<p>Hello there,</p>
+
+<p>The automation rule <b>{{meta['rule_name']}}</b> has been disabled becuase it has invalid conditions.</p>
+<p>This typically happens when you delete any custom attributes which are still being used in automation rules.</p>
+
+<p>
+Click <a href="{{action_url}}">here</a> to update the conditions.
+</p>

app/views/public/api/v1/portals/_header.html.erb

@@ -83,7 +83,7 @@
               class="w-24 overflow-hidden text-sm font-medium leading-tight bg-white appearance-none cursor-pointer dark:bg-slate-900 text-ellipsis whitespace-nowrap focus:outline-none focus:shadow-outline locale-switcher"
             >
               <% @portal.config["allowed_locales"].each do |locale| %>
-                <option <%= locale == params[:locale] ? 'selected': '' %> value="<%= locale %>"><%= "#{language_name(locale)} (#{locale})" %></option>
+                <option <%= locale == @locale ? 'selected': '' %> value="<%= locale %>"><%= "#{language_name(locale)} (#{locale})" %></option>
               <% end %>
             </select>
             <%= render partial: 'icons/chevron-down' %>

config/features.yml

@@ -3,37 +3,45 @@
   enabled: true
 - name: channel_email
   enabled: true
+  help_url: https://chwt.app/hc/email
 - name: channel_facebook
   enabled: true
+  help_url: https://chwt.app/hc/fb
 - name: channel_twitter
   enabled: true
 - name: ip_lookup
   enabled: false
 - name: disable_branding
   enabled: false
-  premium:  true
+  premium: true
 - name: email_continuity_on_api_channel
   enabled: false
 - name: help_center
   enabled: true
+  help_url: https://chwt.app/hc/help-center
 - name: agent_bots
   enabled: false
+  help_url: https://chwt.app/hc/agent-bots
 - name: macros
   enabled: true
 - name: agent_management
   enabled: true
 - name: team_management
   enabled: true
+  help_url: https://chwt.app/hc/teams
 - name: inbox_management
   enabled: true
 - name: labels
   enabled: true
+  help_url: https://chwt.app/hc/labels
 - name: custom_attributes
   enabled: true
+  help_url: https://chwt.app/hc/custom-attributes
 - name: automations
   enabled: true
 - name: canned_responses
   enabled: true
+  help_url: https://chwt.app/hc/canned
 - name: integrations
   enabled: true
 - name: voice_recorder
@@ -44,8 +52,10 @@
   enabled: true
 - name: campaigns
   enabled: true
+  help_url: https://chwt.app/hc/campaigns
 - name: reports
   enabled: true
+  help_url: https://chwt.app/hc/reports
 - name: crm
   enabled: true
 - name: auto_resolve_conversations
@@ -62,6 +72,7 @@
   premium: true
 - name: message_reply_to
   enabled: false
+  help_url: https://chwt.app/hc/reply-to
 - name: insert_article_in_reply
   enabled: false
 - name: inbox_view

config/locales/en.yml

@@ -77,7 +77,9 @@ en:
         name: should not start or end with symbols, and it should not have < > / \ @ characters.
     custom_filters:
       number_of_records: Limit reached. The maximum number of allowed custom filters for a user per account is 50.
-
+      invalid_attribute: Invalid attribute key - [%{key}]. The key should be one of [%{allowed_keys}] or a custom attribute defined in the account.
+      invalid_operator: Invalid operator. The allowed operators for %{attribute_name} are [%{allowed_keys}].
+      invalid_value: Invalid value. The values provided for %{attribute_name} are invalid
   reports:
     period: Reporting period %{since} to %{until}
     utc_warning: The report generated is in UTC timezone
@@ -104,6 +106,15 @@ en:
       avg_resolution_time: Avg resolution time
     conversation_traffic_csv:
       timezone: Timezone
+    sla_csv:
+      conversation_id: Conversation ID
+      sla_policy_breached: SLA Policy
+      assignee: Assignee
+      team: Team
+      inbox: Inbox
+      labels: Labels
+      conversation_link: Link to the Conversation
+      breached_events: Breached Events
     default_group_by: day
     csat:
       headers:

config/routes.rb

@@ -144,6 +144,12 @@ Rails.application.routes.draw do
               get :download
             end
           end
+          resources :applied_slas, only: [:index] do
+            collection do
+              get :metrics
+              get :download
+            end
+          end
           resources :custom_attribute_definitions, only: [:index, :show, :create, :update, :destroy]
           resources :custom_filters, only: [:index, :show, :create, :update, :destroy]
           resources :inboxes, only: [:index, :show, :create, :update, :destroy] do

db/migrate/20240319062553_create_sla_events.rb

@@ -0,0 +1,16 @@
+class CreateSlaEvents < ActiveRecord::Migration[7.0]
+  def change
+    create_table :sla_events do |t|
+      t.references :applied_sla, null: false
+      t.references :conversation, null: false
+      t.references :account, null: false
+      t.references :sla_policy, null: false
+      t.references :inbox, null: false
+
+      t.integer :event_type
+      t.jsonb :meta, default: {}
+
+      t.timestamps
+    end
+  end
+end

db/migrate/20240322071629_convert_cached_label_list_to_text.rb

@@ -0,0 +1,32 @@
+class ConvertCachedLabelListToText < ActiveRecord::Migration[7.0]
+  def up
+    change_column :conversations, :cached_label_list, :text
+  end
+
+  def down
+    # This might cause data loss if the text is longer than 255 characters
+    # lets start by truncating the data to 255 characters
+    Conversation.where('LENGTH(cached_label_list) > 255').find_in_batches do |conversation_batch|
+      Conversation.transaction do
+        conversation_batch.each do |conversation|
+          conversation.update!(cached_label_list: truncate_list(conversation.cached_label_list))
+        end
+      end
+    end
+
+    change_column :conversations, :cached_label_list, :string
+  end
+
+  private
+
+  # Truncate the list to 255 characters or less
+  # by removing the last element until the length is less than 255
+  def truncate_list(label_list)
+    labels = label_list.split(',')
+
+    # we add the `labels.length - 1` to account for the commas
+    labels.pop while (labels.join(',').length + labels.length - 1) > 255
+
+    labels.join(',')
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2024_03_06_201954) do
+ActiveRecord::Schema[7.0].define(version: 2024_03_22_071629) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"
@@ -472,7 +472,7 @@ ActiveRecord::Schema[7.0].define(version: 2024_03_06_201954) do
     t.integer "priority"
     t.bigint "sla_policy_id"
     t.datetime "waiting_since"
-    t.string "cached_label_list"
+    t.text "cached_label_list"
     t.index ["account_id", "display_id"], name: "index_conversations_on_account_id_and_display_id", unique: true
     t.index ["account_id", "id"], name: "index_conversations_on_id_and_account_id"
     t.index ["account_id", "inbox_id", "status", "assignee_id"], name: "conv_acid_inbid_stat_asgnid_idx"
@@ -842,6 +842,23 @@ ActiveRecord::Schema[7.0].define(version: 2024_03_06_201954) do
     t.index ["user_id"], name: "index_reporting_events_on_user_id"
   end
 
+  create_table "sla_events", force: :cascade do |t|
+    t.bigint "applied_sla_id", null: false
+    t.bigint "conversation_id", null: false
+    t.bigint "account_id", null: false
+    t.bigint "sla_policy_id", null: false
+    t.bigint "inbox_id", null: false
+    t.integer "event_type"
+    t.jsonb "meta", default: {}
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["account_id"], name: "index_sla_events_on_account_id"
+    t.index ["applied_sla_id"], name: "index_sla_events_on_applied_sla_id"
+    t.index ["conversation_id"], name: "index_sla_events_on_conversation_id"
+    t.index ["inbox_id"], name: "index_sla_events_on_inbox_id"
+    t.index ["sla_policy_id"], name: "index_sla_events_on_sla_policy_id"
+  end
+
   create_table "sla_policies", force: :cascade do |t|
     t.string "name", null: false
     t.float "first_response_time_threshold"

enterprise/app/controllers/api/v1/accounts/applied_slas_controller.rb

@@ -0,0 +1,70 @@
+class Api::V1::Accounts::AppliedSlasController < Api::V1::Accounts::EnterpriseAccountsController
+  include Sift
+  include DateRangeHelper
+
+  RESULTS_PER_PAGE = 25
+
+  before_action :set_applied_slas, only: [:index, :metrics, :download]
+  before_action :set_current_page, only: [:index]
+  before_action :check_admin_authorization?
+
+  sort_on :created_at, type: :datetime
+
+  def index
+    @total_applied_slas = total_applied_slas
+    @applied_slas = @applied_slas.page(@current_page).per(RESULTS_PER_PAGE)
+  end
+
+  def metrics
+    @total_applied_slas = total_applied_slas
+    @number_of_sla_breaches = number_of_sla_breaches
+    @hit_rate = hit_rate
+  end
+
+  def download
+    @breached_slas = breached_slas
+
+    response.headers['Content-Type'] = 'text/csv'
+    response.headers['Content-Disposition'] = 'attachment; filename=breached_conversation.csv'
+    render layout: false, formats: [:csv]
+  end
+
+  private
+
+  def breached_slas
+    @applied_slas.includes(:sla_policy).joins(:conversation)
+                 .where.not(conversations: { status: :resolved })
+                 .where(applied_slas: { sla_status: :missed })
+  end
+
+  def total_applied_slas
+    @total_applied_slas ||= @applied_slas.count
+  end
+
+  def number_of_sla_breaches
+    @number_of_sla_breaches ||= @applied_slas.missed.count
+  end
+
+  def hit_rate
+    number_of_sla_breaches.zero? ? '100%' : "#{hit_rate_percentage}%"
+  end
+
+  def hit_rate_percentage
+    ((total_applied_slas - number_of_sla_breaches) / total_applied_slas.to_f * 100).round(2)
+  end
+
+  def set_applied_slas
+    initial_query = Current.account.applied_slas.includes(:conversation).includes(:sla_policy)
+    @applied_slas = initial_query
+                    .filter_by_date_range(range)
+                    .filter_by_inbox_id(params[:inbox_id])
+                    .filter_by_team_id(params[:team_id])
+                    .filter_by_sla_policy_id(params[:sla_policy_id])
+                    .filter_by_label_list(params[:label_list])
+                    .filter_by_assigned_agent_id(params[:assigned_agent_id])
+  end
+
+  def set_current_page
+    @current_page = params[:page] || 1
+  end
+end

enterprise/app/jobs/sla/process_account_applied_slas_job.rb

@@ -2,7 +2,7 @@ class Sla::ProcessAccountAppliedSlasJob < ApplicationJob
   queue_as :medium
 
   def perform(account)
-    account.applied_slas.where(sla_status: 'active').each do |applied_sla|
+    account.applied_slas.where(sla_status: %w[active active_with_misses]).each do |applied_sla|
       Sla::ProcessAppliedSlaJob.perform_later(applied_sla)
     end
   end

enterprise/app/models/applied_sla.rb

@@ -22,11 +22,24 @@ class AppliedSla < ApplicationRecord
   belongs_to :sla_policy
   belongs_to :conversation
 
+  has_many :sla_events, dependent: :destroy
+
   validates :account_id, uniqueness: { scope: %i[sla_policy_id conversation_id] }
   before_validation :ensure_account_id
 
-  enum sla_status: { active: 0, hit: 1, missed: 2 }
+  enum sla_status: { active: 0, hit: 1, missed: 2, active_with_misses: 3 }
 
+  scope :filter_by_date_range, ->(range) { where(created_at: range) if range.present? }
+  scope :filter_by_inbox_id, ->(inbox_id) { where(inbox_id: inbox_id) if inbox_id.present? }
+  scope :filter_by_team_id, ->(team_id) { where(team_id: team_id) if team_id.present? }
+  scope :filter_by_sla_policy_id, ->(sla_policy_id) { where(sla_policy_id: sla_policy_id) if sla_policy_id.present? }
+  scope :filter_by_label_list, ->(label_list) { joins(:conversation).where(conversations: { cached_label_list: label_list }) if label_list.present? }
+  scope :filter_by_assigned_agent_id, lambda { |assigned_agent_id|
+                                        if assigned_agent_id.present?
+                                          joins(:conversation).where(conversations: { assigned_agent_id: assigned_agent_id })
+                                        end
+                                      }
+  scope :missed, -> { where(sla_status: %i[missed active_with_misses]) }
   private
 
   def ensure_account_id

enterprise/app/models/sla_event.rb

@@ -0,0 +1,78 @@
+# == Schema Information
+#
+# Table name: sla_events
+#
+#  id              :bigint           not null, primary key
+#  event_type      :integer
+#  meta            :jsonb
+#  created_at      :datetime         not null
+#  updated_at      :datetime         not null
+#  account_id      :bigint           not null
+#  applied_sla_id  :bigint           not null
+#  conversation_id :bigint           not null
+#  inbox_id        :bigint           not null
+#  sla_policy_id   :bigint           not null
+#
+# Indexes
+#
+#  index_sla_events_on_account_id       (account_id)
+#  index_sla_events_on_applied_sla_id   (applied_sla_id)
+#  index_sla_events_on_conversation_id  (conversation_id)
+#  index_sla_events_on_inbox_id         (inbox_id)
+#  index_sla_events_on_sla_policy_id    (sla_policy_id)
+#
+class SlaEvent < ApplicationRecord
+  belongs_to :account
+  belongs_to :inbox
+  belongs_to :conversation
+  belongs_to :sla_policy
+  belongs_to :applied_sla
+
+  enum event_type: { frt: 0, nrt: 1, rt: 2 }
+
+  before_validation :ensure_applied_sla_id, :ensure_account_id, :ensure_inbox_id, :ensure_sla_policy_id
+
+  after_create_commit :create_notifications
+
+  private
+
+  def ensure_applied_sla_id
+    self.applied_sla_id ||= AppliedSla.find_by(conversation_id: conversation_id)&.last&.id
+  end
+
+  def ensure_account_id
+    self.account_id ||= conversation&.account_id
+  end
+
+  def ensure_inbox_id
+    self.inbox_id ||= conversation&.inbox_id
+  end
+
+  def ensure_sla_policy_id
+    self.sla_policy_id ||= applied_sla&.sla_policy_id
+  end
+
+  def create_notifications
+    notify_users = conversation.conversation_participants.map(&:user)
+    # Add all admins from the account to notify list
+    notify_users += account.administrators
+    # Ensure conversation assignee is notified
+    notify_users += [conversation.assignee] if conversation.assignee.present?
+
+    notification_type = {
+      'frt' => 'sla_missed_first_response',
+      'nrt' => 'sla_missed_next_response',
+      'rt' => 'sla_missed_resolution'
+    }[event_type]
+
+    notify_users.uniq.each do |user|
+      NotificationBuilder.new(
+        notification_type: notification_type,
+        user: user,
+        account: account,
+        primary_actor: conversation,
+        secondary_actor: sla_policy
+      ).perform
+    end
+  end
+end

enterprise/app/services/sla/evaluate_applied_sla_service.rb

@@ -7,8 +7,8 @@ class Sla::EvaluateAppliedSlaService
     # We will calculate again in the next iteration
     return unless applied_sla.conversation.resolved?
 
-    # No SLA missed, so marking as hit as conversation is resolved
-    handle_hit_sla(applied_sla) if applied_sla.active?
+    # after conversation is resolved, we will check if the SLA was hit or missed
+    handle_hit_sla(applied_sla)
   end
 
   private
@@ -49,6 +49,14 @@ class Sla::EvaluateAppliedSlaService
     handle_missed_sla(applied_sla, 'nrt')
   end
 
+  def get_last_message_id(conversation)
+    conversation.messages.where(message_type: :incoming).last&.id
+  end
+
+  def already_missed?(applied_sla, type, meta = {})
+    SlaEvent.exists?(applied_sla: applied_sla, event_type: type, meta: meta)
+  end
+
   def check_resolution_time_threshold(applied_sla, conversation, sla_policy)
     return if conversation.resolved?
 
@@ -58,48 +66,41 @@ class Sla::EvaluateAppliedSlaService
     handle_missed_sla(applied_sla, 'rt')
   end
 
-  def handle_missed_sla(applied_sla, type)
-    return unless applied_sla.active?
+  def handle_missed_sla(applied_sla, type, meta = {})
+    meta = { message_id: get_last_message_id(applied_sla.conversation) } if type == 'nrt'
+    return if already_missed?(applied_sla, type, meta)
 
-    applied_sla.update!(sla_status: 'missed')
-    generate_notifications_for_sla(applied_sla, type)
-    Rails.logger.warn "SLA missed for conversation #{applied_sla.conversation.id} " \
+    create_sla_event(applied_sla, type, meta)
+    Rails.logger.warn "SLA #{type} missed for conversation #{applied_sla.conversation.id} " \
                       "in account #{applied_sla.account_id} " \
                       "for sla_policy #{applied_sla.sla_policy.id}"
+
+    applied_sla.update!(sla_status: 'active_with_misses') if applied_sla.sla_status != 'active_with_misses'
   end
 
   def handle_hit_sla(applied_sla)
-    return unless applied_sla.active?
-
-    applied_sla.update!(sla_status: 'hit')
-    Rails.logger.info "SLA hit for conversation #{applied_sla.conversation.id} " \
-                      "in account #{applied_sla.account_id} " \
-                      "for sla_policy #{applied_sla.sla_policy.id}"
-  end
-
-  def generate_notifications_for_sla(applied_sla, type)
-    notify_users = applied_sla.conversation.conversation_participants.map(&:user)
-    # add all admins from the account to notify list
-    notify_users += applied_sla.account.administrators
-    # ensure conversation assignee is notified
-    notify_users += [applied_sla.conversation.assignee] if applied_sla.conversation.assignee.present?
-
-    notification_type = if type == 'frt'
-                          'sla_missed_first_response'
-                        elsif type == 'nrt'
-                          'sla_missed_next_response'
-                        else
-                          'sla_missed_resolution'
-                        end
-
-    notify_users.uniq.each do |user|
-      NotificationBuilder.new(
-        notification_type: notification_type,
-        user: user,
-        account: applied_sla.account,
-        primary_actor: applied_sla.conversation,
-        secondary_actor: applied_sla.sla_policy
-      ).perform
+    if applied_sla.active?
+      applied_sla.update!(sla_status: 'hit')
+      Rails.logger.info "SLA hit for conversation #{applied_sla.conversation.id} " \
+                        "in account #{applied_sla.account_id} " \
+                        "for sla_policy #{applied_sla.sla_policy.id}"
+    else
+      applied_sla.update!(sla_status: 'missed')
+      Rails.logger.info "SLA missed for conversation #{applied_sla.conversation.id} " \
+                        "in account #{applied_sla.account_id} " \
+                        "for sla_policy #{applied_sla.sla_policy.id}"
     end
   end
+
+  def create_sla_event(applied_sla, event_type, meta = {})
+    SlaEvent.create!(
+      applied_sla: applied_sla,
+      conversation: applied_sla.conversation,
+      event_type: event_type,
+      meta: meta,
+      account: applied_sla.account,
+      inbox: applied_sla.conversation.inbox,
+      sla_policy: applied_sla.sla_policy
+    )
+  end
 end

enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb

@@ -0,0 +1,26 @@
+<% headers = [
+  I18n.t('reports.sla_csv.conversation_id'),
+  I18n.t('reports.sla_csv.sla_policy_breached'),
+  I18n.t('reports.sla_csv.assignee'),
+  I18n.t('reports.sla_csv.team'),
+  I18n.t('reports.sla_csv.inbox'),
+  I18n.t('reports.sla_csv.labels'),
+  I18n.t('reports.sla_csv.conversation_link'),
+  I18n.t('reports.sla_csv.breached_events')
+] %>
+<%= CSV.generate_line headers %>
+
+<% @breached_slas.each do |sla| %>
+  <% breached_events = sla.sla_events.map(&:event_type).join(', ') %>
+  <% conversation = sla.conversation %>
+  <%= CSV.generate_line([
+    conversation.display_id,
+    sla.sla_policy.name,
+    conversation.assignee&.name,
+    conversation.team&.name,
+    conversation.inbox&.name,
+    conversation.cached_label_list,
+    app_account_conversation_url(account_id: conversation.account_id, id: conversation.display_id),
+    breached_events
+  ]) %>
+<% end %>

enterprise/app/views/api/v1/accounts/applied_slas/index.json.jbuilder

@@ -0,0 +1,28 @@
+json.payload do
+  json.array! @applied_slas do |applied_sla|
+    json.id applied_sla.id
+    json.sla_policy_id applied_sla.sla_policy_id
+    json.conversation_id applied_sla.conversation_id
+    json.sla_status applied_sla.sla_status
+    json.created_at applied_sla.created_at
+    json.updated_at applied_sla.updated_at
+    json.conversation do
+      json.contact do
+        json.name applied_sla.conversation.contact.name
+      end
+      json.labels applied_sla.conversation.cached_label_list
+      json.assignee applied_sla.conversation.assignee
+    end
+    json.sla_events applied_sla.sla_events do |sla_event|
+      json.partial! 'api/v1/models/sla_event', formats: [:json], sla_event: sla_event
+    end
+    json.sla_policy do
+      json.partial! 'api/v1/models/sla_policy', sla_policy: applied_sla.sla_policy
+    end
+  end
+end
+
+json.meta do
+  json.total_applied_slas @total_applied_slas
+  json.current_page @current_page
+end

enterprise/app/views/api/v1/accounts/applied_slas/metrics.json.jbuilder

@@ -0,0 +1,3 @@
+json.total_applied_slas @total_applied_slas
+json.number_of_sla_breaches @number_of_sla_breaches
+json.hit_rate @hit_rate

enterprise/app/views/api/v1/models/_sla_event.json.jbuilder

@@ -0,0 +1,5 @@
+json.id sla_event.id
+json.event_type sla_event.event_type
+json.meta sla_event.meta
+json.updated_at sla_event.updated_at.to_i
+json.created_at sla_event.created_at.to_i

lib/automation_rules/conditions.json

@@ -1,195 +0,0 @@
-{
-  "conversations": {
-    "status": {
-      "attribute_name": "Status",
-      "input_type": "multi_select",
-      "table_name": "conversations",
-      "filter_operators": [ "equal_to", "not_equal_to" ],
-      "attribute_type": "standard"
-    },
-    "assignee_id": {
-      "attribute_name": "Assignee Name",
-      "input_type": "search_box with name tags/plain text",
-       "table_name": "conversations",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "contact_id": {
-      "attribute_name": "Contact Name",
-      "input_type": "plain_text",
-       "table_name": "conversations",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "inbox_id": {
-      "attribute_name": "Inbox Name",
-      "input_type": "search_box",
-       "table_name": "conversations",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "team_id": {
-      "attribute_name": "Team Name",
-      "input_type": "search_box",
-      "table_name": "conversations",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "id": {
-      "attribute_name": "Conversation Identifier",
-      "input_type": "textbox",
-      "table_name": "conversations",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "campaign_id": {
-      "attribute_name": "Campaign Name",
-      "input_type": "textbox",
-      "data_type": "Number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "labels": {
-      "attribute_name": "Labels",
-      "input_type": "tags",
-      "data_type": "text",
-      "filter_operators": ["exactly_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "standard"
-    },
-    "browser_language": {
-      "attribute_name": "Browser Language",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "additional_attributes"
-    },
-    "conversation_language": {
-      "attribute_name": "Conversation Language",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to" ],
-      "attribute_type": "additional_attributes"
-    },
-    "mail_subject": {
-      "attribute_name": "Email Subject",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "additional_attributes"
-    },
-    "country_code": {
-      "attribute_name": "Country Name",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
-    },
-    "referer": {
-      "attribute_name": "Referer link",
-      "input_type": "textbox",
-      "data_type": "link",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
-    },
-    "plan": {
-      "attribute_name": "Plan",
-      "input_type": "multi_select",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
-    }
-  },
-  "contacts": {
-    "assignee_id": {
-      "attribute_name": "Assignee Name",
-      "input_type": "search_box with name tags/plain text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "phone_number": {
-      "attribute_name": "Phone Number",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "starts_with" ],
-      "attribute_type": "standard"
-    },
-    "contact_id": {
-      "attribute_name": "Contact Name",
-      "input_type": "plain_text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "inbox_id": {
-      "attribute_name": "Inbox Name",
-      "input_type": "search_box",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "team_id": {
-      "attribute_name": "Team Name",
-      "input_type": "search_box",
-      "data_type": "number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "id": {
-      "attribute_name": "Conversation Identifier",
-      "input_type": "textbox",
-      "data_type": "Number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "campaign_id": {
-      "attribute_name": "Campaign Name",
-      "input_type": "textbox",
-      "data_type": "Number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "labels": {
-      "attribute_name": "Labels",
-      "input_type": "tags",
-      "data_type": "text",
-      "filter_operators": ["exactly_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "standard"
-    },
-    "browser_language": {
-      "attribute_name": "Browser Language",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "additional_attributes"
-    },
-    "mail_subject": {
-      "attribute_name": "Email Subject",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "additional_attributes"
-    },
-    "email": {
-      "attribute_name": "Email",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "standard"
-    },
-    "country_code": {
-      "attribute_name": "Country Name",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
-    },
-    "referer": {
-      "attribute_name": "Referer link",
-      "input_type": "textbox",
-      "data_type": "link",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
-    }
-  }
-}

lib/custom_exceptions/custom_filter.rb

@@ -0,0 +1,19 @@
+module CustomExceptions::CustomFilter
+  class InvalidAttribute < CustomExceptions::Base
+    def message
+      I18n.t('errors.custom_filters.invalid_attribute', key: @data[:key], allowed_keys: @data[:allowed_keys].join(','))
+    end
+  end
+
+  class InvalidOperator < CustomExceptions::Base
+    def message
+      I18n.t('errors.custom_filters.invalid_operator', attribute_name: @data[:attribute_name], allowed_keys: @data[:allowed_keys].join(','))
+    end
+  end
+
+  class InvalidValue < CustomExceptions::Base
+    def message
+      I18n.t('errors.custom_filters.invalid_value', attribute_name: @data[:attribute_name])
+    end
+  end
+end

lib/filters/conversation_filters.json

@@ -1,92 +0,0 @@
-{
-  "conversations": [
-    {
-      "attribute_key": "status",
-      "attribute_name": "Status",
-      "input_type": "multi_select",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to" ],
-      "attribute_type": "standard"
-    },
-    {
-      "attribute_key": "assigne",
-      "attribute_name": "Assignee Name",
-      "input_type": "search_box with name tags/plain text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    {
-      "attribute_key": "contact",
-      "attribute_name": "Contact Name",
-      "input_type": "plain_text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    {
-      "attribute_key": "inbox",
-      "attribute_name": "Inbox Name",
-      "input_type": "search_box",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    {
-      "attribute_key": "team_id",
-      "attribute_name": "Team Name",
-      "input_type": "search_box",
-      "data_type": "number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    {
-      "attribute_key": "id",
-      "attribute_name": "Conversation Identifier",
-      "input_type": "textbox",
-      "data_type": "Number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    {
-      "attribute_key": "campaign_id",
-      "attribute_name": "Campaign Name",
-      "input_type": "textbox",
-      "data_type": "Number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    {
-      "attribute_key": "labels",
-      "attribute_name": "Labels",
-      "input_type": "tags",
-      "data_type": "text",
-      "filter_operators": ["exactly_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "standard"
-    },
-    {
-      "attribute_key": "browser_language",
-      "attribute_name": "Browser Language",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "additional_attributes"
-    },
-    {
-      "attribute_key": "country_code",
-      "attribute_name": "Country Name",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
-    },
-    {
-      "attribute_key": "referer",
-      "attribute_name": "Referer link",
-      "input_type": "textbox",
-      "data_type": "link",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
-    }
-  ]
-}

lib/filters/filter_keys.json

@@ -1,204 +0,0 @@
-{
-  "conversations": {
-    "status": {
-      "attribute_name": "Status",
-      "input_type": "multi_select",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to" ],
-      "attribute_type": "standard"
-    },
-    "assignee_id": {
-      "attribute_name": "Assignee Name",
-      "input_type": "search_box with name tags/plain text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "contact_id": {
-      "attribute_name": "Contact Name",
-      "input_type": "plain_text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "inbox_id": {
-      "attribute_name": "Inbox Name",
-      "input_type": "search_box",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "team_id": {
-      "attribute_name": "Team Name",
-      "input_type": "search_box",
-      "data_type": "number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "display_id": {
-      "attribute_name": "Conversation Identifier",
-      "input_type": "textbox",
-      "data_type": "Number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "campaign_id": {
-      "attribute_name": "Campaign Name",
-      "input_type": "textbox",
-      "data_type": "Number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "labels": {
-      "attribute_name": "Labels",
-      "input_type": "tags",
-      "data_type": "text",
-      "filter_operators": ["exactly_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "standard"
-    },
-    "browser_language": {
-      "attribute_name": "Browser Language",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "additional_attributes"
-    },
-    "conversation_language": {
-      "attribute_name": "Conversation Language",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to" ],
-      "attribute_type": "additional_attributes"
-    },
-    "country_code": {
-      "attribute_name": "Country Name",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
-    },
-    "referer": {
-      "attribute_name": "Referer link",
-      "input_type": "textbox",
-      "data_type": "link",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
-    },
-    "created_at": {
-      "attribute_name": "Created At",
-      "input_type": "date",
-      "data_type": "date",
-      "filter_operators": [ "is_greater_than", "is_less_than", "days_before" ],
-      "attribute_type": "date_attributes"
-    },
-    "last_activity_at": {
-      "attribute_name": "Created At",
-      "input_type": "date",
-      "data_type": "date",
-      "filter_operators": [ "is_greater_than", "is_less_than", "days_before" ],
-      "attribute_type": "date_attributes"
-    },
-    "mail_subject": {
-      "attribute_name": "Email Subject",
-      "input_type": "text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain"],
-      "attribute_type": "additional_attributes"
-    }
-  },
-  "contacts": {
-    "name": {
-      "attribute_name": "Name",
-      "input_type": "search_box with name tags/plain text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "standard"
-    },
-    "phone_number": {
-      "attribute_name": "Phone Number",
-      "input_type": "text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "starts_with"],
-      "attribute_type": "standard"
-    },
-    "email": {
-      "attribute_name": "Email",
-      "input_type":  "search_box with name tags/plain text",
-      "data_type": "text",
-      "filter_operators":  [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "standard"
-    },
-    "identifier": {
-      "attribute_name": "Contact Identifier",
-      "input_type": "search_box with name tags/plain text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to" ],
-      "attribute_type": "standard"
-    },
-    "country_code": {
-      "attribute_name": "Country",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to" ],
-      "attribute_type": "additional_attributes"
-    },
-    "city": {
-      "attribute_name": "City",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "additional_attributes"
-    },
-    "browser_language": {
-      "attribute_name": "Browser Language",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "additional_attributes"
-    },
-    "company": {
-      "attribute_name": "Company",
-      "input_type": "textbox",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "additional_attributes"
-    },
-    "labels": {
-      "attribute_name": "Labels",
-      "input_type": "tags",
-      "data_type": "text",
-      "filter_operators": ["exactly_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "standard"
-    },
-    "created_at": {
-      "attribute_name": "Created At",
-      "input_type": "date",
-      "data_type": "date",
-      "filter_operators": [ "is_greater_than", "is_less_than", "days_before" ],
-      "attribute_type": "date_attributes"
-    },
-    "last_activity_at": {
-      "attribute_name": "Created At",
-      "input_type": "date",
-      "data_type": "date",
-      "filter_operators": [ "is_greater_than", "is_less_than", "days_before" ],
-      "attribute_type": "date_attributes"
-    }
-  },
-  "messages": {
-    "message_type": {
-      "attribute_name": "Message Type",
-      "input_type": "search_box with name tags/plain text",
-      "data_type": "numeric",
-      "filter_operators": [ "equal_to", "not_equal_to" ],
-      "attribute_type": "standard"
-    },
-    "content": {
-      "attribute_name": "Message Content",
-      "input_type": "search_box with name tags/plain text",
-      "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "standard"
-    }
-  }
-}

lib/filters/filter_keys.yml

@@ -0,0 +1,226 @@
+## This file contains the filter configurations which we use for the following
+# 1. Conversation Filters (app/services/filter_service.rb)
+# 2. Contact Filters (app/services/filter_service.rb)
+# 3. Automation Filters  (app/services/automation_rules/conditions_filter_service.rb), (app/services/automation_rules/condition_validation_service.rb)
+
+
+# Format 
+# - Parent Key (conversation, contact, messages)
+#   - Key (attribute_name)
+#     - attribute_type: "standard" : supported ["standard", "additional_attributes (only for conversations and messages)"]
+#     - data_type: "text" :  supported ["text", "text_case_insensitive", "number", "boolean", "labels", "date", "link"]
+#     - filter_operators: ["equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present", "is_greater_than", "is_less_than", "days_before", "starts_with"]
+
+### ----- Conversation Filters ----- ###
+
+conversations:
+  status:
+    attribute_type: "standard"
+    data_type: "text"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+  assignee_id:
+    attribute_type: "standard"
+    data_type: "text"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "is_present"
+      - "is_not_present"
+  inbox_id:
+    attribute_type: "standard"
+    data_type: "text"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "is_present"
+      - "is_not_present"
+  team_id:
+    attribute_type: "standard"
+    data_type: "number"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "is_present"
+      - "is_not_present"
+  display_id:
+    attribute_type: "standard"
+    data_type: "Number"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "contains"
+      - "does_not_contain"
+  campaign_id:
+    attribute_type: "standard"
+    data_type: "Number"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "is_present"
+      - "is_not_present"
+  labels:
+    attribute_type: "standard"
+    data_type: "labels"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "is_present"
+      - "is_not_present"
+  browser_language:
+    attribute_type: "additional_attributes"
+    data_type: "text"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+  conversation_language:
+    attribute_type: "additional_attributes"
+    data_type: "text"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+  country_code:
+    attribute_type: "additional_attributes"
+    data_type: "text"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+  referer:
+    attribute_type: "additional_attributes"
+    data_type: "link"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "contains"
+      - "does_not_contain"
+  created_at:
+    attribute_type: "standard"
+    data_type: "date"
+    filter_operators:
+      - "is_greater_than"
+      - "is_less_than"
+      - "days_before"
+  last_activity_at:
+    attribute_type: "standard"
+    data_type: "date"
+    filter_operators:
+      - "is_greater_than"
+      - "is_less_than"
+      - "days_before"
+  mail_subject:
+    attribute_type: "additional_attributes"
+    data_type: "text"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "contains"
+      - "does_not_contain"
+
+### ----- End of Conversation Filters ----- ###
+
+
+### ----- Contact Filters ----- ###
+contacts:
+  name:
+    attribute_type: "standard"
+    data_type: "text_case_insensitive"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "contains"
+      - "does_not_contain"
+  phone_number:
+    attribute_type: "standard"
+    data_type: "text_case_insensitive"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "contains"
+      - "does_not_contain"
+      - "starts_with"
+  email:
+    attribute_type: "standard"
+    data_type: "text_case_insensitive"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "contains"
+      - "does_not_contain"
+  identifier:
+    attribute_type: "standard"
+    data_type: "text_case_insensitive"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+  country_code:
+    attribute_type: "additional_attributes"
+    data_type: "text_case_insensitive"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+  city:
+    attribute_type: "additional_attributes"
+    data_type: "text_case_insensitive"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "contains"
+      - "does_not_contain"
+  company:
+    attribute_type: "additional_attributes"
+    data_type: "text_case_insensitive"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "contains"
+      - "does_not_contain"
+  labels:
+    attribute_type: "standard"
+    data_type: "labels"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "is_present"
+      - "is_not_present"
+  created_at:
+    attribute_type: "standard"
+    data_type: "date"
+    filter_operators:
+      - "is_greater_than"
+      - "is_less_than"
+      - "days_before"
+  last_activity_at:
+    attribute_type: "standard"
+    data_type: "date"
+    filter_operators:
+      - "is_greater_than"
+      - "is_less_than"
+      - "days_before"
+  blocked:
+    attribute_type: "standard"
+    data_type: "boolean"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+
+### ----- End of Contact Filters ----- ###
+
+### ----- Message Filters ----- ###
+messages:
+  message_type:
+    attribute_type: "standard"
+    data_type: "numeric"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+  content:
+    attribute_type: "standard"
+    data_type: "text"
+    filter_operators:
+      - "equal_to"
+      - "not_equal_to"
+      - "contains"
+      - "does_not_contain"
+
+### ----- End of Message Filters ----- ###

package.json

@@ -63,7 +63,7 @@
     "libphonenumber-js": "^1.10.24",
     "logrocket": "^3.0.1",
     "logrocket-vuex": "^0.0.3",
-    "markdown-it": "^13.0.1",
+    "markdown-it": "^13.0.2",
     "markdown-it-link-attributes": "^4.0.1",
     "md5": "^2.3.0",
     "ninja-keys": "^1.2.2",

spec/builders/agent_builder_spec.rb

@@ -67,21 +67,5 @@ RSpec.describe AgentBuilder, type: :model do
         expect(user.encrypted_password).not_to be_empty
       end
     end
-
-    context 'with confirmation required' do
-      let(:unconfirmed_user) { create(:user, email: email) }
-
-      before do
-        unconfirmed_user.confirmed_at = nil
-        unconfirmed_user.save(validate: false)
-        allow(unconfirmed_user).to receive(:confirmed?).and_return(false)
-      end
-
-      it 'sends confirmation instructions' do
-        user = agent_builder.perform
-        expect(user).to receive(:send_confirmation_instructions)
-        agent_builder.send(:send_confirmation_if_required)
-      end
-    end
   end
 end

spec/controllers/api/v1/accounts/contacts_controller_spec.rb

@@ -338,14 +338,18 @@ RSpec.describe 'Contacts API', type: :request do
 
     context 'when it is an authenticated user' do
       let(:admin) { create(:user, account: account, role: :administrator) }
-      let!(:contact1) { create(:contact, :with_email, account: account) }
-      let!(:contact2) { create(:contact, :with_email, name: 'testcontact', account: account, email: 'test@test.com') }
+      let!(:contact1) { create(:contact, :with_email, account: account, additional_attributes: { country_code: 'US' }) }
+      let!(:contact2) do
+        create(:contact, :with_email, name: 'testcontact', account: account, email: 'test@test.com', additional_attributes: { country_code: 'US' })
+      end
 
       it 'returns all contacts when query is empty' do
         post "/api/v1/accounts/#{account.id}/contacts/filter",
-             params: {
-               payload: []
-             },
+             params: { payload: [
+               attribute_key: 'country_code',
+               filter_operator: 'equal_to',
+               values: ['US']
+             ] },
              headers: admin.create_new_auth_token,
              as: :json
 
@@ -353,6 +357,34 @@ RSpec.describe 'Contacts API', type: :request do
         expect(response.body).to include(contact2.email)
         expect(response.body).to include(contact1.email)
       end
+
+      it 'returns error the query operator is invalid' do
+        post "/api/v1/accounts/#{account.id}/contacts/filter",
+             params: { payload: [
+               attribute_key: 'country_code',
+               filter_operator: 'eq',
+               values: ['US']
+             ] },
+             headers: admin.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.body).to include('Invalid operator. The allowed operators for country_code are [equal_to,not_equal_to]')
+      end
+
+      it 'returns error the query value is invalid' do
+        post "/api/v1/accounts/#{account.id}/contacts/filter",
+             params: { payload: [
+               attribute_key: 'country_code',
+               filter_operator: 'equal_to',
+               values: []
+             ] },
+             headers: admin.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.body).to include('Invalid value. The values provided for country_code are invalid"')
+      end
     end
   end
 

spec/controllers/api/v1/accounts/conversations_controller_spec.rb

@@ -152,17 +152,56 @@ RSpec.describe 'Conversations API', type: :request do
         create(:inbox_member, user: agent, inbox: conversation.inbox)
       end
 
-      it 'returns all conversations with empty query' do
+      it 'returns all conversations matching the query' do
         post "/api/v1/accounts/#{account.id}/conversations/filter",
              headers: agent.create_new_auth_token,
-             params: { payload: [] },
+             params: {
+               payload: [{
+                 attribute_key: 'status',
+                 filter_operator: 'equal_to',
+                 values: ['open']
+               }]
+             },
              as: :json
 
         expect(response).to have_http_status(:success)
         response_data = JSON.parse(response.body, symbolize_names: true)
-
         expect(response_data.count).to eq(2)
       end
+
+      it 'returns error if the filters contain invalid attributes' do
+        post "/api/v1/accounts/#{account.id}/conversations/filter",
+             headers: agent.create_new_auth_token,
+             params: {
+               payload: [{
+                 attribute_key: 'phone_number',
+                 filter_operator: 'equal_to',
+                 values: ['open']
+               }]
+             },
+             as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        response_data = JSON.parse(response.body, symbolize_names: true)
+        expect(response_data[:error]).to include('Invalid attribute key - [phone_number]')
+      end
+
+      it 'returns error if the filters contain invalid operator' do
+        post "/api/v1/accounts/#{account.id}/conversations/filter",
+             headers: agent.create_new_auth_token,
+             params: {
+               payload: [{
+                 attribute_key: 'status',
+                 filter_operator: 'eq',
+                 values: ['open']
+               }]
+             },
+             as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        response_data = JSON.parse(response.body, symbolize_names: true)
+        expect(response_data[:error]).to eq('Invalid operator. The allowed operators for status are [equal_to,not_equal_to].')
+      end
     end
   end
 

spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb

@@ -0,0 +1,218 @@
+require 'rails_helper'
+
+RSpec.describe 'Applied SLAs API', type: :request do
+  let(:account) { create(:account) }
+  let(:administrator) { create(:user, account: account, role: :administrator) }
+  let(:agent1) { create(:user, account: account, role: :agent) }
+  let(:agent2) { create(:user, account: account, role: :agent) }
+  let(:conversation1) { create(:conversation, account: account, assignee: agent1) }
+  let(:conversation2) { create(:conversation, account: account, assignee: agent2) }
+  let(:conversation3) { create(:conversation, account: account, assignee: agent2) }
+  let(:sla_policy1) { create(:sla_policy, account: account) }
+  let(:sla_policy2) { create(:sla_policy, account: account) }
+
+  before do
+    AppliedSla.destroy_all
+  end
+
+  describe 'GET /api/v1/accounts/{account.id}/applied_slas/metrics' do
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        get "/api/v1/accounts/#{account.id}/applied_slas/metrics"
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      it 'returns the sla metrics' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, sla_status: 'missed')
+
+        get "/api/v1/accounts/#{account.id}/applied_slas/metrics",
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body).to include('total_applied_slas' => 1)
+        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('hit_rate' => '0.0%')
+      end
+
+      it 'filters sla metrics based on a date range' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
+
+        get "/api/v1/accounts/#{account.id}/applied_slas/metrics",
+            params: { since: 5.days.ago.to_time.to_i.to_s, until: Time.zone.today.to_time.to_i.to_s },
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body).to include('total_applied_slas' => 1)
+        expect(body).to include('number_of_sla_breaches' => 0)
+        expect(body).to include('hit_rate' => '100%')
+      end
+
+      it 'filters sla metrics based on a date range and agent ids' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago, sla_status: 'missed')
+
+        get "/api/v1/accounts/#{account.id}/applied_slas/metrics",
+            params: { agent_ids: [agent2.id] },
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body).to include('total_applied_slas' => 3)
+        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('hit_rate' => '66.67%')
+      end
+
+      it 'filters sla metrics based on sla policy ids' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy2, conversation: conversation2, sla_status: 'missed')
+
+        get "/api/v1/accounts/#{account.id}/applied_slas/metrics",
+            params: { sla_policy_id: sla_policy1.id },
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body).to include('total_applied_slas' => 2)
+        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('hit_rate' => '50.0%')
+      end
+
+      it 'filters sla metrics based on labels' do
+        conversation2.update_labels('label1')
+        conversation3.update_labels('label1')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago)
+
+        get "/api/v1/accounts/#{account.id}/applied_slas/metrics",
+            params: { label_list: ['label1'] },
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body).to include('total_applied_slas' => 2)
+        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('hit_rate' => '50.0%')
+      end
+    end
+  end
+
+  describe 'GET /api/v1/accounts/{account.id}/applied_slas/download' do
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        get "/api/v1/accounts/#{account.id}/applied_slas/download"
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      it 'returns a CSV file with breached conversations' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, sla_status: 'missed')
+        conversation1.update(status: 'open')
+        conversation2.update(status: 'resolved')
+
+        get "/api/v1/accounts/#{account.id}/applied_slas/download",
+            headers: administrator.create_new_auth_token
+
+        expect(response).to have_http_status(:success)
+        expect(response.headers['Content-Type']).to eq('text/csv')
+        expect(response.headers['Content-Disposition']).to include('attachment; filename=breached_conversation.csv')
+
+        csv_data = CSV.parse(response.body)
+        csv_data.reject! { |row| row.all?(&:nil?) }
+        expect(csv_data.size).to eq(2)
+        expect(csv_data[1][0].to_i).to eq(conversation1.display_id)
+      end
+    end
+  end
+
+  describe 'GET /api/v1/accounts/{account.id}/applied_slas' do
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        get "/api/v1/accounts/#{account.id}/applied_slas"
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      it 'returns the applied slas' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2)
+        get "/api/v1/accounts/#{account.id}/applied_slas",
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body.size).to eq(2)
+        expect(body.first).to include('id')
+        expect(body.first).to include('sla_policy_id' => sla_policy1.id)
+        expect(body.first).to include('conversation_id' => conversation1.id)
+      end
+
+      it 'filters applied slas based on a date range' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
+
+        get "/api/v1/accounts/#{account.id}/applied_slas",
+            params: { since: 5.days.ago.to_time.to_i.to_s, until: Time.zone.today.to_time.to_i.to_s },
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body.size).to eq(1)
+      end
+
+      it 'filters applied slas based on a date range and agent ids' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
+
+        get "/api/v1/accounts/#{account.id}/applied_slas",
+            params: { agent_ids: [agent2.id] },
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body.size).to eq(3)
+      end
+
+      it 'filters applied slas based on sla policy ids' do
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2)
+        create(:applied_sla, sla_policy: sla_policy2, conversation: conversation2)
+
+        get "/api/v1/accounts/#{account.id}/applied_slas",
+            params: { sla_policy_id: sla_policy1.id },
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body.size).to eq(2)
+      end
+
+      it 'filters applied slas based on labels' do
+        conversation2.update_labels('label1')
+        conversation3.update_labels('label1')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago)
+
+        get "/api/v1/accounts/#{account.id}/applied_slas",
+            params: { label_list: ['label1'] },
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body.size).to eq(2)
+      end
+    end
+  end
+end

spec/enterprise/jobs/sla/process_account_applied_slas_job_spec.rb

@@ -7,18 +7,20 @@ RSpec.describe Sla::ProcessAccountAppliedSlasJob do
     let!(:applied_sla) { create(:applied_sla, account: account, sla_policy: sla_policy, sla_status: 'active') }
     let!(:hit_applied_sla) { create(:applied_sla, account: account, sla_policy: sla_policy, sla_status: 'hit') }
     let!(:miss_applied_sla) { create(:applied_sla, account: account, sla_policy: sla_policy, sla_status: 'missed') }
+    let!(:active_with_misses_applied_sla) { create(:applied_sla, account: account, sla_policy: sla_policy, sla_status: 'active_with_misses') }
 
     it 'enqueues the job' do
       expect { described_class.perform_later }.to have_enqueued_job(described_class)
         .on_queue('medium')
     end
 
-    it 'calls the ProcessAppliedSlaJob' do
+    it 'calls the ProcessAppliedSlaJob for both active and active_with_misses' do
+      expect(Sla::ProcessAppliedSlaJob).to receive(:perform_later).with(active_with_misses_applied_sla).and_call_original
       expect(Sla::ProcessAppliedSlaJob).to receive(:perform_later).with(applied_sla).and_call_original
       described_class.perform_now(account)
     end
 
-    it 'does not call the ProcessAppliedSlaJob for not active applied slas' do
+    it 'does not call the ProcessAppliedSlaJob for applied slas that are hit or miss' do
       expect(Sla::ProcessAppliedSlaJob).not_to receive(:perform_later).with(hit_applied_sla)
       expect(Sla::ProcessAppliedSlaJob).not_to receive(:perform_later).with(miss_applied_sla)
       described_class.perform_now(account)

spec/enterprise/models/sla_event_spec.rb

@@ -0,0 +1,61 @@
+require 'rails_helper'
+
+RSpec.describe SlaEvent, type: :model do
+  describe 'associations' do
+    it { is_expected.to belong_to(:applied_sla) }
+    it { is_expected.to belong_to(:conversation) }
+    it { is_expected.to belong_to(:account) }
+    it { is_expected.to belong_to(:sla_policy) }
+    it { is_expected.to belong_to(:inbox) }
+  end
+
+  describe 'validates_factory' do
+    it 'creates valid sla event object' do
+      sla_event = create(:sla_event)
+      expect(sla_event.event_type).to eq 'frt'
+    end
+  end
+
+  describe 'backfilling ids' do
+    it 'automatically backfills account_id, inbox_id, and sla_id upon creation' do
+      sla_event = create(:sla_event)
+
+      expect(sla_event.account_id).to eq sla_event.conversation.account_id
+      expect(sla_event.inbox_id).to eq sla_event.conversation.inbox_id
+      expect(sla_event.sla_policy_id).to eq sla_event.applied_sla.sla_policy_id
+    end
+  end
+
+  describe 'create notifications' do
+    # create account, user and inbox
+    let!(:account) { create(:account) }
+    let!(:assignee) { create(:user, account: account) }
+    let!(:participant) { create(:user, account: account) }
+    let!(:admin) { create(:user, account: account, role: :administrator) }
+    let!(:inbox) { create(:inbox, account: account) }
+    let(:conversation) { create(:conversation, inbox: inbox, assignee: assignee, account: account) }
+    let(:sla_policy) { create(:sla_policy, account: conversation.account) }
+    let(:sla_event) { create(:sla_event, event_type: 'frt', conversation: conversation, sla_policy: sla_policy) }
+
+    before do
+      # to ensure notifications are not sent to other users
+      create(:user, account: account)
+      create(:inbox_member, inbox: inbox, user: participant)
+      create(:conversation_participant, conversation: conversation, user: participant)
+    end
+
+    it 'creates notifications for conversation participants, admins, and assignee' do
+      sla_event
+
+      expect(Notification.count).to eq(3)
+      # check if notification type is sla_missed_first_response
+      expect(Notification.where(notification_type: 'sla_missed_first_response').count).to eq(3)
+      # Check if notification is created for the assignee
+      expect(Notification.where(user_id: assignee.id).count).to eq(1)
+      # Check if notification is created for the account admin
+      expect(Notification.where(user_id: admin.id).count).to eq(1)
+      # Check if notification is created for participant
+      expect(Notification.where(user_id: participant.id).count).to eq(1)
+    end
+  end
+end

spec/enterprise/services/sla/evaluate_applied_sla_service_spec.rb

@@ -3,8 +3,6 @@ require 'rails_helper'
 RSpec.describe Sla::EvaluateAppliedSlaService do
   let!(:account) { create(:account) }
   let!(:user_1) { create(:user, account: account) }
-  let!(:user_2) { create(:user, account: account) }
-  let!(:admin) { create(:user, account: account, role: :administrator) }
 
   let!(:sla_policy) do
     create(:sla_policy,
@@ -28,19 +26,17 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
       it 'updates the SLA status to missed and logs a warning' do
         allow(Rails.logger).to receive(:warn)
         described_class.new(applied_sla: applied_sla).perform
-        expect(Rails.logger).to have_received(:warn).with("SLA missed for conversation #{conversation.id} in account " \
+        expect(Rails.logger).to have_received(:warn).with("SLA frt missed for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}")
-        expect(applied_sla.reload.sla_status).to eq('missed')
+        expect(applied_sla.reload.sla_status).to eq('active_with_misses')
+      end
 
-        expect(Notification.count).to eq(2)
-        # check if notification type is sla_missed_first_response
-        expect(Notification.where(notification_type: 'sla_missed_first_response').count).to eq(2)
-        # Check if notification is created for the assignee
-        expect(Notification.where(user_id: user_1.id).count).to eq(1)
-        # Check if notification is created for the account admin
-        expect(Notification.where(user_id: admin.id).count).to eq(1)
-        # Check if no notification is created for other user
-        expect(Notification.where(user_id: user_2.id).count).to eq(0)
+      it 'creates SlaEvent only for frt miss' do
+        described_class.new(applied_sla: applied_sla).perform
+
+        expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'frt').count).to eq(1)
+        expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'nrt').count).to eq(0)
+        expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'rt').count).to eq(0)
       end
     end
 
@@ -53,19 +49,17 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
       it 'updates the SLA status to missed and logs a warning' do
         allow(Rails.logger).to receive(:warn)
         described_class.new(applied_sla: applied_sla).perform
-        expect(Rails.logger).to have_received(:warn).with("SLA missed for conversation #{conversation.id} in account " \
+        expect(Rails.logger).to have_received(:warn).with("SLA nrt missed for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}")
-        expect(applied_sla.reload.sla_status).to eq('missed')
+        expect(applied_sla.reload.sla_status).to eq('active_with_misses')
+      end
 
-        expect(Notification.count).to eq(2)
-        # check if notification type is sla_missed_first_response
-        expect(Notification.where(notification_type: 'sla_missed_next_response').count).to eq(2)
-        # Check if notification is created for the assignee
-        expect(Notification.where(user_id: user_1.id).count).to eq(1)
-        # Check if notification is created for the account admin
-        expect(Notification.where(user_id: admin.id).count).to eq(1)
-        # Check if no notification is created for other user
-        expect(Notification.where(user_id: user_2.id).count).to eq(0)
+      it 'creates SlaEvent only for nrt miss' do
+        described_class.new(applied_sla: applied_sla).perform
+
+        expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'frt').count).to eq(0)
+        expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'nrt').count).to eq(1)
+        expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'rt').count).to eq(0)
       end
     end
 
@@ -75,18 +69,18 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
       it 'updates the SLA status to missed and logs a warning' do
         allow(Rails.logger).to receive(:warn)
         described_class.new(applied_sla: applied_sla).perform
-        expect(Rails.logger).to have_received(:warn).with("SLA missed for conversation #{conversation.id} in account " \
+        expect(Rails.logger).to have_received(:warn).with("SLA rt missed for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}")
-        expect(applied_sla.reload.sla_status).to eq('missed')
 
-        expect(Notification.count).to eq(2)
-        expect(Notification.where(notification_type: 'sla_missed_resolution').count).to eq(2)
-        # Check if notification is created for the assignee
-        expect(Notification.where(user_id: user_1.id).count).to eq(1)
-        # Check if notification is created for the account admin
-        expect(Notification.where(user_id: admin.id).count).to eq(1)
-        # Check if no notification is created for other user
-        expect(Notification.where(user_id: user_2.id).count).to eq(0)
+        expect(applied_sla.reload.sla_status).to eq('active_with_misses')
+      end
+
+      it 'creates SlaEvent only for rt miss' do
+        described_class.new(applied_sla: applied_sla).perform
+
+        expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'frt').count).to eq(0)
+        expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'nrt').count).to eq(0)
+        expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'rt').count).to eq(1)
       end
     end
 
@@ -110,13 +104,14 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
         conversation.update(first_reply_created_at: 5.hours.ago, waiting_since: 5.hours.ago)
       end
 
-      it 'updates the SLA status to missed and logs a warning' do
+      it 'updates the SLA status to missed and logs multiple warnings' do
         allow(Rails.logger).to receive(:warn)
         described_class.new(applied_sla: applied_sla).perform
-        expect(Rails.logger).to have_received(:warn).with("SLA missed for conversation #{conversation.id} in account " \
+        expect(Rails.logger).to have_received(:warn).with("SLA rt missed for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}").exactly(1).time
-        expect(applied_sla.reload.sla_status).to eq('missed')
-        expect(Notification.count).to eq(2)
+        expect(Rails.logger).to have_received(:warn).with("SLA nrt missed for conversation #{conversation.id} in account " \
+                                                          "#{applied_sla.account_id} for sla_policy #{sla_policy.id}").exactly(1).time
+        expect(applied_sla.reload.sla_status).to eq('active_with_misses')
       end
     end
   end
@@ -140,6 +135,7 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
         expect(Rails.logger).to have_received(:info).with("SLA hit for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}")
         expect(applied_sla.reload.sla_status).to eq('hit')
+        expect(SlaEvent.count).to eq(0)
         expect(Notification.count).to eq(0)
       end
     end
@@ -162,6 +158,7 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
         expect(Rails.logger).to have_received(:info).with("SLA hit for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}")
         expect(applied_sla.reload.sla_status).to eq('hit')
+        expect(SlaEvent.count).to eq(0)
       end
     end
 
@@ -177,7 +174,52 @@ RSpec.describe Sla::EvaluateAppliedSlaService do
         expect(Rails.logger).to have_received(:info).with("SLA hit for conversation #{conversation.id} in account " \
                                                           "#{applied_sla.account_id} for sla_policy #{sla_policy.id}")
         expect(applied_sla.reload.sla_status).to eq('hit')
+        expect(SlaEvent.count).to eq(0)
       end
     end
   end
+
+  describe 'SLA evaluation with frt hit, multiple nrt misses and rt miss' do
+    before do
+      # Setup SLA Policy thresholds
+      sla_policy.update(
+        first_response_time_threshold: 2.hours, # Hit frt
+        next_response_time_threshold: 1.hour, # Miss nrt multiple times
+        resolution_time_threshold: 4.hours # Miss rt
+      )
+
+      # Simulate conversation timeline
+      # Hit frt
+      # incoming message from customer
+      create(:message, conversation: conversation, created_at: 6.hours.ago, message_type: :incoming)
+      # outgoing message from agent within frt
+      create(:message, conversation: conversation, created_at: 5.hours.ago, message_type: :outgoing)
+
+      # Miss nrt first time
+      create(:message, conversation: conversation, created_at: 4.hours.ago, message_type: :incoming)
+      described_class.new(applied_sla: applied_sla).perform
+
+      # Miss nrt second time
+      create(:message, conversation: conversation, created_at: 3.hours.ago, message_type: :incoming)
+      described_class.new(applied_sla: applied_sla).perform
+
+      # Conversation is resolved missing rt
+      conversation.update(status: 'resolved')
+
+      # this will not create a new notification for rt miss as conversation is resolved
+      # but we would have already created an rt miss notification during previous evaluation
+      described_class.new(applied_sla: applied_sla).perform
+    end
+
+    it 'updates the SLA status to missed' do
+      # the status would be missed as the conversation is resolved
+      expect(applied_sla.reload.sla_status).to eq('missed')
+    end
+
+    it 'creates necessary sla events' do
+      expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'frt').count).to eq(0)
+      expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'nrt').count).to eq(2)
+      expect(SlaEvent.where(applied_sla: applied_sla, event_type: 'rt').count).to eq(1)
+    end
+  end
 end

spec/factories/sla_events.rb

@@ -0,0 +1,10 @@
+FactoryBot.define do
+  factory :sla_event do
+    applied_sla
+    conversation
+    event_type { 'frt' }
+    account { conversation.account }
+    inbox { conversation.inbox }
+    sla_policy { applied_sla.sla_policy }
+  end
+end