Merge branch 'develop' into report-rewrite

fix: Gemfile & Gemfile.lock to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-RUBY-RACK-1061917

Co-authored-by: snyk-bot <snyk-bot@snyk.io>

.github/CODEOWNERS

@@ -1,7 +1,2 @@
-## All javascript files should be reviewed by pranav before merging
-*.js @pranavrajs
-*.vue @pranavrajs
-
-
 ## All enterprise related files should be reviewed by sojan before merging
 /enterprise/* @sojan-official

.github/workflows/deploy_check.yml

@@ -0,0 +1,45 @@
+## github action to check deployment success
+## curl the deployment url and check for 200 status
+## deployment url will be of the form chatwoot-pr-<pr_number>.herokuapp.com
+name: Deploy Check
+
+on:
+  pull_request:
+
+jobs:
+  deployment_check:
+    name: Check Deployment
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install jq
+        run: sudo apt-get install -y jq
+      - name: Print Deployment URL
+        run: echo "https://chatwoot-pr-${{ github.event.pull_request.number }}.herokuapp.com"
+      - name: Check Deployment Status
+        run: |
+          max_attempts=10
+          attempt=1
+          status_code=0
+          echo "Waiting for review app to be deployed/redeployed, trying in  10 minutes..."
+          sleep 600
+          while [ $attempt -le $max_attempts ]; do
+            response=$(curl -s -o /dev/null -w "%{http_code}" https://chatwoot-pr-${{ github.event.pull_request.number }}.herokuapp.com/api)
+            status_code=$(echo $response | head -n   1)
+            if [ $status_code -eq   200 ]; then
+              body=$(curl -s https://chatwoot-pr-${{ github.event.pull_request.number }}.herokuapp.com/api)
+              if echo "$body" | jq -e '.version and .timestamp and .queue_services == "ok" and .data_services == "ok"' > /dev/null; then
+                echo "Deployment successful"
+                exit 0
+              else
+                echo "Deployment status unknown, retrying in   3 minutes..."
+                sleep 180
+              fi
+            else
+              echo "Waiting for review app to be ready, retrying in  3 minutes..."
+              sleep 180
+              attempt=$((attempt +  1))
+            fi
+          done
+          echo "Deployment failed after $max_attempts attempts"
+          exit  1
+          fi

.github/workflows/run_response_bot_spec.yml

@@ -73,6 +73,7 @@ jobs:
           spec/enterprise/controllers/api/v1/accounts/response_sources_controller_spec.rb \
           spec/enterprise/services/enterprise/message_templates/response_bot_service_spec.rb \
           spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb:47 \
+          spec/enterprise/jobs/enterprise/account/conversations_resolution_scheduler_job_spec.rb \
           --profile=10 \
           --format documentation
 

.rubocop.yml

@@ -2,6 +2,8 @@ require:
   - rubocop-performance
   - rubocop-rails
   - rubocop-rspec
+  - ./rubocop/use_from_email.rb
+  - ./rubocop/custom_cop_location.rb
 
 Layout/LineLength:
   Max: 150
@@ -140,6 +142,16 @@ RSpec/MultipleExpectations:
 RSpec/MultipleMemoizedHelpers:
   Max: 14
 
+# custom rules
+UseFromEmail:
+  Enabled: true
+  Exclude:
+    - 'app/models/user.rb'
+    - 'app/models/contact.rb'
+
+CustomCopLocation:
+  Enabled: true
+
 AllCops:
   NewCops: enable
   Exclude:

Gemfile

@@ -3,8 +3,8 @@ source 'https://rubygems.org'
 ruby '3.2.2'
 
 ##-- base gems for rails --##
-gem 'rack-cors', require: 'rack/cors'
+gem 'rack-cors', '2.0.0', require: 'rack/cors'
-gem 'rails', '~> 7.0.8.0'
+gem 'rails', '~> 7.0.8.1'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false
 
@@ -69,7 +69,7 @@ gem 'webpacker'
 gem 'barnes'
 
 ##--- gems for authentication & authorization ---##
-gem 'devise', '>= 4.9.3'
+gem 'devise', '>= 4.9.4'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
 gem 'devise_token_auth'
 # authorization
@@ -165,7 +165,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-google-oauth2'
+gem 'omniauth-google-oauth2', '>= 1.1.2'
 gem 'omniauth-rails_csrf_protection', '~> 1.0'
 
 ## Gems for reponse bot
@@ -203,7 +203,7 @@ group :development do
   gem 'rack-mini-profiler', '>= 3.2.0', require: false
   gem 'stackprof'
   # Should install the associated chrome extension to view query logs
-  gem 'meta_request'
+  gem 'meta_request', '>= 0.8.0'
 end
 
 group :test do

Gemfile.lock

@@ -33,70 +33,70 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.0.8)
+    actioncable (7.0.8.1)
-      actionpack (= 7.0.8)
+      actionpack (= 7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8)
+    actionmailbox (7.0.8.1)
-      actionpack (= 7.0.8)
+      actionpack (= 7.0.8.1)
-      activejob (= 7.0.8)
+      activejob (= 7.0.8.1)
-      activerecord (= 7.0.8)
+      activerecord (= 7.0.8.1)
-      activestorage (= 7.0.8)
+      activestorage (= 7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.0.8)
+    actionmailer (7.0.8.1)
-      actionpack (= 7.0.8)
+      actionpack (= 7.0.8.1)
-      actionview (= 7.0.8)
+      actionview (= 7.0.8.1)
-      activejob (= 7.0.8)
+      activejob (= 7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.8)
+    actionpack (7.0.8.1)
-      actionview (= 7.0.8)
+      actionview (= 7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
       rack (~> 2.0, >= 2.2.4)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8)
+    actiontext (7.0.8.1)
-      actionpack (= 7.0.8)
+      actionpack (= 7.0.8.1)
-      activerecord (= 7.0.8)
+      activerecord (= 7.0.8.1)
-      activestorage (= 7.0.8)
+      activestorage (= 7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.0.8)
+    actionview (7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_record_query_trace (1.8)
-    activejob (7.0.8)
+    activejob (7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
       globalid (>= 0.3.6)
-    activemodel (7.0.8)
+    activemodel (7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
-    activerecord (7.0.8)
+    activerecord (7.0.8.1)
-      activemodel (= 7.0.8)
+      activemodel (= 7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
     activerecord-import (1.4.1)
       activerecord (>= 4.2)
-    activestorage (7.0.8)
+    activestorage (7.0.8.1)
-      actionpack (= 7.0.8)
+      actionpack (= 7.0.8.1)
-      activejob (= 7.0.8)
+      activejob (= 7.0.8.1)
-      activerecord (= 7.0.8)
+      activerecord (= 7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (7.0.8)
+    activesupport (7.0.8.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -149,7 +149,7 @@ GEM
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
     base64 (0.1.1)
-    bcrypt (3.1.19)
+    bcrypt (3.1.20)
     bindex (0.8.1)
     blingfire (0.1.8)
     bootsnap (1.16.0)
@@ -194,7 +194,7 @@ GEM
       irb (>= 1.5.0)
       reline (>= 0.3.1)
     declarative (0.0.20)
-    devise (4.9.3)
+    devise (4.9.4)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 4.1.0)
@@ -237,9 +237,8 @@ GEM
       railties (>= 5.0.0)
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.7.4)
+    faraday (2.9.0)
-      faraday-net_http (>= 2.0, < 3.1)
+      faraday-net_http (>= 2.0, < 3.2)
-      ruby2_keywords (>= 0.0.4)
     faraday-follow_redirects (0.3.0)
       faraday (>= 1, < 3)
     faraday-mashify (0.1.1)
@@ -247,7 +246,8 @@ GEM
       hashie
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
-    faraday-net_http (3.0.2)
+    faraday-net_http (3.1.0)
+      net-http
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
@@ -366,7 +366,7 @@ GEM
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.14.1)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
@@ -394,7 +394,8 @@ GEM
       hana (~> 1.3)
       regexp_parser (~> 2.0)
       uri_template (~> 0.7)
-    jwt (2.7.0)
+    jwt (2.8.1)
+      base64
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.2.2)
@@ -451,17 +452,17 @@ GEM
     marcel (1.0.2)
     maxminddb (0.1.22)
     memoist (0.16.2)
-    meta_request (0.7.4)
+    meta_request (0.8.2)
       rack-contrib (>= 1.1, < 3)
-      railties (>= 3.0.0, < 7.1)
+      railties (>= 3.0.0, < 8)
     method_source (1.0.0)
     mime-types (3.4.1)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.5)
+    mini_portile2 (2.8.6)
-    minitest (5.21.2)
+    minitest (5.22.3)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
@@ -470,6 +471,8 @@ GEM
     multipart-post (2.3.0)
     neighbor (0.2.3)
       activerecord (>= 5.2)
+    net-http (0.4.1)
+      uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
     net-imap (0.4.9)
@@ -488,14 +491,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.0)
-    nokogiri (1.16.2)
+    nokogiri (1.16.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.2-arm64-darwin)
+    nokogiri (1.16.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.2-x86_64-darwin)
+    nokogiri (1.16.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.2-x86_64-linux)
+    nokogiri (1.16.4-x86_64-linux)
       racc (~> 1.4)
     numo-narray (0.9.2.1)
     oauth (1.1.0)
@@ -515,11 +518,11 @@ GEM
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
       rack-protection
-    omniauth-google-oauth2 (1.1.1)
+    omniauth-google-oauth2 (1.1.2)
       jwt (>= 2.0)
-      oauth2 (~> 2.0.6)
+      oauth2 (~> 2.0)
       omniauth (~> 2.0)
-      omniauth-oauth2 (~> 1.8.0)
+      omniauth-oauth2 (~> 1.8)
     omniauth-oauth2 (1.8.0)
       oauth2 (>= 1.4, < 3)
       omniauth (~> 2.0)
@@ -559,36 +562,37 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.7.3)
-    rack (2.2.8)
+    rack (2.2.9)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.4.0)
       rack (< 4)
-    rack-cors (2.0.1)
+    rack-cors (2.0.0)
       rack (>= 2.0.0)
     rack-mini-profiler (3.2.0)
       rack (>= 1.2.0)
-    rack-protection (3.1.0)
+    rack-protection (3.2.0)
+      base64 (>= 0.1.0)
       rack (~> 2.2, >= 2.2.4)
     rack-proxy (0.7.6)
       rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    rails (7.0.8)
+    rails (7.0.8.1)
-      actioncable (= 7.0.8)
+      actioncable (= 7.0.8.1)
-      actionmailbox (= 7.0.8)
+      actionmailbox (= 7.0.8.1)
-      actionmailer (= 7.0.8)
+      actionmailer (= 7.0.8.1)
-      actionpack (= 7.0.8)
+      actionpack (= 7.0.8.1)
-      actiontext (= 7.0.8)
+      actiontext (= 7.0.8.1)
-      actionview (= 7.0.8)
+      actionview (= 7.0.8.1)
-      activejob (= 7.0.8)
+      activejob (= 7.0.8.1)
-      activemodel (= 7.0.8)
+      activemodel (= 7.0.8.1)
-      activerecord (= 7.0.8)
+      activerecord (= 7.0.8.1)
-      activestorage (= 7.0.8)
+      activestorage (= 7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
       bundler (>= 1.15.0)
-      railties (= 7.0.8)
+      railties (= 7.0.8.1)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -596,15 +600,15 @@ GEM
     rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
       nokogiri (~> 1.14)
-    railties (7.0.8)
+    railties (7.0.8.1)
-      actionpack (= 7.0.8)
+      actionpack (= 7.0.8.1)
-      activesupport (= 7.0.8)
+      activesupport (= 7.0.8.1)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
-    rake (13.1.0)
+    rake (13.2.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
@@ -765,7 +769,7 @@ GEM
     stripe (8.5.0)
     telephone_number (1.4.20)
     test-prof (1.2.1)
-    thor (1.3.0)
+    thor (1.3.1)
     tilt (2.3.0)
     time_diff (0.3.0)
       activesupport
@@ -790,11 +794,12 @@ GEM
     unf_ext (0.0.8.2)
     unicode-display_width (2.4.2)
     uniform_notifier (1.16.0)
+    uri (0.13.0)
     uri_template (0.7.0)
     valid_email2 (4.0.6)
       activemodel (>= 3.2)
       mail (~> 2.5)
-    version_gem (1.1.3)
+    version_gem (1.1.4)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -823,7 +828,7 @@ GEM
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.13)
 
 PLATFORMS
   arm64-darwin-20
@@ -862,7 +867,7 @@ DEPENDENCIES
   database_cleaner
   ddtrace
   debug (~> 1.8)
-  devise (>= 4.9.3)
+  devise (>= 4.9.4)
   devise-secure_password!
   devise_token_auth
   dotenv-rails
@@ -900,14 +905,14 @@ DEPENDENCIES
   listen
   lograge (~> 0.14.0)
   maxminddb
-  meta_request
+  meta_request (>= 0.8.0)
   mock_redis
   neighbor
   net-smtp (~> 0.3.4)
   newrelic-sidekiq-metrics (>= 1.6.2)
   newrelic_rpm
   omniauth (>= 2.1.2)
-  omniauth-google-oauth2
+  omniauth-google-oauth2 (>= 1.1.2)
   omniauth-oauth2
   omniauth-rails_csrf_protection (~> 1.0)
   pg
@@ -918,10 +923,10 @@ DEPENDENCIES
   puma
   pundit
   rack-attack (>= 6.7.0)
-  rack-cors
+  rack-cors (= 2.0.0)
   rack-mini-profiler (>= 3.2.0)
   rack-timeout
-  rails (~> 7.0.8.0)
+  rails (~> 7.0.8.1)
   redis
   redis-namespace
   responders (>= 3.1.1)

Makefile

@@ -17,6 +17,9 @@ db_migrate:
 db_seed:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails db:seed
 
+db_reset:
+	RAILS_ENV=$(RAILS_ENV) bundle exec rails db:reset
+
 db:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails db:chatwoot_prepare
 
@@ -49,4 +52,4 @@ debug_worker:
 docker: 
 	docker build -t $(APP_NAME) -f ./docker/Dockerfile .
 
-.PHONY: setup db_create db_migrate db_seed db console server burn docker run force_run debug debug_worker
+.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run debug debug_worker

README.md

@@ -23,7 +23,6 @@ Customer engagement suite, an open-source alternative to Intercom, Zendesk, Sale
   <img src="https://img.shields.io/github/commit-activity/m/chatwoot/chatwoot" alt="Commits-per-month">
   <a title="Crowdin" target="_self" href="https://chatwoot.crowdin.com/chatwoot"><img src="https://badges.crowdin.net/e/37ced7eba411064bd792feb3b7a28b16/localized.svg"></a>
   <a href="https://discord.gg/cJXdrwS"><img src="https://img.shields.io/discord/647412545203994635" alt="Discord"></a>
-  <a href="https://huntr.dev/bounties/disclose"><img src="https://cdn.huntr.dev/huntr_security_badge_mono.svg" alt="Huntr"></a>
   <a href="https://status.chatwoot.com"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fchatwoot%2Fstatus%2Fmaster%2Fapi%2Fchatwoot%2Fuptime.json" alt="uptime"></a>
   <a href="https://status.chatwoot.com"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fchatwoot%2Fstatus%2Fmaster%2Fapi%2Fchatwoot%2Fresponse-time.json" alt="response time"></a>
   <a href="https://artifacthub.io/packages/helm/chatwoot/chatwoot"><img src="https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/artifact-hub" alt="Artifact HUB"></a>

app.json

@@ -72,6 +72,11 @@
       "scripts": {
         "test": "bundle exec rake test"
       }
+    },
+    "review": {
+      "scripts": {
+        "postdeploy": "bundle exec rails db:seed"
+      }
     }
   }
 }

app/actions/contact_identify_action.rb

@@ -59,7 +59,7 @@ class ContactIdentifyAction
   def existing_email_contact
     return if params[:email].blank?
 
-    @existing_email_contact ||= account.contacts.find_by(email: params[:email])
+    @existing_email_contact ||= account.contacts.from_email(params[:email])
   end
 
   def existing_phone_number_contact

app/builders/agent_builder.rb

@@ -16,7 +16,6 @@ class AgentBuilder
   def perform
     ActiveRecord::Base.transaction do
       @user = find_or_create_user
-      send_confirmation_if_required
       create_account_user
     end
     @user
@@ -27,18 +26,13 @@ class AgentBuilder
   # Finds a user by email or creates a new one with a temporary password.
   # @return [User] the found or created user.
   def find_or_create_user
-    user = User.find_by(email: email)
+    user = User.from_email(email)
     return user if user
 
     temp_password = "1!aA#{SecureRandom.alphanumeric(12)}"
     User.create!(email: email, name: name, password: temp_password, password_confirmation: temp_password)
   end
 
-  # Sends confirmation instructions if the user is persisted and not confirmed.
-  def send_confirmation_if_required
-    @user.send_confirmation_instructions if user_needs_confirmation?
-  end
-
   # Checks if the user needs confirmation.
   # @return [Boolean] true if the user is persisted and not confirmed, false otherwise.
   def user_needs_confirmation?

app/builders/contact_inbox_with_contact_builder.rb

@@ -75,7 +75,7 @@ class ContactInboxWithContactBuilder
   def find_contact_by_email(email)
     return if email.blank?
 
-    account.contacts.find_by(email: email.downcase)
+    account.contacts.from_email(email)
   end
 
   def find_contact_by_phone_number(phone_number)

app/builders/messages/facebook/message_builder.rb

@@ -53,7 +53,23 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
   end
 
   def conversation
-    @conversation ||= Conversation.find_by(conversation_params) || build_conversation
+    @conversation ||= set_conversation_based_on_inbox_config
+  end
+
+  def set_conversation_based_on_inbox_config
+    if @inbox.lock_to_single_conversation
+      Conversation.where(conversation_params).order(created_at: :desc).first || build_conversation
+    else
+      find_or_build_for_multiple_conversations
+    end
+  end
+
+  def find_or_build_for_multiple_conversations
+    # If lock to single conversation is disabled, we will create a new conversation if previous conversation is resolved
+    last_conversation = Conversation.where(conversation_params).where.not(status: :resolved).order(created_at: :desc).first
+    return build_conversation if last_conversation.nil?
+
+    last_conversation
   end
 
   def build_conversation

app/builders/messages/instagram/message_builder.rb

@@ -69,9 +69,28 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
   end
 
   def conversation
-    @conversation ||= Conversation.where(conversation_params).find_by(
+    @conversation ||= set_conversation_based_on_inbox_config
-      "additional_attributes ->> 'type' = 'instagram_direct_message'"
+  end
-    ) || build_conversation
+
+  def instagram_direct_message_conversation
+    Conversation.where(conversation_params)
+                .where("additional_attributes ->> 'type' = 'instagram_direct_message'")
+  end
+
+  def set_conversation_based_on_inbox_config
+    if @inbox.lock_to_single_conversation
+      instagram_direct_message_conversation.order(created_at: :desc).first || build_conversation
+    else
+      find_or_build_for_multiple_conversations
+    end
+  end
+
+  def find_or_build_for_multiple_conversations
+    last_conversation = instagram_direct_message_conversation.where.not(status: :resolved).order(created_at: :desc).first
+
+    return build_conversation if last_conversation.nil?
+
+    last_conversation
   end
 
   def message_content

app/builders/v2/report_builder.rb

@@ -54,6 +54,13 @@ class V2::ReportBuilder
     }
   end
 
+  def bot_summary
+    {
+      bot_resolutions_count: bot_resolutions.count,
+      bot_handoffs_count: bot_handoffs.count
+    }
+  end
+
   def conversation_metrics
     if params[:type].equal?(:account)
       live_conversations
@@ -71,6 +78,8 @@ class V2::ReportBuilder
        avg_first_response_time
        avg_resolution_time reply_time
        resolutions_count
+       bot_resolutions_count
+       bot_handoffs_count
        reply_time].include?(params[:metric])
   end
 
@@ -123,6 +132,7 @@ class V2::ReportBuilder
       unattended: @open_conversations.unattended.count
     }
     metric[:unassigned] = @open_conversations.unassigned.count if params[:type].equal?(:account)
+    metric[:pending] = @open_conversations.pending.count if params[:type].equal?(:account)
     metric
   end
 end

app/builders/v2/reports/agent_summary_builder.rb

@@ -3,6 +3,7 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
   def build
     set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
     set_grouped_avg_reply_time
     set_grouped_avg_first_response_time
     set_grouped_avg_resolution_time
@@ -27,6 +28,10 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
     @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
   end
 
+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events.where(name: 'conversation_resolved').group(group_by_key).count
+  end
+
   def group_by_key
     :user_id
   end
@@ -37,12 +42,14 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
   def prepare_report
     account.account_users.each_with_object([]) do |account_user, arr|
+      user_id = account_user.user_id
       arr << {
-        id: account_user.user_id,
+        id: user_id,
-        conversations_count: @grouped_conversations_count[account_user.user_id],
+        conversations_count: @grouped_conversations_count[user_id],
-        avg_resolution_time: @grouped_avg_resolution_time[account_user.user_id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[user_id],
-        avg_first_response_time: @grouped_avg_first_response_time[account_user.user_id],
+        avg_resolution_time: @grouped_avg_resolution_time[user_id],
-        avg_reply_time: @grouped_avg_reply_time[account_user.user_id]
+        avg_first_response_time: @grouped_avg_first_response_time[user_id],
+        avg_reply_time: @grouped_avg_reply_time[user_id]
       }
     end
   end

app/builders/v2/reports/bot_metrics_builder.rb

@@ -0,0 +1,54 @@
+class V2::Reports::BotMetricsBuilder
+  include DateRangeHelper
+  attr_reader :account, :params
+
+  def initialize(account, params)
+    @account = account
+    @params = params
+  end
+
+  def metrics
+    {
+      conversation_count: bot_conversations.count,
+      message_count: bot_messages.count,
+      resolution_rate: bot_resolution_rate.to_i,
+      handoff_rate: bot_handoff_rate.to_i
+    }
+  end
+
+  private
+
+  def bot_activated_inbox_ids
+    @bot_activated_inbox_ids ||= account.inboxes.filter(&:active_bot?).map(&:id)
+  end
+
+  def bot_conversations
+    @bot_conversations ||= account.conversations.where(inbox_id: bot_activated_inbox_ids).where(created_at: range)
+  end
+
+  def bot_messages
+    @bot_messages ||= account.messages.outgoing.where(conversation_id: bot_conversations.ids).where(created_at: range)
+  end
+
+  def bot_resolutions_count
+    account.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_resolved,
+                                                                                 created_at: range).distinct.count
+  end
+
+  def bot_handoffs_count
+    account.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_handoff,
+                                                                                 created_at: range).distinct.count
+  end
+
+  def bot_resolution_rate
+    return 0 if bot_conversations.count.zero?
+
+    bot_resolutions_count.to_f / bot_conversations.count * 100
+  end
+
+  def bot_handoff_rate
+    return 0 if bot_conversations.count.zero?
+
+    bot_handoffs_count.to_f / bot_conversations.count * 100
+  end
+end

app/builders/v2/reports/inbox_summary_builder.rb

@@ -0,0 +1,60 @@
+class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
+  pattr_initialize [:account!, :params!]
+
+  def build
+    set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
+    set_grouped_avg_reply_time
+    set_grouped_avg_first_response_time
+    set_grouped_avg_resolution_time
+    prepare_report
+  end
+
+  private
+
+  def set_grouped_conversations_count
+    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('inbox_id').count
+  end
+
+  def set_grouped_avg_resolution_time
+    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
+  end
+
+  def set_grouped_avg_first_response_time
+    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
+  end
+
+  def set_grouped_avg_reply_time
+    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
+  end
+
+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events.where(name: 'conversation_resolved').group(group_by_key).count
+  end
+
+  def group_by_key
+    :inbox_id
+  end
+
+  def reporting_events
+    @reporting_events ||= Current.account.reporting_events.where(created_at: range)
+  end
+
+  def prepare_report
+    account.inboxes.each_with_object([]) do |inbox, arr|
+      inbox_id = inbox.id
+      arr << {
+        id: inbox_id,
+        conversations_count: @grouped_conversations_count[inbox_id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[inbox_id],
+        avg_resolution_time: @grouped_avg_resolution_time[inbox_id],
+        avg_first_response_time: @grouped_avg_first_response_time[inbox_id],
+        avg_reply_time: @grouped_avg_reply_time[inbox_id]
+      }
+    end
+  end
+
+  def average_value_key
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+  end
+end

app/builders/v2/reports/team_summary_builder.rb

@@ -3,6 +3,7 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
   def build
     set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
     set_grouped_avg_reply_time
     set_grouped_avg_first_response_time
     set_grouped_avg_resolution_time
@@ -27,6 +28,10 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
     @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
   end
 
+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events.where(name: 'conversation_resolved').group(group_by_key).count
+  end
+
   def reporting_events
     @reporting_events ||= Current.account.reporting_events.where(created_at: range).joins(:conversation)
   end
@@ -40,6 +45,7 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
       arr << {
         id: team.id,
         conversations_count: @grouped_conversations_count[team.id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[team.id],
         avg_resolution_time: @grouped_avg_resolution_time[team.id],
         avg_first_response_time: @grouped_avg_first_response_time[team.id],
         avg_reply_time: @grouped_avg_reply_time[team.id]

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

@@ -19,7 +19,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
       account: Current.account
     )
 
-    builder.perform
+    @agent = builder.perform
   end
 
   def update

app/controllers/api/v1/accounts/channels/twilio_channels_controller.rb

@@ -2,13 +2,9 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts:
   before_action :authorize_request
 
   def create
-    ActiveRecord::Base.transaction do
+    process_create
-      authenticate_twilio
+  rescue StandardError => e
-      build_inbox
+    render_could_not_create_error(e.message)
-      setup_webhooks if @twilio_channel.sms?
-    rescue StandardError => e
-      render_could_not_create_error(e.message)
-    end
   end
 
   private
@@ -17,6 +13,14 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts:
     authorize ::Inbox
   end
 
+  def process_create
+    ActiveRecord::Base.transaction do
+      authenticate_twilio
+      build_inbox
+      setup_webhooks if @twilio_channel.sms?
+    end
+  end
+
   def authenticate_twilio
     client = if permitted_params[:api_key_sid].present?
                Twilio::REST::Client.new(permitted_params[:api_key_sid], permitted_params[:auth_token], permitted_params[:account_sid])

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

@@ -65,6 +65,10 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     contacts = result[:contacts]
     @contacts_count = result[:count]
     @contacts = fetch_contacts(contacts)
+  rescue CustomExceptions::CustomFilter::InvalidAttribute,
+         CustomExceptions::CustomFilter::InvalidOperator,
+         CustomExceptions::CustomFilter::InvalidValue => e
+    render_could_not_create_error(e.message)
   end
 
   def contactable_inboxes
@@ -148,7 +152,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   end
 
   def permitted_params
-    params.permit(:name, :identifier, :email, :phone_number, :avatar, :avatar_url, additional_attributes: {}, custom_attributes: {})
+    params.permit(:name, :identifier, :email, :phone_number, :avatar, :blocked, :avatar_url, additional_attributes: {}, custom_attributes: {})
   end
 
   def contact_custom_attributes

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

@@ -36,10 +36,18 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     end
   end
 
+  def update
+    @conversation.update!(permitted_update_params)
+  end
+
   def filter
     result = ::Conversations::FilterService.new(params.permit!, current_user).perform
     @conversations = result[:conversations]
     @conversations_count = result[:count]
+  rescue CustomExceptions::CustomFilter::InvalidAttribute,
+         CustomExceptions::CustomFilter::InvalidOperator,
+         CustomExceptions::CustomFilter::InvalidValue => e
+    render_could_not_create_error(e.message)
   end
 
   def mute
@@ -110,6 +118,11 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
 
   private
 
+  def permitted_update_params
+    # TODO: Move the other conversation attributes to this method and remove specific endpoints for each attribute
+    params.permit(:priority)
+  end
+
   def update_last_seen_on_conversation(last_seen_at, update_assignee)
     # rubocop:disable Rails/SkipsModelValidations
     @conversation.update_column(:agent_last_seen_at, last_seen_at)
@@ -176,3 +189,5 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     @conversation.assignee_id? && Current.user == @conversation.assignee
   end
 end
+
+Api::V1::Accounts::ConversationsController.prepend_mod_with('Api::V1::Accounts::ConversationsController')

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

@@ -33,10 +33,10 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def transcript
-    if permitted_params[:email].present? && conversation.present?
+    if conversation.present? && conversation.contact.present? && conversation.contact.email.present?
       ConversationReplyMailer.with(account: conversation.account).conversation_transcript(
         conversation,
-        permitted_params[:email]
+        conversation.contact.email
       )&.deliver_later
     end
     head :ok

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

@@ -0,0 +1,57 @@
+class Api::V2::Accounts::LiveReportsController < Api::V1::Accounts::BaseController
+  before_action :load_conversations, only: [:conversation_metrics, :grouped_conversation_metrics]
+  before_action :set_group_scope, only: [:grouped_conversation_metrics]
+
+  def conversation_metrics
+    render json: {
+      open: @conversations.open.count,
+      unattended: @conversations.open.unattended.count,
+      unassigned: @conversations.open.unassigned.count
+    }
+  end
+
+  def grouped_conversation_metrics
+    count_by_group = @conversations.open.group(@group_scope).count
+    unattended_by_group = @conversations.open.unattended.group(@group_scope).count
+    unassigned_by_group = @conversations.open.unassigned.group(@group_scope).count
+
+    group_metrics = count_by_group.map do |group_id, count|
+      metric = {
+        open: count,
+        unattended: unattended_by_group[group_id] || 0,
+        unassigned: unassigned_by_group[group_id] || 0
+      }
+      metric[@group_scope] = group_id
+      metric
+    end
+
+    render json: group_metrics
+  end
+
+  private
+
+  def set_group_scope
+    render json: { error: 'invalid group_by' }, status: :unprocessable_entity and return unless %w[
+      team_id
+      assignee_id
+    ].include?(permitted_params[:group_by])
+
+    @group_scope = permitted_params[:group_by]
+  end
+
+  def team
+    return unless permitted_params[:team_id]
+
+    @team ||= Current.account.teams.find(permitted_params[:team_id])
+  end
+
+  def load_conversations
+    scope = Current.account.conversations
+    scope = scope.where(team_id: team.id) if team.present?
+    @conversations = scope
+  end
+
+  def permitted_params
+    params.permit(:team_id, :group_by)
+  end
+end

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

@@ -14,6 +14,12 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     render json: summary_metrics
   end
 
+  def bot_summary
+    summary = V2::ReportBuilder.new(Current.account, current_summary_params).bot_summary
+    summary[:previous] = V2::ReportBuilder.new(Current.account, previous_summary_params).bot_summary
+    render json: summary
+  end
+
   def agents
     @report_data = generate_agents_report
     generate_csv('agents_report', 'api/v2/accounts/reports/agents')
@@ -48,6 +54,11 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     render json: conversation_metrics
   end
 
+  def bot_metrics
+    bot_metrics = V2::Reports::BotMetricsBuilder.new(Current.account, params).metrics
+    render json: bot_metrics
+  end
+
   private
 
   def generate_csv(filename, template)
@@ -120,8 +131,4 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     summary[:previous] = V2::ReportBuilder.new(Current.account, previous_summary_params).summary
     summary
   end
-
-  def conversation_metrics
-    V2::ReportBuilder.new(Current.account, conversation_params).conversation_metrics
-  end
 end

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

@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox]
 
   def agent
     render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -10,6 +10,10 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     render_report_with(V2::Reports::TeamSummaryBuilder)
   end
 
+  def inbox
+    render_report_with(V2::Reports::InboxSummaryBuilder)
+  end
+
   private
 
   def check_authorization

app/controllers/application_controller.rb

@@ -25,3 +25,4 @@ class ApplicationController < ActionController::Base
     }
   end
 end
+ApplicationController.include_mod_with('Concerns::ApplicationControllerConcern')

app/controllers/concerns/access_token_auth_helper.rb

@@ -1,6 +1,6 @@
 module AccessTokenAuthHelper
   BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create],
+    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create update],
     'api/v1/accounts/conversations/messages' => ['create'],
     'api/v1/accounts/conversations/assignments' => ['create']
   }.freeze

app/controllers/concerns/domain_helper.rb

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

app/controllers/concerns/switch_locale.rb

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

app/controllers/dashboard_controller.rb

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

app/controllers/devise_overrides/passwords_controller.rb

@@ -5,7 +5,7 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
   skip_before_action :authenticate_user!, raise: false
 
   def create
-    @user = User.find_by(email: params[:email])
+    @user = User.from_email(params[:email])
     if @user
       @user.send_reset_password_instructions
       build_response(I18n.t('messages.reset_password_success'), 200)

app/controllers/devise_overrides/sessions_controller.rb

@@ -4,6 +4,10 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   wrap_parameters format: []
   before_action :process_sso_auth_token, only: [:create]
 
+  def new
+    redirect_to login_page_url(error: 'access-denied')
+  end
+
   def create
     # Authenticate user via the temporary sso auth token
     if params[:sso_auth_token].present? && @resource.present?
@@ -21,6 +25,12 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
 
   private
 
+  def login_page_url(error: nil)
+    frontend_url = ENV.fetch('FRONTEND_URL', nil)
+
+    "#{frontend_url}/app/login?error=#{error}"
+  end
+
   def authenticate_resource_with_sso_token
     @token = @resource.create_token
     @resource.save!
@@ -33,7 +43,7 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   def process_sso_auth_token
     return if params[:email].blank?
 
-    user = User.find_by(email: params[:email])
+    user = User.from_email(params[:email])
     @resource = user if user&.valid_sso_auth_token?(params[:sso_auth_token])
   end
 end

app/controllers/platform/api/v1/users_controller.rb

@@ -8,7 +8,7 @@ class Platform::Api::V1::UsersController < PlatformController
   def show; end
 
   def create
-    @resource = (User.find_by(email: user_params[:email]) || User.new(user_params))
+    @resource = (User.from_email(user_params[:email]) || User.new(user_params))
     @resource.skip_confirmation!
     @resource.save!
     @platform_app.platform_app_permissibles.find_or_create_by!(permissible: @resource)

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

@@ -7,7 +7,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def index
     @articles = @portal.articles
-    @articles = @articles.search(list_params) if list_params.present?
+    search_articles
     order_by_sort_param
     @articles.page(list_params[:page]) if list_params[:page].present?
   end
@@ -16,6 +16,10 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   private
 
+  def search_articles
+    @articles = @articles.search(list_params) if list_params.present?
+  end
+
   def order_by_sort_param
     @articles = if list_params[:sort].present? && list_params[:sort] == 'views'
                   @articles.order_by_views
@@ -51,3 +55,5 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
     ChatwootMarkdownRenderer.new(content).render_article
   end
 end
+
+Public::Api::V1::Portals::ArticlesController.prepend_mod_with('Public::Api::V1::Portals::ArticlesController')

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

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

app/controllers/public_controller.rb

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

app/controllers/super_admin/application_controller.rb

@@ -5,6 +5,10 @@
 # If you want to add pagination or other controller-level concerns,
 # you're free to overwrite the RESTful controller actions.
 class SuperAdmin::ApplicationController < Administrate::ApplicationController
+  include ActionView::Helpers::TagHelper
+  include ActionView::Context
+
+  helper_method :render_vue_component
   # authenticiation done via devise : SuperAdmin Model
   before_action :authenticate_super_admin!
 
@@ -23,6 +27,17 @@ class SuperAdmin::ApplicationController < Administrate::ApplicationController
 
   private
 
+  def render_vue_component(component_name, props = {})
+    html_options = {
+      id: 'app',
+      data: {
+        component_name: component_name,
+        props: props.to_json
+      }
+    }
+    content_tag(:div, '', html_options)
+  end
+
   def invalid_action_perfomed
     # rubocop:disable Rails/I18nLocaleTexts
     flash[:error] = 'Invalid action performed'

app/finders/conversation_finder.rb

@@ -163,10 +163,14 @@ class ConversationFinder
     params[:page] || 1
   end
 
-  def conversations
+  def conversations_base_query
-    @conversations = @conversations.includes(
+    @conversations.includes(
       :taggings, :inbox, { assignee: { avatar_attachment: [:blob] } }, { contact: { avatar_attachment: [:blob] } }, :team, :contact_inbox
     )
+  end
+
+  def conversations
+    @conversations = conversations_base_query
 
     sort_by, sort_order = SORT_OPTIONS[params[:sort_by]] || SORT_OPTIONS['last_activity_at_desc']
     @conversations = @conversations.send(sort_by, sort_order)
@@ -178,3 +182,4 @@ class ConversationFinder
     end
   end
 end
+ConversationFinder.prepend_mod_with('ConversationFinder')

app/helpers/api/v2/accounts/heatmap_helper.rb

@@ -94,7 +94,8 @@ module Api::V2::Accounts::HeatmapHelper
   end
 
   def since_timestamp(date)
-    (date - 6.days).to_i.to_s
+    number_of_days = params[:days_before].present? ? params[:days_before].to_i.days : 6.days
+    (date - number_of_days).to_i.to_s
   end
 
   def until_timestamp(date)

app/helpers/application_helper.rb

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

app/helpers/contact_helper.rb

@@ -0,0 +1,83 @@
+module ContactHelper
+  def parse_name(full_name)
+    #  If the input is nil or not a string, return a hash with all values set to nil
+    return default_name_hash if invalid_name?(full_name)
+
+    # If the input is a number, return a hash with the number as the first name
+    return numeric_name_hash(full_name) if valid_number?(full_name)
+
+    full_name = full_name.squish
+
+    # If full name consists of only one word, consider it as the first name
+    return single_word_name_hash(full_name) if single_word?(full_name)
+
+    parts = split_name(full_name)
+    parts = handle_conjunction(parts)
+    build_name_hash(parts)
+  end
+
+  private
+
+  def default_name_hash
+    { first_name: nil, last_name: nil, middle_name: nil, prefix: nil, suffix: nil }
+  end
+
+  def invalid_name?(full_name)
+    !full_name.is_a?(String) || full_name.empty?
+  end
+
+  def numeric_name_hash(full_name)
+    { first_name: full_name, last_name: nil, middle_name: nil, prefix: nil, suffix: nil }
+  end
+
+  def valid_number?(full_name)
+    full_name.gsub(/\s+/, '').match?(/\A\+?\d+\z/)
+  end
+
+  def single_word_name_hash(full_name)
+    { first_name: full_name, last_name: nil, middle_name: nil, prefix: nil, suffix: nil }
+  end
+
+  def single_word?(full_name)
+    full_name.split.size == 1
+  end
+
+  def split_name(full_name)
+    full_name.split
+  end
+
+  def handle_conjunction(parts)
+    conjunctions = ['and', '&']
+    parts.each_index do |i|
+      next unless conjunctions.include?(parts[i]) && i.positive?
+
+      parts[i - 1] = [parts[i - 1], parts[i + 1]].join(' ')
+      parts.delete_at(i)
+      parts.delete_at(i)
+    end
+    parts
+  end
+
+  def build_name_hash(parts)
+    suffix = parts.pop if parts.last.match?(/(\w+\.|[IVXLM]+|[A-Z]+)$/)
+    last_name = parts.pop
+    prefix = parts.shift if parts.first.match?(/^\w+\./)
+    first_name = parts.shift
+    middle_name = parts.join(' ')
+
+    hash = {
+      first_name: first_name,
+      last_name: last_name,
+      prefix: prefix,
+      middle_name: middle_name,
+      suffix: suffix
+    }
+
+    # Reverse name if "," was used in Last, First notation.
+    if hash[:first_name] =~ /,$/
+      hash[:first_name] = hash[:last_name]
+      hash[:last_name] = Regexp.last_match.pre_match
+    end
+    hash
+  end
+end

app/helpers/filter_helper.rb

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

app/helpers/report_helper.rb

@@ -32,6 +32,14 @@ module ReportHelper
     (get_grouped_values resolutions).count
   end
 
+  def bot_resolutions_count
+    (get_grouped_values bot_resolutions).count
+  end
+
+  def bot_handoffs_count
+    (get_grouped_values bot_handoffs).count
+  end
+
   def conversations
     scope.conversations.where(account_id: account.id, created_at: range)
   end
@@ -49,6 +57,16 @@ module ReportHelper
                                                                                conversations: { status: :resolved }, created_at: range).distinct
   end
 
+  def bot_resolutions
+    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_resolved,
+                                                                               conversations: { status: :resolved }, created_at: range).distinct
+  end
+
+  def bot_handoffs
+    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_handoff,
+                                                                               created_at: range).distinct
+  end
+
   def avg_first_response_time
     grouped_reporting_events = (get_grouped_values scope.reporting_events.where(name: 'first_response', account_id: account.id))
     return grouped_reporting_events.average(:value_in_business_hours) if params[:business_hours]

app/javascript/dashboard/api/liveReports.js

@@ -0,0 +1,20 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class LiveReportsAPI extends ApiClient {
+  constructor() {
+    super('live_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getConversationMetric(params = {}) {
+    return axios.get(`${this.url}/conversation_metrics`, { params });
+  }
+
+  getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
+    return axios.get(`${this.url}/grouped_conversation_metrics`, {
+      params: { group_by: groupBy },
+    });
+  }
+}
+
+export default new LiveReportsAPI();

app/javascript/dashboard/api/reports.js

@@ -61,9 +61,9 @@ class ReportsAPI extends ApiClient {
     });
   }
 
-  getConversationTrafficCSV() {
+  getConversationTrafficCSV({ daysBefore = 6 } = {}) {
     return axios.get(`${this.url}/conversation_traffic`, {
-      params: { timezone_offset: getTimeOffset() },
+      params: { timezone_offset: getTimeOffset(), days_before: daysBefore },
     });
   }
 
@@ -84,6 +84,24 @@ class ReportsAPI extends ApiClient {
       params: { since, until, business_hours: businessHours },
     });
   }
+
+  getBotMetrics({ from, to } = {}) {
+    return axios.get(`${this.url}/bot_metrics`, {
+      params: { since: from, until: to },
+    });
+  }
+
+  getBotSummary({ from, to, groupBy, businessHours } = {}) {
+    return axios.get(`${this.url}/bot_summary`, {
+      params: {
+        since: from,
+        until: to,
+        type: 'account',
+        group_by: groupBy,
+        business_hours: businessHours,
+      },
+    });
+  }
 }
 
 export default new ReportsAPI();

app/javascript/dashboard/api/slaReports.js

@@ -0,0 +1,76 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class SLAReportsAPI extends ApiClient {
+  constructor() {
+    super('applied_slas', { accountScoped: true });
+  }
+
+  get({
+    from,
+    to,
+    assigned_agent_id,
+    inbox_id,
+    team_id,
+    sla_policy_id,
+    label_list,
+    page,
+  } = {}) {
+    return axios.get(this.url, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        team_id,
+        sla_policy_id,
+        label_list,
+        page,
+      },
+    });
+  }
+
+  download({
+    from,
+    to,
+    assigned_agent_id,
+    inbox_id,
+    team_id,
+    sla_policy_id,
+  } = {}) {
+    return axios.get(`${this.url}/download`, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        team_id,
+        sla_policy_id,
+      },
+    });
+  }
+
+  getMetrics({
+    from,
+    to,
+    assigned_agent_id,
+    inbox_id,
+    team_id,
+    label_list,
+    sla_policy_id,
+  } = {}) {
+    return axios.get(`${this.url}/metrics`, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        label_list,
+        team_id,
+        sla_policy_id,
+      },
+    });
+  }
+}
+
+export default new SLAReportsAPI();

app/javascript/dashboard/api/specs/reports.spec.js

@@ -111,6 +111,40 @@ describe('#Reports API', () => {
       });
     });
 
+    it('#getBotMetrics', () => {
+      reportsAPI.getBotMetrics({ from: 1621103400, to: 1621621800 });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v2/reports/bot_metrics',
+        {
+          params: {
+            since: 1621103400,
+            until: 1621621800,
+          },
+        }
+      );
+    });
+
+    it('#getBotSummary', () => {
+      reportsAPI.getBotSummary({
+        from: 1621103400,
+        to: 1621621800,
+        groupBy: 'date',
+        businessHours: true,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v2/reports/bot_summary',
+        {
+          params: {
+            since: 1621103400,
+            until: 1621621800,
+            type: 'account',
+            group_by: 'date',
+            business_hours: true,
+          },
+        }
+      );
+    });
+
     it('#getConversationMetric', () => {
       reportsAPI.getConversationMetric('account');
       expect(axiosMock.get).toHaveBeenCalledWith(

app/javascript/dashboard/api/specs/slaReports.spec.js

@@ -0,0 +1,102 @@
+import SLAReportsAPI from '../slaReports';
+import ApiClient from '../ApiClient';
+
+describe('#SLAReports API', () => {
+  it('creates correct instance', () => {
+    expect(SLAReportsAPI).toBeInstanceOf(ApiClient);
+    expect(SLAReportsAPI.apiVersion).toBe('/api/v1');
+    expect(SLAReportsAPI).toHaveProperty('get');
+    expect(SLAReportsAPI).toHaveProperty('getMetrics');
+  });
+
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('#get', () => {
+      SLAReportsAPI.get({
+        page: 1,
+        from: 1622485800,
+        to: 1623695400,
+        assigned_agent_id: 1,
+        inbox_id: 1,
+        team_id: 1,
+        sla_policy_id: 1,
+        label_list: ['label1'],
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/applied_slas', {
+        params: {
+          page: 1,
+          since: 1622485800,
+          until: 1623695400,
+          assigned_agent_id: 1,
+          inbox_id: 1,
+          team_id: 1,
+          sla_policy_id: 1,
+          label_list: ['label1'],
+        },
+      });
+    });
+    it('#getMetrics', () => {
+      SLAReportsAPI.getMetrics({
+        from: 1622485800,
+        to: 1623695400,
+        assigned_agent_id: 1,
+        inbox_id: 1,
+        team_id: 1,
+        sla_policy_id: 1,
+        label_list: ['label1'],
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/applied_slas/metrics',
+        {
+          params: {
+            since: 1622485800,
+            until: 1623695400,
+            assigned_agent_id: 1,
+            inbox_id: 1,
+            team_id: 1,
+            sla_policy_id: 1,
+            label_list: ['label1'],
+          },
+        }
+      );
+    });
+    it('#download', () => {
+      SLAReportsAPI.download({
+        from: 1622485800,
+        to: 1623695400,
+        assigned_agent_id: 1,
+        inbox_id: 1,
+        team_id: 1,
+        sla_policy_id: 1,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/applied_slas/download',
+        {
+          params: {
+            since: 1622485800,
+            until: 1623695400,
+            assigned_agent_id: 1,
+            inbox_id: 1,
+            team_id: 1,
+            sla_policy_id: 1,
+          },
+        }
+      );
+    });
+  });
+});

app/javascript/dashboard/api/summaryReports.js

@@ -0,0 +1,40 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class SummaryReportsAPI extends ApiClient {
+  constructor() {
+    super('summary_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getTeamReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/team`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+
+  getAgentReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/agent`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+
+  getInboxReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/inbox`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+}
+
+export default new SummaryReportsAPI();

app/javascript/dashboard/assets/scss/_date-picker.scss

@@ -1,6 +1,13 @@
 @import '~vue2-datepicker/scss/index';
 
 .date-picker {
+  // To be removed one SLA reports date picker is created
+  &.small {
+    .mx-input {
+      @apply h-8 text-sm;
+    }
+  }
+
   &.no-margin {
     .mx-input {
       @apply mb-0;

app/javascript/dashboard/assets/scss/_foundation-custom.scss

@@ -1,58 +0,0 @@
-.button {
-  font-family: $body-font-family;
-  font-weight: $font-weight-medium;
-
-  &.round {
-    border-radius: 1000px;
-  }
-}
-
-select {
-  height: 2.5rem;
-}
-
-.card {
-  margin-bottom: var(--space-small);
-  padding: var(--space-normal);
-}
-
-code {
-  border: 0;
-  font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
-    '"Liberation Mono"', '"Courier New"', 'monospace';
-  font-size: $font-size-mini;
-
-  &.hljs {
-    background: $color-background;
-    border-radius: var(--border-radius-large);
-    padding: $space-two;
-    @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100;
-  }
-}
-
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.text-capitalize {
-  text-transform: capitalize;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-// remove when grid gutters are fixed
-.columns.with-right-space {
-  padding-right: var(--space-normal);
-}
-
-.badge {
-  border-radius: var(--border-radius-normal);
-}
-
-.padding-right-small {
-  padding-right: var(--space-one);
-}

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -1,623 +0,0 @@
-//  Foundation for Sites Settings
-//  -----------------------------
-//
-//  Table of Contents:
-//
-//   1. Global
-//   2. Breakpoints
-//   3. The Grid
-//   4. Base Typography
-//   5. Typography Helpers
-//   6. Abide
-//   7. Accordion
-//   8. Accordion Menu
-//   9. Badge
-//  10. Breadcrumbs
-//  11. Button
-//  12. Button Group
-//  13. Callout
-//  14. Card
-//  15. Close Button
-//  16. Drilldown
-//  17. Dropdown
-//  18. Dropdown Menu
-//  19. Forms
-//  20. Label
-//  21. Media Object
-//  22. Menu
-//  23. Meter
-//  24. Off-canvas
-//  25. Orbit
-//  26. Pagination
-//  27. Progress Bar
-//  28. Responsive Embed
-//  29. Reveal
-//  30. Slider
-//  31. Switch
-//  32. Table
-//  33. Tabs
-//  34. Thumbnail
-//  35. Title Bar
-//  36. Tooltip
-//  37. Top Bar
-
-@import '~foundation-sites/scss/util/util';
-// 1. Global
-// ---------
-
-// Disable contrast warnings in Foundation.
-$contrast-warnings: false;
-
-$global-font-size: 16px;
-$global-width: 100%;
-$global-lineheight: 1.5;
-$foundation-palette: (primary: $color-woot,
-  secondary: #5d7592,
-  success: #44ce4b,
-  warning: #ffc532,
-  alert: #ff382d);
-$light-gray: #c0ccda;
-$medium-gray: #8492a6;
-$dark-gray: $color-gray;
-$black: #000;
-$white: #fff;
-$body-background: $white;
-$body-font-color: $color-body;
-$body-font-family: 'PlusJakarta',
--apple-system,
-system-ui,
-BlinkMacSystemFont,
-"Segoe UI",
-Roboto,
-"Helvetica Neue",
-Tahoma,
-Arial,
-sans-serif;
-$body-antialiased: true;
-$global-margin: $space-small;
-$global-padding: $space-small;
-$global-weight-normal: normal;
-$global-weight-bold: bold;
-$global-radius: 0;
-$global-text-direction: ltr;
-$global-flexbox: false;
-$print-transparent-backgrounds: true;
-
-@include add-foundation-colors;
-
-// 2. Breakpoints
-// --------------
-
-$breakpoints: (small: 0,
-  medium: 640px,
-  large: 1024px,
-  xlarge: 1200px,
-  xxlarge: 1400px,
-  xxxlarge: 1600px,
-);
-$print-breakpoint: large;
-$breakpoint-classes: (small medium large);
-
-// 3. The Grid
-// -----------
-
-$grid-row-width: $global-width;
-$grid-column-count: 12;
-$grid-column-gutter: (small: $zero,
-  medium: $zero);
-$grid-column-align-edge: true;
-$block-grid-max: 8;
-
-// 4. Base Typography
-// ------------------
-
-$header-font-family: $body-font-family;
-$header-font-weight: $font-weight-medium;
-$header-font-style: normal;
-$font-family-monospace: $body-font-family;
-$header-color: $color-heading;
-$header-lineheight: 1.4;
-$header-margin-bottom: 0.3125rem;
-$header-styles: (small: ("h1": ("font-size": 24),
-    "h2": ("font-size": 20),
-    "h3": ("font-size": 19),
-    "h4": ("font-size": 18),
-    "h5": ("font-size": 17),
-    "h6": ("font-size": 16)),
-  medium: ("h1": ("font-size": 48),
-    "h2": ("font-size": 40),
-    "h3": ("font-size": 31),
-    "h4": ("font-size": 25),
-    "h5": ("font-size": 20),
-    "h6": ("font-size": 16)));
-$header-text-rendering: optimizeLegibility;
-$small-font-size: 80%;
-$header-small-font-color: $medium-gray;
-$paragraph-lineheight: 1.65;
-$paragraph-margin-bottom: var(--space-small);
-$paragraph-text-rendering: optimizeLegibility;
-$code-color: $black;
-$code-font-family: $font-family-monospace;
-$code-font-weight: $global-weight-normal;
-$code-background: $light-gray;
-$code-border: 1px solid $medium-gray;
-$code-padding: rem-calc(2 5 1);
-$anchor-color: $primary-color;
-$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
-$anchor-text-decoration: none;
-$anchor-text-decoration-hover: none;
-$hr-width: $global-width;
-$hr-border: 1px solid $medium-gray;
-$hr-margin: rem-calc(20) auto;
-$list-lineheight: $paragraph-lineheight;
-$list-margin-bottom: $paragraph-margin-bottom;
-$list-style-type: disc;
-$list-style-position: outside;
-$list-side-margin: 0.78125rem;
-$list-nested-side-margin: 0.78125rem;
-$defnlist-margin-bottom: 0.6875rem;
-$defnlist-term-weight: $global-weight-bold;
-$defnlist-term-margin-bottom: 0.1875rem;
-$blockquote-color: $dark-gray;
-$blockquote-padding: rem-calc(9 20 0 19);
-$blockquote-border: 1px solid $medium-gray;
-$cite-font-size: rem-calc(13);
-$cite-color: $dark-gray;
-$cite-pseudo-content: '\2014 \0020';
-$keystroke-font: $font-family-monospace;
-$keystroke-color: $black;
-$keystroke-background: $light-gray;
-$keystroke-padding: rem-calc(2 4 0);
-$keystroke-radius: $global-radius;
-$abbr-underline: 1px dotted $black;
-
-// 5. Typography Helpers
-// ---------------------
-
-$lead-font-size: $global-font-size * 1.25;
-$lead-lineheight: 1.6;
-$subheader-lineheight: 1.4;
-$subheader-color: $dark-gray;
-$subheader-font-weight: $global-weight-normal;
-$subheader-margin-top: 0.125rem;
-$subheader-margin-bottom: 0.3125rem;
-$stat-font-size: 1.5625rem;
-
-// 6. Abide
-// --------
-
-$abide-inputs: true;
-$abide-labels: true;
-$input-background-invalid: get-color(alert);
-$form-label-color-invalid: get-color(alert);
-$input-error-color: get-color(alert);
-$input-error-font-size: rem-calc(12);
-$input-error-font-weight: $global-weight-bold;
-
-// 7. Accordion
-// ------------
-
-$accordion-background: $white;
-$accordion-plusminus: true;
-$accordion-title-font-size: rem-calc(12);
-$accordion-item-color: $primary-color;
-$accordion-item-background-hover: $light-gray;
-$accordion-item-padding: 0.78125rem 0.625rem;
-$accordion-content-background: $white;
-$accordion-content-border: 1px solid $light-gray;
-$accordion-content-color: $body-font-color;
-$accordion-content-padding: 0.625rem;
-
-// 8. Accordion Menu
-// -----------------
-
-$accordionmenu-arrows: true;
-$accordionmenu-arrow-color: $primary-color;
-$accordionmenu-arrow-size: 6px;
-
-// 9. Badge
-// --------
-
-$badge-background: $primary-color;
-$badge-color: $white;
-$badge-color-alt: $black;
-$badge-palette: $foundation-palette;
-$badge-padding: var(--space-smaller);
-$badge-minwidth: 2.1em;
-$badge-font-size: var(--font-size-nano);
-
-// 10. Breadcrumbs
-// ---------------
-
-$breadcrumbs-margin: 0 0 $global-margin 0;
-$breadcrumbs-item-font-size: rem-calc(11);
-$breadcrumbs-item-color: $primary-color;
-$breadcrumbs-item-color-current: $black;
-$breadcrumbs-item-color-disabled: $medium-gray;
-$breadcrumbs-item-margin: 0.46875rem;
-$breadcrumbs-item-uppercase: true;
-$breadcrumbs-item-slash: true;
-
-// 11. Button
-// ----------
-
-$button-padding: var(--space-smaller) 1em;
-$button-margin: 0 0 $global-margin 0;
-$button-fill: solid;
-$button-background: $primary-color;
-$button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $white;
-$button-color-alt: $white;
-$button-radius: var(--border-radius-normal);
-$button-sizes: (tiny: var(--font-size-micro),
-  small: var(--font-size-mini),
-  default: var(--font-size-small),
-  large: var(--font-size-medium));
-$button-palette: $foundation-palette;
-$button-opacity-disabled: 0.4;
-$button-background-hover-lightness: -20%;
-$button-hollow-hover-lightness: -50%;
-$button-transition: background-color 0.25s ease-out,
-color 0.25s ease-out;
-
-// 12. Button Group
-// ----------------
-
-$buttongroup-margin: 0;
-$buttongroup-spacing: 0;
-$buttongroup-child-selector: '.button';
-$buttongroup-expand-max: 6;
-$buttongroup-radius-on-each: false;
-
-// 13. Callout
-// -----------
-
-$callout-background: $white;
-$callout-background-fade: 85%;
-$callout-border: 1px solid rgba($black, 0.25);
-$callout-margin: 0 0 0.625rem 0;
-$callout-padding: 0.625rem;
-$callout-font-color: $body-font-color;
-$callout-font-color-alt: $body-background;
-$callout-radius: $global-radius;
-$callout-link-tint: 30%;
-
-// 14. Card
-// --------
-
-$card-background: $white;
-$card-font-color: $body-font-color;
-$card-divider-background: $light-gray;
-$card-border: 1px solid var(--color-border);
-$card-shadow: var(--shadow-small);
-$card-border-radius: var(--border-radius-normal);
-$card-padding: var(--space-small);
-$card-margin: $global-margin;
-
-// 15. Close Button
-// ----------------
-
-$closebutton-position: right top;
-$closebutton-offset-horizontal: (small: 0.66rem,
-  medium: 1rem);
-$closebutton-offset-vertical: (small: 0.33em,
-  medium: 0.5rem);
-$closebutton-size: (small: 1.5em,
-  medium: 2em);
-$closebutton-lineheight: 1;
-$closebutton-color: $dark-gray;
-$closebutton-color-hover: $black;
-
-// 16. Drilldown
-// -------------
-
-$drilldown-transition: transform 0.15s linear;
-$drilldown-arrows: true;
-$drilldown-arrow-color: $primary-color;
-$drilldown-arrow-size: 6px;
-$drilldown-background: $white;
-
-// 17. Dropdown
-// ------------
-
-$dropdown-padding: 0.625rem;
-$dropdown-background: $body-background;
-$dropdown-border: 1px solid $medium-gray;
-$dropdown-font-size: 0.625rem;
-$dropdown-width: 300px;
-$dropdown-radius: $global-radius;
-$dropdown-sizes: (tiny: 100px,
-  small: 200px,
-  large: 400px);
-
-// 18. Dropdown Menu
-// -----------------
-
-$dropdownmenu-arrows: true;
-$dropdownmenu-arrow-color: $anchor-color;
-$dropdownmenu-arrow-size: 6px;
-$dropdownmenu-min-width: 200px;
-$dropdownmenu-background: $white;
-$dropdownmenu-border: 1px solid $medium-gray;
-
-// 19. Forms
-// ---------
-
-$fieldset-border: 1px solid $light-gray;
-$fieldset-padding: $space-two;
-$fieldset-margin: $space-one $zero;
-$legend-padding: rem-calc(0 3);
-$form-spacing: $space-normal;
-$helptext-color: $color-body;
-$helptext-font-size: $font-size-small;
-$helptext-font-style: italic;
-$input-prefix-color: $color-body;
-$input-prefix-background: var(--b-100);
-$input-prefix-border: 1px solid $color-border;
-$input-prefix-padding: 0.625rem;
-$form-label-color: $color-body;
-$form-label-font-size: rem-calc(14);
-$form-label-font-weight: $font-weight-medium;
-$form-label-line-height: 1.8;
-$select-background: $white;
-$select-triangle-color: $dark-gray;
-$select-radius: var(--border-radius-normal);
-$input-color: $color-body;
-$input-placeholder-color: $light-gray;
-$input-font-family: inherit;
-$input-font-size: $font-size-default;
-$input-font-weight: $global-weight-normal;
-$input-background: $white;
-$input-background-focus: $white;
-$input-background-disabled: $light-gray;
-$input-border: 1px solid var(--s-200);
-$input-border-focus: 1px solid lighten($primary-color, 15%);
-$input-shadow: 0;
-$input-shadow-focus: 0;
-$input-cursor-disabled: not-allowed;
-$input-transition: border-color 0.25s ease-in-out;
-$input-number-spinners: true;
-$input-radius: var(--border-radius-normal);
-$form-button-radius: var(--border-radius-normal);
-
-// 20. Label
-// ---------
-
-$label-background: $white;
-$label-color: $black;
-$label-color-alt: $black;
-$label-palette: $foundation-palette;
-$label-font-size: $font-size-mini;
-$label-padding: $space-smaller $space-small;
-$label-radius: var(--border-radius-small);
-
-// 21. Media Object
-// ----------------
-
-$mediaobject-margin-bottom: $global-margin;
-$mediaobject-section-padding: $global-padding;
-$mediaobject-image-width-stacked: 100%;
-
-// 22. Menu
-// --------
-
-$menu-margin: 0;
-$menu-margin-nested: $space-medium;
-$menu-item-padding: $space-slab;
-$menu-item-color-active: $white;
-$menu-item-background-active: $color-background;
-$menu-icon-spacing: 0.15625rem;
-$menu-item-background-hover: $light-gray;
-$menu-border: $light-gray;
-
-// 23. Meter
-// ---------
-
-$meter-height: 0.625rem;
-$meter-radius: $global-radius;
-$meter-background: $medium-gray;
-$meter-fill-good: $success-color;
-$meter-fill-medium: $warning-color;
-$meter-fill-bad: $alert-color;
-
-// 24. Off-canvas
-// --------------
-
-$offcanvas-sizes: (small: 14.375,
-  medium: 14.375,
-);
-$offcanvas-vertical-sizes: (small: 14.375,
-  medium: 14.375,
-);
-$offcanvas-background: $light-gray;
-$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
-$offcanvas-push-zindex: 1;
-$offcanvas-overlap-zindex: 10;
-$offcanvas-reveal-zindex: 1;
-$offcanvas-transition-length: 0.5s;
-$offcanvas-transition-timing: ease;
-$offcanvas-fixed-reveal: true;
-$offcanvas-exit-background: rgba($white, 0.25);
-$maincontent-class: 'off-canvas-content';
-
-// 25. Orbit
-// ---------
-
-$orbit-bullet-background: $medium-gray;
-$orbit-bullet-background-active: $dark-gray;
-$orbit-bullet-diameter: 0.75rem;
-$orbit-bullet-margin: 0.0625rem;
-$orbit-bullet-margin-top: 0.5rem;
-$orbit-bullet-margin-bottom: 0.5rem;
-$orbit-caption-background: rgba($black, 0.5);
-$orbit-caption-padding: 0.625rem;
-$orbit-control-background-hover: rgba($black, 0.5);
-$orbit-control-padding: 0.625rem;
-$orbit-control-zindex: 10;
-
-// 26. Pagination
-// --------------
-
-$pagination-font-size: rem-calc(14);
-$pagination-margin-bottom: $global-margin;
-$pagination-item-color: $black;
-$pagination-item-padding: rem-calc(3 10);
-$pagination-item-spacing: rem-calc(1);
-$pagination-radius: $global-radius;
-$pagination-item-background-hover: $light-gray;
-$pagination-item-background-current: $primary-color;
-$pagination-item-color-current: $white;
-$pagination-item-color-disabled: $medium-gray;
-$pagination-ellipsis-color: $black;
-$pagination-mobile-items: false;
-$pagination-mobile-current-item: false;
-$pagination-arrows: true;
-
-// 27. Progress Bar
-// ----------------
-
-$progress-height: 0.625rem;
-$progress-background: $medium-gray;
-$progress-margin-bottom: $global-margin;
-$progress-meter-background: $primary-color;
-$progress-radius: $global-radius;
-
-// 28. Responsive Embed
-// --------------------
-
-$responsive-embed-margin-bottom: rem-calc(16);
-$responsive-embed-ratios: (default: 4 by 3,
-  widescreen: 16 by 9);
-
-// 29. Reveal
-// ----------
-
-$reveal-background: $white;
-$reveal-width: 600px;
-$reveal-max-width: $global-width;
-$reveal-padding: $global-padding;
-$reveal-border: 1px solid $medium-gray;
-$reveal-radius: $global-radius;
-$reveal-zindex: 1005;
-$reveal-overlay-background: rgba($black, 0.45);
-
-// 30. Slider
-// ----------
-
-$slider-width-vertical: 0.3125rem;
-$slider-transition: all 0.2s ease-in-out;
-$slider-height: 0.3125rem;
-$slider-background: $light-gray;
-$slider-fill-background: $medium-gray;
-$slider-handle-height: 0.875rem;
-$slider-handle-width: 0.875rem;
-$slider-handle-background: $primary-color;
-$slider-opacity-disabled: 0.25;
-$slider-radius: $global-radius;
-
-// 31. Switch
-// ----------
-
-$switch-background: $light-gray;
-$switch-background-active: $primary-color;
-$switch-height: $space-two;
-$switch-height-tiny: $space-slab;
-$switch-height-small: $space-normal;
-$switch-height-large: $space-large;
-$switch-radius: $space-large;
-$switch-margin: $global-margin;
-$switch-paddle-background: $white;
-$switch-paddle-offset: $space-micro;
-$switch-paddle-radius: $space-large;
-$switch-paddle-transition: all 0.15s ease-out;
-
-// 32. Table
-// ---------
-
-$table-background: transparent;
-$table-color-scale: 5%;
-$table-border: 1px solid transparent;
-$table-padding: rem-calc(8 10 10);
-$table-hover-scale: 2%;
-$table-row-hover: darken($table-background, $table-hover-scale);
-$table-row-stripe-hover: darken($table-background,
-  $table-color-scale + $table-hover-scale);
-$table-is-striped: false;
-$table-striped-background: smart-scale($table-background, $table-color-scale);
-$table-stripe: even;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2);
-$table-head-row-hover: darken($table-head-background, $table-hover-scale);
-$table-foot-background: smart-scale($table-background, $table-color-scale);
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
-$table-head-font-color: $body-font-color;
-$table-foot-font-color: $body-font-color;
-$show-header-for-stacked: false;
-
-// 33. Tabs
-// --------
-
-$tab-margin: 0;
-
-$tab-background: transparent;
-$tab-background-active: transparent;
-$tab-item-font-size: $font-size-small;
-$tab-item-background-hover: transparent;
-$tab-item-padding: $space-one $zero;
-$tab-color: $primary-color;
-$tab-active-color: $primary-color;
-$tab-expand-max: 6;
-$tab-content-background: transparent;
-$tab-content-border: transparent;
-$tab-content-color: foreground($tab-background, $primary-color);
-$tab-content-padding: 0.625rem;
-
-// 34. Thumbnail
-// -------------
-
-$thumbnail-border: solid 4px $white;
-$thumbnail-margin-bottom: $global-margin;
-$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
-$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
-$thumbnail-transition: box-shadow 200ms ease-out;
-$thumbnail-radius: $global-radius;
-
-// 35. Title Bar
-// -------------
-
-$titlebar-background: $black;
-$titlebar-color: $white;
-$titlebar-padding: 0.3125rem;
-$titlebar-text-font-weight: bold;
-$titlebar-icon-color: $white;
-$titlebar-icon-color-hover: $medium-gray;
-$titlebar-icon-spacing: 0.15625rem;
-
-// 36. Tooltip
-// -----------
-
-$has-tip-font-weight: $global-weight-bold;
-$has-tip-border-bottom: dotted 1px $dark-gray;
-$tooltip-background-color: $black;
-$tooltip-color: $white;
-$tooltip-padding: 0.46875rem;
-$tooltip-font-size: $font-size-mini;
-$tooltip-pip-width: 0.46875rem;
-$tooltip-pip-height: $tooltip-pip-width * 0.866;
-$tooltip-radius: $global-radius;
-
-// 37. Top Bar
-// -----------
-
-$topbar-padding: 0.3125;
-$topbar-background: $light-gray;
-$topbar-submenu-background: $topbar-background;
-$topbar-title-spacing: 0.3125 0.625rem 0.3125 0;
-$topbar-input-width: 200px;
-$topbar-unstack-breakpoint: medium;
-
-
-// Internal variable that contains the flex justifying options
-$-zf-flex-justify: -zf-flex-justify($global-text-direction);
-
-$menu-items-padding: $space-one;
-$xy-grid: false;

app/javascript/dashboard/assets/scss/_helper-classes.scss

@@ -1,64 +1,22 @@
-.bg-light {
+// loader class
-  @apply bg-slate-25 dark:bg-slate-800;
-}
-
-.flex-center {
-  @include flex-align(center, middle);
-  display: flex;
-}
-
-.bottom-space-fix {
-  margin-bottom: auto;
-}
-
-.full-height {
-  @include full-height();
-}
-
 .spinner {
   @include color-spinner();
-  display: inline-block;
+  @apply inline-block h-6 py-0 px-6 relative align-middle w-6;
-  height: $space-medium;
-  padding: $zero $space-medium;
-  position: relative;
-  vertical-align: middle;
-  width: $space-medium;
 
   &.message {
     @include normal-shadow;
-    background: $color-white;
+    @apply bg-white dark:bg-slate-800 rounded-full left-0 my-3 mx-auto p-4 top-0;
-    border-radius: $space-large;
-    left: 0;
-    margin: $space-slab auto;
-    padding: $space-normal;
-    top: 0;
 
     &::before {
-      margin-left: -$space-slab;
+      @apply -ml-3 -mt-3;
-      margin-top: -$space-slab;
     }
   }
 
   &.small {
-    height: $space-normal;
+    @apply h-4 w-4;
-    width: $space-normal;
 
     &::before {
-      height: $space-normal;
+      @apply h-4 -mt-2 w-4;
-      margin-top: -$space-small;
-      width: $space-normal;
     }
   }
 }
-
-.justify-space-between {
-  justify-content: space-between;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.h-full {
-  height: 100%;
-}

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

@@ -1,5 +1,19 @@
+// scss-lint:disable SpaceAfterPropertyColon
+@import 'shared/assets/fonts/inter';
+// Inter,
 html,
 body {
+  font-family:
+    'PlusJakarta',
+    -apple-system,
+    system-ui,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Tahoma,
+    Arial,
+    sans-serif !important;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   height: 100%;

app/javascript/dashboard/assets/scss/_rtl.scss

@@ -131,37 +131,12 @@
       }
     }
 
-    .search-header--wrap {
-      .search--input {
-        text-align: right;
-      }
-
-      .layout-switch__container {
-        transform: rotate(180deg);
-      }
-    }
-
     // Basic filter dropdown
     .basic-filter {
       left: 0;
       right: unset;
     }
 
-    // Card label
-    .label-container {
-      .label {
-        margin-left: var(--space-smaller);
-        margin-right: 0;
-      }
-    }
-
-    // Secondary sidebar toggle button
-    .toggle-sidebar {
-      margin-left: 0;
-      margin-right: var(--space-minus-small);
-      transform: rotate(180deg);
-    }
-
     // Bulk actions
     .bulk-action__container {
       .triangle {
@@ -202,22 +177,6 @@
     }
   }
 
-  // Notification panel
-  .notification-wrap {
-    left: 0;
-    right: var(--space-jumbo);
-
-    .action-button {
-      margin-left: var(--space-small);
-      margin-right: 0;
-    }
-
-    .notification-content--wrap {
-      margin-left: 0;
-      margin-right: var(--space-small);
-    }
-  }
-
   //   Help center
   .article-container .row--article-block {
     td:last-child {
@@ -324,10 +283,6 @@
 
   // Other changes
 
-  .account-selector--wrap {
-    direction: initial;
-  }
-
   .colorpicker--chrome {
     direction: initial;
   }
@@ -347,9 +302,4 @@
   .contact--form .input-group {
     direction: initial;
   }
-
-  // scss-lint:disable QualifyingElement
-  .dropdown-menu--header > span.title {
-    text-align: right;
-  }
 }

app/javascript/dashboard/assets/scss/_typography.scss

@@ -1,33 +0,0 @@
-.page-title {
-  font-size: $font-size-big;
-}
-
-.page-sub-title {
-  font-size: $font-size-large;
-  word-wrap: break-word;
-}
-
-.block-title {
-  font-size: $font-size-medium;
-}
-
-.sub-block-title {
-  font-size: $font-size-default;
-}
-
-.text-block-title {
-  font-size: $font-size-small;
-}
-
-.text-muted {
-  color: var(--s-300);
-}
-
-a {
-  font-size: $font-size-small;
-}
-
-p {
-  font-size: $font-size-small;
-  word-spacing: .12em;
-}

app/javascript/dashboard/assets/scss/_utility-helpers.scss

@@ -1,73 +0,0 @@
-.margin-bottom-small {
-  margin-bottom: var(--space-small);
-}
-
-.margin-right-smaller {
-  margin-right: var(--space-smaller);
-}
-
-.margin-left-minus-slab {
-  margin-left: var(--space-minus-slab);
-}
-
-.margin-right-minus-slab {
-  margin-right: var(--space-minus-slab);
-}
-
-.fs-small {
-  font-size: var(--font-size-small);
-}
-
-.fs-default {
-  font-size: var(--font-size-default);
-}
-
-.fw-medium {
-  font-weight: var(--font-weight-medium);
-}
-
-.p-normal {
-  padding: var(--space-normal);
-}
-
-.overflow-scroll {
-  overflow: scroll;
-}
-
-.overflow-auto {
-  overflow: auto;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.border-right {
-  @apply border-r border-slate-50 dark:border-slate-700;
-}
-
-.border-left {
-  border-left: 1px solid var(--color-border);
-}
-
-.text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.flex-between {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-
-.flex-end {
-  display: flex;
-  justify-content: end;
-}
-
-.flex-align-center {
-  align-items: center;
-  display: flex;
-}

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

@@ -15,63 +15,28 @@
 @import 'variables';
 
 @import 'mixins';
-@import 'foundation-settings';
 @import 'helper-classes';
 @import 'formulate';
 @import 'date-picker';
 
-@import 'foundation-sites/scss/foundation';
-
-@include foundation-everything($flex: true);
-
-@include foundation-prototype-text-utilities;
-@include foundation-prototype-text-transformation;
-@include foundation-prototype-text-decoration;
-@include foundation-prototype-font-styling;
-@include foundation-prototype-list-style-type;
-@include foundation-prototype-rounded;
-@include foundation-prototype-bordered;
-@include foundation-prototype-shadow;
-@include foundation-prototype-separator;
-@include foundation-prototype-overflow;
-@include foundation-prototype-display;
-@include foundation-prototype-position;
-@include foundation-prototype-border-box;
-@include foundation-prototype-border-none;
-@include foundation-prototype-sizing;
-@include foundation-prototype-spacing;
-
-@import 'typography';
 @import 'layout';
 @import 'animations';
-@import 'foundation-custom';
 @import 'rtl';
 
+@import 'widgets/base';
 @import 'widgets/buttons';
-@import 'widgets/conv-header';
-@import 'widgets/conversation-card';
 @import 'widgets/conversation-view';
-@import 'widgets/forms';
-@import 'widgets/login';
-@import 'widgets/modal';
-@import 'widgets/reply-box';
-@import 'widgets/report';
-@import 'widgets/search-box';
-@import 'widgets/sidemenu';
-@import 'widgets/snackbar';
-@import 'widgets/states';
-@import 'widgets/status-bar';
 @import 'widgets/tabs';
 @import 'widgets/woot-tables';
 
-@import 'views/settings/inbox';
-@import 'views/settings/integrations';
-
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';
 @import '~shared/assets/stylesheets/ionicons';
-@import 'utility-helpers';
 
 .tooltip {
   @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
 }
+
+.hide {
+  @apply hidden;
+}

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

@@ -1,46 +1,7 @@
 .dropdown-pane {
-  @include elegant-card;
+  @apply border rounded-lg hidden relative invisible shadow-lg border-slate-25 dark:border-slate-700 box-content p-2 w-fit z-[9999];
-  @include border-light;
-  box-sizing: content-box;
-  padding: var(--space-small);
-  width: fit-content;
-  z-index: var(--z-index-very-high);
 
   &.dropdown-pane--open {
-    @apply bg-white dark:bg-slate-800;
+    @apply bg-white absolute dark:bg-slate-800 block visible;
-    display: block;
-    visibility: visible;
-  }
-
-  &.dropdowm--bottom {
-    &::before {
-      @include arrow(top, var(--color-border-light), 14px);
-      position: absolute;
-      right: 6px;
-      top: -14px;
-    }
-
-    &::after {
-      @include arrow(top, $color-white, var(--space-slab));
-      position: absolute;
-      right: var(--space-small);
-      top: -12px;
-    }
-  }
-
-  &.dropdowm--top {
-    &::before {
-      @include arrow(bottom, var(--color-border-light), 14px);
-      bottom: -14px;
-      position: absolute;
-      right: 6px;
-    }
-
-    &::after {
-      @include arrow(bottom, $color-white, var(--space-slab));
-      bottom: -12px;
-      position: absolute;
-      right: var(--space-small);
-    }
   }
 }

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

@@ -97,6 +97,10 @@
 
   .multiselect__tags {
     @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
+
+    input {
+      @apply border-0 border-none;
+    }
   }
 
   .multiselect__tags-wrap {
@@ -149,6 +153,28 @@
 }
 
 .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,
@@ -180,7 +206,6 @@
   .multiselect--disabled .multiselect__select {
     @apply bg-transparent;
   }
-
 }
 
 .multiselect-wrap--medium {

app/javascript/dashboard/assets/scss/storybook.scss

@@ -13,20 +13,14 @@
 @import '~shared/assets/stylesheets/ionicons';
 
 @import 'mixins';
-@import 'foundation-settings';
 @import 'helper-classes';
-@import 'foundation-sites/scss/foundation';
-
-@include foundation-prototype-spacing;
-@include foundation-everything($flex: true);
 
 @import 'typography';
 @import 'layout';
 @import 'animations';
 
-@import 'foundation-custom';
 @import 'widgets/buttons';
-@import 'widgets/forms';
+@import 'widgets/base';
 
 @import 'plugins/multiselect';
 
@@ -36,7 +30,6 @@
 @import 'tailwindcss/utilities';
 @import 'widget/assets/scss/utilities';
 
-
 html,
 body {
   font-family: 'PlusJakarta', sans-serif;

app/javascript/dashboard/assets/scss/views/settings/inbox.scss

@@ -1,112 +1 @@
-.settings {
+// to be removed
-  @apply overflow-auto;
-}
-
-.wizard-box {
-  .item {
-    @apply cursor-pointer py-4 pr-4 pl-6 relative;
-
-    &::before,
-    &::after {
-      @apply bg-slate-75 dark:bg-slate-600 content-[''] h-full absolute top-5 w-0.5;
-    }
-
-    &::before {
-      @apply h-4 top-0;
-    }
-
-    &:first-child {
-      &::before {
-        @apply h-0;
-      }
-    }
-
-    &:last-child {
-      &::after {
-        @apply h-0;
-      }
-    }
-
-    &.active {
-      h3 {
-        @apply text-woot-500 dark:text-woot-500;
-      }
-
-      .step {
-        @apply bg-woot-500 dark:bg-woot-500;
-      }
-    }
-
-    &.over {
-      &::after {
-        @apply bg-woot-500 dark:bg-woot-500;
-      }
-
-      .step {
-        @apply bg-woot-500 dark:bg-woot-500;
-      }
-
-      & + .item {
-        &::before {
-          @apply bg-woot-500 dark:bg-woot-500;
-        }
-      }
-    }
-
-    h3 {
-      @apply text-slate-800 dark:text-slate-100 text-base pl-6;
-    }
-
-    .completed {
-      @apply text-green-500 dark:text-green-500 ml-1;
-    }
-
-    p {
-      @apply text-slate-600 dark:text-slate-300 text-sm m-0 pl-6;
-    }
-
-    .step {
-      @apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-[999] absolute text-center text-white dark:text-white text-xxs top-5;
-
-      i {
-        @apply text-xxs;
-      }
-    }
-  }
-}
-
-.wizard-body {
-  @apply border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6;
-
-  &.height-auto {
-    @apply h-auto;
-  }
-}
-
-.settings--content {
-  @apply my-2 mx-8;
-
-  .title {
-    @apply font-medium;
-  }
-
-  .code {
-    @apply bg-slate-50 dark:bg-slate-800 overflow-auto p-2.5 whitespace-nowrap;
-
-    code {
-      @apply bg-transparent border-0;
-    }
-  }
-}
-
-.login-init {
-  @apply pt-[30%] text-center;
-
-  p {
-    @apply p-6;
-  }
-
-  > a > img {
-    @apply w-60;
-  }
-}

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

@@ -0,0 +1,146 @@
+// scss-lint:disable QualifyingElement
+
+// Base typography
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-medium text-slate-800 dark:text-slate-50;
+}
+
+p {
+  text-rendering: optimizeLegibility;
+  word-spacing: 0.12em;
+
+  @apply mb-2 leading-[1.65] text-sm;
+
+  a {
+    @apply text-woot-500 dark:text-woot-500 cursor-pointer;
+  }
+}
+
+a {
+  @apply text-sm;
+}
+
+hr {
+  @apply clear-both max-w-full h-0 my-5 mx-0 border-slate-300 dark:border-slate-600;
+}
+
+ul,
+ol,
+dl {
+  @apply mb-2 list-disc list-outside leading-[1.65];
+}
+
+// Form elements
+label {
+  @apply text-slate-800 dark:text-slate-200 block m-0 leading-7 text-sm font-medium;
+
+  &.error {
+    input {
+      @apply mb-1;
+    }
+  }
+}
+
+.input-wrap,
+.help-text {
+  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
+
+  .help-text {
+    @apply font-normal text-slate-600 dark:text-slate-400;
+  }
+}
+
+// Focus outline removal
+.button,
+textarea,
+input:focus {
+  outline: none;
+}
+
+// Inputs
+input[type='text']:not(.reset-base),
+input[type='number']:not(.reset-base),
+input[type='password']:not(.reset-base),
+input[type='date']:not(.reset-base),
+input[type='email']:not(.reset-base),
+input[type='url']:not(.reset-base) {
+  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+
+  &[disabled] {
+    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
+  }
+}
+
+input[type='file'] {
+  @apply bg-white dark:bg-slate-800 leading-[1.15] mb-4;
+}
+
+// Select
+select {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
+  background-position: right -1rem center;
+  background-size: 9px 6px;
+  @apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2 rounded-md w-full text-base font-normal appearance-none transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+}
+
+// Textarea
+textarea {
+  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-16 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+
+  &[disabled] {
+    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
+  }
+}
+
+// Error handling
+.has-multi-select-error {
+  div.multiselect {
+    @apply mb-1;
+  }
+}
+
+.error {
+  input,
+  input:not([type]),
+  textarea,
+  select,
+  .multiselect > .multiselect__tags,
+  .multiselect:not(.no-margin) {
+    @apply border border-solid border-red-400 dark:border-red-400 mb-1;
+  }
+
+  .message {
+    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
+  }
+}
+
+.input-group.small {
+  input {
+    @apply text-sm h-8;
+  }
+
+  .error {
+    @apply border-red-400 dark:border-red-400;
+  }
+}
+
+// Code styling
+code {
+  font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
+    '"Liberation Mono"', '"Courier New"', 'monospace';
+  @apply text-xs border-0;
+
+  &.hljs {
+    @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50 rounded-lg p-5;
+
+    .hljs-number,
+    .hljs-string {
+      @apply text-red-800 dark:text-red-400;
+    }
+  }
+}

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -1,8 +1,40 @@
+// scss-lint:disable SpaceAfterPropertyColon
+// scss-lint:disable MergeableSelector
+button {
+  font-family: inherit;
+  transition:
+    background-color 0.25s ease-out,
+    color 0.25s ease-out;
+  @apply inline-block items-center mb-0 text-center align-middle cursor-pointer text-sm mt-0 mx-0 py-1 px-2.5 border border-solid border-transparent dark:border-transparent rounded-[0.3125rem];
+
+  &:disabled,
+  &.disabled {
+    @apply opacity-40 cursor-not-allowed;
+  }
+}
+
+.button-group {
+  @apply mb-0 flex flex-nowrap items-stretch;
+
+  .button {
+    flex: 0 0 auto;
+    @apply m-0 text-sm rounded-none first:rounded-tl-[0.3125rem] first:rounded-bl-[0.3125rem] last:rounded-tr-[0.3125rem] last:rounded-br-[0.3125rem] rtl:space-x-reverse;
+  }
+
+  .button--only-icon {
+    @apply w-10 justify-center pl-0 pr-0;
+  }
+}
+
+.back-button {
+  @apply m-0;
+}
+
 .button {
-  @apply items-center inline-flex h-10 mb-0 gap-2;
+  @apply items-center bg-woot-500 dark:bg-woot-500 px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
 
   .button__content {
-    @apply w-full;
+    @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
 
     img,
     svg {
@@ -10,12 +42,61 @@
     }
   }
 
+  &:hover {
+    @apply bg-woot-600 dark:bg-woot-600;
+  }
+
+  &:disabled,
+  &.disabled {
+    @apply opacity-40 cursor-not-allowed;
+  }
+
+  &.success {
+    @apply bg-[#44ce4b] dark:bg-[#44ce4b] text-white dark:text-white;
+  }
+
+  &.secondary {
+    @apply bg-slate-700 dark:bg-slate-600 text-white dark:text-white;
+  }
+
+  &.primary {
+    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-white;
+  }
+
+  &.clear {
+    @apply text-woot-500 dark:text-woot-500 bg-transparent dark:bg-transparent;
+  }
+
+  &.alert {
+    @apply bg-red-500 dark:bg-red-500 text-white dark:text-white;
+
+    &.clear {
+      @apply bg-transparent dark:bg-transparent;
+    }
+  }
+
+  &.warning {
+    @apply bg-[#ffc532] dark:bg-[#ffc532] text-white dark:text-white;
+
+    &.clear {
+      @apply bg-transparent dark:bg-transparent;
+    }
+  }
+
+  &.tiny {
+    @apply h-6 text-[10px];
+  }
+
+  &.small {
+    @apply h-8 text-xs;
+  }
+
   .spinner {
     @apply px-2 py-0;
   }
 
   // @TODDO - Remove after moving all buttons to woot-button
-  .icon + .button__content {
+  .icon+.button__content {
     @apply w-auto;
   }
 
@@ -34,10 +115,10 @@
   }
 
   &.hollow {
-    @apply border border-woot-500 dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
+    @apply border border-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
 
     &.secondary {
-      @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
+      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
     }
 
     &.success {

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -1 +0,0 @@
-// File to be removed

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -1,16 +0,0 @@
-@keyframes left-shift-animation {
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-
-  50% {
-    transform: translateX(1px);
-  }
-}
-
-.conversation {
-  &.active {
-    animation: left-shift-animation 0.25s $swift-ease-out-function;
-  }
-}

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -79,7 +79,7 @@
       @apply rounded-r-lg rounded-l mr-auto break-words;
 
       &:not(.is-unsupported) {
-        @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50
+        @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50;
       }
 
       &.is-image {
@@ -91,7 +91,7 @@
       }
 
       .file {
-        .text-block-title {
+        .attachment-name {
           @apply text-slate-700 dark:text-woot-300;
         }
 
@@ -222,20 +222,6 @@
   @apply flex relative flex-col;
 }
 
-.typing-indicator-wrap {
-  @apply items-center flex h-0 absolute w-full -top-8;
-
-  .typing-indicator {
-    @include elegant-card;
-    @include round-corner;
-    @apply py-2 pr-4 pl-5 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto;
-
-    .gif {
-      @apply ml-2 w-6;
-    }
-  }
-}
-
 .left .bubble .text-content {
   h1,
   h2,

app/javascript/dashboard/assets/scss/widgets/_forms.scss

@@ -1,78 +0,0 @@
-// scss-lint:disable QualifyingElement
-
-label {
-  @apply text-slate-800 dark:text-slate-200;
-}
-
-textarea {
-  @apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
-}
-
-input {
-  @apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
-
-  &[disabled] {
-    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600;
-  }
-}
-
-input[type='file'] {
-  @apply bg-white dark:bg-slate-800;
-}
-
-select {
-  @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
-}
-
-.error {
-  input[type='color'],
-  input[type='date'],
-  input[type='datetime'],
-  input[type='datetime-local'],
-  input[type='email'],
-  input[type='month'],
-  input[type='number'],
-  input[type='password'],
-  input[type='search'],
-  input[type='tel'],
-  input[type='text'],
-  input[type='time'],
-  input[type='url'],
-  input[type='week'],
-  input:not([type]),
-  textarea,
-  select,
-  .multiselect > .multiselect__tags {
-    @apply border border-solid border-red-400 dark:border-red-400;
-  }
-
-  .message {
-    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
-  }
-}
-
-.button,
-textarea,
-input {
-  &:focus {
-    outline: none;
-  }
-}
-
-.input-wrap {
-  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
-}
-
-.help-text {
-  @apply font-normal text-slate-600 dark:text-slate-400;
-}
-
-.input-group.small {
-  input {
-    @apply text-sm h-8;
-  }
-
-  .error {
-    @apply border-red-400 dark:border-red-400;
-  }
-}

app/javascript/dashboard/assets/scss/widgets/_login.scss

@@ -1,66 +0,0 @@
-.auth-wrap {
-  width: 100%;
-}
-
-// Outside login wrapper
-.login {
-  @include full-height;
-  overflow-y: auto;
-  padding-top: $space-larger * 1.2;
-
-  .login__hero {
-    margin-bottom: $space-larger;
-
-    .hero__logo {
-      width: 180px;
-    }
-
-    .hero__title {
-      font-weight: $font-weight-light;
-      margin-top: $space-larger;
-    }
-
-    .hero__sub {
-      color: $medium-gray;
-      font-size: $font-size-medium;
-    }
-  }
-
-  // Login box
-  .login-box {
-    @include background-white;
-    @include border-normal;
-    @include elegant-card;
-
-    border-radius: $space-smaller;
-    padding: $space-large;
-
-    label {
-      color: $color-gray;
-      font-size: $font-size-default;
-
-      input {
-        font-size: $font-size-default;
-        height: $space-larger;
-        padding: $space-slab;
-      }
-
-      .error {
-        font-size: $font-size-small;
-      }
-    }
-
-    .button {
-      height: $space-larger;
-    }
-  }
-
-  .sigin__footer {
-    font-size: $font-size-default;
-    padding: $space-medium;
-
-    > a {
-      font-weight: $font-weight-bold;
-    }
-  }
-}

app/javascript/dashboard/assets/scss/widgets/_modal.scss

@@ -1,75 +0,0 @@
-.modal-mask {
-  // @include flex;
-  // @include flex-align(center, middle);
-  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark  z-[9990] h-full left-0 fixed top-0 w-full;
-}
-
-.page-top-bar {
-  @apply px-8 pt-9 pb-0;
-
-  img {
-    @apply max-h-[3.75rem];
-  }
-}
-
-.modal-container {
-  @apply shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem];
-
-  &.medium {
-    @apply max-w-[80%] w-[56.25rem];
-  }
-
-  .content-box {
-    @apply h-auto p-0;
-  }
-
-  h2 {
-    @apply text-slate-800 dark:text-slate-100 text-lg font-semibold;
-  }
-
-  p {
-    @apply text-sm m-0 p-0 text-slate-600 mt-2 text-sm dark:text-slate-300;
-  }
-
-  .content {
-    @apply p-8;
-  }
-
-  form,
-  .modal-content {
-    @apply pt-4 pb-8 px-8 self-center;
-
-    a {
-      @apply p-4;
-    }
-  }
-
-  .modal-footer {
-    // @include flex;
-    // @include flex-align($x: flex-end, $y: middle);
-    @apply flex justify-end items-center py-2 px-0 gap-2;
-
-    &.justify-content-end {
-      @apply justify-end;
-    }
-  }
-
-  .delete-item {
-    @apply p-8;
-
-    button {
-      @apply m-0;
-    }
-  }
-}
-
-.modal-enter,
-.modal-leave {
-  @apply opacity-0;
-}
-
-.modal-enter .modal-container,
-.modal-leave .modal-container {
-  transform: scale(1.1);
-  // @apply transform scale-110;
-}

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -1,60 +0,0 @@
-.reply-box {
-  transition: box-shadow 0.35s $swift-ease-out-function,
-    height 2s $swift-ease-out-function;
-
-  &.is-focused {
-    box-shadow: var(--shadow);
-  }
-
-  .reply-box__top {
-    .icon {
-      color: $medium-gray;
-      cursor: pointer;
-      font-size: $font-size-medium;
-      margin-right: $space-small;
-
-      &.active {
-        color: $color-woot;
-      }
-    }
-
-    .attachment {
-      cursor: pointer;
-      margin-right: $space-one;
-      padding: 0 $space-small;
-    }
-
-    .video-js {
-      background: transparent;
-      // Override min-height : 50px in foundation
-      //
-      max-height: $space-mega * 2.4;
-      min-height: 3rem;
-      padding: var(--space-normal) 0 0;
-      resize: none;
-    }
-
-    > textarea {
-      @include ghost-input();
-      background: transparent;
-      margin: 0;
-      max-height: $space-mega * 2.4;
-      // Override min-height : 50px in foundation
-      min-height: 3rem;
-      padding: var(--space-normal) 0 0;
-      resize: none;
-    }
-  }
-
-  &.is-private {
-    @apply bg-yellow-100 dark:bg-yellow-800;
-
-    .reply-box__top {
-      @apply bg-yellow-100 dark:bg-yellow-800;
-
-      > input {
-        @apply bg-yellow-100 dark:bg-yellow-800;
-      }
-    }
-  }
-}

app/javascript/dashboard/assets/scss/widgets/_report.scss

@@ -1,60 +0,0 @@
-.report-card {
-  @include custom-border-top(3px, transparent);
-
-  cursor: pointer;
-  margin: 0;
-  padding: var(--space-normal);
-
-  &.active {
-    @include custom-border-top(3px, var(--color-woot));
-    @include background-white;
-    .heading,
-    .metric {
-      color: var(--color-woot);
-    }
-  }
-
-  .heading {
-    align-items: center;
-    color: var(--color-heading);
-    display: flex;
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-bold);
-    margin: 0;
-  }
-
-  .info-icon {
-    color: var(--b-400);
-    margin-left: var(--space-micro);
-  }
-
-  .metric-wrap {
-    align-items: center;
-    display: flex;
-  }
-
-  .metric {
-    font-size: var(--font-size-big);
-    font-weight: var(--font-weight-feather);
-    margin-top: var(--space-smaller);
-  }
-
-  .metric-trend {
-    font-size: var(--font-size-small);
-    margin: 0 var(--space-small);
-  }
-
-  .metric-up {
-    color: $success-color;
-  }
-
-  .metric-down {
-    color: $alert-color;
-  }
-
-  .desc {
-    font-size: var(--font-size-small);
-    margin: 0;
-    text-transform: capitalize;
-  }
-}

app/javascript/dashboard/assets/scss/widgets/_reports.scss

@@ -1,29 +0,0 @@
-.reports-option__rounded--item {
-  border-radius: 100%;
-  height: var(--space-two);
-  width: var(--space-two);
-}
-
-.reports-option__item {
-  flex-shrink: 0;
-  margin-right: var(--space-small);
-}
-
-.reports-option__label--swatch {
-  border: 1px solid var(--color-border);
-}
-
-.reports-option__wrap {
-  align-items: center;
-  display: flex;
-}
-
-.reports-option__title {
-  margin: 0 var(--space-small);
-}
-
-
-.switch {
-  margin-bottom: var(--space-zero);
-  margin-left: var(--space-small);
-}

app/javascript/dashboard/assets/scss/widgets/_search-box.scss

@@ -1,18 +0,0 @@
-.search {
-  @include flex;
-  @include flex-align($x: left, $y: middle);
-  @include flex-shrink;
-
-  padding: $space-one $space-normal;
-  transition: all 0.3s var(--ease-in-out-quad);
-
-  > .icon {
-    color: $medium-gray;
-    font-size: $font-size-medium;
-  }
-
-  > input {
-    @include ghost-input();
-    margin: 0;
-  }
-}

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -1,78 +0,0 @@
-.side-menu {
-  i {
-    margin-right: var(--space-smaller);
-    min-width: var(--space-two);
-  }
-}
-
-.sidebar {
-  z-index: 1024 - 1;
-
-  //logo
-  .logo {
-    img {
-      max-height: 108px;
-      padding: $woot-logo-padding;
-    }
-  }
-
-  .nested {
-    a {
-      font-size: var(--font-size-small);
-      margin-bottom: var(--space-micro);
-      margin-top: var(--space-micro);
-
-      .inbox-icon {
-        display: inline-block;
-        margin-right: var(--space-micro);
-        min-width: var(--space-normal);
-        text-align: center;
-      }
-    }
-  }
-}
-
-// bottom-nav
-.bottom-nav {
-  @include flex;
-  @include space-between-column;
-  @include border-normal-top;
-  flex-direction: column;
-  padding: var(--space-one) var(--space-normal) var(--space-one)
-    var(--space-one);
-  position: relative;
-
-  &:hover {
-    background: var(--color-background-light);
-  }
-
-  .dropdown-pane {
-    bottom: 3.75rem;
-    display: block;
-    visibility: visible;
-    width: fit-content;
-  }
-
-  .active {
-    border-bottom: 2px solid $medium-gray;
-  }
-}
-
-.hamburger--menu {
-  cursor: pointer;
-  display: block;
-  margin-right: var(--space-normal);
-}
-
-.header--icon {
-  display: block;
-  margin: 0 var(--space-small) 0 var(--space-smaller);
-
-  @media screen and (max-width: 1200px) {
-    display: none;
-  }
-}
-
-.header-title {
-  margin: 0 var(--space-small);
-}

app/javascript/dashboard/assets/scss/widgets/_snackbar.scss

@@ -1,45 +0,0 @@
-.ui-snackbar-container {
-  left: 0;
-  margin: 0 auto;
-  max-width: 25rem;
-  overflow: hidden;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  top: $space-normal;
-  z-index: 9999;
-}
-
-.ui-snackbar {
-  @include shadow;
-  background-color: $woot-snackbar-bg;
-  border-radius: $space-smaller;
-  display: inline-flex;
-  margin-bottom: $space-small;
-  max-width: 25rem;
-  min-height: 1.875rem;
-  min-width: 15rem;
-  padding: $space-slab $space-medium;
-  text-align: left;
-}
-
-.ui-snackbar-text {
-  color: $color-white;
-  font-size: $font-size-small;
-  font-weight: $font-weight-medium;
-}
-
-.ui-snackbar-action {
-  margin-left: auto;
-  padding-left: 1.875rem;
-
-  button {
-    background: none;
-    border: 0;
-    color: $woot-snackbar-button;
-    font-size: $font-size-small;
-    margin: 0;
-    padding: 0;
-    text-transform: uppercase;
-  }
-}

app/javascript/dashboard/assets/scss/widgets/_states.scss

@@ -1 +0,0 @@
-// To be removed

app/javascript/dashboard/assets/scss/widgets/_status-bar.scss

@@ -1,46 +0,0 @@
-.status-bar {
-  @include flex;
-  @include flex-align($x: center, $y: middle);
-  background: lighten($warning-color, 36%);
-  flex-direction: column;
-  margin: 0;
-  padding: $space-normal $space-smaller;
-
-  .message {
-    font-weight: $font-weight-medium;
-    margin-bottom: $zero;
-  }
-
-  .button {
-    margin: $space-smaller $zero $zero;
-    padding: $space-small $space-normal;
-  }
-
-  &.danger {
-    background: lighten($alert-color, 30%);
-
-    .button {
-      // Default and disabled states
-      &,
-      &.disabled,
-      &[disabled],
-      &.disabled:hover,
-      &[disabled]:hover,
-      &.disabled:focus,
-      &[disabled]:focus {
-        background-color: $alert-color;
-        color: $color-white;
-      }
-
-      &:hover,
-      &:focus {
-        background-color: darken($alert-color, 7%);
-        color: $color-white;
-      }
-    }
-  }
-
-  &.warning {
-    background: lighten($warning-color, 36%);
-  }
-}

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -7,7 +7,7 @@
 }
 
 .tabs {
-  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4;
+  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
 }
 
 .tabs--with-scroll {
@@ -31,7 +31,7 @@
 }
 
 .tabs-title {
-  @apply flex-shrink-0 my-0 mx-2 ;
+  @apply flex-shrink-0 my-0 mx-2;
 
   .badge {
     @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
@@ -53,7 +53,7 @@
   }
 
   a {
-    @apply flex items-center flex-row border-b border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
+    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
     transition: border-color 0.15s $swift-ease-out-function;
   }
 

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -1,9 +1,9 @@
 table {
-  @apply border-spacing-0 text-sm;
+  @apply border-spacing-0 text-sm w-full;
 
   thead {
     th {
-      @apply font-semibold tracking-[1px] text-left uppercase text-slate-900 dark:text-slate-200;
+      @apply font-semibold tracking-[1px] text-left px-2.5 uppercase text-slate-900 dark:text-slate-200;
     }
   }
 

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="-mt-px text-sm">
     <button
-      class="flex items-center select-none w-full bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
       @click="$emit('click')"
     >
       <div class="flex justify-between mb-0.5">

app/javascript/dashboard/components/ChannelSelector.vue

@@ -1,10 +1,12 @@
 <template>
   <button
-    class="sm:w-[50%] md:w-[34%] lg:w-[25%] channel"
+    class="sm:w-[50%] md:w-1/3 lg:w-1/4 bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
     @click="$emit('click')"
   >
-    <img :src="src" :alt="title" />
+    <img :src="src" :alt="title" class="w-[50%] my-4 mx-auto" />
-    <h3 class="channel__title">
+    <h3
+      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
+    >
       {{ title }}
     </h3>
   </button>
@@ -31,32 +33,8 @@ export default {
     filter: grayscale(100%);
   }
 
-  &.channel:hover {
+  &:hover {
     @apply border-transparent shadow-none cursor-not-allowed;
   }
 }
-
-.channel {
-  @apply bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800;
-
-  &:hover {
-    @apply border-woot-500 dark:border-woot-500 shadow-md z-50;
-  }
-
-  &.disabled {
-    @apply opacity-60;
-  }
-
-  img {
-    @apply w-[50%] my-4 mx-auto;
-  }
-
-  .channel__title {
-    @apply text-slate-800 dark:text-slate-100 text-base text-center capitalize;
-  }
-
-  p {
-    @apply text-slate-600 dark:text-slate-300 w-full text-sm;
-  }
-}
 </style>

app/javascript/dashboard/components/ChatList.vue

@@ -1,14 +1,14 @@
 <template>
   <div
-    class="conversations-list-wrap flex-basis-clamp flex-shrink-0 overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
-    :class="{
+    :class="[
-      hide: !showConversationList,
+      { hidden: !showConversationList },
-      'list--full-width': isOnExpandedLayout,
+      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
-    }"
+    ]"
   >
     <slot />
     <div
-      class="flex items-center justify-between py-0 px-4"
+      class="flex items-center justify-between px-4 py-0"
       :class="{
         'pb-3 border-b border-slate-75 dark:border-slate-700':
           hasAppliedFiltersOrActiveFolders,
@@ -16,7 +16,7 @@
     >
       <div class="flex max-w-[85%] justify-center items-center">
         <h1
-          class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-900 dark:text-slate-100 mb-0"
+          class="text-xl font-medium break-words truncate text-black-900 dark:text-slate-100"
           :title="pageTitle"
         >
           {{ pageTitle }}
@@ -107,7 +107,7 @@
 
     <p
       v-if="!chatListLoading && !conversationList.length"
-      class="overflow-auto p-4 flex justify-center items-center"
+      class="flex items-center justify-center p-4 overflow-auto"
     >
       {{ $t('CHAT_LIST.LIST.404') }}
     </p>
@@ -127,7 +127,7 @@
     />
     <div
       ref="conversationList"
-      class="conversations-list flex-1"
+      class="flex-1 conversations-list"
       :class="{ 'overflow-hidden': isContextMenuOpen }"
     >
       <virtual-list
@@ -136,14 +136,17 @@
         :data-sources="conversationList"
         :data-component="itemComponent"
         :extra-props="virtualListExtraProps"
-        class="w-full overflow-auto h-full"
+        class="w-full h-full overflow-auto"
         footer-tag="div"
       >
         <template #footer>
           <div v-if="chatListLoading" class="text-center">
-            <span class="spinner mt-4 mb-4" />
+            <span class="mt-4 mb-4 spinner" />
           </div>
-          <p v-if="showEndOfListMessage" class="text-center text-muted p-4">
+          <p
+            v-if="showEndOfListMessage"
+            class="p-4 text-center text-slate-400 dark:text-slate-300"
+          >
             {{ $t('CHAT_LIST.EOF') }}
           </p>
           <intersection-observer
@@ -1031,24 +1034,10 @@ export default {
 </style>
 
 <style scoped lang="scss">
-.conversations-list-wrap {
-  &.hide {
-    @apply hidden;
-  }
-
-  &.list--full-width {
-    @apply basis-full;
-  }
-}
-
 .conversations-list {
   @apply overflow-hidden hover:overflow-y-auto;
 }
 
-.load-more--button {
-  @apply text-center rounded-none;
-}
-
 .tab--chat-type {
   @apply py-0 px-4;
 

app/javascript/dashboard/components/CustomAttribute.vue

@@ -1,24 +1,28 @@
 <template>
   <div class="py-3 px-4">
     <div class="flex items-center mb-1">
-      <h4 class="text-block-title flex items-center m-0 w-full error">
+      <h4 class="text-sm flex items-center m-0 w-full error">
-        <div v-if="isAttributeTypeCheckbox" class="checkbox-wrap">
+        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
           <input
             v-model="editedValue"
-            class="checkbox"
+            class="!my-0 mr-2 ml-0"
             type="checkbox"
             @change="onUpdate"
           />
         </div>
         <div class="flex items-center justify-between w-full">
           <span
-            class="attribute-name"
+            class="w-full font-medium text-sm mb-0"
-            :class="{ error: $v.editedValue.$error }"
+            :class="
+              $v.editedValue.$error
+                ? 'text-red-400 dark:text-red-500'
+                : 'text-slate-800 dark:text-slate-100'
+            "
           >
             {{ label }}
           </span>
           <woot-button
-            v-if="showActions"
+            v-if="showCopyAndDeleteButton"
             v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
             variant="link"
             size="medium"
@@ -31,20 +35,25 @@
       </h4>
     </div>
     <div v-if="notAttributeTypeCheckboxAndList">
-      <div v-show="isEditing">
+      <div v-if="isEditing" v-on-clickaway="onClickAway">
-        <div class="input-group small">
+        <div class="mb-2 w-full flex items-center">
           <input
             ref="inputfield"
             v-model="editedValue"
             :type="inputType"
-            class="input-group-field"
+            class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
             autofocus="true"
             :class="{ error: $v.editedValue.$error }"
             @blur="$v.editedValue.$touch"
             @keyup.enter="onUpdate"
           />
-          <div class="input-group-button">
+          <div>
-            <woot-button size="small" icon="checkmark" @click="onUpdate" />
+            <woot-button
+              size="small"
+              icon="checkmark"
+              class="rounded-l-none rtl:rounded-r-none"
+              @click="onUpdate"
+            />
           </div>
         </div>
         <span
@@ -56,7 +65,7 @@
       </div>
       <div
         v-show="!isEditing"
-        class="value--view"
+        class="flex group"
         :class="{ 'is-editable': showActions }"
       >
         <a
@@ -64,35 +73,35 @@
           :href="hrefURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ urlValue }}
         </a>
         <p
           v-else
-          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ displayValue || '---' }}
         </p>
         <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
           <woot-button
-            v-if="showActions"
+            v-if="showCopyAndDeleteButton"
             v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
             variant="link"
             size="small"
             color-scheme="secondary"
             icon="clipboard"
-            class-names="edit-button"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
             @click="onCopy"
           />
           <woot-button
-            v-if="showActions"
+            v-if="showEditButton"
             v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
             variant="link"
             size="small"
             color-scheme="secondary"
             icon="edit"
-            class-names="edit-button"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
             @click="onEdit"
           />
         </div>
@@ -121,6 +130,7 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -133,7 +143,7 @@ export default {
   components: {
     MultiselectDropdown,
   },
-  mixins: [customAttributeMixin],
+  mixins: [customAttributeMixin, clickaway],
   props: {
     label: { type: String, required: true },
     values: { type: Array, default: () => [] },
@@ -155,11 +165,18 @@ export default {
       editedValue: null,
     };
   },
-
   computed: {
+    showCopyAndDeleteButton() {
+      return this.value && this.showActions;
+    },
+    showEditButton() {
+      return !this.value && this.showActions;
+    },
     displayValue() {
       if (this.isAttributeTypeDate) {
-        return new Date(this.value || new Date()).toLocaleDateString();
+        return this.value
+          ? new Date(this.value || new Date()).toLocaleDateString()
+          : '';
       }
       if (this.isAttributeTypeCheckbox) {
         return this.value === 'false' ? false : this.value;
@@ -225,6 +242,10 @@ export default {
       this.isEditing = false;
       this.editedValue = this.formattedValue;
     },
+    contactId() {
+      // Fix to solve validation not resetting when contactId changes in contact page
+      this.$v.$reset();
+    },
   },
 
   validations() {
@@ -263,6 +284,10 @@ export default {
         this.$refs.inputfield.focus();
       }
     },
+    onClickAway() {
+      this.$v.$reset();
+      this.isEditing = false;
+    },
     onEdit() {
       this.isEditing = true;
       this.$nextTick(() => {
@@ -289,6 +314,7 @@ export default {
     },
     onDelete() {
       this.isEditing = false;
+      this.$v.$reset();
       this.$emit('delete', this.attributeKey);
     },
     onCopy() {
@@ -299,36 +325,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.checkbox-wrap {
-  @apply flex items-center;
-}
-.checkbox {
-  @apply my-0 mr-2 ml-0;
-}
-.attribute-name {
-  @apply w-full text-slate-800 dark:text-slate-100;
-  &.error {
-    @apply text-red-400 dark:text-red-500;
-  }
-}
-
-.edit-button {
-  @apply hidden;
-}
-
-.value--view {
-  @apply flex;
-
-  &.is-editable:hover {
-    .value {
-      @apply bg-slate-50 dark:bg-slate-700 mb-0;
-    }
-    .edit-button {
-      @apply block;
-    }
-  }
-}
-
 ::v-deep {
   .selector-wrap {
     @apply m-0 top-1;

app/javascript/dashboard/components/Modal.vue

@@ -7,7 +7,13 @@
       @mousedown="handleMouseDown"
     >
       <div
-        :class="modalContainerClassName"
+        :class="{
+          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
+          'rounded-xl w-[37.5rem]': !fullWidth,
+          'items-center rounded-none flex h-full justify-center w-full':
+            fullWidth,
+          [size]: true,
+        }"
         @mouse.stop
         @mousedown="event => event.stopPropagation()"
       >
@@ -16,7 +22,7 @@
           color-scheme="secondary"
           icon="dismiss"
           variant="clear"
-          class="absolute ltr:right-2 rtl:left-2 top-2 z-10"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
           @click="close"
         />
         <slot />
@@ -60,15 +66,6 @@ export default {
     };
   },
   computed: {
-    modalContainerClassName() {
-      let className =
-        'modal-container bg-white dark:bg-slate-800 skip-context-menu';
-      if (this.fullWidth) {
-        return `${className} modal-container--full-width`;
-      }
-
-      return `${className} ${this.size}`;
-    },
     modalClassName() {
       const modalClassNameMap = {
         centered: '',
@@ -109,26 +106,43 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
-.modal-container--full-width {
+.modal-mask {
-  align-items: center;
+  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
-  border-radius: 0;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  width: 100%;
-}
-
-.modal-mask.right-aligned {
-  justify-content: flex-end;
-
   .modal-container {
-    border-radius: 0;
+    &.medium {
-    height: 100%;
+      @apply max-w-[80%] w-[56.25rem];
-    width: 30rem;
+    }
+    // .content-box {
+    //   @apply h-auto p-0;
+    // }
+    .content {
+      @apply p-8;
+    }
+    form,
+    .modal-content {
+      @apply pt-4 pb-8 px-8 self-center;
+      a {
+        @apply p-4;
+      }
+    }
   }
 }
 .modal-big {
-  width: 60%;
+  @apply w-full;
+}
+.modal-mask.right-aligned {
+  @apply justify-end;
+  .modal-container {
+    @apply rounded-none h-full w-[30rem];
+  }
+}
+.modal-enter,
+.modal-leave {
+  @apply opacity-0;
+}
+.modal-enter .modal-container,
+.modal-leave .modal-container {
+  transform: scale(1.1);
 }
 </style>

app/javascript/dashboard/components/ModalHeader.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col items-start pt-8 px-8 pb-0">
+  <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
     <h2
       ref="modalHeaderTitle"
-      class="text-slate-800 text-lg dark:text-slate-100"
+      class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
     >
       {{ headerTitle }}
     </h2>
     <p
       v-if="headerContent"
       ref="modalHeaderContent"
-      class="w-full break-words text-slate-600 mt-2 text-sm dark:text-slate-300"
+      class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
     >
       {{ headerContent }}
       <span
         v-if="headerContentValue"
-        class="font-semibold text-sm text-slate-600 dark:text-slate-300"
+        class="text-sm font-semibold text-slate-600 dark:text-slate-300"
       >
         {{ headerContentValue }}
       </span>

app/javascript/dashboard/components/SettingsSection.vue

@@ -1,19 +1,21 @@
 <template>
   <div
-    class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
+    class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
     :class="{
-      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30':
+      'border-b border-solid border-slate-50 dark:border-slate-700/30':
         showBorder,
     }"
   >
-    <div class="w-[30%] min-w-0 max-w-[30%] pr-12">
+    <div class="w-full xl:w-1/4 min-w-0 xl:max-w-[30%] pr-12">
       <p
         v-if="title"
         class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
       >
         {{ title }}
       </p>
-      <p class="text-sm mb-2">
+      <p
+        class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
+      >
         <slot v-if="subTitle" name="subTitle">
           {{ subTitle }}
         </slot>
@@ -23,7 +25,7 @@
         {{ note }}
       </p>
     </div>
-    <div class="w-[50%] min-w-0 max-w-[50%]">
+    <div class="w-full xl:w-1/2 min-w-0 xl:max-w-[50%]">
       <slot />
     </div>
   </div>

app/javascript/dashboard/components/Snackbar.vue

@@ -1,11 +1,17 @@
 <template>
   <div>
-    <div class="ui-snackbar">
+    <div
-      <div class="ui-snackbar-text">
+      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
+    >
+      <div class="text-white dark:text-white text-sm font-medium">
         {{ message }}
       </div>
-      <div v-if="action" class="ui-snackbar-action">
+      <div v-if="action">
-        <router-link v-if="action.type == 'link'" :to="action.to">
+        <router-link
+          v-if="action.type == 'link'"
+          :to="action.to"
+          class="text-woot-500 dark:text-woot-500 cursor-pointer font-medium hover:text-woot-600 dark:hover:text-woot-600 select-none"
+        >
           {{ action.message }}
         </router-link>
       </div>

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -1,5 +1,9 @@
 <template>
-  <transition-group name="toast-fade" tag="div" class="ui-snackbar-container">
+  <transition-group
+    name="toast-fade"
+    tag="div"
+    class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
+  >
     <woot-snackbar
       v-for="snackMessage in snackMessages"
       :key="snackMessage.key"

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -48,7 +48,7 @@
       v-on-clickaway="closeDropdown"
       class="dropdown-pane dropdown-pane--open"
     >
-      <woot-dropdown-menu>
+      <woot-dropdown-menu class="mb-0">
         <woot-dropdown-item v-if="!isPending">
           <woot-button
             variant="clear"

app/javascript/dashboard/components/index.js

@@ -18,7 +18,6 @@ import Label from './ui/Label';
 import LoadingState from './widgets/LoadingState';
 import Modal from './Modal';
 import ModalHeader from './ModalHeader';
-import ReportStatsCard from './widgets/ReportStatsCard';
 import SidemenuIcon from './SidemenuIcon';
 import Spinner from 'shared/components/Spinner';
 import SubmitButton from './buttons/FormSubmitButton';
@@ -46,7 +45,6 @@ const WootUIKit = {
   LoadingState,
   Modal,
   ModalHeader,
-  ReportStatsCard,
   SidemenuIcon,
   Spinner,
   SubmitButton,

app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js

@@ -2,7 +2,7 @@ import { frontendURL } from '../../../../helper/URLHelper';
 
 const campaigns = accountId => ({
   parentNav: 'campaigns',
-  routes: ['settings_account_campaigns', 'one_off'],
+  routes: ['ongoing_campaigns', 'one_off'],
   menuItems: [
     {
       icon: 'arrow-swap',
@@ -10,7 +10,7 @@ const campaigns = accountId => ({
       key: 'ongoingCampaigns',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
-      toStateName: 'settings_account_campaigns',
+      toStateName: 'ongoing_campaigns',
     },
     {
       key: 'oneOffCampaigns',

app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js

@@ -2,6 +2,15 @@ import { FEATURE_FLAGS } from '../../../../featureFlags';
 import { frontendURL } from '../../../../helper/URLHelper';
 
 const primaryMenuItems = accountId => [
+  {
+    icon: 'mail-inbox',
+    key: 'inboxView',
+    label: 'INBOX_VIEW',
+    featureFlag: FEATURE_FLAGS.INBOX_VIEW,
+    toState: frontendURL(`accounts/${accountId}/inbox-view`),
+    toStateName: 'inbox_view',
+    roles: ['administrator', 'agent'],
+  },
   {
     icon: 'chat',
     key: 'conversations',
@@ -34,7 +43,7 @@ const primaryMenuItems = accountId => [
     label: 'CAMPAIGNS',
     featureFlag: FEATURE_FLAGS.CAMPAIGNS,
     toState: frontendURL(`accounts/${accountId}/campaigns`),
-    toStateName: 'settings_account_campaigns',
+    toStateName: 'ongoing_campaigns',
     roles: ['administrator'],
   },
   {

app/javascript/dashboard/components/layout/config/sidebarItems/reports.js

@@ -1,3 +1,4 @@
+import { FEATURE_FLAGS } from '../../../../featureFlags';
 import { frontendURL } from '../../../../helper/URLHelper';
 
 const reports = accountId => ({
@@ -6,10 +7,12 @@ const reports = accountId => ({
     'account_overview_reports',
     'conversation_reports',
     'csat_reports',
+    'bot_reports',
     'agent_reports',
     'label_reports',
     'inbox_reports',
     'team_reports',
+    'sla_reports',
   ],
   menuItems: [
     {
@@ -33,6 +36,14 @@ const reports = accountId => ({
       toState: frontendURL(`accounts/${accountId}/reports/csat`),
       toStateName: 'csat_reports',
     },
+    {
+      icon: 'bot',
+      label: 'REPORTS_BOT',
+      hasSubMenu: false,
+      featureFlag: FEATURE_FLAGS.RESPONSE_BOT,
+      toState: frontendURL(`accounts/${accountId}/reports/bot`),
+      toStateName: 'bot_reports',
+    },
     {
       icon: 'people',
       label: 'REPORTS_AGENT',
@@ -61,6 +72,14 @@ const reports = accountId => ({
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
       toStateName: 'team_reports',
     },
+    {
+      icon: 'document-list-clock',
+      label: 'REPORTS_SLA',
+      hasSubMenu: false,
+      featureFlag: FEATURE_FLAGS.SLA,
+      toState: frontendURL(`accounts/${accountId}/reports/sla`),
+      toStateName: 'sla_reports',
+    },
   ],
 });
 

app/javascript/dashboard/components/layout/config/sidebarItems/settings.js

@@ -160,7 +160,7 @@ const settings = accountId => ({
       beta: true,
     },
     {
-      icon: 'key',
+      icon: 'document-list-clock',
       label: 'SLA',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/sla/list`),

app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue

@@ -45,7 +45,7 @@
 
     <div
       v-if="globalConfig.createNewAccountFromDashboard"
-      class="modal-footer delete-item"
+      class="flex justify-end items-center p-8 gap-2"
     >
       <button
         class="button success large expanded nice"

app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue

@@ -2,7 +2,7 @@
   <woot-button
     v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
     variant="link"
-    class="current-user"
+    class="items-center flex rounded-full"
     @click="handleClick"
   >
     <thumbnail
@@ -38,12 +38,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-.current-user {
-  align-items: center;
-  display: flex;
-  border-radius: 50%;
-  border: 2px solid var(--white);
-}
-</style>