feat: apply filter on click outside

Arrow navigation was relative to current period instead of the
restored range. Now recomputes monthOffset from the difference
between restored dates and current period on URL restore.

.circleci/config.yml

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

.gitignore

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

AGENTS.md

@@ -4,11 +4,6 @@
 
 - **Setup**: `bundle install && pnpm install`
 - **Run Dev**: `pnpm dev` or `overmind start -f ./Procfile.dev`
-- **Seed Local Test Data**: `bundle exec rails db:seed` (quickly populates minimal data for standard feature verification)
-- **Seed Search Test Data**: `bundle exec rails search:setup_test_data` (bulk fixture generation for search/performance/manual load scenarios)
-- **Seed Account Sample Data (richer test data)**: `Seeders::AccountSeeder` is available as an internal utility and is exposed through Super Admin `Accounts#seed`, but can be used directly in dev workflows too:
-  - UI path: Super Admin → Accounts → Seed (enqueues `Internal::SeedAccountJob`).
-  - CLI path: `bundle exec rails runner "Internal::SeedAccountJob.perform_now(Account.find(<id>))"` (or call `Seeders::AccountSeeder.new(account: Account.find(<id>)).perform!` directly).
 - **Lint JS/Vue**: `pnpm eslint` / `pnpm eslint:fix`
 - **Lint Ruby**: `bundle exec rubocop -a`
 - **Test JS**: `pnpm test` or `pnpm test:watch`
@@ -55,13 +50,6 @@
 - Prefer `with_modified_env` (from spec helpers) over stubbing `ENV` directly in specs
 - Specs in parallel/reloading environments: prefer comparing `error.class.name` over constant class equality when asserting raised errors
 
-## Codex Worktree Workflow
-
-- Use a separate git worktree + branch per task to keep changes isolated.
-- Keep Codex-specific local setup under `.codex/` and use `Procfile.worktree` for worktree process orchestration.
-- The setup workflow in `.codex/environments/environment.toml` should dynamically generate per-worktree DB/port values (Rails, Vite, Redis DB index) to avoid collisions.
-- Start each worktree with its own Overmind socket/title so multiple instances can run at the same time.
-
 ## Commit Messages
 
 - Prefer Conventional Commits: `type(scope): subject` (scope optional)
@@ -98,7 +86,3 @@ Practical checklist for any change impacting core logic or public APIs
 - When renaming/moving shared code, mirror the change in `enterprise/` to prevent drift.
 - Tests: Add Enterprise-specific specs under `spec/enterprise`, mirroring OSS spec layout where applicable.
 - When modifying existing OSS features for Enterprise-only behavior, add an Enterprise module (via `prepend_mod_with`/`include_mod_with`) instead of editing OSS files directly—especially for policies, controllers, and services. For Enterprise-exclusive features, place code directly under `enterprise/`.
-
-## Branding / White-labeling note
-
-- For user-facing strings that currently contain "Chatwoot" but should adapt to branded/self-hosted installs, prefer applying `replaceInstallationName` from `shared/composables/useBranding` in the UI layer (for example tooltip and suggestion labels) instead of adding hardcoded brand-specific copy.

Gemfile

@@ -191,14 +191,12 @@ gem 'reverse_markdown'
 
 gem 'iso-639'
 gem 'ruby-openai'
-gem 'ai-agents', '>= 0.9.1'
+gem 'ai-agents', '>= 0.7.0'
 
 # TODO: Move this gem as a dependency of ai-agents
 gem 'ruby_llm', '>= 1.8.2'
 gem 'ruby_llm-schema'
 
-gem 'cld3', '~> 3.7'
-
 # OpenTelemetry for LLM observability
 gem 'opentelemetry-sdk'
 gem 'opentelemetry-exporter-otlp'

Gemfile.lock

@@ -126,8 +126,8 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
-    ai-agents (0.9.1)
-      ruby_llm (~> 1.9.1)
+    ai-agents (0.7.0)
+      ruby_llm (~> 1.8.2)
     annotaterb (4.20.0)
       activerecord (>= 6.0.0)
       activesupport (>= 6.0.0)
@@ -186,7 +186,6 @@ GEM
     byebug (11.1.3)
     childprocess (5.1.0)
       logger (~> 1.5)
-    cld3 (3.7.0)
     climate_control (1.2.0)
     coderay (1.1.3)
     commonmarker (0.23.10)
@@ -298,7 +297,7 @@ GEM
       railties (>= 5.0.0)
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.14.1)
+    faraday (2.13.1)
       faraday-net_http (>= 2.0, < 3.5)
       json
       logger
@@ -309,12 +308,12 @@ GEM
       hashie
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
-    faraday-net_http (3.4.2)
-      net-http (~> 0.5)
+    faraday-net_http (3.4.0)
+      net-http (>= 0.5.0)
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
-    faraday-retry (2.4.0)
+    faraday-retry (2.2.1)
       faraday (~> 2.0)
     faraday_middleware-aws-sigv4 (1.0.1)
       aws-sigv4 (~> 1.0)
@@ -465,7 +464,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (2.18.1)
+    json (2.13.2)
     json_refs (0.1.8)
       hana
     json_schemer (0.2.24)
@@ -540,7 +539,7 @@ GEM
       net-imap
       net-pop
       net-smtp
-    marcel (1.1.0)
+    marcel (1.0.4)
     maxminddb (0.1.22)
     meta_request (0.8.5)
       rack-contrib (>= 1.1, < 3)
@@ -559,12 +558,12 @@ GEM
     multi_json (1.15.0)
     multi_xml (0.8.0)
       bigdecimal (>= 3.1, < 5)
-    multipart-post (2.4.1)
+    multipart-post (2.3.0)
     mutex_m (0.3.0)
     neighbor (0.2.3)
       activerecord (>= 5.2)
-    net-http (0.9.1)
-      uri (>= 0.11.1)
+    net-http (0.6.0)
+      uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
     net-imap (0.4.20)
@@ -583,14 +582,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.19.1)
+    nokogiri (1.18.9)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.19.1-arm64-darwin)
+    nokogiri (1.18.9-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.1-x86_64-darwin)
+    nokogiri (1.18.9-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.1-x86_64-linux-gnu)
+    nokogiri (1.18.9-x86_64-linux-gnu)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -677,7 +676,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (3.2.5)
+    rack (3.2.3)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -825,7 +824,7 @@ GEM
     ruby2ruby (2.5.0)
       ruby_parser (~> 3.1)
       sexp_processor (~> 4.6)
-    ruby_llm (1.9.2)
+    ruby_llm (1.8.2)
       base64
       event_stream_parser (~> 1)
       faraday (>= 1.10.0)
@@ -969,7 +968,7 @@ GEM
       unicode-emoji (~> 4.0, >= 4.0.4)
     unicode-emoji (4.0.4)
     uniform_notifier (1.17.0)
-    uri (1.1.1)
+    uri (1.0.4)
     uri_template (0.7.0)
     valid_email2 (5.2.6)
       activemodel (>= 3.2)
@@ -1004,7 +1003,7 @@ GEM
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.7.4)
+    zeitwerk (2.6.17)
 
 PLATFORMS
   arm64-darwin-20
@@ -1024,7 +1023,7 @@ DEPENDENCIES
   administrate (>= 0.20.1)
   administrate-field-active_storage (>= 1.0.3)
   administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents (>= 0.9.1)
+  ai-agents (>= 0.7.0)
   annotaterb
   attr_extras
   audited (~> 5.4, >= 5.4.1)
@@ -1038,7 +1037,6 @@ DEPENDENCIES
   bullet
   bundle-audit
   byebug
-  cld3 (~> 3.7)
   climate_control
   commonmarker
   csv-safe

VERSION_CW

@@ -1 +1 @@
-4.11.1
+4.10.1

app/builders/messages/facebook/message_builder.rb

@@ -105,19 +105,15 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
   end
 
   def message_params
-    content_attributes = {
-      in_reply_to_external_id: response.in_reply_to_external_id
-    }
-    content_attributes[:external_echo] = true if @outgoing_echo
-
     {
       account_id: conversation.account_id,
       inbox_id: conversation.inbox_id,
       message_type: @message_type,
-      status: @outgoing_echo ? :delivered : :sent,
       content: response.content,
       source_id: response.identifier,
-      content_attributes: content_attributes,
+      content_attributes: {
+        in_reply_to_external_id: response.in_reply_to_external_id
+      },
       sender: @outgoing_echo ? nil : @contact_inbox.contact
     }
   end

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

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

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

@@ -1,7 +1,6 @@
 class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseController
   before_action :fetch_inbox
   before_action :validate_whatsapp_channel
-  before_action :validate_captain_enabled, only: [:analyze]
 
   def show
     service = CsatTemplateManagementService.new(@inbox)
@@ -25,23 +24,6 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
     render json: { error: 'Template parameters are required' }, status: :unprocessable_entity
   end
 
-  def analyze
-    template_params = extract_template_params
-    return render_missing_message_error if template_params[:message].blank?
-
-    result = CsatTemplateUtilityAnalysisService.new(
-      account: Current.account,
-      inbox: @inbox,
-      message: template_params[:message],
-      button_text: template_params[:button_text],
-      language: template_params[:language]
-    ).perform
-
-    render json: result
-  rescue ActionController::ParameterMissing
-    render json: { error: 'Template parameters are required' }, status: :unprocessable_entity
-  end
-
   private
 
   def fetch_inbox
@@ -64,12 +46,6 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
     render json: { error: 'Message is required' }, status: :unprocessable_entity
   end
 
-  def validate_captain_enabled
-    return if Current.account.feature_enabled?('captain_integration')
-
-    render json: { error: 'Captain is required for template analysis' }, status: :forbidden
-  end
-
   def render_template_creation_result(result)
     if result[:success]
       render_successful_template_creation(result)

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

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

app/controllers/devise_overrides/passwords_controller.rb

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

app/controllers/webhooks/shopify_controller.rb

@@ -1,35 +0,0 @@
-class Webhooks::ShopifyController < ActionController::API
-  before_action :verify_hmac!
-
-  def events
-    case request.headers['X-Shopify-Topic']
-    when 'shop/redact'
-      handle_shop_redact
-    end
-
-    head :ok
-  end
-
-  private
-
-  def verify_hmac!
-    secret = GlobalConfigService.load('SHOPIFY_CLIENT_SECRET', nil)
-    return head :unauthorized if secret.blank?
-
-    data = request.body.read
-    request.body.rewind
-
-    hmac_header = request.headers['X-Shopify-Hmac-SHA256']
-    return head :unauthorized if hmac_header.blank?
-
-    computed = Base64.strict_encode64(OpenSSL::HMAC.digest('SHA256', secret, data))
-    return head :unauthorized unless ActiveSupport::SecurityUtils.secure_compare(computed, hmac_header)
-  end
-
-  def handle_shop_redact
-    shop_domain = params[:shop_domain]
-    return if shop_domain.blank?
-
-    Integrations::Hook.where(app_id: 'shopify', reference_id: shop_domain).destroy_all
-  end
-end

app/finders/conversation_finder.rb

@@ -11,7 +11,6 @@ class ConversationFinder
     'priority_desc' => %w[sort_on_priority desc],
     'waiting_since_asc' => %w[sort_on_waiting_since asc],
     'waiting_since_desc' => %w[sort_on_waiting_since desc],
-    'priority_desc_created_at_asc' => %w[sort_on_priority_created_at desc],
 
     # To be removed in v3.5.0
     'latest' => %w[sort_on_last_activity_at desc],
@@ -56,22 +55,6 @@ class ConversationFinder
     }
   end
 
-  def perform_meta_only
-    set_up
-
-    mine_count, unassigned_count, all_count, = set_count_for_all_conversations
-    assigned_count = all_count - unassigned_count
-
-    {
-      count: {
-        mine_count: mine_count,
-        assigned_count: assigned_count,
-        unassigned_count: unassigned_count,
-        all_count: all_count
-      }
-    }
-  end
-
   private
 
   def set_up

app/helpers/api/v1/inboxes_helper.rb

@@ -57,35 +57,39 @@ module Api::V1::InboxesHelper
   end
 
   def check_smtp_connection(channel_data, smtp)
-    smtp.open_timeout = 10
     smtp.start(channel_data[:smtp_domain], channel_data[:smtp_login], channel_data[:smtp_password],
                channel_data[:smtp_authentication]&.to_sym || :login)
     smtp.finish
-  rescue Net::SMTPAuthenticationError
-    raise StandardError, I18n.t('errors.inboxes.smtp.authentication_error')
-  rescue SocketError, Errno::ECONNREFUSED, Errno::EHOSTUNREACH, Errno::ENETUNREACH, Net::OpenTimeout
-    raise StandardError, I18n.t('errors.inboxes.smtp.connection_error')
-  rescue OpenSSL::SSL::SSLError
-    raise StandardError, I18n.t('errors.inboxes.smtp.ssl_error')
-  rescue Net::SMTPServerBusy, Net::SMTPSyntaxError, Net::SMTPFatalError
-    raise StandardError, I18n.t('errors.inboxes.smtp.smtp_error')
-  rescue StandardError => e
-    raise StandardError, e.message
   end
 
   def set_smtp_encryption(channel_data, smtp)
     if channel_data[:smtp_enable_ssl_tls]
-      set_smtp_ssl_method(smtp, :enable_tls, channel_data[:smtp_openssl_verify_mode])
+      set_enable_tls(channel_data, smtp)
     elsif channel_data[:smtp_enable_starttls_auto]
-      set_smtp_ssl_method(smtp, :enable_starttls_auto, channel_data[:smtp_openssl_verify_mode])
+      set_enable_starttls_auto(channel_data, smtp)
     end
   end
 
-  def set_smtp_ssl_method(smtp, method, openssl_verify_mode)
-    return unless smtp.respond_to?(method)
+  def set_enable_starttls_auto(channel_data, smtp)
+    return unless smtp.respond_to?(:enable_starttls_auto)
 
-    context = enable_openssl_mode(openssl_verify_mode) if openssl_verify_mode
-    context ? smtp.send(method, context) : smtp.send(method)
+    if channel_data[:smtp_openssl_verify_mode]
+      context = enable_openssl_mode(channel_data[:smtp_openssl_verify_mode])
+      smtp.enable_starttls_auto(context)
+    else
+      smtp.enable_starttls_auto
+    end
+  end
+
+  def set_enable_tls(channel_data, smtp)
+    return unless smtp.respond_to?(:enable_tls)
+
+    if channel_data[:smtp_openssl_verify_mode]
+      context = enable_openssl_mode(channel_data[:smtp_openssl_verify_mode])
+      smtp.enable_tls(context)
+    else
+      smtp.enable_tls
+    end
   end
 
   def enable_openssl_mode(smtp_openssl_verify_mode)

app/javascript/dashboard/App.vue

@@ -164,4 +164,10 @@ export default {
 .v-popper--theme-tooltip .v-popper__arrow-container {
   display: none;
 }
+
+.multiselect__input {
+  margin-bottom: 0px !important;
+}
 </style>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>

app/javascript/dashboard/api/inboxes.js

@@ -42,12 +42,6 @@ class Inboxes extends CacheEnabledApiClient {
   getCSATTemplateStatus(inboxId) {
     return axios.get(`${this.url}/${inboxId}/csat_template`);
   }
-
-  analyzeCSATTemplateUtility(inboxId, template) {
-    return axios.post(`${this.url}/${inboxId}/csat_template/analyze`, {
-      template,
-    });
-  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/assets/scss/_base.scss

@@ -66,7 +66,7 @@ textarea {
 // Field base styles (Input, TextArea, Select)
 @layer components {
   .field-base {
-    @apply block box-border w-full transition-colors duration-[0.25s] ease-[ease-in-out] focus:outline-n-brand dark:focus:outline-n-brand appearance-none mx-0 mt-0 mb-4 py-2 px-3 rounded-lg text-sm font-normal bg-n-alpha-black2 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 border-none outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6;
+    @apply block box-border w-full transition-colors duration-[0.25s] ease-[ease-in-out] focus:outline-n-brand dark:focus:outline-n-brand appearance-none mx-0 mt-0 mb-4 py-2 px-3 rounded-lg text-base font-normal bg-n-alpha-black2 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 border-none outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6;
   }
 
   .field-disabled {
@@ -78,7 +78,7 @@ textarea {
   }
 }
 
-$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.no-margin)";
+$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.multiselect__input):not(.no-margin)";
 
 #{$form-input-selector} {
   @apply field-base h-10;
@@ -92,7 +92,7 @@ $form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not
   }
 }
 
-input[type='file'] {
+input[type='file']:not(.multiselect__input) {
   @apply leading-[1.15] mb-4 border-0 bg-transparent text-sm;
 }
 
@@ -126,6 +126,13 @@ label:has(.help-text) {
   }
 }
 
+// Error handling
+.has-multi-select-error {
+  div.multiselect {
+    @apply mb-1;
+  }
+}
+
 // FormKit support
 .formkit-outer[data-invalid='true'] {
   #{$form-input-selector},
@@ -143,7 +150,9 @@ label:has(.help-text) {
   #{$form-input-selector},
   input:not([type]),
   textarea,
-  select {
+  select,
+  .multiselect > .multiselect__tags,
+  .multiselect:not(.no-margin) {
     @apply field-error;
   }
 

app/javascript/dashboard/assets/scss/_woot.scss

@@ -12,6 +12,10 @@
 // Base styles for elements
 @import 'base';
 
+// Plugins
+@import 'plugins/multiselect';
+@import 'plugins/date-picker';
+
 html,
 body {
   font-family:
@@ -62,84 +66,4 @@ body {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
-
-  /**
-   * ============================================================================
-   * TYPOGRAPHY UTILITIES
-   * ============================================================================
-   *
-   * | Class              | Use Case                                           |
-   * |--------------------|----------------------------------------------------|
-   * | .text-body-main    | <p>, <span>, general body text                     |
-   * | .text-body-para    | <p> for paragraphs, larger text blocks             |
-   * | .text-heading-1    | <h1>, page titles, panel headers                   |
-   * | .text-heading-2    | <h2>, section headings, card titles                |
-   * | .text-heading-3    | <h3>, card headings, breadcrumbs, subsections      |
-   * | .text-label        | <label>, form labels, field names                  |
-   * | .text-label-small  | <small>, footnotes, tags, badges, captions         |
-   * | .text-button       | <button>, standard button text                     |
-   * | .text-button-small | <button>, small/compact button text                |
-   */
-
-  /* body-text-main: Main text style for general body text */
-  .text-body-main {
-    @apply font-inter text-sm font-420;
-    line-height: 21px; /* 150% */
-    letter-spacing: -0.28px;
-  }
-
-  /* body-text-paragraph: For paragraphs or larger blocks of text */
-  .text-body-para {
-    @apply font-inter text-sm font-420;
-    line-height: 21px; /* 150% */
-    letter-spacing: -0.21px;
-  }
-
-  /* heading-1: Large heading for pages and panels */
-  .text-heading-1 {
-    @apply font-inter text-lg font-520;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: -0.27px;
-  }
-
-  /* heading-2: Secondary heading for sections */
-  .text-heading-2 {
-    @apply font-inter text-base font-medium;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: -0.27px;
-  }
-
-  /* heading-3: For card headings, breadcrumbs, subsections */
-  .text-heading-3 {
-    @apply font-inter text-sm font-medium;
-    line-height: 21px; /* 150% */
-    letter-spacing: -0.27px;
-  }
-
-  /* label: Standard label text for form fields */
-  .text-label {
-    @apply font-inter text-sm font-medium;
-    line-height: 21px; /* 150% */
-  }
-
-  /* label-small: Smallest font for labels, footnotes, tags */
-  .text-label-small {
-    @apply font-inter text-xs font-440;
-    line-height: 16px; /* 133.333% */
-    letter-spacing: -0.24px;
-  }
-
-  /* button-text: Text for standard size buttons */
-  .text-button {
-    @apply font-inter text-sm font-460;
-    line-height: 21px; /* 150% */
-    letter-spacing: -0.28px;
-  }
-
-  /* button-text-small: Text for smaller buttons */
-  .text-button-small {
-    @apply font-inter text-xs font-440;
-    line-height: 18px; /* 150% */
-    letter-spacing: -0.24px;
-  }
 }

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -0,0 +1,273 @@
+@mixin label-multiselect-hover {
+  &::after {
+    @apply text-n-brand;
+  }
+
+  &:hover {
+    @apply bg-n-slate-3;
+
+    &::after {
+      @apply text-n-blue-11;
+    }
+  }
+}
+
+.multiselect {
+  &:not(.no-margin) {
+    @apply mb-4;
+  }
+
+  &.invalid .multiselect__tags {
+    @apply border-0 outline outline-1 outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8;
+  }
+
+  &.multiselect--disabled {
+    @apply opacity-50  rounded-lg cursor-not-allowed pointer-events-auto;
+
+    .multiselect__select {
+      @apply cursor-not-allowed bg-transparent rounded-lg;
+    }
+  }
+
+  .multiselect--active {
+    > .multiselect__tags {
+      @apply outline-n-blue-border;
+    }
+  }
+
+  .multiselect__select {
+    @apply min-h-[2.875rem] p-0 right-0 top-0;
+
+    &::before {
+      @apply right-0;
+    }
+  }
+
+  .multiselect__content-wrapper {
+    @apply bg-n-alpha-black2 text-n-slate-12 backdrop-blur-[100px] border-0 border-none outline outline-1 outline-n-weak rounded-b-lg;
+  }
+
+  .multiselect__content {
+    @apply max-w-full;
+
+    .multiselect__option {
+      @apply text-sm font-normal flex justify-between items-center;
+
+      span {
+        @apply inline-block overflow-hidden text-ellipsis whitespace-nowrap w-fit;
+      }
+
+      p {
+        @apply mb-0;
+      }
+
+      &::after {
+        @apply bottom-0 flex items-center justify-center text-center relative px-1 leading-tight;
+      }
+
+      &.multiselect__option--highlight {
+        @apply bg-n-alpha-black2 text-n-slate-12;
+      }
+
+      &.multiselect__option--highlight:hover {
+        @apply bg-n-brand/10 text-n-slate-12;
+
+        &::after {
+          @apply bg-transparent text-center text-n-slate-12;
+        }
+      }
+
+      &.multiselect__option--highlight::after {
+        @apply bg-transparent text-n-slate-12;
+      }
+
+      &.multiselect__option--selected {
+        @apply bg-n-brand/20 text-n-slate-12;
+
+        &::after {
+          @apply bg-transparent;
+        }
+
+        &.multiselect__option--highlight:hover {
+          @apply bg-transparent;
+
+          &::after:hover {
+            @apply text-n-slate-12 bg-transparent;
+          }
+        }
+      }
+    }
+  }
+
+  .multiselect__tags {
+    @apply bg-n-alpha-black2 border-0 grid items-center w-full border-none outline-1 outline outline-n-weak hover:outline-n-slate-6 m-0 min-h-[2.875rem] rounded-lg pt-0;
+
+    input {
+      @apply border-0 border-none bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-10;
+    }
+  }
+
+  .multiselect__spinner {
+    background-color: transparent;
+  }
+
+  .multiselect__tags-wrap {
+    @apply inline-block leading-none mt-1;
+  }
+
+  .multiselect__placeholder {
+    @apply text-n-slate-10 font-normal pt-3;
+  }
+
+  .multiselect__tag {
+    @apply bg-n-alpha-white mt-1 text-n-slate-12 pr-6 pl-2.5 py-1.5;
+  }
+
+  .multiselect__tag-icon {
+    @include label-multiselect-hover;
+  }
+
+  .multiselect__input {
+    @apply text-sm h-[2.875rem] mb-0 p-0 shadow-none border-transparent hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none active:border-transparent active:shadow-none;
+  }
+
+  .multiselect__single {
+    @apply bg-transparent text-n-slate-12 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
+  }
+}
+
+.sidebar-labels-wrap {
+  &.has-edited,
+  &:hover {
+    .multiselect {
+      @apply cursor-pointer;
+    }
+  }
+
+  .multiselect {
+    > .multiselect__select {
+      @apply invisible;
+    }
+
+    > .multiselect__tags {
+      @apply outline-transparent;
+    }
+
+    &.multiselect--active > .multiselect__tags {
+      @apply outline-n-blue-border;
+    }
+  }
+}
+
+.multiselect-wrap--small {
+  // To be removed one SLA reports date picker is created
+  &.tiny {
+    .multiselect.no-margin {
+      @apply min-h-[32px];
+    }
+
+    .multiselect__select {
+      @apply min-h-[32px] h-8;
+
+      &::before {
+        @apply top-[60%];
+      }
+    }
+
+    .multiselect__tags {
+      @apply min-h-[32px] max-h-[32px];
+
+      .multiselect__single {
+        @apply pt-1 pb-1;
+      }
+    }
+  }
+
+  .multiselect__tags,
+  .multiselect__input,
+  .multiselect {
+    @apply text-n-slate-12 rounded-lg text-sm  min-h-[2.5rem];
+  }
+
+  .multiselect__input {
+    @apply h-[2.375rem] min-h-[2.375rem];
+  }
+
+  .multiselect__single {
+    @apply items-center flex m-0 text-sm max-h-[2.375rem] bg-transparent text-n-slate-12 py-3 px-0.5;
+  }
+
+  .multiselect__placeholder {
+    @apply m-0 py-2 px-0.5;
+  }
+
+  .multiselect__tag {
+    @apply py-[6px] my-[1px];
+  }
+
+  .multiselect__select {
+    @apply min-h-[2.5rem];
+  }
+
+  .multiselect--disabled .multiselect__current,
+  .multiselect--disabled .multiselect__select {
+    @apply bg-transparent;
+  }
+}
+
+.multiselect--disabled {
+  background-color: rgba(var(--black-alpha-2)) !important;
+
+  .multiselect__tags {
+    @apply hover:outline-n-weak;
+  }
+}
+
+.multiselect--active {
+  .multiselect__select::before {
+    @apply top-[62%];
+  }
+}
+
+.multiselect__select::before {
+  top: 60% !important;
+}
+
+.multiselect-wrap--medium {
+  .multiselect__tags,
+  .multiselect__input {
+    @apply items-center flex;
+  }
+
+  .multiselect__tags,
+  .multiselect__input,
+  .multiselect {
+    @apply bg-n-alpha-black2 text-n-slate-12 text-sm h-12 min-h-[3rem];
+  }
+
+  .multiselect__input {
+    @apply h-[2.875rem] min-h-[2.875rem];
+    margin-bottom: 0 !important;
+  }
+
+  .multiselect__single {
+    @apply items-center flex m-0 text-sm py-1 px-0.5 bg-transparent text-n-slate-12;
+  }
+
+  .multiselect__placeholder {
+    @apply m-0 py-1 px-0.5;
+  }
+
+  .multiselect__select {
+    @apply min-h-[3rem];
+  }
+
+  .multiselect--disabled .multiselect__current,
+  .multiselect--disabled .multiselect__select {
+    @apply bg-transparent;
+  }
+
+  .multiselect__tags-wrap {
+    @apply flex-shrink-0;
+  }
+}

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

@@ -49,7 +49,7 @@ const handleFetchUsers = () => {
     <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-heading-2 text-n-slate-12 line-clamp-1">
+          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
             {{ name }}
           </h3>
           <CardPopover
@@ -78,7 +78,7 @@ const handleFetchUsers = () => {
           <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
         </div>
       </div>
-      <p class="text-n-slate-11 text-body-para line-clamp-1 mb-0 py-1">
+      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
         {{ description }}
       </p>
     </div>

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

@@ -20,7 +20,7 @@ const handleClick = () => {
   <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-heading-2">{{ title }}</h3>
+        <h3 class="text-n-slate-12 text-base font-medium">{{ title }}</h3>
         <Button
           xs
           slate
@@ -29,14 +29,14 @@ const handleClick = () => {
           @click.stop="handleClick"
         />
       </div>
-      <p class="text-n-slate-11 text-body-para mb-0">{{ description }}</p>
+      <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-body-para"
+        class="flex items-center gap-3 text-sm"
       >
         <Icon
           :icon="feature.icon"

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

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

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

@@ -15,6 +15,7 @@ const props = defineProps({
   assignmentOrder: { type: String, default: '' },
   conversationPriority: { type: String, default: '' },
   assignedInboxCount: { type: Number, default: 0 },
+  enabled: { type: Boolean, default: false },
   inboxes: { type: Array, default: () => [] },
   isFetchingInboxes: { type: Boolean, default: false },
 });
@@ -60,19 +61,39 @@ const handleFetchInboxes = () => {
     <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-heading-2 text-n-slate-12 line-clamp-1">
+          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
             {{ name }}
           </h3>
-          <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 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
@@ -89,18 +110,18 @@ const handleFetchInboxes = () => {
           <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
         </div>
       </div>
-      <p class="text-n-slate-11 text-body-para line-clamp-1 mb-0 py-1">
+      <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-body-para">
+        <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-body-para">
+        <span v-if="priority" class="text-n-slate-11 text-sm">
           {{
             `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.PRIORITY')}:`
           }}

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

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

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

@@ -2,7 +2,7 @@
 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 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';
 

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import RadioCard from './RadioCard.vue';
+import RadioCard from '../RadioCard.vue';
 
 const selectedOption = ref('round_robin');
 

app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue

@@ -21,10 +21,10 @@ const handleButtonClick = () => {
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
-    <header class="sticky top-0 z-10 px-6">
-      <div class="w-full max-w-5xl mx-auto">
+    <header class="sticky top-0 z-10 px-6 lg:px-0">
+      <div class="w-full max-w-[60rem] mx-auto">
         <div class="flex items-center justify-between w-full h-20 gap-2">
-          <span class="text-heading-1 text-n-slate-12">
+          <span class="text-xl font-medium text-n-slate-12">
             {{ headerTitle }}
           </span>
           <div
@@ -43,8 +43,8 @@ const handleButtonClick = () => {
         </div>
       </div>
     </header>
-    <main class="flex-1 px-6 overflow-y-auto">
-      <div class="w-full max-w-5xl mx-auto py-4">
+    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
+      <div class="w-full max-w-[60rem] mx-auto py-4">
         <slot name="default" />
       </div>
     </main>

app/javascript/dashboard/components-next/CardLayout.vue

@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="flex flex-col w-full outline-1 outline outline-n-container -outline-offset-1 group/cardLayout rounded-xl bg-n-solid-2"
+    class="flex flex-col w-full outline-1 outline outline-n-container group/cardLayout rounded-xl bg-n-solid-2"
   >
     <div
       class="flex w-full gap-3 py-5"

app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue

@@ -15,11 +15,11 @@ const emit = defineEmits(['search', 'update:sort']);
 </script>
 
 <template>
-  <header class="sticky top-0 z-10 px-6">
+  <header class="sticky top-0 z-10">
     <div
-      class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
+      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
     >
-      <span class="text-heading-1 truncate text-n-slate-12">
+      <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
       <div class="flex items-center flex-row flex-shrink-0 gap-2">

app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue

@@ -32,18 +32,17 @@ const updateCurrentPage = page => {
         @search="emit('search', $event)"
         @update:sort="emit('update:sort', $event)"
       />
-      <main class="flex-1 px-6 overflow-y-auto">
-        <div class="w-full mx-auto max-w-5xl py-4">
+      <main class="flex-1 overflow-y-auto">
+        <div class="w-full mx-auto max-w-[60rem]">
           <slot name="default" />
         </div>
       </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0">
+      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
         <PaginationFooter
           current-page-info="COMPANIES_LAYOUT.PAGINATION_FOOTER.SHOWING"
           :current-page="currentPage"
           :total-items="totalItems"
           :items-per-page="25"
-          class="max-w-[67rem]"
           @update:current-page="updateCurrentPage"
         />
       </footer>

app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue

@@ -3,8 +3,8 @@ import { computed, watch, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 
-import LabelItem from 'dashboard/components-next/label/LabelItem.vue';
-import AddLabel from 'dashboard/components-next/label/AddLabel.vue';
+import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
+import AddLabel from 'dashboard/components-next/Label/AddLabel.vue';
 
 const props = defineProps({
   contactId: {

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue

@@ -44,7 +44,6 @@ const SOCIAL_CONFIG = {
   LINKEDIN: 'i-ri-linkedin-box-fill',
   FACEBOOK: 'i-ri-facebook-circle-fill',
   INSTAGRAM: 'i-ri-instagram-line',
-  TELEGRAM: 'i-ri-telegram-fill',
   TIKTOK: 'i-ri-tiktok-fill',
   TWITTER: 'i-ri-twitter-x-fill',
   GITHUB: 'i-ri-github-fill',
@@ -67,7 +66,6 @@ const defaultState = {
       facebook: '',
       github: '',
       instagram: '',
-      telegram: '',
       tiktok: '',
       linkedin: '',
       twitter: '',
@@ -105,13 +103,9 @@ const prepareStateBasedOnProps = () => {
     countryCode = '',
     country = '',
     city = '',
-    socialTelegramUserName = '',
     socialProfiles = {},
   } = additionalAttributes || {};
 
-  const telegramUsername =
-    socialProfiles?.telegram || socialTelegramUserName || '';
-
   Object.assign(state, {
     id,
     name,
@@ -125,10 +119,7 @@ const prepareStateBasedOnProps = () => {
       countryCode,
       country,
       city,
-      socialProfiles: {
-        ...socialProfiles,
-        telegram: telegramUsername,
-      },
+      socialProfiles,
     },
   });
 };

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -32,9 +32,9 @@ const emit = defineEmits([
 </script>
 
 <template>
-  <header class="sticky top-0 z-10 px-6">
+  <header class="sticky top-0 z-10">
     <div
-      class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
+      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue

@@ -68,7 +68,8 @@ const hasActiveSegments = computed(
 );
 const activeSegmentName = computed(() => props.activeSegment?.name);
 
-const openCreateNewContactDialog = () => {
+const openCreateNewContactDialog = async () => {
+  await createNewContactDialogRef.value?.contactsFormRef.resetValidation();
   createNewContactDialogRef.value?.dialogRef.open();
 };
 const openContactImportDialog = () =>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue

@@ -62,7 +62,7 @@ const activeFilterQueryData = computed(() => {
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
     "
     :show-clear-button="!hasActiveSegments"
-    class="max-w-5xl"
+    class="max-w-[60rem] px-6"
     @open-filter="emit('openFilter')"
     @clear-filters="emit('clearFilters')"
   />

app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue

@@ -98,8 +98,8 @@ const showPagination = computed(() => {
         @apply-filter="emit('applyFilter', $event)"
         @clear-filters="emit('clearFilters')"
       />
-      <main class="flex-1 overflow-y-auto px-6">
-        <div class="w-full mx-auto max-w-5xl">
+      <main class="flex-1 overflow-y-auto">
+        <div class="w-full mx-auto max-w-[60rem]">
           <ContactsActiveFiltersPreview
             v-if="showActiveFiltersPreview"
             :active-segment="activeSegment"
@@ -114,12 +114,11 @@ const showPagination = computed(() => {
           />
         </div>
       </main>
-      <footer v-if="showPagination" class="sticky bottom-0 z-0">
+      <footer v-if="showPagination" class="sticky bottom-0 z-0 px-4 pb-4">
         <PaginationFooter
           current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
           :current-page="currentPage"
           :total-items="totalItems"
-          class="max-w-[67rem]"
           :items-per-page="itemsPerPage"
           @update:current-page="updateCurrentPage"
         />

app/javascript/dashboard/components-next/ConversationWorkflow/AttributeListItem.vue

@@ -1,10 +1,8 @@
 <script setup>
-import { computed } from 'vue';
-
 import Button from 'dashboard/components-next/button/Button.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Label from 'dashboard/components-next/label/Label.vue';
 import AttributeBadge from 'dashboard/components-next/CustomAttributes/AttributeBadge.vue';
+import { computed } from 'vue';
 
 const props = defineProps({
   attribute: {
@@ -20,7 +18,7 @@ const props = defineProps({
 const emit = defineEmits(['edit', 'delete']);
 
 const iconByType = {
-  text: 'i-lucide-menu',
+  text: 'i-lucide-align-justify',
   checkbox: 'i-lucide-circle-check-big',
   list: 'i-lucide-list',
   date: 'i-lucide-calendar',
@@ -30,66 +28,61 @@ const iconByType = {
 
 const attributeIcon = computed(() => {
   const typeKey = props.attribute.type?.toLowerCase();
-  return iconByType[typeKey] || 'i-lucide-menu';
+  return iconByType[typeKey] || 'i-lucide-align-justify';
 });
 </script>
 
 <template>
-  <div class="flex flex-col py-4 min-w-0">
-    <div class="flex justify-between flex-row items-center gap-4 min-w-0">
-      <div class="flex items-center gap-4 min-w-0">
-        <div
-          class="flex items-center flex-shrink-0 size-10 justify-center rounded-xl outline outline-1 outline-n-weak -outline-offset-1"
-        >
-          <Icon :icon="attributeIcon" class="size-4 text-n-slate-11" />
-        </div>
-        <div class="flex flex-col gap-1.5 items-start min-w-0 overflow-hidden">
-          <div class="flex items-center gap-2 min-w-0">
-            <h4 class="text-heading-3 truncate text-n-slate-12 min-w-0">
-              {{ attribute.label }}
-            </h4>
-            <div class="flex items-center gap-1.5">
-              <Label :label="attribute.type" compact />
-              <AttributeBadge
-                v-for="badge in badges"
-                :key="badge.type"
-                :type="badge.type"
-              />
-            </div>
+  <div
+    class="flex flex-col gap-2 p-4 bg-n-solid-1 rounded-2xl outline outline-1 outline-n-container"
+  >
+    <div class="flex flex-wrap gap-2 justify-between items-center">
+      <div class="flex flex-wrap gap-2 items-center min-w-0">
+        <h4 class="text-sm font-medium truncate text-n-slate-12">
+          {{ attribute.label }}
+        </h4>
+        <div class="w-px h-3 bg-n-strong" />
+        <div class="flex gap-2 items-center text-sm text-n-slate-11">
+          <div class="flex items-center gap-1.5 text-n-slate-11">
+            <Icon :icon="attributeIcon" class="size-4" />
+            <span class="text-sm">{{ attribute.type }}</span>
           </div>
-          <div class="grid grid-cols-[auto_1fr] items-center gap-1.5">
-            <Icon icon="i-lucide-key-round" class="size-3.5 text-n-slate-11" />
-            <div class="flex items-center gap-2 min-w-0">
-              <span class="text-body-main text-n-slate-11 truncate">
-                {{ attribute.value }}
-              </span>
-              <template
-                v-if="attribute.attribute_description || attribute.description"
-              >
-                <div class="w-px h-3 rounded-lg bg-n-weak flex-shrink-0" />
-                <span class="text-body-main text-n-slate-11 truncate">
-                  {{ attribute.attribute_description || attribute.description }}
-                </span>
-              </template>
-            </div>
+          <div class="w-px h-3 bg-n-weak" />
+          <div class="flex items-center gap-1.5 text-n-slate-11">
+            <Icon icon="i-lucide-key-round" class="size-4" />
+            <span class="line-clamp-1 text-sm">{{ attribute.value }}</span>
           </div>
         </div>
       </div>
-      <div class="flex gap-3 justify-end flex-shrink-0">
-        <Button
-          icon="i-woot-edit-pen"
-          slate
-          sm
-          @click="emit('edit', attribute)"
+      <div class="flex gap-2 items-center">
+        <AttributeBadge
+          v-for="badge in badges"
+          :key="badge.type"
+          :type="badge.type"
+        />
+        <div
+          v-if="badges.length > 0"
+          class="w-px h-3 bg-n-strong ltr:ml-1.5 rtl:mr-1.5"
         />
         <Button
-          icon="i-woot-bin"
-          slate
-          sm
-          class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
+          icon="i-lucide-pencil-line"
+          size="sm"
+          color="slate"
+          ghost
+          @click="emit('edit', attribute)"
+        />
+        <div class="w-px h-3 bg-n-strong" />
+        <Button
+          icon="i-lucide-trash"
+          size="sm"
+          color="slate"
+          ghost
           @click="emit('delete', attribute)"
         />
       </div>
     </div>
+    <p class="mb-0 text-sm text-n-slate-11">
+      {{ attribute.attribute_description || attribute.description || '' }}
+    </p>
   </div>
 </template>

app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue

@@ -35,20 +35,18 @@ const handleDelete = () => {
 <template>
   <div class="flex justify-between items-center px-4 py-3 w-full">
     <div class="flex gap-3 items-center">
-      <h5 class="text-heading-3 text-n-slate-12 line-clamp-1">
+      <h5 class="text-sm font-medium text-n-slate-12 line-clamp-1">
         {{ attribute.label }}
       </h5>
       <div class="w-px h-2.5 bg-n-slate-5" />
       <div class="flex gap-1.5 items-center">
         <Icon :icon="attributeIcon" class="size-4 text-n-slate-11" />
-        <span class="text-body-para text-n-slate-11">{{ attribute.type }}</span>
+        <span class="text-sm text-n-slate-11">{{ attribute.type }}</span>
       </div>
       <div class="w-px h-2.5 bg-n-slate-5" />
       <div class="flex gap-1.5 items-center">
         <Icon icon="i-lucide-key-round" class="size-4 text-n-slate-11" />
-        <span class="text-body-para text-n-slate-11">{{
-          attribute.value
-        }}</span>
+        <span class="text-sm text-n-slate-11">{{ attribute.value }}</span>
       </div>
     </div>
     <div class="flex gap-2 items-center">

app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue

@@ -129,10 +129,10 @@ const handleDelete = attribute => {
     <div class="flex flex-col gap-2 items-start px-5 py-4">
       <div class="flex justify-between items-center w-full">
         <div class="flex flex-col gap-2">
-          <h3 class="text-heading-2 text-n-slate-12">
+          <h3 class="text-base font-medium text-n-slate-12">
             {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.TITLE') }}
           </h3>
-          <p class="mb-0 text-body-para text-n-slate-11">
+          <p class="mb-0 text-sm text-n-slate-11">
             {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.DESCRIPTION') }}
           </p>
         </div>

app/javascript/dashboard/components-next/CustomAttributes/AttributeBadge.vue

@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Label from 'dashboard/components-next/label/Label.vue';
 
 const props = defineProps({
   type: {
@@ -19,13 +18,11 @@ const attributeConfig = {
     colorClass: 'text-n-blue-11',
     icon: 'i-lucide-message-circle',
     labelKey: 'ATTRIBUTES_MGMT.BADGES.PRE_CHAT',
-    color: 'slate',
   },
   resolution: {
     colorClass: 'text-n-teal-11',
     icon: 'i-lucide-circle-check-big',
     labelKey: 'ATTRIBUTES_MGMT.BADGES.RESOLUTION',
-    color: 'slate',
   },
 };
 const config = computed(
@@ -34,9 +31,12 @@ const config = computed(
 </script>
 
 <template>
-  <Label :label="t(config.labelKey)" :color="config.color" compact>
-    <template #icon>
-      <Icon :icon="config.icon" class="size-3.5 text-n-slate-12" />
-    </template>
-  </Label>
+  <div
+    class="flex gap-1 justify-center items-center px-1.5 py-1 rounded-md shadow outline-1 outline outline-n-container bg-n-solid-2"
+  >
+    <Icon :icon="config.icon" class="size-4" :class="config.colorClass" />
+    <span class="text-xs" :class="config.colorClass">{{
+      t(config.labelKey)
+    }}</span>
+  </div>
 </template>

app/javascript/dashboard/components-next/DatePicker/DatePicker.vue

@@ -1,181 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import {
-  startOfMonth,
-  addMonths,
-  subMonths,
-  startOfDay,
-  isSameDay,
-  addHours,
-  addYears,
-  subYears,
-  setMonth,
-  setYear,
-} from 'date-fns';
-import { CALENDAR_PERIODS } from './helpers/DatePickerHelper';
-import CalendarYear from './components/CalendarYear.vue';
-import CalendarMonth from './components/CalendarMonth.vue';
-import CalendarWeek from './components/CalendarWeek.vue';
-import CalendarFooter from './components/CalendarFooter.vue';
-import TimePicker from './components/TimePicker.vue';
-
-const props = defineProps({
-  minDate: {
-    type: Date,
-    default: null,
-  },
-});
-
-const emit = defineEmits(['apply', 'clear']);
-
-const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
-
-const currentDate = ref(new Date());
-const selectedDate = ref(null);
-
-const getCurrentTime = () => {
-  const now = new Date();
-  return {
-    hour: now.getHours(),
-    minute: now.getMinutes(),
-    second: now.getSeconds(),
-  };
-};
-
-const selectedTime = ref(getCurrentTime());
-const calendarView = ref(WEEK);
-const calendarDate = ref(startOfMonth(currentDate.value));
-
-const getMinTimeForToday = () => addHours(new Date(), 1);
-
-const effectiveMinDate = computed(() => {
-  const thresholdDay = startOfDay(getMinTimeForToday());
-  if (!props.minDate) return thresholdDay;
-  const propDay = startOfDay(props.minDate);
-  return propDay > thresholdDay ? propDay : thresholdDay;
-});
-
-const minTime = computed(() => {
-  if (!selectedDate.value) return null;
-  if (!isSameDay(selectedDate.value, effectiveMinDate.value)) return null;
-  return getMinTimeForToday();
-});
-
-const selectedDateTime = computed(() => {
-  if (!selectedDate.value) return null;
-  const date = new Date(selectedDate.value);
-  date.setHours(
-    selectedTime.value.hour,
-    selectedTime.value.minute,
-    selectedTime.value.second,
-    0
-  );
-  return date;
-});
-
-const selectDate = day => {
-  selectedDate.value = startOfDay(day);
-  if (isSameDay(day, effectiveMinDate.value)) {
-    const threshold = getMinTimeForToday();
-    selectedTime.value = {
-      hour: threshold.getHours(),
-      minute: threshold.getMinutes(),
-      second: 0,
-    };
-  } else {
-    selectedTime.value = { hour: 0, minute: 0, second: 0 };
-  }
-};
-
-const moveCalendar = (direction, period = MONTH) => {
-  const adjust =
-    period === YEAR
-      ? { prev: subYears, next: addYears }
-      : { prev: subMonths, next: addMonths };
-  calendarDate.value = adjust[direction](calendarDate.value, 1);
-};
-
-const setViewMode = (_type, mode) => {
-  calendarView.value = mode;
-};
-
-const openCalendar = (index, _type, period = MONTH) => {
-  calendarDate.value =
-    period === MONTH
-      ? setMonth(startOfMonth(calendarDate.value), index)
-      : setYear(calendarDate.value, index);
-  calendarView.value = period === MONTH ? WEEK : MONTH;
-};
-
-const onApply = () => {
-  if (selectedDateTime.value) {
-    emit('apply', selectedDateTime.value);
-  }
-};
-
-const isDefaultState = computed(
-  () => !selectedDate.value && calendarView.value === WEEK
-);
-
-const resetState = () => {
-  selectedDate.value = null;
-  selectedTime.value = getCurrentTime();
-  calendarDate.value = startOfMonth(currentDate.value);
-  calendarView.value = WEEK;
-};
-
-const onClear = () => {
-  if (isDefaultState.value) {
-    emit('clear');
-    return;
-  }
-  resetState();
-};
-
-defineExpose({ resetState });
-</script>
-
-<template>
-  <div class="flex flex-col select-none font-inter">
-    <div class="flex w-full gap-3 justify-between">
-      <div class="flex justify-center py-5">
-        <div class="flex flex-col items-center gap-2 min-w-[300px]">
-          <CalendarYear
-            v-if="calendarView === YEAR"
-            :start-current-date="calendarDate"
-            @select-year="openCalendar($event, null, YEAR)"
-          />
-          <CalendarMonth
-            v-else-if="calendarView === MONTH"
-            :start-current-date="calendarDate"
-            @select-month="openCalendar($event)"
-            @set-view="setViewMode"
-            @prev="moveCalendar('prev', YEAR)"
-            @next="moveCalendar('next', YEAR)"
-          />
-          <CalendarWeek
-            v-else
-            :current-date="currentDate"
-            :start-current-date="calendarDate"
-            :selected-start-date="selectedDate"
-            :selected-end-date="selectedDate"
-            :min-date="effectiveMinDate"
-            @select-date="selectDate"
-            @set-view="setViewMode"
-            @prev="moveCalendar('prev')"
-            @next="moveCalendar('next')"
-          />
-        </div>
-      </div>
-      <div
-        class="flex justify-center py-2 w-full transition-opacity ltr:border-l rtl:border-r border-n-strong"
-        :class="selectedDate ? 'opacity-100' : 'opacity-40 pointer-events-none'"
-      >
-        <TimePicker v-model="selectedTime" :min-time="minTime" />
-      </div>
-    </div>
-    <div class="border-t border-n-strong">
-      <CalendarFooter @change="onApply" @clear="onClear" />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/DatePicker/components/TimePicker.vue

@@ -1,430 +0,0 @@
-<script setup>
-import { ref, reactive, computed, watch, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import {
-  TIME_COLUMNS,
-  TIME_PERIODS,
-  TIME_FORMATS,
-} from '../helpers/DatePickerHelper';
-
-const props = defineProps({
-  minTime: { type: Date, default: null },
-});
-
-const model = defineModel({
-  type: Object,
-  default: () => ({ hour: 9, minute: 0, second: 0 }),
-});
-
-const { t } = useI18n();
-
-const { HOUR, HOUR_12, MINUTE, SECOND, PERIOD } = TIME_COLUMNS;
-const { AM, PM } = TIME_PERIODS;
-const { H24, H12 } = TIME_FORMATS;
-
-const ITEM_HEIGHT = 40;
-const CENTER_ROW = 2;
-const VISIBLE_ROWS = 5;
-const SNAP_DELAY = 120;
-const SEPARATOR = ':';
-
-const is24HourFormat = ref(false);
-const selectedTime = reactive({
-  hour: model.value.hour,
-  minute: model.value.minute,
-  second: model.value.second ?? 0,
-});
-const activeIndex = reactive({});
-const dragOffset = reactive({});
-const interactionMode = reactive({});
-const touchStartY = {};
-const snapTimers = {};
-const columnRefs = reactive({});
-const focusedColumn = ref(null);
-
-const period = computed(() => (selectedTime.hour >= 12 ? PM : AM));
-const showPeriod = computed(() => !is24HourFormat.value);
-
-const minBound = computed(() => {
-  if (!props.minTime) return null;
-  const d = props.minTime;
-  return { h: d.getHours(), m: d.getMinutes(), s: d.getSeconds() };
-});
-
-const toTimeNumber = (h, m, s) => h * 3600 + m * 60 + s;
-
-const convertTo12Hour = hour => {
-  if (hour === 0) return 12;
-  return hour > 12 ? hour - 12 : hour;
-};
-
-const convertTo24Hour = (hour12, timePeriod) => {
-  if (timePeriod === AM) return hour12 === 12 ? 0 : hour12;
-  return hour12 === 12 ? 12 : hour12 + 12;
-};
-
-const isItemDisabled = (key, val) => {
-  const mb = minBound.value;
-  if (!mb) return false;
-  const minVal = toTimeNumber(mb.h, mb.m, mb.s);
-  const { hour, minute } = selectedTime;
-  if (key === HOUR) return toTimeNumber(val, 0, 0) < toTimeNumber(mb.h, 0, 0);
-  if (key === MINUTE) return toTimeNumber(hour, val, 0) < minVal;
-  if (key === SECOND) return toTimeNumber(hour, minute, val) < minVal;
-  return false;
-};
-
-const formatLabel = value => String(value).padStart(2, '0');
-
-const buildItems = (count, key) =>
-  Array.from({ length: count }, (_, i) => ({
-    value: i,
-    label: formatLabel(i),
-    disabled: isItemDisabled(key, i),
-  }));
-
-const buildHour12Items = () =>
-  Array.from({ length: 12 }, (_, i) => {
-    const display = i === 0 ? 12 : i;
-    return {
-      value: display,
-      label: formatLabel(display),
-      disabled: isItemDisabled(HOUR, convertTo24Hour(display, period.value)),
-    };
-  });
-
-const periodItems = computed(() => [
-  { value: AM, label: AM, disabled: minBound.value?.h >= 12 },
-  { value: PM, label: PM, disabled: false },
-]);
-
-const columns = computed(() => [
-  {
-    key: is24HourFormat.value ? HOUR : HOUR_12,
-    label: t('DATE_PICKER.HOUR'),
-    items: is24HourFormat.value ? buildItems(24, HOUR) : buildHour12Items(),
-  },
-  {
-    key: MINUTE,
-    label: t('DATE_PICKER.MINUTE'),
-    items: buildItems(60, MINUTE),
-  },
-  {
-    key: SECOND,
-    label: t('DATE_PICKER.SECOND'),
-    items: buildItems(60, SECOND),
-  },
-  { key: PERIOD, label: '', items: periodItems.value },
-]);
-
-const findColumn = key => columns.value.find(c => c.key === key);
-
-const findNearestEnabled = (items, index) => {
-  for (let d = 0; d < items.length; d += 1) {
-    if (index + d < items.length && !items[index + d].disabled)
-      return index + d;
-    if (index - d >= 0 && !items[index - d].disabled) return index - d;
-  }
-  return index;
-};
-
-const getActiveIndex = key => {
-  if (key === HOUR) return selectedTime.hour;
-  if (key === HOUR_12) {
-    const h = convertTo12Hour(selectedTime.hour);
-    return h === 12 ? 0 : h;
-  }
-  if (key === PERIOD) return period.value === AM ? 0 : 1;
-  return selectedTime[key];
-};
-
-const getColumnTranslateY = key => {
-  const idx = -(activeIndex[key] ?? 0) * ITEM_HEIGHT;
-  return CENTER_ROW * ITEM_HEIGHT + idx + (dragOffset[key] ?? 0);
-};
-
-const getMaxDragOffset = key => {
-  const column = findColumn(key);
-  if (!column) return { maxDown: 0, maxUp: 0 };
-  const currentIdx = activeIndex[key] ?? 0;
-  const firstEnabled = column.items.findIndex(i => !i.disabled);
-  const lastEnabled = column.items.findLastIndex(i => !i.disabled);
-  if (firstEnabled === -1) return { maxDown: 0, maxUp: 0 };
-  return {
-    maxDown: (currentIdx - firstEnabled) * ITEM_HEIGHT,
-    maxUp: (lastEnabled - currentIdx) * ITEM_HEIGHT,
-  };
-};
-
-const clampDragOffset = (key, rawOffset) => {
-  const { maxDown, maxUp } = getMaxDragOffset(key);
-  return Math.max(-maxUp, Math.min(maxDown, rawOffset));
-};
-
-let lastEmittedSignature = '';
-const emitTimeValue = () => {
-  const sig = `${selectedTime.hour}:${selectedTime.minute}:${selectedTime.second}`;
-  if (sig === lastEmittedSignature) return;
-  lastEmittedSignature = sig;
-  model.value = { ...selectedTime };
-};
-
-const applySelection = (key, item) => {
-  if (key === HOUR_12) {
-    selectedTime.hour = convertTo24Hour(item.value, period.value);
-  } else if (key === PERIOD) {
-    selectedTime.hour = convertTo24Hour(
-      convertTo12Hour(selectedTime.hour),
-      item.value
-    );
-  } else {
-    selectedTime[key] = item.value;
-  }
-  emitTimeValue();
-};
-
-const selectIndex = (key, targetIndex) => {
-  const column = findColumn(key);
-  if (!column) return;
-  const clamped = Math.max(0, Math.min(targetIndex, column.items.length - 1));
-  const resolved = column.items[clamped]?.disabled
-    ? findNearestEnabled(column.items, clamped)
-    : clamped;
-  activeIndex[key] = resolved;
-  const item = column.items[resolved];
-  if (item) applySelection(key, item);
-};
-
-const selectByValue = (key, value) => {
-  const column = findColumn(key);
-  if (!column) return;
-  const idx = column.items.findIndex(i => i.value === value && !i.disabled);
-  if (idx !== -1) selectIndex(key, idx);
-};
-
-const snapToNearest = key => {
-  const offset = dragOffset[key] ?? 0;
-  const steps = Math.round(-offset / ITEM_HEIGHT);
-  dragOffset[key] = 0;
-  interactionMode[key] = null;
-  if (steps !== 0) selectIndex(key, (activeIndex[key] ?? 0) + steps);
-};
-
-const isItemSelected = (key, val) => {
-  if (key === HOUR_12) return convertTo12Hour(selectedTime.hour) === val;
-  if (key === PERIOD) return period.value === val;
-  return selectedTime[key] === val;
-};
-
-const isColumnHidden = key => key === PERIOD && !showPeriod.value;
-
-const onWheelScroll = (key, event) => {
-  event.preventDefault();
-  interactionMode[key] = 'wheel';
-  dragOffset[key] = clampDragOffset(key, (dragOffset[key] ?? 0) - event.deltaY);
-  clearTimeout(snapTimers[key]);
-  snapTimers[key] = setTimeout(() => snapToNearest(key), SNAP_DELAY);
-};
-
-const onTouchStart = (key, event) => {
-  interactionMode[key] = 'touch';
-  touchStartY[key] = event.touches[0].clientY;
-  dragOffset[key] = 0;
-};
-
-const onTouchMove = (key, event) => {
-  event.preventDefault();
-  dragOffset[key] = clampDragOffset(
-    key,
-    event.touches[0].clientY - touchStartY[key]
-  );
-};
-
-const onTouchEnd = key => snapToNearest(key);
-
-const visibleColumnKeys = computed(() =>
-  columns.value.filter(col => !isColumnHidden(col.key)).map(col => col.key)
-);
-
-const onKeyDown = (key, event) => {
-  const { key: pressed, shiftKey } = event;
-  if (pressed === 'ArrowUp' || pressed === 'ArrowDown') {
-    event.preventDefault();
-    selectIndex(
-      key,
-      (activeIndex[key] ?? 0) + (pressed === 'ArrowDown' ? 1 : -1)
-    );
-    return;
-  }
-  if (pressed === 'Tab') {
-    const keys = visibleColumnKeys.value;
-    const next = keys.indexOf(key) + (shiftKey ? -1 : 1);
-    if (next >= 0 && next < keys.length) {
-      event.preventDefault();
-      columnRefs[keys[next]]?.focus();
-    }
-  }
-};
-
-const syncAllColumns = () => {
-  columns.value.forEach(col => {
-    activeIndex[col.key] = getActiveIndex(col.key);
-  });
-};
-
-const formatTabs = [
-  { label: t('DATE_PICKER.FORMAT_24H'), value: H24 },
-  { label: t('DATE_PICKER.FORMAT_12H'), value: H12 },
-];
-const activeFormatTab = computed(() => (is24HourFormat.value ? 0 : 1));
-
-const onFormatChange = tab => {
-  is24HourFormat.value = tab.value === H24;
-  syncAllColumns();
-};
-
-watch(model, v => {
-  selectedTime.hour = v.hour;
-  selectedTime.minute = v.minute;
-  selectedTime.second = v.second ?? 0;
-  syncAllColumns();
-});
-
-onMounted(syncAllColumns);
-</script>
-
-<template>
-  <div class="relative flex flex-col items-center py-2 w-full">
-    <div class="mb-4">
-      <TabBar
-        :tabs="formatTabs"
-        :initial-active-tab="activeFormatTab"
-        @tab-changed="onFormatChange"
-      />
-    </div>
-    <div class="flex items-center z-[1] mb-1">
-      <template v-for="(col, colIdx) in columns" :key="`label-${col.key}`">
-        <span
-          class="text-center text-xs font-medium text-n-slate-11 transition-all duration-300 ease-in-out overflow-hidden"
-          :class="
-            isColumnHidden(col.key) ? 'w-0 opacity-0' : 'w-14 opacity-100'
-          "
-        >
-          {{ col.label }}
-        </span>
-        <span
-          v-if="colIdx < columns.length - 1"
-          class="text-lg font-520 text-transparent transition-all duration-300 ease-in-out overflow-hidden"
-          :class="
-            isColumnHidden(columns[colIdx + 1]?.key)
-              ? 'w-0 opacity-0'
-              : 'opacity-100'
-          "
-        >
-          {{ SEPARATOR }}
-        </span>
-      </template>
-    </div>
-    <div class="relative w-full">
-      <div
-        class="absolute inset-x-6 h-10 rounded-2xl bg-n-solid-active outline outline-1 -outline-offset-1 outline-n-weak pointer-events-none shadow-inner"
-        :style="{ top: `${CENTER_ROW * ITEM_HEIGHT}px` }"
-      />
-      <div class="flex items-center justify-center z-[1] relative">
-        <template v-for="(col, colIdx) in columns" :key="col.key">
-          <div
-            :ref="
-              el => {
-                if (el) columnRefs[col.key] = el;
-              }
-            "
-            :tabindex="isColumnHidden(col.key) ? -1 : 0"
-            class="time-wheel relative overflow-hidden transition-all duration-300 ease-in-out outline-none"
-            :class="
-              isColumnHidden(col.key) ? 'w-0 opacity-0' : 'w-14 opacity-100'
-            "
-            :style="{ height: `${VISIBLE_ROWS * ITEM_HEIGHT}px` }"
-            @wheel.prevent="onWheelScroll(col.key, $event)"
-            @touchstart="onTouchStart(col.key, $event)"
-            @touchmove.prevent="onTouchMove(col.key, $event)"
-            @touchend="onTouchEnd(col.key)"
-            @keydown="onKeyDown(col.key, $event)"
-            @focus="focusedColumn = col.key"
-            @blur="focusedColumn = null"
-          >
-            <div
-              class="flex flex-col items-center"
-              :class="{
-                'transition-transform duration-200 ease-out':
-                  !interactionMode[col.key],
-                'transition-transform duration-100 ease-out':
-                  interactionMode[col.key] === 'wheel',
-              }"
-              :style="{
-                transform: `translateY(${getColumnTranslateY(col.key)}px)`,
-              }"
-            >
-              <button
-                v-for="item in col.items"
-                :key="item.value"
-                :disabled="item.disabled"
-                tabindex="-1"
-                class="flex items-center justify-center w-14 shrink-0 text-base font-semibold transition-colors outline-none"
-                :style="{ height: `${ITEM_HEIGHT}px` }"
-                :class="[
-                  isItemSelected(col.key, item.value)
-                    ? 'text-n-slate-12'
-                    : 'text-n-slate-9',
-                  item.disabled
-                    ? 'opacity-20 cursor-not-allowed'
-                    : 'cursor-pointer',
-                  isItemSelected(col.key, item.value) &&
-                  focusedColumn === col.key
-                    ? 'outline outline-1 outline-n-brand -outline-offset-4 rounded-xl'
-                    : '',
-                ]"
-                @click="selectByValue(col.key, item.value)"
-              >
-                {{ item.label }}
-              </button>
-            </div>
-          </div>
-          <span
-            v-if="colIdx < columns.length - 1 && col.key !== SECOND"
-            class="text-lg font-520 text-n-slate-11"
-          >
-            {{ SEPARATOR }}
-          </span>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.time-wheel {
-  mask-image: linear-gradient(
-    to bottom,
-    transparent 0%,
-    rgba(0, 0, 0, 0.3) 15%,
-    rgba(0, 0, 0, 0.7) 30%,
-    black 40%,
-    black 60%,
-    rgba(0, 0, 0, 0.7) 70%,
-    rgba(0, 0, 0, 0.3) 85%,
-    transparent 100%
-  );
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    transparent 0%,
-    rgba(0, 0, 0, 0.3) 15%,
-    rgba(0, 0, 0, 0.7) 30%,
-    black 40%,
-    black 60%,
-    rgba(0, 0, 0, 0.7) 70%,
-    rgba(0, 0, 0, 0.3) 85%,
-    transparent 100%
-  );
-}
-</style>

app/javascript/dashboard/components-next/EmptyStateLayout.vue

@@ -26,7 +26,7 @@ defineProps({
     class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
   >
     <div
-      class="relative w-full max-w-5xl mx-auto overflow-hidden h-full max-h-[28rem]"
+      class="relative w-full max-w-[60rem] mx-auto overflow-hidden h-full max-h-[28rem]"
     >
       <div
         v-if="showBackdrop"

app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue

@@ -59,8 +59,8 @@ const togglePortalSwitcher = () => {
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
-    <header class="sticky top-0 z-10 px-6 pb-3">
-      <div class="w-full max-w-5xl mx-auto">
+    <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
+      <div class="w-full max-w-[60rem] mx-auto lg:px-6">
         <div
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
@@ -95,17 +95,16 @@ const togglePortalSwitcher = () => {
         <slot name="header-actions" />
       </div>
     </header>
-    <main class="flex-1 px-6 overflow-y-auto">
-      <div class="w-full max-w-5xl mx-auto py-3">
+    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
+      <div class="w-full max-w-[60rem] mx-auto py-3 lg:px-6">
         <slot name="content" />
       </div>
     </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
       <PaginationFooter
         :current-page="currentPage"
         :total-items="totalItems"
         :items-per-page="itemsPerPage"
-        class="max-w-[67rem]"
         @update:current-page="updateCurrentPage"
       />
     </footer>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue

@@ -62,7 +62,6 @@ const onCreate = async () => {
       from: route.name,
     });
 
-    selectedLocale.value = '';
     dialogRef.value?.close();
     useAlert(
       t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.SUCCESS_MESSAGE')

app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import { useWindowSize } from '@vueuse/core';
@@ -59,23 +59,6 @@ const isFetchingInboxes = ref(false);
 const isSearching = ref(false);
 const showComposeNewConversation = ref(false);
 
-const formState = reactive({
-  message: '',
-  subject: '',
-  ccEmails: '',
-  bccEmails: '',
-  attachedFiles: [],
-});
-
-const clearFormState = () => {
-  Object.assign(formState, {
-    subject: '',
-    ccEmails: '',
-    bccEmails: '',
-    attachedFiles: [],
-  });
-};
-
 const contactById = useMapGetter('contacts/getContactById');
 const contactsUiFlags = useMapGetter('contacts/getUIFlags');
 const currentUser = useMapGetter('getCurrentUser');
@@ -157,14 +140,12 @@ const handleSelectedContact = async ({ value, action, ...rest }) => {
 
 const handleTargetInbox = inbox => {
   targetInbox.value = inbox;
-  if (!inbox) clearFormState();
   resetContacts();
 };
 
 const clearSelectedContact = () => {
   selectedContact.value = null;
   targetInbox.value = null;
-  clearFormState();
 };
 
 const closeCompose = () => {
@@ -179,12 +160,6 @@ const closeCompose = () => {
   emit('close');
 };
 
-const discardCompose = () => {
-  clearFormState();
-  formState.message = '';
-  closeCompose();
-};
-
 const createConversation = async ({ payload, isFromWhatsApp }) => {
   try {
     const data = await store.dispatch('contactConversations/create', {
@@ -196,7 +171,7 @@ const createConversation = async ({ payload, isFromWhatsApp }) => {
       to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
       message: t('COMPOSE_NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
     };
-    discardCompose();
+    closeCompose();
     useAlert(t('COMPOSE_NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
     return true; // Return success
   } catch (error) {
@@ -218,11 +193,7 @@ watch(
   (currentContact, previousContact) => {
     if (currentContact && props.contactId) {
       // Reset on contact change
-      if (currentContact?.id !== previousContact?.id) {
-        clearSelectedContact();
-        clearFormState();
-        formState.message = '';
-      }
+      if (currentContact?.id !== previousContact?.id) clearSelectedContact();
 
       // First process the contactable inboxes to get the right structure
       const processedInboxes = processContactableInboxes(
@@ -294,7 +265,6 @@ useKeyboardEvents(keyboardEvents);
       @click.self="onModalBackdropClick"
     >
       <ComposeNewConversationForm
-        :form-state="formState"
         :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
         :contacts="contacts"
         :contact-id="contactId"
@@ -315,7 +285,7 @@ useKeyboardEvents(keyboardEvents);
         @update-target-inbox="handleTargetInbox"
         @clear-selected-contact="clearSelectedContact"
         @create-conversation="createConversation"
-        @discard="discardCompose"
+        @discard="closeCompose"
       />
     </div>
   </div>

app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { reactive, ref, computed } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
@@ -37,7 +37,6 @@ const props = defineProps({
   contactsUiFlags: { type: Object, default: null },
   messageSignature: { type: String, default: '' },
   sendWithSignature: { type: Boolean, default: false },
-  formState: { type: Object, required: true },
 });
 
 const emit = defineEmits([
@@ -58,13 +57,13 @@ const showBccEmailsDropdown = ref(false);
 
 const isCreating = computed(() => props.contactConversationsUiFlags.isCreating);
 
-const state = props.formState || {
+const state = reactive({
   message: '',
   subject: '',
   ccEmails: '',
   bccEmails: '',
   attachedFiles: [],
-};
+});
 
 const inboxTypes = computed(() => ({
   isEmail: props.targetInbox?.channelType === INBOX_TYPES.EMAIL,
@@ -158,7 +157,21 @@ const isAnyDropdownActive = computed(() => {
 
 const handleContactSearch = value => {
   showContactsDropdown.value = true;
-  emit('searchContacts', value);
+  const query = typeof value === 'string' ? value.trim() : '';
+  const hasAlphabet = Array.from(query).some(char => {
+    const lower = char.toLowerCase();
+    const upper = char.toUpperCase();
+    return lower !== upper;
+  });
+  const isEmailLike = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(query);
+
+  const keys = ['email', 'phone_number', 'name'].filter(key => {
+    if (key === 'phone_number' && hasAlphabet) return false;
+    if (key === 'name' && isEmailLike) return false;
+    return true;
+  });
+
+  emit('searchContacts', { keys, query: value });
 };
 
 const handleDropdownUpdate = (type, value) => {
@@ -173,12 +186,12 @@ const handleDropdownUpdate = (type, value) => {
 
 const searchCcEmails = value => {
   showCcEmailsDropdown.value = true;
-  emit('searchContacts', value);
+  emit('searchContacts', { keys: ['email'], query: value });
 };
 
 const searchBccEmails = value => {
   showBccEmailsDropdown.value = true;
-  emit('searchContacts', value);
+  emit('searchContacts', { keys: ['email'], query: value });
 };
 
 const setSelectedContact = async ({ value, action, ...rest }) => {

app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue

@@ -44,16 +44,14 @@ const bccEmailsArray = computed(() =>
 );
 
 const contactEmailsList = computed(() => {
-  return props.contacts
-    ?.filter(contact => contact.email)
-    .map(({ name, id, email }) => ({
-      id,
-      label: email,
-      email,
-      thumbnail: { name: name, src: '' },
-      value: id,
-      action: 'email',
-    }));
+  return props.contacts?.map(({ name, id, email }) => ({
+    id,
+    label: email,
+    email,
+    thumbnail: { name: name, src: '' },
+    value: id,
+    action: 'email',
+  }));
 });
 
 // Handle updates from TagInput and convert array back to string
@@ -97,7 +95,6 @@ const inputClass = computed(() => {
           :show-dropdown="showCcEmailsDropdown"
           :is-loading="isLoading"
           type="email"
-          allow-create
           class="flex-1 min-h-7"
           @focus="emit('updateDropdown', 'cc', true)"
           @input="emit('searchCcEmails', $event)"
@@ -130,7 +127,6 @@ const inputClass = computed(() => {
         :show-dropdown="showBccEmailsDropdown"
         :is-loading="isLoading"
         type="email"
-        allow-create
         class="flex-1 min-h-7"
         focus-on-mount
         @focus="emit('updateDropdown', 'bcc', true)"

app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js

@@ -176,14 +176,32 @@ export const prepareWhatsAppMessagePayload = ({
   };
 };
 
-// API Calls
-export const searchContacts = async query => {
-  const trimmed = typeof query === 'string' ? query.trim() : '';
-  if (!trimmed) return [];
+export const generateContactQuery = ({ keys = ['email'], query }) => {
+  return {
+    payload: keys.map(key => {
+      const filterPayload = {
+        attribute_key: key,
+        filter_operator: 'contains',
+        values: [query],
+        attribute_model: 'standard',
+      };
+      if (keys.findIndex(k => k === key) !== keys.length - 1) {
+        filterPayload.query_operator = 'or';
+      }
+      return filterPayload;
+    }),
+  };
+};
 
+// API Calls
+export const searchContacts = async ({ keys, query }) => {
   const {
     data: { payload },
-  } = await ContactAPI.search(trimmed);
+  } = await ContactAPI.filter(
+    undefined,
+    'name',
+    generateContactQuery({ keys, query })
+  );
   const camelCasedPayload = camelcaseKeys(payload, { deep: true });
   // Filter contacts that have either phone_number or email
   const filteredPayload = camelCasedPayload?.filter(

app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js

@@ -70,7 +70,7 @@ describe('composeConversationHelper', () => {
       const result = helpers.buildContactableInboxesList(inboxes);
       expect(result[0]).toMatchObject({
         id: 1,
-        icon: 'i-woot-mail',
+        icon: 'i-ri-mail-line',
         label: 'Email Inbox (support@example.com)',
         action: 'inbox',
         value: 1,
@@ -336,6 +336,70 @@ describe('composeConversationHelper', () => {
     });
   });
 
+  describe('generateContactQuery', () => {
+    it('generates correct query structure for contact search', () => {
+      const query = 'test@example.com';
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: [query],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(helpers.generateContactQuery({ keys: ['email'], query })).toEqual(
+        expected
+      );
+    });
+
+    it('handles empty query', () => {
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: [''],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(
+        helpers.generateContactQuery({ keys: ['email'], query: '' })
+      ).toEqual(expected);
+    });
+
+    it('handles mutliple keys', () => {
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: ['john'],
+            attribute_model: 'standard',
+            query_operator: 'or',
+          },
+          {
+            attribute_key: 'phone_number',
+            filter_operator: 'contains',
+            values: ['john'],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(
+        helpers.generateContactQuery({
+          keys: ['email', 'phone_number'],
+          query: 'john',
+        })
+      ).toEqual(expected);
+    });
+  });
+
   describe('API calls', () => {
     describe('searchContacts', () => {
       it('searches contacts and returns camelCase results', async () => {
@@ -349,11 +413,14 @@ describe('composeConversationHelper', () => {
           },
         ];
 
-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
           data: { payload: mockPayload },
         });
 
-        const result = await helpers.searchContacts('john');
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
 
         expect(result).toEqual([
           {
@@ -365,7 +432,16 @@ describe('composeConversationHelper', () => {
           },
         ]);
 
-        expect(ContactAPI.search).toHaveBeenCalledWith('john');
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
       });
 
       it('searches contacts and returns only contacts with email or phone number', async () => {
@@ -393,11 +469,14 @@ describe('composeConversationHelper', () => {
           },
         ];
 
-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
           data: { payload: mockPayload },
         });
 
-        const result = await helpers.searchContacts('john');
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
 
         // Should only return contacts with either email or phone number
         expect(result).toEqual([
@@ -417,11 +496,20 @@ describe('composeConversationHelper', () => {
           },
         ]);
 
-        expect(ContactAPI.search).toHaveBeenCalledWith('john');
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
       });
 
       it('handles empty search results', async () => {
-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
           data: { payload: [] },
         });
 
@@ -448,7 +536,7 @@ describe('composeConversationHelper', () => {
           },
         ];
 
-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
           data: { payload: mockPayload },
         });
 

app/javascript/dashboard/components-next/Settings/SettingsAccordion.vue

@@ -1,31 +0,0 @@
-<script setup>
-import { useToggle } from '@vueuse/core';
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  defaultOpen: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const [isOpen, toggle] = useToggle(props.defaultOpen);
-</script>
-
-<template>
-  <div
-    v-bind="$attrs"
-    class="flex items-center justify-between w-full cursor-pointer pb-2 pt-4 border-t border-n-weak"
-    @click="toggle()"
-  >
-    <span class="text-heading-2 text-n-slate-12 w-full">
-      {{ title }}
-    </span>
-  </div>
-  <div v-if="isOpen" class="w-full space-y-4 pt-4 mb-4">
-    <slot />
-  </div>
-</template>

app/javascript/dashboard/components-next/Settings/SettingsFieldSection.vue

@@ -1,37 +0,0 @@
-<script setup>
-defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-  helpText: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <div class="w-full py-2 mb-2 [interpolate-size:allow-keywords]">
-    <div
-      class="grid grid-cols-1 lg:grid-cols-8 gap-1.5 lg:gap-4 items-start lg:items-center"
-    >
-      <label class="text-heading-3 text-n-slate-12 col-span-1 lg:col-span-2">
-        {{ label }}
-      </label>
-      <div class="col-span-1 lg:col-span-6">
-        <slot />
-      </div>
-    </div>
-    <div v-if="helpText" class="grid grid-cols-1 lg:grid-cols-8">
-      <div class="col-span-1 lg:col-span-2 invisible" />
-      <p
-        v-if="helpText"
-        class="mt-1.5 col-span-1 lg:col-span-6 text-label-small text-n-slate-11 ltr:ml-1 rtl:mr-1"
-      >
-        {{ helpText }}
-      </p>
-    </div>
-    <slot name="extra" />
-  </div>
-</template>

app/javascript/dashboard/components-next/Settings/SettingsToggleSection.vue

@@ -1,45 +0,0 @@
-<script setup>
-import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
-
-defineProps({
-  header: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  compact: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const modelValue = defineModel({ type: Boolean, default: false });
-</script>
-
-<template>
-  <div
-    class="flex flex-col items-start outline outline-1 -outline-offset-1 outline-n-weak rounded-xl [interpolate-size:allow-keywords]"
-  >
-    <div class="flex flex-col gap-1 items-start w-full px-4 py-3">
-      <div class="flex items-center gap-3 w-full justify-between">
-        <span class="text-heading-3 text-n-slate-12">
-          {{ header }}
-        </span>
-        <ToggleSwitch v-model="modelValue" />
-      </div>
-      <span v-if="description" class="text-body-main text-n-slate-11">
-        {{ description }}
-      </span>
-    </div>
-    <div
-      v-if="$slots.editor"
-      class="w-full border-t border-n-weak"
-      :class="{ 'p-0': compact, 'px-4 pb-4 pt-2': !compact }"
-    >
-      <slot name="editor" />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -112,19 +112,6 @@ const containerStyles = computed(() => ({
   height: `${props.size}px`,
 }));
 
-const borderRadiusClass = computed(() => {
-  if (props.roundedFull) {
-    return 'rounded-full';
-  }
-
-  // Approximates 25% of size
-  if (props.size <= 16) return 'rounded'; // 4px
-  if (props.size <= 24) return 'rounded-md'; // 6px
-  if (props.size <= 32) return 'rounded-lg'; // 8px
-  if (props.size <= 48) return 'rounded-xl'; // 12px
-  return 'rounded-2xl'; // 16px
-});
-
 const avatarStyles = computed(() => ({
   ...containerStyles.value,
   backgroundColor:
@@ -197,7 +184,7 @@ watch(
 
 <template>
   <span
-    class="relative inline-flex group/avatar z-0 flex-shrink-0 align-middle"
+    class="relative inline-flex group/avatar z-0 flex-shrink-0"
     :style="containerStyles"
   >
     <!-- Status Badge -->
@@ -229,9 +216,9 @@ watch(
     <!-- Avatar Container -->
     <span
       role="img"
-      class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium outline outline-1 -outline-offset-1 outline-[rgb(0_0_0_/_0.03)] dark:outline-[rgb(255_255_255_/_0.04)]"
+      class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium"
       :class="[
-        borderRadiusClass,
+        roundedFull ? 'rounded-full' : 'rounded-xl',
         {
           'dark:!bg-[var(--dark-bg)] dark:!text-[var(--dark-text)]':
             !showDefaultAvatar && (!src || !isImageValid),
@@ -280,8 +267,7 @@ watch(
         :handle-image-upload="handleImageUpload"
       >
         <div
-          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
-          :class="borderRadiusClass"
+          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
           @click="handleUploadAvatar"
         >
           <Icon

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -117,7 +117,7 @@ const handleCreateAssistant = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
     <header class="sticky top-0 z-10 px-6">
-      <div class="w-full max-w-5xl mx-auto">
+      <div class="w-full max-w-[60rem] mx-auto">
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
         >
@@ -140,9 +140,7 @@ const handleCreateAssistant = () => {
                   >
                     <Button
                       icon="i-lucide-chevron-down"
-                      :variant="
-                        showAssistantSwitcherDropdown ? 'faded' : 'ghost'
-                      "
+                      variant="ghost"
                       color="slate"
                       size="xs"
                       :disabled="isFetchingAssistants"
@@ -206,7 +204,7 @@ const handleCreateAssistant = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto">
-      <div class="w-full max-w-5xl h-full mx-auto py-4">
+      <div class="w-full max-w-[60rem] h-full mx-auto py-4">
         <slot v-if="!showPaywall" name="controls" />
         <div
           v-if="isFetching"
@@ -224,12 +222,11 @@ const handleCreateAssistant = () => {
         <slot />
       </div>
     </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
       <PaginationFooter
         :current-page="currentPage"
         :total-items="totalCount"
         :items-per-page="itemsPerPage"
-        class="max-w-[67rem]"
         @update:current-page="handlePageChange"
       />
     </footer>

app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue

@@ -27,7 +27,7 @@ const openBilling = () => {
 
 <template>
   <div
-    class="w-full max-w-5xl mx-auto h-full max-h-[448px] grid place-content-center"
+    class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
   >
     <BasePaywallModal
       class="mx-auto"

app/javascript/dashboard/components-next/combobox/ComboBox.vue

@@ -56,13 +56,8 @@ const selectedLabel = computed(() => {
 });
 
 const selectOption = option => {
-  if (selectedValue.value === option.value) {
-    selectedValue.value = '';
-    emit('update:modelValue', '');
-  } else {
-    selectedValue.value = option.value;
-    emit('update:modelValue', option.value);
-  }
+  selectedValue.value = option.value;
+  emit('update:modelValue', option.value);
   open.value = false;
   search.value = '';
 };

app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue

@@ -79,8 +79,8 @@ defineExpose({
       :aria-multiselectable="multiple"
     >
       <li
-        v-for="(option, index) in options"
-        :key="`${option.value}-${index}`"
+        v-for="option in options"
+        :key="option.value"
         class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-alpha-2"
         :class="{
           'bg-n-alpha-2': isSelected(option),

app/javascript/dashboard/components-next/dialog/Dialog.vue

@@ -53,11 +53,6 @@ const props = defineProps({
     default: 'lg',
     validator: value => ['3xl', '2xl', 'xl', 'lg', 'md', 'sm'].includes(value),
   },
-  position: {
-    type: String,
-    default: 'center',
-    validator: value => ['center', 'top'].includes(value),
-  },
 });
 
 const emit = defineEmits(['confirm', 'close']);
@@ -66,7 +61,6 @@ const { t } = useI18n();
 
 const dialogRef = ref(null);
 const dialogContentRef = ref(null);
-const isOpen = ref(false);
 
 const maxWidthClass = computed(() => {
   const classesMap = {
@@ -81,19 +75,13 @@ const maxWidthClass = computed(() => {
   return classesMap[props.width] ?? 'max-w-md';
 });
 
-const positionClass = computed(() =>
-  props.position === 'top' ? 'dialog-position-top' : ''
-);
-
 const open = () => {
-  isOpen.value = true;
   dialogRef.value?.showModal();
 };
 
 const close = () => {
   emit('close');
   dialogRef.value?.close();
-  isOpen.value = false;
 };
 
 const confirm = () => {
@@ -107,10 +95,9 @@ defineExpose({ open, close });
   <TeleportWithDirection to="body">
     <dialog
       ref="dialogRef"
-      class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl focus-within:outline-none focus-within:outline-0"
+      class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
       :class="[
         maxWidthClass,
-        positionClass,
         overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
       ]"
       @close="close"
@@ -118,7 +105,7 @@ defineExpose({ open, close });
       <OnClickOutside @trigger="close">
         <form
           ref="dialogContentRef"
-          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-start align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
           @submit.prevent="confirm"
           @click.stop
         >
@@ -132,7 +119,7 @@ defineExpose({ open, close });
               </p>
             </slot>
           </div>
-          <slot v-if="isOpen" />
+          <slot />
           <!-- Dialog content will be injected here -->
           <slot name="footer">
             <div
@@ -169,9 +156,4 @@ defineExpose({ open, close });
 dialog::backdrop {
   @apply bg-n-alpha-black1 backdrop-blur-[4px];
 }
-
-.dialog-position-top {
-  margin-top: clamp(2rem, 5vh, 5rem);
-  margin-bottom: auto;
-}
 </style>

app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue

@@ -4,10 +4,6 @@ defineProps({
     type: String,
     default: '',
   },
-  height: {
-    type: String,
-    default: 'max-h-96',
-  },
 });
 </script>
 
@@ -19,10 +15,7 @@ defineProps({
     >
       {{ title }}
     </div>
-    <ul
-      class="gap-2 grid reset-base list-none px-2 overflow-y-auto"
-      :class="height"
-    >
+    <ul class="gap-2 grid reset-base list-none px-2 max-h-96 overflow-y-auto">
       <slot />
     </ul>
   </div>

app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue

@@ -50,7 +50,7 @@ const openLink = link => {
       ]"
     >
       <section
-        class="absolute top-full mt-6 ltr:left-0 rtl:right-0 outline outline-1 outline-n-weak bg-n-alpha-3 backdrop-blur-[100px] rounded-xl p-4 w-80 z-20"
+        class="absolute top-full mt-6 ltr:left-0 rtl:right-0 outline outline-1 outline-n-weak bg-n-alpha-3 backdrop-blur-[100px] rounded-xl p-4 w-80"
       >
         <div
           class="absolute -top-[0.77rem] ltr:left-12 rtl:right-12 w-6 h-6 ltr:rotate-45 rtl:-rotate-45 rtl:rounded-tr ltr:rounded-tl rtl:border-r ltr:border-l border-t border-n-weak bg-n-alpha-3 z-10"

app/javascript/dashboard/components-next/filter/ConditionRow.vue

@@ -50,12 +50,12 @@ const currentFilter = computed(() =>
 );
 
 const getOperator = (filter, selectedOperator) => {
-  const operatorFromOptions = filter?.filterOperators?.find(
+  const operatorFromOptions = filter.filterOperators.find(
     operator => operator.value === selectedOperator
   );
 
   if (!operatorFromOptions) {
-    return filter?.filterOperators?.[0];
+    return filter.filterOperators[0];
   }
 
   return operatorFromOptions;
@@ -138,11 +138,7 @@ const validate = () => {
   return !validationError.value;
 };
 
-const resetValidation = () => {
-  showErrors.value = false;
-};
-
-defineExpose({ validate, resetValidation });
+defineExpose({ validate });
 </script>
 
 <template>
@@ -170,20 +166,18 @@ defineExpose({ validate, resetValidation });
       <FilterSelect
         v-model="filterOperator"
         variant="ghost"
-        :options="currentFilter?.filterOperators"
+        :options="currentFilter.filterOperators"
       />
-      <template v-if="currentOperator?.hasInput">
+      <template v-if="currentOperator.hasInput">
         <MultiSelect
           v-if="inputType === 'multiSelect'"
           v-model="values"
           :options="currentFilter.options"
-          dropdown-max-height="max-h-72"
         />
         <SingleSelect
           v-else-if="inputType === 'searchSelect'"
           v-model="values"
           :options="currentFilter.options"
-          dropdown-max-height="max-h-64"
         />
         <SingleSelect
           v-else-if="inputType === 'booleanSelect'"

app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue

@@ -45,7 +45,7 @@ const { height } = useWindowSize();
 const { height: dropdownHeight } = useElementBounding(dropdownRef);
 
 const selectedOption = computed(() => {
-  return props.options?.find(o => o.value === selected.value) || {};
+  return props.options.find(o => o.value === selected.value) || {};
 });
 
 const iconToRender = computed(() => {
@@ -87,25 +87,18 @@ const updateSelected = newValue => {
     </template>
     <DropdownBody
       ref="dropdownRef"
-      class="min-w-56 z-50"
+      class="min-w-48 z-50"
       :class="dropdownPosition"
       strong
     >
-      <DropdownSection class="[&>ul]:max-h-72">
-        <template v-for="option in options" :key="option.value">
-          <li
-            v-if="option.disabled"
-            class="px-2 py-1.5 text-xs font-medium text-n-slate-10 select-none"
-          >
-            {{ option.label }}
-          </li>
-          <DropdownItem
-            v-else
-            :label="option.label"
-            :icon="option.icon"
-            @click="updateSelected(option.value)"
-          />
-        </template>
+      <DropdownSection class="[&>ul]:max-h-80">
+        <DropdownItem
+          v-for="option in options"
+          :key="option.value"
+          :label="option.label"
+          :icon="option.icon"
+          @click="updateSelected(option.value)"
+        />
       </DropdownSection>
     </DropdownBody>
   </DropdownContainer>

app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue

@@ -8,7 +8,7 @@ import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 
-const { options, maxChips, dropdownMaxHeight } = defineProps({
+const { options, maxChips } = defineProps({
   options: {
     type: Array,
     required: true,
@@ -17,10 +17,6 @@ const { options, maxChips, dropdownMaxHeight } = defineProps({
     type: Number,
     default: 3,
   },
-  dropdownMaxHeight: {
-    type: String,
-    default: 'max-h-80',
-  },
 });
 
 const { t } = useI18n();
@@ -127,7 +123,7 @@ const toggleOption = option => {
       </Button>
     </template>
     <DropdownBody class="top-0 min-w-48 z-50" strong>
-      <DropdownSection :height="dropdownMaxHeight">
+      <DropdownSection class="[&>ul]:max-h-80">
         <DropdownItem
           v-for="option in options"
           :key="option.id"

app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue

@@ -12,12 +12,10 @@ import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 const {
   options,
   disableSearch,
-  disableDeselect,
   placeholderIcon,
   placeholder,
   placeholderTrailingIcon,
   searchPlaceholder,
-  dropdownMaxHeight,
 } = defineProps({
   options: {
     type: Array,
@@ -43,14 +41,6 @@ const {
     type: String,
     default: '',
   },
-  dropdownMaxHeight: {
-    type: String,
-    default: 'max-h-80',
-  },
-  disableDeselect: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const { t } = useI18n();
@@ -73,8 +63,6 @@ const selectedItem = computed(() => {
   const optionToSearch = Array.isArray(selected.value)
     ? selected.value[0]
     : selected.value;
-
-  if (!optionToSearch) return null;
   // extract the selected item from the options array
   // this ensures that options like icon is also included
   return options.find(option => option.id === optionToSearch.id);
@@ -89,7 +77,7 @@ const toggleSelected = option => {
   };
 
   if (selected.value && selected.value.id === optionToToggle.id) {
-    if (!disableDeselect) selected.value = null;
+    selected.value = null;
   } else {
     selected.value = optionToToggle;
   }
@@ -136,7 +124,7 @@ const toggleSelected = option => {
           :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
         />
       </div>
-      <DropdownSection :height="dropdownMaxHeight">
+      <DropdownSection class="[&>ul]:max-h-80">
         <template v-if="searchResults.length">
           <DropdownItem
             v-for="option in searchResults"

app/javascript/dashboard/components-next/icon/provider.js

@@ -9,12 +9,12 @@ export function useChannelIcon(inbox) {
     'Channel::Sms': 'i-woot-sms',
     'Channel::Telegram': 'i-woot-telegram',
     'Channel::TwilioSms': 'i-woot-sms',
-    'Channel::TwitterProfile': 'i-woot-x',
+    'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
     'Channel::WebWidget': 'i-woot-website',
     'Channel::Whatsapp': 'i-woot-whatsapp',
     'Channel::Instagram': 'i-woot-instagram',
     'Channel::Tiktok': 'i-woot-tiktok',
-    'Channel::Voice': 'i-woot-voice',
+    'Channel::Voice': 'i-ri-phone-fill',
   };
 
   const providerIconMap = {

app/javascript/dashboard/components-next/icon/specs/provider.spec.js

@@ -22,7 +22,7 @@ describe('useChannelIcon', () => {
   it('returns correct icon for Voice channel', () => {
     const inbox = { channel_type: 'Channel::Voice' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-voice');
+    expect(icon).toBe('i-ri-phone-fill');
   });
 
   it('returns correct icon for Line channel', () => {
@@ -46,7 +46,7 @@ describe('useChannelIcon', () => {
   it('returns correct icon for Twitter channel', () => {
     const inbox = { channel_type: 'Channel::TwitterProfile' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-x');
+    expect(icon).toBe('i-ri-twitter-x-fill');
   });
 
   it('returns correct icon for WebWidget channel', () => {

app/javascript/dashboard/components-next/input/Input.vue

@@ -108,7 +108,7 @@ onMounted(() => {
     <label
       v-if="label"
       :for="uniqueId"
-      class="mb-0.5 text-heading-3 text-n-slate-12"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
     >
       {{ label }}
     </label>
@@ -145,7 +145,7 @@ onMounted(() => {
     />
     <p
       v-if="message"
-      class="min-w-0 mt-1 mb-0 text-label-small truncate transition-all duration-500 ease-in-out"
+      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
       :class="messageClass"
     >
       {{ message }}

app/javascript/dashboard/components-next/label/Label.vue

@@ -1,71 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  label: {
-    type: [Object, String],
-    required: true,
-  },
-  compact: {
-    type: Boolean,
-    default: false,
-  },
-  color: {
-    type: String,
-    default: 'slate',
-    validator: value =>
-      ['slate', 'amber', 'teal', 'ruby', 'blue', 'iris'].includes(value),
-  },
-});
-
-const COLOR_CLASSES = {
-  slate: 'bg-n-label-color outline-n-label-border text-n-slate-12',
-  amber: 'bg-n-amber-2 outline-n-amber-4 text-n-amber-11',
-  teal: 'bg-n-teal-2 outline-n-teal-4 text-n-teal-11',
-  ruby: 'bg-n-ruby-2 outline-n-ruby-4 text-n-ruby-11',
-  blue: 'bg-n-blue-2 outline-n-blue-4 text-n-blue-11',
-  iris: 'bg-n-iris-2 outline-n-iris-4 text-n-iris-11',
-};
-
-const isStringLabel = computed(() => typeof props.label === 'string');
-
-const labelTitle = computed(() => {
-  return isStringLabel.value ? props.label : props.label?.title;
-});
-
-const labelDescription = computed(() => {
-  return (!isStringLabel.value && props.label?.description) || '';
-});
-
-const labelColor = computed(() => {
-  return isStringLabel.value ? null : props.label.color;
-});
-
-const colorClasses = computed(() => COLOR_CLASSES[props.color]);
-</script>
-
-<template>
-  <div
-    :title="labelDescription"
-    class="rounded-lg -outline-offset-1 outline outline-1 inline-flex items-center flex-shrink-0"
-    :class="[
-      colorClasses,
-      compact ? 'px-1.5 h-6 gap-1 rounded-md' : 'px-2.5 h-8 gap-1.5 rounded-lg',
-    ]"
-  >
-    <span
-      v-if="labelColor"
-      class="rounded-sm flex-shrink-0"
-      :class="compact ? 'size-1.5' : 'size-2'"
-      :style="{ background: labelColor }"
-    />
-    <slot v-else name="icon" />
-    <span
-      class="whitespace-nowrap"
-      :class="compact ? 'text-label-small' : 'text-label !font-420'"
-    >
-      {{ labelTitle }}
-    </span>
-    <slot name="action" />
-  </div>
-</template>

app/javascript/dashboard/components-next/message/Message.vue

@@ -43,7 +43,6 @@ import VoiceCallBubble from './bubbles/VoiceCall.vue';
 
 import MessageError from './MessageError.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
-import { useBranding } from 'shared/composables/useBranding';
 
 /**
  * @typedef {Object} Attachment
@@ -129,7 +128,6 @@ const props = defineProps({
   inReplyTo: { type: Object, default: null }, // eslint-disable-line vue/no-unused-properties
   isEmailInbox: { type: Boolean, default: false },
   private: { type: Boolean, default: false },
-  additionalAttributes: { type: Object, default: () => ({}) }, // eslint-disable-line vue/no-unused-properties
   sender: { type: Object, default: null },
   senderId: { type: Number, default: null },
   senderType: { type: String, default: null },
@@ -145,7 +143,6 @@ const { t } = useI18n();
 const route = useRoute();
 const inboxGetter = useMapGetter('inboxes/getInbox');
 const inbox = computed(() => inboxGetter.value(props.inboxId) || {});
-const { replaceInstallationName } = useBranding();
 
 /**
  * Computes the message variant based on props
@@ -173,10 +170,7 @@ const variant = computed(() => {
     return MESSAGE_VARIANTS.AGENT;
   }
 
-  const isBot =
-    props.sender?.type === SENDER_TYPES.AGENT_BOT ||
-    props.senderType === SENDER_TYPES.AGENT_BOT ||
-    (!props.sender && !props.additionalAttributes?.senderName);
+  const isBot = !props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT;
   if (isBot && props.messageType === MESSAGE_TYPES.OUTGOING) {
     return MESSAGE_VARIANTS.BOT;
   }
@@ -395,17 +389,13 @@ const shouldRenderMessage = computed(() => {
   const isUnsupported = props.contentAttributes?.isUnsupported;
   const isAnIntegrationMessage =
     props.contentType === CONTENT_TYPES.INTEGRATIONS;
-  const isFailedMessage = props.status === MESSAGE_STATUS.FAILED;
-  const hasExternalError = !!props.contentAttributes?.externalError;
 
   return (
     hasAttachments ||
     props.content ||
     isEmailContentType ||
     isUnsupported ||
-    isAnIntegrationMessage ||
-    isFailedMessage ||
-    hasExternalError
+    isAnIntegrationMessage
   );
 });
 
@@ -454,13 +444,12 @@ const avatarInfo = computed(() => {
     };
   }
 
-  // If no sender, check for Slack (or other integration) sender info
+  // If no sender, return bot info
   if (!props.sender) {
-    const { senderName, senderAvatarUrl } = props.additionalAttributes || {};
-    if (senderName) {
-      return { name: senderName, src: senderAvatarUrl ?? '' };
-    }
-    return { name: t('CONVERSATION.BOT'), src: '' };
+    return {
+      name: t('CONVERSATION.BOT'),
+      src: '',
+    };
   }
 
   const { sender } = props;
@@ -483,7 +472,7 @@ const avatarInfo = computed(() => {
 
 const avatarTooltip = computed(() => {
   if (props.contentAttributes?.externalEcho) {
-    return replaceInstallationName(t('CONVERSATION.NATIVE_APP_ADVISORY'));
+    return t('CONVERSATION.NATIVE_APP_ADVISORY');
   }
   if (avatarInfo.value.name === '') return '';
   return `${t('CONVERSATION.SENT_BY')} ${avatarInfo.value.name}`;

app/javascript/dashboard/components-next/message/MessageError.vue

@@ -12,16 +12,11 @@ defineProps({
 
 const emit = defineEmits(['retry']);
 
-const { orientation, status, createdAt, content, attachments } =
-  useMessageContext();
+const { orientation, status, createdAt } = useMessageContext();
 
 const { t } = useI18n();
 
-const canRetry = computed(() => {
-  const hasContent = content.value !== null;
-  const hasAttachments = attachments.value && attachments.value.length > 0;
-  return !hasOneDayPassed(createdAt.value) && (hasContent || hasAttachments);
-});
+const canRetry = computed(() => !hasOneDayPassed(createdAt.value));
 </script>
 
 <template>

app/javascript/dashboard/components-next/pagination/PaginationFooter.vue

@@ -71,10 +71,10 @@ const pageInfo = computed(() => {
 
 <template>
   <div
-    class="flex justify-between h-[3.375rem] w-full border-t border-n-weak mx-auto bg-n-surface-1 py-3 px-6 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-surface-1 before:from-0% before:to-transparent before:h-4 before:pointer-events-none"
+    class="flex justify-between h-12 w-full max-w-[calc(60rem-3px)] outline outline-n-container outline-1 -outline-offset-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-surface-1 before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
   >
     <div class="flex items-center gap-3">
-      <span class="min-w-0 text-body-main line-clamp-1 text-n-slate-11">
+      <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">
         {{ currentPageInformation }}
       </span>
     </div>
@@ -97,13 +97,11 @@ const pageInfo = computed(() => {
         :disabled="isFirstPage"
         @click="changePage(currentPage - 1)"
       />
-      <div class="inline-flex items-center gap-2 text-sm">
-        <span
-          class="px-3 tabular-nums py-0.5 font-420 bg-n-input-background text-body-main text-n-slate-12 rounded-md"
-        >
+      <div class="inline-flex items-center gap-2 text-sm text-n-slate-11">
+        <span class="px-3 tabular-nums py-0.5 bg-n-alpha-black2 rounded-md">
           {{ formatFullNumber(currentPage) }}
         </span>
-        <span class="truncate text-body-main text-n-slate-11">
+        <span class="truncate">
           {{ pageInfo }}
         </span>
       </div>

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

@@ -1,79 +0,0 @@
-<script setup>
-import Label from 'dashboard/components-next/label/Label.vue';
-
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  isActive: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  disabledLabel: {
-    type: String,
-    default: '',
-  },
-  disabledMessage: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['select']);
-
-const handleChange = () => {
-  if (!props.isActive && !props.disabled) {
-    emit('select', props.id);
-  }
-};
-</script>
-
-<template>
-  <div
-    class="cursor-pointer rounded-xl outline outline-1 p-4 transition-all duration-200 bg-n-solid-1 py-4 ltr:pl-4 rtl:pr-4 ltr:pr-6 rtl:pl-6"
-    :class="[
-      disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
-      isActive ? 'outline-n-blue-9' : 'outline-n-weak',
-      !disabled && !isActive ? 'hover:outline-n-strong' : '',
-    ]"
-    @click="handleChange"
-  >
-    <div class="flex flex-col gap-2 items-start">
-      <div class="flex items-center justify-between w-full gap-3">
-        <div class="flex items-center gap-2">
-          <h3 class="text-heading-3 text-n-slate-12">
-            {{ label }}
-          </h3>
-          <Label v-if="disabled" :label="disabledLabel" color="amber" compact />
-        </div>
-        <input
-          :id="`${id}`"
-          :checked="isActive"
-          :value="id"
-          :name="id"
-          :disabled="disabled"
-          type="radio"
-          class="h-4 w-4 border-n-slate-6 text-n-brand focus:ring-n-brand focus:ring-offset-0 flex-shrink-0"
-          @change="handleChange"
-        />
-      </div>
-      <p class="text-body-main text-n-slate-11">
-        {{ disabled && disabledMessage ? disabledMessage : description }}
-      </p>
-      <slot />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/select/Select.vue

@@ -1,97 +0,0 @@
-<script setup>
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-defineProps({
-  options: {
-    type: Array,
-    default: () => [],
-    validator: options =>
-      options.every(
-        opt => typeof opt === 'object' && 'value' in opt && 'label' in opt
-      ),
-  },
-  groups: {
-    type: Array,
-    default: () => [],
-    validator: groups =>
-      groups.every(
-        group =>
-          'label' in group &&
-          Array.isArray(group.options) &&
-          group.options.every(opt => 'value' in opt && 'label' in opt)
-      ),
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: String,
-    default: '',
-  },
-});
-
-const modelValue = defineModel({
-  type: [String, Number, Boolean],
-  default: '',
-});
-</script>
-
-<template>
-  <div class="w-fit relative">
-    <select
-      v-model="modelValue"
-      :disabled="disabled"
-      class="appearance-none bg-none rounded-lg border-0 outline-1 outline -outline-offset-1 transition-all duration-200 bg-n-surface-1 !mb-0 py-2 px-3 pr-10 text-sm"
-      :class="{
-        'outline-n-weak hover:outline-n-slate-6 focus:outline-n-blue-9':
-          !error && !disabled,
-        'outline-n-red-9 focus:outline-n-red-9': error && !disabled,
-        'outline-n-weak bg-n-slate-2 cursor-not-allowed opacity-60': disabled,
-      }"
-    >
-      <option v-if="placeholder" value="" disabled>
-        {{ placeholder }}
-      </option>
-      <template v-if="groups.length">
-        <optgroup
-          v-for="group in groups"
-          :key="group.label"
-          :label="group.label"
-        >
-          <option
-            v-for="option in group.options"
-            :key="option.value"
-            :value="option.value"
-            :disabled="option.disabled"
-          >
-            {{ option.label }}
-          </option>
-        </optgroup>
-      </template>
-      <template v-else>
-        <option
-          v-for="option in options"
-          :key="option.value"
-          :value="option.value"
-          :disabled="option.disabled"
-        >
-          {{ option.label }}
-        </option>
-      </template>
-    </select>
-    <div
-      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
-    >
-      <Icon
-        icon="i-lucide-chevron-down"
-        class="size-4 text-n-slate-11"
-        :class="{ 'opacity-50': disabled }"
-      />
-    </div>
-  </div>
-</template>

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

@@ -25,8 +25,8 @@ const reauthorizationRequired = computed(() => {
 </script>
 
 <template>
-  <span class="size-4 grid place-content-center rounded-full">
-    <ChannelIcon :inbox="inbox" class="size-4" />
+  <span class="size-5 grid place-content-center rounded-full bg-n-alpha-2">
+    <ChannelIcon :inbox="inbox" class="size-3" />
   </span>
   <div class="flex-1 truncate min-w-0">{{ label }}</div>
   <div

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

@@ -8,7 +8,6 @@ import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
 import { vOnClickOutside } from '@vueuse/components';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useWindowSize, useEventListener } from '@vueuse/core';
 import { emitter } from 'shared/helpers/mitt';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -51,18 +50,6 @@ const isRTL = useMapGetter('accounts/isRTL');
 const { width: windowWidth } = useWindowSize();
 const isMobile = computed(() => windowWidth.value < 768);
 
-const accountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const hasAdvancedAssignment = computed(() => {
-  return isFeatureEnabledonAccount.value(
-    accountId.value,
-    FEATURE_FLAGS.ADVANCED_ASSIGNMENT
-  );
-});
-
 const toggleShortcutModalFn = show => {
   if (show) {
     emit('openKeyShortcutModal');
@@ -286,7 +273,7 @@ const menuItems = computed(() => {
           children: sortedInboxes.value.map(inbox => ({
             name: `${inbox.name}-${inbox.id}`,
             label: inbox.name,
-            icon: h(ChannelIcon, { inbox, class: 'size-[16px]' }),
+            icon: h(ChannelIcon, { inbox, class: 'size-[12px]' }),
             to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
             component: leafProps =>
               h(ChannelLeaf, {
@@ -595,49 +582,18 @@ const menuItems = computed(() => {
           name: 'Settings Teams',
           label: t('SIDEBAR.TEAMS'),
           icon: 'i-lucide-users',
-          activeOn: [
-            'settings_teams_list',
-            'settings_teams_new',
-            'settings_teams_finish',
-            'settings_teams_add_agents',
-            'settings_teams_show',
-            'settings_teams_edit',
-            'settings_teams_edit_members',
-            'settings_teams_edit_finish',
-          ],
           to: accountScopedRoute('settings_teams_list'),
         },
-        ...(hasAdvancedAssignment.value
-          ? [
-              {
-                name: 'Settings Agent Assignment',
-                label: t('SIDEBAR.AGENT_ASSIGNMENT'),
-                icon: 'i-lucide-user-cog',
-                activeOn: [
-                  'assignment_policy_index',
-                  'agent_assignment_policy_index',
-                  'agent_assignment_policy_create',
-                  'agent_assignment_policy_edit',
-                  'agent_capacity_policy_index',
-                  'agent_capacity_policy_create',
-                  'agent_capacity_policy_edit',
-                ],
-                to: accountScopedRoute('assignment_policy_index'),
-              },
-            ]
-          : []),
+        {
+          name: 'Settings Agent Assignment',
+          label: t('SIDEBAR.AGENT_ASSIGNMENT'),
+          icon: 'i-lucide-user-cog',
+          to: accountScopedRoute('assignment_policy_index'),
+        },
         {
           name: 'Settings Inboxes',
           label: t('SIDEBAR.INBOXES'),
           icon: 'i-lucide-inbox',
-          activeOn: [
-            'settings_inbox_list',
-            'settings_inbox_show',
-            'settings_inbox_new',
-            'settings_inbox_finish',
-            'settings_inboxes_page_channel',
-            'settings_inboxes_add_agents',
-          ],
           to: accountScopedRoute('settings_inbox_list'),
         },
         {
@@ -730,7 +686,7 @@ const menuItems = computed(() => {
       closeMobileSidebar,
       { ignore: ['#mobile-sidebar-launcher'] },
     ]"
-    class="bg-n-background flex flex-col text-sm pb-px fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
+    class="bg-n-background flex flex-col text-sm pb-0.5 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
     :class="[
       {
         'shadow-lg md:shadow-none': isMobileSidebarOpen,
@@ -851,7 +807,7 @@ const menuItems = computed(() => {
         "
       />
       <div
-        class="px-1 py-1.5 flex-shrink-0 flex w-full z-50 gap-2 items-center border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)]"
+        class="p-1 flex-shrink-0 flex w-full z-50 gap-2 items-center border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)]"
         :class="isEffectivelyCollapsed ? 'justify-center' : 'justify-between'"
       >
         <SidebarProfileMenu

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

@@ -44,10 +44,8 @@ const shouldRenderComponent = computed(() => {
         :active
       />
       <template v-else>
-        <span v-if="icon" class="size-4 grid place-content-center rounded-full">
-          <Icon :icon="icon" class="size-4 inline-block" />
-        </span>
-        <div class="flex-1 truncate min-w-0 text-sm">{{ label }}</div>
+        <Icon v-if="icon" :icon="icon" class="size-4 inline-block" />
+        <div class="flex-1 truncate min-w-0">{{ label }}</div>
       </template>
     </component>
   </Policy>

app/javascript/dashboard/components-next/switch/Switch.vue

@@ -19,24 +19,20 @@ const updateValue = () => {
 <template>
   <button
     type="button"
-    class="group relative h-4 rounded-full w-7 flex-shrink-0 select-none focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2 transition-colors duration-200 ease-in-out"
-    :class="modelValue ? 'bg-n-brand' : 'bg-n-slate-6'"
+    class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2 flex-shrink-0"
+    :class="modelValue ? 'bg-n-brand' : 'bg-n-slate-6 disabled:bg-n-slate-6/60'"
     role="switch"
     :aria-checked="modelValue"
     @click="updateValue"
   >
     <span class="sr-only">{{ t('SWITCH.TOGGLE') }}</span>
     <span
-      class="absolute top-1/2 ltr:left-0.5 rtl:right-0.5 -translate-y-1/2 transition-transform duration-[350ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]"
+      class="absolute top-0.5 left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-out"
       :class="
         modelValue
-          ? 'ltr:translate-x-3 rtl:-translate-x-3 group-active:ltr:translate-x-[6px] rtl:group-active:-translate-x-[6px]'
-          : 'ltr:translate-x-0 rtl:translate-x-0'
+          ? 'translate-x-3 bg-n-background'
+          : 'translate-x-0 bg-n-background'
       "
-    >
-      <span
-        class="block h-3 w-3 rounded-full bg-n-background shadow-md transition-[width] duration-[180ms] ease-in-out group-active:w-[18px]"
-      />
-    </span>
+    />
   </button>
 </template>

app/javascript/dashboard/components-next/table/BaseTable.story.vue

@@ -1,175 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { BaseTable, BaseTableRow, BaseTableCell } from './index';
-import Button from '../button/Button.vue';
-import Avatar from '../avatar/Avatar.vue';
-import ToggleSwitch from '../switch/Switch.vue';
-
-const automationData = ref([
-  {
-    id: 1,
-    name: 'Welcome Message',
-    description: 'Send welcome message to new contacts',
-    active: true,
-    createdOn: 'Apr 21, 2022',
-  },
-  {
-    id: 2,
-    name: 'Auto-assign to Sales',
-    description: 'Automatically assign sales conversations to sales team',
-    active: false,
-    createdOn: 'May 15, 2022',
-  },
-  {
-    id: 3,
-    name: 'Tag Premium Users',
-    description: 'Add premium tag to conversations from premium users',
-    active: true,
-    createdOn: 'Jun 10, 2022',
-  },
-]);
-
-const agentData = ref([
-  {
-    id: 1,
-    name: 'John Doe',
-    email: 'john@example.com',
-    role: 'Administrator',
-    verified: true,
-    avatarUrl: '',
-  },
-  {
-    id: 2,
-    name: 'Jane Smith',
-    email: 'jane@example.com',
-    role: 'Agent',
-    verified: true,
-    avatarUrl: '',
-  },
-]);
-
-const emptyData = ref([]);
-
-const headers = ['Name', 'Active', 'Created on', 'Actions'];
-const agentHeaders = ['Agent', 'Role', 'Verification', 'Actions'];
-</script>
-
-<template>
-  <Story title="Components/Table" :layout="{ type: 'grid', width: '100%' }">
-    <!-- Basic Table -->
-    <Variant title="Basic Table">
-      <div class="p-4 bg-n-surface-1">
-        <BaseTable :headers="headers" :items="automationData">
-          <template #row="{ items }">
-            <BaseTableRow
-              v-for="automation in items"
-              :key="automation.id"
-              :item="automation"
-            >
-              <template #default>
-                <BaseTableCell>
-                  <div class="flex items-center gap-2 min-w-0 max-w-full">
-                    <span
-                      class="text-body-main text-n-slate-12 truncate min-w-0 flex-1"
-                    >
-                      {{ automation.name }}
-                    </span>
-                    <div class="w-px h-3 rounded-lg bg-n-weak flex-shrink-0" />
-                    <span
-                      class="text-body-main text-n-slate-11 truncate min-w-0 flex-1"
-                    >
-                      {{ automation.description }}
-                    </span>
-                  </div>
-                </BaseTableCell>
-
-                <BaseTableCell>
-                  <div class="flex justify-center">
-                    <ToggleSwitch v-model="automation.active" />
-                  </div>
-                </BaseTableCell>
-
-                <BaseTableCell>
-                  <span
-                    class="text-body-main text-n-slate-12 whitespace-nowrap"
-                  >
-                    {{ automation.createdOn }}
-                  </span>
-                </BaseTableCell>
-
-                <BaseTableCell align="end" class="w-24">
-                  <div class="flex gap-3 justify-end flex-shrink-0">
-                    <Button icon="i-woot-edit-pen" slate sm />
-                    <Button icon="i-woot-bin" slate sm />
-                    <Button icon="i-woot-clone" slate sm />
-                  </div>
-                </BaseTableCell>
-              </template>
-            </BaseTableRow>
-          </template>
-        </BaseTable>
-      </div>
-    </Variant>
-
-    <!-- Table with Avatars -->
-    <Variant title="Table with Avatars">
-      <div class="p-4 bg-n-surface-1">
-        <BaseTable :headers="agentHeaders" :items="agentData">
-          <template #row="{ items }">
-            <BaseTableRow v-for="agent in items" :key="agent.id" :item="agent">
-              <template #default>
-                <BaseTableCell>
-                  <div class="flex items-center gap-3 min-w-0">
-                    <Avatar :user="agent" :size="40" class="flex-shrink-0" />
-                    <div class="flex flex-col min-w-0">
-                      <span class="text-body-main text-n-slate-12 truncate">
-                        {{ agent.name }}
-                      </span>
-                      <span class="text-body-main text-n-slate-11 truncate">
-                        {{ agent.email }}
-                      </span>
-                    </div>
-                  </div>
-                </BaseTableCell>
-
-                <BaseTableCell>
-                  <span
-                    class="text-body-main text-n-slate-12 whitespace-nowrap"
-                  >
-                    {{ agent.role }}
-                  </span>
-                </BaseTableCell>
-
-                <BaseTableCell>
-                  <span
-                    class="text-body-main text-n-slate-12 whitespace-nowrap"
-                  >
-                    {{ agent.verified ? 'Verified' : 'Pending' }}
-                  </span>
-                </BaseTableCell>
-
-                <BaseTableCell align="end" class="w-24">
-                  <div class="flex gap-3 justify-end flex-shrink-0">
-                    <Button icon="i-woot-edit-pen" slate sm />
-                    <Button icon="i-woot-bin" slate sm />
-                  </div>
-                </BaseTableCell>
-              </template>
-            </BaseTableRow>
-          </template>
-        </BaseTable>
-      </div>
-    </Variant>
-
-    <!-- Empty State -->
-    <Variant title="Empty State">
-      <div class="p-4 bg-n-surface-1">
-        <BaseTable
-          :headers="headers"
-          :items="emptyData"
-          no-data-message="No automation rules found"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/table/BaseTable.vue

@@ -1,60 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  headers: {
-    type: Array,
-    default: () => [],
-  },
-  items: {
-    type: Array,
-    default: () => [],
-  },
-  noDataMessage: {
-    type: String,
-    default: '',
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const hasHeaderSlot = computed(() => !!props.headers.length);
-const showHeaders = computed(
-  () => hasHeaderSlot.value && props.items.length > 0
-);
-</script>
-
-<template>
-  <div class="w-full">
-    <table class="min-w-full table-auto divide-y divide-n-weak">
-      <thead v-if="showHeaders" class="border-t border-n-weak">
-        <tr>
-          <th
-            v-for="(header, index) in headers"
-            :key="index"
-            class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12 capitalize"
-          >
-            <slot :name="`header-${index}`" :header="header">
-              {{ header }}
-            </slot>
-          </th>
-        </tr>
-      </thead>
-      <tbody class="divide-y divide-n-weak text-n-slate-11">
-        <template v-if="items.length">
-          <slot name="row" :items="items" />
-        </template>
-        <tr v-else-if="noDataMessage && !loading">
-          <td
-            :colspan="headers.length || 1"
-            class="py-20 text-center text-body-main !text-base text-n-slate-11"
-          >
-            {{ noDataMessage }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>

app/javascript/dashboard/components-next/table/BaseTableCell.vue

@@ -1,22 +0,0 @@
-<script setup>
-defineProps({
-  align: {
-    type: String,
-    default: 'start',
-    validator: value => ['start', 'center', 'end'].includes(value),
-  },
-});
-</script>
-
-<template>
-  <td
-    class="py-3 ltr:pr-4 rtl:pl-4 text-body-main"
-    :class="{
-      'text-start': align === 'start',
-      'text-center': align === 'center',
-      'text-end': align === 'end',
-    }"
-  >
-    <slot />
-  </td>
-</template>

app/javascript/dashboard/components-next/table/BaseTableRow.vue

@@ -1,14 +0,0 @@
-<script setup>
-defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <tr>
-    <slot :item="item" />
-  </tr>
-</template>

app/javascript/dashboard/components-next/table/index.js

@@ -1,3 +0,0 @@
-export { default as BaseTable } from './BaseTable.vue';
-export { default as BaseTableRow } from './BaseTableRow.vue';
-export { default as BaseTableCell } from './BaseTableCell.vue';

app/javascript/dashboard/components-next/taginput/TagInput.vue

@@ -36,11 +36,6 @@ const props = defineProps({
   },
   focusOnMount: { type: Boolean, default: false },
   allowCreate: { type: Boolean, default: false },
-  // Skip label-based dedup when the consumer already filters menuItems by ID.
-  // Prevents removing all same-name items when one is selected (e.g. duplicate agent names).
-  skipLabelDedup: { type: Boolean, default: false },
-  // When false, the dropdown won't auto-open on mount; it opens only on click/focus.
-  autoOpenDropdown: { type: Boolean, default: true },
 });
 
 const emit = defineEmits([
@@ -61,7 +56,7 @@ const modelValue = defineModel({
 const tagInputRef = ref(null);
 const tags = ref(props.modelValue);
 const newTag = ref('');
-const isFocused = ref(props.autoOpenDropdown);
+const isFocused = ref(true);
 
 const rules = computed(() => getValidationRules(props.type));
 const v$ = useVuelidate(rules, { newTag });
@@ -79,11 +74,11 @@ const showInput = computed(() =>
 const showDropdownMenu = computed(() =>
   props.mode === MODE.SINGLE && tags.value.length >= 1
     ? false
-    : props.showDropdown && isFocused.value
+    : props.showDropdown
 );
 
-const filteredMenuItems = computed(() => {
-  const items = buildTagMenuItems({
+const filteredMenuItems = computed(() =>
+  buildTagMenuItems({
     mode: props.mode,
     tags: tags.value,
     menuItems: props.menuItems,
@@ -91,14 +86,8 @@ const filteredMenuItems = computed(() => {
     isLoading: props.isLoading,
     type: props.type,
     isNewTagInValidType: isNewTagInValidType.value,
-    allowCreate: props.allowCreate,
-    skipLabelDedup: props.skipLabelDedup,
-  });
-  if (props.type !== INPUT_TYPES.TEXT) return items;
-  const query = newTag.value?.trim()?.toLowerCase();
-  if (!query) return items;
-  return items.filter(item => item.label?.toLowerCase().includes(query));
-});
+  })
+);
 
 const emitDataOnAdd = value => {
   const matchingMenuItem = findMatchingMenuItem(props.menuItems, value);
@@ -123,13 +112,10 @@ const addTag = async () => {
     return;
   }
 
-  const isValidatedType = [INPUT_TYPES.EMAIL, INPUT_TYPES.TEL].includes(
-    props.type
-  );
-
-  if (!isValidatedType && !props.allowCreate && props.showDropdown) return;
-
-  if (isValidatedType || props.allowCreate) {
+  if (
+    [INPUT_TYPES.EMAIL, INPUT_TYPES.TEL].includes(props.type) ||
+    props.allowCreate
+  ) {
     if (!(await v$.value.$validate())) return;
     emitDataOnAdd(trimmedTag);
   }
@@ -139,31 +125,28 @@ const addTag = async () => {
 const removeTag = index => {
   tags.value.splice(index, 1);
   modelValue.value = tags.value;
-  emit('remove', index);
+  emit('remove');
 };
 
 const handleDropdownAction = async ({
   email: emailAddress,
   phoneNumber,
-  label,
   ...rest
 }) => {
   if (props.mode === MODE.SINGLE && tags.value.length >= 1) return;
   if (!props.showDropdown) return;
 
-  const isEmail = props.type === INPUT_TYPES.EMAIL;
-  const tagValue = isEmail ? emailAddress : phoneNumber || label;
+  const isEmail = props.type === 'email';
+  newTag.value = isEmail ? emailAddress : phoneNumber;
 
-  if (isEmail || props.type === INPUT_TYPES.TEL) {
-    newTag.value = tagValue;
-    if (!(await v$.value.$validate())) return;
-  }
+  if (!(await v$.value.$validate())) return;
 
-  emit(
-    'add',
-    isEmail ? { email: emailAddress, ...rest } : { phoneNumber, label, ...rest }
-  );
-  updateValueAndFocus(tagValue);
+  const payload = isEmail
+    ? { email: emailAddress, ...rest }
+    : { phoneNumber, ...rest };
+
+  emit('add', payload);
+  updateValueAndFocus(emailAddress);
 };
 
 const handleFocus = () => {
@@ -180,7 +163,7 @@ const handleKeydown = event => {
 };
 
 const handleClickOutside = () => {
-  isFocused.value = false;
+  if (tags.value.length) isFocused.value = false;
   emit('onClickOutside');
 };
 

app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js

@@ -261,71 +261,6 @@ describe('tagInputHelper', () => {
       });
       expect(result).toEqual(menuItems);
     });
-
-    it('does not create suggestion when allowCreate is false', () => {
-      const result = buildTagMenuItems({
-        ...baseParams,
-        type: INPUT_TYPES.EMAIL,
-        newTag: 'test@example.com',
-        allowCreate: false,
-      });
-      expect(result).toEqual([]);
-    });
-
-    it('still returns available menu items when allowCreate is false', () => {
-      const menuItems = [
-        { label: 'Agent 1', value: '1' },
-        { label: 'Agent 2', value: '2' },
-      ];
-      const result = buildTagMenuItems({
-        ...baseParams,
-        menuItems,
-        newTag: 'Agent',
-        allowCreate: false,
-      });
-      expect(result).toEqual(menuItems);
-    });
-
-    it('creates new item when allowCreate is true (default)', () => {
-      const result = buildTagMenuItems({
-        ...baseParams,
-        type: INPUT_TYPES.EMAIL,
-        newTag: 'test@example.com',
-        allowCreate: true,
-      });
-      expect(result).toHaveLength(1);
-      expect(result[0]).toMatchObject({
-        label: 'test@example.com',
-        action: 'create',
-      });
-    });
-
-    it('skips label dedup when skipLabelDedup is true', () => {
-      const menuItems = [
-        { label: 'HDMA', value: 1 },
-        { label: 'HDMA', value: 2 },
-      ];
-      const result = buildTagMenuItems({
-        ...baseParams,
-        tags: ['HDMA'],
-        menuItems,
-        skipLabelDedup: true,
-      });
-      expect(result).toEqual(menuItems);
-    });
-
-    it('filters by label when skipLabelDedup is false (default)', () => {
-      const menuItems = [
-        { label: 'HDMA', value: 1 },
-        { label: 'HDMA', value: 2 },
-      ];
-      const result = buildTagMenuItems({
-        ...baseParams,
-        tags: ['HDMA'],
-        menuItems,
-      });
-      expect(result).toEqual([]);
-    });
   });
 
   describe('canAddTag', () => {

app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js

@@ -84,29 +84,25 @@ export const buildTagMenuItems = ({
   isLoading,
   type,
   isNewTagInValidType,
-  allowCreate = true,
-  skipLabelDedup = false,
 }) => {
   if (mode === MODE.SINGLE && tags.length >= 1) return [];
 
-  const availableMenuItems = skipLabelDedup
-    ? menuItems
-    : menuItems.filter(item => !tags.includes(item.label));
+  const availableMenuItems = menuItems.filter(
+    item => !tags.includes(item.label)
+  );
 
   // Show typed value as suggestion only if:
   // 1. There's a value being typed
   // 2. The value isn't already in the tags
   // 3. Validation passes (email/phone) and There are no menu items available
-  // 4. allowCreate is enabled
   const trimmedNewTag = newTag?.trim();
-  const shouldShowCreateSuggestion =
-    allowCreate &&
+  const shouldShowTypedValue =
     trimmedNewTag &&
     !tags.includes(trimmedNewTag) &&
     !isLoading &&
     !availableMenuItems.length;
 
-  if (shouldShowCreateSuggestion) {
+  if (shouldShowTypedValue) {
     const { isValid, formattedValue } = validateAndFormatNewTag(
       trimmedNewTag,
       type,

app/javascript/dashboard/components-next/year-in-review/ShareModal.vue

@@ -18,7 +18,7 @@ const props = defineProps({
   },
   year: {
     type: [Number, String],
-    default: '',
+    required: true,
   },
 });
 

app/javascript/dashboard/components/ChannelSelector.vue

@@ -47,7 +47,7 @@ defineProps({
 
     <div
       v-if="isComingSoon"
-      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-surface-1/90 via-n-surface-1/70 to-n-surface-1/95 cursor-not-allowed"
+      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-sm">
         {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀

app/javascript/dashboard/components/ChatList.vue

@@ -17,7 +17,10 @@ import {
   useFunctionGetter,
 } from 'dashboard/composables/store.js';
 
-import { Virtualizer } from 'virtua/vue';
+// [VITE] [TODO] We are using vue-virtual-scroll for now, since that seemed the simplest way to migrate
+// from the current one. But we should consider using tanstack virtual in the future
+// https://tanstack.com/virtual/latest/docs/framework/vue/examples/variable
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import ChatListHeader from './ChatListHeader.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ConversationFilter from 'next/filter/ConversationFilter.vue';
@@ -26,9 +29,9 @@ import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
+import IntersectionObserver from './IntersectionObserver.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
 import ConversationResolveAttributesModal from 'dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -43,6 +46,7 @@ import {
   useSnakeCase,
 } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
+import { useEventListener } from '@vueuse/core';
 import { useConversationRequiredAttributes } from 'dashboard/composables/useConversationRequiredAttributes';
 
 import { emitter } from 'shared/helpers/mitt';
@@ -66,6 +70,8 @@ import { matchesFilters } from '../store/modules/conversations/helpers/filterHel
 import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
 import { ASSIGNEE_TYPE_TAB_PERMISSIONS } from 'dashboard/constants/permissions.js';
 
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+
 const props = defineProps({
   conversationInbox: { type: [String, Number], default: 0 },
   teamId: { type: [String, Number], default: 0 },
@@ -85,9 +91,9 @@ const store = useStore();
 
 const resolveAttributesModalRef = ref(null);
 const conversationListRef = ref(null);
-const virtualListRef = ref(null);
+const conversationDynamicScroller = ref(null);
 
-provide('contextMenuElementTarget', virtualListRef);
+provide('contextMenuElementTarget', conversationDynamicScroller);
 
 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
@@ -139,7 +145,6 @@ const {
   isConversationSelected,
   onAssignAgent,
   onAssignLabels,
-  onRemoveLabels,
   onAssignTeamsForBulk,
   onUpdateConversations,
 } = useBulkActions();
@@ -155,6 +160,12 @@ const {
 const { checkMissingAttributes } = useConversationRequiredAttributes();
 
 // computed
+const intersectionObserverOptions = computed(() => {
+  return {
+    root: conversationListRef.value,
+    rootMargin: '100px 0px 100px 0px',
+  };
+});
 
 const hasAppliedFilters = computed(() => {
   return appliedFilters.value.length !== 0;
@@ -372,6 +383,18 @@ function setFiltersFromUISettings() {
 
 function emitConversationLoaded() {
   emit('conversationLoad');
+  // [VITE] removing this since the library has changed
+  // nextTick(() => {
+  //   // Addressing a known issue in the virtual list library where dynamically added items
+  //   // might not render correctly. This workaround involves a slight manual adjustment
+  //   // to the scroll position, triggering the list to refresh its rendering.
+  //   const virtualList = conversationListRef.value;
+  //   const scrollToOffset = virtualList?.scrollToOffset;
+  //   const currentOffset = virtualList?.getOffset() || 0;
+  //   if (scrollToOffset) {
+  //     scrollToOffset(currentOffset + 1);
+  //   }
+  // });
 }
 
 function fetchFilteredConversations(payload) {
@@ -583,13 +606,16 @@ function loadMoreConversations() {
   }
 }
 
-// Use IntersectionObserver instead of @scroll since Virtualizer only emits on user scroll.
-// If the list doesn’t fill the viewport, loading can stall.
-// IntersectionObserver triggers as soon as the sentinel is visible.
-const intersectionObserverOptions = computed(() => ({
-  root: conversationListRef.value,
-  rootMargin: '100px 0px 100px 0px',
-}));
+// Add a method to handle scroll events
+function handleScroll() {
+  const scroller = conversationDynamicScroller.value;
+  if (scroller && scroller.hasScrollbar) {
+    const { scrollTop, scrollHeight, clientHeight } = scroller.$el;
+    if (scrollHeight - (scrollTop + clientHeight) < 100) {
+      loadMoreConversations();
+    }
+  }
+}
 
 function updateAssigneeTab(selectedTab) {
   if (activeAssigneeTab.value !== selectedTab) {
@@ -795,6 +821,8 @@ useEmitter('fetch_conversation_stats', () => {
   store.dispatch('conversationStats/get', conversationFilters.value);
 });
 
+useEventListener(conversationDynamicScroller, 'scroll', handleScroll);
+
 onMounted(() => {
   store.dispatch('setChatListFilters', conversationFilters.value);
   setFiltersFromUISettings();
@@ -831,7 +859,6 @@ provide('deSelectConversation', deSelectConversation);
 provide('assignAgent', onAssignAgent);
 provide('assignTeam', onAssignTeam);
 provide('assignLabels', onAssignLabels);
-provide('removeLabels', onRemoveLabels);
 provide('updateConversationStatus', handleResolveConversation);
 provide('toggleContextMenu', onContextMenuToggle);
 provide('markAsUnread', markAsUnread);
@@ -948,40 +975,61 @@ watch(conversationFilters, (newVal, oldVal) => {
     />
     <div
       ref="conversationListRef"
-      class="flex-1 min-h-0 overflow-y-auto conversations-list"
-      :class="{ '!overflow-hidden': isContextMenuOpen }"
+      class="overflow-hidden flex-1 conversations-list hover:overflow-y-auto"
+      :class="{ 'overflow-hidden': isContextMenuOpen }"
     >
-      <Virtualizer
-        ref="virtualListRef"
-        v-slot="{ item, index }"
-        :data="conversationList"
+      <DynamicScroller
+        ref="conversationDynamicScroller"
+        :items="conversationList"
+        :min-item-size="24"
+        class="overflow-auto w-full h-full"
       >
-        <ConversationItem
-          :source="item"
-          :label="label"
-          :team-id="teamId"
-          :folders-id="foldersId"
-          :conversation-type="conversationType"
-          :show-assignee="showAssigneeInConversationCard"
-          :data-index="index"
-          @select-conversation="selectConversation"
-          @de-select-conversation="deSelectConversation"
-        />
-      </Virtualizer>
-      <div v-if="chatListLoading" class="flex justify-center my-4">
-        <Spinner class="text-n-brand" />
-      </div>
-      <p
-        v-else-if="showEndOfListMessage"
-        class="p-4 text-center text-n-slate-11"
-      >
-        {{ $t('CHAT_LIST.EOF') }}
-      </p>
-      <IntersectionObserver
-        v-else
-        :options="intersectionObserverOptions"
-        @observed="loadMoreConversations"
-      />
+        <template #default="{ item, index, active }">
+          <!--
+            If we encounter resizing issues, we can set the `watchData` prop to true
+            this will deeply watch the entire object instead of just size dependencies
+            But it can impact performance
+          -->
+          <DynamicScrollerItem
+            :item="item"
+            :active="active"
+            :data-index="index"
+            :size-dependencies="[
+              item.messages,
+              item.labels,
+              item.uuid,
+              item.inbox_id,
+            ]"
+          >
+            <ConversationItem
+              :source="item"
+              :label="label"
+              :team-id="teamId"
+              :folders-id="foldersId"
+              :conversation-type="conversationType"
+              :show-assignee="showAssigneeInConversationCard"
+              @select-conversation="selectConversation"
+              @de-select-conversation="deSelectConversation"
+            />
+          </DynamicScrollerItem>
+        </template>
+        <template #after>
+          <div v-if="chatListLoading" class="flex justify-center my-4">
+            <Spinner class="text-n-brand" />
+          </div>
+          <p
+            v-else-if="showEndOfListMessage"
+            class="p-4 text-center text-n-slate-11"
+          >
+            {{ $t('CHAT_LIST.EOF') }}
+          </p>
+          <IntersectionObserver
+            v-else
+            :options="intersectionObserverOptions"
+            @observed="loadMoreConversations"
+          />
+        </template>
+      </DynamicScroller>
     </div>
     <Dialog
       ref="deleteConversationDialogRef"

app/javascript/dashboard/components/ConversationItem.vue

@@ -10,7 +10,6 @@ export default {
     'assignAgent',
     'assignTeam',
     'assignLabels',
-    'removeLabels',
     'updateConversationStatus',
     'toggleContextMenu',
     'markAsUnread',
@@ -50,6 +49,7 @@ export default {
 
 <template>
   <ConversationCard
+    :key="source.id"
     :active-label="label"
     :team-id="teamId"
     :folders-id="foldersId"
@@ -63,7 +63,6 @@ export default {
     @assign-agent="assignAgent"
     @assign-team="assignTeam"
     @assign-label="assignLabels"
-    @remove-label="removeLabels"
     @update-conversation-status="updateConversationStatus"
     @context-menu-toggle="toggleContextMenu"
     @mark-as-unread="markAsUnread"

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -1,53 +1,77 @@
-<script setup>
-import { ref } from 'vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import DatePicker from 'dashboard/components-next/DatePicker/DatePicker.vue';
+<script>
+import DatePicker from 'vue-datepicker-next';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
-const emit = defineEmits(['chooseTime', 'close']);
+export default {
+  components: {
+    DatePicker,
+    NextButton,
+  },
+  emits: ['close', 'chooseTime'],
 
-const dialogRef = ref(null);
-const datePickerRef = ref(null);
-const today = new Date();
+  data() {
+    return {
+      snoozeTime: null,
+      lang: {
+        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        yearFormat: 'YYYY',
+        monthFormat: 'MMMM',
+      },
+    };
+  },
 
-const onApply = dateTime => {
-  dialogRef.value?.close();
-  emit('chooseTime', dateTime);
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    chooseTime() {
+      this.$emit('chooseTime', this.snoozeTime);
+    },
+    disabledDate(date) {
+      // Disable all the previous dates
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
+      return date < yesterday;
+    },
+    disabledTime(date) {
+      // Allow only time after 1 hour
+      const now = new Date();
+      now.setHours(now.getHours() + 1);
+      return date < now;
+    },
+  },
 };
-
-const onClear = () => {
-  dialogRef.value?.close();
-};
-
-const onDialogClose = () => {
-  datePickerRef.value?.resetState();
-  emit('close');
-};
-
-const open = () => {
-  dialogRef.value?.open();
-};
-
-const close = () => {
-  dialogRef.value?.close();
-};
-
-defineExpose({ open, close });
 </script>
 
 <template>
-  <Dialog
-    ref="dialogRef"
-    :title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')"
-    :show-confirm-button="false"
-    :show-cancel-button="false"
-    width="2xl"
-    @close="onDialogClose"
-  >
-    <DatePicker
-      ref="datePickerRef"
-      :min-date="today"
-      @apply="onApply"
-      @clear="onClear"
-    />
-  </Dialog>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
+    <form
+      class="modal-content w-full pt-2 px-5 pb-6"
+      @submit.prevent="chooseTime"
+    >
+      <DatePicker
+        v-model:value="snoozeTime"
+        type="datetime"
+        inline
+        input-class="mx-input "
+        :lang="lang"
+        :disabled-date="disabledDate"
+        :disabled-time="disabledTime"
+      />
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL')"
+          @click.prevent="onClose"
+        />
+        <NextButton
+          type="submit"
+          :label="$t('CONVERSATION.CUSTOM_SNOOZE.APPLY')"
+        />
+      </div>
+    </form>
+  </div>
 </template>

app/javascript/dashboard/components/FormSection.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col items-start w-full gap-6">
+    <div class="flex flex-col w-full gap-4">
+      <h4 v-if="title" class="text-lg font-medium text-n-slate-12">
+        {{ title }}
+      </h4>
+      <div class="flex flex-row items-center justify-between">
+        <div class="flex-grow h-px bg-n-weak" />
+      </div>
+      <p v-if="description" class="mb-0 text-sm font-normal text-n-slate-12">
+        {{ description }}
+      </p>
+    </div>
+    <div class="flex flex-col w-full gap-6">
+      <slot />
+    </div>
+  </div>
+</template>