Merge branch 'develop' into summaries

.circleci/config.yml

@@ -144,7 +144,7 @@ jobs:
   # Backend tests with parallelization
   backend-tests:
     <<: *defaults
-    parallelism: 18
+    parallelism: 20
     steps:
       - checkout
       - node/install:
@@ -350,12 +350,12 @@ jobs:
           destination: coverage
 
   build:
-    <<: *defaults
-    steps:
-      - run:
-          name: Legacy build aggregator
-          command: |
-            echo "All main jobs passed; build job kept only for GitHub required check compatibility."
+      <<: *defaults
+      steps:
+        - run:
+            name: Legacy build aggregator
+            command: |
+              echo "All main jobs passed; build job kept only for GitHub required check compatibility."
 
 workflows:
   version: 2

.gitignore

@@ -94,7 +94,6 @@ yarn-debug.log*
 .vscode
 .claude/settings.local.json
 .cursor
-.codex/
 CLAUDE.local.md
 
 # Histoire deployment
@@ -102,4 +101,3 @@ CLAUDE.local.md
 .histoire
 .pnpm-store/*
 local/
-Procfile.worktree

AGENTS.md

@@ -50,13 +50,6 @@
 - Prefer `with_modified_env` (from spec helpers) over stubbing `ENV` directly in specs
 - Specs in parallel/reloading environments: prefer comparing `error.class.name` over constant class equality when asserting raised errors
 
-## Codex Worktree Workflow
-
-- Use a separate git worktree + branch per task to keep changes isolated.
-- Keep Codex-specific local setup under `.codex/` and use `Procfile.worktree` for worktree process orchestration.
-- The setup workflow in `.codex/environments/environment.toml` should dynamically generate per-worktree DB/port values (Rails, Vite, Redis DB index) to avoid collisions.
-- Start each worktree with its own Overmind socket/title so multiple instances can run at the same time.
-
 ## Commit Messages
 
 - Prefer Conventional Commits: `type(scope): subject` (scope optional)

Gemfile

@@ -197,8 +197,6 @@ gem 'ai-agents', '>= 0.7.0'
 gem 'ruby_llm', '>= 1.8.2'
 gem 'ruby_llm-schema'
 
-gem 'cld3', '~> 3.7'
-
 # OpenTelemetry for LLM observability
 gem 'opentelemetry-sdk'
 gem 'opentelemetry-exporter-otlp'

Gemfile.lock

@@ -186,7 +186,6 @@ GEM
     byebug (11.1.3)
     childprocess (5.1.0)
       logger (~> 1.5)
-    cld3 (3.7.0)
     climate_control (1.2.0)
     coderay (1.1.3)
     commonmarker (0.23.10)
@@ -298,7 +297,7 @@ GEM
       railties (>= 5.0.0)
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.14.1)
+    faraday (2.13.1)
       faraday-net_http (>= 2.0, < 3.5)
       json
       logger
@@ -309,8 +308,8 @@ GEM
       hashie
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
-    faraday-net_http (3.4.2)
-      net-http (~> 0.5)
+    faraday-net_http (3.4.0)
+      net-http (>= 0.5.0)
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
@@ -465,7 +464,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (2.18.1)
+    json (2.13.2)
     json_refs (0.1.8)
       hana
     json_schemer (0.2.24)
@@ -542,9 +541,9 @@ GEM
       net-smtp
     marcel (1.0.4)
     maxminddb (0.1.22)
-    meta_request (0.8.5)
+    meta_request (0.8.3)
       rack-contrib (>= 1.1, < 3)
-      railties (>= 3.0.0, < 9)
+      railties (>= 3.0.0, < 8)
     method_source (1.1.0)
     mime-types (3.4.1)
       mime-types-data (~> 3.2015)
@@ -563,8 +562,8 @@ GEM
     mutex_m (0.3.0)
     neighbor (0.2.3)
       activerecord (>= 5.2)
-    net-http (0.9.1)
-      uri (>= 0.11.1)
+    net-http (0.6.0)
+      uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
     net-imap (0.4.20)
@@ -969,7 +968,7 @@ GEM
       unicode-emoji (~> 4.0, >= 4.0.4)
     unicode-emoji (4.0.4)
     uniform_notifier (1.17.0)
-    uri (1.1.1)
+    uri (1.0.4)
     uri_template (0.7.0)
     valid_email2 (5.2.6)
       activemodel (>= 3.2)
@@ -1038,7 +1037,6 @@ DEPENDENCIES
   bullet
   bundle-audit
   byebug
-  cld3 (~> 3.7)
   climate_control
   commonmarker
   csv-safe

app/builders/v2/reports/outgoing_messages_count_builder.rb

@@ -1,79 +0,0 @@
-class V2::Reports::OutgoingMessagesCountBuilder
-  include DateRangeHelper
-  attr_reader :account, :params
-
-  def initialize(account, params)
-    @account = account
-    @params = params
-  end
-
-  def build
-    send("build_by_#{params[:group_by]}")
-  end
-
-  private
-
-  def base_messages
-    account.messages.outgoing.unscope(:order).where(created_at: range)
-  end
-
-  def build_by_agent
-    counts = base_messages
-             .where(sender_type: 'User')
-             .where.not(sender_id: nil)
-             .group(:sender_id)
-             .count
-
-    user_names = account.users.where(id: counts.keys).index_by(&:id)
-
-    counts.map do |user_id, count|
-      user = user_names[user_id]
-      { id: user_id, name: user&.name, outgoing_messages_count: count }
-    end
-  end
-
-  def build_by_team
-    counts = base_messages
-             .joins('INNER JOIN conversations ON messages.conversation_id = conversations.id')
-             .where.not(conversations: { team_id: nil })
-             .group('conversations.team_id')
-             .count
-
-    team_names = account.teams.where(id: counts.keys).index_by(&:id)
-
-    counts.map do |team_id, count|
-      team = team_names[team_id]
-      { id: team_id, name: team&.name, outgoing_messages_count: count }
-    end
-  end
-
-  def build_by_inbox
-    counts = base_messages
-             .group(:inbox_id)
-             .count
-
-    inbox_names = account.inboxes.where(id: counts.keys).index_by(&:id)
-
-    counts.map do |inbox_id, count|
-      inbox = inbox_names[inbox_id]
-      { id: inbox_id, name: inbox&.name, outgoing_messages_count: count }
-    end
-  end
-
-  def build_by_label
-    counts = base_messages
-             .joins('INNER JOIN conversations ON messages.conversation_id = conversations.id')
-             .joins("INNER JOIN taggings ON taggings.taggable_id = conversations.id
-                     AND taggings.taggable_type = 'Conversation' AND taggings.context = 'labels'")
-             .joins('INNER JOIN tags ON tags.id = taggings.tag_id')
-             .group('tags.name')
-             .count
-
-    label_ids = account.labels.where(title: counts.keys).index_by(&:title)
-
-    counts.map do |label_name, count|
-      label = label_ids[label_name]
-      { id: label&.id, name: label_name, outgoing_messages_count: count }
-    end
-  end
-end

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

@@ -70,7 +70,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
 
   def transcript
     render json: { error: 'email param missing' }, status: :unprocessable_entity and return if params[:email].blank?
-    return render_payment_required('Email transcript is not available on your plan') unless @conversation.account.email_transcript_enabled?
     return head :too_many_requests unless @conversation.account.within_email_rate_limit?
 
     ConversationReplyMailer.with(account: @conversation.account).conversation_transcript(@conversation, params[:email])&.deliver_later

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

@@ -35,9 +35,7 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def transcript
-    return head :too_many_requests if conversation.blank?
-    return head :payment_required unless conversation.account.email_transcript_enabled?
-    return head :too_many_requests unless conversation.account.within_email_rate_limit?
+    return head :too_many_requests unless conversation.present? && conversation.account.within_email_rate_limit?
 
     send_transcript_email
     head :ok

app/controllers/api/v2/accounts/reports_controller.rb

@@ -78,15 +78,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     render json: builder.build
   end
 
-  OUTGOING_MESSAGES_ALLOWED_GROUP_BY = %w[agent team inbox label].freeze
-
-  def outgoing_messages_count
-    return head :unprocessable_entity unless OUTGOING_MESSAGES_ALLOWED_GROUP_BY.include?(params[:group_by])
-
-    builder = V2::Reports::OutgoingMessagesCountBuilder.new(Current.account, outgoing_messages_count_params)
-    render json: builder.build
-  end
-
   private
 
   def generate_csv(filename, template)
@@ -180,12 +171,4 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
       until: params[:until]
     }
   end
-
-  def outgoing_messages_count_params
-    {
-      group_by: params[:group_by],
-      since: params[:since],
-      until: params[:until]
-    }
-  end
 end

app/controllers/devise_overrides/passwords_controller.rb

@@ -6,8 +6,12 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
 
   def create
     @user = User.from_email(params[:email])
-    @user&.send_reset_password_instructions
-    build_response(I18n.t('messages.reset_password'), 200)
+    if @user
+      @user.send_reset_password_instructions
+      build_response(I18n.t('messages.reset_password_success'), 200)
+    else
+      build_response(I18n.t('messages.reset_password_failure'), 404)
+    end
   end
 
   def update

app/javascript/dashboard/api/captain/tasks.js

@@ -37,14 +37,17 @@ class TasksAPI extends ApiClient {
   /**
    * Summarizes a conversation.
    * @param {string} conversationId - The conversation ID to summarize.
-   * @param {AbortSignal} [signal] - AbortSignal to cancel the request.
+   * @param {Object} [options] - Additional options.
+   * @param {boolean} [options.forceRegenerate] - Force regeneration of cached summary.
+   * @param {AbortSignal} [options.signal] - AbortSignal to cancel the request.
    * @returns {Promise} A promise that resolves with the summary.
    */
-  summarize(conversationId, signal) {
+  summarize(conversationId, { forceRegenerate = false, signal } = {}) {
     return axios.post(
       `${this.url}/summarize`,
       {
         conversation_display_id: conversationId,
+        force_regenerate: forceRegenerate,
       },
       { signal }
     );

app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.story.vue

@@ -39,6 +39,7 @@ const policyA = withCount({
   description: 'Distributes conversations evenly among available agents',
   assignmentOrder: 'round_robin',
   conversationPriority: 'high',
+  enabled: true,
   inboxes: [mockInboxes[0], mockInboxes[1]],
   isFetchingInboxes: false,
 });
@@ -49,6 +50,7 @@ const policyB = withCount({
   description: 'Assigns based on capacity and workload',
   assignmentOrder: 'capacity_based',
   conversationPriority: 'medium',
+  enabled: true,
   inboxes: [mockInboxes[2], mockInboxes[3]],
   isFetchingInboxes: false,
 });
@@ -59,6 +61,7 @@ const emptyPolicy = withCount({
   description: 'Policy with no assigned inboxes',
   assignmentOrder: 'manual',
   conversationPriority: 'low',
+  enabled: false,
   inboxes: [],
   isFetchingInboxes: false,
 });

app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue

@@ -15,6 +15,7 @@ const props = defineProps({
   assignmentOrder: { type: String, default: '' },
   conversationPriority: { type: String, default: '' },
   assignedInboxCount: { type: Number, default: 0 },
+  enabled: { type: Boolean, default: false },
   inboxes: { type: Array, default: () => [] },
   isFetchingInboxes: { type: Boolean, default: false },
 });
@@ -64,6 +65,22 @@ const handleFetchInboxes = () => {
             {{ name }}
           </h3>
           <div class="flex items-center gap-2">
+            <div class="flex items-center rounded-md bg-n-alpha-2 h-6 px-2">
+              <span
+                class="text-xs"
+                :class="enabled ? 'text-n-teal-11' : 'text-n-slate-12'"
+              >
+                {{
+                  enabled
+                    ? t(
+                        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ACTIVE'
+                      )
+                    : t(
+                        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.INACTIVE'
+                      )
+                }}
+              </span>
+            </div>
             <CardPopover
               :title="
                 t(

app/javascript/dashboard/components-next/AssignmentPolicy/components/DataTable.vue

@@ -19,15 +19,11 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['delete', 'navigate']);
+const emit = defineEmits(['delete']);
 
 const handleDelete = itemId => {
   emit('delete', itemId);
 };
-
-const handleNavigate = item => {
-  emit('navigate', item);
-};
 </script>
 
 <template>
@@ -51,11 +47,7 @@ const handleNavigate = item => {
       :key="item.id"
       class="grid grid-cols-4 items-center gap-3 min-w-0 w-full justify-between h-[3.25rem] ltr:pr-2 rtl:pl-2"
     >
-      <button
-        type="button"
-        class="flex items-center gap-2 col-span-2 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 rounded-lg py-1 px-1.5 -ml-1.5 transition-colors cursor-pointer group"
-        @click="handleNavigate(item)"
-      >
+      <div class="flex items-center gap-2 col-span-2">
         <Icon
           v-if="item.icon"
           :icon="item.icon"
@@ -69,16 +61,10 @@ const handleNavigate = item => {
           :size="20"
           rounded-full
         />
-        <span
-          class="text-sm text-n-slate-12 truncate min-w-0 group-hover:text-n-blue-11 dark:group-hover:text-n-blue-10 transition-colors"
-        >
+        <span class="text-sm text-n-slate-12 truncate min-w-0">
           {{ item.name }}
         </span>
-        <Icon
-          icon="i-lucide-external-link"
-          class="size-3.5 text-n-slate-10 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
-        />
-      </button>
+      </div>
 
       <div class="flex items-start gap-2 col-span-1">
         <span

app/javascript/dashboard/components-next/AssignmentPolicy/components/FairDistribution.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Input from 'dashboard/components-next/input/Input.vue';
 import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
@@ -15,9 +15,6 @@ const fairDistributionLimit = defineModel('fairDistributionLimit', {
   },
 });
 
-// The model value is in seconds (for the backend/DB)
-// DurationInput works in minutes internally
-// We need to convert between seconds and minutes
 const fairDistributionWindow = defineModel('fairDistributionWindow', {
   type: Number,
   default: 3600,
@@ -28,17 +25,6 @@ const fairDistributionWindow = defineModel('fairDistributionWindow', {
 
 const windowUnit = ref(DURATION_UNITS.MINUTES);
 
-// Convert seconds to minutes for DurationInput
-const windowInMinutes = computed({
-  get() {
-    return Math.floor((fairDistributionWindow.value || 0) / 60);
-  },
-  set(minutes) {
-    fairDistributionWindow.value = minutes * 60;
-  },
-});
-
-// Detect unit based on minutes (converted from seconds)
 const detectUnit = minutes => {
   const m = Number(minutes) || 0;
   if (m === 0) return DURATION_UNITS.MINUTES;
@@ -48,7 +34,7 @@ const detectUnit = minutes => {
 };
 
 onMounted(() => {
-  windowUnit.value = detectUnit(windowInMinutes.value);
+  windowUnit.value = detectUnit(fairDistributionWindow.value);
 });
 </script>
 
@@ -87,9 +73,9 @@ onMounted(() => {
       <div
         class="flex items-center gap-2 flex-1 [&>select]:!bg-n-alpha-2 [&>select]:!outline-none [&>select]:hover:brightness-110"
       >
-        <!-- allow 10 mins to 999 days (in minutes) -->
+        <!-- allow 10 mins to 999 days -->
         <DurationInput
-          v-model:model-value="windowInMinutes"
+          v-model:model-value="fairDistributionWindow"
           v-model:unit="windowUnit"
           :min="10"
           :max="1438560"

app/javascript/dashboard/components-next/AssignmentPolicy/components/RadioCard.vue

@@ -1,6 +1,4 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-
 const props = defineProps({
   id: {
     type: String,
@@ -18,22 +16,12 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  disabledMessage: {
-    type: String,
-    default: '',
-  },
 });
 
 const emit = defineEmits(['select']);
 
-const { t } = useI18n();
-
 const handleChange = () => {
-  if (!props.isActive && !props.disabled) {
+  if (!props.isActive) {
     emit('select', props.id);
   }
 };
@@ -41,11 +29,9 @@ const handleChange = () => {
 
 <template>
   <div
-    class="relative rounded-xl outline outline-1 p-4 transition-all duration-200 bg-n-solid-1 py-4 ltr:pl-4 rtl:pr-4 ltr:pr-6 rtl:pl-6"
+    class="relative cursor-pointer rounded-xl outline outline-1 p-4 transition-all duration-200 bg-n-solid-1 py-4 ltr:pl-4 rtl:pr-4 ltr:pr-6 rtl:pl-6"
     :class="[
-      disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
-      isActive ? 'outline-n-blue-9' : 'outline-n-weak',
-      !disabled && !isActive ? 'hover:outline-n-strong' : '',
+      isActive ? 'outline-n-blue-9' : 'outline-n-weak hover:outline-n-strong',
     ]"
     @click="handleChange"
   >
@@ -55,7 +41,6 @@ const handleChange = () => {
         :checked="isActive"
         :value="id"
         :name="id"
-        :disabled="disabled"
         type="radio"
         class="h-4 w-4 border-n-slate-6 text-n-brand focus:ring-n-brand focus:ring-offset-0"
         @change="handleChange"
@@ -64,23 +49,11 @@ const handleChange = () => {
 
     <!-- Content -->
     <div class="flex flex-col gap-3 items-start">
-      <div class="flex items-center gap-2">
-        <h3 class="text-sm font-medium text-n-slate-12">
-          {{ label }}
-        </h3>
-        <span
-          v-if="disabled"
-          class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-n-yellow-3 text-n-yellow-11"
-        >
-          {{
-            t(
-              'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_BADGE'
-            )
-          }}
-        </span>
-      </div>
+      <h3 class="text-sm font-medium text-n-slate-12">
+        {{ label }}
+      </h3>
       <p class="text-sm text-n-slate-11">
-        {{ disabled && disabledMessage ? disabledMessage : description }}
+        {{ description }}
       </p>
     </div>
   </div>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/BaseInfo.story.vue

@@ -6,6 +6,7 @@ const policyName = ref('Round Robin Policy');
 const description = ref(
   'Distributes conversations evenly among available agents'
 );
+const enabled = ref(true);
 </script>
 
 <template>
@@ -18,10 +19,13 @@ const description = ref(
         <BaseInfo
           v-model:policy-name="policyName"
           v-model:description="description"
+          v-model:enabled="enabled"
           name-label="Policy Name"
           name-placeholder="Enter policy name"
           description-label="Description"
           description-placeholder="Enter policy description"
+          status-label="Status"
+          status-placeholder="Active"
         />
       </div>
     </Variant>

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -8,7 +8,6 @@ import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
 import { vOnClickOutside } from '@vueuse/components';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useWindowSize, useEventListener } from '@vueuse/core';
 import { emitter } from 'shared/helpers/mitt';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -51,18 +50,6 @@ const isRTL = useMapGetter('accounts/isRTL');
 const { width: windowWidth } = useWindowSize();
 const isMobile = computed(() => windowWidth.value < 768);
 
-const accountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const hasAdvancedAssignment = computed(() => {
-  return isFeatureEnabledonAccount.value(
-    accountId.value,
-    FEATURE_FLAGS.ADVANCED_ASSIGNMENT
-  );
-});
-
 const toggleShortcutModalFn = show => {
   if (show) {
     emit('openKeyShortcutModal');
@@ -597,16 +584,12 @@ const menuItems = computed(() => {
           icon: 'i-lucide-users',
           to: accountScopedRoute('settings_teams_list'),
         },
-        ...(hasAdvancedAssignment.value
-          ? [
-              {
-                name: 'Settings Agent Assignment',
-                label: t('SIDEBAR.AGENT_ASSIGNMENT'),
-                icon: 'i-lucide-user-cog',
-                to: accountScopedRoute('assignment_policy_index'),
-              },
-            ]
-          : []),
+        {
+          name: 'Settings Agent Assignment',
+          label: t('SIDEBAR.AGENT_ASSIGNMENT'),
+          icon: 'i-lucide-user-cog',
+          to: accountScopedRoute('assignment_policy_index'),
+        },
         {
           name: 'Settings Inboxes',
           label: t('SIDEBAR.INBOXES'),

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

@@ -1,14 +1,11 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { ref, watch } from 'vue';
 import {
   getActiveDateRange,
   moveCalendarDate,
   DATE_RANGE_TYPES,
   CALENDAR_TYPES,
   CALENDAR_PERIODS,
-  isNavigableRange,
-  getRangeAtOffset,
 } from './helpers/DatePickerHelper';
 import {
   isValid,
@@ -16,14 +13,14 @@ import {
   subDays,
   startOfDay,
   endOfDay,
+  isBefore,
   subMonths,
   addMonths,
   isSameMonth,
   differenceInCalendarMonths,
-  differenceInCalendarWeeks,
   setMonth,
   setYear,
-  getWeek,
+  isAfter,
 } from 'date-fns';
 import { useAlert } from 'dashboard/composables';
 import DatePickerButton from './components/DatePickerButton.vue';
@@ -35,187 +32,98 @@ import CalendarWeek from './components/CalendarWeek.vue';
 import CalendarFooter from './components/CalendarFooter.vue';
 
 const emit = defineEmits(['dateRangeChanged']);
-const { t } = useI18n();
-
-const dateRange = defineModel('dateRange', {
-  type: Array,
-  default: undefined,
-});
-
-const rangeType = defineModel('rangeType', {
-  type: String,
-  default: undefined,
-});
-const { LAST_7_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
+const { LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
 const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
 const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
 
 const showDatePicker = ref(false);
 const calendarViews = ref({ start: WEEK, end: WEEK });
 const currentDate = ref(new Date());
-
-// Use dates from v-model if provided, otherwise default to last 7 days
-const selectedStartDate = ref(
-  dateRange.value?.[0]
-    ? startOfDay(dateRange.value[0])
-    : startOfDay(subDays(currentDate.value, 6)) // LAST_7_DAYS
-);
-const selectedEndDate = ref(
-  dateRange.value?.[1]
-    ? endOfDay(dateRange.value[1])
-    : endOfDay(currentDate.value)
-);
-// Calendar month positioning (left and right calendars)
-// These control which months are displayed in the dual calendar view
-const startCurrentDate = ref(startOfMonth(selectedStartDate.value));
+const selectedStartDate = ref(startOfDay(subDays(currentDate.value, 6))); // LAST_7_DAYS
+const selectedEndDate = ref(endOfDay(currentDate.value));
+// Setting the start and end calendar
+const startCurrentDate = ref(startOfDay(selectedStartDate.value));
 const endCurrentDate = ref(
   isSameMonth(selectedStartDate.value, selectedEndDate.value)
-    ? startOfMonth(addMonths(selectedEndDate.value, 1)) // Same month: show next month on right (e.g., Jan 25-31 shows Jan + Feb)
-    : startOfMonth(selectedEndDate.value) // Different months: show end month on right (e.g., Dec 5 - Jan 3 shows Dec + Jan)
+    ? startOfMonth(addMonths(selectedEndDate.value, 1)) // Moves to the start of the next month if dates are in the same month (Mounted case LAST_7_DAYS)
+    : startOfMonth(selectedEndDate.value) // Always shows the month of the end date starting from the first (Mounted case LAST_7_DAYS)
 );
 const selectingEndDate = ref(false);
-const selectedRange = ref(rangeType.value || LAST_7_DAYS);
+const selectedRange = ref(LAST_7_DAYS);
 const hoveredEndDate = ref(null);
-const monthOffset = ref(0);
-
-const showMonthNavigation = computed(() =>
-  isNavigableRange(selectedRange.value)
-);
-const canNavigateNext = computed(() => {
-  if (!isNavigableRange(selectedRange.value)) return false;
-  // Compare selected start to the current period's start to determine if we're in the past
-  const currentRange = getActiveDateRange(
-    selectedRange.value,
-    currentDate.value
-  );
-  return selectedStartDate.value < currentRange.start;
-});
-
-const navigationLabel = computed(() => {
-  const range = selectedRange.value;
-  if (range === DATE_RANGE_TYPES.MONTH_TO_DATE) {
-    return new Intl.DateTimeFormat(navigator.language, {
-      month: 'long',
-    }).format(selectedStartDate.value);
-  }
-  if (range === DATE_RANGE_TYPES.THIS_WEEK) {
-    const currentWeekRange = getActiveDateRange(range, currentDate.value);
-    const isCurrentWeek =
-      selectedStartDate.value.getTime() === currentWeekRange.start.getTime();
-    if (isCurrentWeek) return null;
-    const weekNumber = getWeek(selectedStartDate.value, { weekStartsOn: 1 });
-    return t('DATE_PICKER.WEEK_NUMBER', { weekNumber });
-  }
-  return null;
-});
 
 const manualStartDate = ref(selectedStartDate.value);
 const manualEndDate = ref(selectedEndDate.value);
 
-// Watcher 1: Sync v-model props from parent component
-// Handles: URL params, parent component updates, rangeType changes
-watch(
-  [rangeType, dateRange],
-  ([newRangeType, newDateRange]) => {
-    if (newRangeType && newRangeType !== selectedRange.value) {
-      selectedRange.value = newRangeType;
-      monthOffset.value = 0;
+// Watcher will set the start and end dates based on the selected range
+watch(selectedRange, newRange => {
+  if (newRange !== CUSTOM_RANGE) {
+    // If selecting a range other than last 7 days or last 30 days, set the start and end dates to the selected start and end dates
+    // If selecting last 7 days or last 30 days is, set the start date to the selected start date
+    // and the end date to one month ahead of the start date if the start date and end date are in the same month
+    // Otherwise set the end date to the selected end date
+    const isLastSevenOrThirtyDays =
+      newRange === LAST_7_DAYS || newRange === LAST_30_DAYS;
+    startCurrentDate.value = selectedStartDate.value;
+    endCurrentDate.value =
+      isLastSevenOrThirtyDays &&
+      isSameMonth(selectedStartDate.value, selectedEndDate.value)
+        ? startOfMonth(addMonths(selectedStartDate.value, 1))
+        : selectedEndDate.value;
+    selectingEndDate.value = false;
+  } else if (!selectingEndDate.value) {
+    // If selecting a custom range and not selecting an end date, set the start date to the selected start date
+    startCurrentDate.value = startOfDay(currentDate.value);
+  }
+});
 
-      // If rangeType changes without dateRange, recompute dates from the range
-      if (!newDateRange && newRangeType !== CUSTOM_RANGE) {
-        const activeDates = getActiveDateRange(newRangeType, currentDate.value);
-        if (activeDates) {
-          selectedStartDate.value = startOfDay(activeDates.start);
-          selectedEndDate.value = endOfDay(activeDates.end);
-        }
-      }
+// Watcher will set the input values based on the selected start and end dates
+watch(
+  [selectedStartDate, selectedEndDate],
+  ([newStart, newEnd]) => {
+    if (isValid(newStart)) {
+      manualStartDate.value = newStart;
+    } else {
+      manualStartDate.value = selectedStartDate.value;
     }
 
-    // When parent provides new dateRange (e.g., from URL params)
-    // Skip if navigating with arrows — offset controls dates in that case
-    if (newDateRange?.[0] && newDateRange?.[1] && monthOffset.value === 0) {
-      selectedStartDate.value = startOfDay(newDateRange[0]);
-      selectedEndDate.value = endOfDay(newDateRange[1]);
-
-      // Update calendar to show the months of the new date range
-      startCurrentDate.value = startOfMonth(newDateRange[0]);
-      endCurrentDate.value = isSameMonth(newDateRange[0], newDateRange[1])
-        ? startOfMonth(addMonths(newDateRange[1], 1))
-        : startOfMonth(newDateRange[1]);
-
-      // Recalculate offset so arrow navigation is relative to restored range
-      // TODO: When offset resolves to 0 (current period), the end date may be
-      // stale if the URL was saved on a previous day. "This month" / "This week"
-      // should show up-to-today dates for the current period. For now, the stale
-      // end date is shown until the user clicks an arrow or re-selects the range.
-      if (isNavigableRange(selectedRange.value)) {
-        const current = getActiveDateRange(
-          selectedRange.value,
-          currentDate.value
-        );
-        if (selectedRange.value === DATE_RANGE_TYPES.THIS_WEEK) {
-          monthOffset.value = differenceInCalendarWeeks(
-            newDateRange[0],
-            current.start,
-            { weekStartsOn: 1 }
-          );
-        } else {
-          monthOffset.value = differenceInCalendarMonths(
-            newDateRange[0],
-            current.start
-          );
-        }
-      }
+    if (isValid(newEnd)) {
+      manualEndDate.value = newEnd;
+    } else {
+      manualEndDate.value = selectedEndDate.value;
     }
   },
   { immediate: true }
 );
 
-// Watcher 2: Keep manual input fields in sync with selected dates
-// Updates the input field values when dates change programmatically
+// Watcher to ensure dates are always in logical order
+// This watch is will ensure that the start date is always before the end date
 watch(
-  [selectedStartDate, selectedEndDate],
-  ([newStart, newEnd]) => {
-    manualStartDate.value = isValid(newStart)
-      ? newStart
-      : selectedStartDate.value;
-    manualEndDate.value = isValid(newEnd) ? newEnd : selectedEndDate.value;
+  [startCurrentDate, endCurrentDate],
+  ([newStart, newEnd], [oldStart, oldEnd]) => {
+    const monthDifference = differenceInCalendarMonths(newEnd, newStart);
+
+    if (newStart !== oldStart) {
+      if (isAfter(newStart, newEnd) || monthDifference === 0) {
+        // Adjust the end date forward if the start date is adjusted and is after the end date or in the same month
+        endCurrentDate.value = addMonths(newStart, 1);
+      }
+    }
+    if (newEnd !== oldEnd) {
+      if (isBefore(newEnd, newStart) || monthDifference === 0) {
+        // Adjust the start date backward if the end date is adjusted and is before the start date or in the same month
+        startCurrentDate.value = subMonths(newEnd, 1);
+      }
+    }
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 );
 
 const setDateRange = range => {
   selectedRange.value = range.value;
-  monthOffset.value = 0;
   const { start, end } = getActiveDateRange(range.value, currentDate.value);
   selectedStartDate.value = start;
   selectedEndDate.value = end;
-
-  // Position calendar to show the months of the selected range
-  startCurrentDate.value = startOfMonth(start);
-  endCurrentDate.value = isSameMonth(start, end)
-    ? startOfMonth(addMonths(start, 1))
-    : startOfMonth(end);
-};
-
-const navigateMonth = direction => {
-  monthOffset.value += direction === 'prev' ? -1 : 1;
-  if (monthOffset.value > 0) monthOffset.value = 0;
-
-  const { start, end } = getRangeAtOffset(
-    selectedRange.value,
-    monthOffset.value,
-    currentDate.value
-  );
-  selectedStartDate.value = start;
-  selectedEndDate.value = end;
-
-  startCurrentDate.value = startOfMonth(start);
-  endCurrentDate.value = isSameMonth(start, end)
-    ? startOfMonth(addMonths(start, 1))
-    : startOfMonth(end);
-
-  emit('dateRangeChanged', [start, end, selectedRange.value]);
 };
 
 const moveCalendar = (calendar, direction, period = MONTH) => {
@@ -226,27 +134,12 @@ const moveCalendar = (calendar, direction, period = MONTH) => {
     direction,
     period
   );
-
-  // Prevent calendar months from overlapping
-  const monthDiff = differenceInCalendarMonths(end, start);
-  if (monthDiff === 0) {
-    // If they would be the same month, adjust the other calendar
-    if (calendar === START_CALENDAR) {
-      endCurrentDate.value = addMonths(start, 1);
-      startCurrentDate.value = start;
-    } else {
-      startCurrentDate.value = subMonths(end, 1);
-      endCurrentDate.value = end;
-    }
-  } else {
-    startCurrentDate.value = start;
-    endCurrentDate.value = end;
-  }
+  startCurrentDate.value = start;
+  endCurrentDate.value = end;
 };
 
 const selectDate = day => {
   selectedRange.value = CUSTOM_RANGE;
-  monthOffset.value = 0;
   if (!selectingEndDate.value || day < selectedStartDate.value) {
     selectedStartDate.value = day;
     selectedEndDate.value = null;
@@ -282,10 +175,10 @@ const openCalendar = (index, calendarType, period = MONTH) => {
 const updateManualInput = (newDate, calendarType) => {
   if (calendarType === START_CALENDAR) {
     selectedStartDate.value = newDate;
-    startCurrentDate.value = startOfMonth(newDate);
+    startCurrentDate.value = newDate;
   } else {
     selectedEndDate.value = newDate;
-    endCurrentDate.value = startOfMonth(newDate);
+    endCurrentDate.value = newDate;
   }
   selectingEndDate.value = false;
 };
@@ -295,22 +188,13 @@ const handleManualInputError = message => {
 };
 
 const resetDatePicker = () => {
-  // Calculate Last 7 days from today
-  const startDate = startOfDay(subDays(currentDate.value, 6));
-  const endDate = endOfDay(currentDate.value);
-
-  selectedStartDate.value = startDate;
-  selectedEndDate.value = endDate;
-
-  // Position calendar to show the months of Last 7 days
-  // Example: If today is Feb 5, Last 7 days = Jan 30 - Feb 5, so show Jan + Feb
-  startCurrentDate.value = startOfMonth(startDate);
-  endCurrentDate.value = isSameMonth(startDate, endDate)
-    ? startOfMonth(addMonths(startDate, 1))
-    : startOfMonth(endDate);
+  startCurrentDate.value = startOfDay(currentDate.value); // Resets to today at start of the day
+  endCurrentDate.value = addMonths(startOfDay(currentDate.value), 1); // Resets to one month ahead
+  selectedStartDate.value = startOfDay(subDays(currentDate.value, 6));
+  selectedEndDate.value = endOfDay(currentDate.value);
   selectingEndDate.value = false;
   selectedRange.value = LAST_7_DAYS;
-  monthOffset.value = 0;
+  // Reset view modes if they are being used to toggle between different calendar views
   calendarViews.value = { start: WEEK, end: WEEK };
 };
 
@@ -319,58 +203,26 @@ const emitDateRange = () => {
     useAlert('Please select a valid time range');
   } else {
     showDatePicker.value = false;
-    emit('dateRangeChanged', [
-      selectedStartDate.value,
-      selectedEndDate.value,
-      selectedRange.value,
-    ]);
+    emit('dateRangeChanged', [selectedStartDate.value, selectedEndDate.value]);
   }
 };
 
-// Called when picker opens - positions calendar to show selected date range
-// Fixes issue where calendar showed wrong months when loaded from URL params
-const initializeCalendarMonths = () => {
-  if (selectedStartDate.value && selectedEndDate.value) {
-    startCurrentDate.value = startOfMonth(selectedStartDate.value);
-    endCurrentDate.value = isSameMonth(
-      selectedStartDate.value,
-      selectedEndDate.value
-    )
-      ? startOfMonth(addMonths(selectedEndDate.value, 1))
-      : startOfMonth(selectedEndDate.value);
-  }
-};
-
-const toggleDatePicker = () => {
-  showDatePicker.value = !showDatePicker.value;
-  if (showDatePicker.value) initializeCalendarMonths();
-};
-
 const closeDatePicker = () => {
-  if (isValid(selectedStartDate.value) && isValid(selectedEndDate.value)) {
-    emitDateRange();
-  } else {
-    showDatePicker.value = false;
-  }
+  showDatePicker.value = false;
 };
 </script>
 
 <template>
-  <div class="relative flex-shrink-0 font-inter">
+  <div v-on-clickaway="closeDatePicker" class="relative font-inter">
     <DatePickerButton
       :selected-start-date="selectedStartDate"
       :selected-end-date="selectedEndDate"
       :selected-range="selectedRange"
-      :show-month-navigation="showMonthNavigation"
-      :can-navigate-next="canNavigateNext"
-      :navigation-label="navigationLabel"
-      @open="toggleDatePicker"
-      @navigate-month="navigateMonth"
+      @open="showDatePicker = !showDatePicker"
     />
     <div
       v-if="showDatePicker"
-      v-on-clickaway="closeDatePicker"
-      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] rounded-2xl bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container"
+      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] h-[490px] rounded-2xl bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container"
     >
       <CalendarDateRange
         :selected-range="selectedRange"

app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue

@@ -46,13 +46,13 @@ const onClickSetView = (type, mode) => {
       xs
       icon="i-lucide-chevron-left"
       class="rtl:rotate-180"
-      @click.stop="onClickPrev(calendarType)"
+      @click="onClickPrev(calendarType)"
     />
     <div class="flex items-center gap-1">
       <button
         v-if="firstButtonLabel"
         class="p-0 text-sm font-medium text-center text-n-slate-12 hover:text-n-brand"
-        @click.stop="onClickSetView(calendarType, viewMode)"
+        @click="onClickSetView(calendarType, viewMode)"
       >
         {{ firstButtonLabel }}
       </button>
@@ -60,7 +60,7 @@ const onClickSetView = (type, mode) => {
         v-if="buttonLabel"
         class="p-0 text-sm font-medium text-center text-n-slate-12"
         :class="{ 'hover:text-n-brand': viewMode }"
-        @click.stop="onClickSetView(calendarType, YEAR)"
+        @click="onClickSetView(calendarType, YEAR)"
       >
         {{ buttonLabel }}
       </button>
@@ -71,7 +71,7 @@ const onClickSetView = (type, mode) => {
       xs
       icon="i-lucide-chevron-right"
       class="rtl:rotate-180"
-      @click.stop="onClickNext(calendarType)"
+      @click="onClickNext(calendarType)"
     />
   </div>
 </template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue

@@ -18,25 +18,24 @@ const setDateRange = range => {
 <template>
   <div class="w-[200px] flex flex-col items-start">
     <h4
-      class="w-full px-5 py-4 text-xs font-bold capitalize text-start text-n-slate-10"
+      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-n-slate-12"
     >
       {{ $t('DATE_PICKER.DATE_RANGE_OPTIONS.TITLE') }}
     </h4>
     <div class="flex flex-col items-start w-full">
-      <template v-for="range in dateRanges" :key="range.label">
-        <div v-if="range.separator" class="w-full border-t border-n-strong" />
-        <button
-          class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-n-alpha-2 dark:hover:bg-n-solid-3"
-          :class="
-            range.value === selectedRange
-              ? 'text-n-slate-12 bg-n-alpha-1 dark:bg-n-solid-active'
-              : 'text-n-slate-12'
-          "
-          @click="setDateRange(range)"
-        >
-          {{ $t(range.label) }}
-        </button>
-      </template>
+      <button
+        v-for="range in dateRanges"
+        :key="range.label"
+        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-n-alpha-2 dark:hover:bg-n-solid-3"
+        :class="
+          range.value === selectedRange
+            ? 'text-n-slate-12 bg-n-alpha-1 dark:bg-n-solid-active'
+            : 'text-n-slate-12'
+        "
+        @click="setDateRange(range)"
+      >
+        {{ $t(range.label) }}
+      </button>
     </div>
   </div>
 </template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue

@@ -23,6 +23,7 @@ const onClickApply = () => {
     />
     <NextButton
       sm
+      ghost
       :label="$t('DATE_PICKER.APPLY_BUTTON')"
       @click="onClickApply"
     />

app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue

@@ -78,7 +78,7 @@ const selectMonth = index => {
           'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3':
             index !== activeMonthIndex,
         }"
-        @click.stop="selectMonth(index)"
+        @click="selectMonth(index)"
       >
         {{ month }}
       </button>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue

@@ -77,7 +77,7 @@ const selectYear = year => {
           'bg-n-brand text-white hover:bg-n-blue-10': year === activeYear,
           'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3': year !== activeYear,
         }"
-        @click.stop="selectYear(year)"
+        @click="selectYear(year)"
       >
         {{ year }}
       </button>

app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue

@@ -2,8 +2,6 @@
 import { computed } from 'vue';
 import { dateRanges } from '../helpers/DatePickerHelper';
 import { format, isSameYear, isValid } from 'date-fns';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   selectedStartDate: Date,
@@ -12,21 +10,9 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  showMonthNavigation: {
-    type: Boolean,
-    default: false,
-  },
-  canNavigateNext: {
-    type: Boolean,
-    default: false,
-  },
-  navigationLabel: {
-    type: String,
-    default: null,
-  },
 });
 
-const emit = defineEmits(['open', 'navigateMonth']);
+const emit = defineEmits(['open']);
 
 const formatDateRange = computed(() => {
   const startDate = props.selectedStartDate;
@@ -36,15 +22,19 @@ const formatDateRange = computed(() => {
     return 'Select a date range';
   }
 
-  const crossesYears = !isSameYear(startDate, endDate);
+  const formatString = isSameYear(startDate, endDate)
+    ? 'MMM d' // Same year: "Apr 1"
+    : 'MMM d yyyy'; // Different years: "Apr 1 2025"
 
-  // Always show years when crossing year boundaries
-  if (crossesYears) {
-    return `${format(startDate, 'MMM d, yyyy')} - ${format(endDate, 'MMM d, yyyy')}`;
+  if (isSameYear(startDate, new Date()) && isSameYear(endDate, new Date())) {
+    // Both dates are in the current year
+    return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d')}`;
   }
-
-  // For same year, always show the year for clarity
-  return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d, yyyy')}`;
+  // At least one date is not in the current year
+  return `${format(startDate, formatString)} - ${format(
+    endDate,
+    formatString
+  )}`;
 });
 
 const activeDateRange = computed(
@@ -57,46 +47,17 @@ const openDatePicker = () => {
 </script>
 
 <template>
-  <div class="inline-flex items-center gap-1">
-    <button
-      class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-n-alpha-2 hover:bg-n-alpha-1 active:bg-n-alpha-1 flex-shrink-0"
-      @click="openDatePicker"
-    >
-      <Icon
-        icon="i-lucide-calendar-range"
-        class="text-n-slate-11 size-3.5 flex-shrink-0"
-      />
-      <span class="text-sm font-medium text-n-slate-12 truncate">
-        {{ navigationLabel || $t(activeDateRange) }}
-      </span>
-      <span class="text-sm font-medium text-n-slate-11 truncate">
-        {{ formatDateRange }}
-      </span>
-      <Icon
-        icon="i-lucide-chevron-down"
-        class="text-n-slate-12 size-4 flex-shrink-0"
-      />
-    </button>
-    <NextButton
-      v-if="showMonthNavigation"
-      v-tooltip.top="$t('DATE_PICKER.PREVIOUS_PERIOD')"
-      slate
-      faded
-      sm
-      icon="i-lucide-chevron-left"
-      class="rtl:rotate-180"
-      @click="emit('navigateMonth', 'prev')"
-    />
-    <NextButton
-      v-if="showMonthNavigation"
-      v-tooltip.top="$t('DATE_PICKER.NEXT_PERIOD')"
-      slate
-      faded
-      sm
-      icon="i-lucide-chevron-right"
-      class="rtl:rotate-180"
-      :disabled="!canNavigateNext"
-      @click="emit('navigateMonth', 'next')"
-    />
-  </div>
+  <button
+    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-n-alpha-2 hover:bg-n-alpha-1 active:bg-n-alpha-1"
+    @click="openDatePicker"
+  >
+    <fluent-icon class="text-n-slate-12" icon="calendar" size="16" />
+    <span class="text-sm font-medium text-n-slate-12">
+      {{ $t(activeDateRange) }}
+    </span>
+    <span class="text-sm font-medium text-n-slate-11">
+      {{ formatDateRange }}
+    </span>
+    <fluent-icon class="text-n-slate-12" icon="chevron-down" size="14" />
+  </button>
 </template>

app/javascript/dashboard/components/ui/DatePicker/helpers/DatePickerHelper.js

@@ -10,8 +10,6 @@ import {
   isSameMonth,
   format,
   startOfWeek,
-  endOfWeek,
-  addWeeks,
   addDays,
   eachDayOfInterval,
   endOfMonth,
@@ -36,27 +34,13 @@ export const dateRanges = [
   {
     label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_3_MONTHS',
     value: 'last3months',
-    separator: true,
   },
   {
     label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_6_MONTHS',
     value: 'last6months',
   },
   { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_YEAR', value: 'lastYear' },
-  {
-    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.THIS_WEEK',
-    value: 'thisWeek',
-    separator: true,
-  },
-  {
-    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.MONTH_TO_DATE',
-    value: 'monthToDate',
-  },
-  {
-    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.CUSTOM_RANGE',
-    value: 'custom',
-    separator: true,
-  },
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.CUSTOM_RANGE', value: 'custom' },
 ];
 
 export const DATE_RANGE_TYPES = {
@@ -65,8 +49,6 @@ export const DATE_RANGE_TYPES = {
   LAST_3_MONTHS: 'last3months',
   LAST_6_MONTHS: 'last6months',
   LAST_YEAR: 'lastYear',
-  THIS_WEEK: 'thisWeek',
-  MONTH_TO_DATE: 'monthToDate',
   CUSTOM_RANGE: 'custom',
 };
 
@@ -228,14 +210,6 @@ export const getActiveDateRange = (range, currentDate) => {
       start: startOfDay(subMonths(currentDate, 12)),
       end: endOfDay(currentDate),
     }),
-    thisWeek: () => ({
-      start: startOfDay(startOfWeek(currentDate, { weekStartsOn: 1 })),
-      end: endOfDay(currentDate),
-    }),
-    monthToDate: () => ({
-      start: startOfDay(startOfMonth(currentDate)),
-      end: endOfDay(currentDate),
-    }),
     custom: () => ({ start: currentDate, end: currentDate }),
   };
 
@@ -243,48 +217,3 @@ export const getActiveDateRange = (range, currentDate) => {
     ranges[range] || (() => ({ start: currentDate, end: currentDate }))
   )();
 };
-
-export const isNavigableRange = rangeType =>
-  rangeType === DATE_RANGE_TYPES.MONTH_TO_DATE ||
-  rangeType === DATE_RANGE_TYPES.THIS_WEEK;
-
-const WEEK_START = 1; // Monday
-
-const getWeekRangeAtOffset = (offset, currentDate) => {
-  if (offset === 0) {
-    return {
-      start: startOfDay(startOfWeek(currentDate, { weekStartsOn: WEEK_START })),
-      end: endOfDay(currentDate),
-    };
-  }
-  const targetWeek = addWeeks(currentDate, offset);
-  return {
-    start: startOfDay(startOfWeek(targetWeek, { weekStartsOn: WEEK_START })),
-    end: endOfDay(endOfWeek(targetWeek, { weekStartsOn: WEEK_START })),
-  };
-};
-
-const getMonthRangeAtOffset = (offset, currentDate) => {
-  if (offset === 0) {
-    return {
-      start: startOfDay(startOfMonth(currentDate)),
-      end: endOfDay(currentDate),
-    };
-  }
-  const targetMonth = addMonths(currentDate, offset);
-  return {
-    start: startOfDay(startOfMonth(targetMonth)),
-    end: endOfDay(endOfMonth(targetMonth)),
-  };
-};
-
-export const getRangeAtOffset = (
-  rangeType,
-  offset,
-  currentDate = new Date()
-) => {
-  if (rangeType === DATE_RANGE_TYPES.THIS_WEEK) {
-    return getWeekRangeAtOffset(offset, currentDate);
-  }
-  return getMonthRangeAtOffset(offset, currentDate);
-};

app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue

@@ -34,8 +34,8 @@ const value = defineModel({
       <input
         v-model="value"
         :placeholder="inputPlaceholder"
-        type="search"
-        class="w-full mb-0 text-sm !outline-0 !outline-none bg-transparent text-n-slate-12 placeholder:text-n-slate-10 reset-base"
+        type="text"
+        class="w-full mb-0 text-sm !outline-0 bg-transparent text-n-slate-12 placeholder:text-n-slate-10 reset-base"
       />
     </div>
     <!-- Clear filter button -->

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
@@ -14,6 +15,8 @@ import PriorityMark from './PriorityMark.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
 import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
 import VoiceCallStatus from './VoiceCallStatus.vue';
+import ConversationSummary from './ConversationSummary.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 const props = defineProps({
   activeLabel: { type: String, default: '' },
@@ -46,8 +49,10 @@ const emit = defineEmits([
 
 const router = useRouter();
 const store = useStore();
+const { t } = useI18n();
 
 const hovered = ref(false);
+const summaryRef = ref(null);
 const showContextMenu = ref(false);
 const contextMenu = ref({
   x: null,
@@ -344,12 +349,15 @@ const deleteConversation = () => {
         class="absolute flex flex-col ltr:right-3 rtl:left-3"
         :class="showMetaSection ? 'top-8' : 'top-4'"
       >
-        <span class="ml-auto font-normal leading-4 text-xxs">
-          <TimeAgo
-            :last-activity-timestamp="chat.timestamp"
-            :created-at-timestamp="chat.created_at"
-          />
-        </span>
+        <div class="flex items-center gap-1 ml-auto">
+          <ConversationSummary ref="summaryRef" :chat="chat" />
+          <span class="font-normal leading-4 text-xxs">
+            <TimeAgo
+              :last-activity-timestamp="chat.timestamp"
+              :created-at-timestamp="chat.created_at"
+            />
+          </span>
+        </div>
         <span
           class="shadow-lg rounded-full text-xxs font-semibold h-4 leading-4 ltr:ml-auto rtl:mr-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-n-teal-9"
           :class="hasUnread ? 'block' : 'hidden'"
@@ -366,6 +374,26 @@ const deleteConversation = () => {
           <SLACardLabel :chat="chat" class="ltr:mr-1 rtl:ml-1" />
         </template>
       </CardLabels>
+      <!-- Expanded Summary Section -->
+      <div
+        v-if="summaryRef?.isExpanded"
+        class="mt-2 mx-2 mb-1 p-3 bg-n-alpha-1 dark:bg-n-alpha-2 rounded-lg"
+      >
+        <div v-if="summaryRef?.isLoading" class="flex items-center gap-2">
+          <Spinner :size="16" class="text-n-slate-10" />
+          <span class="text-xs text-n-slate-11">
+            {{ t('CHAT_LIST.SUMMARY.LOADING') }}
+          </span>
+        </div>
+        <div v-else-if="summaryRef?.error" class="text-xs text-n-ruby-11">
+          {{ summaryRef.error }}
+        </div>
+        <div
+          v-else-if="summaryRef?.formattedSummary"
+          class="text-xs text-n-slate-11 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:my-0.5 [&_p]:my-1 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_strong]:text-n-slate-12"
+          v-html="summaryRef.formattedSummary"
+        />
+      </div>
     </div>
     <ContextMenu
       v-if="showContextMenu"

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

@@ -0,0 +1,116 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import TasksAPI from 'dashboard/api/captain/tasks';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useTrack } from 'dashboard/composables';
+import { CAPTAIN_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+const props = defineProps({
+  chat: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+const { isCloudFeatureEnabled } = useAccount();
+const { formatMessage } = useMessageFormatter();
+
+const isExpanded = ref(false);
+const isLoading = ref(false);
+const error = ref('');
+
+const captainTasksEnabled = computed(() => {
+  return isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN_TASKS);
+});
+
+const cachedSummary = computed(() => props.chat?.cached_summary || '');
+const cachedSummaryAt = computed(() => props.chat?.cached_summary_at || 0);
+const lastActivityAt = computed(() => props.chat?.last_activity_at || 0);
+
+const isStale = computed(() => {
+  if (!cachedSummaryAt.value) return true;
+  return lastActivityAt.value > cachedSummaryAt.value;
+});
+
+const formattedSummary = computed(() => {
+  return cachedSummary.value ? formatMessage(cachedSummary.value) : '';
+});
+
+const fetchSummary = async () => {
+  isLoading.value = true;
+  error.value = '';
+  try {
+    const result = await TasksAPI.summarize(props.chat.id, {
+      forceRegenerate: false,
+    });
+    const {
+      data: { message: generatedSummary },
+    } = result;
+
+    if (generatedSummary) {
+      store.dispatch('updateConversationCachedSummary', {
+        conversationId: props.chat.id,
+        cachedSummary: generatedSummary,
+        cachedSummaryAt: Math.floor(Date.now() / 1000),
+      });
+    }
+  } catch (e) {
+    if (e.name !== 'AbortError' && e.name !== 'CanceledError') {
+      error.value = e.response?.data?.error || t('CHAT_LIST.SUMMARY.ERROR');
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const toggleSummary = async () => {
+  if (isExpanded.value) {
+    isExpanded.value = false;
+    return;
+  }
+  isExpanded.value = true;
+  useTrack(CAPTAIN_EVENTS.SUMMARIZE_USED, {
+    conversationId: props.chat.id,
+    uiFrom: 'conversation_list',
+  });
+  // Only fetch if no cached summary
+  if (!cachedSummary.value && !error.value) {
+    await fetchSummary();
+  }
+};
+
+const onButtonClick = e => {
+  e.stopPropagation();
+  toggleSummary();
+};
+
+defineExpose({
+  isExpanded,
+  isLoading,
+  error,
+  formattedSummary,
+  captainTasksEnabled,
+  isStale,
+});
+</script>
+
+<template>
+  <Button
+    v-if="captainTasksEnabled"
+    icon="i-material-symbols-auto-awesome"
+    slate
+    ghost
+    xs
+    :title="t('CHAT_LIST.SUMMARY.TITLE')"
+    class="opacity-0 group-hover:opacity-100 transition-opacity"
+    :class="{ '!opacity-100': isExpanded }"
+    @click="onButtonClick"
+  />
+</template>

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

@@ -31,10 +31,7 @@ const assignedAgent = computed({
   },
   set(agent) {
     const agentId = agent ? agent.id : null;
-    store.dispatch('setCurrentChatAssignee', {
-      conversationId: currentChat.value?.id,
-      assignee: agent,
-    });
+    store.dispatch('setCurrentChatAssignee', agent);
     store.dispatch('assignAgent', {
       conversationId: currentChat.value?.id,
       agentId,

app/javascript/dashboard/composables/useCopilotReply.js

@@ -34,11 +34,21 @@ function getEventPrefix(action) {
  * @param {string} action - The action type
  * @param {number} conversationId - The conversation ID
  * @param {number} [followUpCount] - Optional follow-up count
+ * @param {string} [uiFrom] - Optional UI source identifier
  * @returns {Object} The payload object
  */
-function buildPayload(action, conversationId, followUpCount = undefined) {
+function buildPayload(
+  action,
+  conversationId,
+  followUpCount = undefined,
+  uiFrom = undefined
+) {
   const payload = { conversationId };
 
+  if (uiFrom) {
+    payload.uiFrom = uiFrom;
+  }
+
   // Add operation for rewrite actions
   if (REWRITE_ACTIONS.includes(action)) {
     payload.operation = action;
@@ -75,6 +85,7 @@ export function useCopilotReply() {
   const trackedConversationId = ref(null);
 
   const conversationId = computed(() => currentChat.value?.id);
+  const uiFrom = 'editor';
 
   const isActive = computed(() => showEditor.value || isGenerating.value);
   const isButtonDisabled = computed(
@@ -97,7 +108,8 @@ export function useCopilotReply() {
         buildPayload(
           currentAction.value,
           trackedConversationId.value,
-          followUpCount.value
+          followUpCount.value,
+          uiFrom
         )
       );
     }
@@ -168,7 +180,7 @@ export function useCopilotReply() {
           const eventKey = `${getEventPrefix(action)}_USED`;
           useTrack(
             CAPTAIN_EVENTS[eventKey],
-            buildPayload(action, trackedConversationId.value)
+            buildPayload(action, trackedConversationId.value, undefined, uiFrom)
           );
         }
         isGenerating.value = false;
@@ -194,6 +206,7 @@ export function useCopilotReply() {
     // Track follow-up sent event
     useTrack(CAPTAIN_EVENTS.FOLLOW_UP_SENT, {
       conversationId: trackedConversationId.value,
+      uiFrom,
     });
     followUpCount.value += 1;
 
@@ -237,7 +250,8 @@ export function useCopilotReply() {
         buildPayload(
           currentAction.value,
           trackedConversationId.value,
-          followUpCount.value
+          followUpCount.value,
+          uiFrom
         )
       );
     }

app/javascript/dashboard/composables/useUISettings.js

@@ -2,6 +2,7 @@ import { computed } from 'vue';
 import { useStore, useStoreGetters } from 'dashboard/composables/store';
 
 export const DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER = Object.freeze([
+  { name: 'conversation_summary' },
   { name: 'conversation_actions' },
   { name: 'macros' },
   { name: 'conversation_info' },

app/javascript/dashboard/featureFlags.js

@@ -2,7 +2,6 @@ export const FEATURE_FLAGS = {
   AGENT_BOTS: 'agent_bots',
   AGENT_MANAGEMENT: 'agent_management',
   ASSIGNMENT_V2: 'assignment_v2',
-  ADVANCED_ASSIGNMENT: 'advanced_assignment',
   AUTO_RESOLVE_CONVERSATIONS: 'auto_resolve_conversations',
   AUTOMATIONS: 'automations',
   CAMPAIGNS: 'campaigns',
@@ -57,5 +56,4 @@ export const PREMIUM_FEATURES = [
   FEATURE_FLAGS.HELP_CENTER,
   FEATURE_FLAGS.SAML,
   FEATURE_FLAGS.CONVERSATION_REQUIRED_ATTRIBUTES,
-  FEATURE_FLAGS.ADVANCED_ASSIGNMENT,
 ];

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

@@ -137,6 +137,11 @@
     "HIDE_QUOTED_TEXT": "Hide Quoted Text",
     "SHOW_QUOTED_TEXT": "Show Quoted Text",
     "MESSAGE_READ": "Read",
-    "SENDING": "Sending"
+    "SENDING": "Sending",
+    "SUMMARY": {
+      "TITLE": "Generate Summary",
+      "LOADING": "Generating summary...",
+      "ERROR": "Failed to generate summary"
+    }
   }
 }

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

@@ -349,6 +349,7 @@
       "CONVERSATION_ACTIONS": "Conversation Actions",
       "CONVERSATION_LABELS": "Conversation Labels",
       "CONVERSATION_INFO": "Conversation Information",
+      "CONVERSATION_SUMMARY": "AI Summary",
       "CONTACT_NOTES": "Contact Notes",
       "CONTACT_ATTRIBUTES": "Contact Attributes",
       "PREVIOUS_CONVERSATION": "Previous Conversations",
@@ -356,6 +357,16 @@
       "LINEAR_ISSUES": "Linked Linear Issues",
       "SHOPIFY_ORDERS": "Shopify Orders"
     },
+    "SUMMARY": {
+      "DESCRIPTION": "Generate an AI-powered summary of this conversation",
+      "GENERATE": "Generate Summary",
+      "REGENERATE": "Regenerate",
+      "REFRESH": "Refresh",
+      "RETRY": "Retry",
+      "STALE": "Summary may be outdated",
+      "ERROR": "Failed to generate summary",
+      "EMPTY": "No summary available"
+    },
     "SHOPIFY": {
       "ORDER_ID": "Order #{id}",
       "ERROR": "Error loading orders",

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

@@ -1,8 +1,5 @@
 {
   "DATE_PICKER": {
-    "PREVIOUS_PERIOD": "Previous period",
-    "NEXT_PERIOD": "Next period",
-    "WEEK_NUMBER": "Week #{weekNumber}",
     "APPLY_BUTTON": "Apply",
     "CLEAR_BUTTON": "Clear",
     "DATE_RANGE_INPUT": {
@@ -16,8 +13,6 @@
       "LAST_3_MONTHS": "Last 3 months",
       "LAST_6_MONTHS": "Last 6 months",
       "LAST_YEAR": "Last year",
-      "THIS_WEEK": "This week",
-      "MONTH_TO_DATE": "This month",
       "CUSTOM_RANGE": "Custom date range"
     }
   }

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

@@ -766,53 +766,6 @@
       "MAX_ASSIGNMENT_LIMIT_RANGE_ERROR": "Please enter a value greater than 0",
       "MAX_ASSIGNMENT_LIMIT_SUB_TEXT": "Limit the maximum number of conversations from this inbox that can be auto assigned to an agent"
     },
-    "ASSIGNMENT": {
-      "TITLE": "Conversation Assignment",
-      "DESCRIPTION": "Automatically assign incoming conversations to available agents based on assignment policies",
-      "ENABLE_AUTO_ASSIGNMENT": "Enable automatic conversation assignment",
-      "DEFAULT_RULES_TITLE": "Default assignment rules",
-      "DEFAULT_RULES_DESCRIPTION": "Using the default assignment behavior for all conversations",
-      "DEFAULT_RULE_1": "Earliest created conversations first",
-      "DEFAULT_RULE_2": "Round robin distribution",
-      "CUSTOMIZE_WITH_POLICY": "Customize with assignment policy",
-      "USING_POLICY": "Using custom assignment policy for this inbox",
-      "CUSTOMIZE_POLICY": "Customize with assignment policy",
-      "DELETE_POLICY": "Delete policy",
-      "POLICY_LABEL": "Assignment policy",
-      "ASSIGNMENT_ORDER_LABEL": "Assignment Order",
-      "ASSIGNMENT_METHOD_LABEL": "Assignment Method",
-      "POLICY_STATUS": {
-        "ACTIVE": "Active",
-        "INACTIVE": "Inactive"
-      },
-      "PRIORITY": {
-        "EARLIEST_CREATED": "Earliest created",
-        "LONGEST_WAITING": "Longest waiting"
-      },
-      "METHOD": {
-        "ROUND_ROBIN": "Round robin",
-        "BALANCED": "Balanced assignment"
-      },
-      "UPGRADE_PROMPT": "Custom assignment policies are available on the Business plan",
-      "UPGRADE_TO_BUSINESS": "Upgrade to Business",
-      "DEFAULT_POLICY_LINKED": "Default policy linked",
-      "DEFAULT_POLICY_DESCRIPTION": "Link a custom assignment policy to customize how conversations are assigned to agents in this inbox.",
-      "LINK_EXISTING_POLICY": "Link existing policy",
-      "CREATE_NEW_POLICY": "Create new policy",
-      "NO_POLICIES": "No assignment policies found",
-      "VIEW_ALL_POLICIES": "View all policies",
-      "CURRENT_BEHAVIOR": "Currently using default assignment behavior:",
-      "LINK_SUCCESS": "Assignment policy linked successfully",
-      "LINK_ERROR": "Failed to link assignment policy"
-    },
-    "ASSIGNMENT_POLICY": {
-      "DELETE_CONFIRM_TITLE": "Delete assignment policy?",
-      "DELETE_CONFIRM_MESSAGE": "Are you sure you want to remove this assignment policy from this inbox? The inbox will revert to default assignment rules.",
-      "CANCEL": "Cancel",
-      "CONFIRM_DELETE": "Delete",
-      "DELETE_SUCCESS": "Assignment policy removed successfully",
-      "DELETE_ERROR": "Failed to remove assignment policy"
-    },
     "FACEBOOK_REAUTHORIZE": {
       "TITLE": "Reauthorize",
       "SUBTITLE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",

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

@@ -128,16 +128,11 @@
   },
   "AGENT_REPORTS": {
     "HEADER": "Agents Overview",
-    "DESCRIPTION": "Easily track agent performance with key metrics such as conversations, response times, resolution times, and resolved cases. Click an agent's name to learn more.",
+    "DESCRIPTION": "Easily track agent performance with key metrics such as conversations, response times, resolution times, and resolved cases. Click an agent’s name to learn more.",
     "LOADING_CHART": "Loading chart data...",
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
     "DOWNLOAD_AGENT_REPORTS": "Download agent reports",
     "FILTER_DROPDOWN_LABEL": "Select Agent",
-    "FILTERS": {
-      "INPUT_PLACEHOLDER": {
-        "AGENTS": "Search agents"
-      }
-    },
     "METRICS": {
       "CONVERSATIONS": {
         "NAME": "Conversations",
@@ -206,11 +201,6 @@
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
     "DOWNLOAD_LABEL_REPORTS": "Download label reports",
     "FILTER_DROPDOWN_LABEL": "Select Label",
-    "FILTERS": {
-      "INPUT_PLACEHOLDER": {
-        "LABELS": "Search labels"
-      }
-    },
     "METRICS": {
       "CONVERSATIONS": {
         "NAME": "Conversations",
@@ -281,11 +271,6 @@
     "FILTER_DROPDOWN_LABEL": "Select Inbox",
     "ALL_INBOXES": "All Inboxes",
     "SEARCH_INBOX": "Search Inbox",
-    "FILTERS": {
-      "INPUT_PLACEHOLDER": {
-        "INBOXES": "Search inboxes"
-      }
-    },
     "METRICS": {
       "CONVERSATIONS": {
         "NAME": "Conversations",
@@ -349,19 +334,11 @@
   },
   "TEAM_REPORTS": {
     "HEADER": "Team Overview",
-    "DESCRIPTION": "Get a snapshot of your team's performance with essential metrics, including conversations, response times, resolution times, and resolved cases. Click a team name for more details.",
+    "DESCRIPTION": "Get a snapshot of your team’s performance with essential metrics, including conversations, response times, resolution times, and resolved cases. Click a team name for more details.",
     "LOADING_CHART": "Loading chart data...",
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
     "DOWNLOAD_TEAM_REPORTS": "Download team reports",
     "FILTER_DROPDOWN_LABEL": "Select Team",
-    "FILTERS": {
-      "ADD_FILTER": "Add filter",
-      "CLEAR_ALL": "Clear all",
-      "NO_FILTER": "No filters available",
-      "INPUT_PLACEHOLDER": {
-        "TEAMS": "Search teams"
-      }
-    },
     "METRICS": {
       "CONVERSATIONS": {
         "NAME": "Conversations",

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

@@ -694,8 +694,7 @@
         "CREATE_BUTTON": "Create policy",
         "API": {
           "SUCCESS_MESSAGE": "Assignment policy created successfully",
-          "ERROR_MESSAGE": "Failed to create assignment policy",
-          "INBOX_LINKED": "Inbox has been linked to the policy"
+          "ERROR_MESSAGE": "Failed to create assignment policy"
         }
       },
       "EDIT": {
@@ -709,12 +708,6 @@
           "CONFIRM_BUTTON_LABEL": "Continue",
           "CANCEL_BUTTON_LABEL": "Cancel"
         },
-        "INBOX_LINK_PROMPT": {
-          "TITLE": "Link inbox to policy",
-          "DESCRIPTION": "Would you like to link this inbox to the assignment policy?",
-          "LINK_BUTTON": "Link inbox",
-          "CANCEL_BUTTON": "Skip"
-        },
         "API": {
           "SUCCESS_MESSAGE": "Assignment policy updated successfully",
           "ERROR_MESSAGE": "Failed to update assignment policy"
@@ -753,9 +746,7 @@
           },
           "BALANCED": {
             "LABEL": "Balanced",
-            "DESCRIPTION": "Assign conversations based on available capacity.",
-            "PREMIUM_MESSAGE": "Upgrade to access balanced assignment and agent capacity management.",
-            "PREMIUM_BADGE": "Premium"
+            "DESCRIPTION": "Assign conversations based on available capacity."
           }
         },
         "ASSIGNMENT_PRIORITY": {
@@ -841,20 +832,6 @@
             "SUCCESS_MESSAGE": "Agent removed from policy successfully",
             "ERROR_MESSAGE": "Failed to remove agent from policy"
           }
-        },
-        "INBOX_LIMIT_API": {
-          "ADD": {
-            "SUCCESS_MESSAGE": "Inbox limit added successfully",
-            "ERROR_MESSAGE": "Failed to add inbox limit"
-          },
-          "UPDATE": {
-            "SUCCESS_MESSAGE": "Inbox limit updated successfully",
-            "ERROR_MESSAGE": "Failed to update inbox limit"
-          },
-          "DELETE": {
-            "SUCCESS_MESSAGE": "Inbox limit deleted successfully",
-            "ERROR_MESSAGE": "Failed to delete inbox limit"
-          }
         }
       },
       "FORM": {

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

@@ -13,6 +13,7 @@ import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
 import ContactConversations from './ContactConversations.vue';
 import ConversationAction from './ConversationAction.vue';
 import ConversationParticipant from './ConversationParticipant.vue';
+import ConversationSummary from './ConversationSummary.vue';
 import ContactInfo from './contact/ContactInfo.vue';
 import ContactNotes from './contact/ContactNotes.vue';
 import ConversationInfo from './ConversationInfo.vue';
@@ -44,6 +45,7 @@ const {
 
 const dragging = ref(false);
 const conversationSidebarItems = ref([]);
+const summaryRef = ref(null);
 
 const shopifyIntegration = useFunctionGetter(
   'integrations/getIntegration',
@@ -60,6 +62,10 @@ const isLinearFeatureEnabled = computed(() =>
   isCloudFeatureEnabled(FEATURE_FLAGS.LINEAR)
 );
 
+const isCaptainTasksEnabled = computed(() =>
+  isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN_TASKS)
+);
+
 const linearIntegration = useFunctionGetter(
   'integrations/getIntegration',
   'linear'
@@ -150,7 +156,31 @@ onMounted(() => {
       >
         <template #item="{ element }">
           <div
-            v-if="element.name === 'conversation_actions'"
+            v-if="
+              element.name === 'conversation_summary' && isCaptainTasksEnabled
+            "
+          >
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_SUMMARY')"
+              :is-open="isContactSidebarItemOpen('is_conv_summary_open')"
+              compact
+              @toggle="
+                value => {
+                  toggleSidebarUIState('is_conv_summary_open', value);
+                  if (value && summaryRef) {
+                    summaryRef.fetchSummary();
+                  }
+                }
+              "
+            >
+              <ConversationSummary
+                ref="summaryRef"
+                :conversation-id="conversationId"
+              />
+            </AccordionItem>
+          </div>
+          <div
+            v-else-if="element.name === 'conversation_actions'"
             class="conversation--actions"
           >
             <AccordionItem

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

@@ -85,10 +85,7 @@ export default {
       },
       set(agent) {
         const agentId = agent ? agent.id : null;
-        this.$store.dispatch('setCurrentChatAssignee', {
-          conversationId: this.currentChat.id,
-          assignee: agent,
-        });
+        this.$store.dispatch('setCurrentChatAssignee', agent);
         this.$store
           .dispatch('assignAgent', {
             conversationId: this.currentChat.id,

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

@@ -0,0 +1,179 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import TasksAPI from 'dashboard/api/captain/tasks';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import { useTrack } from 'dashboard/composables';
+import { CAPTAIN_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+const { isCloudFeatureEnabled } = useAccount();
+const { formatMessage } = useMessageFormatter();
+
+const currentChat = useMapGetter('getSelectedChat');
+const isLoading = ref(false);
+const error = ref('');
+
+const captainTasksEnabled = computed(() => {
+  return isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN_TASKS);
+});
+
+const cachedSummary = computed(() => currentChat.value?.cached_summary || '');
+const cachedSummaryAt = computed(
+  () => currentChat.value?.cached_summary_at || 0
+);
+const lastActivityAt = computed(() => currentChat.value?.last_activity_at || 0);
+const uiFrom = 'conversation_sidebar';
+
+const isStale = computed(() => {
+  if (!cachedSummaryAt.value) return true;
+  return lastActivityAt.value > cachedSummaryAt.value;
+});
+
+const hasSummary = computed(() => !!cachedSummary.value);
+
+const formattedSummary = computed(() => {
+  return cachedSummary.value ? formatMessage(cachedSummary.value) : '';
+});
+
+const fetchSummary = async (forceRegenerate = false) => {
+  if (!captainTasksEnabled.value) return;
+
+  isLoading.value = true;
+  error.value = '';
+
+  try {
+    const result = await TasksAPI.summarize(props.conversationId, {
+      forceRegenerate,
+    });
+    const {
+      data: { message: generatedSummary },
+    } = result;
+
+    if (generatedSummary) {
+      store.dispatch('updateConversationCachedSummary', {
+        conversationId: currentChat.value.id,
+        cachedSummary: generatedSummary,
+        cachedSummaryAt: Math.floor(Date.now() / 1000),
+      });
+    }
+  } catch (e) {
+    if (e.name !== 'AbortError' && e.name !== 'CanceledError') {
+      error.value =
+        e.response?.data?.error || t('CONVERSATION_SIDEBAR.SUMMARY.ERROR');
+    }
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const trackSummary = action => {
+  useTrack(CAPTAIN_EVENTS.SUMMARIZE_USED, {
+    conversationId: props.conversationId,
+    uiFrom,
+    action,
+  });
+};
+
+const generateSummary = () => {
+  trackSummary('generate');
+  return fetchSummary(false);
+};
+
+const regenerate = () => {
+  trackSummary('regenerate');
+  return fetchSummary(true);
+};
+
+const retryGenerate = () => {
+  trackSummary('retry');
+  return fetchSummary(true);
+};
+
+watch(
+  () => props.conversationId,
+  () => {
+    error.value = '';
+  }
+);
+
+defineExpose({
+  fetchSummary,
+  captainTasksEnabled,
+  cachedSummary,
+  isStale,
+});
+</script>
+
+<template>
+  <div v-if="captainTasksEnabled" class="p-3">
+    <div v-if="isLoading" class="flex items-center justify-center py-4">
+      <Spinner :size="20" class="text-n-slate-10" />
+    </div>
+
+    <div v-else-if="error" class="text-sm text-n-ruby-11">
+      {{ error }}
+      <Button
+        :label="t('CONVERSATION_SIDEBAR.SUMMARY.RETRY')"
+        size="sm"
+        variant="link"
+        class="ml-2"
+        @click="retryGenerate"
+      />
+    </div>
+
+    <div v-else-if="!hasSummary" class="flex flex-col items-center gap-3 py-2">
+      <p class="text-sm text-n-slate-11 text-center mb-0">
+        {{ t('CONVERSATION_SIDEBAR.SUMMARY.DESCRIPTION') }}
+      </p>
+      <Button
+        :label="t('CONVERSATION_SIDEBAR.SUMMARY.GENERATE')"
+        icon="i-material-symbols-auto-awesome"
+        size="sm"
+        @click="generateSummary"
+      />
+    </div>
+
+    <template v-else>
+      <div
+        v-if="isStale"
+        class="flex items-center gap-2 mb-2 text-xs text-n-amber-11"
+      >
+        <span>{{ t('CONVERSATION_SIDEBAR.SUMMARY.STALE') }}</span>
+        <Button
+          :label="t('CONVERSATION_SIDEBAR.SUMMARY.REFRESH')"
+          size="xs"
+          variant="link"
+          @click="regenerate"
+        />
+      </div>
+      <div
+        class="summary-content text-sm text-n-slate-11 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:my-1 [&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_strong]:text-n-slate-12"
+        v-html="formattedSummary"
+      />
+      <div class="mt-3 pt-3 border-t border-n-weak">
+        <Button
+          :label="t('CONVERSATION_SIDEBAR.SUMMARY.REGENERATE')"
+          icon="i-lucide-refresh-cw"
+          size="sm"
+          variant="faded"
+          color="slate"
+          @click="regenerate"
+        />
+      </div>
+    </template>
+  </div>
+</template>

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

@@ -1,81 +1,54 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter, useRoute } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store';
+import { useRouter } from 'vue-router';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import SettingsLayout from '../SettingsLayout.vue';
 import AssignmentCard from 'dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue';
 
 const router = useRouter();
-const route = useRoute();
 const { t } = useI18n();
 
-const accountId = computed(() => Number(route.params.accountId));
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const agentAssignments = computed(() => {
-  const assignments = [
-    {
-      key: 'agent_assignment_policy_index',
-      title: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.TITLE'),
-      description: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.DESCRIPTION'),
-      features: [
-        {
-          icon: 'i-lucide-circle-fading-arrow-up',
-          label: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.FEATURES.0'),
-        },
-        {
-          icon: 'i-lucide-scale',
-          label: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.FEATURES.1'),
-        },
-        {
-          icon: 'i-lucide-inbox',
-          label: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.FEATURES.2'),
-        },
-      ],
-    },
-  ];
-
-  // Only show Agent Capacity if BOTH assignment_v2 AND advanced_assignment are enabled
-  // advanced_assignment identifies premium users
-  const hasAssignmentV2 = isFeatureEnabledonAccount.value(
-    accountId.value,
-    'assignment_v2'
-  );
-  const hasAdvancedAssignment = isFeatureEnabledonAccount.value(
-    accountId.value,
-    'advanced_assignment'
-  );
-
-  if (hasAssignmentV2 && hasAdvancedAssignment) {
-    assignments.push({
-      key: 'agent_capacity_policy_index',
-      title: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.TITLE'),
-      description: t(
-        'ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.DESCRIPTION'
-      ),
-      features: [
-        {
-          icon: 'i-lucide-glass-water',
-          label: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.FEATURES.0'),
-        },
-        {
-          icon: 'i-lucide-circle-minus',
-          label: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.FEATURES.1'),
-        },
-        {
-          icon: 'i-lucide-users-round',
-          label: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.FEATURES.2'),
-        },
-      ],
-    });
-  }
-
-  return assignments;
-});
+const agentAssignments = computed(() => [
+  {
+    key: 'agent_assignment_policy_index',
+    title: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.TITLE'),
+    description: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.DESCRIPTION'),
+    features: [
+      {
+        icon: 'i-lucide-circle-fading-arrow-up',
+        label: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.FEATURES.0'),
+      },
+      {
+        icon: 'i-lucide-scale',
+        label: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.FEATURES.1'),
+      },
+      {
+        icon: 'i-lucide-inbox',
+        label: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.FEATURES.2'),
+      },
+    ],
+  },
+  {
+    key: 'agent_capacity_policy_index',
+    title: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.TITLE'),
+    description: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.DESCRIPTION'),
+    features: [
+      {
+        icon: 'i-lucide-glass-water',
+        label: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.FEATURES.0'),
+      },
+      {
+        icon: 'i-lucide-circle-minus',
+        label: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.FEATURES.1'),
+      },
+      {
+        icon: 'i-lucide-users-round',
+        label: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.FEATURES.2'),
+      },
+    ],
+  },
+]);
 
 const handleClick = key => {
   router.push({ name: key });

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

@@ -62,7 +62,7 @@ export default {
           name: 'agent_capacity_policy_index',
           component: AgentCapacityIndex,
           meta: {
-            featureFlag: FEATURE_FLAGS.ADVANCED_ASSIGNMENT,
+            featureFlag: FEATURE_FLAGS.ASSIGNMENT_V2,
             permissions: ['administrator'],
           },
         },
@@ -71,7 +71,7 @@ export default {
           name: 'agent_capacity_policy_create',
           component: AgentCapacityCreate,
           meta: {
-            featureFlag: FEATURE_FLAGS.ADVANCED_ASSIGNMENT,
+            featureFlag: FEATURE_FLAGS.ASSIGNMENT_V2,
             permissions: ['administrator'],
           },
         },
@@ -80,7 +80,7 @@ export default {
           name: 'agent_capacity_policy_edit',
           component: AgentCapacityEdit,
           meta: {
-            featureFlag: FEATURE_FLAGS.ADVANCED_ASSIGNMENT,
+            featureFlag: FEATURE_FLAGS.ASSIGNMENT_V2,
             permissions: ['administrator'],
           },
         },

app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentCreatePage.vue

@@ -2,14 +2,13 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useAlert } from 'dashboard/composables';
 
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
 import AssignmentPolicyForm from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue';
 
-const route = useRoute();
 const router = useRouter();
 const store = useStore();
 const { t } = useI18n();
@@ -17,50 +16,20 @@ const { t } = useI18n();
 const formRef = ref(null);
 const uiFlags = useMapGetter('assignmentPolicies/getUIFlags');
 
-const inboxIdFromQuery = computed(() => {
-  const id = route.query.inboxId;
-  return id ? Number(id) : null;
-});
-
-const breadcrumbItems = computed(() => {
-  if (inboxIdFromQuery.value) {
-    return [
-      {
-        label: t('INBOX_MGMT.SETTINGS'),
-        routeName: 'settings_inbox_show',
-        params: { inboxId: inboxIdFromQuery.value },
-      },
-      {
-        label: t(
-          'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.CREATE.HEADER.TITLE'
-        ),
-      },
-    ];
-  }
-  return [
-    {
-      label: t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.HEADER.TITLE'),
-      routeName: 'agent_assignment_policy_index',
-    },
-    {
-      label: t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.CREATE.HEADER.TITLE'),
-    },
-  ];
-});
+const breadcrumbItems = computed(() => [
+  {
+    label: t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.HEADER.TITLE'),
+    routeName: 'agent_assignment_policy_index',
+  },
+  {
+    label: t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.CREATE.HEADER.TITLE'),
+  },
+]);
 
 const handleBreadcrumbClick = item => {
-  if (item.params) {
-    const accountId = route.params.accountId;
-    const inboxId = item.params.inboxId;
-    // Navigate using explicit path to ensure tab parameter is included
-    router.push(
-      `/app/accounts/${accountId}/settings/inboxes/${inboxId}/collaborators`
-    );
-  } else {
-    router.push({
-      name: item.routeName,
-    });
-  }
+  router.push({
+    name: item.routeName,
+  });
 };
 
 const handleSubmit = async formState => {
@@ -76,8 +45,6 @@ const handleSubmit = async formState => {
       params: {
         id: policy.id,
       },
-      // Pass inboxId to edit page to show link prompt
-      query: inboxIdFromQuery.value ? { inboxId: inboxIdFromQuery.value } : {},
     });
   } catch (error) {
     useAlert(

app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue

@@ -14,7 +14,6 @@ import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
 import AssignmentPolicyForm from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue';
 import ConfirmInboxDialog from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/ConfirmInboxDialog.vue';
-import InboxLinkDialog from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/InboxLinkDialog.vue';
 
 const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY';
 
@@ -37,46 +36,13 @@ const confirmInboxDialogRef = ref(null);
 // Store the policy linked to the inbox when adding a new inbox
 const inboxLinkedPolicy = ref(null);
 
-// Inbox linking prompt from create flow
-const inboxIdFromQuery = computed(() => {
-  const id = route.query.inboxId;
-  return id ? Number(id) : null;
-});
-
-const suggestedInbox = computed(() => {
-  if (!inboxIdFromQuery.value || !inboxes.value) return null;
-  return inboxes.value.find(inbox => inbox.id === inboxIdFromQuery.value);
-});
-
-const isLinkingInbox = ref(false);
-
-const dismissInboxLinkPrompt = () => {
-  router.replace({
-    name: route.name,
-    params: route.params,
-    query: {},
-  });
-};
-
-const breadcrumbItems = computed(() => {
-  if (inboxIdFromQuery.value) {
-    return [
-      {
-        label: t('INBOX_MGMT.SETTINGS'),
-        routeName: 'settings_inbox_show',
-        params: { inboxId: inboxIdFromQuery.value },
-      },
-      { label: t(`${BASE_KEY}.EDIT.HEADER.TITLE`) },
-    ];
-  }
-  return [
-    {
-      label: t(`${BASE_KEY}.INDEX.HEADER.TITLE`),
-      routeName: 'agent_assignment_policy_index',
-    },
-    { label: t(`${BASE_KEY}.EDIT.HEADER.TITLE`) },
-  ];
-});
+const breadcrumbItems = computed(() => [
+  {
+    label: t(`${BASE_KEY}.INDEX.HEADER.TITLE`),
+    routeName: 'agent_assignment_policy_index',
+  },
+  { label: t(`${BASE_KEY}.EDIT.HEADER.TITLE`) },
+]);
 
 const buildInboxList = allInboxes =>
   allInboxes?.map(({ name, id, email, phoneNumber, channelType, medium }) => ({
@@ -100,48 +66,22 @@ const inboxList = computed(() =>
 const formData = computed(() => ({
   name: selectedPolicy.value?.name || '',
   description: selectedPolicy.value?.description || '',
-  enabled: true,
+  enabled: selectedPolicy.value?.enabled || false,
   assignmentOrder: selectedPolicy.value?.assignmentOrder || ROUND_ROBIN,
   conversationPriority:
     selectedPolicy.value?.conversationPriority || EARLIEST_CREATED,
-  fairDistributionLimit: selectedPolicy.value?.fairDistributionLimit || 100,
-  fairDistributionWindow: selectedPolicy.value?.fairDistributionWindow || 3600,
+  fairDistributionLimit: selectedPolicy.value?.fairDistributionLimit || 10,
+  fairDistributionWindow: selectedPolicy.value?.fairDistributionWindow || 60,
 }));
 
-const handleDeleteInbox = async inboxId => {
-  try {
-    await store.dispatch('assignmentPolicies/removeInboxPolicy', {
-      policyId: selectedPolicy.value?.id,
-      inboxId,
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_API.REMOVE.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_API.REMOVE.ERROR_MESSAGE`));
-  }
-};
-
-const handleBreadcrumbClick = ({ routeName, params }) => {
-  if (params) {
-    const accountId = route.params.accountId;
-    const inboxId = params.inboxId;
-    // Navigate using explicit path to ensure tab parameter is included
-    router.push(
-      `/app/accounts/${accountId}/settings/inboxes/${inboxId}/collaborators`
-    );
-  } else {
-    router.push({ name: routeName });
-  }
-};
-
-const handleNavigateToInbox = inbox => {
-  router.push({
-    name: 'settings_inbox_show',
-    params: {
-      accountId: route.params.accountId,
-      inboxId: inbox.id,
-    },
+const handleDeleteInbox = inboxId =>
+  store.dispatch('assignmentPolicies/removeInboxPolicy', {
+    policyId: selectedPolicy.value?.id,
+    inboxId,
   });
-};
+
+const handleBreadcrumbClick = ({ routeName }) =>
+  router.push({ name: routeName });
 
 const setInboxPolicy = async (inboxId, policyId) => {
   try {
@@ -182,26 +122,6 @@ const handleAddInbox = async inbox => {
   await setInboxPolicy(inbox?.id, selectedPolicy.value?.id);
 };
 
-const handleLinkSuggestedInbox = async () => {
-  if (!suggestedInbox.value) return;
-
-  isLinkingInbox.value = true;
-  const inbox = {
-    id: suggestedInbox.value.id,
-    name: suggestedInbox.value.name,
-  };
-
-  await handleAddInbox(inbox);
-
-  // Clear the query param after linking
-  router.replace({
-    name: route.name,
-    params: route.params,
-    query: {},
-  });
-  isLinkingInbox.value = false;
-};
-
 const handleConfirmAddInbox = async inboxId => {
   const success = await setInboxPolicy(inboxId, selectedPolicy.value?.id);
 
@@ -235,11 +155,6 @@ const handleSubmit = async formState => {
 const fetchPolicyData = async () => {
   if (!routeId.value) return;
 
-  // Fetch inboxes if not already loaded (needed for inbox link prompt)
-  if (!inboxes.value?.length) {
-    store.dispatch('inboxes/get');
-  }
-
   // Fetch policy if not available
   if (!selectedPolicy.value?.id)
     await store.dispatch('assignmentPolicies/show', routeId.value);
@@ -271,7 +186,6 @@ watch(routeId, fetchPolicyData, { immediate: true });
         @submit="handleSubmit"
         @add-inbox="handleAddInbox"
         @delete-inbox="handleDeleteInbox"
-        @navigate-to-inbox="handleNavigateToInbox"
       />
     </template>
 
@@ -279,12 +193,5 @@ watch(routeId, fetchPolicyData, { immediate: true });
       ref="confirmInboxDialogRef"
       @add="handleConfirmAddInbox"
     />
-
-    <InboxLinkDialog
-      :inbox="suggestedInbox"
-      :is-linking="isLinkingInbox"
-      @link="handleLinkSuggestedInbox"
-      @dismiss="dismissInboxLinkPrompt"
-    />
   </SettingsLayout>
 </template>

app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue

@@ -92,68 +92,43 @@ const formData = computed(() => ({
 const handleBreadcrumbClick = ({ routeName }) =>
   router.push({ name: routeName });
 
-const handleDeleteUser = async agentId => {
-  try {
-    await store.dispatch('agentCapacityPolicies/removeUser', {
-      policyId: selectedPolicyId.value,
-      userId: agentId,
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.AGENT_API.REMOVE.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.AGENT_API.REMOVE.ERROR_MESSAGE`));
-  }
+const handleDeleteUser = agentId => {
+  store.dispatch('agentCapacityPolicies/removeUser', {
+    policyId: selectedPolicyId.value,
+    userId: agentId,
+  });
 };
 
-const handleAddUser = async agent => {
-  try {
-    await store.dispatch('agentCapacityPolicies/addUser', {
-      policyId: selectedPolicyId.value,
-      userData: { id: agent.id, capacity: 20 },
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.AGENT_API.ADD.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.AGENT_API.ADD.ERROR_MESSAGE`));
-  }
+const handleAddUser = agent => {
+  store.dispatch('agentCapacityPolicies/addUser', {
+    policyId: selectedPolicyId.value,
+    userData: { id: agent.id, capacity: 20 },
+  });
 };
 
-const handleDeleteInboxLimit = async limitId => {
-  try {
-    await store.dispatch('agentCapacityPolicies/deleteInboxLimit', {
-      policyId: selectedPolicyId.value,
-      limitId,
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.DELETE.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.DELETE.ERROR_MESSAGE`));
-  }
+const handleDeleteInboxLimit = limitId => {
+  store.dispatch('agentCapacityPolicies/deleteInboxLimit', {
+    policyId: selectedPolicyId.value,
+    limitId,
+  });
 };
 
-const handleAddInboxLimit = async limit => {
-  try {
-    await store.dispatch('agentCapacityPolicies/createInboxLimit', {
-      policyId: selectedPolicyId.value,
-      limitData: {
-        inboxId: limit.inboxId,
-        conversationLimit: limit.conversationLimit,
-      },
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.ADD.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.ADD.ERROR_MESSAGE`));
-  }
+const handleAddInboxLimit = limit => {
+  store.dispatch('agentCapacityPolicies/createInboxLimit', {
+    policyId: selectedPolicyId.value,
+    limitData: {
+      inboxId: limit.inboxId,
+      conversationLimit: limit.conversationLimit,
+    },
+  });
 };
 
-const handleLimitChange = async limit => {
-  try {
-    await store.dispatch('agentCapacityPolicies/updateInboxLimit', {
-      policyId: selectedPolicyId.value,
-      limitId: limit.id,
-      limitData: { conversationLimit: limit.conversationLimit },
-    });
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.UPDATE.SUCCESS_MESSAGE`));
-  } catch {
-    useAlert(t(`${BASE_KEY}.EDIT.INBOX_LIMIT_API.UPDATE.ERROR_MESSAGE`));
-  }
+const handleLimitChange = limit => {
+  store.dispatch('agentCapacityPolicies/updateInboxLimit', {
+    policyId: selectedPolicyId.value,
+    limitId: limit.id,
+    limitData: { conversationLimit: limit.conversationLimit },
+  });
 };
 
 const handleSubmit = async formState => {

app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue

@@ -1,8 +1,7 @@
 <script setup>
 import { computed, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store';
+import { useConfig } from 'dashboard/composables/useConfig';
 import BaseInfo from 'dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue';
 import RadioCard from 'dashboard/components-next/AssignmentPolicy/components/RadioCard.vue';
 import FairDistribution from 'dashboard/components-next/AssignmentPolicy/components/FairDistribution.vue';
@@ -24,6 +23,7 @@ const props = defineProps({
     default: () => ({
       name: '',
       description: '',
+      enabled: false,
       assignmentOrder: ROUND_ROBIN,
       conversationPriority: EARLIEST_CREATED,
       fairDistributionLimit: DEFAULT_FAIR_DISTRIBUTION_LIMIT,
@@ -61,24 +61,18 @@ const emit = defineEmits([
   'submit',
   'addInbox',
   'deleteInbox',
-  'navigateToInbox',
   'validationChange',
 ]);
 
 const { t } = useI18n();
-const route = useRoute();
-
-const accountId = computed(() => Number(route.params.accountId));
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
+const { isEnterprise } = useConfig();
 
 const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY';
 
 const state = reactive({
   name: '',
   description: '',
-  enabled: true,
+  enabled: false,
   assignmentOrder: ROUND_ROBIN,
   conversationPriority: EARLIEST_CREATED,
   fairDistributionLimit: DEFAULT_FAIR_DISTRIBUTION_LIMIT,
@@ -89,42 +83,20 @@ const validationState = ref({
   isValid: false,
 });
 
-const createOption = (
-  type,
-  key,
-  stateKey,
-  disabled = false,
-  disabledMessage = ''
-) => ({
+const createOption = (type, key, stateKey) => ({
   key,
   label: t(`${BASE_KEY}.FORM.${type}.${key.toUpperCase()}.LABEL`),
   description: t(`${BASE_KEY}.FORM.${type}.${key.toUpperCase()}.DESCRIPTION`),
   isActive: state[stateKey] === key,
-  disabled,
-  disabledMessage,
 });
 
 const assignmentOrderOptions = computed(() => {
-  const hasAdvancedAssignment = isFeatureEnabledonAccount.value(
-    accountId.value,
-    'advanced_assignment'
+  const options = OPTIONS.ORDER.filter(
+    key => isEnterprise || key !== 'balanced'
+  );
+  return options.map(key =>
+    createOption('ASSIGNMENT_ORDER', key, 'assignmentOrder')
   );
-
-  return OPTIONS.ORDER.map(key => {
-    const isBalanced = key === 'balanced';
-    const disabled = isBalanced && !hasAdvancedAssignment;
-    const disabledMessage = disabled
-      ? t(`${BASE_KEY}.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_MESSAGE`)
-      : '';
-
-    return createOption(
-      'ASSIGNMENT_ORDER',
-      key,
-      'assignmentOrder',
-      disabled,
-      disabledMessage
-    );
-  });
 });
 
 const assignmentPriorityOptions = computed(() =>
@@ -159,7 +131,7 @@ const resetForm = () => {
   Object.assign(state, {
     name: '',
     description: '',
-    enabled: true,
+    enabled: false,
     assignmentOrder: ROUND_ROBIN,
     conversationPriority: EARLIEST_CREATED,
     fairDistributionLimit: DEFAULT_FAIR_DISTRIBUTION_LIMIT,
@@ -190,10 +162,15 @@ defineExpose({
       <BaseInfo
         v-model:policy-name="state.name"
         v-model:description="state.description"
+        v-model:enabled="state.enabled"
         :name-label="t(`${BASE_KEY}.FORM.NAME.LABEL`)"
         :name-placeholder="t(`${BASE_KEY}.FORM.NAME.PLACEHOLDER`)"
         :description-label="t(`${BASE_KEY}.FORM.DESCRIPTION.LABEL`)"
         :description-placeholder="t(`${BASE_KEY}.FORM.DESCRIPTION.PLACEHOLDER`)"
+        :status-label="t(`${BASE_KEY}.FORM.STATUS.LABEL`)"
+        :status-placeholder="
+          t(`${BASE_KEY}.FORM.STATUS.${state.enabled ? 'ACTIVE' : 'INACTIVE'}`)
+        "
         @validation-change="handleValidationChange"
       />
 
@@ -216,8 +193,6 @@ defineExpose({
                 :label="option.label"
                 :description="option.description"
                 :is-active="option.isActive"
-                :disabled="option.disabled"
-                :disabled-message="option.disabledMessage"
                 @select="state[section.key] = $event"
               />
             </div>
@@ -276,7 +251,6 @@ defineExpose({
         :is-fetching="isInboxLoading"
         :empty-state-message="t(`${BASE_KEY}.FORM.INBOXES.EMPTY_STATE`)"
         @delete="$emit('deleteInbox', $event)"
-        @navigate="$emit('navigateToInbox', $event)"
       />
     </div>
   </form>

app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/InboxLinkDialog.vue

@@ -1,116 +0,0 @@
-<script setup>
-import { ref, computed, watch, nextTick } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const props = defineProps({
-  inbox: {
-    type: Object,
-    default: null,
-  },
-  isLinking: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['link', 'dismiss']);
-
-const { t } = useI18n();
-
-const dialogRef = ref(null);
-
-const inboxName = computed(() => props.inbox?.name || '');
-
-const inboxIcon = computed(() => {
-  if (!props.inbox) return 'i-lucide-inbox';
-  return getInboxIconByType(
-    props.inbox.channelType,
-    props.inbox.medium,
-    'line'
-  );
-});
-
-const openDialog = () => {
-  dialogRef.value?.open();
-};
-
-const closeDialog = () => {
-  dialogRef.value?.close();
-};
-
-const handleConfirm = () => {
-  emit('link');
-};
-
-const handleClose = () => {
-  emit('dismiss');
-};
-
-watch(
-  () => props.inbox,
-  async newInbox => {
-    if (newInbox) {
-      await nextTick();
-      openDialog();
-    } else {
-      closeDialog();
-    }
-  },
-  { immediate: true }
-);
-
-defineExpose({ openDialog, closeDialog });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.INBOX_LINK_PROMPT.TITLE'
-      )
-    "
-    :confirm-button-label="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.INBOX_LINK_PROMPT.LINK_BUTTON'
-      )
-    "
-    :cancel-button-label="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.INBOX_LINK_PROMPT.CANCEL_BUTTON'
-      )
-    "
-    :is-loading="isLinking"
-    @confirm="handleConfirm"
-    @close="handleClose"
-  >
-    <template #description>
-      <p class="text-sm text-n-slate-11">
-        {{
-          t(
-            'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.EDIT.INBOX_LINK_PROMPT.DESCRIPTION'
-          )
-        }}
-      </p>
-    </template>
-
-    <div
-      class="flex items-center gap-3 p-3 rounded-xl border border-n-weak bg-n-alpha-1"
-    >
-      <div
-        class="flex-shrink-0 size-10 rounded-lg bg-n-alpha-2 flex items-center justify-center"
-      >
-        <i :class="inboxIcon" class="text-lg text-n-slate-11" />
-      </div>
-      <div class="flex flex-col min-w-0">
-        <span class="text-sm font-medium text-n-slate-12 truncate">
-          {{ inboxName }}
-        </span>
-      </div>
-    </div>
-  </Dialog>
-</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue

@@ -1,321 +1,122 @@
-<script setup>
-import { ref, computed, watch, onMounted } from 'vue';
-import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
-import { vOnClickOutside } from '@vueuse/components';
+<script>
+import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
 import { minValue } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import { useConfig } from 'dashboard/composables/useConfig';
 import SettingsSection from '../../../../../components/SettingsSection.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Switch from 'dashboard/components-next/switch/Switch.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import assignmentPoliciesAPI from 'dashboard/api/assignmentPolicies';
-import { useI18n } from 'vue-i18n';
 
-const props = defineProps({
-  inbox: {
-    type: Object,
-    default: () => ({}),
+export default {
+  components: {
+    SettingsSection,
+    NextButton,
   },
-});
-
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-const { t } = useI18n();
-const { isEnterprise } = useConfig();
-
-const selectedAgents = ref([]);
-const isAgentListUpdating = ref(false);
-const enableAutoAssignment = ref(false);
-const maxAssignmentLimit = ref(null);
-const assignmentPolicy = ref(null);
-const isLoadingPolicy = ref(false);
-const isDeletingPolicy = ref(false);
-const showDeleteConfirmModal = ref(false);
-const availablePolicies = ref([]);
-const isLoadingPolicies = ref(false);
-const showPolicyDropdown = ref(false);
-const isLinkingPolicy = ref(false);
-
-const agentList = computed(() => store.getters['agents/getAgents']);
-
-const isFeatureEnabled = feature => {
-  const accountId = Number(route.params.accountId);
-  return store.getters['accounts/isFeatureEnabledonAccount'](
-    accountId,
-    feature
-  );
-};
-
-const hasAdvancedAssignment = computed(() => {
-  return isFeatureEnabled('advanced_assignment');
-});
-
-const hasAssignmentV2 = computed(() => {
-  return isFeatureEnabled('assignment_v2');
-});
-
-const showAdvancedAssignmentUI = computed(() => {
-  return hasAdvancedAssignment.value && hasAssignmentV2.value;
-});
-
-const assignmentOrderLabel = computed(() => {
-  if (!assignmentPolicy.value) return '';
-  const priority = assignmentPolicy.value.conversation_priority;
-  if (priority === 'earliest_created') {
-    return t('INBOX_MGMT.ASSIGNMENT.PRIORITY.EARLIEST_CREATED');
-  }
-  if (priority === 'longest_waiting') {
-    return t('INBOX_MGMT.ASSIGNMENT.PRIORITY.LONGEST_WAITING');
-  }
-  return priority;
-});
-
-const assignmentMethodLabel = computed(() => {
-  if (!assignmentPolicy.value) return '';
-  const order = assignmentPolicy.value.assignment_order;
-  if (order === 'round_robin') {
-    return t('INBOX_MGMT.ASSIGNMENT.METHOD.ROUND_ROBIN');
-  }
-  if (order === 'balanced') {
-    return t('INBOX_MGMT.ASSIGNMENT.METHOD.BALANCED');
-  }
-  return order;
-});
-
-// Vuelidate validation rules
-const rules = {
-  maxAssignmentLimit: {
-    minValue: minValue(1),
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
   },
-};
+  setup() {
+    const { isEnterprise } = useConfig();
 
-const v$ = useVuelidate(rules, { maxAssignmentLimit });
-
-const maxAssignmentLimitErrors = computed(() => {
-  if (v$.value.maxAssignmentLimit.$error) {
-    return t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_RANGE_ERROR');
-  }
-  return '';
-});
-
-const fetchAttachedAgents = async () => {
-  try {
-    const response = await store.dispatch('inboxMembers/get', {
-      inboxId: props.inbox.id,
-    });
-    const {
-      data: { payload: inboxMembers },
-    } = response;
-    selectedAgents.value = inboxMembers;
-  } catch (error) {
-    //  Handle error
-  }
-};
-
-const fetchAssignmentPolicy = async () => {
-  if (!props.inbox.id) return;
-
-  isLoadingPolicy.value = true;
-  try {
-    const response = await assignmentPoliciesAPI.getInboxPolicy(props.inbox.id);
-    assignmentPolicy.value = response.data;
-  } catch (error) {
-    // No policy attached, which is fine
-    assignmentPolicy.value = null;
-  } finally {
-    isLoadingPolicy.value = false;
-  }
-};
-
-const fetchAvailablePolicies = async () => {
-  isLoadingPolicies.value = true;
-  try {
-    const response = await assignmentPoliciesAPI.get();
-    availablePolicies.value = response.data;
-  } catch (error) {
-    availablePolicies.value = [];
-  } finally {
-    isLoadingPolicies.value = false;
-  }
-};
-
-const linkPolicyToInbox = async policy => {
-  isLinkingPolicy.value = true;
-  try {
-    await assignmentPoliciesAPI.setInboxPolicy(props.inbox.id, policy.id);
-    assignmentPolicy.value = policy;
-    showPolicyDropdown.value = false;
-    useAlert(t('INBOX_MGMT.ASSIGNMENT.LINK_SUCCESS'));
-  } catch (error) {
-    useAlert(t('INBOX_MGMT.ASSIGNMENT.LINK_ERROR'));
-  } finally {
-    isLinkingPolicy.value = false;
-  }
-};
-
-const navigateToAssignmentPolicies = () => {
-  const accountId = route.params.accountId;
-  router.push({
-    name: 'agent_assignment_policy_index',
-    params: { accountId },
-  });
-};
-
-const policyMenuItems = computed(() => {
-  const items = availablePolicies.value.map(policy => ({
-    action: 'select_policy',
-    value: policy.id,
-    label: policy.name,
-    icon: 'i-lucide-zap',
-    policy,
-  }));
-
-  items.push({
-    action: 'view_all',
-    value: 'view_all',
-    label: t('INBOX_MGMT.ASSIGNMENT.VIEW_ALL_POLICIES'),
-    icon: 'i-lucide-arrow-right',
-  });
-
-  return items;
-});
-
-const handlePolicyMenuAction = ({ action, policy }) => {
-  if (action === 'select_policy' && policy) {
-    linkPolicyToInbox(policy);
-  } else if (action === 'view_all') {
-    navigateToAssignmentPolicies();
-  }
-  showPolicyDropdown.value = false;
-};
-
-const togglePolicyDropdown = () => {
-  if (!showPolicyDropdown.value && availablePolicies.value.length === 0) {
-    fetchAvailablePolicies();
-  }
-  showPolicyDropdown.value = !showPolicyDropdown.value;
-};
-
-const closePolicyDropdown = () => {
-  showPolicyDropdown.value = false;
-};
-
-const handleToggleAutoAssignment = async () => {
-  try {
-    const payload = {
-      id: props.inbox.id,
-      formData: false,
-      enable_auto_assignment: enableAutoAssignment.value,
+    return { v$: useVuelidate(), isEnterprise };
+  },
+  data() {
+    return {
+      selectedAgents: [],
+      isAgentListUpdating: false,
+      enableAutoAssignment: false,
+      maxAssignmentLimit: null,
     };
-    await store.dispatch('inboxes/updateInbox', payload);
-    useAlert(t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
-  }
-};
-
-const updateAgents = async () => {
-  const agentListIds = selectedAgents.value.map(el => el.id);
-  isAgentListUpdating.value = true;
-  try {
-    await store.dispatch('inboxMembers/create', {
-      inboxId: props.inbox.id,
-      agentList: agentListIds,
-    });
-    useAlert(t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
-  }
-  isAgentListUpdating.value = false;
-};
-
-const updateInbox = async () => {
-  try {
-    const payload = {
-      id: props.inbox.id,
-      formData: false,
-      enable_auto_assignment: enableAutoAssignment.value,
-      auto_assignment_config: {
-        max_assignment_limit: maxAssignmentLimit.value,
+  },
+  computed: {
+    ...mapGetters({
+      agentList: 'agents/getAgents',
+    }),
+    maxAssignmentLimitErrors() {
+      if (this.v$.maxAssignmentLimit.$error) {
+        return this.$t(
+          'INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_RANGE_ERROR'
+        );
+      }
+      return '';
+    },
+  },
+  watch: {
+    inbox() {
+      this.setDefaults();
+    },
+  },
+  mounted() {
+    this.setDefaults();
+  },
+  methods: {
+    setDefaults() {
+      this.enableAutoAssignment = this.inbox.enable_auto_assignment;
+      this.maxAssignmentLimit =
+        this.inbox?.auto_assignment_config?.max_assignment_limit || null;
+      this.fetchAttachedAgents();
+    },
+    async fetchAttachedAgents() {
+      try {
+        const response = await this.$store.dispatch('inboxMembers/get', {
+          inboxId: this.inbox.id,
+        });
+        const {
+          data: { payload: inboxMembers },
+        } = response;
+        this.selectedAgents = inboxMembers;
+      } catch (error) {
+        //  Handle error
+      }
+    },
+    handleEnableAutoAssignment() {
+      this.updateInbox();
+    },
+    async updateAgents() {
+      const agentList = this.selectedAgents.map(el => el.id);
+      this.isAgentListUpdating = true;
+      try {
+        await this.$store.dispatch('inboxMembers/create', {
+          inboxId: this.inbox.id,
+          agentList,
+        });
+        useAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+      this.isAgentListUpdating = false;
+    },
+    async updateInbox() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          enable_auto_assignment: this.enableAutoAssignment,
+          auto_assignment_config: {
+            max_assignment_limit: this.maxAssignmentLimit,
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInbox', payload);
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      }
+    },
+  },
+  validations: {
+    selectedAgents: {
+      isEmpty() {
+        return !!this.selectedAgents.length;
       },
-    };
-    await store.dispatch('inboxes/updateInbox', payload);
-    useAlert(t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
-  }
+    },
+    maxAssignmentLimit: {
+      minValue: minValue(1),
+    },
+  },
 };
-
-const navigateToCreatePolicy = () => {
-  const accountId = route.params.accountId;
-  router.push({
-    name: 'agent_assignment_policy_create',
-    params: { accountId },
-    query: { inboxId: props.inbox.id },
-  });
-};
-
-const navigateToAssignmentPolicyEdit = () => {
-  if (!assignmentPolicy.value?.id) return;
-  const accountId = route.params.accountId;
-  router.push({
-    name: 'agent_assignment_policy_edit',
-    params: { accountId, id: assignmentPolicy.value.id },
-  });
-};
-
-const navigateToBilling = () => {
-  const accountId = route.params.accountId;
-  router.push({
-    name: 'billing_settings_index',
-    params: { accountId },
-  });
-};
-
-const confirmDeletePolicy = () => {
-  showDeleteConfirmModal.value = true;
-};
-
-const cancelDeletePolicy = () => {
-  showDeleteConfirmModal.value = false;
-};
-
-const deleteAssignmentPolicy = async () => {
-  if (isDeletingPolicy.value) return;
-  isDeletingPolicy.value = true;
-  try {
-    await assignmentPoliciesAPI.removeInboxPolicy(props.inbox.id);
-    assignmentPolicy.value = null;
-    showDeleteConfirmModal.value = false;
-    useAlert(t('INBOX_MGMT.ASSIGNMENT_POLICY.DELETE_SUCCESS'));
-  } catch (error) {
-    useAlert(t('INBOX_MGMT.ASSIGNMENT_POLICY.DELETE_ERROR'));
-  } finally {
-    isDeletingPolicy.value = false;
-  }
-};
-
-const setDefaults = () => {
-  enableAutoAssignment.value = props.inbox.enable_auto_assignment;
-  maxAssignmentLimit.value =
-    props.inbox.auto_assignment_config?.max_assignment_limit || null;
-  fetchAttachedAgents();
-  if (showAdvancedAssignmentUI.value) {
-    fetchAssignmentPolicy();
-    fetchAvailablePolicies();
-  }
-};
-
-// Watch only inbox.id to avoid unnecessary refetches when other properties change
-watch(() => props.inbox.id, setDefaults);
-
-onMounted(() => {
-  setDefaults();
-});
 </script>
 
 <template>
@@ -337,6 +138,7 @@ onMounted(() => {
         selected-label
         :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
         :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+        @select="v$.selectedAgents.$touch"
       />
 
       <NextButton
@@ -350,325 +152,44 @@ onMounted(() => {
       :title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
       :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT_SUB_TEXT')"
     >
-      <!-- New UI for assignment_v2 -->
-      <template v-if="hasAssignmentV2">
-        <div class="flex items-start gap-3">
-          <Switch
+      <label class="w-3/4 settings-item">
+        <div class="flex items-center gap-2">
+          <input
+            id="enableAutoAssignment"
             v-model="enableAutoAssignment"
-            class="flex-shrink-0 mt-0.5"
-            @change="handleToggleAutoAssignment"
+            type="checkbox"
+            @change="handleEnableAutoAssignment"
           />
-          <div class="flex-grow">
-            <label class="text-sm text-n-slate-12 font-medium mb-1">
-              {{ $t('INBOX_MGMT.ASSIGNMENT.ENABLE_AUTO_ASSIGNMENT') }}
-            </label>
-            <p class="text-sm text-n-slate-11">
-              {{ $t('INBOX_MGMT.ASSIGNMENT.DESCRIPTION') }}
-            </p>
-          </div>
+          <label for="enableAutoAssignment">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
+          </label>
         </div>
 
-        <Transition
-          enter-active-class="transition-all duration-200 ease-out"
-          enter-from-class="opacity-0 -translate-y-2"
-          enter-to-class="opacity-100 translate-y-0"
-          leave-active-class="transition-all duration-150 ease-in"
-          leave-from-class="opacity-100 translate-y-0"
-          leave-to-class="opacity-0 -translate-y-2"
-        >
-          <div v-if="enableAutoAssignment" class="mt-6">
-            <!-- Policy Card - When policy is attached -->
-            <div
-              v-if="showAdvancedAssignmentUI && assignmentPolicy"
-              class="p-4 rounded-xl outline-1 outline-n-weak outline bg-n-solid-1 dark:bg-n-slate-1"
-            >
-              <div class="flex items-start gap-4">
-                <div
-                  class="flex-shrink-0 size-12 rounded-xl bg-n-slate-3 flex items-center justify-center"
-                >
-                  <span class="i-lucide-zap text-xl text-n-slate-11" />
-                </div>
-                <div class="flex-grow">
-                  <div class="flex items-start justify-between gap-4 mb-4">
-                    <div class="flex flex-col items-start">
-                      <span class="text-base font-medium text-n-slate-12 mb-1">
-                        {{ assignmentPolicy.name }}
-                      </span>
-                      <p class="text-sm text-n-slate-11">
-                        {{ $t('INBOX_MGMT.ASSIGNMENT.POLICY_LABEL') }}
-                      </p>
-                    </div>
-                    <NextButton
-                      icon="i-lucide-trash-2"
-                      ghost
-                      ruby
-                      sm
-                      @click="confirmDeletePolicy"
-                    />
-                  </div>
-
-                  <ul class="space-y-2 mb-6">
-                    <li class="flex items-center gap-2">
-                      <span
-                        class="w-1.5 h-1.5 rounded-full bg-n-slate-11 flex-shrink-0"
-                      />
-                      <span class="text-sm text-n-slate-12">
-                        {{ assignmentOrderLabel }}
-                      </span>
-                    </li>
-                    <li class="flex items-center gap-2">
-                      <span
-                        class="w-1.5 h-1.5 rounded-full bg-n-slate-11 flex-shrink-0"
-                      />
-                      <span class="text-sm text-n-slate-12">
-                        {{ assignmentMethodLabel }}
-                      </span>
-                    </li>
-                  </ul>
-
-                  <div class="w-full h-px my-4 bg-n-weak" />
-
-                  <NextButton
-                    :label="$t('INBOX_MGMT.ASSIGNMENT.CUSTOMIZE_POLICY')"
-                    icon="i-lucide-arrow-right"
-                    trailing-icon
-                    link
-                    class="mb-2"
-                    @click="navigateToAssignmentPolicyEdit"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <!-- Default Policy - When no custom policy attached but feature enabled -->
-            <div
-              v-else-if="
-                showAdvancedAssignmentUI &&
-                !assignmentPolicy &&
-                !isLoadingPolicy
-              "
-              class="rounded-xl outline-1 outline-n-weak outline"
-            >
-              <!-- Default Policy Header -->
-              <div class="p-4">
-                <div class="flex items-start gap-4">
-                  <div
-                    class="flex-shrink-0 w-12 h-12 rounded-xl bg-n-slate-3 dark:bg-n-slate-4 flex items-center justify-center"
-                  >
-                    <i class="i-lucide-zap text-xl text-n-slate-11" />
-                  </div>
-                  <div class="flex-grow">
-                    <h4 class="text-base font-medium text-n-slate-12 mb-1">
-                      {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_POLICY_LINKED') }}
-                    </h4>
-                    <p class="text-sm text-n-slate-11">
-                      {{
-                        $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_POLICY_DESCRIPTION')
-                      }}
-                    </p>
-                  </div>
-                </div>
-
-                <!-- Action Buttons -->
-                <div class="mt-5 flex items-center gap-3">
-                  <div
-                    v-if="!isLoadingPolicies && availablePolicies.length > 0"
-                    v-on-click-outside="closePolicyDropdown"
-                    class="relative"
-                  >
-                    <button
-                      type="button"
-                      class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-n-brand hover:bg-n-brand/90 rounded-lg transition-colors"
-                      @click="togglePolicyDropdown"
-                    >
-                      <i class="i-lucide-link text-sm" />
-                      {{ $t('INBOX_MGMT.ASSIGNMENT.LINK_EXISTING_POLICY') }}
-                      <i
-                        class="i-lucide-chevron-down text-sm transition-transform"
-                        :class="{ 'rotate-180': showPolicyDropdown }"
-                      />
-                    </button>
-
-                    <DropdownMenu
-                      v-if="showPolicyDropdown"
-                      class="top-full left-0 mt-2 min-w-72"
-                      :menu-items="policyMenuItems"
-                      :is-searching="isLoadingPolicies"
-                      @action="handlePolicyMenuAction"
-                    />
-                  </div>
-
-                  <button
-                    type="button"
-                    class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-n-slate-12 bg-n-slate-3 dark:bg-n-slate-4 hover:bg-n-slate-4 dark:hover:bg-n-slate-5 rounded-lg transition-colors"
-                    @click="navigateToCreatePolicy"
-                  >
-                    <i class="i-lucide-plus text-sm" />
-                    {{ $t('INBOX_MGMT.ASSIGNMENT.CREATE_NEW_POLICY') }}
-                  </button>
-                </div>
-              </div>
-
-              <!-- Default Rules Info -->
-              <div class="px-4 py-4 border-t border-n-weak bg-n-slate-2">
-                <div class="flex items-start gap-3">
-                  <i class="i-lucide-info text-base text-n-slate-10 mt-0.5" />
-                  <div>
-                    <p class="text-sm text-n-slate-11 mb-2">
-                      {{ $t('INBOX_MGMT.ASSIGNMENT.CURRENT_BEHAVIOR') }}
-                    </p>
-                    <ul class="space-y-1">
-                      <li class="flex items-center gap-2">
-                        <span
-                          class="w-1 h-1 rounded-full bg-n-slate-10 flex-shrink-0"
-                        />
-                        <span class="text-sm text-n-slate-11">
-                          {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULE_1') }}
-                        </span>
-                      </li>
-                      <li class="flex items-center gap-2">
-                        <span
-                          class="w-1 h-1 rounded-full bg-n-slate-10 flex-shrink-0"
-                        />
-                        <span class="text-sm text-n-slate-11">
-                          {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULE_2') }}
-                        </span>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Default Rules Card - Feature not enabled (no advanced_assignment) -->
-            <div
-              v-else-if="!showAdvancedAssignmentUI"
-              class="p-4 rounded-xl outline outline-1 outline-n-weak -outline-offset-1"
-            >
-              <div class="flex items-start gap-4">
-                <div
-                  class="flex-shrink-0 w-12 h-12 rounded-xl bg-n-slate-3 dark:bg-n-slate-4 flex items-center justify-center"
-                >
-                  <i class="i-lucide-zap text-xl text-n-slate-11" />
-                </div>
-                <div class="flex-grow">
-                  <h4 class="text-base font-medium text-n-slate-12 mb-1">
-                    {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULES_TITLE') }}
-                  </h4>
-                  <p class="text-sm text-n-slate-11 mb-4">
-                    {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULES_DESCRIPTION') }}
-                  </p>
-
-                  <ul class="space-y-2 mb-6">
-                    <li class="flex items-center gap-2">
-                      <span
-                        class="w-1.5 h-1.5 rounded-full bg-n-slate-11 flex-shrink-0"
-                      />
-                      <span class="text-sm font-medium text-n-slate-12">
-                        {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULE_1') }}
-                      </span>
-                    </li>
-                    <li class="flex items-center gap-2">
-                      <span
-                        class="w-1.5 h-1.5 rounded-full bg-n-slate-11 flex-shrink-0"
-                      />
-                      <span class="text-sm font-medium text-n-slate-12">
-                        {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULE_2') }}
-                      </span>
-                    </li>
-                  </ul>
-
-                  <div class="w-full h-px bg-n-weak my-4" />
-
-                  <!-- Upgrade prompt when advanced_assignment is not enabled -->
-                  <div v-if="!hasAdvancedAssignment">
-                    <p class="text-sm text-n-slate-11 mb-1">
-                      {{ $t('INBOX_MGMT.ASSIGNMENT.UPGRADE_PROMPT') }}
-                    </p>
-                    <NextButton
-                      :label="$t('INBOX_MGMT.ASSIGNMENT.UPGRADE_TO_BUSINESS')"
-                      icon="i-lucide-arrow-right"
-                      trailing-icon
-                      link
-                      @click="navigateToBilling"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </Transition>
-      </template>
-
-      <!-- Old UI for non-assignment_v2 -->
-      <template v-else>
-        <label class="w-3/4 settings-item">
-          <div class="flex items-center gap-2">
-            <input
-              id="enableAutoAssignment"
-              v-model="enableAutoAssignment"
-              type="checkbox"
-              @change="handleToggleAutoAssignment"
-            />
-            <label for="enableAutoAssignment">
-              {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
-            </label>
-          </div>
-
-          <p class="pb-1 text-sm not-italic text-n-slate-11">
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
-          </p>
-        </label>
-
-        <div v-if="enableAutoAssignment && isEnterprise" class="py-3">
-          <woot-input
-            v-model="maxAssignmentLimit"
-            type="number"
-            :class="{ error: v$.maxAssignmentLimit.$error }"
-            :error="maxAssignmentLimitErrors"
-            :label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
-            @blur="v$.maxAssignmentLimit.$touch"
-          />
-
-          <p class="pb-1 text-sm not-italic text-n-slate-11">
-            {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
-          </p>
-
-          <NextButton
-            :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-            :disabled="v$.maxAssignmentLimit.$invalid"
-            @click="updateInbox"
-          />
-        </div>
-      </template>
-    </SettingsSection>
-
-    <woot-modal
-      v-if="showDeleteConfirmModal"
-      :show="showDeleteConfirmModal"
-      :on-close="cancelDeletePolicy"
-    >
-      <div class="p-6">
-        <h3 class="text-lg font-medium text-n-slate-12 mb-4">
-          {{ $t('INBOX_MGMT.ASSIGNMENT_POLICY.DELETE_CONFIRM_TITLE') }}
-        </h3>
-        <p class="text-sm text-n-slate-11 mb-6 ml-13">
-          {{ $t('INBOX_MGMT.ASSIGNMENT_POLICY.DELETE_CONFIRM_MESSAGE') }}
+        <p class="pb-1 text-sm not-italic text-n-slate-11">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
         </p>
-        <div class="flex justify-end gap-2">
-          <NextButton
-            color="slate"
-            :label="$t('INBOX_MGMT.ASSIGNMENT_POLICY.CANCEL')"
-            @click="cancelDeletePolicy"
-          />
-          <NextButton
-            color="ruby"
-            :label="$t('INBOX_MGMT.ASSIGNMENT_POLICY.CONFIRM_DELETE')"
-            :is-loading="isDeletingPolicy"
-            @click="deleteAssignmentPolicy"
-          />
-        </div>
+      </label>
+
+      <div v-if="enableAutoAssignment && isEnterprise" class="py-3">
+        <woot-input
+          v-model="maxAssignmentLimit"
+          type="number"
+          :class="{ error: v$.maxAssignmentLimit.$error }"
+          :error="maxAssignmentLimitErrors"
+          :label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
+          @blur="v$.maxAssignmentLimit.$touch"
+        />
+
+        <p class="pb-1 text-sm not-italic text-n-slate-11">
+          {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
+        </p>
+
+        <NextButton
+          :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :disabled="v$.maxAssignmentLimit.$invalid"
+          @click="updateInbox"
+        />
       </div>
-    </woot-modal>
+    </SettingsSection>
   </div>
 </template>

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

@@ -1,7 +1,7 @@
 <script>
 import { useAlert, useTrack } from 'dashboard/composables';
 import BotMetrics from './components/BotMetrics.vue';
-import ReportFilters from './components/ReportFilters.vue';
+import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import ReportContainer from './ReportContainer.vue';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
@@ -12,7 +12,7 @@ export default {
   components: {
     BotMetrics,
     ReportHeader,
-    ReportFilters,
+    ReportFilterSelector,
     ReportContainer,
   },
   data() {
@@ -88,10 +88,10 @@ export default {
 <template>
   <ReportHeader :header-title="$t('BOT_REPORTS.HEADER')" />
   <div class="flex flex-col gap-4">
-    <ReportFilters
-      :show-entity-filter="false"
-      show-group-by
-      :show-business-hours="false"
+    <ReportFilterSelector
+      :show-agents-filter="false"
+      show-group-by-filter
+      :show-business-hours-switch="false"
       @filter-change="onFilterChange"
     />
 

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

@@ -52,9 +52,6 @@ export default {
       );
     },
   },
-  mounted() {
-    this.$store.dispatch('agents/get');
-  },
   methods: {
     getAllData() {
       try {

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

@@ -1,7 +1,7 @@
 <script>
 import V4Button from 'dashboard/components-next/button/Button.vue';
 import { useAlert, useTrack } from 'dashboard/composables';
-import ReportFilters from './components/ReportFilters.vue';
+import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import { generateFileName } from 'dashboard/helper/downloadHelper';
@@ -22,7 +22,7 @@ export default {
   name: 'ConversationReports',
   components: {
     ReportHeader,
-    ReportFilters,
+    ReportFilterSelector,
     ReportContainer,
     V4Button,
   },
@@ -115,10 +115,10 @@ export default {
       @click="downloadConversationReports"
     />
   </ReportHeader>
-  <div class="flex flex-col">
-    <ReportFilters
-      :show-entity-filter="false"
-      show-group-by
+  <div class="flex flex-col gap-3">
+    <ReportFilterSelector
+      :show-agents-filter="false"
+      show-group-by-filter
       @filter-change="onFilterChange"
     />
     <ReportContainer :group-by="groupBy" />

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

@@ -145,7 +145,7 @@ export default {
 
 <template>
   <div
-    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 px-6 py-5 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 mt-4"
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 px-6 py-5 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2"
   >
     <div
       v-for="metric in metrics"

app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilters.vue

@@ -2,8 +2,6 @@
 import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
-import { subDays, fromUnixTime } from 'date-fns';
 import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
 import {
   buildFilterList,
@@ -15,12 +13,6 @@ import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
 import ActiveFilterChip from '../Filters/v3/ActiveFilterChip.vue';
 import AddFilterChip from '../Filters/v3/AddFilterChip.vue';
 import WootDatePicker from 'dashboard/components/ui/DatePicker/DatePicker.vue';
-import {
-  parseReportURLParams,
-  parseFilterURLParams,
-  generateCompleteURLParams,
-} from '../../helpers/reportFilterHelper';
-import { DATE_RANGE_TYPES } from 'dashboard/components/ui/DatePicker/helpers/DatePickerHelper';
 
 const props = defineProps({
   showTeamFilter: {
@@ -33,29 +25,16 @@ const emit = defineEmits(['filterChange']);
 
 const { t } = useI18n();
 const store = useStore();
-const route = useRoute();
-const router = useRouter();
-
-// Initialize from URL params immediately
-const urlParams = parseReportURLParams(route.query);
-const urlFilters = parseFilterURLParams(route.query);
-
-const initialDateRange =
-  urlParams.from && urlParams.to
-    ? [fromUnixTime(urlParams.from), fromUnixTime(urlParams.to)]
-    : [subDays(new Date(), 6), new Date()];
 
 const showDropdownMenu = ref(false);
 const showSubDropdownMenu = ref(false);
 const activeFilterType = ref('');
-const customDateRange = ref(initialDateRange);
-const selectedDateRange = ref(urlParams.range || DATE_RANGE_TYPES.LAST_7_DAYS);
-
+const customDateRange = ref([new Date(), new Date()]);
 const appliedFilters = ref({
-  user_ids: urlFilters.agent_id,
-  inbox_id: urlFilters.inbox_id,
-  team_id: urlFilters.team_id,
-  rating: urlFilters.rating,
+  user_ids: null,
+  inbox_id: null,
+  team_id: null,
+  rating: null,
 });
 
 const agents = computed(() => store.getters['agents/getAgents']);
@@ -132,17 +111,13 @@ const activeFilters = computed(() => {
   const activeKeys = Object.keys(appliedFilters.value).filter(
     key => appliedFilters.value[key]
   );
-
   return activeKeys.map(key => {
     const filterType = getFilterType(key, 'keyToType');
     const items = getFilterSource(filterType);
     const item = getActiveFilter(items, filterType, appliedFilters.value[key]);
-    const displayName =
-      item?.name || item?.title || `ID: ${appliedFilters.value[key]}`;
-
     return {
-      id: item?.id || appliedFilters.value[key],
-      name: displayName,
+      id: item?.id,
+      name: item?.name || '',
       type: filterType,
       options: getFilterOptions(filterType),
     };
@@ -155,23 +130,7 @@ const hasActiveFilters = computed(() =>
 
 const isAllFilterSelected = computed(() => !filterListMenuItems.value.length);
 
-const updateURLParams = () => {
-  const params = generateCompleteURLParams({
-    from: from.value,
-    to: to.value,
-    range: selectedDateRange.value,
-    filters: {
-      agent_id: appliedFilters.value.user_ids,
-      inbox_id: appliedFilters.value.inbox_id,
-      team_id: appliedFilters.value.team_id,
-      rating: appliedFilters.value.rating,
-    },
-  });
-  router.replace({ query: params });
-};
-
 const emitChange = () => {
-  updateURLParams();
   emit('filterChange', {
     from: from.value,
     to: to.value,
@@ -241,9 +200,7 @@ const openActiveFilterDropdown = filterType => {
 };
 
 const onDateRangeChange = value => {
-  const [startDate, endDate, rangeType] = value;
-  customDateRange.value = [startDate, endDate];
-  selectedDateRange.value = rangeType || DATE_RANGE_TYPES.CUSTOM_RANGE;
+  customDateRange.value = value;
   emitChange();
 };
 
@@ -254,11 +211,7 @@ onMounted(() => {
 
 <template>
   <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
-    <WootDatePicker
-      v-model:date-range="customDateRange"
-      v-model:range-type="selectedDateRange"
-      @date-range-changed="onDateRangeChange"
-    />
+    <WootDatePicker @date-range-changed="onDateRangeChange" />
 
     <div
       class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"

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

@@ -0,0 +1,228 @@
+<script>
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
+import ReportsFiltersDateRange from './Filters/DateRange.vue';
+import ReportsFiltersDateGroupBy from './Filters/DateGroupBy.vue';
+import ReportsFiltersAgents from './Filters/Agents.vue';
+import ReportsFiltersLabels from './Filters/Labels.vue';
+import ReportsFiltersInboxes from './Filters/Inboxes.vue';
+import ReportsFiltersTeams from './Filters/Teams.vue';
+import ReportsFiltersRatings from './Filters/Ratings.vue';
+import subDays from 'date-fns/subDays';
+import { DATE_RANGE_OPTIONS } from '../constants';
+import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
+
+export default {
+  components: {
+    WootDateRangePicker,
+    ReportsFiltersDateRange,
+    ReportsFiltersDateGroupBy,
+    ReportsFiltersAgents,
+    ReportsFiltersLabels,
+    ReportsFiltersInboxes,
+    ReportsFiltersTeams,
+    ReportsFiltersRatings,
+    ToggleSwitch,
+  },
+  props: {
+    showGroupByFilter: {
+      type: Boolean,
+      default: false,
+    },
+    showAgentsFilter: {
+      type: Boolean,
+      default: false,
+    },
+    showLabelsFilter: {
+      type: Boolean,
+      default: false,
+    },
+    showInboxFilter: {
+      type: Boolean,
+      default: false,
+    },
+    showRatingFilter: {
+      type: Boolean,
+      default: false,
+    },
+    showTeamFilter: {
+      type: Boolean,
+      default: false,
+    },
+    showBusinessHoursSwitch: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['filterChange'],
+  data() {
+    return {
+      // default value, need not be translated
+      selectedDateRange: DATE_RANGE_OPTIONS.LAST_7_DAYS,
+      selectedGroupByFilter: null,
+      selectedLabel: null,
+      selectedInbox: null,
+      selectedTeam: null,
+      selectedRating: null,
+      selectedAgents: [],
+      customDateRange: [new Date(), new Date()],
+      businessHoursSelected: false,
+    };
+  },
+  computed: {
+    isDateRangeSelected() {
+      return (
+        this.selectedDateRange.id === DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE.id
+      );
+    },
+    isGroupByPossible() {
+      return this.selectedDateRange.id !== DATE_RANGE_OPTIONS.LAST_7_DAYS.id;
+    },
+    to() {
+      if (this.isDateRangeSelected) {
+        return getUnixEndOfDay(this.customDateRange[1]);
+      }
+      return getUnixEndOfDay(new Date());
+    },
+    from() {
+      if (this.isDateRangeSelected) {
+        return getUnixStartOfDay(this.customDateRange[0]);
+      }
+
+      const { offset } = this.selectedDateRange;
+      const fromDate = subDays(new Date(), offset);
+      return getUnixStartOfDay(fromDate);
+    },
+    validGroupOptions() {
+      return this.selectedDateRange.groupByOptions;
+    },
+    validGroupBy() {
+      if (!this.selectedGroupByFilter) {
+        return this.validGroupOptions[0];
+      }
+
+      const validIds = this.validGroupOptions.map(opt => opt.id);
+      if (validIds.includes(this.selectedGroupByFilter.id)) {
+        return this.selectedGroupByFilter;
+      }
+      return this.validGroupOptions[0];
+    },
+  },
+  mounted() {
+    this.emitChange();
+  },
+  methods: {
+    emitChange() {
+      const {
+        from,
+        to,
+        selectedGroupByFilter: groupBy,
+        businessHoursSelected: businessHours,
+        selectedAgents,
+        selectedLabel,
+        selectedInbox,
+        selectedTeam,
+        selectedRating,
+      } = this;
+      this.$emit('filterChange', {
+        from,
+        to,
+        groupBy,
+        businessHours,
+        selectedAgents,
+        selectedLabel,
+        selectedInbox,
+        selectedTeam,
+        selectedRating,
+      });
+    },
+    onDateRangeChange(selectedRange) {
+      this.selectedDateRange = selectedRange;
+      this.selectedGroupByFilter = this.validGroupBy;
+      this.emitChange();
+    },
+    onCustomDateRangeChange(value) {
+      this.customDateRange = value;
+      this.selectedGroupByFilter = this.validGroupBy;
+      this.emitChange();
+    },
+    onGroupingChange(payload) {
+      this.selectedGroupByFilter = payload;
+      this.emitChange();
+    },
+    handleAgentsFilterSelection(selectedAgents) {
+      this.selectedAgents = selectedAgents;
+      this.emitChange();
+    },
+    handleLabelsFilterSelection(selectedLabel) {
+      this.selectedLabel = selectedLabel;
+      this.emitChange();
+    },
+    handleInboxFilterSelection(selectedInbox) {
+      this.selectedInbox = selectedInbox;
+      this.emitChange();
+    },
+    handleTeamFilterSelection(selectedTeam) {
+      this.selectedTeam = selectedTeam;
+      this.emitChange();
+    },
+    handleRatingFilterSelection(selectedRating) {
+      this.selectedRating = selectedRating;
+      this.emitChange();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="flex flex-col justify-between gap-3 md:flex-row">
+    <div
+      class="w-full grid gap-y-2 gap-x-1.5 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
+    >
+      <ReportsFiltersDateRange @on-range-change="onDateRangeChange" />
+      <WootDateRangePicker
+        v-if="isDateRangeSelected"
+        show-range
+        class="no-margin auto-width"
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        @change="onCustomDateRangeChange"
+      />
+      <ReportsFiltersDateGroupBy
+        v-if="showGroupByFilter && isGroupByPossible"
+        :valid-group-options="validGroupOptions"
+        :selected-option="selectedGroupByFilter"
+        @on-grouping-change="onGroupingChange"
+      />
+      <ReportsFiltersAgents
+        v-if="showAgentsFilter"
+        @agents-filter-selection="handleAgentsFilterSelection"
+      />
+      <ReportsFiltersLabels
+        v-if="showLabelsFilter"
+        @labels-filter-selection="handleLabelsFilterSelection"
+      />
+      <ReportsFiltersTeams
+        v-if="showTeamFilter"
+        @team-filter-selection="handleTeamFilterSelection"
+      />
+      <ReportsFiltersInboxes
+        v-if="showInboxFilter"
+        @inbox-filter-selection="handleInboxFilterSelection"
+      />
+      <ReportsFiltersRatings
+        v-if="showRatingFilter"
+        @rating-filter-selection="handleRatingFilterSelection"
+      />
+    </div>
+    <div v-if="showBusinessHoursSwitch" class="flex items-center">
+      <span class="mx-2 text-sm whitespace-nowrap">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+      </span>
+      <span>
+        <ToggleSwitch v-model="businessHoursSelected" @change="emitChange" />
+      </span>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue

@@ -0,0 +1,47 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ReportsFiltersAgents',
+  emits: ['agentsFilterSelection'],
+  data() {
+    return {
+      selectedOptions: [],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      options: 'agents/getAgents',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('agents/get');
+  },
+  methods: {
+    handleInput() {
+      this.$emit('agentsFilterSelection', this.selectedOptions);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOptions"
+      class="no-margin"
+      :options="options"
+      track-by="id"
+      label="name"
+      multiple
+      :close-on-select="false"
+      :clear-on-select="false"
+      hide-selected
+      :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
+      selected-label
+      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+      :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+      @update:model-value="handleInput"
+    />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue

@@ -0,0 +1,66 @@
+<script>
+import { GROUP_BY_OPTIONS } from '../../constants';
+
+export default {
+  name: 'ReportsFiltersDateGroupBy',
+  props: {
+    validGroupOptions: {
+      type: Array,
+      default: () => [GROUP_BY_OPTIONS.DAY],
+    },
+    selectedOption: {
+      type: Object,
+      default: () => GROUP_BY_OPTIONS.DAY,
+    },
+  },
+  emits: ['onGroupingChange'],
+  data() {
+    return {
+      currentSelectedFilter: null,
+    };
+  },
+  computed: {
+    translatedOptions() {
+      return this.validGroupOptions.map(option => ({
+        ...option,
+        groupBy: this.$t(option.translationKey),
+      }));
+    },
+  },
+  watch: {
+    selectedOption: {
+      handler() {
+        this.currentSelectedFilter = {
+          ...this.selectedOption,
+          groupBy: this.$t(this.selectedOption.translationKey),
+        };
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    changeFilterSelection(selectedFilter) {
+      this.groupByOptions = this.$emit('onGroupingChange', selectedFilter);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <p aria-hidden="true" class="hidden">
+      {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
+    </p>
+    <multiselect
+      v-model="currentSelectedFilter"
+      class="no-margin"
+      track-by="id"
+      label="groupBy"
+      :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
+      :options="translatedOptions"
+      :allow-empty="false"
+      :show-labels="false"
+      @select="changeFilterSelection"
+    />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DATE_RANGE_OPTIONS } from '../../constants';
+
+const emit = defineEmits(['onRangeChange']);
+
+const { t } = useI18n();
+
+const options = computed(() =>
+  Object.values(DATE_RANGE_OPTIONS).map(option => ({
+    ...option,
+    name: t(option.translationKey),
+  }))
+);
+
+const selectedId = ref(Object.values(DATE_RANGE_OPTIONS)[0].id);
+
+const selectedOption = computed({
+  get() {
+    return options.value.find(o => o.id === selectedId.value);
+  },
+  set(val) {
+    selectedId.value = val.id;
+  },
+});
+
+const updateRange = range => {
+  selectedOption.value = range;
+  emit('onRangeChange', range);
+};
+</script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      track-by="id"
+      label="name"
+      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+      selected-label
+      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+      deselect-label=""
+      :options="options"
+      :searchable="false"
+      :allow-empty="false"
+      @select="updateRange"
+    />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue

@@ -0,0 +1,42 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ReportsFiltersInboxes',
+  emits: ['inboxFilterSelection'],
+  data() {
+    return {
+      selectedOption: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      options: 'inboxes/getInboxes',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('inboxes/get');
+  },
+  methods: {
+    handleInput() {
+      this.$emit('inboxFilterSelection', this.selectedOption);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="name"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @update:model-value="handleInput"
+    />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue

@@ -0,0 +1,66 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ReportsFiltersLabels',
+  emits: ['labelsFilterSelection'],
+  data() {
+    return {
+      selectedOption: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      options: 'labels/getLabels',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('labels/get');
+  },
+  methods: {
+    handleInput() {
+      this.$emit('labelsFilterSelection', this.selectedOption);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="title"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @update:model-value="handleInput"
+    >
+      <template #singleLabel="props">
+        <div class="flex items-center min-w-0 gap-2">
+          <div
+            :style="{ backgroundColor: props.option.color }"
+            class="w-5 h-5 rounded-full"
+          />
+          <span class="my-0 text-n-slate-12">
+            {{ props.option.title }}
+          </span>
+        </div>
+      </template>
+      <template #option="props">
+        <div class="flex items-center gap-2">
+          <div
+            :style="{ backgroundColor: props.option.color }"
+            class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-n-weak"
+          />
+
+          <span class="my-0 text-n-slate-12 truncate min-w-0">
+            {{ props.option.title }}
+          </span>
+        </div>
+      </template>
+    </multiselect>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue

@@ -0,0 +1,40 @@
+<script>
+import { CSAT_RATINGS } from 'shared/constants/messages';
+
+export default {
+  name: 'ReportFiltersRatings',
+  emits: ['ratingFilterSelection'],
+  data() {
+    const translatedOptions = CSAT_RATINGS.reverse().map(option => ({
+      ...option,
+      label: this.$t(option.translationKey),
+    }));
+
+    return {
+      selectedOption: null,
+      options: translatedOptions,
+    };
+  },
+  methods: {
+    handleInput(selectedRating) {
+      this.$emit('ratingFilterSelection', selectedRating);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :option-height="24"
+      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+      :options="options"
+      :show-labels="false"
+      track-by="value"
+      label="label"
+      @update:model-value="handleInput"
+    />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue

@@ -0,0 +1,42 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'ReportsFiltersTeams',
+  emits: ['teamFilterSelection'],
+  data() {
+    return {
+      selectedOption: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      options: 'teams/getTeams',
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('teams/get');
+  },
+  methods: {
+    handleInput() {
+      this.$emit('teamFilterSelection', this.selectedOption);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="multiselect-wrap--small">
+    <multiselect
+      v-model="selectedOption"
+      class="no-margin"
+      :placeholder="$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL')"
+      label="name"
+      track-by="id"
+      :options="options"
+      :option-height="24"
+      :show-labels="false"
+      @update:model-value="handleInput"
+    />
+  </div>
+</template>

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

@@ -8,8 +8,8 @@ const props = defineProps({
     required: true,
   },
   id: {
-    type: [Number, null],
-    default: null,
+    type: Number,
+    required: true,
   },
   type: {
     type: String,
@@ -35,10 +35,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  showClearFilter: {
-    type: Boolean,
-    default: true,
-  },
 });
 
 const emit = defineEmits([
@@ -64,7 +60,7 @@ const closeDropdown = () => emit('closeDropdown');
       <FilterListDropdown
         v-if="options"
         v-on-clickaway="closeDropdown"
-        :show-clear-filter="showClearFilter"
+        show-clear-filter
         :list-items="options"
         :active-filter-id="id"
         :input-placeholder="placeholder"

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

@@ -1,112 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
-import subDays from 'date-fns/subDays';
-import WootDatePicker from 'dashboard/components/ui/DatePicker/DatePicker.vue';
-import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
-import {
-  generateReportURLParams,
-  parseReportURLParams,
-} from '../helpers/reportFilterHelper';
-import { DATE_RANGE_TYPES } from 'dashboard/components/ui/DatePicker/helpers/DatePickerHelper';
-
-defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['filterChange']);
-
-const route = useRoute();
-const router = useRouter();
-
-const customDateRange = ref([subDays(new Date(), 6), new Date()]);
-const selectedDateRange = ref(DATE_RANGE_TYPES.LAST_7_DAYS);
-const businessHoursSelected = ref(false);
-
-const updateURLParams = () => {
-  const params = generateReportURLParams({
-    from: getUnixStartOfDay(customDateRange.value[0]),
-    to: getUnixEndOfDay(customDateRange.value[1]),
-    businessHours: businessHoursSelected.value,
-    range: selectedDateRange.value,
-  });
-
-  router.replace({ query: { ...params } });
-};
-
-const emitChange = () => {
-  updateURLParams();
-  emit('filterChange', {
-    from: getUnixStartOfDay(customDateRange.value[0]),
-    to: getUnixEndOfDay(customDateRange.value[1]),
-    businessHours: businessHoursSelected.value,
-  });
-};
-
-const onDateRangeChange = value => {
-  const [startDate, endDate, rangeType] = value;
-  customDateRange.value = [startDate, endDate];
-  selectedDateRange.value = rangeType || DATE_RANGE_TYPES.CUSTOM_RANGE;
-  emitChange();
-};
-
-const onBusinessHoursToggle = () => {
-  emitChange();
-};
-
-const initializeFromURL = () => {
-  const urlParams = parseReportURLParams(route.query);
-
-  // Set the range type first
-  if (urlParams.range) {
-    selectedDateRange.value = urlParams.range;
-  }
-
-  // Restore dates from URL if available
-  if (urlParams.from && urlParams.to) {
-    customDateRange.value = [
-      new Date(urlParams.from * 1000),
-      new Date(urlParams.to * 1000),
-    ];
-  }
-
-  if (urlParams.businessHours) {
-    businessHoursSelected.value = urlParams.businessHours;
-  }
-};
-
-onMounted(() => {
-  initializeFromURL();
-  emitChange();
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col justify-between gap-3 md:flex-row"
-    :class="{ 'pointer-events-none opacity-50': disabled }"
-  >
-    <div class="flex flex-col flex-wrap items-start gap-2 md:flex-row">
-      <WootDatePicker
-        v-model:date-range="customDateRange"
-        v-model:range-type="selectedDateRange"
-        @date-range-changed="onDateRangeChange"
-      />
-    </div>
-    <div class="flex items-center">
-      <span class="mx-2 text-sm whitespace-nowrap">
-        {{ $t('REPORT.BUSINESS_HOURS') }}
-      </span>
-      <span>
-        <ToggleSwitch
-          v-model="businessHoursSelected"
-          @change="onBusinessHoursToggle"
-        />
-      </span>
-    </div>
-  </div>
-</template>

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

@@ -1,382 +1,349 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
-import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
+<script>
+import endOfDay from 'date-fns/endOfDay';
+import getUnixTime from 'date-fns/getUnixTime';
+import startOfDay from 'date-fns/startOfDay';
 import subDays from 'date-fns/subDays';
-import differenceInDays from 'date-fns/differenceInDays';
-import ActiveFilterChip from './Filters/v3/ActiveFilterChip.vue';
-import WootDatePicker from 'dashboard/components/ui/DatePicker/DatePicker.vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
 import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
+
 import { GROUP_BY_FILTER } from '../constants';
-import { DATE_RANGE_TYPES } from 'dashboard/components/ui/DatePicker/helpers/DatePickerHelper';
-import {
-  generateReportURLParams,
-  parseReportURLParams,
-} from '../helpers/reportFilterHelper';
+const CUSTOM_DATE_RANGE_ID = 5;
 
-const props = defineProps({
-  filterType: {
-    type: String,
-    required: false,
-    default: '',
-    validator: value =>
-      ['teams', 'inboxes', 'labels', 'agents', ''].includes(value),
+export default {
+  components: {
+    WootDateRangePicker,
+    Avatar,
+    ToggleSwitch,
   },
-  selectedItem: {
-    type: Object,
-    default: null,
+  props: {
+    currentFilter: {
+      type: Object,
+      default: () => null,
+    },
+    filterItemsList: {
+      type: Array,
+      default: () => [],
+    },
+    groupByFilterItemsList: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: 'agent',
+    },
+    selectedGroupByFilter: {
+      type: Object,
+      default: () => {},
+    },
   },
-  showGroupBy: {
-    type: Boolean,
-    default: true,
-  },
-  showBusinessHours: {
-    type: Boolean,
-    default: true,
-  },
-  showEntityFilter: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['filterChange']);
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-
-const buildReportFilterList = (items, type) => {
-  if (!Array.isArray(items)) return [];
-
-  return items.map(item => ({
-    id: item.id,
-    name: item.name || item.title,
-    type,
-  }));
-};
-
-const getReportFilterKey = filterType => {
-  const keyMap = {
-    teams: 'team_id',
-    inboxes: 'inbox_id',
-    labels: 'label_id',
-    agents: 'agent_id',
-  };
-  return keyMap[filterType] || '';
-};
-
-const getFilterKey = () => getReportFilterKey(props.filterType);
-
-const showSubDropdownMenu = ref(false);
-const showGroupByDropdown = ref(false);
-const activeFilterType = ref('');
-const customDateRange = ref([subDays(new Date(), 6), new Date()]);
-const selectedDateRange = ref(DATE_RANGE_TYPES.LAST_7_DAYS);
-const businessHoursSelected = ref(false);
-const groupBy = ref(GROUP_BY_FILTER[1]);
-const groupByfilterItemsList = ref([{ id: 1, name: 'Day' }]);
-
-const appliedFilters = ref(
-  props.showEntityFilter
-    ? { [getFilterKey()]: props.selectedItem?.id || null }
-    : {}
-);
-
-const filterSource = computed(() => {
-  const sources = {
-    teams: store.getters['teams/getTeams'],
-    inboxes: store.getters['inboxes/getInboxes'],
-    labels: store.getters['labels/getLabels'],
-    agents: store.getters['agents/getAgents'],
-  };
-  return sources[props.filterType] || [];
-});
-
-const from = computed(() => getUnixStartOfDay(customDateRange.value[0]));
-const to = computed(() => getUnixEndOfDay(customDateRange.value[1]));
-
-const daysDifference = computed(() => {
-  return differenceInDays(customDateRange.value[1], customDateRange.value[0]);
-});
-
-const isGroupByPossible = computed(() => {
-  return props.showGroupBy && daysDifference.value >= 29;
-});
-
-const GROUP_BY_OPTIONS = computed(() => ({
-  WEEK: [
-    { id: 1, name: t('REPORT.GROUPING_OPTIONS.DAY') },
-    { id: 2, name: t('REPORT.GROUPING_OPTIONS.WEEK') },
+  emits: [
+    'businessHoursToggle',
+    'dateRangeChange',
+    'filterChange',
+    'groupByFilterChange',
   ],
-  MONTH: [
-    { id: 1, name: t('REPORT.GROUPING_OPTIONS.DAY') },
-    { id: 2, name: t('REPORT.GROUPING_OPTIONS.WEEK') },
-    { id: 3, name: t('REPORT.GROUPING_OPTIONS.MONTH') },
-  ],
-  YEAR: [
-    { id: 2, name: t('REPORT.GROUPING_OPTIONS.WEEK') },
-    { id: 3, name: t('REPORT.GROUPING_OPTIONS.MONTH') },
-    { id: 4, name: t('REPORT.GROUPING_OPTIONS.YEAR') },
-  ],
-}));
-
-const fetchFilterItems = () => {
-  const days = daysDifference.value;
-  if (days >= 364) return GROUP_BY_OPTIONS.value.YEAR;
-  if (days >= 90) return GROUP_BY_OPTIONS.value.MONTH;
-  if (days >= 29) return GROUP_BY_OPTIONS.value.WEEK;
-  return GROUP_BY_OPTIONS.value.WEEK;
+  data() {
+    return {
+      currentSelectedFilter: this.currentFilter || null,
+      currentDateRangeSelection: {
+        id: 0,
+        name: this.$t('REPORT.DATE_RANGE_OPTIONS.LAST_7_DAYS'),
+      },
+      customDateRange: [new Date(), new Date()],
+      currentSelectedGroupByFilter: null,
+      businessHoursSelected: false,
+    };
+  },
+  computed: {
+    dateRange() {
+      return [
+        { id: 0, name: this.$t('REPORT.DATE_RANGE_OPTIONS.LAST_7_DAYS') },
+        { id: 1, name: this.$t('REPORT.DATE_RANGE_OPTIONS.LAST_30_DAYS') },
+        { id: 2, name: this.$t('REPORT.DATE_RANGE_OPTIONS.LAST_3_MONTHS') },
+        { id: 3, name: this.$t('REPORT.DATE_RANGE_OPTIONS.LAST_6_MONTHS') },
+        { id: 4, name: this.$t('REPORT.DATE_RANGE_OPTIONS.LAST_YEAR') },
+        { id: 5, name: this.$t('REPORT.DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE') },
+      ];
+    },
+    isDateRangeSelected() {
+      return this.currentDateRangeSelection.id === CUSTOM_DATE_RANGE_ID;
+    },
+    to() {
+      if (this.isDateRangeSelected) {
+        return this.toCustomDate(this.customDateRange[1]);
+      }
+      return this.toCustomDate(new Date());
+    },
+    from() {
+      if (this.isDateRangeSelected) {
+        return this.fromCustomDate(this.customDateRange[0]);
+      }
+      const dateRange = {
+        0: 6,
+        1: 29,
+        2: 89,
+        3: 179,
+        4: 364,
+      };
+      const diff = dateRange[this.currentDateRangeSelection.id];
+      const fromDate = subDays(new Date(), diff);
+      return this.fromCustomDate(fromDate);
+    },
+    multiselectLabel() {
+      const typeLabels = {
+        agent: this.$t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL'),
+        label: this.$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL'),
+        inbox: this.$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL'),
+        team: this.$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL'),
+      };
+      return typeLabels[this.type] || this.$t('FORMS.MULTISELECT.SELECT_ONE');
+    },
+    groupBy() {
+      if (this.isDateRangeSelected) {
+        return GROUP_BY_FILTER[4].period;
+      }
+      const groupRange = {
+        0: GROUP_BY_FILTER[1].period,
+        1: GROUP_BY_FILTER[2].period,
+        2: GROUP_BY_FILTER[3].period,
+        3: GROUP_BY_FILTER[3].period,
+        4: GROUP_BY_FILTER[4].period,
+      };
+      return groupRange[this.currentDateRangeSelection.id];
+    },
+    notLast7Days() {
+      return this.groupBy !== GROUP_BY_FILTER[1].period;
+    },
+  },
+  watch: {
+    filterItemsList(val) {
+      this.currentSelectedFilter = !this.currentFilter
+        ? val[0]
+        : this.currentFilter;
+      this.changeFilterSelection();
+    },
+    groupByFilterItemsList() {
+      this.currentSelectedGroupByFilter = this.selectedGroupByFilter;
+    },
+  },
+  mounted() {
+    this.onDateRangeChange();
+  },
+  methods: {
+    onDateRangeChange() {
+      this.$emit('dateRangeChange', {
+        from: this.from,
+        to: this.to,
+        groupBy: this.groupBy,
+      });
+    },
+    onBusinessHoursToggle() {
+      this.$emit('businessHoursToggle', this.businessHoursSelected);
+    },
+    fromCustomDate(date) {
+      return getUnixTime(startOfDay(date));
+    },
+    toCustomDate(date) {
+      return getUnixTime(endOfDay(date));
+    },
+    changeDateSelection(selectedRange) {
+      this.currentDateRangeSelection = selectedRange;
+      this.onDateRangeChange();
+    },
+    changeFilterSelection() {
+      this.$emit('filterChange', this.currentSelectedFilter);
+    },
+    onChange(value) {
+      this.customDateRange = value;
+      this.onDateRangeChange();
+    },
+    changeGroupByFilterSelection() {
+      this.$emit('groupByFilterChange', this.currentSelectedGroupByFilter);
+    },
+  },
 };
-
-const filterOptions = computed(() =>
-  buildReportFilterList(filterSource.value, props.filterType)
-);
-
-const filterPlaceholder = computed(() => {
-  const placeholders = {
-    teams: 'TEAM_REPORTS.FILTERS.INPUT_PLACEHOLDER.TEAMS',
-    inboxes: 'INBOX_REPORTS.FILTERS.INPUT_PLACEHOLDER.INBOXES',
-    labels: 'LABEL_REPORTS.FILTERS.INPUT_PLACEHOLDER.LABELS',
-    agents: 'AGENT_REPORTS.FILTERS.INPUT_PLACEHOLDER.AGENTS',
-  };
-  return t(placeholders[props.filterType] || '');
-});
-
-const defaultFilterLabel = computed(() => {
-  const labelKeys = {
-    teams: 'TEAM_REPORTS.FILTER_DROPDOWN_LABEL',
-    inboxes: 'INBOX_REPORTS.FILTER_DROPDOWN_LABEL',
-    labels: 'LABEL_REPORTS.FILTER_DROPDOWN_LABEL',
-    agents: 'AGENT_REPORTS.FILTER_DROPDOWN_LABEL',
-  };
-  return t(labelKeys[props.filterType] || 'FORMS.MULTISELECT.SELECT_ONE');
-});
-
-const selectedFilterName = computed(() => {
-  const filterKey = getFilterKey();
-  const selectedId = appliedFilters.value[filterKey];
-
-  if (!selectedId) {
-    return defaultFilterLabel.value;
-  }
-
-  const selectedItem = filterOptions.value.find(item => item.id === selectedId);
-  return selectedItem?.name || defaultFilterLabel.value;
-});
-
-const updateURLParams = () => {
-  const params = generateReportURLParams({
-    from: from.value,
-    to: to.value,
-    businessHours: businessHoursSelected.value,
-    groupBy: isGroupByPossible.value ? groupBy.value.id : null,
-    range: selectedDateRange.value,
-  });
-
-  router.replace({ query: { ...params } });
-};
-
-const emitChange = () => {
-  const payload = {
-    from: from.value,
-    to: to.value,
-    businessHours: businessHoursSelected.value,
-  };
-
-  if (props.showGroupBy) {
-    // Always emit groupBy, default to day when range is too short
-    payload.groupBy = isGroupByPossible.value
-      ? groupBy.value
-      : GROUP_BY_FILTER[1];
-  }
-
-  if (props.showEntityFilter) {
-    const filterKey = getFilterKey();
-    const selectedValue = appliedFilters.value[filterKey];
-
-    if (selectedValue) {
-      payload[props.filterType] =
-        props.filterType === 'agents'
-          ? [{ id: selectedValue }]
-          : { id: selectedValue };
-    }
-  }
-
-  updateURLParams();
-  emit('filterChange', payload);
-};
-
-const closeActiveFilterDropdown = () => {
-  showSubDropdownMenu.value = false;
-  activeFilterType.value = '';
-};
-
-const openActiveFilterDropdown = filterType => {
-  showGroupByDropdown.value = false;
-  activeFilterType.value = filterType;
-  showSubDropdownMenu.value = !showSubDropdownMenu.value;
-};
-
-const addFilter = item => {
-  const filterKey = getFilterKey();
-  appliedFilters.value[filterKey] = item.id;
-  closeActiveFilterDropdown();
-  emitChange();
-
-  // Navigate to the new entity's route
-  const routeNameMap = {
-    teams: 'team_reports_show',
-    inboxes: 'inbox_reports_show',
-    labels: 'label_reports_show',
-    agents: 'agent_reports_show',
-  };
-
-  const routeName = routeNameMap[props.filterType];
-  if (routeName) {
-    router.push({
-      name: routeName,
-      params: { ...route.params, id: item.id },
-      query: route.query,
-    });
-  }
-};
-
-const onDateRangeChange = value => {
-  const [startDate, endDate, rangeType] = value;
-  customDateRange.value = [startDate, endDate];
-  selectedDateRange.value = rangeType || DATE_RANGE_TYPES.CUSTOM_RANGE;
-  groupByfilterItemsList.value = fetchFilterItems();
-  const filterItems = groupByfilterItemsList.value.filter(
-    item => item.id === groupBy.value.id
-  );
-  if (filterItems.length === 0) {
-    groupBy.value = GROUP_BY_FILTER[groupByfilterItemsList.value[0].id];
-  }
-  emitChange();
-};
-
-const onBusinessHoursToggle = () => {
-  emitChange();
-};
-
-const onGroupByFilterChange = payload => {
-  groupBy.value = GROUP_BY_FILTER[payload.id];
-  showGroupByDropdown.value = false;
-  emitChange();
-};
-
-const toggleGroupByDropdown = () => {
-  showGroupByDropdown.value = !showGroupByDropdown.value;
-};
-
-const closeGroupByDropdown = () => {
-  showGroupByDropdown.value = false;
-};
-
-const initializeFromURL = () => {
-  const urlParams = parseReportURLParams(route.query);
-
-  // Set the range type first
-  if (urlParams.range) {
-    selectedDateRange.value = urlParams.range;
-  }
-
-  // Restore dates from URL if available
-  if (urlParams.from && urlParams.to) {
-    customDateRange.value = [
-      new Date(urlParams.from * 1000),
-      new Date(urlParams.to * 1000),
-    ];
-  }
-
-  if (urlParams.businessHours) {
-    businessHoursSelected.value = urlParams.businessHours;
-  }
-
-  if (urlParams.groupBy) {
-    const groupByValue = GROUP_BY_FILTER[urlParams.groupBy];
-    if (groupByValue) {
-      groupBy.value = groupByValue;
-    }
-  }
-
-  // Initialize entity filter from route params (not URL query)
-  if (props.showEntityFilter && route.params.id) {
-    const filterKey = getFilterKey();
-    appliedFilters.value[filterKey] = Number(route.params.id);
-  }
-};
-
-onMounted(() => {
-  initializeFromURL();
-  groupByfilterItemsList.value = fetchFilterItems();
-  emitChange();
-});
 </script>
 
 <template>
-  <div class="flex flex-col w-full gap-3 lg:flex-row">
-    <WootDatePicker
-      v-model:date-range="customDateRange"
-      v-model:range-type="selectedDateRange"
-      @date-range-changed="onDateRangeChange"
-    />
-
-    <div class="flex gap-2 items-center w-full">
-      <ActiveFilterChip
-        v-if="showEntityFilter"
-        :id="appliedFilters[getFilterKey()]"
-        :name="selectedFilterName"
-        :type="filterType"
-        :options="filterOptions"
-        :active-filter-type="activeFilterType"
-        :show-menu="showSubDropdownMenu"
-        :placeholder="filterPlaceholder"
-        :show-clear-filter="false"
-        enable-search
-        @toggle-dropdown="openActiveFilterDropdown"
-        @close-dropdown="closeActiveFilterDropdown"
-        @add-filter="addFilter"
-      />
-
-      <ActiveFilterChip
-        v-if="isGroupByPossible"
-        :id="groupBy?.id"
-        :name="
-          groupByfilterItemsList.find(item => item.id === groupBy?.id)?.name ||
-          $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')
-        "
-        type="groupBy"
-        :options="groupByfilterItemsList"
-        :active-filter-type="showGroupByDropdown ? 'groupBy' : ''"
-        :show-menu="showGroupByDropdown"
-        :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
-        :enable-search="false"
-        :show-clear-filter="false"
-        @toggle-dropdown="toggleGroupByDropdown"
-        @close-dropdown="closeGroupByDropdown"
-        @add-filter="onGroupByFilterChange"
-        @remove-filter="() => {}"
-      />
-
-      <div
-        v-if="showBusinessHours"
-        class="flex items-center flex-shrink-0 ltr:ml-auto rtl:mr-auto"
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-y-0.5 gap-x-2">
+    <div v-if="type === 'agent'" class="multiselect-wrap--small">
+      <p class="mb-2 text-xs font-medium">
+        {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
+      </p>
+      <multiselect
+        v-model="currentSelectedFilter"
+        :placeholder="multiselectLabel"
+        label="name"
+        track-by="id"
+        :options="filterItemsList"
+        :option-height="24"
+        :show-labels="false"
+        @update:model-value="changeFilterSelection"
       >
-        <span class="mx-2 text-sm whitespace-nowrap">
-          {{ $t('REPORT.BUSINESS_HOURS') }}
-        </span>
-        <span>
-          <ToggleSwitch
-            v-model="businessHoursSelected"
-            @change="onBusinessHoursToggle"
-          />
-        </span>
-      </div>
+        <template #singleLabel="props">
+          <div class="flex min-w-0 items-center gap-2">
+            <Avatar
+              :src="props.option.thumbnail"
+              :status="props.option.availability_status"
+              :name="props.option.name"
+              :size="22"
+              hide-offline-status
+              rounded-full
+            />
+            <span class="my-0 text-n-slate-12 truncate">{{
+              props.option.name
+            }}</span>
+          </div>
+        </template>
+        <template #options="props">
+          <div class="flex items-center gap-2">
+            <Avatar
+              :src="props.option.thumbnail"
+              :status="props.option.availability_status"
+              :name="props.option.name"
+              :size="22"
+              hide-offline-status
+              rounded-full
+            />
+            <p class="my-0 text-n-slate-12">
+              {{ props.option.name }}
+            </p>
+          </div>
+        </template>
+      </multiselect>
+    </div>
+
+    <div v-else-if="type === 'label'" class="multiselect-wrap--small">
+      <p class="mb-2 text-xs font-medium">
+        {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
+      </p>
+      <multiselect
+        v-model="currentSelectedFilter"
+        :placeholder="multiselectLabel"
+        label="title"
+        track-by="id"
+        :options="filterItemsList"
+        :option-height="24"
+        :show-labels="false"
+        @update:model-value="changeFilterSelection"
+      >
+        <template #singleLabel="props">
+          <div class="flex items-center min-w-0 gap-2">
+            <div
+              :style="{ backgroundColor: props.option.color }"
+              class="w-5 h-5 rounded-full"
+            />
+
+            <span class="my-0 text-n-slate-12 truncate">
+              {{ props.option.title }}
+            </span>
+          </div>
+        </template>
+        <template #option="props">
+          <div class="flex items-center min-w-0 gap-2">
+            <div
+              :style="{ backgroundColor: props.option.color }"
+              class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-n-weak"
+            />
+
+            <span class="my-0 text-n-slate-12 truncate">
+              {{ props.option.title }}
+            </span>
+          </div>
+        </template>
+      </multiselect>
+    </div>
+
+    <div v-else class="multiselect-wrap--small">
+      <p class="mb-2 text-xs font-medium">
+        <template v-if="type === 'inbox'">
+          {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
+        </template>
+        <template v-else-if="type === 'team'">
+          {{ $t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL') }}
+        </template>
+        <template v-else>
+          {{ $t('FORMS.MULTISELECT.SELECT_ONE') }}
+        </template>
+      </p>
+      <multiselect
+        v-model="currentSelectedFilter"
+        track-by="id"
+        label="name"
+        :placeholder="multiselectLabel"
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        deselect-label=""
+        :options="filterItemsList"
+        :searchable="false"
+        :allow-empty="false"
+        @update:model-value="changeFilterSelection"
+      />
+    </div>
+
+    <div class="multiselect-wrap--small">
+      <p class="mb-2 text-xs font-medium">
+        {{ $t('REPORT.DURATION_FILTER_LABEL') }}
+      </p>
+      <multiselect
+        v-model="currentDateRangeSelection"
+        track-by="name"
+        label="name"
+        :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        deselect-label=""
+        :options="dateRange"
+        :searchable="false"
+        :allow-empty="false"
+        @select="changeDateSelection"
+      />
+    </div>
+
+    <div
+      class="flex items-center h-10 self-center order-5 md:order-2 md:justify-self-end"
+    >
+      <span class="mr-2 text-sm whitespace-nowrap">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+      </span>
+      <span>
+        <ToggleSwitch
+          v-model="businessHoursSelected"
+          @change="onBusinessHoursToggle"
+        />
+      </span>
+    </div>
+
+    <div v-if="isDateRangeSelected" class="order-3 md:order-4">
+      <p class="mb-2 text-xs font-medium">
+        {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
+      </p>
+      <WootDateRangePicker
+        show-range
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        class="auto-width"
+        @change="onChange"
+      />
+    </div>
+
+    <div v-if="notLast7Days" class="multiselect-wrap--small order-4 md:order-5">
+      <p class="mb-2 text-xs font-medium">
+        {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
+      </p>
+      <multiselect
+        v-model="currentSelectedGroupByFilter"
+        track-by="id"
+        label="groupBy"
+        :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
+        :options="groupByFilterItemsList"
+        :allow-empty="false"
+        :show-labels="false"
+        @update:model-value="changeGroupByFilterSelection"
+      />
     </div>
   </div>
 </template>

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

@@ -1,201 +1,155 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
+<script>
+import { mapGetters } from 'vuex';
 import {
   buildFilterList,
   getActiveFilter,
   getFilterType,
 } from './helpers/SLAFilterHelpers';
-import {
-  parseFilterURLParams,
-  generateCompleteURLParams,
-} from '../../helpers/reportFilterHelper';
 import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
 import ActiveFilterChip from '../Filters/v3/ActiveFilterChip.vue';
 import AddFilterChip from '../Filters/v3/AddFilterChip.vue';
 
-const emit = defineEmits(['filterChange']);
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-
-const showDropdownMenu = ref(false);
-const showSubDropdownMenu = ref(false);
-const activeFilterType = ref('');
-const appliedFilters = ref({
-  assigned_agent_id: null,
-  inbox_id: null,
-  team_id: null,
-  sla_policy_id: null,
-  label_list: null,
-});
-
-const agents = computed(() => store.getters['agents/getAgents']);
-const inboxes = computed(() => store.getters['inboxes/getInboxes']);
-const teams = computed(() => store.getters['teams/getTeams']);
-const labels = computed(() => store.getters['labels/getLabels']);
-const sla = computed(() => store.getters['sla/getSLA']);
-
-const filterListMenuItems = computed(() => {
-  const filterTypes = [
-    { id: '1', name: t('SLA_REPORTS.DROPDOWN.SLA'), type: 'sla' },
-    { id: '2', name: t('SLA_REPORTS.DROPDOWN.INBOXES'), type: 'inboxes' },
-    { id: '3', name: t('SLA_REPORTS.DROPDOWN.AGENTS'), type: 'agents' },
-    { id: '4', name: t('SLA_REPORTS.DROPDOWN.TEAMS'), type: 'teams' },
-    { id: '5', name: t('SLA_REPORTS.DROPDOWN.LABELS'), type: 'labels' },
-  ];
-
-  const activeFilterKeys = Object.keys(appliedFilters.value).filter(
-    key => appliedFilters.value[key]
-  );
-  const activeFilterTypes = activeFilterKeys.map(key =>
-    getFilterType(key, 'keyToType')
-  );
-
-  const sources = {
-    agents: agents.value,
-    inboxes: inboxes.value,
-    teams: teams.value,
-    labels: labels.value,
-    sla: sla.value,
-  };
-
-  return filterTypes
-    .filter(({ type }) => !activeFilterTypes.includes(type))
-    .map(({ id, name, type }) => ({
-      id,
-      name,
-      type,
-      options: buildFilterList(sources[type], type),
-    }));
-});
-
-const activeFilters = computed(() => {
-  const activeKeys = Object.keys(appliedFilters.value).filter(
-    key => appliedFilters.value[key]
-  );
-
-  const sources = {
-    agents: agents.value,
-    inboxes: inboxes.value,
-    teams: teams.value,
-    labels: labels.value,
-    sla: sla.value,
-  };
-
-  return activeKeys.map(key => {
-    const filterType = getFilterType(key, 'keyToType');
-    const item = getActiveFilter(
-      sources[filterType],
-      filterType,
-      appliedFilters.value[key]
-    );
+export default {
+  components: {
+    FilterButton,
+    ActiveFilterChip,
+    AddFilterChip,
+  },
+  emits: ['filterChange'],
+  data() {
     return {
-      id: item.id,
-      name: filterType === 'labels' ? item.title : item.name,
-      type: filterType,
-      options: buildFilterList(sources[filterType], filterType),
+      showDropdownMenu: false,
+      showSubDropdownMenu: false,
+      activeFilterType: '',
+      appliedFilters: {
+        assigned_agent_id: null,
+        inbox_id: null,
+        team_id: null,
+        sla_policy_id: null,
+        label_list: null,
+      },
     };
-  });
-});
-
-const hasActiveFilters = computed(() =>
-  Object.values(appliedFilters.value).some(value => value !== null)
-);
-
-const isAllFilterSelected = computed(() => !filterListMenuItems.value.length);
-
-const updateURLParams = () => {
-  const params = generateCompleteURLParams({
-    from: route.query.from,
-    to: route.query.to,
-    range: route.query.range,
-    filters: {
-      agent_id: appliedFilters.value.assigned_agent_id,
-      inbox_id: appliedFilters.value.inbox_id,
-      team_id: appliedFilters.value.team_id,
-      sla_policy_id: appliedFilters.value.sla_policy_id,
-      label: appliedFilters.value.label_list,
+  },
+  computed: {
+    ...mapGetters({
+      agents: 'agents/getAgents',
+      inboxes: 'inboxes/getInboxes',
+      teams: 'teams/getTeams',
+      labels: 'labels/getLabels',
+      sla: 'sla/getSLA',
+    }),
+    filterListMenuItems() {
+      const filterTypes = [
+        { id: '1', name: this.$t('SLA_REPORTS.DROPDOWN.SLA'), type: 'sla' },
+        {
+          id: '2',
+          name: this.$t('SLA_REPORTS.DROPDOWN.INBOXES'),
+          type: 'inboxes',
+        },
+        {
+          id: '3',
+          name: this.$t('SLA_REPORTS.DROPDOWN.AGENTS'),
+          type: 'agents',
+        },
+        { id: '4', name: this.$t('SLA_REPORTS.DROPDOWN.TEAMS'), type: 'teams' },
+        {
+          id: '5',
+          name: this.$t('SLA_REPORTS.DROPDOWN.LABELS'),
+          type: 'labels',
+        },
+      ];
+      // Filter out the active filters from the filter list
+      // We only want to show the filters that are not already applied
+      // In the add filter dropdown
+      const activeFilters = Object.keys(this.appliedFilters).filter(
+        key => this.appliedFilters[key]
+      );
+      const activeFilterTypes = activeFilters.map(key =>
+        getFilterType(key, 'keyToType')
+      );
+      return filterTypes
+        .filter(({ type }) => !activeFilterTypes.includes(type))
+        .map(({ id, name, type }) => ({
+          id,
+          name,
+          type,
+          options: buildFilterList(this[type], type),
+        }));
     },
-  });
-  router.replace({ query: params });
+    activeFilters() {
+      // Get the active filters from the applied filters
+      // and return the filter name, type and options
+      const activeKey = Object.keys(this.appliedFilters).filter(
+        key => this.appliedFilters[key]
+      );
+      return activeKey.map(key => {
+        const filterType = getFilterType(key, 'keyToType');
+        const item = getActiveFilter(
+          this[filterType],
+          filterType,
+          this.appliedFilters[key]
+        );
+        return {
+          id: item.id,
+          name: filterType === 'labels' ? item.title : item.name,
+          type: filterType,
+          options: buildFilterList(this[filterType], filterType),
+        };
+      });
+    },
+    hasActiveFilters() {
+      return Object.values(this.appliedFilters).some(value => value !== null);
+    },
+    isAllFilterSelected() {
+      return !this.filterListMenuItems.length;
+    },
+  },
+  methods: {
+    addFilter(item) {
+      const { type, id, name } = item;
+      const filterKey = getFilterType(type, 'typeToKey');
+      this.appliedFilters[filterKey] = type === 'labels' ? name : id;
+      this.$emit('filterChange', this.appliedFilters);
+      this.resetDropdown();
+    },
+    removeFilter(type) {
+      const filterKey = getFilterType(type, 'typeToKey');
+      this.appliedFilters[filterKey] = null;
+      this.$emit('filterChange', this.appliedFilters);
+    },
+    clearAllFilters() {
+      this.appliedFilters = {
+        assigned_agent_id: null,
+        inbox_id: null,
+        team_id: null,
+        sla_policy_id: null,
+        label_list: null,
+      };
+      this.$emit('filterChange', this.appliedFilters);
+      this.resetDropdown();
+    },
+    showDropdown() {
+      this.showSubDropdownMenu = false;
+      this.showDropdownMenu = !this.showDropdownMenu;
+    },
+    closeDropdown() {
+      this.showDropdownMenu = false;
+    },
+    openActiveFilterDropdown(filterType) {
+      this.closeDropdown();
+      this.activeFilterType = filterType;
+      this.showSubDropdownMenu = !this.showSubDropdownMenu;
+    },
+    closeActiveFilterDropdown() {
+      this.activeFilterType = '';
+      this.showSubDropdownMenu = false;
+    },
+    resetDropdown() {
+      this.closeDropdown();
+      this.closeActiveFilterDropdown();
+    },
+  },
 };
-
-const emitChange = () => {
-  updateURLParams();
-  emit('filterChange', appliedFilters.value);
-};
-
-const showDropdown = () => {
-  showSubDropdownMenu.value = false;
-  showDropdownMenu.value = !showDropdownMenu.value;
-};
-
-const closeDropdown = () => {
-  showDropdownMenu.value = false;
-};
-
-const openActiveFilterDropdown = filterType => {
-  closeDropdown();
-  activeFilterType.value = filterType;
-  showSubDropdownMenu.value = !showSubDropdownMenu.value;
-};
-
-const closeActiveFilterDropdown = () => {
-  activeFilterType.value = '';
-  showSubDropdownMenu.value = false;
-};
-
-const resetDropdown = () => {
-  closeDropdown();
-  closeActiveFilterDropdown();
-};
-
-const addFilter = item => {
-  const { type, id, name } = item;
-  const filterKey = getFilterType(type, 'typeToKey');
-  appliedFilters.value[filterKey] = type === 'labels' ? name : id;
-  emitChange();
-  resetDropdown();
-};
-
-const removeFilter = type => {
-  const filterKey = getFilterType(type, 'typeToKey');
-  appliedFilters.value[filterKey] = null;
-  emitChange();
-};
-
-const clearAllFilters = () => {
-  appliedFilters.value = {
-    assigned_agent_id: null,
-    inbox_id: null,
-    team_id: null,
-    sla_policy_id: null,
-    label_list: null,
-  };
-  emitChange();
-  resetDropdown();
-};
-
-const initializeFromURL = () => {
-  const urlFilters = parseFilterURLParams(route.query);
-  appliedFilters.value.assigned_agent_id = urlFilters.agent_id;
-  appliedFilters.value.inbox_id = urlFilters.inbox_id;
-  appliedFilters.value.team_id = urlFilters.team_id;
-  appliedFilters.value.sla_policy_id = urlFilters.sla_policy_id;
-  appliedFilters.value.label_list = urlFilters.label;
-};
-
-onMounted(() => {
-  initializeFromURL();
-  if (hasActiveFilters.value) {
-    emitChange();
-  }
-});
 </script>
 
 <template>

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

@@ -1,98 +1,73 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+<script>
 import SLAFilter from '../SLA/SLAFilter.vue';
-import WootDatePicker from 'dashboard/components/ui/DatePicker/DatePicker.vue';
-import { subDays, fromUnixTime } from 'date-fns';
+import subDays from 'date-fns/subDays';
+import { DATE_RANGE_OPTIONS } from '../../constants';
 import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
-import {
-  generateReportURLParams,
-  parseReportURLParams,
-  parseFilterURLParams,
-} from '../../helpers/reportFilterHelper';
 
-const emit = defineEmits(['filterChange']);
+export default {
+  components: {
+    SLAFilter,
+  },
+  emits: ['filterChange'],
 
-const route = useRoute();
-const router = useRouter();
-
-// Initialize from URL params immediately
-const urlParams = parseReportURLParams(route.query);
-const initialDateRange =
-  urlParams.from && urlParams.to
-    ? [fromUnixTime(urlParams.from), fromUnixTime(urlParams.to)]
-    : [subDays(new Date(), 6), new Date()];
-
-const selectedDateRange = ref(urlParams.range || 'last7days');
-const selectedGroupByFilter = ref(null);
-const customDateRange = ref(initialDateRange);
-
-const to = computed(() => getUnixEndOfDay(customDateRange.value[1]));
-const from = computed(() => getUnixStartOfDay(customDateRange.value[0]));
-
-const updateURLParams = () => {
-  const dateParams = generateReportURLParams({
-    from: from.value,
-    to: to.value,
-    range: selectedDateRange.value,
-  });
-
-  const filterParams = parseFilterURLParams(route.query);
-  const params = { ...dateParams };
-
-  if (filterParams.agent_id) params.agent_id = filterParams.agent_id;
-  if (filterParams.inbox_id) params.inbox_id = filterParams.inbox_id;
-  if (filterParams.team_id) params.team_id = filterParams.team_id;
-  if (filterParams.sla_policy_id)
-    params.sla_policy_id = filterParams.sla_policy_id;
-  if (filterParams.label) params.label = filterParams.label;
-
-  router.replace({ query: params });
+  data() {
+    return {
+      selectedDateRange: DATE_RANGE_OPTIONS.LAST_7_DAYS,
+      selectedGroupByFilter: null,
+      customDateRange: [new Date(), new Date()],
+    };
+  },
+  computed: {
+    to() {
+      return getUnixEndOfDay(this.customDateRange[1]);
+    },
+    from() {
+      return getUnixStartOfDay(this.customDateRange[0]);
+    },
+  },
+  watch: {
+    businessHoursSelected() {
+      this.emitChange();
+    },
+  },
+  mounted() {
+    this.setInitialRange();
+  },
+  methods: {
+    setInitialRange() {
+      const { offset } = this.selectedDateRange;
+      const fromDate = subDays(new Date(), offset);
+      const from = getUnixStartOfDay(fromDate);
+      const to = getUnixEndOfDay(new Date());
+      this.$emit('filterChange', {
+        from,
+        to,
+        ...this.selectedGroupByFilter,
+      });
+    },
+    emitChange() {
+      const { from, to } = this;
+      this.$emit('filterChange', {
+        from,
+        to,
+        ...this.selectedGroupByFilter,
+      });
+    },
+    emitFilterChange(params) {
+      this.selectedGroupByFilter = params;
+      this.emitChange();
+    },
+    onDateRangeChange(value) {
+      this.customDateRange = value;
+      this.emitChange();
+    },
+  },
 };
-
-const emitChange = () => {
-  updateURLParams();
-  emit('filterChange', {
-    from: from.value,
-    to: to.value,
-    ...selectedGroupByFilter.value,
-  });
-};
-
-const emitFilterChange = params => {
-  selectedGroupByFilter.value = params;
-  emit('filterChange', {
-    from: from.value,
-    to: to.value,
-    ...selectedGroupByFilter.value,
-  });
-};
-
-const onDateRangeChange = ([startDate, endDate, rangeType]) => {
-  customDateRange.value = [startDate, endDate];
-  selectedDateRange.value = rangeType;
-  emitChange();
-};
-
-const setInitialRange = () => {
-  customDateRange.value = [subDays(new Date(), 6), new Date()];
-  emitChange();
-};
-
-onMounted(() => {
-  if (!route.query.from || !route.query.to) {
-    setInitialRange();
-  }
-});
 </script>
 
 <template>
   <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
-    <WootDatePicker
-      v-model:date-range="customDateRange"
-      v-model:range-type="selectedDateRange"
-      @date-range-changed="onDateRangeChange"
-    />
+    <woot-date-picker @date-range-changed="onDateRangeChange" />
     <SLAFilter @filter-change="emitFilterChange" />
   </div>
 </template>

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

@@ -1,9 +1,7 @@
 <script setup>
-import OverviewReportFilters from './OverviewReportFilters.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ReportFilterSelector from './FilterSelector.vue';
 import { formatTime } from '@chatwoot/utils';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
 import Table from 'dashboard/components/table/Table.vue';
 import { generateFileName } from 'dashboard/helper/downloadHelper';
 import {
@@ -44,16 +42,6 @@ const businessHours = ref(false);
 import { useI18n } from 'vue-i18n';
 import SummaryReportLink from './SummaryReportLink.vue';
 
-const flagMap = {
-  agent: 'isFetchingAgentSummaryReports',
-  inbox: 'isFetchingInboxSummaryReports',
-  team: 'isFetchingTeamSummaryReports',
-  label: 'isFetchingLabelSummaryReports',
-};
-
-const uiFlags = useMapGetter('summaryReports/getUIFlags');
-const isLoading = computed(() => uiFlags.value[flagMap[props.type]] ?? false);
-
 const rowItems = useMapGetter([props.getterKey]) || [];
 const reportMetrics = useMapGetter([props.summaryKey]) || [];
 
@@ -132,26 +120,13 @@ const tableData = computed(() =>
   })
 );
 
-const fetchReportsWithRetry = async () => {
-  const params = {
+const fetchAllData = () => {
+  store.dispatch(props.fetchItemsKey);
+  store.dispatch(props.actionKey, {
     since: from.value,
     until: to.value,
     businessHours: businessHours.value,
-  };
-  try {
-    await store.dispatch(props.actionKey, params);
-  } catch {
-    try {
-      await store.dispatch(props.actionKey, params);
-    } catch {
-      useAlert(t('REPORT.SUMMARY_FETCHING_FAILED'));
-    }
-  }
-};
-
-const fetchAllData = () => {
-  store.dispatch(props.fetchItemsKey);
-  fetchReportsWithRetry();
+  });
 };
 
 onMounted(() => fetchAllData());
@@ -203,28 +178,10 @@ defineExpose({ downloadReports });
 </script>
 
 <template>
-  <OverviewReportFilters
-    :disabled="isLoading"
-    @filter-change="onFilterChange"
-  />
+  <ReportFilterSelector @filter-change="onFilterChange" />
   <div
-    class="relative flex-1 overflow-auto px-2 py-2 mt-5 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2"
+    class="flex-1 overflow-auto px-2 py-2 mt-5 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2"
   >
     <Table :table="table" />
-    <Transition
-      enter-active-class="transition-opacity duration-300 ease-out"
-      leave-active-class="transition-opacity duration-200 ease-in"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="isLoading"
-        class="absolute inset-0 flex justify-center pt-[12.5rem] bg-n-solid-1/70 rounded-xl pointer-events-none"
-      >
-        <Spinner :size="32" class="text-n-brand" />
-      </div>
-    </Transition>
   </div>
 </template>

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

@@ -1,12 +1,31 @@
 <script>
 import V4Button from 'dashboard/components-next/button/Button.vue';
-import { useAlert } from 'dashboard/composables';
+import { useAlert, useTrack } from 'dashboard/composables';
 import ReportFilters from './ReportFilters.vue';
 import ReportContainer from '../ReportContainer.vue';
 import { GROUP_BY_FILTER } from '../constants';
 import { generateFileName } from '../../../../../helper/downloadHelper';
+import { REPORTS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 import ReportHeader from './ReportHeader.vue';
 
+const GROUP_BY_OPTIONS = {
+  DAY: [{ id: 1, groupByKey: 'REPORT.GROUPING_OPTIONS.DAY' }],
+  WEEK: [
+    { id: 1, groupByKey: 'REPORT.GROUPING_OPTIONS.DAY' },
+    { id: 2, groupByKey: 'REPORT.GROUPING_OPTIONS.WEEK' },
+  ],
+  MONTH: [
+    { id: 1, groupByKey: 'REPORT.GROUPING_OPTIONS.DAY' },
+    { id: 2, groupByKey: 'REPORT.GROUPING_OPTIONS.WEEK' },
+    { id: 3, groupByKey: 'REPORT.GROUPING_OPTIONS.MONTH' },
+  ],
+  YEAR: [
+    { id: 2, groupByKey: 'REPORT.GROUPING_OPTIONS.WEEK' },
+    { id: 3, groupByKey: 'REPORT.GROUPING_OPTIONS.MONTH' },
+    { id: 4, groupByKey: 'REPORT.GROUPING_OPTIONS.YEAR' },
+  ],
+};
+
 export default {
   components: {
     ReportHeader,
@@ -50,19 +69,12 @@ export default {
       to: 0,
       selectedFilter: this.selectedItem,
       groupBy: GROUP_BY_FILTER[1],
+      groupByfilterItemsList: GROUP_BY_OPTIONS.DAY.map(this.translateOptions),
+      selectedGroupByFilter: null,
       businessHours: false,
     };
   },
   computed: {
-    filterType() {
-      const pluralMap = {
-        agent: 'agents',
-        team: 'teams',
-        inbox: 'inboxes',
-        label: 'labels',
-      };
-      return pluralMap[this.type] || this.type;
-    },
     filterItemsList() {
       return this.$store.getters[this.getterKey] || [];
     },
@@ -133,30 +145,70 @@ export default {
         this.$store.dispatch(dispatchMethods[type], params);
       }
     },
-    onFilterChange(payload) {
-      const { from, to, businessHours, groupBy } = payload;
+    onDateRangeChange({ from, to, groupBy }) {
+      // do not track filter change on inital load
+      if (this.from !== 0 && this.to !== 0) {
+        useTrack(REPORTS_EVENTS.FILTER_REPORT, {
+          filterType: 'date',
+          reportType: this.type,
+        });
+      }
+
       this.from = from;
       this.to = to;
-      this.businessHours = businessHours;
-
-      if (groupBy) {
-        this.groupBy = groupBy;
+      this.groupByfilterItemsList = this.fetchFilterItems(groupBy);
+      const filterItems = this.groupByfilterItemsList.filter(
+        item => item.id === this.groupBy.id
+      );
+      if (filterItems.length > 0) {
+        this.selectedGroupByFilter = filterItems[0];
       } else {
-        this.groupBy = GROUP_BY_FILTER[1];
+        this.selectedGroupByFilter = this.groupByfilterItemsList[0];
+        this.groupBy = GROUP_BY_FILTER[this.selectedGroupByFilter.id];
       }
-
-      // Get filter value directly from filterType key
-      const filterValue = payload[this.filterType];
-      if (filterValue) {
-        this.selectedFilter = Array.isArray(filterValue)
-          ? filterValue[0]
-          : filterValue;
-      } else {
-        this.selectedFilter = null;
-      }
-
       this.fetchAllData();
     },
+    onFilterChange(payload) {
+      if (payload) {
+        this.selectedFilter = payload;
+        this.fetchAllData();
+      }
+    },
+    onGroupByFilterChange(payload) {
+      this.groupBy = GROUP_BY_FILTER[payload.id];
+      this.fetchAllData();
+
+      useTrack(REPORTS_EVENTS.FILTER_REPORT, {
+        filterType: 'groupBy',
+        filterValue: this.groupBy?.period,
+        reportType: this.type,
+      });
+    },
+    fetchFilterItems(groupBy) {
+      switch (groupBy) {
+        case GROUP_BY_FILTER[2].period:
+          return GROUP_BY_OPTIONS.WEEK.map(this.translateOptions);
+        case GROUP_BY_FILTER[3].period:
+          return GROUP_BY_OPTIONS.MONTH.map(this.translateOptions);
+        case GROUP_BY_FILTER[4].period:
+          return GROUP_BY_OPTIONS.YEAR.map(this.translateOptions);
+        default:
+          return GROUP_BY_OPTIONS.DAY.map(this.translateOptions);
+      }
+    },
+    translateOptions(opts) {
+      return { id: opts.id, groupBy: this.$t(opts.groupByKey) };
+    },
+    onBusinessHoursToggle(value) {
+      this.businessHours = value;
+      this.fetchAllData();
+
+      useTrack(REPORTS_EVENTS.FILTER_REPORT, {
+        filterType: 'businessHours',
+        filterValue: value,
+        reportType: this.type,
+      });
+    },
   },
 };
 </script>
@@ -170,12 +222,17 @@ export default {
       @click="downloadReports"
     />
   </ReportHeader>
-
   <ReportFilters
     v-if="filterItemsList"
-    :filter-type="filterType"
-    :selected-item="selectedFilter"
+    :type="type"
+    :filter-items-list="filterItemsList"
+    :group-by-filter-items-list="groupByfilterItemsList"
+    :selected-group-by-filter="selectedGroupByFilter"
+    :current-filter="selectedFilter"
+    @date-range-change="onDateRangeChange"
     @filter-change="onFilterChange"
+    @group-by-filter-change="onGroupByFilterChange"
+    @business-hours-toggle="onBusinessHoursToggle"
   />
   <ReportContainer
     v-if="filterItemsList.length"

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js

@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import ReportsFiltersAgents from '../../Filters/Agents.vue';
+
+const mockStore = createStore({
+  modules: {
+    agents: {
+      namespaced: true,
+      state: {
+        agents: [],
+      },
+      getters: {
+        getAgents: state => state.agents,
+      },
+      actions: {
+        get: vi.fn(),
+      },
+    },
+  },
+});
+
+const mountParams = {
+  global: {
+    plugins: [mockStore],
+    mocks: {
+      $t: msg => msg,
+    },
+    stubs: ['multiselect'],
+  },
+};
+
+describe('ReportsFiltersAgents.vue', () => {
+  it('emits "agents-filter-selection" event when handleInput is called', async () => {
+    const wrapper = shallowMount(ReportsFiltersAgents, mountParams);
+
+    const selectedAgents = [
+      { id: 1, name: 'Agent 1' },
+      { id: 2, name: 'Agent 2' },
+    ];
+    await wrapper.setData({ selectedOptions: selectedAgents });
+
+    await wrapper.vm.handleInput();
+
+    expect(wrapper.emitted('agentsFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('agentsFilterSelection')[0]).toEqual([
+      selectedAgents,
+    ]);
+  });
+
+  it('dispatches the "agents/get" action when the component is mounted', () => {
+    const dispatchSpy = vi.spyOn(mockStore, 'dispatch');
+
+    shallowMount(ReportsFiltersAgents, mountParams);
+
+    expect(dispatchSpy).toHaveBeenCalledWith('agents/get');
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js

@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import ReportsFiltersDateGroupBy from '../../Filters/DateGroupBy.vue';
+import { GROUP_BY_OPTIONS } from '../../../constants';
+
+const mountParams = {
+  global: {
+    mocks: {
+      $t: msg => msg,
+    },
+    stubs: ['multiselect'],
+  },
+};
+
+describe('ReportsFiltersDateGroupBy.vue', () => {
+  it('emits "on-grouping-change" event when changeFilterSelection is called', () => {
+    const wrapper = shallowMount(ReportsFiltersDateGroupBy, mountParams);
+
+    const selectedFilter = GROUP_BY_OPTIONS.DAY;
+    wrapper.vm.changeFilterSelection(selectedFilter);
+
+    expect(wrapper.emitted('onGroupingChange')).toBeTruthy();
+    expect(wrapper.emitted('onGroupingChange')[0]).toEqual([selectedFilter]);
+  });
+
+  it('updates currentSelectedFilter when selectedOption is changed', async () => {
+    const wrapper = shallowMount(ReportsFiltersDateGroupBy, mountParams);
+
+    const newSelectedOption = GROUP_BY_OPTIONS.MONTH;
+    await wrapper.setProps({ selectedOption: newSelectedOption });
+
+    expect(wrapper.vm.currentSelectedFilter).toEqual({
+      ...newSelectedOption,
+      groupBy: newSelectedOption.translationKey,
+    });
+  });
+
+  it('initializes translatedOptions correctly', () => {
+    const wrapper = shallowMount(ReportsFiltersDateGroupBy, mountParams);
+
+    const expectedOptions = wrapper.vm.validGroupOptions.map(option => ({
+      ...option,
+      groupBy: option.translationKey,
+    }));
+
+    expect(wrapper.vm.translatedOptions).toEqual(expectedOptions);
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js

@@ -0,0 +1,41 @@
+import { shallowMount } from '@vue/test-utils';
+import ReportFiltersDateRange from '../../Filters/DateRange.vue';
+import { DATE_RANGE_OPTIONS } from '../../../constants';
+
+const mountParams = {
+  global: {
+    mocks: {
+      $t: msg => msg,
+    },
+    stubs: ['multiselect'],
+  },
+};
+
+describe('ReportFiltersDateRange.vue', () => {
+  it('emits "onRangeChange" event when updateRange is called', () => {
+    const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
+
+    const selectedRange = DATE_RANGE_OPTIONS.LAST_7_DAYS;
+    wrapper.vm.updateRange(selectedRange);
+
+    expect(wrapper.emitted('onRangeChange')).toBeTruthy();
+    expect(wrapper.emitted('onRangeChange')[0]).toEqual([selectedRange]);
+  });
+
+  it('initializes options correctly', () => {
+    const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
+
+    const expectedIds = Object.values(DATE_RANGE_OPTIONS).map(
+      option => option.id
+    );
+    const receivedIds = wrapper.vm.options.map(option => option.id);
+
+    expect(receivedIds).toEqual(expectedIds);
+  });
+
+  it('initializes selectedOption correctly', () => {
+    const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
+    const expectedId = Object.values(DATE_RANGE_OPTIONS)[0].id;
+    expect(wrapper.vm.selectedOption.id).toBe(expectedId);
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js

@@ -0,0 +1,65 @@
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import ReportsFiltersInboxes from '../../Filters/Inboxes.vue';
+
+const mountParams = {
+  global: {
+    mocks: {
+      $t: msg => msg,
+    },
+    stubs: ['multiselect'],
+  },
+};
+
+describe('ReportsFiltersInboxes.vue', () => {
+  let store;
+  let inboxesModule;
+
+  beforeEach(() => {
+    inboxesModule = {
+      namespaced: true,
+      getters: {
+        getInboxes: () => () => [
+          { id: 1, name: 'Inbox 1' },
+          { id: 2, name: 'Inbox 2' },
+        ],
+      },
+      actions: {
+        get: vi.fn(),
+      },
+    };
+
+    store = createStore({
+      modules: {
+        inboxes: inboxesModule,
+      },
+    });
+  });
+
+  it('dispatches "inboxes/get" action when component is mounted', () => {
+    shallowMount(ReportsFiltersInboxes, {
+      global: {
+        plugins: [store],
+        ...mountParams.global,
+      },
+    });
+    expect(inboxesModule.actions.get).toHaveBeenCalled();
+  });
+
+  it('emits "inbox-filter-selection" event when handleInput is called', async () => {
+    const wrapper = shallowMount(ReportsFiltersInboxes, {
+      global: {
+        plugins: [store],
+        ...mountParams.global,
+      },
+    });
+
+    const selectedInbox = { id: 1, name: 'Inbox 1' };
+    await wrapper.setData({ selectedOption: selectedInbox });
+
+    await wrapper.vm.handleInput();
+
+    expect(wrapper.emitted('inboxFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('inboxFilterSelection')[0]).toEqual([selectedInbox]);
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js

@@ -0,0 +1,67 @@
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import ReportsFiltersLabels from '../../Filters/Labels.vue';
+
+const mountParams = {
+  global: {
+    mocks: {
+      $t: msg => msg,
+    },
+    stubs: ['multiselect'],
+  },
+};
+
+describe('ReportsFiltersLabels.vue', () => {
+  let store;
+  let labelsModule;
+
+  beforeEach(() => {
+    labelsModule = {
+      namespaced: true,
+      getters: {
+        getLabels: () => () => [
+          { id: 1, title: 'Label 1', color: 'red' },
+          { id: 2, title: 'Label 2', color: 'blue' },
+        ],
+      },
+      actions: {
+        get: vi.fn(),
+      },
+    };
+
+    store = createStore({
+      modules: {
+        labels: labelsModule,
+      },
+    });
+  });
+
+  it('dispatches "labels/get" action when component is mounted', () => {
+    shallowMount(ReportsFiltersLabels, {
+      global: {
+        plugins: [store],
+        ...mountParams.global,
+      },
+    });
+    expect(labelsModule.actions.get).toHaveBeenCalled();
+  });
+
+  it('emits "labels-filter-selection" event when handleInput is called', async () => {
+    const wrapper = shallowMount(ReportsFiltersLabels, {
+      global: {
+        plugins: [store],
+        ...mountParams.global,
+      },
+    });
+
+    const selectedLabel = { id: 1, title: 'Label 1', color: 'red' };
+    await wrapper.setData({ selectedOption: selectedLabel });
+
+    await wrapper.vm.handleInput();
+
+    expect(wrapper.emitted('labelsFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('labelsFilterSelection')[0]).toEqual([
+      selectedLabel,
+    ]);
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js

@@ -0,0 +1,43 @@
+import { shallowMount } from '@vue/test-utils';
+import ReportFiltersRatings from '../../Filters/Ratings.vue';
+import { CSAT_RATINGS } from 'shared/constants/messages';
+
+const mountParams = {
+  global: {
+    mocks: {
+      $t: msg => msg,
+    },
+    stubs: ['multiselect'],
+  },
+};
+
+describe('ReportFiltersRatings.vue', () => {
+  it('emits "rating-filter-selection" event when handleInput is called', async () => {
+    const wrapper = shallowMount(ReportFiltersRatings, {
+      ...mountParams,
+    });
+
+    const selectedRating = { value: 1, label: 'Rating 1' };
+    await wrapper.setData({ selectedOption: selectedRating });
+
+    await wrapper.vm.handleInput(selectedRating);
+
+    expect(wrapper.emitted('ratingFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('ratingFilterSelection')[0]).toEqual([
+      selectedRating,
+    ]);
+  });
+
+  it('initializes options correctly', () => {
+    const wrapper = shallowMount(ReportFiltersRatings, {
+      ...mountParams,
+    });
+
+    const expectedOptions = CSAT_RATINGS.map(option => ({
+      ...option,
+      label: option.translationKey,
+    }));
+
+    expect(wrapper.vm.options).toEqual(expectedOptions);
+  });
+});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js

@@ -0,0 +1,65 @@
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import ReportsFiltersTeams from '../../Filters/Teams.vue';
+
+const mountParams = {
+  global: {
+    mocks: {
+      $t: msg => msg,
+    },
+    stubs: ['multiselect'],
+  },
+};
+
+describe('ReportsFiltersTeams.vue', () => {
+  let store;
+  let teamsModule;
+
+  beforeEach(() => {
+    teamsModule = {
+      namespaced: true,
+      getters: {
+        getTeams: () => () => [
+          { id: 1, name: 'Team 1' },
+          { id: 2, name: 'Team 2' },
+        ],
+      },
+      actions: {
+        get: vi.fn(),
+      },
+    };
+
+    store = createStore({
+      modules: {
+        teams: teamsModule,
+      },
+    });
+  });
+
+  it('dispatches "teams/get" action when component is mounted', () => {
+    shallowMount(ReportsFiltersTeams, {
+      global: {
+        plugins: [store],
+        ...mountParams,
+      },
+    });
+    expect(teamsModule.actions.get).toHaveBeenCalled();
+  });
+
+  it('emits "team-filter-selection" event when handleInput is called', async () => {
+    const wrapper = shallowMount(ReportsFiltersTeams, {
+      global: {
+        plugins: [store],
+        ...mountParams,
+      },
+    });
+
+    await wrapper.setData({ selectedOption: { id: 1, name: 'Team 1' } });
+    await wrapper.vm.handleInput();
+
+    expect(wrapper.emitted('teamFilterSelection')).toBeTruthy();
+    expect(wrapper.emitted('teamFilterSelection')[0]).toEqual([
+      { id: 1, name: 'Team 1' },
+    ]);
+  });
+});

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

@@ -1,69 +0,0 @@
-export const generateReportURLParams = ({
-  from,
-  to,
-  businessHours,
-  groupBy,
-  range,
-}) => {
-  const params = {};
-
-  // Always include from/to dates
-  if (from) params.from = from;
-  if (to) params.to = to;
-
-  if (businessHours) params.business_hours = 'true';
-  if (groupBy) params.group_by = groupBy;
-
-  // Include range type (last7days, last3months, custom, etc.)
-  if (range) params.range = range;
-
-  return params;
-};
-
-export const parseReportURLParams = query => {
-  const { from, to, business_hours, group_by, range } = query;
-
-  return {
-    from: from ? Number(from) : null,
-    to: to ? Number(to) : null,
-    businessHours: business_hours === 'true',
-    groupBy: group_by ? Number(group_by) : null,
-    range: range || null,
-  };
-};
-
-// Parse filter params from URL (agent_id, inbox_id, team_id, sla_policy_id, label, rating)
-export const parseFilterURLParams = query => {
-  return {
-    agent_id: query.agent_id ? Number(query.agent_id) : null,
-    inbox_id: query.inbox_id ? Number(query.inbox_id) : null,
-    team_id: query.team_id ? Number(query.team_id) : null,
-    sla_policy_id: query.sla_policy_id ? Number(query.sla_policy_id) : null,
-    label: query.label || null,
-    rating: query.rating ? Number(query.rating) : null,
-  };
-};
-
-// Generate filter URL params (only include non-null values)
-export const generateFilterURLParams = filters => {
-  const params = {};
-  if (filters.agent_id) params.agent_id = filters.agent_id;
-  if (filters.inbox_id) params.inbox_id = filters.inbox_id;
-  if (filters.team_id) params.team_id = filters.team_id;
-  if (filters.sla_policy_id) params.sla_policy_id = filters.sla_policy_id;
-  if (filters.label) params.label = filters.label;
-  if (filters.rating) params.rating = filters.rating;
-  return params;
-};
-
-// Merge date range and filter params for complete URL
-export const generateCompleteURLParams = ({
-  from,
-  to,
-  range,
-  filters = {},
-}) => {
-  const dateParams = generateReportURLParams({ from, to, range });
-  const filterParams = generateFilterURLParams(filters);
-  return { ...dateParams, ...filterParams };
-};

app/javascript/dashboard/routes/dashboard/settings/reports/helpers/reportFilterHelper.spec.js

@@ -1,350 +0,0 @@
-import {
-  generateReportURLParams,
-  parseReportURLParams,
-  parseFilterURLParams,
-  generateFilterURLParams,
-  generateCompleteURLParams,
-} from './reportFilterHelper';
-
-describe('reportFilterHelper', () => {
-  describe('generateReportURLParams', () => {
-    it('generates URL params with from and to dates', () => {
-      const params = generateReportURLParams({
-        from: 1738607400,
-        to: 1770229799,
-      });
-
-      expect(params).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-      });
-    });
-
-    it('includes business hours when true', () => {
-      const params = generateReportURLParams({
-        from: 1738607400,
-        to: 1770229799,
-        businessHours: true,
-      });
-
-      expect(params).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-        business_hours: 'true',
-      });
-    });
-
-    it('excludes business hours when false', () => {
-      const params = generateReportURLParams({
-        from: 1738607400,
-        to: 1770229799,
-        businessHours: false,
-      });
-
-      expect(params).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-      });
-    });
-
-    it('includes group by parameter', () => {
-      const params = generateReportURLParams({
-        from: 1738607400,
-        to: 1770229799,
-        groupBy: 3,
-      });
-
-      expect(params).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-        group_by: 3,
-      });
-    });
-
-    it('includes range type', () => {
-      const params = generateReportURLParams({
-        from: 1738607400,
-        to: 1770229799,
-        range: 'last7days',
-      });
-
-      expect(params).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-        range: 'last7days',
-      });
-    });
-
-    it('generates complete URL params with all options', () => {
-      const params = generateReportURLParams({
-        from: 1738607400,
-        to: 1770229799,
-        businessHours: true,
-        groupBy: 3,
-        range: 'lastYear',
-      });
-
-      expect(params).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-        business_hours: 'true',
-        group_by: 3,
-        range: 'lastYear',
-      });
-    });
-  });
-
-  describe('parseReportURLParams', () => {
-    it('parses from and to dates as numbers', () => {
-      const result = parseReportURLParams({
-        from: '1738607400',
-        to: '1770229799',
-      });
-
-      expect(result).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-        businessHours: false,
-        groupBy: null,
-        range: null,
-      });
-    });
-
-    it('parses business hours as boolean', () => {
-      const result = parseReportURLParams({
-        from: '1738607400',
-        to: '1770229799',
-        business_hours: 'true',
-      });
-
-      expect(result.businessHours).toBe(true);
-    });
-
-    it('returns false for business hours when not "true"', () => {
-      const result = parseReportURLParams({
-        from: '1738607400',
-        to: '1770229799',
-        business_hours: 'false',
-      });
-
-      expect(result.businessHours).toBe(false);
-    });
-
-    it('parses group by as number', () => {
-      const result = parseReportURLParams({
-        from: '1738607400',
-        to: '1770229799',
-        group_by: '3',
-      });
-
-      expect(result.groupBy).toBe(3);
-    });
-
-    it('parses range type', () => {
-      const result = parseReportURLParams({
-        from: '1738607400',
-        to: '1770229799',
-        range: 'last7days',
-      });
-
-      expect(result.range).toBe('last7days');
-    });
-
-    it('returns null for missing parameters', () => {
-      const result = parseReportURLParams({});
-
-      expect(result).toEqual({
-        from: null,
-        to: null,
-        businessHours: false,
-        groupBy: null,
-        range: null,
-      });
-    });
-
-    it('parses complete URL params with all options', () => {
-      const result = parseReportURLParams({
-        from: '1738607400',
-        to: '1770229799',
-        business_hours: 'true',
-        group_by: '3',
-        range: 'lastYear',
-      });
-
-      expect(result).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-        businessHours: true,
-        groupBy: 3,
-        range: 'lastYear',
-      });
-    });
-
-    it('handles numeric values correctly', () => {
-      const result = parseReportURLParams({
-        from: 1738607400,
-        to: 1770229799,
-        group_by: 3,
-      });
-
-      expect(result.from).toBe(1738607400);
-      expect(result.to).toBe(1770229799);
-      expect(result.groupBy).toBe(3);
-    });
-  });
-
-  describe('round-trip conversion', () => {
-    it('maintains data integrity through generate and parse cycle', () => {
-      const original = {
-        from: 1738607400,
-        to: 1770229799,
-        businessHours: true,
-        groupBy: 3,
-        range: 'lastYear',
-      };
-
-      const urlParams = generateReportURLParams(original);
-      const parsed = parseReportURLParams(urlParams);
-
-      expect(parsed.from).toBe(original.from);
-      expect(parsed.to).toBe(original.to);
-      expect(parsed.businessHours).toBe(original.businessHours);
-      expect(parsed.groupBy).toBe(original.groupBy);
-      expect(parsed.range).toBe(original.range);
-    });
-  });
-
-  describe('parseFilterURLParams', () => {
-    it('parses all filter params as numbers', () => {
-      const result = parseFilterURLParams({
-        agent_id: '123',
-        inbox_id: '456',
-        team_id: '789',
-        sla_policy_id: '101',
-        rating: '4',
-      });
-
-      expect(result).toEqual({
-        agent_id: 123,
-        inbox_id: 456,
-        team_id: 789,
-        sla_policy_id: 101,
-        label: null,
-        rating: 4,
-      });
-    });
-
-    it('parses label as string', () => {
-      const result = parseFilterURLParams({
-        label: 'bug',
-      });
-
-      expect(result.label).toBe('bug');
-    });
-
-    it('returns null for missing parameters', () => {
-      const result = parseFilterURLParams({});
-
-      expect(result).toEqual({
-        agent_id: null,
-        inbox_id: null,
-        team_id: null,
-        sla_policy_id: null,
-        label: null,
-        rating: null,
-      });
-    });
-  });
-
-  describe('generateFilterURLParams', () => {
-    it('includes only non-null filter values', () => {
-      const params = generateFilterURLParams({
-        agent_id: 123,
-        inbox_id: null,
-        team_id: 456,
-        rating: null,
-      });
-
-      expect(params).toEqual({
-        agent_id: 123,
-        team_id: 456,
-      });
-    });
-
-    it('includes label when present', () => {
-      const params = generateFilterURLParams({
-        label: 'bug',
-      });
-
-      expect(params).toEqual({
-        label: 'bug',
-      });
-    });
-
-    it('returns empty object when all values are null', () => {
-      const params = generateFilterURLParams({
-        agent_id: null,
-        inbox_id: null,
-        team_id: null,
-      });
-
-      expect(params).toEqual({});
-    });
-  });
-
-  describe('generateCompleteURLParams', () => {
-    it('merges date and filter params', () => {
-      const params = generateCompleteURLParams({
-        from: 1738607400,
-        to: 1770229799,
-        range: 'last7days',
-        filters: {
-          agent_id: 123,
-          inbox_id: 456,
-        },
-      });
-
-      expect(params).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-        range: 'last7days',
-        agent_id: 123,
-        inbox_id: 456,
-      });
-    });
-
-    it('handles empty filters', () => {
-      const params = generateCompleteURLParams({
-        from: 1738607400,
-        to: 1770229799,
-        range: 'last7days',
-        filters: {},
-      });
-
-      expect(params).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-        range: 'last7days',
-      });
-    });
-
-    it('excludes null filter values', () => {
-      const params = generateCompleteURLParams({
-        from: 1738607400,
-        to: 1770229799,
-        filters: {
-          agent_id: 123,
-          inbox_id: null,
-          team_id: 456,
-        },
-      });
-
-      expect(params).toEqual({
-        from: 1738607400,
-        to: 1770229799,
-        agent_id: 123,
-        team_id: 456,
-      });
-    });
-  });
-});

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -96,7 +96,7 @@ const actions = {
         data: payload,
       });
       if (!payload.length) {
-        commit(types.SET_ALL_MESSAGES_LOADED, data.conversationId);
+        commit(types.SET_ALL_MESSAGES_LOADED);
       }
     } catch (error) {
       // Handle error
@@ -191,7 +191,7 @@ const actions = {
 
   async setActiveChat({ commit, dispatch }, { data, after }) {
     commit(types.SET_CURRENT_CHAT_WINDOW, data);
-    commit(types.CLEAR_ALL_MESSAGES_LOADED, data.id);
+    commit(types.CLEAR_ALL_MESSAGES_LOADED);
     if (data.dataFetched === undefined) {
       try {
         await dispatch('fetchPreviousMessages', {
@@ -199,7 +199,7 @@ const actions = {
           before: data.messages[0].id,
           conversationId: data.id,
         });
-        commit(types.SET_CHAT_DATA_FETCHED, data.id);
+        data.dataFetched = true;
       } catch (error) {
         // Ignore error
       }
@@ -212,17 +212,14 @@ const actions = {
         conversationId,
         agentId,
       });
-      dispatch('setCurrentChatAssignee', {
-        conversationId,
-        assignee: response.data,
-      });
+      dispatch('setCurrentChatAssignee', response.data);
     } catch (error) {
       // Handle error
     }
   },
 
-  setCurrentChatAssignee({ commit }, { conversationId, assignee }) {
-    commit(types.ASSIGN_AGENT, { conversationId, assignee });
+  setCurrentChatAssignee({ commit }, assignee) {
+    commit(types.ASSIGN_AGENT, assignee);
   },
 
   assignTeam: async ({ dispatch }, { conversationId, teamId }) => {
@@ -415,6 +412,17 @@ const actions = {
     });
   },
 
+  updateConversationCachedSummary(
+    { commit },
+    { conversationId, cachedSummary, cachedSummaryAt }
+  ) {
+    commit(types.UPDATE_CONVERSATION_CACHED_SUMMARY, {
+      conversationId,
+      cachedSummary,
+      cachedSummaryAt,
+    });
+  },
+
   setChatStatusFilter({ commit }, data) {
     commit(types.CHANGE_CHAT_STATUS_FILTER, data);
   },

app/javascript/dashboard/store/modules/conversations/index.js

@@ -63,18 +63,14 @@ export const mutations = {
     _state.allConversations = [];
     _state.selectedChatId = null;
   },
-  [types.SET_ALL_MESSAGES_LOADED](_state, conversationId) {
-    const chat = getConversationById(_state)(conversationId);
-    if (chat) {
-      chat.allMessagesLoaded = true;
-    }
+  [types.SET_ALL_MESSAGES_LOADED](_state) {
+    const [chat] = getSelectedChatConversation(_state);
+    chat.allMessagesLoaded = true;
   },
 
-  [types.CLEAR_ALL_MESSAGES_LOADED](_state, conversationId) {
-    const chat = getConversationById(_state)(conversationId);
-    if (chat) {
-      chat.allMessagesLoaded = false;
-    }
+  [types.CLEAR_ALL_MESSAGES_LOADED](_state) {
+    const [chat] = getSelectedChatConversation(_state);
+    chat.allMessagesLoaded = false;
   },
   [types.CLEAR_CURRENT_CHAT_WINDOW](_state) {
     _state.selectedChatId = null;
@@ -95,24 +91,15 @@ export const mutations = {
     chat.messages = data;
   },
 
-  [types.SET_CHAT_DATA_FETCHED](_state, conversationId) {
-    const chat = getConversationById(_state)(conversationId);
-    if (chat) {
-      chat.dataFetched = true;
-    }
-  },
-
   [types.SET_CURRENT_CHAT_WINDOW](_state, activeChat) {
     if (activeChat) {
       _state.selectedChatId = activeChat.id;
     }
   },
 
-  [types.ASSIGN_AGENT](_state, { conversationId, assignee }) {
-    const chat = getConversationById(_state)(conversationId);
-    if (chat) {
-      chat.meta.assignee = assignee;
-    }
+  [types.ASSIGN_AGENT](_state, assignee) {
+    const [chat] = getSelectedChatConversation(_state);
+    chat.meta.assignee = assignee;
   },
 
   [types.ASSIGN_TEAM](_state, { team, conversationId }) {
@@ -129,6 +116,16 @@ export const mutations = {
       chat.last_activity_at = lastActivityAt;
     }
   },
+  [types.UPDATE_CONVERSATION_CACHED_SUMMARY](
+    _state,
+    { conversationId, cachedSummary, cachedSummaryAt }
+  ) {
+    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
+    if (chat) {
+      chat.cached_summary = cachedSummary;
+      chat.cached_summary_at = cachedSummaryAt;
+    }
+  },
   [types.ASSIGN_PRIORITY](_state, { priority, conversationId }) {
     const [chat] = _state.allConversations.filter(c => c.id === conversationId);
     chat.priority = priority;
@@ -287,10 +284,8 @@ export const mutations = {
 
   // Update assignee on action cable message
   [types.UPDATE_ASSIGNEE](_state, payload) {
-    const chat = getConversationById(_state)(payload.id);
-    if (chat) {
-      chat.meta.assignee = payload.assignee;
-    }
+    const [chat] = _state.allConversations.filter(c => c.id === payload.id);
+    chat.meta.assignee = payload.assignee;
   },
 
   [types.UPDATE_CONVERSATION_CONTACT](_state, { conversationId, ...payload }) {

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

@@ -27,7 +27,7 @@ export const getters = {
       .sort((a, b) => a.title.localeCompare(b.title));
   },
   getLabelById: _state => id => {
-    return _state.records.find(record => record.id === Number(id)) || {};
+    return _state.records.find(record => record.id === Number(id));
   },
 };
 

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

@@ -355,26 +355,22 @@ describe('#actions', () => {
       axios.post.mockResolvedValue({
         data: { id: 1, name: 'User' },
       });
-      await actions.assignAgent(
-        { dispatch },
-        { conversationId: 1, agentId: 1 }
-      );
-      expect(dispatch).toHaveBeenCalledWith('setCurrentChatAssignee', {
-        conversationId: 1,
-        assignee: { id: 1, name: 'User' },
-      });
+      await actions.assignAgent({ commit }, { conversationId: 1, agentId: 1 });
+      expect(commit).toHaveBeenCalledTimes(0);
+      expect(commit.mock.calls).toEqual([]);
     });
   });
 
   describe('#setCurrentChatAssignee', () => {
     it('sends correct mutations if assignment is successful', async () => {
-      const payload = {
-        conversationId: 1,
-        assignee: { id: 1, name: 'User' },
-      };
-      await actions.setCurrentChatAssignee({ commit }, payload);
+      axios.post.mockResolvedValue({
+        data: { id: 1, name: 'User' },
+      });
+      await actions.setCurrentChatAssignee({ commit }, { id: 1, name: 'User' });
       expect(commit).toHaveBeenCalledTimes(1);
-      expect(commit.mock.calls).toEqual([['ASSIGN_AGENT', payload]]);
+      expect(commit.mock.calls).toEqual([
+        ['ASSIGN_AGENT', { id: 1, name: 'User' }],
+      ]);
     });
   });
 
@@ -720,64 +716,6 @@ describe('#addMentions', () => {
     });
   });
 
-  describe('#setActiveChat', () => {
-    it('should commit SET_CHAT_DATA_FETCHED with conversation ID after fetch', async () => {
-      const localCommit = vi.fn();
-      const localDispatch = vi.fn().mockResolvedValue();
-      const data = { id: 42, messages: [{ id: 100 }] };
-
-      await actions.setActiveChat(
-        { commit: localCommit, dispatch: localDispatch },
-        { data, after: 99 }
-      );
-
-      expect(localCommit.mock.calls).toEqual([
-        [types.SET_CURRENT_CHAT_WINDOW, data],
-        [types.CLEAR_ALL_MESSAGES_LOADED, 42],
-        [types.SET_CHAT_DATA_FETCHED, 42],
-      ]);
-      expect(localDispatch).toHaveBeenCalledWith('fetchPreviousMessages', {
-        after: 99,
-        before: 100,
-        conversationId: 42,
-      });
-    });
-
-    it('should not dispatch fetchPreviousMessages if dataFetched is already set', async () => {
-      const localCommit = vi.fn();
-      const localDispatch = vi.fn();
-      const data = { id: 42, messages: [{ id: 100 }], dataFetched: true };
-
-      await actions.setActiveChat(
-        { commit: localCommit, dispatch: localDispatch },
-        { data }
-      );
-
-      expect(localCommit.mock.calls).toEqual([
-        [types.SET_CURRENT_CHAT_WINDOW, data],
-        [types.CLEAR_ALL_MESSAGES_LOADED, 42],
-      ]);
-      expect(localDispatch).not.toHaveBeenCalled();
-    });
-
-    it('should commit SET_CHAT_DATA_FETCHED by ID, not mutate the data object directly (race condition fix)', async () => {
-      const localCommit = vi.fn();
-      const localDispatch = vi.fn().mockResolvedValue();
-      const data = { id: 42, messages: [{ id: 100 }] };
-
-      await actions.setActiveChat(
-        { commit: localCommit, dispatch: localDispatch },
-        { data }
-      );
-
-      // The action must NOT set dataFetched on the data object directly
-      expect(data.dataFetched).toBeUndefined();
-
-      // Instead it commits a mutation that finds the conversation by ID in the store
-      expect(localCommit).toHaveBeenCalledWith(types.SET_CHAT_DATA_FETCHED, 42);
-    });
-  });
-
   describe('#getInboxCaptainAssistantById', () => {
     it('fetches inbox assistant by id', async () => {
       axios.get.mockResolvedValue({

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

@@ -570,84 +570,25 @@ describe('#mutations', () => {
     });
   });
 
-  describe('#SET_CHAT_DATA_FETCHED', () => {
-    it('should set dataFetched to true on the conversation by ID', () => {
+  describe('#SET_ALL_MESSAGES_LOADED', () => {
+    it('should set allMessagesLoaded to true on selected chat', () => {
       const state = {
-        allConversations: [{ id: 1 }, { id: 2 }],
-      };
-      mutations[types.SET_CHAT_DATA_FETCHED](state, 1);
-      expect(state.allConversations[0].dataFetched).toBe(true);
-      expect(state.allConversations[1].dataFetched).toBeUndefined();
-    });
-
-    it('should do nothing if conversation is not found', () => {
-      const state = { allConversations: [{ id: 1 }] };
-      mutations[types.SET_CHAT_DATA_FETCHED](state, 999);
-      expect(state.allConversations[0].dataFetched).toBeUndefined();
-    });
-
-    it('should survive the race: SET_ALL_CONVERSATION replaces the object, then SET_CHAT_DATA_FETCHED still works', () => {
-      // 1. Initial state: conversation exists with dataFetched undefined
-      const state = {
-        allConversations: [{ id: 1, messages: [{ id: 'm1' }] }],
+        allConversations: [{ id: 1, allMessagesLoaded: false }],
         selectedChatId: 1,
       };
-      const originalRef = state.allConversations[0];
-
-      // 2. Simulate SET_ALL_CONVERSATION replacing the object (WebSocket/polling)
-      //    This copies dataFetched from the old object (still undefined)
-      mutations[types.SET_ALL_CONVERSATION](state, [
-        { id: 1, name: 'refreshed', messages: [{ id: 'm2' }] },
-      ]);
-
-      // The store now holds a NEW object, old reference is detached
-      const newRef = state.allConversations[0];
-      expect(newRef).not.toBe(originalRef);
-      expect(newRef.dataFetched).toBeUndefined();
-
-      // 3. SET_CHAT_DATA_FETCHED finds by ID — works on the current store object
-      mutations[types.SET_CHAT_DATA_FETCHED](state, 1);
-      expect(state.allConversations[0].dataFetched).toBe(true);
-
-      // Old detached reference is unaffected
-      expect(originalRef.dataFetched).toBeUndefined();
-    });
-  });
-
-  describe('#SET_ALL_MESSAGES_LOADED', () => {
-    it('should set allMessagesLoaded to true on the conversation by ID', () => {
-      const state = {
-        allConversations: [{ id: 1, allMessagesLoaded: false }, { id: 2 }],
-      };
-      mutations[types.SET_ALL_MESSAGES_LOADED](state, 1);
+      mutations[types.SET_ALL_MESSAGES_LOADED](state);
       expect(state.allConversations[0].allMessagesLoaded).toBe(true);
-      expect(state.allConversations[1].allMessagesLoaded).toBeUndefined();
-    });
-
-    it('should do nothing if conversation is not found', () => {
-      const state = { allConversations: [{ id: 1 }] };
-      mutations[types.SET_ALL_MESSAGES_LOADED](state, 999);
-      expect(state.allConversations[0].allMessagesLoaded).toBeUndefined();
     });
   });
 
   describe('#CLEAR_ALL_MESSAGES_LOADED', () => {
-    it('should set allMessagesLoaded to false on the conversation by ID', () => {
+    it('should set allMessagesLoaded to false on selected chat', () => {
       const state = {
-        allConversations: [
-          { id: 1, allMessagesLoaded: true },
-          { id: 2, allMessagesLoaded: true },
-        ],
+        allConversations: [{ id: 1, allMessagesLoaded: true }],
+        selectedChatId: 1,
       };
-      mutations[types.CLEAR_ALL_MESSAGES_LOADED](state, 1);
+      mutations[types.CLEAR_ALL_MESSAGES_LOADED](state);
       expect(state.allConversations[0].allMessagesLoaded).toBe(false);
-      expect(state.allConversations[1].allMessagesLoaded).toBe(true);
-    });
-
-    it('should do nothing if conversation is not found', () => {
-      const state = { allConversations: [{ id: 1, allMessagesLoaded: true }] };
-      mutations[types.CLEAR_ALL_MESSAGES_LOADED](state, 999);
-      expect(state.allConversations[0].allMessagesLoaded).toBe(true);
     });
   });
 
@@ -699,22 +640,15 @@ describe('#mutations', () => {
   });
 
   describe('#ASSIGN_AGENT', () => {
-    it('should assign agent to the correct conversation by ID', () => {
+    it('should assign agent to selected conversation', () => {
       const assignee = { id: 1, name: 'Agent' };
       const state = {
-        allConversations: [
-          { id: 1, meta: {} },
-          { id: 2, meta: {} },
-        ],
-        selectedChatId: 2,
+        allConversations: [{ id: 1, meta: {} }],
+        selectedChatId: 1,
       };
 
-      mutations[types.ASSIGN_AGENT](state, {
-        conversationId: 1,
-        assignee,
-      });
+      mutations[types.ASSIGN_AGENT](state, assignee);
       expect(state.allConversations[0].meta.assignee).toEqual(assignee);
-      expect(state.allConversations[1].meta.assignee).toBeUndefined();
     });
   });
 
@@ -863,34 +797,6 @@ describe('#mutations', () => {
       mutations[types.UPDATE_CONVERSATION](state, conversation);
       expect(state.allConversations[0].status).toEqual('resolved');
     });
-
-    it('should preserve dataFetched and allMessagesLoaded during update', () => {
-      const state = {
-        allConversations: [
-          {
-            id: 1,
-            status: 'open',
-            updated_at: 100,
-            messages: [{ id: 'msg1' }],
-            dataFetched: true,
-            allMessagesLoaded: true,
-          },
-        ],
-      };
-
-      const conversation = {
-        id: 1,
-        status: 'resolved',
-        updated_at: 200,
-        messages: [{ id: 'msg2' }],
-      };
-
-      mutations[types.UPDATE_CONVERSATION](state, conversation);
-      expect(state.allConversations[0].status).toEqual('resolved');
-      expect(state.allConversations[0].dataFetched).toBe(true);
-      expect(state.allConversations[0].allMessagesLoaded).toBe(true);
-      expect(state.allConversations[0].messages).toEqual([{ id: 'msg1' }]);
-    });
   });
 
   describe('#UPDATE_CONVERSATION_CONTACT', () => {

app/javascript/dashboard/store/modules/specs/summaryReports.spec.js

@@ -141,14 +141,12 @@ describe('Summary Reports Store', () => {
         });
       });
 
-      it('should reset uiFlags and rethrow error on failure', async () => {
+      it('should handle errors gracefully', async () => {
         SummaryReportsAPI.getInboxReports.mockRejectedValue(
           new Error('API Error')
         );
 
-        await expect(
-          store.actions.fetchInboxSummaryReports({ commit }, {})
-        ).rejects.toThrow('API Error');
+        await store.actions.fetchInboxSummaryReports({ commit }, {});
 
         expect(commit).toHaveBeenCalledWith('setUIFlags', {
           isFetchingInboxSummaryReports: false,

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

@@ -28,17 +28,15 @@ async function fetchSummaryReports(type, params, { commit }) {
   const config = typeMap[type];
   if (!config) return;
 
-  let error = null;
   try {
     commit('setUIFlags', { [config.flagKey]: true });
     const response = await SummaryReportsAPI[config.apiMethod](params);
     commit(config.mutationKey, camelcaseKeys(response.data, { deep: true }));
-  } catch (e) {
-    error = e;
+  } catch (error) {
+    // Ignore error
   } finally {
     commit('setUIFlags', { [config.flagKey]: false });
   }
-  if (error) throw error;
 }
 
 export const initialState = {

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

@@ -51,6 +51,7 @@ export default {
   UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES:
     'UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES',
   UPDATE_CONVERSATION_LAST_ACTIVITY: 'UPDATE_CONVERSATION_LAST_ACTIVITY',
+  UPDATE_CONVERSATION_CACHED_SUMMARY: 'UPDATE_CONVERSATION_CACHED_SUMMARY',
   UPDATE_CONVERSATION_CALL_STATUS: 'UPDATE_CONVERSATION_CALL_STATUS',
   UPDATE_MESSAGE_CALL_STATUS: 'UPDATE_MESSAGE_CALL_STATUS',
   SET_MISSING_MESSAGES: 'SET_MISSING_MESSAGES',
@@ -64,7 +65,6 @@ export default {
 
   SET_CONTEXT_MENU_CHAT_ID: 'SET_CONTEXT_MENU_CHAT_ID',
 
-  SET_CHAT_DATA_FETCHED: 'SET_CHAT_DATA_FETCHED',
   SET_CHAT_LIST_FILTERS: 'SET_CHAT_LIST_FILTERS',
   UPDATE_CHAT_LIST_FILTERS: 'UPDATE_CHAT_LIST_FILTERS',
 

app/jobs/avatar/avatar_from_url_job.rb

@@ -27,9 +27,7 @@ class Avatar::AvatarFromUrlJob < ApplicationJob
       content_type: avatar_file.content_type
     )
 
-  rescue Down::NotFound
-    Rails.logger.info "AvatarFromUrlJob: avatar not found at #{avatar_url}"
-  rescue Down::Error => e
+  rescue Down::NotFound, Down::Error => e
     Rails.logger.error "AvatarFromUrlJob error for #{avatar_url}: #{e.class} - #{e.message}"
   ensure
     update_avatar_sync_attributes(avatarable, avatar_url)

app/jobs/inboxes/fetch_imap_emails_job.rb

@@ -13,8 +13,7 @@ class Inboxes::FetchImapEmailsJob < MutexApplicationJob
     end
   rescue *ExceptionList::IMAP_EXCEPTIONS => e
     Rails.logger.error "Authorization error for email channel - #{channel.inbox.id} : #{e.message}"
-  rescue EOFError, OpenSSL::SSL::SSLError, Net::IMAP::NoResponseError, Net::IMAP::BadResponseError, Net::IMAP::InvalidResponseError,
-         Net::IMAP::ResponseParseError, Net::IMAP::ResponseReadError, Net::IMAP::ResponseTooLargeError => e
+  rescue EOFError, OpenSSL::SSL::SSLError, Net::IMAP::NoResponseError, Net::IMAP::BadResponseError, Net::IMAP::InvalidResponseError => e
     Rails.logger.error "Error for email channel - #{channel.inbox.id} : #{e.message}"
   rescue LockAcquisitionError
     Rails.logger.error "Lock failed for #{channel.inbox.id}"

app/models/account.rb

@@ -40,7 +40,6 @@ class Account < ApplicationRecord
         'auto_resolve_ignore_waiting': { 'type': %w[boolean null] },
         'audio_transcriptions': { 'type': %w[boolean null] },
         'auto_resolve_label': { 'type': %w[string null] },
-        'keep_pending_on_bot_failure': { 'type': %w[boolean null] },
         'conversation_required_attributes': {
           'type': %w[array null],
           'items': { 'type': 'string' }
@@ -89,7 +88,6 @@ class Account < ApplicationRecord
 
   store_accessor :settings, :audio_transcriptions, :auto_resolve_label
   store_accessor :settings, :captain_models, :captain_features
-  store_accessor :settings, :keep_pending_on_bot_failure
 
   has_many :account_users, dependent: :destroy_async
   has_many :agent_bot_inboxes, dependent: :destroy_async

app/models/concerns/account_email_rate_limitable.rb

@@ -12,10 +12,6 @@ module AccountEmailRateLimitable
     Redis::Alfred.get(email_count_cache_key).to_i
   end
 
-  def email_transcript_enabled?
-    true
-  end
-
   def within_email_rate_limit?
     return true if emails_sent_today < email_rate_limit
 

app/models/message.rb

@@ -318,9 +318,7 @@ class Message < ApplicationRecord
   end
 
   def update_contact_activity
-    # rubocop:disable Rails/SkipsModelValidations
-    sender.update_columns(last_activity_at: DateTime.now) if sender.is_a?(Contact)
-    # rubocop:enable Rails/SkipsModelValidations
+    sender.update(last_activity_at: DateTime.now) if sender.is_a?(Contact)
   end
 
   def update_waiting_since

app/presenters/mail_presenter.rb

@@ -130,15 +130,11 @@ class MailPresenter < SimpleDelegator
   end
 
   def sender_name
-    parse_mail_address((@mail[:reply_to] || @mail[:from]).value)&.name
+    Mail::Address.new((@mail[:reply_to] || @mail[:from]).value).name
   end
 
   def original_sender
-    [
-      @mail[:reply_to]&.value,
-      @mail['X-Original-Sender']&.value,
-      @mail[:from]&.value
-    ].filter_map { |email| parse_mail_address(email)&.address }.first
+    from_email_address(@mail[:reply_to].try(:value)) || @mail['X-Original-Sender'].try(:value) || from_email_address(from.first)
   end
 
   def headers_data
@@ -151,6 +147,10 @@ class MailPresenter < SimpleDelegator
     headers.presence
   end
 
+  def from_email_address(email)
+    Mail::Address.new(email).address
+  end
+
   def email_forwarded_for
     @mail['X-Forwarded-For'].try(:value)
   end
@@ -175,20 +175,11 @@ class MailPresenter < SimpleDelegator
 
   def notification_email_from_chatwoot?
     # notification emails are send via mailer sender email address. so it should match
-    configured_sender = Mail::Address.new(ENV.fetch('MAILER_SENDER_EMAIL', 'Chatwoot <accounts@chatwoot.com>')).address
-    original_sender.to_s.casecmp?(configured_sender)
+    original_sender == Mail::Address.new(ENV.fetch('MAILER_SENDER_EMAIL', 'Chatwoot <accounts@chatwoot.com>')).address
   end
 
   private
 
-  def parse_mail_address(email)
-    return if email.blank?
-
-    Mail::Address.new(email)
-  rescue Mail::Field::ParseError, Mail::Field::IncompleteParseError
-    nil
-  end
-
   def auto_submitted?
     @mail['Auto-Submitted'].present? && @mail['Auto-Submitted'].value != 'no'
   end

app/services/account_deletion_service.rb

@@ -1,6 +1,4 @@
 class AccountDeletionService
-  SOFT_DELETE_EMAIL_DOMAIN = '@chatwoot-deleted.invalid'.freeze
-
   attr_reader :account, :soft_deleted_users
 
   def initialize(account:)
@@ -27,11 +25,15 @@ class AccountDeletionService
 
   def soft_delete_orphaned_users
     account.users.each do |user|
-      # Skip users who are still associated with another account.
-      next if user.account_users.where.not(account_id: account.id).exists?
+      # Find all account_users for this user excluding the current account
+      other_accounts = user.account_users.where.not(account_id: account.id).count
 
+      # If user has no other accounts, soft delete them
+      next unless other_accounts.zero?
+
+      # Soft delete user by appending -deleted.com to email
       original_email = user.email
-      user.email = soft_deleted_email_for(user)
+      user.email = "#{original_email}-deleted.com"
       user.skip_reconfirmation!
       user.save!
 
@@ -45,8 +47,4 @@ class AccountDeletionService
       Rails.logger.info("Soft deleted user #{user.id} with email #{original_email}")
     end
   end
-
-  def soft_deleted_email_for(user)
-    "#{user.id}#{SOFT_DELETE_EMAIL_DOMAIN}"
-  end
 end

app/services/action_service.rb

@@ -75,16 +75,11 @@ class ActionService
   end
 
   def send_email_transcript(emails)
-    return unless @account.email_transcript_enabled?
-
     emails = emails[0].gsub(/\s+/, '').split(',')
 
     emails.each do |email|
-      break unless @account.within_email_rate_limit?
-
       email = parse_email_variables(@conversation, email)
       ConversationReplyMailer.with(account: @conversation.account).conversation_transcript(@conversation, email)&.deliver_later
-      @account.increment_email_sent_count
     end
   end
 

app/services/auto_assignment/assignment_service.rb

@@ -3,7 +3,6 @@ class AutoAssignment::AssignmentService
 
   def perform_bulk_assignment(limit: 100)
     return 0 unless inbox.auto_assignment_v2_enabled?
-    return 0 unless inbox.enable_auto_assignment?
 
     assigned_count = 0
 
@@ -33,9 +32,7 @@ class AutoAssignment::AssignmentService
   def unassigned_conversations(limit)
     scope = inbox.conversations.unassigned.open
 
-    # Apply conversation priority using assignment policy if available
-    policy = inbox.assignment_policy
-    scope = if policy&.longest_waiting?
+    scope = if assignment_config['conversation_priority'].to_s == 'longest_waiting'
               scope.reorder(last_activity_at: :asc, created_at: :asc)
             else
               scope.reorder(created_at: :asc)
@@ -84,6 +81,10 @@ class AutoAssignment::AssignmentService
   def round_robin_selector
     @round_robin_selector ||= AutoAssignment::RoundRobinSelector.new(inbox: inbox)
   end
+
+  def assignment_config
+    @assignment_config ||= inbox.auto_assignment_config || {}
+  end
 end
 
 AutoAssignment::AssignmentService.prepend_mod_with('AutoAssignment::AssignmentService')

app/services/auto_assignment/rate_limiter.rb

@@ -8,6 +8,8 @@ class AutoAssignment::RateLimiter
   end
 
   def track_assignment(conversation)
+    return unless enabled?
+
     assignment_key = build_assignment_key(conversation.id)
     Redis::Alfred.set(assignment_key, conversation.id.to_s, ex: window)
   end
@@ -22,11 +24,11 @@ class AutoAssignment::RateLimiter
   private
 
   def enabled?
-    config.present? && limit.positive?
+    limit.present? && limit.positive?
   end
 
   def limit
-    config&.fair_distribution_limit.present? ? config.fair_distribution_limit.to_i : Float::INFINITY
+    config&.fair_distribution_limit&.to_i || Math
   end
 
   def window

app/services/automation_rules/action_service.rb

@@ -58,10 +58,7 @@ class AutomationRules::ActionService < ActionService
     teams = Team.where(id: params[0][:team_ids])
 
     teams.each do |team|
-      break unless @account.within_email_rate_limit?
-
       TeamNotifications::AutomationNotificationMailer.conversation_creation(@conversation, team, params[0][:message])&.deliver_now
-      @account.increment_email_sent_count
     end
   end
 end

app/services/message_templates/hook_execution_service.rb

@@ -2,6 +2,7 @@ class MessageTemplates::HookExecutionService
   pattr_initialize [:message!]
 
   def perform
+    return if conversation.campaign.present?
     return if conversation.last_incoming_message.blank?
     return if message.auto_reply_email?
 
@@ -20,7 +21,6 @@ class MessageTemplates::HookExecutionService
   end
 
   def should_send_out_of_office_message?
-    return false if conversation.campaign.present?
     # should not send if its a tweet message
     return false if conversation.tweet?
     # should not send for outbound messages
@@ -37,7 +37,6 @@ class MessageTemplates::HookExecutionService
   end
 
   def should_send_greeting?
-    return false if conversation.campaign.present?
     # should not send if its a tweet message
     return false if conversation.tweet?
 
@@ -50,8 +49,6 @@ class MessageTemplates::HookExecutionService
 
   # TODO: we should be able to reduce this logic once we have a toggle for email collect messages
   def should_send_email_collect?
-    return false if conversation.campaign.present?
-
     !contact_has_email? && inbox.web_widget? && !email_collect_was_sent?
   end
 

app/services/telegram/send_attachments_service.rb

@@ -1,5 +1,3 @@
-require 'faraday/multipart'
-
 # Telegram Attachment APIs: ref: https://core.telegram.org/bots/api#inputfile
 
 # Media attachments like photos, videos can be clubbed together and sent as a media group
@@ -113,33 +111,17 @@ class Telegram::SendAttachmentsService
 
   def send_file(chat_id, file_path, reply_to_message_id)
     File.open(file_path, 'rb') do |file|
-      file_name = File.basename(file_path)
-      mime_type = Marcel::MimeType.for(name: file_name) || 'application/octet-stream'
-
-      payload = { chat_id: chat_id, document: Faraday::Multipart::FilePart.new(file, mime_type, file_name) }
-      payload[:reply_to_message_id] = reply_to_message_id if reply_to_message_id
-      payload.merge!(business_connection_body)
-
-      response = multipart_post_connection.post("#{channel.telegram_api_url}/sendDocument", payload)
-      parse_faraday_response(response)
+      HTTParty.post("#{channel.telegram_api_url}/sendDocument",
+                    body: {
+                      chat_id: chat_id,
+                      **business_connection_body,
+                      document: file,
+                      reply_to_message_id: reply_to_message_id
+                    },
+                    multipart: true)
     end
   end
 
-  def multipart_post_connection
-    @multipart_post_connection ||= Faraday.new do |f|
-      f.request :multipart
-      f.options.timeout = 300
-      f.options.open_timeout = 60
-    end
-  end
-
-  def parse_faraday_response(response)
-    parsed = JSON.parse(response.body)
-    OpenStruct.new(success?: response.success?, parsed_response: parsed)
-  rescue JSON::ParserError
-    OpenStruct.new(success?: false, parsed_response: { 'ok' => false, 'error_code' => response.status, 'description' => response.reason_phrase })
-  end
-
   def handle_response(response)
     return true if response.success?