Merge branch 'develop' into deploy-apr-15

* chore: Temporarily disable the disconnect logic for inboxes

* Remove unused spec

Gemfile.lock

@@ -148,7 +148,7 @@ GEM
     barnes (0.0.9)
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
-    base64 (0.2.0)
+    base64 (0.1.1)
     bcrypt (3.1.20)
     bigdecimal (3.1.8)
     bindex (0.8.1)
@@ -242,8 +242,9 @@ GEM
       railties (>= 5.0.0)
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.9.0)
-      faraday-net_http (>= 2.0, < 3.2)
+    faraday (2.7.4)
+      faraday-net_http (>= 2.0, < 3.1)
+      ruby2_keywords (>= 0.0.4)
     faraday-follow_redirects (0.3.0)
       faraday (>= 1, < 3)
     faraday-mashify (0.1.1)
@@ -251,8 +252,7 @@ GEM
       hashie
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
-    faraday-net_http (3.1.0)
-      net-http
+    faraday-net_http (3.0.2)
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
@@ -321,10 +321,7 @@ GEM
     google-cloud-translate-v3 (0.6.0)
       gapic-common (>= 0.17.1, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.3)
     google-protobuf (3.25.3-arm64-darwin)
-    google-protobuf (3.25.3-x86_64-darwin)
-    google-protobuf (3.25.3-x86_64-linux)
     googleapis-common-protos (1.4.0)
       google-protobuf (~> 3.14)
       googleapis-common-protos-types (~> 1.2)
@@ -340,16 +337,7 @@ GEM
       signet (>= 0.16, < 2.a)
     groupdate (6.2.1)
       activesupport (>= 5.2)
-    grpc (1.62.0)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-arm64-darwin)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-x86_64-darwin)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-x86_64-linux)
+    grpc (1.63.0-arm64-darwin)
       google-protobuf (~> 3.25)
       googleapis-common-protos-types (~> 1.0)
     haikunator (1.1.1)
@@ -373,7 +361,7 @@ GEM
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.14.5)
+    i18n (1.14.1)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
@@ -397,8 +385,7 @@ GEM
       hana (~> 1.3)
       regexp_parser (~> 2.0)
       uri_template (~> 0.7)
-    jwt (2.8.1)
-      base64
+    jwt (2.7.0)
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.2.2)
@@ -422,15 +409,8 @@ GEM
     letter_opener (1.8.1)
       launchy (>= 2.2, < 3)
     libdatadog (7.0.0.1.0)
-    libdatadog (7.0.0.1.0-x86_64-linux)
-    libddwaf (1.14.0.0.0)
-      ffi (~> 1.0)
     libddwaf (1.14.0.0.0-arm64-darwin)
       ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-x86_64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-x86_64-linux)
-      ffi (~> 1.0)
     line-bot-api (1.28.0)
     liquid (5.4.0)
     listen (3.8.0)
@@ -459,13 +439,12 @@ GEM
     meta_request (0.8.2)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
-    method_source (1.1.0)
+    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.7)
     minitest (5.24.1)
     mock_redis (0.36.0)
       ruby2_keywords
@@ -475,8 +454,6 @@ 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.12)
@@ -495,15 +472,8 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.16.6)
-      mini_portile2 (~> 2.8.2)
-      racc (~> 1.4)
     nokogiri (1.16.6-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.6-x86_64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.16.6-x86_64-linux)
-      racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
       snaky_hash (~> 2.0)
@@ -566,8 +536,7 @@ GEM
       rack (>= 2.0.0)
     rack-mini-profiler (3.2.0)
       rack (>= 1.2.0)
-    rack-protection (3.2.0)
-      base64 (>= 0.1.0)
+    rack-protection (3.1.0)
       rack (~> 2.2, >= 2.2.4)
     rack-proxy (0.7.6)
       rack
@@ -603,7 +572,7 @@ GEM
       thor (~> 1.0)
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
-    rake (13.2.1)
+    rake (13.1.0)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
@@ -633,8 +602,8 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.2.8)
-      strscan (>= 3.0.9)
+    rexml (3.3.1)
+      strscan
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.1)
@@ -768,7 +737,7 @@ GEM
     strscan (3.1.0)
     telephone_number (1.4.20)
     test-prof (1.2.1)
-    thor (1.3.1)
+    thor (1.3.0)
     tilt (2.3.0)
     time_diff (0.3.0)
       activesupport
@@ -793,12 +762,11 @@ 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.4)
+    version_gem (1.1.3)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -829,15 +797,7 @@ GEM
     zeitwerk (2.6.16)
 
 PLATFORMS
-  arm64-darwin-20
-  arm64-darwin-21
-  arm64-darwin-22
-  ruby
-  x86_64-darwin-18
-  x86_64-darwin-20
-  x86_64-darwin-21
-  x86_64-darwin-22
-  x86_64-linux
+  arm64-darwin-23
 
 DEPENDENCIES
   active_record_query_trace

app/builders/v2/base_conversation_report_builder.rb

@@ -0,0 +1,30 @@
+class V2::BaseConversationReportBuilder
+  pattr_initialize :account, :params
+
+  private
+
+  AVG_METRICS = %w[avg_first_response_time avg_resolution_time reply_time].freeze
+  COUNT_METRICS = %w[
+    conversations_count
+    incoming_messages_count
+    outgoing_messages_count
+    resolutions_count
+    bot_resolutions_count
+    bot_handoffs_count
+  ].freeze
+
+  def builder_class(metric)
+    case metric
+    when *AVG_METRICS
+      V2::Reports::Timeseries::AverageReportBuilder
+    when *COUNT_METRICS
+      V2::Reports::Timeseries::CountReportBuilder
+    end
+  end
+
+  def log_invalid_metric
+    Rails.logger.error "ReportBuilder: Invalid metric - #{params[:metric]}"
+
+    {}
+  end
+end

app/builders/v2/conversation_metric_builder.rb

@@ -0,0 +1,30 @@
+class V2::ConversationMetricBuilder < V2::BaseConversationReportBuilder
+  def summary
+    {
+      conversations_count: count('conversations_count'),
+      incoming_messages_count: count('incoming_messages_count'),
+      outgoing_messages_count: count('outgoing_messages_count'),
+      avg_first_response_time: count('avg_first_response_time'),
+      avg_resolution_time: count('avg_resolution_time'),
+      resolutions_count: count('resolutions_count'),
+      reply_time: count('reply_time')
+    }
+  end
+
+  def bot_summary
+    {
+      bot_resolutions_count: count('bot_resolutions_count'),
+      bot_handoffs_count: count('bot_handoffs_count')
+    }
+  end
+
+  private
+
+  def count(metric)
+    builder_class(metric).new(account, builder_params(metric)).aggregate_value
+  end
+
+  def builder_params(metric)
+    params.merge({ metric: metric })
+  end
+end

app/builders/v2/conversation_report_builder.rb

@@ -0,0 +1,25 @@
+class V2::ConversationReportBuilder < V2::BaseConversationReportBuilder
+  include DateRangeHelper
+
+  pattr_initialize :account, :params
+
+  def timeseries
+    perform_action(:timeseries)
+  end
+
+  def aggregate_value
+    perform_action(:aggregate_value)
+  end
+
+  private
+
+  def perform_action(method_name)
+    return builder.new(account, params).public_send(method_name) if builder.present?
+
+    log_invalid_metric
+  end
+
+  def builder
+    builder_class(params[: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,15 @@ 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')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
   def group_by_key
     :user_id
   end
@@ -37,12 +47,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,
-        conversations_count: @grouped_conversations_count[account_user.user_id],
-        avg_resolution_time: @grouped_avg_resolution_time[account_user.user_id],
-        avg_first_response_time: @grouped_avg_first_response_time[account_user.user_id],
-        avg_reply_time: @grouped_avg_reply_time[account_user.user_id]
+        id: user_id,
+        conversations_count: @grouped_conversations_count[user_id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[user_id],
+        avg_resolution_time: @grouped_avg_resolution_time[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/inbox_summary_builder.rb

@@ -0,0 +1,65 @@
+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')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  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,15 @@ 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')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
   def reporting_events
     @reporting_events ||= Current.account.reporting_events.where(created_at: range).joins(:conversation)
   end
@@ -40,6 +50,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/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/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/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/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 },
     });
   }
 

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/i18n/locale/en/report.json

@@ -494,6 +494,17 @@
         "STATUS": "Status"
       }
     },
+    "TEAM_CONVERSATIONS": {
+      "HEADER": "Conversations by teams",
+      "LOADING_MESSAGE": "Loading team metrics...",
+      "NO_AGENTS": "There is no data available",
+      "TABLE_HEADER": {
+        "AGENT": "Team",
+        "OPEN": "open",
+        "UNATTENDED": "Unattended",
+        "STATUS": "Status"
+      }
+    },
     "AGENT_STATUS": {
       "HEADER": "Agent status",
       "ONLINE": "Online",

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

@@ -1,19 +1,44 @@
 <template>
-  <woot-reports
-    key="agent-reports"
-    type="agent"
-    getter-key="agents/getAgents"
-    action-key="agents/get"
-    :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
-  />
+  <div class="column overflow-auto">
+    <metric-card :is-live="false" header="All agents overview">
+      <woot-summary-reports
+        key="agent-summary-reports"
+        class="!p-0"
+        type="agent"
+        getter-key="agents/getAgents"
+        attribute-key="team_id"
+        action-key="summaryReports/fetchAgentSummaryReports"
+        summary-key="summaryReports/getAgentSummaryReports"
+        :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+      />
+    </metric-card>
+    <metric-card
+      :is-live="false"
+      header="Agent-wise reports"
+      class="overflow-visible"
+    >
+      <woot-reports
+        key="agent-reports"
+        :show-download-button="false"
+        class="!p-0"
+        type="agent"
+        getter-key="agents/getAgents"
+        action-key="agents/get"
+      />
+    </metric-card>
+  </div>
 </template>
 
 <script>
+import WootSummaryReports from './components/WootSummaryReports.vue';
+import MetricCard from './components/overview/MetricCard.vue';
 import WootReports from './components/WootReports.vue';
 
 export default {
   components: {
     WootReports,
+    MetricCard,
+    WootSummaryReports,
   },
 };
 </script>

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

@@ -1,19 +1,46 @@
 <template>
-  <woot-reports
-    key="inbox-reports"
-    type="inbox"
-    getter-key="inboxes/getInboxes"
-    action-key="inboxes/get"
-    :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
-  />
+  <div class="column overflow-auto">
+    <metric-card :is-live="false" header="All inboxes overview">
+      <woot-summary-reports
+        key="inbox-view-reports"
+        class="!p-0"
+        type="inbox"
+        getter-key="inboxes/getInboxes"
+        action-key="summaryReports/fetchInboxSummaryReports"
+        summary-key="summaryReports/getInboxSummaryReports"
+        :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
+      />
+    </metric-card>
+    <metric-card
+      :is-live="false"
+      header="Inbox-wise reports"
+      class="overflow-visible"
+    >
+      <woot-reports
+        key="inbox-reports"
+        :show-download-button="false"
+        class="!p-0"
+        type="inbox"
+        getter-key="inboxes/getInboxes"
+        action-key="inboxes/get"
+      />
+    </metric-card>
+  </div>
 </template>
 
 <script>
+import WootSummaryReports from './components/WootSummaryReports.vue';
+import MetricCard from './components/overview/MetricCard.vue';
 import WootReports from './components/WootReports.vue';
 
 export default {
   components: {
     WootReports,
+    MetricCard,
+    WootSummaryReports,
+  },
+  mounted() {
+    this.$store.dispatch('agents/get');
   },
 };
 </script>

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

@@ -1,30 +1,13 @@
 <template>
   <div class="flex-1 overflow-auto p-4">
-    <div class="flex flex-col md:flex-row items-center">
-      <div
-        class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
-      >
+    <div class="flex">
+      <open-conversations />
+
+      <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%] flex">
         <metric-card
-          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
-          :is-loading="uiFlags.isFetchingAccountConversationMetric"
-          :loading-message="
-            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
-          "
+          :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')"
+          class="flex-1"
         >
-          <div
-            v-for="(metric, name, index) in conversationMetrics"
-            :key="index"
-            class="metric-content flex-1 min-w-0"
-          >
-            <h3 class="heading">
-              {{ name }}
-            </h3>
-            <p class="metric">{{ metric }}</p>
-          </div>
-        </metric-card>
-      </div>
-      <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
-        <metric-card :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
           <div
             v-for="(metric, name, index) in agentStatusMetrics"
             :key="index"
@@ -41,6 +24,18 @@
     <div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
       <metric-card :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
         <template #control>
+          <multiselect-dropdown
+            class="!mb-0 !w-1/3"
+            :options="dayFilterOptions"
+            :selected-item="selectedDayFilter"
+            multiselector-title=""
+            multiselector-placeholder="Date filter"
+            no-search-result="No filter found"
+            input-placeholder="Search for a filter"
+            :is-filter="true"
+            :has-thumbnail="false"
+            @click="onSelectDateFilter"
+          />
           <woot-button
             icon="arrow-download"
             size="small"
@@ -52,6 +47,7 @@
           </woot-button>
         </template>
         <report-heatmap
+          :selected-day-filter="selectedDayFilter"
           :heat-data="accountConversationHeatmap"
           :is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
         />
@@ -64,7 +60,16 @@
           :agent-metrics="agentConversationMetric"
           :page-index="pageIndex"
           :is-loading="uiFlags.isFetchingAgentConversationMetric"
-          @page-change="onPageNumberChange"
+        />
+      </metric-card>
+    </div>
+    <div class="row">
+      <metric-card :header="$t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.HEADER')">
+        <team-table
+          :teams="teams"
+          :team-metrics="teamConversationMetric"
+          :page-index="pageIndex"
+          :is-loading="uiFlags.isFetchingTeamConversationMetric"
         />
       </metric-card>
     </div>
@@ -72,34 +77,54 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import OpenConversations from './components/LiveReports/OpenConversations.vue';
 import AgentTable from './components/overview/AgentTable.vue';
+import TeamTable from './components/overview/TeamTable.vue';
 import MetricCard from './components/overview/MetricCard.vue';
-import { OVERVIEW_METRICS } from './constants';
 import ReportHeatmap from './components/Heatmap.vue';
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 
 import endOfDay from 'date-fns/endOfDay';
 import getUnixTime from 'date-fns/getUnixTime';
 import startOfDay from 'date-fns/startOfDay';
 import subDays from 'date-fns/subDays';
+import { OVERVIEW_METRICS } from './constants';
+
+const dayFilterOptions = [
+  {
+    id: 1,
+    name: 'Last 7 days',
+  },
+  {
+    id: 2,
+    name: 'Last 30 days',
+  },
+];
 
 export default {
   name: 'LiveReports',
   components: {
+    OpenConversations,
+    TeamTable,
     AgentTable,
     MetricCard,
     ReportHeatmap,
+    MultiselectDropdown,
   },
   data() {
     return {
       pageIndex: 1,
+      dayFilterOptions: dayFilterOptions,
+      selectedDayFilter: dayFilterOptions[0],
     };
   },
   computed: {
     ...mapGetters({
       agentStatus: 'agents/getAgentStatus',
       agents: 'agents/getAgents',
-      accountConversationMetric: 'getAccountConversationMetric',
+      teams: 'teams/getTeams',
       agentConversationMetric: 'getAgentConversationMetric',
+      teamConversationMetric: 'getTeamConversationMetric',
       accountConversationHeatmap: 'getAccountConversationHeatmapData',
       uiFlags: 'getOverviewUIFlags',
     }),
@@ -113,19 +138,10 @@ export default {
       });
       return metric;
     },
-    conversationMetrics() {
-      let metric = {};
-      Object.keys(this.accountConversationMetric).forEach(key => {
-        const metricName = this.$t(
-          `OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.${OVERVIEW_METRICS[key]}`
-        );
-        metric[metricName] = this.accountConversationMetric[key];
-      });
-      return metric;
-    },
   },
   mounted() {
     this.$store.dispatch('agents/get');
+    this.$store.dispatch('teams/get');
     this.fetchAllData();
 
     this.$emitter.on('fetch_overview_reports', () => {
@@ -133,18 +149,24 @@ export default {
     });
   },
   methods: {
+    onSelectDateFilter(dayFilter) {
+      this.selectedDayFilter = dayFilter;
+      this.fetchHeatmapData();
+    },
     fetchAllData() {
-      this.fetchAccountConversationMetric();
-      this.fetchAgentConversationMetric();
+      this.$store.dispatch('fetchAgentConversationMetric');
+      this.$store.dispatch('fetchTeamConversationMetric');
       this.fetchHeatmapData();
     },
     downloadHeatmapData() {
       let to = endOfDay(new Date());
 
       this.$store.dispatch('downloadAccountConversationHeatmap', {
+        daysBefore: this.selectedDayFilter?.id === 1 ? 6 : 29,
         to: getUnixTime(to),
       });
     },
+
     fetchHeatmapData() {
       if (this.uiFlags.isFetchingAccountConversationsHeatmap) {
         return;
@@ -157,12 +179,9 @@ export default {
       // and reconcile it with the rest of the data
       // this will reduce the load on the server doing number crunching
       let to = endOfDay(new Date());
-      let from = startOfDay(subDays(to, 6));
-
-      if (this.accountConversationHeatmap.length) {
-        to = endOfDay(new Date());
-        from = startOfDay(to);
-      }
+      let from = startOfDay(
+        subDays(to, this.selectedDayFilter?.id === 1 ? 6 : 29)
+      );
 
       this.$store.dispatch('fetchAccountConversationHeatmap', {
         metric: 'conversations_count',
@@ -172,21 +191,6 @@ export default {
         businessHours: false,
       });
     },
-    fetchAccountConversationMetric() {
-      this.$store.dispatch('fetchAccountConversationMetric', {
-        type: 'account',
-      });
-    },
-    fetchAgentConversationMetric() {
-      this.$store.dispatch('fetchAgentConversationMetric', {
-        type: 'agent',
-        page: this.pageIndex,
-      });
-    },
-    onPageNumberChange(pageIndex) {
-      this.pageIndex = pageIndex;
-      this.fetchAgentConversationMetric();
-    },
   },
 };
 </script>

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

@@ -1,19 +1,47 @@
 <template>
-  <woot-reports
-    key="team-reports"
-    type="team"
-    getter-key="teams/getTeams"
-    action-key="teams/get"
-    :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
-  />
+  <div class="column overflow-auto">
+    <metric-card :is-live="false" header="All teams overview">
+      <woot-summary-reports
+        key="team-reports"
+        class="!p-0"
+        type="team"
+        getter-key="teams/getTeams"
+        attribute-key="team_id"
+        action-key="summaryReports/fetchTeamSummaryReports"
+        summary-key="summaryReports/getTeamSummaryReports"
+        :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
+      />
+    </metric-card>
+    <metric-card
+      :is-live="false"
+      header="Team-wise reports"
+      class="overflow-visible"
+    >
+      <woot-reports
+        key="team-reports"
+        :show-download-button="false"
+        class="!p-0"
+        type="team"
+        getter-key="teams/getTeams"
+        action-key="teams/get"
+      />
+    </metric-card>
+  </div>
 </template>
 
 <script>
+import WootSummaryReports from './components/WootSummaryReports.vue';
+import MetricCard from './components/overview/MetricCard.vue';
 import WootReports from './components/WootReports.vue';
 
 export default {
   components: {
     WootReports,
+    MetricCard,
+    WootSummaryReports,
+  },
+  mounted() {
+    this.$store.dispatch('agents/get');
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/AggregateTables/TeamListTable.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="agent-table-container">
+    <ve-table
+      max-height="calc(100vh - 21.875rem)"
+      :fixed-header="true"
+      :columns="columns"
+      :table-data="tableData"
+    />
+  </div>
+</template>
+
+<script>
+import { VeTable } from 'vue-easytable';
+import rtlMixin from 'shared/mixins/rtlMixin';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'TeamTable',
+  components: {
+    VeTable,
+  },
+  mixins: [rtlMixin],
+  computed: {
+    ...mapGetters({
+      teams: 'teams/getTeams',
+      teamMetrics: 'summaryReports/getTeamSummaryReports',
+    }),
+
+    columns() {
+      return [
+        {
+          field: 'agent',
+          key: 'agent',
+          title: 'Team',
+          fixed: 'left',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 25,
+          renderBodyCell: ({ row }) => (
+            <div class="row-user-block">
+              <div class="user-block">
+                <h6 class="title overflow-hidden whitespace-nowrap text-ellipsis">
+                  {row.name}
+                </h6>
+              </div>
+            </div>
+          ),
+        },
+        {
+          field: 'conversationsCount',
+          key: 'conversationsCount',
+          title: 'No. of conversations',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 20,
+        },
+        {
+          field: 'resolutionsCount',
+          key: 'resolutionsCount',
+          title: 'No. of resolved conversations',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 20,
+        },
+        {
+          field: 'avgFirstResponseTime',
+          key: 'avgFirstResponseTime',
+          title: 'Average first response time',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 20,
+        },
+        {
+          field: 'avgResolutionTime',
+          key: 'avgResolutionTime',
+          title: 'Average resolution time',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 20,
+        },
+      ];
+    },
+  },
+  mounted() {
+    this.$store.dispatch('summaryReports/fetchTeamSummaryReports');
+  },
+  methods: {
+    getTeamMetrics(id) {
+      return (
+        this.teamMetrics.find(metrics => metrics.team_id === Number(id)) || {}
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.agent-table-container {
+  @apply flex flex-col flex-1;
+
+  .ve-table {
+    &::v-deep {
+      th.ve-table-header-th {
+        font-size: var(--font-size-mini) !important;
+        padding: var(--space-small) var(--space-two) !important;
+      }
+
+      td.ve-table-body-td {
+        padding: var(--space-one) var(--space-two) !important;
+      }
+    }
+  }
+
+  &::v-deep .ve-pagination {
+    @apply bg-transparent dark:bg-transparent;
+  }
+
+  &::v-deep .ve-pagination-select {
+    @apply hidden;
+  }
+
+  .row-user-block {
+    @apply items-center flex text-left;
+
+    .user-block {
+      @apply items-start flex flex-col min-w-0 my-0 mx-2;
+
+      .title {
+        @apply text-sm m-0 leading-[1.2] text-slate-800 dark:text-slate-100;
+      }
+
+      .sub-title {
+        @apply text-xs text-slate-600 dark:text-slate-200;
+      }
+    }
+  }
+
+  .table-pagination {
+    @apply mt-4 text-right;
+  }
+}
+
+.agents-loader {
+  @apply items-center flex text-base justify-center p-8;
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/reports/components/LiveReports/OpenConversations.vue

@@ -0,0 +1,87 @@
+<script>
+import { mapGetters } from 'vuex';
+import { OVERVIEW_METRICS } from '../../constants';
+import MetricCard from '../overview/MetricCard.vue';
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+const noneTeam = { team_id: 0, name: 'All teams' };
+
+export default {
+  components: {
+    MultiselectDropdown,
+    MetricCard,
+  },
+  data() {
+    return {
+      selectedTeam: noneTeam,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      teams: 'teams/getTeams',
+      accountConversationMetric: 'getAccountConversationMetric',
+      uiFlags: 'getOverviewUIFlags',
+    }),
+    conversationMetrics() {
+      let metric = {};
+      Object.keys(this.accountConversationMetric).forEach(key => {
+        const metricName = this.$t(
+          `OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.${OVERVIEW_METRICS[key]}`
+        );
+        metric[metricName] = this.accountConversationMetric[key];
+      });
+      return metric;
+    },
+    teamsList() {
+      return [noneTeam, ...this.teams];
+    },
+  },
+  mounted() {
+    this.$store.dispatch('fetchLiveConversationMetric');
+  },
+  methods: {
+    onSelectTeam(team) {
+      this.$store.dispatch('fetchLiveConversationMetric', {
+        team_id: !team.id ? null : team.id,
+      });
+      this.selectedTeam = team;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
+  >
+    <metric-card
+      class="!overflow-visible min-h-[150px]"
+      :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
+      :is-loading="uiFlags.isFetchingAccountConversationMetric"
+      loading-message="Loading metrics"
+    >
+      <template #control>
+        <multiselect-dropdown
+          class="!mb-0 !w-1/2"
+          :options="teamsList"
+          :selected-item="selectedTeam"
+          multiselector-title=""
+          multiselector-placeholder="All teams"
+          no-search-result="No teams found"
+          input-placeholder="Search for a team"
+          :is-filter="true"
+          @click="onSelectTeam"
+        />
+      </template>
+      <div
+        v-for="(metric, name, index) in conversationMetrics"
+        :key="index"
+        class="metric-content column"
+      >
+        <h3 class="heading">
+          {{ name }}
+        </h3>
+        <p class="metric">{{ metric }}</p>
+      </div>
+    </metric-card>
+  </div>
+</template>

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

@@ -110,6 +110,7 @@
           v-model="currentSelectedFilter"
           track-by="id"
           label="name"
+          open-direction="below"
           :placeholder="multiselectLabel"
           selected-label
           :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
@@ -127,6 +128,7 @@
         <multiselect
           v-model="currentDateRangeSelection"
           track-by="name"
+          open-direction="below"
           label="name"
           :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
           selected-label

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

@@ -1,6 +1,7 @@
 <template>
   <div class="flex-1 overflow-auto p-4">
     <woot-button
+      v-if="showDownloadButton"
       color-scheme="success"
       class-names="button--fixed-top"
       icon="arrow-download"
@@ -64,6 +65,10 @@ export default {
       type: String,
       default: 'Download Reports',
     },
+    showDownloadButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {

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

@@ -0,0 +1,180 @@
+<template>
+  <div class="flex-1 overflow-auto p-4">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ downloadButtonLabel }}
+    </woot-button>
+    <report-filter-selector
+      :show-agents-filter="false"
+      :show-group-by-filter="false"
+      @filter-change="onFilterChange"
+    />
+    <ve-table
+      max-height="calc(100vh - 21.875rem)"
+      :fixed-header="true"
+      :columns="columns"
+      :table-data="tableData"
+    />
+  </div>
+</template>
+
+<script>
+import ReportFilterSelector from './FilterSelector.vue';
+import { formatTime } from '@chatwoot/utils';
+
+import reportMixin from '../../../../../mixins/reportMixin';
+import { generateFileName } from '../../../../../helper/downloadHelper';
+import { VeTable } from 'vue-easytable';
+
+export default {
+  components: {
+    VeTable,
+    ReportFilterSelector,
+  },
+  mixins: [reportMixin],
+  props: {
+    type: {
+      type: String,
+      default: 'account',
+    },
+    getterKey: {
+      type: String,
+      default: '',
+    },
+    actionKey: {
+      type: String,
+      default: '',
+    },
+    summaryKey: {
+      type: String,
+      default: '',
+    },
+    downloadButtonLabel: {
+      type: String,
+      default: 'Download Reports',
+    },
+  },
+  data() {
+    return {
+      from: 0,
+      to: 0,
+      selectedFilter: null,
+      businessHours: false,
+    };
+  },
+  computed: {
+    columns() {
+      return [
+        {
+          field: 'agent',
+          key: 'agent',
+          title: this.type,
+          fixed: 'left',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 25,
+          renderBodyCell: ({ row }) => (
+            <div class="row-user-block">
+              <div class="user-block">
+                <h6 class="title overflow-hidden whitespace-nowrap text-ellipsis text-sm capitalize">
+                  {row.name}
+                </h6>
+              </div>
+            </div>
+          ),
+        },
+        {
+          field: 'conversationsCount',
+          key: 'conversationsCount',
+          title: 'Assigned',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 20,
+        },
+        {
+          field: 'resolutionsCount',
+          key: 'resolutionsCount',
+          title: 'Resolved',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 20,
+        },
+        {
+          field: 'avgFirstResponseTime',
+          key: 'avgFirstResponseTime',
+          title: 'Avg. first response time',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 20,
+        },
+        {
+          field: 'avgResolutionTime',
+          key: 'avgResolutionTime',
+          title: 'Avg. resolution time',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 20,
+        },
+      ];
+    },
+    tableData() {
+      return this.filterItemsList.map(team => {
+        const typeMetrics = this.getMetrics(team.id);
+        return {
+          name: team.name,
+          conversationsCount: typeMetrics.conversations_count || '--',
+          avgFirstResponseTime:
+            this.renderContent(typeMetrics.avg_first_response_time) || '--',
+          avgResolutionTime:
+            this.renderContent(typeMetrics.avg_resolution_time) || '--',
+          resolutionsCount: typeMetrics.resolved_conversations_count || '--',
+        };
+      });
+    },
+    filterItemsList() {
+      return this.$store.getters[this.getterKey] || [];
+    },
+    typeMetrics() {
+      return this.$store.getters[this.summaryKey] || [];
+    },
+  },
+  mounted() {
+    this.fetchAllData();
+  },
+  methods: {
+    renderContent(value) {
+      return value ? formatTime(value) : '--';
+    },
+    getMetrics(id) {
+      return this.typeMetrics.find(metrics => metrics.id === Number(id)) || {};
+    },
+    fetchAllData() {
+      const { from, to, businessHours } = this;
+      this.$store.dispatch(this.actionKey, {
+        since: from,
+        until: to,
+        businessHours,
+      });
+    },
+    downloadReports() {
+      const { from, to, type, businessHours } = this;
+      const dispatchMethods = {
+        agent: 'downloadAgentReports',
+        label: 'downloadLabelReports',
+        inbox: 'downloadInboxReports',
+        team: 'downloadTeamReports',
+      };
+      if (dispatchMethods[type]) {
+        const fileName = generateFileName({ type, to, businessHours });
+        const params = { from, to, fileName, businessHours };
+        this.$store.dispatch(dispatchMethods[type], params);
+      }
+    },
+    onFilterChange({ from, to, businessHours }) {
+      this.from = from;
+      this.to = to;
+      this.businessHours = businessHours;
+      this.fetchAllData();
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue

@@ -12,17 +12,12 @@
         $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE')
       }}</span>
     </div>
-    <empty-state
-      v-else-if="!isLoading && !agentMetrics.length"
-      :title="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.NO_AGENTS')"
-    />
-    <div v-if="agentMetrics.length > 0" class="table-pagination">
+    <div v-if="agents.length > 0" class="table-pagination">
       <ve-pagination
         :total="agents.length"
         :page-index="pageIndex"
         :page-size="25"
         :page-size-option="[25]"
-        @on-page-number-change="onPageNumberChange"
       />
     </div>
   </div>
@@ -31,14 +26,12 @@
 <script>
 import { VeTable, VePagination } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 export default {
   name: 'AgentTable',
   components: {
-    EmptyState,
     Spinner,
     VeTable,
     VePagination,
@@ -64,19 +57,17 @@ export default {
   },
   computed: {
     tableData() {
-      return this.agentMetrics
-        .filter(agentMetric => this.getAgentInformation(agentMetric.id))
-        .map(agent => {
-          const agentInformation = this.getAgentInformation(agent.id);
-          return {
-            agent: agentInformation.name || agentInformation.available_name,
-            email: agentInformation.email,
-            thumbnail: agentInformation.thumbnail,
-            open: agent.metric.open || 0,
-            unattended: agent.metric.unattended || 0,
-            status: agentInformation.availability_status,
-          };
-        });
+      return this.agents.map(agent => {
+        const agentMetrics = this.getAgentMetrics(agent.id);
+        return {
+          agent: agent.name,
+          email: agent.email,
+          thumbnail: agent.thumbnail,
+          open: agentMetrics.open || 0,
+          unattended: agentMetrics.unattended || 0,
+          status: agent.availability_status,
+        };
+      });
     },
     columns() {
       return [
@@ -128,12 +119,15 @@ export default {
     },
   },
   methods: {
+    getAgentMetrics(id) {
+      return (
+        this.agentMetrics.find(metrics => metrics.assignee_id === Number(id)) ||
+        {}
+      );
+    },
     onPageNumberChange(pageIndex) {
       this.$emit('page-change', pageIndex);
     },
-    getAgentInformation(id) {
-      return this.agents?.find(agent => agent.id === Number(id));
-    },
   },
 };
 </script>
@@ -172,6 +166,7 @@ export default {
       .title {
         @apply text-sm m-0 leading-[1.2] text-slate-800 dark:text-slate-100;
       }
+
       .sub-title {
         @apply text-xs text-slate-600 dark:text-slate-200;
       }

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue

@@ -11,6 +11,7 @@
             {{ header }}
           </h5>
           <span
+            v-if="isLive"
             class="flex flex-row items-center pr-2 pl-2 m-1 rounded-sm text-green-400 dark:text-green-400 text-xs bg-green-100/30 dark:bg-green-100/20"
           >
             <span
@@ -29,6 +30,7 @@
     <div
       v-if="!isLoading"
       class="card-body max-w-full w-full ml-auto mr-auto justify-between flex"
+      :class="!isLive ? 'px-0' : ''"
     >
       <slot />
     </div>
@@ -52,6 +54,10 @@ export default {
     Spinner,
   },
   props: {
+    isLive: {
+      type: Boolean,
+      default: true,
+    },
     header: {
       type: String,
       default: '',
@@ -64,6 +70,10 @@ export default {
       type: String,
       default: '',
     },
+    isFilter: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
@@ -96,12 +106,18 @@ export default {
 .card-body {
   .metric-content {
     @apply pb-2;
+
     .heading {
       @apply text-base text-slate-700 dark:text-slate-100;
     }
+
     .metric {
       @apply text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1;
     }
   }
 }
+
+.conversation-metric-loader {
+  @apply items-center flex text-base justify-center;
+}
 </style>

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="agent-table-container">
+    <ve-table
+      max-height="calc(100vh - 21.875rem)"
+      :fixed-header="true"
+      :columns="columns"
+      :table-data="tableData"
+    />
+    <div v-if="isLoading" class="agents-loader">
+      <spinner />
+      <span>{{
+        $t('OVERVIEW_REPORTS.TEAM_CONVERSATIONS.LOADING_MESSAGE')
+      }}</span>
+    </div>
+    <div v-if="teams.length > 0" class="table-pagination">
+      <ve-pagination
+        :total="teams.length"
+        :page-index="pageIndex"
+        :page-size="25"
+        :page-size-option="[25]"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { VeTable, VePagination } from 'vue-easytable';
+import Spinner from 'shared/components/Spinner.vue';
+import rtlMixin from 'shared/mixins/rtlMixin';
+
+export default {
+  name: 'TeamTable',
+  components: {
+    Spinner,
+    VeTable,
+    VePagination,
+  },
+  mixins: [rtlMixin],
+  props: {
+    teams: {
+      type: Array,
+      default: () => [],
+    },
+    teamMetrics: {
+      type: Array,
+      default: () => [],
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    pageIndex: {
+      type: Number,
+      default: 1,
+    },
+  },
+  computed: {
+    tableData() {
+      return this.teams.map(team => {
+        const teamMetrics = this.getTeamMetrics(team.id);
+        return {
+          agent: team.name,
+          open: teamMetrics.open || 0,
+          unattended: teamMetrics.unattended || 0,
+        };
+      });
+    },
+    columns() {
+      return [
+        {
+          field: 'agent',
+          key: 'agent',
+          title: this.$t(
+            'OVERVIEW_REPORTS.TEAM_CONVERSATIONS.TABLE_HEADER.AGENT'
+          ),
+          fixed: 'left',
+          align: this.isRTLView ? 'right' : 'left',
+          width: 25,
+          renderBodyCell: ({ row }) => (
+            <div class="row-user-block">
+              <div class="user-block">
+                <h6 class="capitalize title overflow-hidden whitespace-nowrap text-ellipsis">
+                  {row.agent}
+                </h6>
+              </div>
+            </div>
+          ),
+        },
+        {
+          field: 'open',
+          key: 'open',
+          title: this.$t(
+            'OVERVIEW_REPORTS.TEAM_CONVERSATIONS.TABLE_HEADER.OPEN'
+          ),
+          align: this.isRTLView ? 'right' : 'left',
+          width: 10,
+        },
+        {
+          field: 'unattended',
+          key: 'unattended',
+          title: this.$t(
+            'OVERVIEW_REPORTS.TEAM_CONVERSATIONS.TABLE_HEADER.UNATTENDED'
+          ),
+          align: this.isRTLView ? 'right' : 'left',
+          width: 10,
+        },
+      ];
+    },
+  },
+  methods: {
+    getTeamMetrics(id) {
+      return (
+        this.teamMetrics.find(metrics => metrics.team_id === Number(id)) || {}
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.agent-table-container {
+  @apply flex flex-col flex-1;
+
+  .ve-table {
+    &::v-deep {
+      th.ve-table-header-th {
+        font-size: var(--font-size-mini) !important;
+        padding: var(--space-small) var(--space-two) !important;
+      }
+
+      td.ve-table-body-td {
+        padding: var(--space-one) var(--space-two) !important;
+      }
+    }
+  }
+
+  &::v-deep .ve-pagination {
+    @apply bg-transparent dark:bg-transparent;
+  }
+
+  &::v-deep .ve-pagination-select {
+    @apply hidden;
+  }
+
+  .row-user-block {
+    @apply items-center flex text-left;
+
+    .user-block {
+      @apply items-start flex flex-col min-w-0 my-0 mx-2;
+
+      .title {
+        @apply text-sm m-0 leading-[1.2] text-slate-800 dark:text-slate-100;
+      }
+
+      .sub-title {
+        @apply text-xs text-slate-600 dark:text-slate-200;
+      }
+    }
+  }
+
+  .table-pagination {
+    @apply mt-4 text-right;
+  }
+}
+
+.agents-loader {
+  @apply items-center flex text-base justify-center p-8;
+}
+</style>

app/javascript/dashboard/store/index.js

@@ -42,6 +42,7 @@ import sla from './modules/sla';
 import teamMembers from './modules/teamMembers';
 import teams from './modules/teams';
 import userNotificationSettings from './modules/userNotificationSettings';
+import summaryReports from './modules/summaryReports';
 import webhooks from './modules/webhooks';
 import draftMessages from './modules/draftMessages';
 import SLAReports from './modules/SLAReports';
@@ -90,6 +91,7 @@ export default new Vuex.Store({
     reports,
     teamMembers,
     teams,
+    summaryReports,
     userNotificationSettings,
     webhooks,
     draftMessages,

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

@@ -4,10 +4,19 @@ import Report from '../../api/reports';
 import { downloadCsvFile, generateFileName } from '../../helper/downloadHelper';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
 import { REPORTS_EVENTS } from '../../helper/AnalyticsHelper/events';
-import {
-  reconcileHeatmapData,
-  clampDataBetweenTimeline,
-} from 'shared/helpers/ReportsDataHelper';
+import { clampDataBetweenTimeline } from 'shared/helpers/ReportsDataHelper';
+import liveReports from '../../api/liveReports';
+
+const accountSummaryInitialData = {
+  avg_first_response_time: 0,
+  avg_resolution_time: 0,
+  conversations_count: 0,
+  incoming_messages_count: 0,
+  outgoing_messages_count: 0,
+  reply_time: 0,
+  resolutions_count: 0,
+  previous: {},
+};
 
 const state = {
   fetchingStatus: false,
@@ -35,18 +44,7 @@ const state = {
       reply_time: [],
     },
   },
-  accountSummary: {
-    avg_first_response_time: 0,
-    avg_resolution_time: 0,
-    conversations_count: 0,
-    incoming_messages_count: 0,
-    outgoing_messages_count: 0,
-    reply_time: 0,
-    resolutions_count: 0,
-    bot_resolutions_count: 0,
-    bot_handoffs_count: 0,
-    previous: {},
-  },
+  accountSummary: accountSummaryInitialData,
   botSummary: {
     bot_resolutions_count: 0,
     bot_handoffs_count: 0,
@@ -57,10 +55,12 @@ const state = {
       isFetchingAccountConversationMetric: false,
       isFetchingAccountConversationsHeatmap: false,
       isFetchingAgentConversationMetric: false,
+      isFetchingTeamConversationMetric: false,
     },
     accountConversationMetric: {},
     accountConversationHeatmap: [],
     agentConversationMetric: [],
+    teamConversationMetric: [],
   },
 };
 
@@ -83,6 +83,9 @@ const getters = {
   getAgentConversationMetric(_state) {
     return _state.overview.agentConversationMetric;
   },
+  getTeamConversationMetric(_state) {
+    return _state.overview.teamConversationMetric;
+  },
   getOverviewUIFlags($state) {
     return $state.overview.uiFlags;
   },
@@ -114,16 +117,12 @@ export const actions = {
       let { data } = heatmapData;
       data = clampDataBetweenTimeline(data, reportObj.from, reportObj.to);
 
-      data = reconcileHeatmapData(
-        data,
-        state.overview.accountConversationHeatmap
-      );
-
       commit(types.default.SET_HEATMAP_DATA, data);
       commit(types.default.TOGGLE_HEATMAP_LOADING, false);
     });
   },
   fetchAccountSummary({ commit }, reportObj) {
+    commit(types.default.SET_ACCOUNT_SUMMARY, accountSummaryInitialData);
     Report.getSummary(
       reportObj.from,
       reportObj.to,
@@ -153,9 +152,10 @@ export const actions = {
         commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
       });
   },
-  fetchAccountConversationMetric({ commit }, reportObj) {
+  fetchLiveConversationMetric({ commit }, params = {}) {
     commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, true);
-    Report.getConversationMetric(reportObj.type)
+    liveReports
+      .getConversationMetric(params)
       .then(accountConversationMetric => {
         commit(
           types.default.SET_ACCOUNT_CONVERSATION_METRIC,
@@ -167,9 +167,10 @@ export const actions = {
         commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, false);
       });
   },
-  fetchAgentConversationMetric({ commit }, reportObj) {
+  fetchAgentConversationMetric({ commit }) {
     commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, true);
-    Report.getConversationMetric(reportObj.type, reportObj.page)
+    liveReports
+      .getGroupedConversations()
       .then(agentConversationMetric => {
         commit(
           types.default.SET_AGENT_CONVERSATION_METRIC,
@@ -181,6 +182,21 @@ export const actions = {
         commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, false);
       });
   },
+  fetchTeamConversationMetric({ commit }) {
+    commit(types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING, true);
+    liveReports
+      .getGroupedConversations({ groupBy: 'team_id' })
+      .then(agentConversationMetric => {
+        commit(
+          types.default.SET_TEAM_CONVERSATION_METRIC,
+          agentConversationMetric.data
+        );
+        commit(types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING, false);
+      })
+      .catch(() => {
+        commit(types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING, false);
+      });
+  },
   downloadAgentReports(_, reportObj) {
     return Report.getAgentReports(reportObj)
       .then(response => {
@@ -234,7 +250,7 @@ export const actions = {
       });
   },
   downloadAccountConversationHeatmap(_, reportObj) {
-    Report.getConversationTrafficCSV()
+    Report.getConversationTrafficCSV({ daysBefore: reportObj.daysBefore })
       .then(response => {
         downloadCsvFile(
           generateFileName({
@@ -283,9 +299,15 @@ const mutations = {
   [types.default.SET_AGENT_CONVERSATION_METRIC](_state, metricData) {
     _state.overview.agentConversationMetric = metricData;
   },
+  [types.default.SET_TEAM_CONVERSATION_METRIC](_state, metricData) {
+    _state.overview.teamConversationMetric = metricData;
+  },
   [types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING](_state, flag) {
     _state.overview.uiFlags.isFetchingAgentConversationMetric = flag;
   },
+  [types.default.TOGGLE_TEAM_CONVERSATION_METRIC_LOADING](_state, flag) {
+    _state.overview.uiFlags.isFetchingTeamConversationMetric = flag;
+  },
 };
 
 export default {

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

@@ -0,0 +1,68 @@
+import SummaryReportsAPI from '../../api/summaryReports';
+import Vue from 'vue';
+
+export const state = {
+  teamSummaryReports: [],
+  agentSummaryReports: [],
+  inboxSummaryReports: [],
+  uiFlags: {},
+};
+
+export const getters = {
+  getAgentSummaryReports(_state) {
+    return _state.agentSummaryReports;
+  },
+  getTeamSummaryReports(_state) {
+    return _state.teamSummaryReports;
+  },
+  getInboxSummaryReports(_state) {
+    return _state.inboxSummaryReports;
+  },
+};
+
+export const actions = {
+  async fetchTeamSummaryReports({ commit }, params) {
+    try {
+      const response = await SummaryReportsAPI.getTeamReports(params);
+      commit('setTeamSummaryReport', response.data);
+    } catch (error) {
+      // Ignore error
+    }
+  },
+  async fetchAgentSummaryReports({ commit }, params) {
+    try {
+      const response = await SummaryReportsAPI.getAgentReports(params);
+      commit('setAgentSummaryReport', response.data);
+    } catch (error) {
+      // Ignore error
+    }
+  },
+  async fetchInboxSummaryReports({ commit }, params) {
+    try {
+      const response = await SummaryReportsAPI.getInboxReports(params);
+      commit('setInboxSummaryReport', response.data);
+    } catch (error) {
+      // Ignore error
+    }
+  },
+};
+
+export const mutations = {
+  setTeamSummaryReport(_state, data) {
+    Vue.set(_state, 'teamSummaryReports', data);
+  },
+  setAgentSummaryReport(_state, data) {
+    Vue.set(_state, 'agentSummaryReports', data);
+  },
+  setInboxSummaryReport(_state, data) {
+    Vue.set(_state, 'inboxSummaryReports', data);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

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

@@ -182,8 +182,11 @@ export default {
   TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING:
     'TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING',
   SET_AGENT_CONVERSATION_METRIC: 'SET_AGENT_CONVERSATION_METRIC',
+  SET_TEAM_CONVERSATION_METRIC: 'SET_TEAM_CONVERSATION_METRIC',
   TOGGLE_AGENT_CONVERSATION_METRIC_LOADING:
     'TOGGLE_AGENT_CONVERSATION_METRIC_LOADING',
+  TOGGLE_TEAM_CONVERSATION_METRIC_LOADING:
+    'TOGGLE_TEAM_CONVERSATION_METRIC_LOADING',
 
   // Conversation Metadata
   SET_CONVERSATION_METADATA: 'SET_CONVERSATION_METADATA',

app/jobs/inboxes/fetch_imap_emails_job.rb

@@ -14,7 +14,7 @@ class Inboxes::FetchImapEmailsJob < MutexApplicationJob
   rescue *ExceptionList::IMAP_EXCEPTIONS => e
     Rails.logger.error "Authorization error for email channel - #{channel.inbox.id} : #{e.message}"
   rescue EOFError, OpenSSL::SSL::SSLError, Net::IMAP::NoResponseError, Net::IMAP::BadResponseError, Net::IMAP::InvalidResponseError => e
-    Rails.logger.error "Error for email channel - #{channel.inbox.id} : #{e.message}"
+    Rails.logger.error "Net::IMAP Error for email channel - #{channel.inbox.id} : #{e.message}"
   rescue LockAcquisitionError
     Rails.logger.error "Lock failed for #{channel.inbox.id}"
   rescue StandardError => e
@@ -39,8 +39,8 @@ class Inboxes::FetchImapEmailsJob < MutexApplicationJob
       process_mail(inbound_mail, channel)
     end
   rescue OAuth2::Error => e
-    Rails.logger.error "Error for email channel - #{channel.inbox.id} : #{e.message}"
-    channel.authorization_error!
+    Rails.logger.error "OAuth2::Error for email channel - #{channel.inbox.id} : #{e.message}"
+    # channel.authorization_error!
   end
 
   def process_mail(inbound_mail, channel)

app/views/api/v2/accounts/reports/agents.csv.erb

@@ -11,5 +11,5 @@
 %>
 <%= CSVSafe.generate_line headers -%>
 <% @report_data.each do |row| %>
-<%= CSVSafe.generate_line row -%>
+<%= CSV.generate_line row -%>
 <% end %>

app/views/api/v2/accounts/reports/conversation_traffic.erb

@@ -1,5 +1,5 @@
 <%= CSV.generate_line [I18n.t('reports.conversation_traffic_csv.timezone'), @timezone] %>
 
 <% @report_data.each do |row| %>
-<%= CSVSafe.generate_line row -%>
+<%= CSV.generate_line row -%>
 <% end %>

app/views/api/v2/accounts/reports/inboxes.csv.erb

@@ -10,5 +10,5 @@
 %>
 <%= CSVSafe.generate_line headers -%>
 <% @report_data.each do |row| %>
-<%= CSVSafe.generate_line row -%>
+<%= CSV.generate_line row -%>
 <% end %>

app/views/api/v2/accounts/reports/labels.csv.erb

@@ -9,5 +9,5 @@
 %>
 <%= CSVSafe.generate_line headers -%>
 <% @report_data.each do |row| %>
-<%= CSVSafe.generate_line row -%>
+<%= CSV.generate_line row -%>
 <% end %>

app/views/api/v2/accounts/reports/teams.csv.erb

@@ -11,5 +11,5 @@
 %>
 <%= CSVSafe.generate_line headers -%>
 <% @report_data.each do |row| %>
-<%= CSVSafe.generate_line row -%>
+<%= CSV.generate_line row -%>
 <% end %>

config/routes.rb

@@ -317,10 +317,17 @@ Rails.application.routes.draw do
     namespace :v2 do
       resources :accounts, only: [:create] do
         scope module: :accounts do
+          resources :live_reports, only: [] do
+            collection do
+              get :conversation_metrics
+              get :grouped_conversation_metrics
+            end
+          end
           resources :summary_reports, only: [] do
             collection do
               get :agent
               get :team
+              get :inbox
             end
           end
           resources :reports, only: [:index] do