Merge branch 'release/4.6.0'

2025-10-29 18:22:53 +00:00 · 2025-09-19 13:44:30 +05:30
parent faac1486e9 26a7e1b626
commit 7ab60d9f9c
1016 changed files with 51973 additions and 5446 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,6 +1,7 @@
 version: 2.1
 orbs:
  node: circleci/node@6.1.0
+  qlty-orb: qltysh/qlty-orb@0.0

 defaults: &defaults
  working_directory: ~/build
@@ -89,14 +90,6 @@ jobs:
          command: |
            source ~/.rvm/scripts/rvm
            bundle install
-            # pnpm install
-
-      - run:
-          name: Download cc-test-reporter
-          command: |
-            mkdir -p ~/tmp
-            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
-            chmod +x ~/tmp/cc-test-reporter

      # Swagger verification
      - run:
@@ -108,10 +101,11 @@ jobs:
              echo "ERROR: The swagger.json file is not in sync with the yaml specification. Run 'rake swagger:build' and commit 'swagger/swagger.json'."
              exit 1
            fi
+            mkdir -p ~/tmp
            curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/6.3.0/openapi-generator-cli-6.3.0.jar > ~/tmp/openapi-generator-cli-6.3.0.jar
            java -jar ~/tmp/openapi-generator-cli-6.3.0.jar validate -i swagger/swagger.json

-      # we remove the FRONTED_URL from the .env before running the tests
+      # Configure environment and database
      - run:
          name: Database Setup and Configure Environment Variables
          command: |
@@ -149,17 +143,11 @@ jobs:
          command: pnpm run eslint

      - run:
-          name: Run frontend tests
+          name: Run frontend tests (with coverage)
          command: |
            mkdir -p ~/build/coverage/frontend
-            ~/tmp/cc-test-reporter before-build
            pnpm run test:coverage

-      - run:
-          name: Code Climate Test Coverage (Frontend)
-          command: |
-            ~/tmp/cc-test-reporter format-coverage -t lcov -o "~/build/coverage/frontend/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
-
      # Run backend tests
      - run:
          name: Run backend tests
@@ -167,18 +155,18 @@ jobs:
            mkdir -p ~/tmp/test-results/rspec
            mkdir -p ~/tmp/test-artifacts
            mkdir -p ~/build/coverage/backend
-            ~/tmp/cc-test-reporter before-build
            TESTFILES=$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
-            bundle exec rspec --format progress \
+            bundle exec rspec -I ./spec --require coverage_helper --require spec_helper --format progress \
                              --format RspecJunitFormatter \
                              --out ~/tmp/test-results/rspec.xml \
                              -- ${TESTFILES}
          no_output_timeout: 30m

-      - run:
-          name: Code Climate Test Coverage (Backend)
-          command: |
-            ~/tmp/cc-test-reporter format-coverage -t simplecov -o "~/build/coverage/backend/codeclimate.$CIRCLE_NODE_INDEX.json"
+      # Qlty coverage publish
+      - qlty-orb/coverage_publish:
+          files: |
+            coverage/coverage.json
+            coverage/lcov.info

      - run:
          name: List coverage directory contents
@@ -189,3 +177,7 @@ jobs:
          root: ~/build
          paths:
            - coverage
+
+      - store_artifacts:
+          path: coverage
+          destination: coverage
--- a/.env.example
+++ b/.env.example
@@ -6,6 +6,13 @@
 # Use `rake secret` to generate this variable
 SECRET_KEY_BASE=replace_with_lengthy_secure_hex

+# Active Record Encryption keys (required for MFA/2FA functionality)
+# Generate these keys by running: rails db:encryption:init
+# IMPORTANT: Use different keys for each environment (development, staging, production)
+# ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY=
+# ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY=
+# ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT=
+
 # Replace with the URL you are planning to use for your app
 FRONTEND_URL=http://0.0.0.0:3000
 # To use a dedicated URL for help center pages
--- a/.github/workflows/run_mfa_spec.yml
+++ b/.github/workflows/run_mfa_spec.yml
@@ -0,0 +1,99 @@
+name: Run MFA Tests
+permissions:
+  contents: read
+
+on:
+  pull_request:
+
+# If two pushes happen within a short time in the same PR, cancel the run of the oldest push
+concurrency:
+  group: pr-${{ github.workflow }}-${{ github.head_ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-22.04
+    # Only run if MFA test keys are available
+    if: github.event_name == 'workflow_dispatch' || (github.repository == 'chatwoot/chatwoot' && github.actor != 'dependabot[bot]')
+
+    services:
+      postgres:
+        image: pgvector/pgvector:pg15
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: ''
+          POSTGRES_DB: postgres
+          POSTGRES_HOST_AUTH_METHOD: trust
+        ports:
+          - 5432:5432
+        options: >-
+          --mount type=tmpfs,destination=/var/lib/postgresql/data
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
+        options: --entrypoint redis-server
+
+    env:
+      RAILS_ENV: test
+      POSTGRES_HOST: localhost
+      # Active Record encryption keys required for MFA - test keys only, not for production use
+      ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY: 'test_key_a6cde8f7b9c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7'
+      ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY: 'test_key_b7def9a8c0d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d8'
+      ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT: 'test_salt_c8efa0b9d1e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d9'
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true
+
+      - name: Create database
+        run: bundle exec rake db:create
+
+      - name: Install pgvector extension
+        run: |
+          PGPASSWORD="" psql -h localhost -U postgres -d chatwoot_test -c "CREATE EXTENSION IF NOT EXISTS vector;"
+
+      - name: Seed database
+        run: bundle exec rake db:schema:load
+
+      - name: Run MFA-related backend tests
+        run: |
+          bundle exec rspec \
+            spec/services/mfa/token_service_spec.rb \
+            spec/services/mfa/authentication_service_spec.rb \
+            spec/requests/api/v1/profile/mfa_controller_spec.rb \
+            spec/controllers/devise_overrides/sessions_controller_spec.rb \
+            --profile=10 \
+            --format documentation
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
+
+      - name: Run MFA-related tests in user_spec
+        run: |
+          # Run specific MFA-related tests from user_spec
+          bundle exec rspec spec/models/user_spec.rb \
+            -e "two factor" \
+            -e "2FA" \
+            -e "MFA" \
+            -e "otp" \
+            -e "backup code" \
+            --profile=10 \
+            --format documentation
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
+
+      - name: Upload test logs
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: mfa-test-logs
+          path: |
+            log/test.log
+            tmp/screenshots/
--- a/.gitignore
+++ b/.gitignore
@@ -95,3 +95,7 @@ yarn-debug.log*
 .claude/settings.local.json
 .cursor
 CLAUDE.local.md
+
+# Histoire deployment
+.netlify
+.histoire
--- a/15
+++ b/15
@@ -62,6 +62,10 @@ gem 'redis-namespace'
 # super fast record imports in bulk
 gem 'activerecord-import'

+gem 'searchkick'
+gem 'opensearch-ruby'
+gem 'faraday_middleware-aws-sigv4'
+
 ##--- gems for server & infra configuration ---##
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
@@ -74,9 +78,12 @@ gem 'barnes'
 gem 'devise', '>= 4.9.4'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
 gem 'devise_token_auth', '>= 1.2.3'
+# two-factor authentication
+gem 'devise-two-factor', '>= 5.0.0'
 # authorization
 gem 'jwt'
 gem 'pundit'
+
 # super admin
 gem 'administrate', '>= 0.20.1'
 gem 'administrate-field-active_storage', '>= 1.0.3'
@@ -89,7 +96,7 @@ gem 'wisper', '2.0.0'
 ##--- gems for channels ---##
 gem 'facebook-messenger'
 gem 'line-bot-api'
-gem 'twilio-ruby', '~> 5.66'
+gem 'twilio-ruby'
 # twitty will handle subscription of twitter account events
 # gem 'twitty', git: 'https://github.com/chatwoot/twitty'
 gem 'twitty', '~> 0.1.5'
@@ -167,6 +174,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'

 # need for google auth
 gem 'omniauth', '>= 2.1.2'
+gem 'omniauth-saml'
 gem 'omniauth-google-oauth2', '>= 1.1.3'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'

@@ -212,6 +220,8 @@ group :development do
  gem 'stackprof'
  # Should install the associated chrome extension to view query logs
  gem 'meta_request', '>= 0.8.3'
+
+  gem 'tidewave'
 end

 group :test do
@@ -221,6 +231,7 @@ group :test do
  gem 'webmock'
  # test profiling
  gem 'test-prof'
+  gem 'simplecov_json_formatter', require: false
 end

 group :development, :test do
@@ -245,7 +256,7 @@ group :development, :test do
  gem 'rubocop-factory_bot', require: false
  gem 'seed_dump'
  gem 'shoulda-matchers'
-  gem 'simplecov', '0.17.1', require: false
+  gem 'simplecov', '>= 0.21', require: false
  gem 'spring'
  gem 'spring-watcher-listen'
 end
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -212,6 +212,11 @@ GEM
      railties (>= 4.1.0)
      responders
      warden (~> 1.2.3)
+    devise-two-factor (6.1.0)
+      activesupport (>= 7.0, < 8.1)
+      devise (~> 4.0)
+      railties (>= 7.0, < 8.1)
+      rotp (~> 6.0)
    devise_token_auth (1.2.5)
      bcrypt (~> 3.0)
      devise (> 3.5.2, < 5)
@@ -219,7 +224,7 @@ GEM
    diff-lcs (1.5.1)
    digest-crc (0.6.5)
      rake (>= 12.0.0, < 14.0.0)
-    docile (1.4.0)
+    docile (1.4.1)
    domain_name (0.5.20190701)
      unf (>= 0.0.5, < 1.0.0)
    dotenv (3.1.2)
@@ -230,6 +235,35 @@ GEM
      addressable (~> 2.8)
    drb (2.2.3)
    dry-cli (1.1.0)
+    dry-configurable (1.3.0)
+      dry-core (~> 1.1)
+      zeitwerk (~> 2.6)
+    dry-core (1.1.0)
+      concurrent-ruby (~> 1.0)
+      logger
+      zeitwerk (~> 2.6)
+    dry-inflector (1.2.0)
+    dry-initializer (3.2.0)
+    dry-logic (1.6.0)
+      bigdecimal
+      concurrent-ruby (~> 1.0)
+      dry-core (~> 1.1)
+      zeitwerk (~> 2.6)
+    dry-schema (1.14.1)
+      concurrent-ruby (~> 1.0)
+      dry-configurable (~> 1.0, >= 1.0.1)
+      dry-core (~> 1.1)
+      dry-initializer (~> 3.2)
+      dry-logic (~> 1.5)
+      dry-types (~> 1.8)
+      zeitwerk (~> 2.6)
+    dry-types (1.8.3)
+      bigdecimal (~> 3.0)
+      concurrent-ruby (~> 1.0)
+      dry-core (~> 1.0)
+      dry-inflector (~> 1.0)
+      dry-logic (~> 1.4)
+      zeitwerk (~> 2.6)
    ecma-re-validator (0.4.0)
      regexp_parser (~> 2.2)
    elastic-apm (4.6.2)
@@ -252,8 +286,10 @@ GEM
      railties (>= 5.0.0)
    faker (3.2.0)
      i18n (>= 1.8.11, < 2)
-    faraday (2.9.0)
-      faraday-net_http (>= 2.0, < 3.2)
+    faraday (2.13.1)
+      faraday-net_http (>= 2.0, < 3.5)
+      json
+      logger
    faraday-follow_redirects (0.3.0)
      faraday (>= 1, < 3)
    faraday-mashify (0.1.1)
@@ -261,13 +297,23 @@ GEM
      hashie
    faraday-multipart (1.0.4)
      multipart-post (~> 2)
-    faraday-net_http (3.1.0)
-      net-http
+    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)
    faraday-retry (2.2.1)
      faraday (~> 2.0)
+    faraday_middleware-aws-sigv4 (1.0.1)
+      aws-sigv4 (~> 1.0)
+      faraday (>= 2.0, < 3)
+    fast-mcp (1.5.0)
+      addressable (~> 2.8)
+      base64
+      dry-schema (~> 1.14)
+      json (~> 2.0)
+      mime-types (~> 3.4)
+      rack (~> 3.1)
    fcm (1.0.8)
      faraday (>= 1.0.0, < 3.0)
      googleauth (~> 1)
@@ -406,7 +452,7 @@ GEM
      rails-dom-testing (>= 1, < 3)
      railties (>= 4.2.0)
      thor (>= 0.14, < 2.0)
-    json (2.12.0)
+    json (2.13.2)
    json_refs (0.1.8)
      hana
    json_schemer (0.2.24)
@@ -421,7 +467,7 @@ GEM
    judoscale-sidekiq (1.8.2)
      judoscale-ruby (= 1.8.2)
      sidekiq (>= 5.0)
-    jwt (2.8.1)
+    jwt (2.10.1)
      base64
    kaminari (1.2.2)
      activesupport (>= 4.1.0)
@@ -503,7 +549,7 @@ GEM
    mutex_m (0.3.0)
    neighbor (0.2.3)
      activerecord (>= 5.2)
-    net-http (0.4.1)
+    net-http (0.6.0)
      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
@@ -548,8 +594,9 @@ GEM
    oj (3.16.10)
      bigdecimal (>= 3.0)
      ostruct (>= 0.2)
-    omniauth (2.1.2)
+    omniauth (2.1.3)
      hashie (>= 3.4.6)
+      logger
      rack (>= 2.2.3)
      rack-protection
    omniauth-google-oauth2 (1.1.3)
@@ -563,6 +610,12 @@ GEM
    omniauth-rails_csrf_protection (1.0.2)
      actionpack (>= 4.2)
      omniauth (~> 2.0)
+    omniauth-saml (2.2.4)
+      omniauth (~> 2.1)
+      ruby-saml (~> 1.18)
+    opensearch-ruby (3.4.0)
+      faraday (>= 1.0, < 3)
+      multi_json (>= 1.0)
    openssl (3.2.0)
    orm_adapter (0.5.0)
    os (1.1.4)
@@ -591,7 +644,7 @@ GEM
      activesupport (>= 3.0.0)
    raabro (1.4.0)
    racc (1.8.1)
-    rack (2.2.15)
+    rack (3.2.0)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.5.0)
@@ -600,19 +653,20 @@ GEM
      rack (>= 2.0.0)
    rack-mini-profiler (3.2.0)
      rack (>= 1.2.0)
-    rack-protection (3.2.0)
+    rack-protection (4.1.1)
      base64 (>= 0.1.0)
-      rack (~> 2.2, >= 2.2.4)
+      logger (>= 1.6.0)
+      rack (>= 3.0.0, < 4)
    rack-proxy (0.7.7)
      rack
-    rack-session (1.0.2)
-      rack (< 3)
+    rack-session (2.1.1)
+      base64 (>= 0.1.0)
+      rack (>= 3.0.0)
    rack-test (2.1.0)
      rack (>= 1.3)
    rack-timeout (0.6.3)
-    rackup (1.0.1)
-      rack (< 3)
-      webrick
+    rackup (2.2.1)
+      rack (>= 3)
    rails (7.1.5.2)
      actioncable (= 7.1.5.2)
      actionmailbox (= 7.1.5.2)
@@ -673,7 +727,8 @@ GEM
    retriable (3.1.2)
    reverse_markdown (2.1.1)
      nokogiri
-    rexml (3.4.1)
+    rexml (3.4.4)
+    rotp (6.3.0)
    rspec-core (3.13.0)
      rspec-support (~> 3.13.0)
    rspec-expectations (3.13.2)
@@ -728,6 +783,9 @@ GEM
      faraday (>= 1)
      faraday-multipart (>= 1)
    ruby-progressbar (1.13.0)
+    ruby-saml (1.18.1)
+      nokogiri (>= 1.13.10)
+      rexml
    ruby-vips (2.1.4)
      ffi (~> 1.12)
    ruby2_keywords (0.0.5)
@@ -763,6 +821,9 @@ GEM
      parser
    scss_lint (0.60.0)
      sass (~> 3.5, >= 3.5.5)
+    searchkick (5.5.2)
+      activemodel (>= 7.1)
+      hashie
    securerandom (0.4.1)
    seed_dump (3.3.1)
      activerecord (>= 4)
@@ -809,11 +870,12 @@ GEM
      faraday (>= 0.17.5, < 3.a)
      jwt (>= 1.5, < 3.0)
      multi_json (~> 1.10)
-    simplecov (0.17.1)
+    simplecov (0.22.0)
      docile (~> 1.1)
-      json (>= 1.8, < 3)
-      simplecov-html (~> 0.10.0)
-    simplecov-html (0.10.2)
+      simplecov-html (~> 0.11)
+      simplecov_json_formatter (~> 0.1)
+    simplecov-html (0.13.2)
+    simplecov_json_formatter (0.1.4)
    slack-ruby-client (2.5.2)
      faraday (>= 2.0)
      faraday-mashify
@@ -843,13 +905,17 @@ GEM
    telephone_number (1.4.20)
    test-prof (1.2.1)
    thor (1.4.0)
+    tidewave (0.2.0)
+      fast-mcp (~> 1.5.0)
+      rack (>= 2.0)
+      rails (>= 7.1.0)
    tilt (2.3.0)
    time_diff (0.3.0)
      activesupport
      i18n
    timeout (0.4.3)
    trailblazer-option (0.1.2)
-    twilio-ruby (5.77.0)
+    twilio-ruby (7.6.0)
      faraday (>= 0.9, < 3.0)
      jwt (>= 1.5, < 3.0)
      nokogiri (>= 1.6, < 2.0)
@@ -896,7 +962,6 @@ GEM
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.9.1)
    websocket-driver (0.7.7)
      base64
      websocket-extensions (>= 0.1.0)
@@ -946,6 +1011,7 @@ DEPENDENCIES
  debug (~> 1.8)
  devise (>= 4.9.4)
  devise-secure_password!
+  devise-two-factor (>= 5.0.0)
  devise_token_auth (>= 1.2.3)
  dotenv-rails (>= 3.0.0)
  down
@@ -954,6 +1020,7 @@ DEPENDENCIES
  facebook-messenger
  factory_bot_rails (>= 6.4.3)
  faker
+  faraday_middleware-aws-sigv4
  fcm
  flag_shih_tzu
  foreman
@@ -994,6 +1061,8 @@ DEPENDENCIES
  omniauth-google-oauth2 (>= 1.1.3)
  omniauth-oauth2
  omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
+  omniauth-saml
+  opensearch-ruby
  pg
  pg_search
  pgvector
@@ -1022,6 +1091,7 @@ DEPENDENCIES
  ruby_llm-schema
  scout_apm
  scss_lint
+  searchkick
  seed_dump
  sentry-rails (>= 5.19.0)
  sentry-ruby
@@ -1031,7 +1101,8 @@ DEPENDENCIES
  sidekiq (>= 7.3.1)
  sidekiq-cron (>= 1.12.0)
  sidekiq_alive
-  simplecov (= 0.17.1)
+  simplecov (>= 0.21)
+  simplecov_json_formatter
  slack-ruby-client (~> 2.5.2)
  spring
  spring-watcher-listen
@@ -1040,8 +1111,9 @@ DEPENDENCIES
  stripe
  telephone_number
  test-prof
+  tidewave
  time_diff
-  twilio-ruby (~> 5.66)
+  twilio-ruby
  twitty (~> 0.1.5)
  tzinfo-data
  uglifier
--- a/3
+++ b/3
@@ -2,5 +2,8 @@
 # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.

 require_relative 'config/application'
+# Load Enterprise Edition rake tasks if they exist
+enterprise_tasks_path = Rails.root.join('enterprise/tasks_railtie.rb').to_s
+require enterprise_tasks_path if File.exist?(enterprise_tasks_path)

 Rails.application.load_tasks
--- a/2
+++ b/2
@@ -1 +1 @@
-3.4.2
+3.4.3
--- a/app/builders/agent_builder.rb
+++ b/app/builders/agent_builder.rb
@@ -52,3 +52,5 @@ class AgentBuilder
    }.compact))
  end
 end
+
+AgentBuilder.prepend_mod_with('AgentBuilder')
--- a/app/builders/v2/reports/label_summary_builder.rb
+++ b/app/builders/v2/reports/label_summary_builder.rb
@@ -28,7 +28,7 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder

    {
      conversation_counts: fetch_conversation_counts(conversation_filter),
-      resolved_counts: fetch_resolved_counts(conversation_filter),
+      resolved_counts: fetch_resolved_counts,
      resolution_metrics: fetch_metrics(conversation_filter, 'conversation_resolved', use_business_hours),
      first_response_metrics: fetch_metrics(conversation_filter, 'first_response', use_business_hours),
      reply_metrics: fetch_metrics(conversation_filter, 'reply_time', use_business_hours)
@@ -62,10 +62,21 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
    fetch_counts(conversation_filter)
  end

-  def fetch_resolved_counts(conversation_filter)
-    # since the base query is ActsAsTaggableOn,
-    # the status :resolved won't automatically be converted to integer status
-    fetch_counts(conversation_filter.merge(status: Conversation.statuses[:resolved]))
+  def fetch_resolved_counts
+    # Count resolution events, not conversations currently in resolved status
+    # Filter by reporting_event.created_at, not conversation.created_at
+    reporting_event_filter = { name: 'conversation_resolved', account_id: account.id }
+    reporting_event_filter[:created_at] = range if range.present?
+
+    ReportingEvent
+      .joins(conversation: { taggings: :tag })
+      .where(
+        reporting_event_filter.merge(
+          taggings: { taggable_type: 'Conversation', context: 'labels' }
+        )
+      )
+      .group('tags.name')
+      .count
  end

  def fetch_counts(conversation_filter)
@@ -84,9 +95,7 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder

  def fetch_metrics(conversation_filter, event_name, use_business_hours)
    ReportingEvent
-      .joins('INNER JOIN conversations ON reporting_events.conversation_id = conversations.id')
-      .joins('INNER JOIN taggings ON taggings.taggable_id = conversations.id')
-      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
+      .joins(conversation: { taggings: :tag })
      .where(
        conversations: conversation_filter,
        name: event_name,
--- a/app/builders/v2/reports/timeseries/count_report_builder.rb
+++ b/app/builders/v2/reports/timeseries/count_report_builder.rb
@@ -38,27 +38,34 @@ class V2::Reports::Timeseries::CountReportBuilder < V2::Reports::Timeseries::Bas
  end

  def scope_for_resolutions_count
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
+    scope.reporting_events.where(
      name: :conversation_resolved,
-      conversations: { status: :resolved }, created_at: range
-    ).distinct
+      account_id: account.id,
+      created_at: range
+    )
  end

  def scope_for_bot_resolutions_count
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
+    scope.reporting_events.where(
      name: :conversation_bot_resolved,
-      conversations: { status: :resolved }, created_at: range
-    ).distinct
+      account_id: account.id,
+      created_at: range
+    )
  end

  def scope_for_bot_handoffs_count
    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
      name: :conversation_bot_handoff,
+      account_id: account.id,
      created_at: range
    ).distinct
  end

  def grouped_count
+    # IMPORTANT: time_zone parameter affects both data grouping AND output timestamps
+    # It converts timestamps to the target timezone before grouping, which means
+    # the same event can fall into different day buckets depending on timezone
+    # Example: 2024-01-15 00:00 UTC becomes 2024-01-14 16:00 PST (falls on different day)
    @grouped_values = object_scope.group_by_period(
      group_by,
      :created_at,
--- a/app/controllers/api/v1/accounts/inboxes_controller.rb
+++ b/app/controllers/api/v1/accounts/inboxes_controller.rb
@@ -70,11 +70,9 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
  end

  def sync_templates
-    unless @inbox.channel.is_a?(Channel::Whatsapp)
-      return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' }
-    end
+    return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' } unless whatsapp_channel?

-    Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
+    trigger_template_sync
    render status: :ok, json: { message: 'Template sync initiated successfully' }
  rescue StandardError => e
    render status: :internal_server_error, json: { error: e.message }
@@ -185,6 +183,18 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
      []
    end
  end
+
+  def whatsapp_channel?
+    @inbox.whatsapp? || (@inbox.twilio? && @inbox.channel.whatsapp?)
+  end
+
+  def trigger_template_sync
+    if @inbox.whatsapp?
+      Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
+    elsif @inbox.twilio? && @inbox.channel.whatsapp?
+      Channels::Twilio::TemplatesSyncJob.perform_later(@inbox.channel)
+    end
+  end
 end

 Api::V1::Accounts::InboxesController.prepend_mod_with('Api::V1::Accounts::InboxesController')
--- a/app/controllers/api/v1/accounts/portals_controller.rb
+++ b/app/controllers/api/v1/accounts/portals_controller.rb
@@ -85,7 +85,8 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController

  def live_chat_widget_params
    permitted_params = params.permit(:inbox_id)
-    return {} if permitted_params[:inbox_id].blank?
+    return {} unless permitted_params.key?(:inbox_id)
+    return { channel_web_widget_id: nil } if permitted_params[:inbox_id].blank?

    inbox = Inbox.find(permitted_params[:inbox_id])
    return {} unless inbox.web_widget?
--- a/app/controllers/api/v1/accounts/whatsapp/authorizations_controller.rb
+++ b/app/controllers/api/v1/accounts/whatsapp/authorizations_controller.rb
@@ -1,5 +1,4 @@
 class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
-  before_action :validate_feature_enabled!
  before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }

  # POST /api/v1/accounts/:account_id/whatsapp/authorization
@@ -65,15 +64,6 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
    }, status: :unprocessable_entity
  end

-  def validate_feature_enabled!
-    return if Current.account.feature_whatsapp_embedded_signup?
-
-    render json: {
-      success: false,
-      error: 'WhatsApp embedded signup is not enabled for this account'
-    }, status: :forbidden
-  end
-
  def validate_embedded_signup_params!
    missing_params = []
    missing_params << 'code' if params[:code].blank?
--- a/app/controllers/api/v1/profile/mfa_controller.rb
+++ b/app/controllers/api/v1/profile/mfa_controller.rb
@@ -0,0 +1,68 @@
+class Api::V1::Profile::MfaController < Api::BaseController
+  before_action :check_mfa_feature_available
+  before_action :check_mfa_enabled, only: [:destroy, :backup_codes]
+  before_action :check_mfa_disabled, only: [:create, :verify]
+  before_action :validate_otp, only: [:verify, :backup_codes, :destroy]
+  before_action :validate_password, only: [:destroy]
+
+  def show; end
+
+  def create
+    mfa_service.enable_two_factor!
+  end
+
+  def verify
+    @backup_codes = mfa_service.verify_and_activate!
+  end
+
+  def destroy
+    mfa_service.disable_two_factor!
+  end
+
+  def backup_codes
+    @backup_codes = mfa_service.generate_backup_codes!
+  end
+
+  private
+
+  def mfa_service
+    @mfa_service ||= Mfa::ManagementService.new(user: current_user)
+  end
+
+  def check_mfa_enabled
+    render_could_not_create_error(I18n.t('errors.mfa.not_enabled')) unless current_user.mfa_enabled?
+  end
+
+  def check_mfa_feature_available
+    return if Chatwoot.mfa_enabled?
+
+    render json: {
+      error: I18n.t('errors.mfa.feature_unavailable')
+    }, status: :forbidden
+  end
+
+  def check_mfa_disabled
+    render_could_not_create_error(I18n.t('errors.mfa.already_enabled')) if current_user.mfa_enabled?
+  end
+
+  def validate_otp
+    authenticated = Mfa::AuthenticationService.new(
+      user: current_user,
+      otp_code: mfa_params[:otp_code]
+    ).authenticate
+
+    return if authenticated
+
+    render_could_not_create_error(I18n.t('errors.mfa.invalid_code'))
+  end
+
+  def validate_password
+    return if current_user.valid_password?(mfa_params[:password])
+
+    render_could_not_create_error(I18n.t('errors.mfa.invalid_credentials'))
+  end
+
+  def mfa_params
+    params.permit(:otp_code, :password)
+  end
+end
--- a/app/controllers/api/v1/widget/configs_controller.rb
+++ b/app/controllers/api/v1/widget/configs_controller.rb
@@ -9,7 +9,7 @@ class Api::V1::Widget::ConfigsController < Api::V1::Widget::BaseController
  private

  def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'INSTALLATION_NAME')
  end

  def set_contact
--- a/app/controllers/concerns/switch_locale.rb
+++ b/app/controllers/concerns/switch_locale.rb
@@ -4,17 +4,28 @@ module SwitchLocale
  private

  def switch_locale(&)
-    # priority is for locale set in query string (mostly for widget/from js sdk)
+    # Priority is for locale set in query string (mostly for widget/from js sdk)
    locale ||= params[:locale]

+    # Use the user's locale if available
+    locale ||= locale_from_user
+
+    # Use the locale from a custom domain if applicable
    locale ||= locale_from_custom_domain
+
    # if locale is not set in account, let's use DEFAULT_LOCALE env variable
    locale ||= ENV.fetch('DEFAULT_LOCALE', nil)
+
    set_locale(locale, &)
  end

  def switch_locale_using_account_locale(&)
-    locale = locale_from_account(@current_account)
+    # Get the locale from the user first
+    locale = locale_from_user
+
+    # Fallback to the account's locale if the user's locale is not set
+    locale ||= locale_from_account(@current_account)
+
    set_locale(locale, &)
  end

@@ -32,6 +43,12 @@ module SwitchLocale
    @portal.default_locale
  end

+  def locale_from_user
+    return unless @user
+
+    @user.ui_settings&.dig('locale')
+  end
+
  def set_locale(locale, &)
    safe_locale = validate_and_get_locale(locale)
    # Ensure locale won't bleed into other requests
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -66,7 +66,7 @@ class DashboardController < ActionController::Base
      ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false'),
      FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
      INSTAGRAM_APP_ID: GlobalConfigService.load('INSTAGRAM_APP_ID', ''),
-      FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v17.0'),
+      FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v18.0'),
      WHATSAPP_APP_ID: GlobalConfigService.load('WHATSAPP_APP_ID', ''),
      WHATSAPP_CONFIGURATION_ID: GlobalConfigService.load('WHATSAPP_CONFIGURATION_ID', ''),
      IS_ENTERPRISE: ChatwootApp.enterprise?,
--- a/app/controllers/devise_overrides/omniauth_callbacks_controller.rb
+++ b/app/controllers/devise_overrides/omniauth_callbacks_controller.rb
@@ -47,10 +47,8 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
  end

  def get_resource_from_auth_hash # rubocop:disable Naming/AccessorMethodName
-    # find the user with their email instead of UID and token
-    @resource = resource_class.where(
-      email: auth_hash['info']['email']
-    ).first
+    email = auth_hash.dig('info', 'email')
+    @resource = resource_class.from_email(email)
  end

  def validate_signup_email_is_business_domain?
@@ -75,3 +73,5 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
    'user'
  end
 end
+
+DeviseOverrides::OmniauthCallbacksController.prepend_mod_with('DeviseOverrides::OmniauthCallbacksController')
--- a/app/controllers/devise_overrides/passwords_controller.rb
+++ b/app/controllers/devise_overrides/passwords_controller.rb
@@ -44,3 +44,5 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
    }, status: status
  end
 end
+
+DeviseOverrides::PasswordsController.prepend_mod_with('DeviseOverrides::PasswordsController')
--- a/app/controllers/devise_overrides/sessions_controller.rb
+++ b/app/controllers/devise_overrides/sessions_controller.rb
@@ -9,13 +9,11 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
  end

  def create
-    # Authenticate user via the temporary sso auth token
-    if params[:sso_auth_token].present? && @resource.present?
-      authenticate_resource_with_sso_token
-      yield @resource if block_given?
-      render_create_success
-    else
-      super
+    return handle_mfa_verification if mfa_verification_request?
+    return handle_sso_authentication if sso_authentication_request?
+
+    super do |resource|
+      return handle_mfa_required(resource) if resource&.mfa_enabled?
    end
  end

@@ -25,6 +23,20 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController

  private

+  def mfa_verification_request?
+    params[:mfa_token].present?
+  end
+
+  def sso_authentication_request?
+    params[:sso_auth_token].present? && @resource.present?
+  end
+
+  def handle_sso_authentication
+    authenticate_resource_with_sso_token
+    yield @resource if block_given?
+    render_create_success
+  end
+
  def login_page_url(error: nil)
    frontend_url = ENV.fetch('FRONTEND_URL', nil)

@@ -46,6 +58,41 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
    user = User.from_email(params[:email])
    @resource = user if user&.valid_sso_auth_token?(params[:sso_auth_token])
  end
+
+  def handle_mfa_required(resource)
+    render json: {
+      mfa_required: true,
+      mfa_token: Mfa::TokenService.new(user: resource).generate_token
+    }, status: :partial_content
+  end
+
+  def handle_mfa_verification
+    user = Mfa::TokenService.new(token: params[:mfa_token]).verify_token
+    return render_mfa_error('errors.mfa.invalid_token', :unauthorized) unless user
+
+    authenticated = Mfa::AuthenticationService.new(
+      user: user,
+      otp_code: params[:otp_code],
+      backup_code: params[:backup_code]
+    ).authenticate
+
+    return render_mfa_error('errors.mfa.invalid_code') unless authenticated
+
+    sign_in_mfa_user(user)
+  end
+
+  def sign_in_mfa_user(user)
+    @resource = user
+    @token = @resource.create_token
+    @resource.save!
+
+    sign_in(:user, @resource, store: false, bypass: false)
+    render_create_success
+  end
+
+  def render_mfa_error(message_key, status = :bad_request)
+    render json: { error: I18n.t(message_key) }, status: status
+  end
 end

 DeviseOverrides::SessionsController.prepend_mod_with('DeviseOverrides::SessionsController')
--- a/app/controllers/public/api/v1/portals/base_controller.rb
+++ b/app/controllers/public/api/v1/portals/base_controller.rb
@@ -58,6 +58,6 @@ class Public::Api::V1::Portals::BaseController < PublicController
  end

  def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'BRAND_URL')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'BRAND_URL', 'INSTALLATION_NAME')
  end
 end
--- a/app/controllers/survey/responses_controller.rb
+++ b/app/controllers/survey/responses_controller.rb
@@ -5,6 +5,6 @@ class Survey::ResponsesController < ActionController::Base
  private

  def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'INSTALLATION_NAME')
  end
 end
--- a/app/controllers/widgets_controller.rb
+++ b/app/controllers/widgets_controller.rb
@@ -14,7 +14,7 @@ class WidgetsController < ActionController::Base
  private

  def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED', 'INSTALLATION_NAME')
  end

  def set_web_widget
@@ -70,7 +70,12 @@ class WidgetsController < ActionController::Base
  end

  def allow_iframe_requests
-    response.headers.delete('X-Frame-Options')
+    if @web_widget.allowed_domains.blank?
+      response.headers.delete('X-Frame-Options')
+    else
+      domains = @web_widget.allowed_domains.split(',').map(&:strip).join(' ')
+      response.headers['Content-Security-Policy'] = "frame-ancestors #{domains}"
+    end
  end
 end

--- a/app/helpers/portal_helper.rb
+++ b/app/helpers/portal_helper.rb
@@ -1,4 +1,5 @@
 module PortalHelper
+  include UrlHelper
  def set_og_image_url(portal_name, title)
    cdn_url = GlobalConfig.get('OG_IMAGE_CDN_URL')['OG_IMAGE_CDN_URL']
    return if cdn_url.blank?
@@ -74,6 +75,17 @@ module PortalHelper
    end
  end

+  def generate_portal_brand_url(brand_url, referer)
+    url = URI.parse(brand_url.to_s)
+    query_params = Rack::Utils.parse_query(url.query)
+    query_params['utm_medium'] = 'helpcenter'
+    query_params['utm_campaign'] = 'branding'
+    query_params['utm_source'] = URI.parse(referer).host if url_valid?(referer)
+
+    url.query = query_params.to_query
+    url.to_s
+  end
+
  def render_category_content(content)
    ChatwootMarkdownRenderer.new(content).render_markdown_to_plain_text
  end
--- a/app/helpers/report_helper.rb
+++ b/app/helpers/report_helper.rb
@@ -53,13 +53,13 @@ module ReportHelper
  end

  def resolutions
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_resolved,
-                                                                               conversations: { status: :resolved }, created_at: range).distinct
+    scope.reporting_events.where(account_id: account.id, name: :conversation_resolved,
+                                 created_at: range)
  end

  def bot_resolutions
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_resolved,
-                                                                               conversations: { status: :resolved }, created_at: range).distinct
+    scope.reporting_events.where(account_id: account.id, name: :conversation_bot_resolved,
+                                 created_at: range)
  end

  def bot_handoffs
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -19,6 +19,7 @@ import {
  verifyServiceWorkerExistence,
 } from './helper/pushHelper';
 import ReconnectService from 'dashboard/helper/ReconnectService';
+import { useUISettings } from 'dashboard/composables/useUISettings';

 export default {
  name: 'App',
@@ -38,12 +39,14 @@ export default {
    const { accountId } = useAccount();
    // Use the font size composable (it automatically sets up the watcher)
    const { currentFontSize } = useFontSize();
+    const { uiSettings } = useUISettings();

    return {
      router,
      store,
      currentAccountId: accountId,
      currentFontSize,
+      uiSettings,
    };
  },
  data() {
@@ -88,7 +91,10 @@ export default {
  mounted() {
    this.initializeColorTheme();
    this.listenToThemeChanges();
-    this.setLocale(window.chatwootConfig.selectedLocale);
+    // If user locale is set, use it; otherwise use account locale
+    this.setLocale(
+      this.uiSettings?.locale || window.chatwootConfig.selectedLocale
+    );
  },
  unmounted() {
    if (this.reconnectService) {
@@ -114,7 +120,8 @@ export default {
      const { locale, latest_chatwoot_version: latestChatwootVersion } =
        this.getAccount(this.currentAccountId);
      const { pubsub_token: pubsubToken } = this.currentUser || {};
-      this.setLocale(locale);
+      // If user locale is set, use it; otherwise use account locale
+      this.setLocale(this.uiSettings?.locale || locale);
      this.latestChatwootVersion = latestChatwootVersion;
      vueActionCable.init(this.store, pubsubToken);
      this.reconnectService = new ReconnectService(this.store, this.router);
--- a/app/javascript/dashboard/api/agentCapacityPolicies.js
+++ b/app/javascript/dashboard/api/agentCapacityPolicies.js
@@ -0,0 +1,43 @@
+/* global axios */
+
+import ApiClient from './ApiClient';
+
+class AgentCapacityPolicies extends ApiClient {
+  constructor() {
+    super('agent_capacity_policies', { accountScoped: true });
+  }
+
+  getUsers(policyId) {
+    return axios.get(`${this.url}/${policyId}/users`);
+  }
+
+  addUser(policyId, userData) {
+    return axios.post(`${this.url}/${policyId}/users`, {
+      user_id: userData.id,
+      capacity: userData.capacity,
+    });
+  }
+
+  removeUser(policyId, userId) {
+    return axios.delete(`${this.url}/${policyId}/users/${userId}`);
+  }
+
+  createInboxLimit(policyId, limitData) {
+    return axios.post(`${this.url}/${policyId}/inbox_limits`, {
+      inbox_id: limitData.inboxId,
+      conversation_limit: limitData.conversationLimit,
+    });
+  }
+
+  updateInboxLimit(policyId, limitId, limitData) {
+    return axios.put(`${this.url}/${policyId}/inbox_limits/${limitId}`, {
+      conversation_limit: limitData.conversationLimit,
+    });
+  }
+
+  deleteInboxLimit(policyId, limitId) {
+    return axios.delete(`${this.url}/${policyId}/inbox_limits/${limitId}`);
+  }
+}
+
+export default new AgentCapacityPolicies();
--- a/app/javascript/dashboard/api/assignmentPolicies.js
+++ b/app/javascript/dashboard/api/assignmentPolicies.js
@@ -0,0 +1,36 @@
+/* global axios */
+
+import ApiClient from './ApiClient';
+
+class AssignmentPolicies extends ApiClient {
+  constructor() {
+    super('assignment_policies', { accountScoped: true });
+  }
+
+  getInboxes(policyId) {
+    return axios.get(`${this.url}/${policyId}/inboxes`);
+  }
+
+  setInboxPolicy(inboxId, policyId) {
+    return axios.post(
+      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`,
+      {
+        assignment_policy_id: policyId,
+      }
+    );
+  }
+
+  getInboxPolicy(inboxId) {
+    return axios.get(
+      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`
+    );
+  }
+
+  removeInboxPolicy(inboxId) {
+    return axios.delete(
+      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`
+    );
+  }
+}
+
+export default new AssignmentPolicies();
--- a/app/javascript/dashboard/api/captain/response.js
+++ b/app/javascript/dashboard/api/captain/response.js
@@ -6,11 +6,11 @@ class CaptainResponses extends ApiClient {
    super('captain/assistant_responses', { accountScoped: true });
  }

-  get({ page = 1, searchKey, assistantId, documentId, status } = {}) {
+  get({ page = 1, search, assistantId, documentId, status } = {}) {
    return axios.get(this.url, {
      params: {
        page,
-        searchKey,
+        search,
        assistant_id: assistantId,
        document_id: documentId,
        status,
--- a/app/javascript/dashboard/api/mfa.js
+++ b/app/javascript/dashboard/api/mfa.js
@@ -0,0 +1,28 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class MfaAPI extends ApiClient {
+  constructor() {
+    super('profile/mfa', { accountScoped: false });
+  }
+
+  enable() {
+    return axios.post(`${this.url}`);
+  }
+
+  verify(otpCode) {
+    return axios.post(`${this.url}/verify`, { otp_code: otpCode });
+  }
+
+  disable(password, otpCode) {
+    return axios.delete(this.url, {
+      data: { password, otp_code: otpCode },
+    });
+  }
+
+  regenerateBackupCodes(otpCode) {
+    return axios.post(`${this.url}/backup_codes`, { otp_code: otpCode });
+  }
+}
+
+export default new MfaAPI();
--- a/app/javascript/dashboard/api/samlSettings.js
+++ b/app/javascript/dashboard/api/samlSettings.js
@@ -0,0 +1,26 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class SamlSettingsAPI extends ApiClient {
+  constructor() {
+    super('saml_settings', { accountScoped: true });
+  }
+
+  get() {
+    return axios.get(this.url);
+  }
+
+  create(data) {
+    return axios.post(this.url, { saml_settings: data });
+  }
+
+  update(data) {
+    return axios.put(this.url, { saml_settings: data });
+  }
+
+  delete() {
+    return axios.delete(this.url);
+  }
+}
+
+export default new SamlSettingsAPI();
--- a/app/javascript/dashboard/api/specs/agentCapacityPolicies.spec.js
+++ b/app/javascript/dashboard/api/specs/agentCapacityPolicies.spec.js
@@ -0,0 +1,98 @@
+import agentCapacityPolicies from '../agentCapacityPolicies';
+import ApiClient from '../ApiClient';
+
+describe('#AgentCapacityPoliciesAPI', () => {
+  it('creates correct instance', () => {
+    expect(agentCapacityPolicies).toBeInstanceOf(ApiClient);
+    expect(agentCapacityPolicies).toHaveProperty('get');
+    expect(agentCapacityPolicies).toHaveProperty('show');
+    expect(agentCapacityPolicies).toHaveProperty('create');
+    expect(agentCapacityPolicies).toHaveProperty('update');
+    expect(agentCapacityPolicies).toHaveProperty('delete');
+    expect(agentCapacityPolicies).toHaveProperty('getUsers');
+    expect(agentCapacityPolicies).toHaveProperty('addUser');
+    expect(agentCapacityPolicies).toHaveProperty('removeUser');
+    expect(agentCapacityPolicies).toHaveProperty('createInboxLimit');
+    expect(agentCapacityPolicies).toHaveProperty('updateInboxLimit');
+    expect(agentCapacityPolicies).toHaveProperty('deleteInboxLimit');
+  });
+
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      get: vi.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      put: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+      // Mock accountIdFromRoute
+      Object.defineProperty(agentCapacityPolicies, 'accountIdFromRoute', {
+        get: () => '1',
+        configurable: true,
+      });
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('#getUsers', () => {
+      agentCapacityPolicies.getUsers(123);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/users'
+      );
+    });
+
+    it('#addUser', () => {
+      const userData = { id: 456, capacity: 20 };
+      agentCapacityPolicies.addUser(123, userData);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/users',
+        {
+          user_id: 456,
+          capacity: 20,
+        }
+      );
+    });
+
+    it('#removeUser', () => {
+      agentCapacityPolicies.removeUser(123, 456);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/users/456'
+      );
+    });
+
+    it('#createInboxLimit', () => {
+      const limitData = { inboxId: 1, conversationLimit: 10 };
+      agentCapacityPolicies.createInboxLimit(123, limitData);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits',
+        {
+          inbox_id: 1,
+          conversation_limit: 10,
+        }
+      );
+    });
+
+    it('#updateInboxLimit', () => {
+      const limitData = { conversationLimit: 15 };
+      agentCapacityPolicies.updateInboxLimit(123, 789, limitData);
+      expect(axiosMock.put).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits/789',
+        {
+          conversation_limit: 15,
+        }
+      );
+    });
+
+    it('#deleteInboxLimit', () => {
+      agentCapacityPolicies.deleteInboxLimit(123, 789);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits/789'
+      );
+    });
+  });
+});
--- a/app/javascript/dashboard/api/specs/assignmentPolicies.spec.js
+++ b/app/javascript/dashboard/api/specs/assignmentPolicies.spec.js
@@ -0,0 +1,70 @@
+import assignmentPolicies from '../assignmentPolicies';
+import ApiClient from '../ApiClient';
+
+describe('#AssignmentPoliciesAPI', () => {
+  it('creates correct instance', () => {
+    expect(assignmentPolicies).toBeInstanceOf(ApiClient);
+    expect(assignmentPolicies).toHaveProperty('get');
+    expect(assignmentPolicies).toHaveProperty('show');
+    expect(assignmentPolicies).toHaveProperty('create');
+    expect(assignmentPolicies).toHaveProperty('update');
+    expect(assignmentPolicies).toHaveProperty('delete');
+    expect(assignmentPolicies).toHaveProperty('getInboxes');
+    expect(assignmentPolicies).toHaveProperty('setInboxPolicy');
+    expect(assignmentPolicies).toHaveProperty('getInboxPolicy');
+    expect(assignmentPolicies).toHaveProperty('removeInboxPolicy');
+  });
+
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      get: vi.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+      // Mock accountIdFromRoute
+      Object.defineProperty(assignmentPolicies, 'accountIdFromRoute', {
+        get: () => '1',
+        configurable: true,
+      });
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('#getInboxes', () => {
+      assignmentPolicies.getInboxes(123);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/assignment_policies/123/inboxes'
+      );
+    });
+
+    it('#setInboxPolicy', () => {
+      assignmentPolicies.setInboxPolicy(456, 123);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/inboxes/456/assignment_policy',
+        {
+          assignment_policy_id: 123,
+        }
+      );
+    });
+
+    it('#getInboxPolicy', () => {
+      assignmentPolicies.getInboxPolicy(456);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/inboxes/456/assignment_policy'
+      );
+    });
+
+    it('#removeInboxPolicy', () => {
+      assignmentPolicies.removeInboxPolicy(456);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/inboxes/456/assignment_policy'
+      );
+    });
+  });
+});
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.story.vue
@@ -0,0 +1,116 @@
+<script setup>
+import AgentCapacityPolicyCard from './AgentCapacityPolicyCard.vue';
+
+const mockUsers = [
+  {
+    id: 1,
+    name: 'John Smith',
+    email: 'john.smith@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    name: 'Sarah Johnson',
+    email: 'sarah.johnson@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=2',
+  },
+  {
+    id: 3,
+    name: 'Mike Chen',
+    email: 'mike.chen@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=3',
+  },
+  {
+    id: 4,
+    name: 'Emily Davis',
+    email: 'emily.davis@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=4',
+  },
+  {
+    id: 5,
+    name: 'Alex Rodriguez',
+    email: 'alex.rodriguez@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=5',
+  },
+];
+
+const withCount = policy => ({
+  ...policy,
+  assignedAgentCount: policy.users.length,
+});
+
+const policyA = withCount({
+  id: 1,
+  name: 'High Volume Support',
+  description:
+    'Capacity-based policy for handling high conversation volumes with experienced agents',
+  users: [mockUsers[0], mockUsers[1], mockUsers[2]],
+  isFetchingUsers: false,
+});
+
+const policyB = withCount({
+  id: 2,
+  name: 'Specialized Team',
+  description: 'Custom capacity limits for specialized support team members',
+  users: [mockUsers[3], mockUsers[4]],
+  isFetchingUsers: false,
+});
+
+const emptyPolicy = withCount({
+  id: 3,
+  name: 'New Policy',
+  description: 'Recently created policy with no assigned agents yet',
+  users: [],
+  isFetchingUsers: false,
+});
+
+const loadingPolicy = withCount({
+  id: 4,
+  name: 'Loading Policy',
+  description: 'Policy currently loading agent information',
+  users: [],
+  isFetchingUsers: true,
+});
+
+const onEdit = id => console.log('Edit policy:', id);
+const onDelete = id => console.log('Delete policy:', id);
+const onFetchUsers = id => console.log('Fetch users for policy:', id);
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/AgentCapacityPolicyCard"
+    :layout="{ type: 'grid', width: '1200px' }"
+  >
+    <Variant title="Multiple Cards (Various States)">
+      <div class="p-4 bg-n-background">
+        <div class="grid grid-cols-1 gap-4">
+          <AgentCapacityPolicyCard
+            v-bind="policyA"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+          <AgentCapacityPolicyCard
+            v-bind="policyB"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+          <AgentCapacityPolicyCard
+            v-bind="emptyPolicy"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+          <AgentCapacityPolicyCard
+            v-bind="loadingPolicy"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue
@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import CardPopover from '../components/CardPopover.vue';
+
+const props = defineProps({
+  id: { type: Number, required: true },
+  name: { type: String, default: '' },
+  description: { type: String, default: '' },
+  assignedAgentCount: { type: Number, default: 0 },
+  users: { type: Array, default: () => [] },
+  isFetchingUsers: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['edit', 'delete', 'fetchUsers']);
+
+const { t } = useI18n();
+
+const users = computed(() => {
+  return props.users.map(user => {
+    return {
+      name: user.name,
+      key: user.id,
+      email: user.email,
+      avatarUrl: user.avatarUrl,
+    };
+  });
+});
+
+const handleEdit = () => {
+  emit('edit', props.id);
+};
+
+const handleDelete = () => {
+  emit('delete', props.id);
+};
+
+const handleFetchUsers = () => {
+  if (props.users?.length > 0) return;
+  emit('fetchUsers', props.id);
+};
+</script>
+
+<template>
+  <CardLayout class="[&>div]:px-5">
+    <div class="flex flex-col gap-2 relative justify-between w-full">
+      <div class="flex items-center gap-3 justify-between w-full">
+        <div class="flex items-center gap-3">
+          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
+            {{ name }}
+          </h3>
+          <CardPopover
+            :title="
+              t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.CARD.POPOVER')
+            "
+            icon="i-lucide-users-round"
+            :count="assignedAgentCount"
+            :items="users"
+            :is-fetching="isFetchingUsers"
+            @fetch="handleFetchUsers"
+          />
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            :label="
+              t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.CARD.EDIT')
+            "
+            sm
+            slate
+            link
+            class="px-2"
+            @click="handleEdit"
+          />
+          <div class="w-px h-2.5 bg-n-slate-5" />
+          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
+        </div>
+      </div>
+      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
+        {{ description }}
+      </p>
+    </div>
+  </CardLayout>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.story.vue
@@ -0,0 +1,63 @@
+<script setup>
+import AssignmentCard from './AssignmentCard.vue';
+
+const agentAssignments = [
+  {
+    id: 1,
+    title: 'Assignment policy',
+    description: 'Manage how conversations get assigned in inboxes.',
+    features: [
+      {
+        icon: 'i-lucide-circle-fading-arrow-up',
+        label: 'Assign by conversations evenly or by available capacity',
+      },
+      {
+        icon: 'i-lucide-scale',
+        label: 'Add fair distribution rules to avoid overloading any agent',
+      },
+      {
+        icon: 'i-lucide-inbox',
+        label: 'Add inboxes to a policy - one policy per inbox',
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: 'Agent capacity policy',
+    description: 'Manage workload for agents.',
+    features: [
+      {
+        icon: 'i-lucide-glass-water',
+        label: 'Define maximum conversations per inbox',
+      },
+      {
+        icon: 'i-lucide-circle-minus',
+        label: 'Create exceptions based on labels and time',
+      },
+      {
+        icon: 'i-lucide-users-round',
+        label: 'Add agents to a policy - one policy per agent',
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/AssignmentCard"
+    :layout="{ type: 'grid', width: '1000px' }"
+  >
+    <Variant title="Assignment Card">
+      <div class="px-4 py-4 bg-n-background flex gap-6 justify-between">
+        <AssignmentCard
+          v-for="(item, index) in agentAssignments"
+          :key="index"
+          :title="item.title"
+          :description="item.description"
+          :features="item.features"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue
@@ -0,0 +1,49 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+
+defineProps({
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  features: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <CardLayout class="[&>div]:px-5 cursor-pointer" @click="handleClick">
+    <div class="flex flex-col items-start gap-2">
+      <div class="flex justify-between w-full items-center">
+        <h3 class="text-n-slate-12 text-base font-medium">{{ title }}</h3>
+        <Button
+          xs
+          slate
+          ghost
+          icon="i-lucide-chevron-right"
+          @click.stop="handleClick"
+        />
+      </div>
+      <p class="text-n-slate-11 text-sm mb-0">{{ description }}</p>
+    </div>
+
+    <ul class="flex flex-col items-start gap-3 mt-3">
+      <li
+        v-for="feature in features"
+        :key="feature.id"
+        class="flex items-center gap-3 text-sm"
+      >
+        <Icon
+          :icon="feature.icon"
+          class="text-n-slate-11 size-4 flex-shrink-0"
+        />
+        {{ feature.label }}
+      </li>
+    </ul>
+  </CardLayout>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.story.vue
@@ -0,0 +1,104 @@
+<script setup>
+import AssignmentPolicyCard from './AssignmentPolicyCard.vue';
+
+const mockInboxes = [
+  {
+    id: 1,
+    name: 'Website Support',
+    channel_type: 'Channel::WebWidget',
+    inbox_type: 'Website',
+  },
+  {
+    id: 2,
+    name: 'Email Support',
+    channel_type: 'Channel::Email',
+    inbox_type: 'Email',
+  },
+  {
+    id: 3,
+    name: 'WhatsApp Business',
+    channel_type: 'Channel::Whatsapp',
+    inbox_type: 'WhatsApp',
+  },
+  {
+    id: 4,
+    name: 'Facebook Messenger',
+    channel_type: 'Channel::FacebookPage',
+    inbox_type: 'Messenger',
+  },
+];
+
+const withCount = policy => ({
+  ...policy,
+  assignedInboxCount: policy.inboxes.length,
+});
+
+const policyA = withCount({
+  id: 1,
+  name: 'Website & Email',
+  description: 'Distributes conversations evenly among available agents',
+  assignmentOrder: 'round_robin',
+  conversationPriority: 'high',
+  enabled: true,
+  inboxes: [mockInboxes[0], mockInboxes[1]],
+  isFetchingInboxes: false,
+});
+
+const policyB = withCount({
+  id: 2,
+  name: 'WhatsApp & Messenger',
+  description: 'Assigns based on capacity and workload',
+  assignmentOrder: 'capacity_based',
+  conversationPriority: 'medium',
+  enabled: true,
+  inboxes: [mockInboxes[2], mockInboxes[3]],
+  isFetchingInboxes: false,
+});
+
+const emptyPolicy = withCount({
+  id: 3,
+  name: 'No Inboxes Yet',
+  description: 'Policy with no assigned inboxes',
+  assignmentOrder: 'manual',
+  conversationPriority: 'low',
+  enabled: false,
+  inboxes: [],
+  isFetchingInboxes: false,
+});
+
+const onEdit = id => console.log('Edit policy:', id);
+const onDelete = id => console.log('Delete policy:', id);
+const onFetch = () => console.log('Fetch inboxes');
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/AssignmentPolicyCard"
+    :layout="{ type: 'grid', width: '1200px' }"
+  >
+    <Variant title="Three Cards (Two with inboxes, One empty)">
+      <div class="p-4 bg-n-background">
+        <div class="grid grid-cols-1 gap-4">
+          <AssignmentPolicyCard
+            v-bind="policyA"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-inboxes="onFetch"
+          />
+          <AssignmentPolicyCard
+            v-bind="policyB"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-inboxes="onFetch"
+          />
+          <AssignmentPolicyCard
+            v-bind="emptyPolicy"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-inboxes="onFetch"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue
@@ -0,0 +1,133 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { formatToTitleCase } from 'dashboard/helper/commons';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import CardPopover from '../components/CardPopover.vue';
+
+const props = defineProps({
+  id: { type: Number, required: true },
+  name: { type: String, default: '' },
+  description: { type: String, default: '' },
+  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 },
+});
+
+const emit = defineEmits(['edit', 'delete', 'fetchInboxes']);
+
+const { t } = useI18n();
+
+const inboxes = computed(() => {
+  return props.inboxes.map(inbox => {
+    return {
+      name: inbox.name,
+      id: inbox.id,
+      icon: getInboxIconByType(inbox.channelType, inbox.medium, 'line'),
+    };
+  });
+});
+
+const order = computed(() => {
+  return formatToTitleCase(props.assignmentOrder);
+});
+
+const priority = computed(() => {
+  return formatToTitleCase(props.conversationPriority);
+});
+
+const handleEdit = () => {
+  emit('edit', props.id);
+};
+
+const handleDelete = () => {
+  emit('delete', props.id);
+};
+
+const handleFetchInboxes = () => {
+  if (props.inboxes?.length > 0) return;
+  emit('fetchInboxes', props.id);
+};
+</script>
+
+<template>
+  <CardLayout class="[&>div]:px-5">
+    <div class="flex flex-col gap-2 relative justify-between w-full">
+      <div class="flex items-center gap-3 justify-between w-full">
+        <div class="flex items-center gap-3">
+          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
+            {{ 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(
+                  'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.POPOVER'
+                )
+              "
+              icon="i-lucide-inbox"
+              :count="assignedInboxCount"
+              :items="inboxes"
+              :is-fetching="isFetchingInboxes"
+              @fetch="handleFetchInboxes"
+            />
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            :label="
+              t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.EDIT')
+            "
+            sm
+            slate
+            link
+            class="px-2"
+            @click="handleEdit"
+          />
+          <div v-if="order" class="w-px h-2.5 bg-n-slate-5" />
+          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
+        </div>
+      </div>
+      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
+        {{ description }}
+      </p>
+      <div class="flex items-center gap-3 py-1.5">
+        <span v-if="order" class="text-n-slate-11 text-sm">
+          {{
+            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ORDER')}:`
+          }}
+          <span class="text-n-slate-12">{{ order }}</span>
+        </span>
+        <div v-if="order" class="w-px h-3 bg-n-strong" />
+        <span v-if="priority" class="text-n-slate-11 text-sm">
+          {{
+            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.PRIORITY')}:`
+          }}
+          <span class="text-n-slate-12">{{ priority }}</span>
+        </span>
+      </div>
+    </div>
+  </CardLayout>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue
@@ -0,0 +1,169 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useToggle, useWindowSize, useElementBounding } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+import { picoSearch } from '@scmmishra/pico-search';
+
+import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['add']);
+
+const BUFFER_SPACE = 20;
+
+const [showPopover, togglePopover] = useToggle();
+const buttonRef = ref();
+const dropdownRef = ref();
+
+const searchValue = ref('');
+
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+const {
+  top: buttonTop,
+  left: buttonLeft,
+  width: buttonWidth,
+  height: buttonHeight,
+} = useElementBounding(buttonRef);
+const { width: dropdownWidth, height: dropdownHeight } =
+  useElementBounding(dropdownRef);
+
+const filteredItems = computed(() => {
+  if (!searchValue.value) return props.items;
+  const query = searchValue.value.toLowerCase();
+
+  return picoSearch(props.items, query, ['name']);
+});
+
+const handleAdd = item => {
+  emit('add', item);
+  togglePopover(false);
+};
+
+const shouldShowAbove = computed(() => {
+  if (!buttonRef.value || !dropdownRef.value) return false;
+  const spaceBelow =
+    windowHeight.value - (buttonTop.value + buttonHeight.value);
+  const spaceAbove = buttonTop.value;
+  return (
+    spaceBelow < dropdownHeight.value + BUFFER_SPACE && spaceAbove > spaceBelow
+  );
+});
+
+const shouldAlignRight = computed(() => {
+  if (!buttonRef.value || !dropdownRef.value) return false;
+  const spaceRight = windowWidth.value - buttonLeft.value;
+  const spaceLeft = buttonLeft.value + buttonWidth.value;
+
+  return (
+    spaceRight < dropdownWidth.value + BUFFER_SPACE && spaceLeft > spaceRight
+  );
+});
+
+const handleClickOutside = () => {
+  if (showPopover.value) {
+    togglePopover(false);
+  }
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="handleClickOutside"
+    class="relative flex items-center group"
+  >
+    <Button
+      ref="buttonRef"
+      slate
+      type="button"
+      icon="i-lucide-plus"
+      sm
+      :label="label"
+      @click="togglePopover(!showPopover)"
+    />
+    <div
+      v-if="showPopover"
+      ref="dropdownRef"
+      class="z-50 flex flex-col items-start absolute bg-n-alpha-3 backdrop-blur-[50px] border-0 gap-4 outline outline-1 outline-n-weak rounded-xl max-w-96 min-w-80 max-h-[20rem] overflow-y-auto py-2"
+      :class="[
+        shouldShowAbove ? 'bottom-full mb-2' : 'top-full mt-2',
+        shouldAlignRight ? 'right-0' : 'left-0',
+      ]"
+    >
+      <div class="flex flex-col divide-y divide-n-slate-4 w-full">
+        <Input
+          v-model="searchValue"
+          :placeholder="searchPlaceholder"
+          custom-input-class="bg-transparent !outline-none w-full ltr:!pl-10 rtl:!pr-10 h-10"
+        >
+          <template #prefix>
+            <Icon
+              icon="i-lucide-search"
+              class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-3 rtl:right-3"
+            />
+          </template>
+        </Input>
+
+        <div
+          v-for="item in filteredItems"
+          :key="item.id"
+          class="flex gap-3 min-w-0 w-full py-4 px-3 hover:bg-n-alpha-2 cursor-pointer"
+          :class="{ 'items-center': item.color, 'items-start': !item.color }"
+          @click="handleAdd(item)"
+        >
+          <Icon
+            v-if="item.icon"
+            :icon="item.icon"
+            class="size-4 text-n-slate-12 flex-shrink-0 mt-0.5"
+          />
+          <span
+            v-else-if="item.color"
+            :style="{ backgroundColor: item.color }"
+            class="size-3 rounded-sm"
+          />
+          <Avatar
+            v-else
+            :title="item.name"
+            :src="item.avatarUrl"
+            :name="item.name"
+            :size="20"
+            rounded-full
+          />
+          <div class="flex flex-col items-start gap-2 min-w-0 flex-1">
+            <div class="flex items-center gap-1 min-w-0 w-full">
+              <span
+                :title="item.name || item.title"
+                class="text-sm text-n-slate-12 truncate min-w-0 flex-1"
+              >
+                {{ item.name || item.title }}
+              </span>
+            </div>
+            <span
+              v-if="item.email || item.phoneNumber"
+              :title="item.email || item.phoneNumber"
+              class="text-sm text-n-slate-11 truncate min-w-0 w-full block"
+            >
+              {{ item.email || item.phoneNumber }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue
@@ -0,0 +1,127 @@
+<script setup>
+import { computed, watch } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+
+import WithLabel from 'v3/components/Form/WithLabel.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
+
+defineProps({
+  nameLabel: {
+    type: String,
+    default: '',
+  },
+  namePlaceholder: {
+    type: String,
+    default: '',
+  },
+  descriptionLabel: {
+    type: String,
+    default: '',
+  },
+  descriptionPlaceholder: {
+    type: String,
+    default: '',
+  },
+  statusLabel: {
+    type: String,
+    default: '',
+  },
+  statusPlaceholder: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['validationChange']);
+
+const policyName = defineModel('policyName', {
+  type: String,
+  default: '',
+});
+
+const description = defineModel('description', {
+  type: String,
+  default: '',
+});
+
+const enabled = defineModel('enabled', {
+  type: Boolean,
+  default: true,
+});
+
+const validationRules = {
+  policyName: { required, minLength: minLength(1) },
+  description: { required, minLength: minLength(1) },
+};
+
+const v$ = useVuelidate(validationRules, { policyName, description });
+
+const isValid = computed(() => !v$.value.$invalid);
+
+watch(
+  isValid,
+  () => {
+    emit('validationChange', {
+      isValid: isValid.value,
+      section: 'baseInfo',
+    });
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 pb-4">
+    <!-- Policy Name Field -->
+    <div class="flex items-center gap-6">
+      <WithLabel
+        :label="nameLabel"
+        name="policyName"
+        class="flex items-center w-full [&>label]:min-w-[120px]"
+      >
+        <div class="flex-1">
+          <Input
+            v-model="policyName"
+            type="text"
+            :placeholder="namePlaceholder"
+          />
+        </div>
+      </WithLabel>
+    </div>
+
+    <!-- Description Field -->
+    <div class="flex items-center gap-6">
+      <WithLabel
+        :label="descriptionLabel"
+        name="description"
+        class="flex items-center w-full [&>label]:min-w-[120px]"
+      >
+        <div class="flex-1">
+          <Input
+            v-model="description"
+            type="text"
+            :placeholder="descriptionPlaceholder"
+          />
+        </div>
+      </WithLabel>
+    </div>
+
+    <!-- Status Field -->
+    <div v-if="statusLabel" class="flex items-center gap-6">
+      <WithLabel
+        :label="statusLabel"
+        name="enabled"
+        class="flex items-center w-full [&>label]:min-w-[120px]"
+      >
+        <div class="flex items-center gap-2">
+          <Switch v-model="enabled" />
+          <span class="text-sm text-n-slate-11">
+            {{ statusPlaceholder }}
+          </span>
+        </div>
+      </WithLabel>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/CardPopover.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/CardPopover.vue
@@ -0,0 +1,121 @@
+<script setup>
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  count: {
+    type: Number,
+    default: 0,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['fetch']);
+
+const [showPopover, togglePopover] = useToggle();
+
+const handleButtonClick = () => {
+  emit('fetch');
+  togglePopover(!showPopover.value);
+};
+
+const handleClickOutside = () => {
+  if (showPopover.value) {
+    togglePopover(false);
+  }
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="handleClickOutside"
+    class="relative flex items-center group"
+  >
+    <button
+      v-if="count"
+      class="h-6 px-2 rounded-md bg-n-alpha-2 gap-1.5 flex items-center"
+      @click="handleButtonClick()"
+    >
+      <Icon :icon="icon" class="size-3.5 text-n-slate-12" />
+      <span class="text-n-slate-12 text-sm">
+        {{ count }}
+      </span>
+    </button>
+    <div
+      v-if="showPopover"
+      class="top-full mt-1 ltr:left-0 rtl:right-0 z-50 flex flex-col items-start absolute bg-n-alpha-3 backdrop-blur-[50px] border-0 gap-4 outline outline-1 outline-n-weak p-3 rounded-xl max-w-96 min-w-80 max-h-[20rem] overflow-y-auto"
+    >
+      <div class="flex items-center gap-2.5 pb-2">
+        <Icon :icon="icon" class="size-3.5" />
+        <span class="text-sm text-n-slate-12 font-medium">{{ title }}</span>
+      </div>
+
+      <div
+        v-if="isFetching"
+        class="flex items-center justify-center py-3 w-full text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+
+      <div v-else class="flex flex-col gap-4 w-full">
+        <div
+          v-for="item in items"
+          :key="item.id"
+          class="flex items-center justify-between gap-2 min-w-0 w-full"
+        >
+          <div class="flex items-center gap-2 min-w-0 w-full">
+            <Icon
+              v-if="item.icon"
+              :icon="item.icon"
+              class="size-4 text-n-slate-12 flex-shrink-0"
+            />
+            <Avatar
+              v-else
+              :title="item.name"
+              :src="item.avatarUrl"
+              :name="item.name"
+              :size="20"
+              rounded-full
+            />
+            <div class="flex items-center gap-1 min-w-0 flex-1">
+              <span
+                :title="item.name"
+                class="text-sm text-n-slate-12 truncate min-w-0"
+              >
+                {{ item.name }}
+              </span>
+              <span
+                v-if="item.id"
+                class="text-sm text-n-slate-11 flex-shrink-0"
+              >
+                {{ `#${item.id}` }}
+              </span>
+            </div>
+          </div>
+          <span v-if="item.email" class="text-sm text-n-slate-11 flex-shrink-0">
+            {{ item.email }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/DataTable.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/DataTable.vue
@@ -0,0 +1,90 @@
+<script setup>
+import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+  emptyStateMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['delete']);
+
+const handleDelete = itemId => {
+  emit('delete', itemId);
+};
+</script>
+
+<template>
+  <div
+    v-if="isFetching"
+    class="flex items-center justify-center py-3 w-full text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+  <div
+    v-else-if="items.length === 0 && emptyStateMessage"
+    class="custom-dashed-border flex items-center justify-center py-6 w-full"
+  >
+    <span class="text-sm text-n-slate-11">
+      {{ emptyStateMessage }}
+    </span>
+  </div>
+  <div v-else class="flex flex-col divide-y divide-n-weak">
+    <div
+      v-for="item in items"
+      :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"
+    >
+      <div class="flex items-center gap-2 col-span-2">
+        <Icon
+          v-if="item.icon"
+          :icon="item.icon"
+          class="size-4 text-n-slate-12 flex-shrink-0"
+        />
+        <Avatar
+          v-else
+          :title="item.name"
+          :src="item.avatarUrl"
+          :name="item.name"
+          :size="20"
+          rounded-full
+        />
+        <span class="text-sm text-n-slate-12 truncate min-w-0">
+          {{ item.name }}
+        </span>
+      </div>
+
+      <div class="flex items-start gap-2 col-span-1">
+        <span
+          :title="item.email || item.phoneNumber"
+          class="text-sm text-n-slate-12 truncate min-w-0"
+        >
+          {{ item.email || item.phoneNumber }}
+        </span>
+      </div>
+
+      <div class="col-span-1 justify-end flex items-center">
+        <Button
+          icon="i-lucide-trash"
+          slate
+          ghost
+          sm
+          type="button"
+          @click="handleDelete(item.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
@@ -0,0 +1,149 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
+import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
+import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
+import { DURATION_UNITS } from 'dashboard/components-next/input/constants';
+
+const props = defineProps({
+  tagsList: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const excludedLabels = defineModel('excludedLabels', {
+  type: Array,
+  default: () => [],
+});
+
+const excludeOlderThanMinutes = defineModel('excludeOlderThanMinutes', {
+  type: Number,
+  default: 10,
+});
+
+// Duration limits: 10 minutes to 999 days (in minutes)
+const MIN_DURATION_MINUTES = 10;
+const MAX_DURATION_MINUTES = 1438560; // 999 days * 24 hours * 60 minutes
+
+const { t } = useI18n();
+
+const hoveredLabel = ref(null);
+const windowUnit = ref(DURATION_UNITS.MINUTES);
+
+const addedTags = computed(() =>
+  props.tagsList
+    .filter(label => excludedLabels.value.includes(label.name))
+    .map(label => ({ id: label.id, title: label.name, ...label }))
+);
+
+const filteredTags = computed(() =>
+  props.tagsList.filter(
+    label => !addedTags.value.some(tag => tag.id === label.id)
+  )
+);
+
+const detectUnit = minutes => {
+  const m = Number(minutes) || 0;
+  if (m === 0) return DURATION_UNITS.MINUTES;
+  if (m % (24 * 60) === 0) return DURATION_UNITS.DAYS;
+  if (m % 60 === 0) return DURATION_UNITS.HOURS;
+  return DURATION_UNITS.MINUTES;
+};
+
+const onClickAddTag = tag => {
+  excludedLabels.value = [...excludedLabels.value, tag.name];
+};
+
+const onClickRemoveTag = tag => {
+  excludedLabels.value = excludedLabels.value.filter(
+    name => name !== tag.title
+  );
+};
+
+onMounted(() => {
+  windowUnit.value = detectUnit(excludeOlderThanMinutes.value);
+});
+</script>
+
+<template>
+  <div class="py-4 flex-col flex gap-6">
+    <div class="flex flex-col items-start gap-1 py-1">
+      <label class="text-sm font-medium text-n-slate-12 py-1">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.LABEL'
+          )
+        }}
+      </label>
+      <p class="mb-0 text-n-slate-11 text-sm">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.DESCRIPTION'
+          )
+        }}
+      </p>
+    </div>
+
+    <div class="flex flex-col items-start gap-4">
+      <label class="text-sm font-medium text-n-slate-12 py-1">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.LABEL'
+          )
+        }}
+      </label>
+      <div
+        class="flex items-start gap-2 flex-wrap"
+        @mouseleave="hoveredLabel = null"
+      >
+        <LabelItem
+          v-for="tag in addedTags"
+          :key="tag.id"
+          :label="tag"
+          :is-hovered="hoveredLabel === tag.id"
+          class="h-8"
+          @remove="onClickRemoveTag"
+          @hover="hoveredLabel = tag.id"
+        />
+        <AddDataDropdown
+          :label="
+            t(
+              'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.ADD_TAG'
+            )
+          "
+          :search-placeholder="
+            t(
+              'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.DROPDOWN.SEARCH_PLACEHOLDER'
+            )
+          "
+          :items="filteredTags"
+          class="[&>button]:!text-n-blue-text [&>div]:min-w-64"
+          @add="onClickAddTag"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col items-start gap-4">
+      <label class="text-sm font-medium text-n-slate-12 py-1">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.DURATION.LABEL'
+          )
+        }}
+      </label>
+      <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 -->
+        <DurationInput
+          v-model:unit="windowUnit"
+          v-model:model-value="excludeOlderThanMinutes"
+          :min="MIN_DURATION_MINUTES"
+          :max="MAX_DURATION_MINUTES"
+        />
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/FairDistribution.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/FairDistribution.vue
@@ -0,0 +1,86 @@
+<script setup>
+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';
+import { DURATION_UNITS } from 'dashboard/components-next/input/constants';
+
+const { t } = useI18n();
+
+const fairDistributionLimit = defineModel('fairDistributionLimit', {
+  type: Number,
+  default: 100,
+  set(value) {
+    return Number(value) || 0;
+  },
+});
+
+const fairDistributionWindow = defineModel('fairDistributionWindow', {
+  type: Number,
+  default: 3600,
+  set(value) {
+    return Number(value) || 0;
+  },
+});
+
+const windowUnit = ref(DURATION_UNITS.MINUTES);
+
+const detectUnit = minutes => {
+  const m = Number(minutes) || 0;
+  if (m === 0) return DURATION_UNITS.MINUTES;
+  if (m % (24 * 60) === 0) return DURATION_UNITS.DAYS;
+  if (m % 60 === 0) return DURATION_UNITS.HOURS;
+  return DURATION_UNITS.MINUTES;
+};
+
+onMounted(() => {
+  windowUnit.value = detectUnit(fairDistributionWindow.value);
+});
+</script>
+
+<template>
+  <div
+    class="flex items-start xl:items-center flex-col md:flex-row gap-4 lg:gap-3 bg-n-solid-1 p-4 outline outline-1 outline-n-weak rounded-xl"
+  >
+    <div class="flex items-center gap-3">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.FORM.FAIR_DISTRIBUTION.INPUT_MAX'
+          )
+        }}
+      </label>
+      <div class="flex-1">
+        <Input
+          v-model="fairDistributionLimit"
+          type="number"
+          placeholder="100"
+          max="100000"
+          class="w-full"
+        />
+      </div>
+    </div>
+
+    <div class="flex sm:flex-row flex-col items-start sm:items-center gap-4">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.FORM.FAIR_DISTRIBUTION.DURATION'
+          )
+        }}
+      </label>
+
+      <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 -->
+        <DurationInput
+          v-model:model-value="fairDistributionWindow"
+          v-model:unit="windowUnit"
+          :min="10"
+          :max="1438560"
+        />
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue
@@ -0,0 +1,177 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
+
+const props = defineProps({
+  inboxList: {
+    type: Array,
+    default: () => [],
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['delete', 'add', 'update']);
+
+const inboxCapacityLimits = defineModel('inboxCapacityLimits', {
+  type: Array,
+  default: () => [],
+});
+
+const { t } = useI18n();
+
+const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY';
+const DEFAULT_CONVERSATION_LIMIT = 10;
+const MIN_CONVERSATION_LIMIT = 1;
+const MAX_CONVERSATION_LIMIT = 100000;
+
+const selectedInboxIds = computed(
+  () => new Set(inboxCapacityLimits.value.map(limit => limit.inboxId))
+);
+
+const availableInboxes = computed(() =>
+  props.inboxList.filter(
+    inbox => inbox && !selectedInboxIds.value.has(inbox.id)
+  )
+);
+
+const isLimitValid = limit => {
+  return (
+    limit.conversationLimit >= MIN_CONVERSATION_LIMIT &&
+    limit.conversationLimit <= MAX_CONVERSATION_LIMIT
+  );
+};
+
+const inboxMap = computed(
+  () => new Map(props.inboxList.map(inbox => [inbox.id, inbox]))
+);
+
+const handleAddInbox = inbox => {
+  emit('add', {
+    inboxId: inbox.id,
+    conversationLimit: DEFAULT_CONVERSATION_LIMIT,
+  });
+};
+
+const handleRemoveLimit = limitId => {
+  emit('delete', limitId);
+};
+
+const handleLimitChange = limit => {
+  if (isLimitValid(limit)) {
+    emit('update', limit);
+  }
+};
+
+const getInboxName = inboxId => {
+  return inboxMap.value.get(inboxId)?.name || '';
+};
+</script>
+
+<template>
+  <div class="py-4 flex-col flex gap-3">
+    <div class="flex items-center w-full gap-8 justify-between pt-1 pb-3">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{ t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.LABEL`) }}
+      </label>
+
+      <AddDataDropdown
+        :label="t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.ADD_BUTTON`)"
+        :search-placeholder="
+          t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.SELECT_INBOX`)
+        "
+        :items="availableInboxes"
+        @add="handleAddInbox"
+      />
+    </div>
+
+    <div
+      v-if="isFetching"
+      class="flex items-center justify-center py-3 w-full text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+
+    <div
+      v-else-if="!inboxCapacityLimits.length"
+      class="custom-dashed-border flex items-center justify-center py-6 w-full"
+    >
+      <span class="text-sm text-n-slate-11">
+        {{ t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.EMPTY_STATE`) }}
+      </span>
+    </div>
+
+    <div v-else class="flex-col flex gap-3">
+      <div
+        v-for="(limit, index) in inboxCapacityLimits"
+        :key="limit.id || `temp-${index}`"
+        class="flex flex-col xs:flex-row items-stretch gap-3"
+      >
+        <div
+          class="flex items-center rounded-lg outline-1 outline cursor-not-allowed text-n-slate-11 outline-n-weak py-2.5 px-3 text-sm w-full min-w-0"
+          :title="getInboxName(limit.inboxId)"
+        >
+          <span class="truncate min-w-0">
+            {{ getInboxName(limit.inboxId) }}
+          </span>
+        </div>
+
+        <div class="flex items-center gap-3 w-full xs:w-auto">
+          <div
+            class="py-2.5 px-3 rounded-lg gap-2 outline outline-1 flex-1 xs:flex-shrink-0 flex items-center min-w-0"
+            :class="[
+              !isLimitValid(limit) ? 'outline-n-ruby-8' : 'outline-n-weak',
+            ]"
+          >
+            <label
+              class="text-sm text-n-slate-12 ltr:pr-2 rtl:pl-2 truncate min-w-0 flex-shrink"
+              :title="
+                t(
+                  `${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.MAX_CONVERSATIONS`
+                )
+              "
+            >
+              {{
+                t(
+                  `${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.MAX_CONVERSATIONS`
+                )
+              }}
+            </label>
+
+            <div class="h-5 w-px bg-n-weak" />
+
+            <input
+              v-model.number="limit.conversationLimit"
+              type="number"
+              :min="MIN_CONVERSATION_LIMIT"
+              :max="MAX_CONVERSATION_LIMIT"
+              class="reset-base bg-transparent focus:outline-none min-w-16 w-24 text-sm flex-shrink-0"
+              :class="[
+                !isLimitValid(limit)
+                  ? 'placeholder:text-n-ruby-9 !text-n-ruby-9'
+                  : 'placeholder:text-n-slate-10 text-n-slate-12',
+              ]"
+              :placeholder="
+                t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.SET_LIMIT`)
+              "
+              @blur="handleLimitChange(limit)"
+            />
+          </div>
+
+          <Button
+            type="button"
+            slate
+            icon="i-lucide-trash"
+            class="flex-shrink-0"
+            @click="handleRemoveLimit(limit.id)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/RadioCard.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/RadioCard.vue
@@ -0,0 +1,60 @@
+<script setup>
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const handleChange = () => {
+  if (!props.isActive) {
+    emit('select', props.id);
+  }
+};
+</script>
+
+<template>
+  <div
+    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="[
+      isActive ? 'outline-n-blue-9' : 'outline-n-weak hover:outline-n-strong',
+    ]"
+    @click="handleChange"
+  >
+    <div class="absolute top-4 right-4">
+      <input
+        :id="`${id}`"
+        :checked="isActive"
+        :value="id"
+        :name="id"
+        type="radio"
+        class="h-4 w-4 border-n-slate-6 text-n-brand focus:ring-n-brand focus:ring-offset-0"
+        @change="handleChange"
+      />
+    </div>
+
+    <!-- Content -->
+    <div class="flex flex-col gap-3 items-start">
+      <h3 class="text-sm font-medium text-n-slate-12">
+        {{ label }}
+      </h3>
+      <p class="text-sm text-n-slate-11">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/AddDataDropdown.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/AddDataDropdown.story.vue
@@ -0,0 +1,92 @@
+<script setup>
+import AddDataDropdown from '../AddDataDropdown.vue';
+
+const mockInboxes = [
+  {
+    id: 1,
+    name: 'Website Support',
+    email: 'support@company.com',
+    icon: 'i-lucide-globe',
+  },
+  {
+    id: 2,
+    name: 'Email Support',
+    email: 'help@company.com',
+    icon: 'i-lucide-mail',
+  },
+  {
+    id: 3,
+    name: 'WhatsApp Business',
+    phoneNumber: '+1 555-0123',
+    icon: 'i-lucide-message-circle',
+  },
+  {
+    id: 4,
+    name: 'Facebook Messenger',
+    email: 'messenger@company.com',
+    icon: 'i-lucide-facebook',
+  },
+  {
+    id: 5,
+    name: 'Twitter DM',
+    email: 'twitter@company.com',
+    icon: 'i-lucide-twitter',
+  },
+];
+
+const mockTags = [
+  {
+    id: 1,
+    name: 'urgent',
+    color: '#ff4757',
+  },
+  {
+    id: 2,
+    name: 'bug',
+    color: '#ff6b6b',
+  },
+  {
+    id: 3,
+    name: 'feature-request',
+    color: '#4834d4',
+  },
+  {
+    id: 4,
+    name: 'documentation',
+    color: '#26de81',
+  },
+];
+
+const handleAdd = item => {
+  console.log('Add item:', item);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/AddDataDropdown"
+    :layout="{ type: 'grid', width: '500px' }"
+  >
+    <Variant title="Basic Usage - Inboxes">
+      <div class="p-8 bg-n-background flex gap-4 h-[400px] items-start">
+        <AddDataDropdown
+          label="Add Inbox"
+          search-placeholder="Search inboxes..."
+          :items="mockInboxes"
+          @add="handleAdd"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Basic Usage - Tags">
+      <div class="p-8 bg-n-background flex gap-4 h-[400px] items-start">
+        <AddDataDropdown
+          label="Add Tag"
+          search-placeholder="Search tags..."
+          :items="mockTags"
+          @add="handleAdd"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/BaseInfo.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/BaseInfo.story.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { ref } from 'vue';
+import BaseInfo from '../BaseInfo.vue';
+
+const policyName = ref('Round Robin Policy');
+const description = ref(
+  'Distributes conversations evenly among available agents'
+);
+const enabled = ref(true);
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/BaseInfo"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background">
+        <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>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/CardPopover.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/CardPopover.story.vue
@@ -0,0 +1,89 @@
+<script setup>
+import CardPopover from '../CardPopover.vue';
+
+const mockItems = [
+  {
+    id: 1,
+    name: 'Website Support',
+    icon: 'i-lucide-globe',
+  },
+  {
+    id: 2,
+    name: 'Email Support',
+    icon: 'i-lucide-mail',
+  },
+  {
+    id: 3,
+    name: 'WhatsApp Business',
+    icon: 'i-lucide-message-circle',
+  },
+  {
+    id: 4,
+    name: 'Facebook Messenger',
+    icon: 'i-lucide-facebook',
+  },
+];
+
+const mockUsers = [
+  {
+    id: 1,
+    name: 'John Smith',
+    email: 'john.smith@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    name: 'Sarah Johnson',
+    email: 'sarah.johnson@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=2',
+  },
+  {
+    id: 3,
+    name: 'Mike Chen',
+    email: 'mike.chen@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=3',
+  },
+  {
+    id: 4,
+    name: 'Emily Davis',
+    email: 'emily.davis@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=4',
+  },
+  {
+    id: 5,
+    name: 'Alex Rodriguez',
+    email: 'alex.rodriguez@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=5',
+  },
+];
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/CardPopover"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background flex gap-4 h-96 items-start">
+        <CardPopover
+          :count="3"
+          title="Added Inboxes"
+          icon="i-lucide-inbox"
+          :items="mockItems.slice(0, 3)"
+          @fetch="() => console.log('Fetch triggered')"
+        />
+      </div>
+    </Variant>
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background flex gap-4 h-96 items-start">
+        <CardPopover
+          :count="3"
+          title="Added Agents"
+          icon="i-lucide-users-round"
+          :items="mockUsers.slice(0, 3)"
+          @fetch="() => console.log('Fetch triggered')"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/DataTable.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/DataTable.story.vue
@@ -0,0 +1,87 @@
+<script setup>
+import DataTable from '../DataTable.vue';
+
+const mockItems = [
+  {
+    id: 1,
+    name: 'Website Support',
+    email: 'support@company.com',
+    icon: 'i-lucide-globe',
+  },
+  {
+    id: 2,
+    name: 'Email Support',
+    email: 'help@company.com',
+    icon: 'i-lucide-mail',
+  },
+  {
+    id: 3,
+    name: 'WhatsApp Business',
+    phoneNumber: '+1 555-0123',
+    icon: 'i-lucide-message-circle',
+  },
+];
+
+const mockAgentList = [
+  {
+    id: 1,
+    name: 'John Doe',
+    email: 'john.doe@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    name: 'Jane Smith',
+    email: 'jane.smith@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=2',
+  },
+];
+
+const handleDelete = itemId => {
+  console.log('Delete item:', itemId);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/DataTable"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="With Data">
+      <div class="p-8 bg-n-background">
+        <DataTable
+          :items="mockItems"
+          :is-fetching="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Agents">
+      <div class="p-8 bg-n-background">
+        <DataTable
+          :items="mockAgentList"
+          :is-fetching="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Loading State">
+      <div class="p-8 bg-n-background">
+        <DataTable :items="[]" is-fetching @delete="handleDelete" />
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div class="p-8 bg-n-background">
+        <DataTable
+          :items="[]"
+          :is-fetching="false"
+          empty-state-message="No items found"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/ExclusionRules.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/ExclusionRules.story.vue
@@ -0,0 +1,67 @@
+<script setup>
+import ExclusionRules from '../ExclusionRules.vue';
+import { ref } from 'vue';
+
+const mockTagsList = [
+  {
+    id: 1,
+    name: 'urgent',
+    color: '#ff4757',
+  },
+  {
+    id: 2,
+    name: 'bug',
+    color: '#ff6b6b',
+  },
+  {
+    id: 3,
+    name: 'feature-request',
+    color: '#4834d4',
+  },
+  {
+    id: 4,
+    name: 'documentation',
+    color: '#26de81',
+  },
+  {
+    id: 5,
+    name: 'enhancement',
+    color: '#2ed573',
+  },
+  {
+    id: 6,
+    name: 'question',
+    color: '#ffa502',
+  },
+  {
+    id: 7,
+    name: 'duplicate',
+    color: '#747d8c',
+  },
+  {
+    id: 8,
+    name: 'wontfix',
+    color: '#57606f',
+  },
+];
+
+const excludedLabelsBasic = ref([]);
+const excludeOlderThanHoursBasic = ref(10);
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/ExclusionRules"
+    :layout="{ type: 'grid', width: '1200px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background h-[600px]">
+        <ExclusionRules
+          v-model:excluded-labels="excludedLabelsBasic"
+          v-model:exclude-older-than-minutes="excludeOlderThanHoursBasic"
+          :tags-list="mockTagsList"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/FairDistribution.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/FairDistribution.story.vue
@@ -0,0 +1,25 @@
+<script setup>
+import { ref } from 'vue';
+import FairDistribution from '../FairDistribution.vue';
+
+const fairDistributionLimit = ref(100);
+const fairDistributionWindow = ref(3600);
+const windowUnit = ref('minutes');
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/FairDistribution"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background">
+        <FairDistribution
+          v-model:fair-distribution-limit="fairDistributionLimit"
+          v-model:fair-distribution-window="fairDistributionWindow"
+          v-model:window-unit="windowUnit"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/InboxCapacityLimits.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/InboxCapacityLimits.story.vue
@@ -0,0 +1,108 @@
+<script setup>
+import InboxCapacityLimits from '../InboxCapacityLimits.vue';
+import { ref } from 'vue';
+
+const mockInboxList = [
+  {
+    value: 1,
+    label: 'Website Support',
+    icon: 'i-lucide-globe',
+  },
+  {
+    value: 2,
+    label: 'Email Support',
+    icon: 'i-lucide-mail',
+  },
+  {
+    value: 3,
+    label: 'WhatsApp Business',
+    icon: 'i-lucide-message-circle',
+  },
+  {
+    value: 4,
+    label: 'Facebook Messenger',
+    icon: 'i-lucide-facebook',
+  },
+  {
+    value: 5,
+    label: 'Twitter DM',
+    icon: 'i-lucide-twitter',
+  },
+  {
+    value: 6,
+    label: 'Telegram',
+    icon: 'i-lucide-send',
+  },
+];
+
+const inboxCapacityLimitsEmpty = ref([]);
+const inboxCapacityLimitsNew = ref([
+  { id: 1, inboxId: 1, conversationLimit: 5 },
+  { inboxId: null, conversationLimit: null },
+]);
+
+const handleDelete = id => {
+  console.log('Delete capacity limit:', id);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/InboxCapacityLimits"
+    :layout="{ type: 'grid', width: '900px' }"
+  >
+    <Variant title="Empty State">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
+          :inbox-list="mockInboxList"
+          :is-fetching="false"
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Loading State">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
+          :inbox-list="mockInboxList"
+          is-fetching
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With New Row and existing data">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsNew"
+          :inbox-list="mockInboxList"
+          :is-fetching="false"
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Interactive Demo">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
+          :inbox-list="mockInboxList"
+          :is-fetching="false"
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+        <div class="mt-4 p-4 bg-n-alpha-2 rounded-lg">
+          <h4 class="text-sm font-medium mb-2">Current Limits:</h4>
+          <pre class="text-xs">{{
+            JSON.stringify(inboxCapacityLimitsEmpty, null, 2)
+          }}</pre>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/RadioCard.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/RadioCard.story.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { ref } from 'vue';
+import RadioCard from '../RadioCard.vue';
+
+const selectedOption = ref('round_robin');
+
+const handleSelect = value => {
+  selectedOption.value = value;
+  console.log('Selected:', value);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/RadioCard"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background space-y-4">
+        <RadioCard
+          id="round_robin"
+          label="Round Robin"
+          description="Distributes conversations evenly among all available agents in a rotating manner"
+          :is-active="selectedOption === 'round_robin'"
+          @select="handleSelect"
+        />
+        <RadioCard
+          id="balanced"
+          label="Balanced Assignment"
+          description="Assigns conversations based on agent workload to maintain balance"
+          :is-active="selectedOption === 'balanced'"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Active State">
+      <div class="p-8 bg-n-background">
+        <RadioCard
+          id="active_option"
+          label="Active Option"
+          description="This option is currently selected and active"
+          is-active
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Inactive State">
+      <div class="p-8 bg-n-background">
+        <RadioCard
+          id="inactive_option"
+          label="Inactive Option"
+          description="This option is not selected and can be clicked to activate"
+          is-active
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
@@ -86,8 +86,8 @@ const handleLabelAction = async ({ value }) => {
  }
 };

-const handleRemoveLabel = labelId => {
-  return handleLabelAction({ value: labelId });
+const handleRemoveLabel = label => {
+  return handleLabelAction({ value: label.id });
 };

 watch(
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -62,6 +62,7 @@ const segmentsQuery = ref({});

 const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
 const contactAttributes = useMapGetter('attributes/getContactAttributes');
+const labels = useMapGetter('labels/getLabels');
 const hasActiveSegments = computed(
  () => props.activeSegment && props.segmentsId !== 0
 );
@@ -215,6 +216,7 @@ const setParamsForEditSegmentModal = () => {
    countries,
    filterTypes: contactFilterItems,
    allCustomAttributes: useSnakeCase(contactAttributes.value),
+    labels: labels.value || [],
  };
 };

--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -51,12 +51,20 @@ const originalState = reactive({ ...state });

 const liveChatWidgets = computed(() => {
  const inboxes = store.getters['inboxes/getInboxes'];
-  return inboxes
+  const widgetOptions = inboxes
    .filter(inbox => inbox.channel_type === 'Channel::WebWidget')
    .map(inbox => ({
      value: inbox.id,
      label: inbox.name,
    }));
+
+  return [
+    {
+      value: '',
+      label: t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.NONE_OPTION'),
+    },
+    ...widgetOptions,
+  ];
 });

 const rules = {
@@ -108,7 +116,7 @@ watch(
        widgetColor: newVal.color,
        homePageLink: newVal.homepage_link,
        slug: newVal.slug,
-        liveChatWidgetInboxId: newVal.inbox?.id,
+        liveChatWidgetInboxId: newVal.inbox?.id || '',
      });
      if (newVal.logo) {
        const {
--- a/app/javascript/dashboard/components-next/Label/LabelItem.vue
+++ b/app/javascript/dashboard/components-next/Label/LabelItem.vue
@@ -15,7 +15,7 @@ const props = defineProps({
 const emit = defineEmits(['remove', 'hover']);

 const handleRemoveLabel = () => {
-  emit('remove', props.label?.id);
+  emit('remove', props.label);
 };

 const handleMouseEnter = () => {
@@ -45,6 +45,7 @@ const handleMouseEnter = () => {
      <Button
        class="transition-opacity duration-200 !h-7 ltr:rounded-r-md rtl:rounded-l-md ltr:rounded-l-none rtl:rounded-r-none w-6 bg-transparent"
        :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
+        type="button"
        slate
        xs
        faded
--- a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
@@ -11,12 +11,14 @@ import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';

 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsAppOptions from './WhatsAppOptions.vue';
+import ContentTemplateSelector from './ContentTemplateSelector.vue';

 const props = defineProps({
  attachedFiles: { type: Array, default: () => [] },
  isWhatsappInbox: { type: Boolean, default: false },
  isEmailOrWebWidgetInbox: { type: Boolean, default: false },
  isTwilioSmsInbox: { type: Boolean, default: false },
+  isTwilioWhatsAppInbox: { type: Boolean, default: false },
  messageTemplates: { type: Array, default: () => [] },
  channelType: { type: String, default: '' },
  isLoading: { type: Boolean, default: false },
@@ -32,6 +34,7 @@ const emit = defineEmits([
  'discard',
  'sendMessage',
  'sendWhatsappMessage',
+  'sendTwilioMessage',
  'insertEmoji',
  'addSignature',
  'removeSignature',
@@ -63,6 +66,20 @@ const sendWithSignature = computed(() => {
  return fetchSignatureFlagFromUISettings(props.channelType);
 });

+const showTwilioContentTemplates = computed(() => {
+  return props.isTwilioWhatsAppInbox && props.inboxId;
+});
+
+const shouldShowEmojiButton = computed(() => {
+  return (
+    !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox && !props.hasNoInbox
+  );
+});
+
+const isRegularMessageMode = computed(() => {
+  return !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox;
+});
+
 const setSignature = () => {
  if (signatureToApply.value) {
    if (sendWithSignature.value) {
@@ -125,7 +142,7 @@ const keyboardEvents = {
    action: () => {
      if (
        isEditorHotKeyEnabled('enter') &&
-        !props.isWhatsappInbox &&
+        isRegularMessageMode.value &&
        !props.isDropdownActive
      ) {
        emit('sendMessage');
@@ -136,7 +153,7 @@ const keyboardEvents = {
    action: () => {
      if (
        isEditorHotKeyEnabled('cmd_enter') &&
-        !props.isWhatsappInbox &&
+        isRegularMessageMode.value &&
        !props.isDropdownActive
      ) {
        emit('sendMessage');
@@ -158,8 +175,13 @@ useKeyboardEvents(keyboardEvents);
        :message-templates="messageTemplates"
        @send-message="emit('sendWhatsappMessage', $event)"
      />
+      <ContentTemplateSelector
+        v-if="showTwilioContentTemplates"
+        :inbox-id="inboxId"
+        @send-message="emit('sendTwilioMessage', $event)"
+      />
      <div
-        v-if="!isWhatsappInbox && !hasNoInbox"
+        v-if="shouldShowEmojiButton"
        v-on-click-outside="() => (isEmojiPickerOpen = false)"
        class="relative"
      >
@@ -172,7 +194,7 @@ useKeyboardEvents(keyboardEvents);
        />
        <EmojiInput
          v-if="isEmojiPickerOpen"
-          class="ltr:left-0 rtl:right-0 top-full mt-1.5"
+          class="top-full mt-1.5 ltr:left-0 rtl:right-0"
          :on-click="onClickInsertEmoji"
        />
      </div>
@@ -199,7 +221,7 @@ useKeyboardEvents(keyboardEvents);
        />
      </FileUpload>
      <Button
-        v-if="hasSelectedInbox && !isWhatsappInbox"
+        v-if="hasSelectedInbox && isRegularMessageMode"
        icon="i-lucide-signature"
        color="slate"
        size="sm"
@@ -218,7 +240,7 @@ useKeyboardEvents(keyboardEvents);
        @click="emit('discard')"
      />
      <Button
-        v-if="!isWhatsappInbox"
+        v-if="isRegularMessageMode"
        :label="sendButtonLabel"
        size="sm"
        class="!text-xs font-medium"
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -74,6 +74,9 @@ const inboxTypes = computed(() => ({
  isTwilioSMS:
    props.targetInbox?.channelType === INBOX_TYPES.TWILIO &&
    props.targetInbox?.medium === 'sms',
+  isTwilioWhatsapp:
+    props.targetInbox?.channelType === INBOX_TYPES.TWILIO &&
+    props.targetInbox?.medium === 'whatsapp',
 }));

 const whatsappMessageTemplates = computed(() =>
@@ -261,6 +264,28 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
    isFromWhatsApp: true,
  });
 };
+
+const handleSendTwilioMessage = async ({ message, templateParams }) => {
+  const twilioMessagePayload = prepareWhatsAppMessagePayload({
+    targetInbox: props.targetInbox,
+    selectedContact: props.selectedContact,
+    message,
+    templateParams,
+    currentUser: props.currentUser,
+  });
+  await emit('createConversation', {
+    payload: twilioMessagePayload,
+    isFromWhatsApp: true,
+  });
+};
+
+const shouldShowMessageEditor = computed(() => {
+  return (
+    !inboxTypes.value.isWhatsapp &&
+    !showNoInboxAlert.value &&
+    !inboxTypes.value.isTwilioWhatsapp
+  );
+});
 </script>

 <template>
@@ -311,7 +336,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
    />

    <MessageEditor
-      v-if="!inboxTypes.isWhatsapp && !showNoInboxAlert"
+      v-if="shouldShowMessageEditor"
      v-model="state.message"
      :message-signature="messageSignature"
      :send-with-signature="sendWithSignature"
@@ -331,6 +356,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
      :is-whatsapp-inbox="inboxTypes.isWhatsapp"
      :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
      :is-twilio-sms-inbox="inboxTypes.isTwilioSMS"
+      :is-twilio-whats-app-inbox="inboxTypes.isTwilioWhatsapp"
      :message-templates="whatsappMessageTemplates"
      :channel-type="inboxChannelType"
      :is-loading="isCreating"
@@ -347,6 +373,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
      @discard="$emit('discard')"
      @send-message="handleSendMessage"
      @send-whatsapp-message="handleSendWhatsappMessage"
+      @send-twilio-message="handleSendTwilioMessage"
    />
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/NewConversation/components/ContentTemplateForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ContentTemplateForm.vue
@@ -0,0 +1,56 @@
+<script setup>
+import ContentTemplateParser from 'dashboard/components-next/content-templates/ContentTemplateParser.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  template: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'back']);
+
+const { t } = useI18n();
+
+const handleSendMessage = payload => {
+  emit('sendMessage', payload);
+};
+
+const handleBack = () => {
+  emit('back');
+};
+</script>
+
+<template>
+  <div
+    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+  >
+    <div class="w-full">
+      <ContentTemplateParser
+        :template="template"
+        @send-message="handleSendMessage"
+        @back="handleBack"
+      >
+        <template #actions="{ sendMessage, goBack, disabled }">
+          <div class="flex gap-3 justify-between items-end w-full h-14">
+            <Button
+              :label="t('CONTENT_TEMPLATES.FORM.BACK_BUTTON')"
+              color="slate"
+              variant="faded"
+              class="w-full font-medium"
+              @click="goBack"
+            />
+            <Button
+              :label="t('CONTENT_TEMPLATES.FORM.SEND_MESSAGE_BUTTON')"
+              class="w-full font-medium"
+              :disabled="disabled"
+              @click="sendMessage"
+            />
+          </div>
+        </template>
+      </ContentTemplateParser>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/NewConversation/components/ContentTemplateSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ContentTemplateSelector.vue
@@ -0,0 +1,124 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import ContentTemplateForm from './ContentTemplateForm.vue';
+
+const props = defineProps({
+  inboxId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['sendMessage']);
+
+const { t } = useI18n();
+const inbox = useMapGetter('inboxes/getInbox');
+
+const searchQuery = ref('');
+const selectedTemplate = ref(null);
+const showTemplatesMenu = ref(false);
+
+const contentTemplates = computed(() => {
+  const inboxData = inbox.value(props.inboxId);
+  return inboxData?.content_templates?.templates || [];
+});
+
+const filteredTemplates = computed(() => {
+  return contentTemplates.value.filter(
+    template =>
+      template.friendly_name
+        .toLowerCase()
+        .includes(searchQuery.value.toLowerCase()) &&
+      template.status === 'approved'
+  );
+});
+
+const handleTriggerClick = () => {
+  searchQuery.value = '';
+  showTemplatesMenu.value = !showTemplatesMenu.value;
+};
+
+const handleTemplateClick = template => {
+  selectedTemplate.value = template;
+  showTemplatesMenu.value = false;
+};
+
+const handleBack = () => {
+  selectedTemplate.value = null;
+  showTemplatesMenu.value = true;
+};
+
+const handleSendMessage = template => {
+  emit('sendMessage', template);
+  selectedTemplate.value = null;
+};
+</script>
+
+<template>
+  <div class="relative">
+    <Button
+      icon="i-ph-whatsapp-logo"
+      :label="t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.LABEL')"
+      color="slate"
+      size="sm"
+      :disabled="selectedTemplate"
+      class="!text-xs font-medium"
+      @click="handleTriggerClick"
+    />
+    <div
+      v-if="showTemplatesMenu"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    >
+      <div class="w-full">
+        <Input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="
+            t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.SEARCH_PLACEHOLDER')
+          "
+          custom-input-class="ltr:pl-10 rtl:pr-10"
+        >
+          <template #prefix>
+            <Icon
+              icon="i-lucide-search"
+              class="absolute top-2 size-3.5 ltr:left-3 rtl:right-3"
+            />
+          </template>
+        </Input>
+      </div>
+      <div
+        v-for="template in filteredTemplates"
+        :key="template.content_sid"
+        tabindex="0"
+        class="flex flex-col gap-2 p-2 w-full rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+        @click="handleTemplateClick(template)"
+      >
+        <div class="flex justify-between items-center">
+          <span class="text-sm text-n-slate-12">{{
+            template.friendly_name
+          }}</span>
+        </div>
+        <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
+          {{ template.body || t('CONTENT_TEMPLATES.PICKER.NO_CONTENT') }}
+        </p>
+      </div>
+      <template v-if="filteredTemplates.length === 0">
+        <p class="pt-2 w-full text-sm text-n-slate-11">
+          {{ t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.EMPTY_STATE') }}
+        </p>
+      </template>
+    </div>
+    <ContentTemplateForm
+      v-if="selectedTemplate"
+      :template="selectedTemplate"
+      @send-message="handleSendMessage"
+      @back="handleBack"
+    />
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
@@ -1,177 +0,0 @@
-<script setup>
-import { computed, ref, onMounted } from 'vue';
-import { useVuelidate } from '@vuelidate/core';
-import { requiredIf } from '@vuelidate/validators';
-import { useI18n } from 'vue-i18n';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  template: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'back']);
-
-const { t } = useI18n();
-
-const processedParams = ref({});
-
-const templateName = computed(() => {
-  return props.template?.name || '';
-});
-
-const templateString = computed(() => {
-  return props.template?.components?.find(
-    component => component.type === 'BODY'
-  ).text;
-});
-
-const processVariable = str => {
-  return str.replace(/{{|}}/g, '');
-};
-
-const processedString = computed(() => {
-  return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
-    const variableKey = processVariable(variable);
-    return processedParams.value[variableKey] || `{{${variable}}}`;
-  });
-});
-
-const processedStringWithVariableHighlight = computed(() => {
-  const variables = templateString.value.match(/{{([^}]+)}}/g) || [];
-
-  return variables.reduce((result, variable) => {
-    const variableKey = processVariable(variable);
-    const value = processedParams.value[variableKey] || variable;
-    return result.replace(
-      variable,
-      `<span class="break-all text-n-slate-12">${value}</span>`
-    );
-  }, templateString.value);
-});
-
-const rules = computed(() => {
-  const paramRules = {};
-  Object.keys(processedParams.value).forEach(key => {
-    paramRules[key] = { required: requiredIf(true) };
-  });
-  return {
-    processedParams: paramRules,
-  };
-});
-
-const v$ = useVuelidate(rules, { processedParams });
-
-const getFieldErrorType = key => {
-  if (!v$.value.processedParams[key]?.$error) return 'info';
-  return 'error';
-};
-
-const generateVariables = () => {
-  const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
-  if (!matchedVariables) return;
-
-  const finalVars = matchedVariables.map(i => processVariable(i));
-  processedParams.value = finalVars.reduce((acc, variable) => {
-    acc[variable] = '';
-    return acc;
-  }, {});
-};
-
-const sendMessage = async () => {
-  const isValid = await v$.value.$validate();
-  if (!isValid) return;
-
-  const payload = {
-    message: processedString.value,
-    templateParams: {
-      name: props.template.name,
-      category: props.template.category,
-      language: props.template.language,
-      namespace: props.template.namespace,
-      processed_params: processedParams.value,
-    },
-  };
-  emit('sendMessage', payload);
-};
-
-onMounted(() => {
-  generateVariables();
-});
-</script>
-
-<template>
-  <div
-    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
-  >
-    <span class="text-sm text-n-slate-12">
-      {{
-        t(
-          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.TEMPLATE_NAME',
-          { templateName: templateName }
-        )
-      }}
-    </span>
-    <p
-      class="mb-0 text-sm text-n-slate-11"
-      v-html="processedStringWithVariableHighlight"
-    />
-
-    <span
-      v-if="Object.keys(processedParams).length"
-      class="text-sm font-medium text-n-slate-12"
-    >
-      {{
-        t(
-          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.VARIABLES'
-        )
-      }}
-    </span>
-
-    <div
-      v-for="(variable, key) in processedParams"
-      :key="key"
-      class="flex items-center w-full gap-2"
-    >
-      <span
-        class="block h-8 text-sm min-w-6 text-start truncate text-n-slate-10 leading-8"
-        :title="key"
-      >
-        {{ key }}
-      </span>
-      <Input
-        v-model="processedParams[key]"
-        custom-input-class="!h-8 w-full !bg-transparent"
-        class="w-full"
-        :message-type="getFieldErrorType(key)"
-      />
-    </div>
-
-    <div class="flex items-end justify-between w-full gap-3 h-14">
-      <Button
-        :label="
-          t(
-            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
-          )
-        "
-        color="slate"
-        variant="faded"
-        class="w-full font-medium"
-        @click="emit('back')"
-      />
-      <Button
-        :label="
-          t(
-            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
-          )
-        "
-        class="w-full font-medium"
-        @click="sendMessage"
-      />
-    </div>
-  </div>
-</template>
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -25,7 +25,7 @@ export const generateLabelForContactableInboxesList = ({
    channelType === INBOX_TYPES.TWILIO ||
    channelType === INBOX_TYPES.WHATSAPP
  ) {
-    return `${name} (${phoneNumber})`;
+    return phoneNumber ? `${name} (${phoneNumber})` : name;
  }
  return name;
 };
@@ -53,6 +53,7 @@ const transformInbox = ({
  email,
  phoneNumber,
  channelType,
+  medium,
  ...rest,
 });

--- a/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue
@@ -4,6 +4,10 @@ import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import { usePolicy } from 'dashboard/composables/usePolicy';
+import {
+  isPdfDocument,
+  formatDocumentLink,
+} from 'shared/helpers/documentHelper';

 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
@@ -63,6 +67,11 @@ const menuItems = computed(() => {

 const createdAt = computed(() => dynamicTime(props.createdAt));

+const displayLink = computed(() => formatDocumentLink(props.externalLink));
+const linkIcon = computed(() =>
+  isPdfDocument(props.externalLink) ? 'i-ph-file-pdf' : 'i-ph-link-simple'
+);
+
 const handleAction = ({ action, value }) => {
  toggleDropdown(false);
  emit('action', { action, value, id: props.id });
@@ -71,14 +80,14 @@ const handleAction = ({ action, value }) => {

 <template>
  <CardLayout>
-    <div class="flex justify-between w-full gap-1">
+    <div class="flex gap-1 justify-between w-full">
      <span class="text-base text-n-slate-12 line-clamp-1">
        {{ name }}
      </span>
-      <div class="flex items-center gap-2">
+      <div class="flex gap-2 items-center">
        <div
          v-on-clickaway="() => toggleDropdown(false)"
-          class="relative flex items-center group"
+          class="flex relative items-center group"
        >
          <Button
            icon="i-lucide-ellipsis-vertical"
@@ -90,26 +99,26 @@ const handleAction = ({ action, value }) => {
          <DropdownMenu
            v-if="showActionsDropdown"
            :menu-items="menuItems"
-            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
+            class="top-full mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0"
            @action="handleAction($event)"
          />
        </div>
      </div>
    </div>
-    <div class="flex items-center justify-between w-full gap-4">
+    <div class="flex gap-4 justify-between items-center w-full">
      <span
-        class="text-sm shrink-0 truncate text-n-slate-11 flex items-center gap-1"
+        class="flex gap-1 items-center text-sm truncate shrink-0 text-n-slate-11"
      >
        <i class="i-woot-captain" />
        {{ assistant?.name || '' }}
      </span>
      <span
-        class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1"
+        class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11"
      >
-        <i class="i-ph-link-simple shrink-0" />
-        <span class="truncate">{{ externalLink }}</span>
+        <i :class="linkIcon" class="shrink-0" />
+        <span class="truncate">{{ displayLink }}</span>
      </span>
-      <div class="shrink-0 text-sm text-n-slate-11 line-clamp-1">
+      <div class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
        {{ createdAt }}
      </div>
    </div>
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';

 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import DocumentForm from './DocumentForm.vue';
@@ -12,7 +13,6 @@ const { t } = useI18n();
 const store = useStore();

 const dialogRef = ref(null);
-const documentForm = ref(null);

 const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';

@@ -23,7 +23,7 @@ const handleSubmit = async newDocument => {
    dialogRef.value.close();
  } catch (error) {
    const errorMessage =
-      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
+      parseAPIErrorResponse(error) || t(`${i18nKey}.ERROR_MESSAGE`);
    useAlert(errorMessage);
  }
 };
@@ -48,11 +48,7 @@ defineExpose({ dialogRef });
    :show-confirm-button="false"
    @close="handleClose"
  >
-    <DocumentForm
-      ref="documentForm"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-    />
+    <DocumentForm @submit="handleSubmit" @cancel="handleCancel" />
    <template #footer />
  </Dialog>
 </template>
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
@@ -1,9 +1,10 @@
 <script setup>
-import { reactive, computed } from 'vue';
+import { reactive, computed, ref, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, url } from '@vuelidate/validators';
+import { required, minLength, requiredIf, url } from '@vuelidate/validators';
 import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';

 import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -11,6 +12,8 @@ import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';

 const emit = defineEmits(['submit', 'cancel']);

+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
 const { t } = useI18n();

 const formState = {
@@ -20,14 +23,25 @@ const formState = {

 const initialState = {
  name: '',
+  url: '',
  assistantId: null,
+  documentType: 'url',
+  pdfFile: null,
 };

 const state = reactive({ ...initialState });
+const fileInputRef = ref(null);

 const validationRules = {
-  url: { required, url, minLength: minLength(1) },
+  url: {
+    required: requiredIf(() => state.documentType === 'url'),
+    url: requiredIf(() => state.documentType === 'url' && url),
+    minLength: requiredIf(() => state.documentType === 'url' && minLength(1)),
+  },
  assistantId: { required },
+  pdfFile: {
+    required: requiredIf(() => state.documentType === 'pdf'),
+  },
 };

 const assistantList = computed(() =>
@@ -37,10 +51,17 @@ const assistantList = computed(() =>
  }))
 );

+const documentTypeOptions = [
+  { value: 'url', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.URL') },
+  { value: 'pdf', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.PDF') },
+];
+
 const v$ = useVuelidate(validationRules, state);

 const isLoading = computed(() => formState.uiFlags.value.creatingItem);

+const hasPdfFileError = computed(() => v$.value.pdfFile.$error);
+
 const getErrorMessage = (field, errorKey) => {
  return v$.value[field].$error
    ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
@@ -50,14 +71,57 @@ const getErrorMessage = (field, errorKey) => {
 const formErrors = computed(() => ({
  url: getErrorMessage('url', 'URL'),
  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
+  pdfFile: getErrorMessage('pdfFile', 'PDF_FILE'),
 }));

 const handleCancel = () => emit('cancel');

-const prepareDocumentDetails = () => ({
-  external_link: state.url,
-  assistant_id: state.assistantId,
-});
+const handleFileChange = event => {
+  const file = event.target.files[0];
+  if (file) {
+    if (file.type !== 'application/pdf') {
+      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.INVALID_TYPE'));
+      event.target.value = '';
+      return;
+    }
+    if (file.size > MAX_FILE_SIZE) {
+      // 10MB
+      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.TOO_LARGE'));
+      event.target.value = '';
+      return;
+    }
+    state.pdfFile = file;
+    state.name = file.name.replace(/\.pdf$/i, '');
+  }
+};
+
+const openFileDialog = () => {
+  // Use nextTick to ensure the ref is available
+  nextTick(() => {
+    if (fileInputRef.value) {
+      fileInputRef.value.click();
+    }
+  });
+};
+
+const prepareDocumentDetails = () => {
+  const formData = new FormData();
+  formData.append('document[assistant_id]', state.assistantId);
+
+  if (state.documentType === 'url') {
+    formData.append('document[external_link]', state.url);
+    formData.append('document[name]', state.name || state.url);
+  } else {
+    formData.append('document[pdf_file]', state.pdfFile);
+    formData.append(
+      'document[name]',
+      state.name || state.pdfFile.name.replace('.pdf', '')
+    );
+    // No need to send external_link for PDF - it's auto-generated in the backend
+  }
+
+  return formData;
+};

 const handleSubmit = async () => {
  const isFormValid = await v$.value.$validate();
@@ -71,13 +135,89 @@ const handleSubmit = async () => {

 <template>
  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <div class="flex flex-col gap-1">
+      <label
+        for="documentType"
+        class="mb-0.5 text-sm font-medium text-n-slate-12"
+      >
+        {{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.LABEL') }}
+      </label>
+      <ComboBox
+        id="documentType"
+        v-model="state.documentType"
+        :options="documentTypeOptions"
+        class="[&>div>button]:bg-n-alpha-black2"
+      />
+    </div>
+
    <Input
+      v-if="state.documentType === 'url'"
      v-model="state.url"
      :label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
      :message="formErrors.url"
      :message-type="formErrors.url ? 'error' : 'info'"
    />
+
+    <div v-if="state.documentType === 'pdf'" class="flex flex-col gap-2">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.LABEL') }}
+      </label>
+      <div class="relative">
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept=".pdf"
+          class="hidden"
+          @change="handleFileChange"
+        />
+        <Button
+          type="button"
+          :color="hasPdfFileError ? 'ruby' : 'slate'"
+          :variant="hasPdfFileError ? 'outline' : 'solid'"
+          class="!w-full !h-auto !justify-between !py-4"
+          @click="openFileDialog"
+        >
+          <template #default>
+            <div class="flex gap-2 items-center">
+              <div
+                class="flex justify-center items-center w-10 h-10 rounded-lg bg-n-slate-3"
+              >
+                <i class="text-xl i-ph-file-pdf text-n-slate-11" />
+              </div>
+              <div class="flex flex-col flex-1 gap-1 items-start">
+                <p class="m-0 text-sm font-medium text-n-slate-12">
+                  {{
+                    state.pdfFile
+                      ? state.pdfFile.name
+                      : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.CHOOSE_FILE')
+                  }}
+                </p>
+                <p class="m-0 text-xs text-n-slate-11">
+                  {{
+                    state.pdfFile
+                      ? `${(state.pdfFile.size / 1024 / 1024).toFixed(2)} MB`
+                      : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.HELP_TEXT')
+                  }}
+                </p>
+              </div>
+            </div>
+
+            <i class="i-lucide-upload text-n-slate-11" />
+          </template>
+        </Button>
+      </div>
+      <p v-if="formErrors.pdfFile" class="text-xs text-n-ruby-9">
+        {{ formErrors.pdfFile }}
+      </p>
+    </div>
+
+    <Input
+      v-model="state.name"
+      :label="t('CAPTAIN.DOCUMENTS.FORM.NAME.LABEL')"
+      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.NAME.PLACEHOLDER')"
+    />
+
    <div class="flex flex-col gap-1">
      <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
        {{ t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.LABEL') }}
@@ -88,12 +228,12 @@ const handleSubmit = async () => {
        :options="assistantList"
        :has-error="!!formErrors.assistantId"
        :placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.PLACEHOLDER')"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+        class="[&>div>button]:bg-n-alpha-black2"
        :message="formErrors.assistantId"
      />
    </div>

-    <div class="flex items-center justify-between w-full gap-3">
+    <div class="flex gap-3 justify-between items-center w-full">
      <Button
        type="button"
        variant="faded"
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -96,8 +96,12 @@ watch(
        :label="selectedLabel"
        trailing-icon
        :disabled="disabled"
-        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:outline-n-weak focus:outline-n-brand"
-        :class="{ focused: open }"
+        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 focus:outline-n-brand"
+        :class="{
+          focused: open,
+          '[&:not(.focused)]:dark:outline-n-weak [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6':
+            !hasError,
+        }"
        :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
        @click="toggleDropdown"
      />
--- a/app/javascript/dashboard/components-next/content-templates/ContentTemplateParser.vue
+++ b/app/javascript/dashboard/components-next/content-templates/ContentTemplateParser.vue
@@ -0,0 +1,278 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
+import { extractFilenameFromUrl } from 'dashboard/helper/URLHelper';
+import { TWILIO_CONTENT_TEMPLATE_TYPES } from 'shared/constants/messages';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    default: () => ({}),
+    validator: value => {
+      if (!value || typeof value !== 'object') return false;
+      if (!value.friendly_name) return false;
+      return true;
+    },
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'resetTemplate', 'back']);
+
+const VARIABLE_PATTERN = /{{([^}]+)}}/g;
+
+const { t } = useI18n();
+
+const processedParams = ref({});
+
+const languageLabel = computed(() => {
+  return `${t('CONTENT_TEMPLATES.PARSER.LANGUAGE')}: ${props.template.language || 'en'}`;
+});
+
+const categoryLabel = computed(() => {
+  return `${t('CONTENT_TEMPLATES.PARSER.CATEGORY')}: ${props.template.category || 'utility'}`;
+});
+
+const templateBody = computed(() => {
+  return props.template.body || '';
+});
+
+const hasMediaTemplate = computed(() => {
+  return props.template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.MEDIA;
+});
+
+const hasVariables = computed(() => {
+  return templateBody.value?.match(VARIABLE_PATTERN) !== null;
+});
+
+const mediaVariableKey = computed(() => {
+  if (!hasMediaTemplate.value) return null;
+  const mediaUrl = props.template?.types?.['twilio/media']?.media?.[0];
+  if (!mediaUrl) return null;
+  return mediaUrl.match(/{{(\d+)}}/)?.[1] ?? null;
+});
+
+const hasMediaVariable = computed(() => {
+  return hasMediaTemplate.value && mediaVariableKey.value !== null;
+});
+
+const templateMediaUrl = computed(() => {
+  if (!hasMediaTemplate.value) return '';
+
+  return props.template?.types?.['twilio/media']?.media?.[0] || '';
+});
+
+const variablePattern = computed(() => {
+  if (!hasVariables.value) return [];
+  const matches = templateBody.value.match(VARIABLE_PATTERN) || [];
+  return matches.map(match => match.replace(/[{}]/g, ''));
+});
+
+const renderedTemplate = computed(() => {
+  let rendered = templateBody.value;
+  if (processedParams.value && Object.keys(processedParams.value).length > 0) {
+    // Replace variables in the format {{1}}, {{2}}, etc.
+    rendered = rendered.replace(VARIABLE_PATTERN, (match, variable) => {
+      const cleanVariable = variable.trim();
+      return processedParams.value[cleanVariable] || match;
+    });
+  }
+  return rendered;
+});
+
+const isFormInvalid = computed(() => {
+  if (!hasVariables.value && !hasMediaVariable.value) return false;
+
+  if (hasVariables.value) {
+    const hasEmptyVariable = variablePattern.value.some(
+      variable => !processedParams.value[variable]
+    );
+    if (hasEmptyVariable) return true;
+  }
+
+  if (
+    hasMediaVariable.value &&
+    mediaVariableKey.value &&
+    !processedParams.value[mediaVariableKey.value]
+  ) {
+    return true;
+  }
+
+  return false;
+});
+
+const v$ = useVuelidate(
+  {
+    processedParams: {
+      requiredIfKeysPresent: requiredIf(
+        () => hasVariables.value || hasMediaVariable.value
+      ),
+    },
+  },
+  { processedParams }
+);
+
+const initializeTemplateParameters = () => {
+  processedParams.value = {};
+
+  if (hasVariables.value) {
+    variablePattern.value.forEach(variable => {
+      processedParams.value[variable] = '';
+    });
+  }
+
+  if (hasMediaVariable.value && mediaVariableKey.value) {
+    processedParams.value[mediaVariableKey.value] = '';
+  }
+};
+
+const sendMessage = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid || isFormInvalid.value) return;
+
+  const { friendly_name, language } = props.template;
+
+  // Process parameters and extract filename from media URL if needed
+  const processedParameters = { ...processedParams.value };
+
+  // For media templates, extract filename from full URL
+  if (
+    hasMediaVariable.value &&
+    mediaVariableKey.value &&
+    processedParameters[mediaVariableKey.value]
+  ) {
+    processedParameters[mediaVariableKey.value] = extractFilenameFromUrl(
+      processedParameters[mediaVariableKey.value]
+    );
+  }
+
+  const payload = {
+    message: renderedTemplate.value,
+    templateParams: {
+      name: friendly_name,
+      language,
+      processed_params: processedParameters,
+    },
+  };
+  emit('sendMessage', payload);
+};
+
+const resetTemplate = () => {
+  emit('resetTemplate');
+};
+
+const goBack = () => {
+  emit('back');
+};
+
+onMounted(initializeTemplateParameters);
+
+watch(
+  () => props.template,
+  () => {
+    initializeTemplateParameters();
+    v$.value.$reset();
+  },
+  { deep: true }
+);
+
+defineExpose({
+  processedParams,
+  hasVariables,
+  hasMediaTemplate,
+  renderedTemplate,
+  v$,
+  sendMessage,
+  resetTemplate,
+  goBack,
+});
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-col gap-4 p-4 mb-4 rounded-lg bg-n-alpha-black2">
+      <div class="flex justify-between items-center">
+        <h3 class="text-sm font-medium text-n-slate-12">
+          {{ template.friendly_name }}
+        </h3>
+        <span class="text-xs text-n-slate-11">
+          {{ languageLabel }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="rounded-md">
+          <div class="text-sm whitespace-pre-wrap text-n-slate-12">
+            {{ renderedTemplate }}
+          </div>
+        </div>
+      </div>
+
+      <div class="text-xs text-n-slate-11">
+        {{ categoryLabel }}
+      </div>
+    </div>
+
+    <div v-if="hasVariables || hasMediaVariable">
+      <!-- Media URL for media templates -->
+      <div v-if="hasMediaVariable" class="mb-4">
+        <p class="mb-2.5 text-sm font-semibold">
+          {{ $t('CONTENT_TEMPLATES.PARSER.MEDIA_URL_LABEL') }}
+        </p>
+        <div class="flex items-center mb-2.5">
+          <Input
+            v-model="processedParams[mediaVariableKey]"
+            type="url"
+            class="flex-1"
+            :placeholder="
+              templateMediaUrl ||
+              t('CONTENT_TEMPLATES.PARSER.MEDIA_URL_PLACEHOLDER')
+            "
+          />
+        </div>
+      </div>
+
+      <!-- Body Variables Section -->
+      <div v-if="hasVariables">
+        <p class="mb-2.5 text-sm font-semibold">
+          {{ $t('CONTENT_TEMPLATES.PARSER.VARIABLES_LABEL') }}
+        </p>
+        <div
+          v-for="variable in variablePattern"
+          :key="`variable-${variable}`"
+          class="flex items-center mb-2.5"
+        >
+          <Input
+            v-model="processedParams[variable]"
+            type="text"
+            class="flex-1"
+            :placeholder="
+              t('CONTENT_TEMPLATES.PARSER.VARIABLE_PLACEHOLDER', {
+                variable: variable,
+              })
+            "
+          />
+        </div>
+      </div>
+
+      <p
+        v-if="v$.$dirty && (v$.$invalid || isFormInvalid)"
+        class="p-2.5 text-center rounded-md bg-n-ruby-9/20 text-n-ruby-9"
+      >
+        {{ $t('CONTENT_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
+      </p>
+    </div>
+
+    <slot
+      name="actions"
+      :send-message="sendMessage"
+      :reset-template="resetTemplate"
+      :go-back="goBack"
+      :is-valid="!v$.$invalid && !isFormInvalid"
+      :disabled="isFormInvalid"
+    />
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
@@ -1,25 +1,49 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, nextTick, onMounted } from 'vue';

 const emit = defineEmits(['send']);
 const message = ref('');
+const textareaRef = ref(null);
+
+const adjustHeight = () => {
+  if (!textareaRef.value) return;
+
+  // Reset height to auto to get the correct scrollHeight
+  textareaRef.value.style.height = 'auto';
+  // Set the height to the scrollHeight
+  textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
+};

 const sendMessage = () => {
  if (message.value.trim()) {
    emit('send', message.value);
    message.value = '';
+    // Reset textarea height after sending
+    nextTick(() => {
+      adjustHeight();
+    });
  }
 };
+
+const handleInput = () => {
+  nextTick(adjustHeight);
+};
+
+onMounted(() => {
+  nextTick(adjustHeight);
+});
 </script>

 <template>
  <form class="relative" @submit.prevent="sendMessage">
-    <input
+    <textarea
+      ref="textareaRef"
      v-model="message"
-      type="text"
      :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
-      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-n-slate-11 text-sm border border-n-weak rounded-lg focus:outline-none focus:ring-1 focus:ring-n-blue-11 focus:border-n-blue-11"
-      @keyup.enter="sendMessage"
+      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-sm border border-n-weak rounded-lg focus:outline-0 focus:outline-none focus:ring-2 focus:ring-n-blue-11 focus:border-n-blue-11 resize-none overflow-hidden max-h-[200px] mb-0 text-n-slate-12"
+      rows="1"
+      @input="handleInput"
+      @keydown.enter.exact.prevent="sendMessage"
    />
    <button
      class="absolute ltr:right-1 rtl:left-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
@@ -15,7 +15,7 @@ defineProps({
    >
      {{ title }}
    </div>
-    <ul class="gap-2 grid reset-base list-none px-2">
+    <ul class="gap-2 grid reset-base list-none px-2 max-h-96 overflow-y-auto">
      <slot />
    </ul>
  </div>
--- a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
+++ b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
@@ -34,14 +34,17 @@ const formatOperatorLabel = operator => {
 };

 const formatFilterValue = value => {
+  // Case 1: null, undefined, empty string
  if (!value) return '';
+
+  // Case 2: array → map each item, use name if present, else the item itself
  if (Array.isArray(value)) {
-    return value.join(', ');
+    return value.map(item => item?.name ?? item).join(', ');
  }
-  if (typeof value === 'object' && value.name) {
-    return value.name;
-  }
-  return value;
+
+  // Case 3: object with a "name" property → return name
+  // Case 4: primitive (string, number, etc.) → return as is
+  return value?.name ?? value;
 };
 </script>

@@ -66,6 +69,7 @@ const formatFilterValue = value => {
          </span>
          <span
            v-if="filter.values"
+            :title="formatFilterValue(filter.values)"
            class="lowercase truncate text-n-slate-12"
            :class="{
              'first-letter:capitalize': shouldCapitalizeFirstLetter(
--- a/app/javascript/dashboard/components-next/filter/ConditionRow.vue
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
@@ -103,6 +103,12 @@ const validationError = computed(() => {
  );
 });

+const inputFieldType = computed(() => {
+  if (inputType.value === 'date') return 'date';
+  if (inputType.value === 'number') return 'number';
+  return 'text';
+});
+
 const resetModelOnAttributeKeyChange = newAttributeKey => {
  /**
   * Resets the filter values and operator when the attribute key changes. This ensures that
@@ -182,7 +188,7 @@ defineExpose({ validate });
        <Input
          v-else
          v-model="values"
-          :type="inputType === 'date' ? 'date' : 'text'"
+          :type="inputFieldType"
          class="[&>input]:h-8 [&>input]:py-1.5 [&>input]:outline-offset-0"
          :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
        />
--- a/app/javascript/dashboard/components-next/filter/contactProvider.js
+++ b/app/javascript/dashboard/components-next/filter/contactProvider.js
@@ -50,6 +50,7 @@ export function useContactFilterContext() {
  const { t } = useI18n();

  const contactAttributes = useMapGetter('attributes/getContactAttributes');
+  const labels = useMapGetter('labels/getLabels');

  const {
    equalityOperators,
@@ -184,6 +185,20 @@ export function useContactFilterContext() {
      filterOperators: equalityOperators.value,
      attributeModel: 'standard',
    },
+    {
+      attributeKey: CONTACT_ATTRIBUTES.LABELS,
+      value: CONTACT_ATTRIBUTES.LABELS,
+      attributeName: t('CONTACTS_FILTER.ATTRIBUTES.LABELS'),
+      label: t('CONTACTS_FILTER.ATTRIBUTES.LABELS'),
+      inputType: 'multiSelect',
+      options: labels.value?.map(label => ({
+        id: label.title,
+        name: label.title,
+      })),
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
    ...customFilterTypes.value,
  ]);

--- a/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
+++ b/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
@@ -28,6 +28,7 @@ export const CONTACT_ATTRIBUTES = {
  LAST_ACTIVITY_AT: 'last_activity_at',
  REFERER: 'referer',
  BLOCKED: 'blocked',
+  LABELS: 'labels',
 };

 /**
--- a/app/javascript/dashboard/components-next/filter/provider.js
+++ b/app/javascript/dashboard/components-next/filter/provider.js
@@ -164,8 +164,8 @@ export function useConversationFilterContext() {
      value: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
      attributeName: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
      label: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
-      inputType: 'plainText',
-      datatype: 'number',
+      inputType: 'number',
+      dataType: 'number',
      filterOperators: containmentOperators.value,
      attributeModel: 'standard',
    },
@@ -179,7 +179,7 @@ export function useConversationFilterContext() {
        id: campaign.id,
        name: campaign.title,
      })),
-      datatype: 'number',
+      dataType: 'number',
      filterOperators: presenceOperators.value,
      attributeModel: 'standard',
    },
--- a/app/javascript/dashboard/components-next/icon/provider.js
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -2,23 +2,23 @@ import { computed } from 'vue';

 export function useChannelIcon(inbox) {
  const channelTypeIconMap = {
-    'Channel::Api': 'i-ri-cloudy-fill',
-    'Channel::Email': 'i-ri-mail-fill',
-    'Channel::FacebookPage': 'i-ri-messenger-fill',
-    'Channel::Line': 'i-ri-line-fill',
-    'Channel::Sms': 'i-ri-chat-1-fill',
-    'Channel::Telegram': 'i-ri-telegram-fill',
-    'Channel::TwilioSms': 'i-ri-chat-1-fill',
+    'Channel::Api': 'i-woot-api',
+    'Channel::Email': 'i-woot-mail',
+    'Channel::FacebookPage': 'i-woot-messenger',
+    'Channel::Line': 'i-woot-line',
+    'Channel::Sms': 'i-woot-sms',
+    'Channel::Telegram': 'i-woot-telegram',
+    'Channel::TwilioSms': 'i-woot-sms',
    'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
-    'Channel::WebWidget': 'i-ri-global-fill',
-    'Channel::Whatsapp': 'i-ri-whatsapp-fill',
-    'Channel::Instagram': 'i-ri-instagram-fill',
+    'Channel::WebWidget': 'i-woot-website',
+    'Channel::Whatsapp': 'i-woot-whatsapp',
+    'Channel::Instagram': 'i-woot-instagram',
    'Channel::Voice': 'i-ri-phone-fill',
  };

  const providerIconMap = {
-    microsoft: 'i-ri-microsoft-fill',
-    google: 'i-ri-google-fill',
+    microsoft: 'i-woot-outlook',
+    google: 'i-woot-gmail',
  };

  const channelIcon = computed(() => {
@@ -34,7 +34,7 @@ export function useChannelIcon(inbox) {

    // Special case for Twilio whatsapp
    if (type === 'Channel::TwilioSms' && inboxDetails.medium === 'whatsapp') {
-      icon = 'i-ri-whatsapp-fill';
+      icon = 'i-woot-whatsapp';
    }

    return icon ?? 'i-ri-global-fill';
--- a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
+++ b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
@@ -4,19 +4,19 @@ describe('useChannelIcon', () => {
  it('returns correct icon for API channel', () => {
    const inbox = { channel_type: 'Channel::Api' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-cloudy-fill');
+    expect(icon).toBe('i-woot-api');
  });

  it('returns correct icon for Facebook channel', () => {
    const inbox = { channel_type: 'Channel::FacebookPage' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-messenger-fill');
+    expect(icon).toBe('i-woot-messenger');
  });

  it('returns correct icon for WhatsApp channel', () => {
    const inbox = { channel_type: 'Channel::Whatsapp' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-whatsapp-fill');
+    expect(icon).toBe('i-woot-whatsapp');
  });

  it('returns correct icon for Voice channel', () => {
@@ -28,19 +28,19 @@ describe('useChannelIcon', () => {
  it('returns correct icon for Line channel', () => {
    const inbox = { channel_type: 'Channel::Line' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-line-fill');
+    expect(icon).toBe('i-woot-line');
  });

  it('returns correct icon for SMS channel', () => {
    const inbox = { channel_type: 'Channel::Sms' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-chat-1-fill');
+    expect(icon).toBe('i-woot-sms');
  });

  it('returns correct icon for Telegram channel', () => {
    const inbox = { channel_type: 'Channel::Telegram' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-telegram-fill');
+    expect(icon).toBe('i-woot-telegram');
  });

  it('returns correct icon for Twitter channel', () => {
@@ -52,20 +52,20 @@ describe('useChannelIcon', () => {
  it('returns correct icon for WebWidget channel', () => {
    const inbox = { channel_type: 'Channel::WebWidget' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-global-fill');
+    expect(icon).toBe('i-woot-website');
  });

  it('returns correct icon for Instagram channel', () => {
    const inbox = { channel_type: 'Channel::Instagram' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-instagram-fill');
+    expect(icon).toBe('i-woot-instagram');
  });

  describe('TwilioSms channel', () => {
    it('returns chat icon for regular Twilio SMS channel', () => {
      const inbox = { channel_type: 'Channel::TwilioSms' };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
+      expect(icon).toBe('i-woot-sms');
    });

    it('returns WhatsApp icon for Twilio SMS with WhatsApp medium', () => {
@@ -74,7 +74,7 @@ describe('useChannelIcon', () => {
        medium: 'whatsapp',
      };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-whatsapp-fill');
+      expect(icon).toBe('i-woot-whatsapp');
    });

    it('returns chat icon for Twilio SMS with non-WhatsApp medium', () => {
@@ -83,7 +83,7 @@ describe('useChannelIcon', () => {
        medium: 'sms',
      };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
+      expect(icon).toBe('i-woot-sms');
    });

    it('returns chat icon for Twilio SMS with undefined medium', () => {
@@ -92,7 +92,7 @@ describe('useChannelIcon', () => {
        medium: undefined,
      };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
+      expect(icon).toBe('i-woot-sms');
    });
  });

@@ -100,7 +100,7 @@ describe('useChannelIcon', () => {
    it('returns mail icon for generic email channel', () => {
      const inbox = { channel_type: 'Channel::Email' };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-mail-fill');
+      expect(icon).toBe('i-woot-mail');
    });

    it('returns Microsoft icon for Microsoft email provider', () => {
@@ -109,7 +109,7 @@ describe('useChannelIcon', () => {
        provider: 'microsoft',
      };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-microsoft-fill');
+      expect(icon).toBe('i-woot-outlook');
    });

    it('returns Google icon for Google email provider', () => {
@@ -118,7 +118,7 @@ describe('useChannelIcon', () => {
        provider: 'google',
      };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-google-fill');
+      expect(icon).toBe('i-woot-gmail');
    });
  });

--- a/app/javascript/dashboard/components-next/input/DurationInput.vue
+++ b/app/javascript/dashboard/components-next/input/DurationInput.vue
@@ -78,6 +78,8 @@ watch(unit, () => {
    <option :value="DURATION_UNITS.HOURS">
      {{ t('DURATION_INPUT.HOURS') }}
    </option>
-    <option :value="DURATION_UNITS.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
+    <option :value="DURATION_UNITS.DAYS">
+      {{ t('DURATION_INPUT.DAYS') }}
+    </option>
  </select>
 </template>
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -7,6 +7,11 @@ const props = defineProps({
  placeholder: { type: String, default: '' },
  label: { type: String, default: '' },
  id: { type: String, default: '' },
+  size: {
+    type: String,
+    default: 'md',
+    validator: value => ['sm', 'md'].includes(value),
+  },
  message: { type: String, default: '' },
  disabled: { type: Boolean, default: false },
  messageType: {
@@ -15,6 +20,7 @@ const props = defineProps({
    validator: value => ['info', 'error', 'success'].includes(value),
  },
  min: { type: String, default: '' },
+  max: { type: String, default: '' },
  autofocus: { type: Boolean, default: false },
 });

@@ -54,7 +60,12 @@ const inputOutlineClass = computed(() => {
 });

 const handleInput = event => {
-  emit('update:modelValue', event.target.value);
+  let value = event.target.value;
+  // Convert to number if type is number and value is not empty
+  if (props.type === 'number' && value !== '') {
+    value = Number(value);
+  }
+  emit('update:modelValue', value);
  emit('input', event);
 };

@@ -63,6 +74,17 @@ const handleFocus = event => {
  isFocused.value = true;
 };

+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-8 !px-3 !py-2';
+    case 'md':
+      return 'h-10 !px-3 !py-2.5';
+    default:
+      return 'h-10 !px-3 !py-2.5';
+  }
+});
+
 const handleBlur = event => {
  emit('blur', event);
  isFocused.value = false;
@@ -94,11 +116,13 @@ onMounted(() => {
    <slot name="prefix" />
    <input
      :id="uniqueId"
+      v-bind="$attrs"
      ref="inputRef"
      :value="modelValue"
      :class="[
        customInputClass,
        inputOutlineClass,
+        sizeClass,
        {
          error: messageType === 'error',
          focus: isFocused,
@@ -108,7 +132,12 @@ onMounted(() => {
      :placeholder="placeholder"
      :disabled="disabled"
      :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
-      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
+      :max="
+        ['date', 'datetime-local', 'time', 'number'].includes(type)
+          ? max
+          : undefined
+      "
+      class="block w-full reset-base text-sm !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -36,6 +36,7 @@ import DyteBubble from './bubbles/Dyte.vue';
 import LocationBubble from './bubbles/Location.vue';
 import CSATBubble from './bubbles/CSAT.vue';
 import FormBubble from './bubbles/Form.vue';
+import VoiceCallBubble from './bubbles/VoiceCall.vue';

 import MessageError from './MessageError.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
@@ -130,6 +131,8 @@ const props = defineProps({
  sourceId: { type: String, default: '' }, // eslint-disable-line vue/no-unused-properties
 });

+const emit = defineEmits(['retry']);
+
 const contextMenuPosition = ref({});
 const showBackgroundHighlight = ref(false);
 const showContextMenu = ref(false);
@@ -280,6 +283,10 @@ const componentToRender = computed(() => {
    return FormBubble;
  }

+  if (props.contentType === CONTENT_TYPES.VOICE_CALL) {
+    return VoiceCallBubble;
+  }
+
  if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
    return EmailBubble;
  }
@@ -519,6 +526,7 @@ provideMessageContext({
        class="[grid-area:meta]"
        :class="flexOrientationClass"
        :error="contentAttributes.externalError"
+        @retry="emit('retry')"
      />
    </div>
    <div v-if="shouldShowContextMenu" class="context-menu-wrap">
--- a/app/javascript/dashboard/components-next/message/MessageError.vue
+++ b/app/javascript/dashboard/components-next/message/MessageError.vue
@@ -1,16 +1,22 @@
 <script setup>
+import { computed } from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageContext } from './provider.js';
-import { ORIENTATION } from './constants';
+import { hasOneDayPassed } from 'shared/helpers/timeHelper';
+import { ORIENTATION, MESSAGE_STATUS } from './constants';

 defineProps({
  error: { type: String, required: true },
 });

-const { orientation } = useMessageContext();
+const emit = defineEmits(['retry']);
+
+const { orientation, status, createdAt } = useMessageContext();

 const { t } = useI18n();
+
+const canRetry = computed(() => !hasOneDayPassed(createdAt.value));
 </script>

 <template>
@@ -35,5 +41,14 @@ const { t } = useI18n();
        {{ error }}
      </div>
    </div>
+    <button
+      v-if="canRetry"
+      type="button"
+      :disabled="status !== MESSAGE_STATUS.FAILED"
+      class="bg-n-alpha-2 rounded-md size-5 grid place-content-center cursor-pointer"
+      @click="emit('retry')"
+    >
+      <Icon icon="i-lucide-refresh-ccw" class="text-n-ruby-11 size-[14px]" />
+    </button>
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/message/MessageList.vue
+++ b/app/javascript/dashboard/components-next/message/MessageList.vue
@@ -37,6 +37,8 @@ const props = defineProps({
  },
 });

+const emit = defineEmits(['retry']);
+
 const allMessages = computed(() => {
  return useCamelCase(props.messages, { deep: true });
 });
@@ -113,6 +115,7 @@ const getInReplyToMessage = parentMessage => {
        :inbox-supports-reply-to="inboxSupportsReplyTo"
        :current-user-id="currentUserId"
        data-clarity-mask="True"
+        @retry="emit('retry', message)"
      />
    </template>
    <slot name="after" />
--- a/app/javascript/dashboard/components-next/message/bubbles/Base.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
@@ -10,6 +10,10 @@ import { useI18n } from 'vue-i18n';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';

+const props = defineProps({
+  hideMeta: { type: Boolean, default: false },
+});
+
 const { variant, orientation, inReplyTo, shouldGroupWithNext } =
  useMessageContext();
 const { t } = useI18n();
@@ -64,6 +68,13 @@ const scrollToMessage = () => {
  });
 };

+const shouldShowMeta = computed(
+  () =>
+    !props.hideMeta &&
+    !shouldGroupWithNext.value &&
+    variant.value !== MESSAGE_VARIANTS.ACTIVITY
+);
+
 const replyToPreview = computed(() => {
  if (!inReplyTo) return '';

@@ -93,16 +104,16 @@ const replyToPreview = computed(() => {
  >
    <div
      v-if="inReplyTo"
-      class="bg-n-alpha-black1 rounded-lg p-2 -mx-1 mb-2 cursor-pointer"
+      class="p-2 -mx-1 mb-2 rounded-lg cursor-pointer bg-n-alpha-black1"
      @click="scrollToMessage"
    >
-      <span class="line-clamp-2 break-all">
+      <span class="break-all line-clamp-2">
        {{ replyToPreview }}
      </span>
    </div>
    <slot />
    <MessageMeta
-      v-if="!shouldGroupWithNext && variant !== MESSAGE_VARIANTS.ACTIVITY"
+      v-if="shouldShowMeta"
      :class="[
        flexOrientationClass,
        variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '',
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useTemplateRef, ref, onMounted } from 'vue';
 import { Letter } from 'vue-letter';
+import { sanitizeTextForRender } from '@chatwoot/utils';
 import { allowedCssProperties } from 'lettersanitizer';

 import Icon from 'next/icon/Icon.vue';
@@ -37,12 +38,12 @@ const { hasTranslations, translationContent } =
 const originalEmailText = computed(() => {
  const text =
    contentAttributes?.value?.email?.textContent?.full ?? content.value;
-  return text?.replace(/\n/g, '<br>');
+  return sanitizeTextForRender(text);
 });

 const originalEmailHtml = computed(
  () =>
-    contentAttributes?.value?.email?.htmlContent?.full ??
+    contentAttributes?.value?.email?.htmlContent?.full ||
    originalEmailText.value
 );

--- a/app/javascript/dashboard/components-next/message/bubbles/VoiceCall.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/VoiceCall.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import { useMessageContext } from '../provider.js';
+import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
+
+const { contentAttributes } = useMessageContext();
+
+const data = computed(() => contentAttributes.value?.data);
+
+const status = computed(() => data.value?.status);
+const direction = computed(() => data.value?.call_direction);
+
+const { labelKey, subtextKey, bubbleIconBg, bubbleIconName } =
+  useVoiceCallStatus(status, direction);
+
+const containerRingClass = computed(() => {
+  return status.value === 'ringing' ? 'ring-1 ring-emerald-300' : '';
+});
+</script>
+
+<template>
+  <BaseBubble class="p-0 border-none" hide-meta>
+    <div
+      class="flex overflow-hidden flex-col w-full max-w-xs bg-white rounded-lg border border-slate-100 text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
+      :class="containerRingClass"
+    >
+      <div class="flex gap-3 items-center p-3 w-full">
+        <div
+          class="flex justify-center items-center rounded-full size-10 shrink-0"
+          :class="bubbleIconBg"
+        >
+          <span class="text-xl" :class="bubbleIconName" />
+        </div>
+
+        <div class="flex overflow-hidden flex-col flex-grow">
+          <span class="text-base font-medium truncate">{{ $t(labelKey) }}</span>
+          <span class="text-xs text-slate-500">{{ $t(subtextKey) }}</span>
+        </div>
+      </div>
+    </div>
+  </BaseBubble>
+</template>
--- a/app/javascript/dashboard/components-next/message/chips/Audio.vue
+++ b/app/javascript/dashboard/components-next/message/chips/Audio.vue
@@ -1,8 +1,16 @@
 <script setup>
-import { computed, onMounted, useTemplateRef, ref } from 'vue';
+import {
+  computed,
+  onMounted,
+  useTemplateRef,
+  ref,
+  getCurrentInstance,
+} from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
 import { downloadFile } from '@chatwoot/utils';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { emitter } from 'shared/helpers/mitt';

 const { attachment } = defineProps({
  attachment: {
@@ -27,6 +35,8 @@ const currentTime = ref(0);
 const duration = ref(0);
 const playbackSpeed = ref(1);

+const { uid } = getCurrentInstance();
+
 const onLoadedMetadata = () => {
  duration.value = audioPlayer.value?.duration;
 };
@@ -43,6 +53,18 @@ onMounted(() => {
  audioPlayer.value.playbackRate = playbackSpeed.value;
 });

+// Listen for global audio play events and pause if it's not this audio
+useEmitter('pause_playing_audio', currentPlayingId => {
+  if (currentPlayingId !== uid && isPlaying.value) {
+    try {
+      audioPlayer.value.pause();
+    } catch {
+      /* ignore pause errors */
+    }
+    isPlaying.value = false;
+  }
+});
+
 const formatTime = time => {
  if (!time || Number.isNaN(time)) return '00:00';
  const minutes = Math.floor(time / 60);
@@ -70,6 +92,8 @@ const playOrPause = () => {
    audioPlayer.value.pause();
    isPlaying.value = false;
  } else {
+    // Emit event to pause all other audio
+    emitter.emit('pause_playing_audio', uid);
    audioPlayer.value.play();
    isPlaying.value = true;
  }
@@ -101,6 +125,7 @@ const downloadAudio = async () => {
    ref="audioPlayer"
    controls
    class="hidden"
+    playsinline
    @loadedmetadata="onLoadedMetadata"
    @timeupdate="onTimeUpdate"
    @ended="onEnd"
--- a/app/javascript/dashboard/components-next/message/constants.js
+++ b/app/javascript/dashboard/components-next/message/constants.js
@@ -64,6 +64,7 @@ export const CONTENT_TYPES = {
  INPUT_CSAT: 'input_csat',
  INTEGRATIONS: 'integrations',
  STICKER: 'sticker',
+  VOICE_CALL: 'voice_call',
 };

 export const MEDIA_TYPES = [
--- a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
@@ -25,7 +25,7 @@ const reauthorizationRequired = computed(() => {

 <template>
  <span
-    class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
+    class="size-5 grid place-content-center rounded-full bg-n-alpha-2"
    :class="{ 'bg-n-solid-blue': active }"
  >
    <ChannelIcon :inbox="inbox" class="size-3" />
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -128,7 +128,7 @@ const menuItems = computed(() => {
      to: accountScopedRoute('inbox_view'),
      activeOn: ['inbox_view', 'inbox_view_conversation'],
      getterKeys: {
-        badge: 'notifications/getHasUnreadNotifications',
+        count: 'notifications/getUnreadCount',
      },
    },
    {
@@ -422,6 +422,12 @@ const menuItems = computed(() => {
          icon: 'i-lucide-users',
          to: accountScopedRoute('settings_teams_list'),
        },
+        {
+          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'),
@@ -488,6 +494,12 @@ const menuItems = computed(() => {
          icon: 'i-lucide-clock-alert',
          to: accountScopedRoute('sla_list'),
        },
+        {
+          name: 'Settings Security',
+          label: t('SIDEBAR.SECURITY'),
+          icon: 'i-lucide-shield',
+          to: accountScopedRoute('security_settings_index'),
+        },
        {
          name: 'Settings Billing',
          label: t('SIDEBAR.BILLING'),
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import Icon from 'next/icon/Icon.vue';

@@ -16,12 +17,16 @@ const props = defineProps({
 const emit = defineEmits(['toggle']);

 const showBadge = useMapGetter(props.getterKeys.badge);
+const dynamicCount = useMapGetter(props.getterKeys.count);
+const count = computed(() =>
+  dynamicCount.value > 99 ? '99+' : dynamicCount.value
+);
 </script>

 <template>
  <component
    :is="to ? 'router-link' : 'div'"
-    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8"
+    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 min-w-0"
    role="button"
    draggable="false"
    :to="to"
@@ -40,9 +45,21 @@ const showBadge = useMapGetter(props.getterKeys.badge);
        class="size-2 -top-px ltr:-right-px rtl:-left-px bg-n-brand absolute rounded-full border border-n-solid-2"
      />
    </div>
-    <span class="text-sm font-medium leading-5 flex-grow">
-      {{ label }}
-    </span>
+    <div class="flex items-center gap-1.5 flex-grow min-w-0">
+      <span class="text-sm font-medium leading-5 truncate">
+        {{ label }}
+      </span>
+      <span
+        v-if="dynamicCount && !expandable"
+        class="rounded-md capitalize text-xs leading-5 font-medium text-center outline outline-1 px-1 flex-shrink-0"
+        :class="{
+          'text-n-blue-text outline-n-slate-6': isActive,
+          'text-n-slate-11 outline-n-strong': !isActive,
+        }"
+      >
+        {{ count }}
+      </span>
+    </div>
    <span
      v-if="expandable"
      v-show="isExpanded"
--- a/app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue
+++ b/app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue
@@ -1,4 +1,13 @@
 <script setup>
+/**
+ * This component handles parsing and sending WhatsApp message templates.
+ * It works as follows:
+ * 1. Displays the template text with variable placeholders.
+ * 2. Generates input fields for each variable in the template.
+ * 3. Validates that all variables are filled before sending.
+ * 4. Replaces placeholders with user-provided values.
+ * 5. Emits events to send the processed message or reset the template.
+ */
 import { ref, computed, onMounted, watch } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
@@ -63,6 +72,10 @@ const formatType = computed(() => {
  return format ? format.charAt(0) + format.slice(1).toLowerCase() : '';
 });

+const isDocumentTemplate = computed(() => {
+  return headerComponent.value?.format?.toLowerCase() === 'document';
+});
+
 const hasVariables = computed(() => {
  return bodyText.value?.match(/{{([^}]+)}}/g) !== null;
 });
@@ -117,6 +130,11 @@ const updateMediaUrl = value => {
  processedParams.value.header.media_url = value;
 };

+const updateMediaName = value => {
+  processedParams.value.header ??= {};
+  processedParams.value.header.media_name = value;
+};
+
 const sendMessage = () => {
  v$.value.$touch();
  if (v$.value.$invalid) return;
@@ -159,10 +177,12 @@ defineExpose({
  processedParams,
  hasVariables,
  hasMediaHeader,
+  isDocumentTemplate,
  headerComponent,
  renderedTemplate,
  v$,
  updateMediaUrl,
+  updateMediaName,
  sendMessage,
  resetTemplate,
  goBack,
@@ -216,6 +236,17 @@ defineExpose({
            @update:model-value="updateMediaUrl"
          />
        </div>
+        <div v-if="isDocumentTemplate" class="flex items-center mb-2.5">
+          <Input
+            :model-value="processedParams.header?.media_name || ''"
+            type="text"
+            class="flex-1"
+            :placeholder="
+              t('WHATSAPP_TEMPLATES.PARSER.DOCUMENT_NAME_PLACEHOLDER')
+            "
+            @update:model-value="updateMediaName"
+          />
+        </div>
      </div>

      <!-- Body Variables Section -->
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -1,50 +1,57 @@
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    src: {
-      type: String,
-      required: true,
-    },
-    isComingSoon: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
  },
-};
+  description: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    required: true,
+  },
+  isComingSoon: {
+    type: Boolean,
+    default: false,
+  },
+});
 </script>

 <template>
  <button
-    class="relative bg-n-background cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-n-weak hover:border-n-brand hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="relative bg-n-solid-1 gap-6 cursor-pointer rounded-2xl flex flex-col justify-start transition-all duration-200 ease-in -m-px py-6 px-5 items-start border border-solid border-n-weak"
+    :class="{
+      'hover:enabled:border-n-blue-9 hover:enabled:shadow-md disabled:opacity-60 disabled:cursor-not-allowed':
+        !isComingSoon,
+      'cursor-not-allowed disabled:opacity-80': isComingSoon,
+    }"
  >
-    <img :src="src" :alt="title" draggable="false" class="w-1/2 my-4 mx-auto" />
-    <h3 class="text-n-slate-12 text-base text-center capitalize">
-      {{ title }}
-    </h3>
+    <div
+      class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
+    >
+      <Icon :icon="icon" class="text-n-slate-10 size-6" />
+    </div>
+
+    <div class="flex flex-col items-start gap-1.5">
+      <h3 class="text-n-slate-12 text-sm text-start font-medium capitalize">
+        {{ title }}
+      </h3>
+      <p class="text-n-slate-11 text-start text-sm">
+        {{ description }}
+      </p>
+    </div>

    <div
      v-if="isComingSoon"
-      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-md bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95"
+      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95 cursor-not-allowed"
    >
-      <span class="text-n-slate-12 font-medium text-base">
+      <span class="text-n-slate-12 font-medium text-sm">
        {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
      </span>
    </div>
  </button>
 </template>
-
-<style scoped lang="scss">
-.inactive {
-  img {
-    filter: grayscale(100%);
-  }
-
-  &:hover {
-    @apply border-n-strong shadow-none cursor-not-allowed;
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/auth/MfaVerification.vue
+++ b/app/javascript/dashboard/components/auth/MfaVerification.vue
@@ -0,0 +1,328 @@
+<script setup>
+import axios from 'axios';
+import { ref, computed, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { handleOtpPaste } from 'shared/helpers/clipboard';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
+import { useAccount } from 'dashboard/composables/useAccount';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import FormInput from 'v3/components/Form/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  mfaToken: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['verified', 'cancel']);
+
+const { t } = useI18n();
+const { isOnChatwootCloud } = useAccount();
+
+const OTP = 'otp';
+const BACKUP = 'backup';
+
+// State
+const verificationMethod = ref(OTP);
+const otpDigits = ref(['', '', '', '', '', '']);
+const backupCode = ref('');
+const isVerifying = ref(false);
+const errorMessage = ref('');
+const helpModalRef = ref(null);
+const otpInputRefs = ref([]);
+
+// Computed
+const otpCode = computed(() => otpDigits.value.join(''));
+const canSubmit = computed(() =>
+  verificationMethod.value === OTP
+    ? otpCode.value.length === 6
+    : backupCode.value.length === 8
+);
+
+const contactDescKey = computed(() =>
+  isOnChatwootCloud.value ? 'CONTACT_DESC_CLOUD' : 'CONTACT_DESC_SELF_HOSTED'
+);
+
+const focusInput = i => otpInputRefs.value[i]?.focus();
+
+// Verification
+const handleVerification = async () => {
+  if (!canSubmit.value || isVerifying.value) return;
+
+  isVerifying.value = true;
+  errorMessage.value = '';
+
+  try {
+    const payload = {
+      mfa_token: props.mfaToken,
+    };
+
+    if (verificationMethod.value === OTP) {
+      payload.otp_code = otpCode.value;
+    } else {
+      payload.backup_code = backupCode.value;
+    }
+
+    const response = await axios.post('/auth/sign_in', payload);
+
+    // Set auth credentials and redirect
+    if (response.data && response.headers) {
+      // Store auth credentials in cookies
+      const authData = {
+        'access-token': response.headers['access-token'],
+        'token-type': response.headers['token-type'],
+        client: response.headers.client,
+        expiry: response.headers.expiry,
+        uid: response.headers.uid,
+      };
+
+      // Store in cookies for auth
+      document.cookie = `cw_d_session_info=${encodeURIComponent(JSON.stringify(authData))}; path=/; SameSite=Lax`;
+
+      // Redirect to dashboard
+      window.location.href = '/app/';
+    } else {
+      emit('verified', response.data);
+    }
+  } catch (error) {
+    errorMessage.value =
+      parseAPIErrorResponse(error) || t('MFA_VERIFICATION.VERIFICATION_FAILED');
+
+    // Clear inputs on error
+    if (verificationMethod.value === OTP) {
+      otpDigits.value.fill('');
+      await nextTick();
+      focusInput(0);
+    } else {
+      backupCode.value = '';
+    }
+  } finally {
+    isVerifying.value = false;
+  }
+};
+
+// OTP Input Handling
+const handleOtpInput = async i => {
+  const v = otpDigits.value[i];
+
+  // Only allow numbers
+  if (!/^\d*$/.test(v)) {
+    otpDigits.value[i] = '';
+    return;
+  }
+
+  // Move to next input if value entered
+  if (v && i < 5) {
+    await nextTick();
+    focusInput(i + 1);
+  }
+
+  // Auto-submit if all digits entered
+  if (otpCode.value.length === 6) {
+    handleVerification();
+  }
+};
+
+const handleBackspace = (e, i) => {
+  if (!otpDigits.value[i] && i > 0) {
+    e.preventDefault();
+    focusInput(i - 1);
+    otpDigits.value[i - 1] = '';
+  }
+};
+
+const handleOtpCodePaste = e => {
+  e.preventDefault();
+  const code = handleOtpPaste(e, 6);
+
+  if (code) {
+    otpDigits.value = code.split('');
+    handleVerification();
+  }
+};
+
+// Alternative Actions
+const handleTryAnotherMethod = () => {
+  // Toggle between methods
+  verificationMethod.value = verificationMethod.value === OTP ? BACKUP : OTP;
+  otpDigits.value.fill('');
+  backupCode.value = '';
+  errorMessage.value = '';
+};
+</script>
+
+<template>
+  <div class="w-full max-w-md mx-auto">
+    <div
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
+    >
+      <!-- Header -->
+      <div class="text-center mb-6">
+        <div
+          class="inline-flex items-center justify-center size-14 bg-n-solid-1 outline outline-n-weak rounded-full mb-4"
+        >
+          <Icon icon="i-lucide-lock-keyhole" class="size-6 text-n-slate-10" />
+        </div>
+        <h2 class="text-2xl font-semibold text-n-slate-12">
+          {{ $t('MFA_VERIFICATION.TITLE') }}
+        </h2>
+        <p class="text-sm text-n-slate-11 mt-2">
+          {{ $t('MFA_VERIFICATION.DESCRIPTION') }}
+        </p>
+      </div>
+
+      <!-- Tab Selection -->
+      <div class="flex rounded-lg bg-n-alpha-black2 p-1 mb-6">
+        <button
+          v-for="method in [OTP, BACKUP]"
+          :key="method"
+          class="flex-1 py-2 px-4 text-sm font-medium rounded-md transition-colors"
+          :class="
+            verificationMethod === method
+              ? 'bg-n-solid-active text-n-slate-12 shadow-sm'
+              : 'text-n-slate-12'
+          "
+          @click="verificationMethod = method"
+        >
+          {{
+            $t(
+              `MFA_VERIFICATION.${method === OTP ? 'AUTHENTICATOR_APP' : 'BACKUP_CODE'}`
+            )
+          }}
+        </button>
+      </div>
+
+      <!-- Verification Form -->
+      <form class="space-y-4" @submit.prevent="handleVerification">
+        <!-- OTP Code Input -->
+        <div v-if="verificationMethod === OTP">
+          <label class="block text-sm font-medium text-n-slate-12 mb-2">
+            {{ $t('MFA_VERIFICATION.ENTER_OTP_CODE') }}
+          </label>
+          <div class="flex justify-between gap-2">
+            <input
+              v-for="(_, i) in otpDigits"
+              :key="i"
+              ref="otpInputRefs"
+              v-model="otpDigits[i]"
+              type="text"
+              maxlength="1"
+              pattern="[0-9]"
+              inputmode="numeric"
+              class="w-12 h-12 text-center text-lg font-semibold border-2 border-n-weak hover:border-n-strong rounded-lg focus:border-n-brand bg-n-alpha-black2 text-n-slate-12 placeholder:text-n-slate-10"
+              @input="handleOtpInput(i)"
+              @keydown.left.prevent="focusInput(i - 1)"
+              @keydown.right.prevent="focusInput(i + 1)"
+              @keydown.backspace="handleBackspace($event, i)"
+              @paste="handleOtpCodePaste"
+            />
+          </div>
+        </div>
+
+        <!-- Backup Code Input -->
+        <div v-if="verificationMethod === BACKUP">
+          <FormInput
+            v-model="backupCode"
+            name="backup_code"
+            type="text"
+            data-testid="backup_code_input"
+            :tabindex="1"
+            required
+            :label="$t('MFA_VERIFICATION.ENTER_BACKUP_CODE')"
+            :placeholder="
+              $t('MFA_VERIFICATION.BACKUP_CODE_PLACEHOLDER') || '000000'
+            "
+            @keyup.enter="handleVerification"
+          />
+        </div>
+
+        <!-- Error Message -->
+        <div
+          v-if="errorMessage"
+          class="p-3 bg-n-ruby-3 outline outline-n-ruby-5 outline-1 rounded-lg"
+        >
+          <p class="text-sm text-n-ruby-9">{{ errorMessage }}</p>
+        </div>
+
+        <!-- Submit Button -->
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :tabindex="2"
+          :label="$t('MFA_VERIFICATION.VERIFY_BUTTON')"
+          :disabled="!canSubmit || isVerifying"
+          :is-loading="isVerifying"
+        />
+
+        <!-- Alternative Actions -->
+        <div class="text-center flex items-center flex-col gap-2 pt-4">
+          <NextButton
+            sm
+            link
+            type="button"
+            class="w-full hover:!no-underline"
+            :tabindex="2"
+            :label="$t('MFA_VERIFICATION.TRY_ANOTHER_METHOD')"
+            @click="handleTryAnotherMethod"
+          />
+          <NextButton
+            sm
+            slate
+            link
+            type="button"
+            class="w-full hover:!no-underline"
+            :tabindex="3"
+            :label="$t('MFA_VERIFICATION.CANCEL_LOGIN')"
+            @click="() => emit('cancel')"
+          />
+        </div>
+      </form>
+    </div>
+
+    <!-- Help Text -->
+    <div class="mt-6 text-center">
+      <p class="text-sm text-n-slate-11">
+        {{ $t('MFA_VERIFICATION.HELP_TEXT') }}
+      </p>
+      <NextButton
+        sm
+        link
+        type="button"
+        class="w-full hover:!no-underline"
+        :tabindex="4"
+        :label="$t('MFA_VERIFICATION.LEARN_MORE')"
+        @click="helpModalRef?.open()"
+      />
+    </div>
+
+    <!-- Help Modal -->
+    <Dialog
+      ref="helpModalRef"
+      :title="$t('MFA_VERIFICATION.HELP_MODAL.TITLE')"
+      :show-confirm-button="false"
+      class="[&>dialog>div]:bg-n-alpha-3 [&>dialog>div]:rounded-lg"
+      @confirm="helpModalRef?.close()"
+    >
+      <div class="space-y-4 text-sm text-n-slate-11">
+        <div v-for="section in ['AUTHENTICATOR', 'BACKUP']" :key="section">
+          <h4 class="font-medium text-n-slate-12 mb-2">
+            {{ $t(`MFA_VERIFICATION.HELP_MODAL.${section}_TITLE`) }}
+          </h4>
+          <p>{{ $t(`MFA_VERIFICATION.HELP_MODAL.${section}_DESC`) }}</p>
+        </div>
+        <div>
+          <h4 class="font-medium text-n-slate-12 mb-2">
+            {{ $t('MFA_VERIFICATION.HELP_MODAL.CONTACT_TITLE') }}
+          </h4>
+          <p>{{ $t(`MFA_VERIFICATION.HELP_MODAL.${contactDescKey}`) }}</p>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
--- a/app/javascript/dashboard/components/copilot/CopilotContainer.vue
+++ b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
+import { useAlert } from 'dashboard/composables';
 import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
 import { useMapGetter } from 'dashboard/composables/store';
@@ -100,20 +101,24 @@ const handleReset = () => {
 };

 const sendMessage = async message => {
-  if (selectedCopilotThreadId.value) {
-    await store.dispatch('copilotMessages/create', {
-      assistant_id: activeAssistant.value.id,
-      conversation_id: currentChat.value?.id,
-      threadId: selectedCopilotThreadId.value,
-      message,
-    });
-  } else {
-    const response = await store.dispatch('copilotThreads/create', {
-      assistant_id: activeAssistant.value.id,
-      conversation_id: currentChat.value?.id,
-      message,
-    });
-    selectedCopilotThreadId.value = response.id;
+  try {
+    if (selectedCopilotThreadId.value) {
+      await store.dispatch('copilotMessages/create', {
+        assistant_id: activeAssistant.value.id,
+        conversation_id: currentChat.value?.id,
+        threadId: selectedCopilotThreadId.value,
+        message,
+      });
+    } else {
+      const response = await store.dispatch('copilotThreads/create', {
+        assistant_id: activeAssistant.value.id,
+        conversation_id: currentChat.value?.id,
+        message,
+      });
+      selectedCopilotThreadId.value = response.id;
+    }
+  } catch (error) {
+    useAlert(error.message);
  }
 };

--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -1,97 +1,81 @@
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    },
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
  },
-  computed: {
-    classObject() {
-      return 'w-full';
-    },
-    activeIndex() {
-      return this.items.findIndex(i => i.route === this.$route.name);
-    },
-  },
-  methods: {
-    isActive(item) {
-      return this.items.indexOf(item) === this.activeIndex;
-    },
-    isOver(item) {
-      return this.items.indexOf(item) < this.activeIndex;
-    },
-  },
-};
+});
+
+const route = useRoute();
+
+const activeIndex = computed(() => {
+  const index = props.items.findIndex(i => i.route === route.name);
+  return index === -1 ? 0 : index;
+});
+
+const steps = computed(() =>
+  props.items.map((item, index) => {
+    const isActive = index === activeIndex.value;
+    const isOver = index < activeIndex.value;
+    return {
+      ...item,
+      index,
+      isActive,
+      isOver,
+    };
+  })
+);
 </script>

 <template>
-  <transition-group
-    name="wizard-items"
-    tag="div"
-    class="wizard-box"
-    :class="classObject"
-  >
+  <transition-group tag="div">
    <div
-      v-for="item in items"
-      :key="item.route"
-      class="item"
-      :class="{ active: isActive(item), over: isOver(item) }"
+      v-for="step in steps"
+      :key="step.route"
+      class="cursor-pointer flex items-start gap-6 relative after:content-[''] after:absolute after:w-0.5 after:h-full after:top-5 ltr:after:left-4 rtl:after:right-4 before:content-[''] before:absolute before:w-0.5 before:h-4 before:top-0 before:left-4 rtl:before:right-4 last:after:hidden last:before:hidden after:bg-n-slate-3 before:bg-n-slate-3"
    >
-      <div class="flex items-center">
-        <h3
-          class="text-n-slate-12 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
+      <!-- Circle -->
+      <div
+        class="rounded-2xl flex-shrink-0 size-8 border-2 border-n-slate-3 flex items-center justify-center left-2 leading-4 z-10 top-5 transition-all duration-300 ease-in-out"
+        :class="{
+          'bg-n-slate-3': step.isActive || step.isOver,
+          'bg-n-background': !step.isActive && !step.isOver,
+        }"
+      >
+        <span
+          v-if="!step.isOver"
+          :key="'num-' + step.index"
+          class="text-xs font-bold transition-colors duration-300"
+          :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-11'"
        >
-          {{ item.title }}
-        </h3>
-        <span v-if="isOver(item)" class="mx-1 mt-0.5 text-n-teal-9">
-          <fluent-icon icon="checkmark" />
+          {{ step.index + 1 }}
        </span>
+        <Icon
+          v-else
+          :key="'check-' + step.index"
+          icon="i-lucide-check"
+          class="text-n-slate-11 size-4"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="flex flex-col items-start gap-1.5 pb-10 pt-1">
+        <div class="flex items-center">
+          <h3
+            class="text-sm font-medium overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
+            :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-12'"
+          >
+            {{ step.title }}
+          </h3>
+        </div>
+        <p class="m-0 mt-1.5 text-sm text-n-slate-11">
+          {{ step.body }}
+        </p>
      </div>
-      <span class="step">
-        {{ items.indexOf(item) + 1 }}
-      </span>
-      <p class="pl-6 m-0 mt-1.5 text-sm text-n-slate-11">
-        {{ item.body }}
-      </p>
    </div>
  </transition-group>
 </template>
-
-<style lang="scss" scoped>
-.wizard-box {
-  .item {
-    @apply cursor-pointer after:bg-n-slate-6 before:bg-n-slate-6 py-4 ltr:pr-4 rtl:pl-4 ltr:pl-6 rtl:pr-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5 rtl:after:left-6 rtl:before:left-6;
-
-    &.active {
-      h3 {
-        @apply text-n-blue-text dark:text-n-blue-text;
-      }
-
-      .step {
-        @apply bg-n-brand dark:bg-n-brand;
-      }
-    }
-
-    &.over {
-      &::after {
-        @apply bg-n-brand dark:bg-n-brand;
-      }
-
-      .step {
-        @apply bg-n-brand dark:bg-n-brand;
-      }
-
-      & + .item {
-        &::before {
-          @apply bg-n-brand dark:bg-n-brand;
-        }
-      }
-    }
-
-    .step {
-      @apply bg-n-slate-7 rounded-2xl font-medium w-4 left-4 leading-4 z-10 absolute text-center text-white dark:text-white text-xxs top-5;
-    }
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -1,91 +1,87 @@
-<script>
+<script setup>
+import { computed } from 'vue';
 import ChannelSelector from '../ChannelSelector.vue';
-export default {
-  components: { ChannelSelector },
-  props: {
-    channel: {
-      type: Object,
-      required: true,
-    },
-    enabledFeatures: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ['channelItemClick'],
-  computed: {
-    hasFbConfigured() {
-      return window.chatwootConfig?.fbAppId;
-    },
-    hasInstagramConfigured() {
-      return window.chatwootConfig?.instagramAppId;
-    },
-    isActive() {
-      const { key } = this.channel;
-      if (Object.keys(this.enabledFeatures).length === 0) {
-        return false;
-      }
-      if (key === 'website') {
-        return this.enabledFeatures.channel_website;
-      }
-      if (key === 'facebook') {
-        return this.enabledFeatures.channel_facebook && this.hasFbConfigured;
-      }
-      if (key === 'email') {
-        return this.enabledFeatures.channel_email;
-      }

-      if (key === 'instagram') {
-        return (
-          this.enabledFeatures.channel_instagram && this.hasInstagramConfigured
-        );
-      }
-
-      if (key === 'voice') {
-        return this.enabledFeatures.channel_voice;
-      }
-
-      return [
-        'website',
-        'twilio',
-        'api',
-        'whatsapp',
-        'sms',
-        'telegram',
-        'line',
-        'instagram',
-        'voice',
-      ].includes(key);
-    },
-    isComingSoon() {
-      const { key } = this.channel;
-      // Show "Coming Soon" only if the channel is marked as coming soon
-      // and the corresponding feature flag is not enabled yet.
-      return ['voice'].includes(key) && !this.isActive;
-    },
+const props = defineProps({
+  channel: {
+    type: Object,
+    required: true,
  },
-  methods: {
-    getChannelThumbnail() {
-      if (this.channel.key === 'api' && this.channel.thumbnail) {
-        return this.channel.thumbnail;
-      }
-      return `/assets/images/dashboard/channels/${this.channel.key}.png`;
-    },
-    onItemClick() {
-      if (this.isActive) {
-        this.$emit('channelItemClick', this.channel.key);
-      }
-    },
+  enabledFeatures: {
+    type: Object,
+    required: true,
  },
+});
+
+const emit = defineEmits(['channelItemClick']);
+
+const hasFbConfigured = computed(() => {
+  return window.chatwootConfig?.fbAppId;
+});
+
+const hasInstagramConfigured = computed(() => {
+  return window.chatwootConfig?.instagramAppId;
+});
+
+const isActive = computed(() => {
+  const { key } = props.channel;
+  if (Object.keys(props.enabledFeatures).length === 0) {
+    return false;
+  }
+  if (key === 'website') {
+    return props.enabledFeatures.channel_website;
+  }
+  if (key === 'facebook') {
+    return props.enabledFeatures.channel_facebook && hasFbConfigured.value;
+  }
+  if (key === 'email') {
+    return props.enabledFeatures.channel_email;
+  }
+
+  if (key === 'instagram') {
+    return (
+      props.enabledFeatures.channel_instagram && hasInstagramConfigured.value
+    );
+  }
+
+  if (key === 'voice') {
+    return props.enabledFeatures.channel_voice;
+  }
+
+  return [
+    'website',
+    'twilio',
+    'api',
+    'whatsapp',
+    'sms',
+    'telegram',
+    'line',
+    'instagram',
+    'voice',
+  ].includes(key);
+});
+
+const isComingSoon = computed(() => {
+  const { key } = props.channel;
+  // Show "Coming Soon" only if the channel is marked as coming soon
+  // and the corresponding feature flag is not enabled yet.
+  return ['voice'].includes(key) && !isActive.value;
+});
+
+const onItemClick = () => {
+  if (isActive.value) {
+    emit('channelItemClick', props.channel.key);
+  }
 };
 </script>

 <template>
  <ChannelSelector
-    :class="{ inactive: !isActive }"
-    :title="channel.name"
-    :src="getChannelThumbnail()"
+    :title="channel.title"
+    :description="channel.description"
+    :icon="channel.icon"
    :is-coming-soon="isComingSoon"
+    :disabled="!isActive"
    @click="onItemClick"
  />
 </template>
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -13,7 +13,7 @@ defineProps({
  <div class="flex items-center text-n-slate-11 text-xs min-w-0">
    <ChannelIcon
      :inbox="inbox"
-      class="size-3 ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
+      class="size-3 ltr:mr-1 rtl:ml-1 flex-shrink-0"
    />
    <span class="truncate">
      {{ inbox.name }}
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .4.2
 .4.3