Merge branch 'develop' into report-rewrite

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,
-        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,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/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

@@ -131,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/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

@@ -4,24 +4,7 @@
       <div
         class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
       >
-        <metric-card
-          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
-          :is-loading="uiFlags.isFetchingAccountConversationMetric"
-          :loading-message="
-            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
-          "
-        >
-          <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>
+        <open-conversations />
       </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')">
@@ -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();
 
     bus.$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/Heatmap.vue

@@ -69,6 +69,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    selectedDayFilter: {
+      type: Object,
+      default: () => ({}),
+    },
     isLoading: {
       type: Boolean,
       default: false,
@@ -165,6 +169,7 @@ $marker-height: var(--space-two);
 @mixin heatmap-level($level) {
   $color: map-get($heatmap-colors, 'level-#{$level}');
   background-color: $color;
+
   &:hover {
     border: 1px solid map-get($heatmap-hover-border-color, 'level-#{$level}');
   }
@@ -188,6 +193,7 @@ $marker-height: var(--space-two);
   100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0;
   }
@@ -270,18 +276,23 @@ $marker-height: var(--space-two);
     &.l1 {
       @include heatmap-level(1);
     }
+
     &.l2 {
       @include heatmap-level(2);
     }
+
     &.l3 {
       @include heatmap-level(3);
     }
+
     &.l4 {
       @include heatmap-level(4);
     }
+
     &.l5 {
       @include heatmap-level(5);
     }
+
     &.l6 {
       @include heatmap-level(6);
     }

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

@@ -0,0 +1,85 @@
+<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="column small-12 medium-8 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/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,15 +57,15 @@ export default {
   },
   computed: {
     tableData() {
-      return this.agentMetrics.map(agent => {
-        const agentInformation = this.getAgentInformation(agent.id);
+      return this.agents.map(agent => {
+        const agentMetrics = this.getAgentMetrics(agent.id);
         return {
-          agent: agentInformation.name,
-          email: agentInformation.email,
-          thumbnail: agentInformation.thumbnail,
-          open: agent.metric.open || 0,
-          unattended: agent.metric.unattended || 0,
-          status: agentInformation.availability_status,
+          agent: agent.name,
+          email: agent.email,
+          thumbnail: agent.thumbnail,
+          open: agentMetrics.open || 0,
+          unattended: agentMetrics.unattended || 0,
+          status: agent.availability_status,
         };
       });
     },
@@ -126,11 +119,11 @@ export default {
     },
   },
   methods: {
-    onPageNumberChange(pageIndex) {
-      this.$emit('page-change', pageIndex);
-    },
-    getAgentInformation(id) {
-      return this.agents.find(agent => agent.id === Number(id));
+    getAgentMetrics(id) {
+      return (
+        this.agentMetrics.find(metrics => metrics.assignee_id === Number(id)) ||
+        {}
+      );
     },
   },
 };
@@ -170,6 +163,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
@@ -28,6 +29,7 @@
     </div>
     <div
       v-if="!isLoading"
+      :class="!isLive ? 'px-0' : ''"
       class="card-body max-w-full w-full ml-auto mr-auto justify-between flex"
     >
       <slot />
@@ -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,9 +106,11 @@ 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;
     }

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';
@@ -108,6 +109,7 @@ export default new Vuex.Store({
     reports,
     teamMembers,
     teams,
+    summaryReports,
     userNotificationSettings,
     webhooks,
     draftMessages,

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

@@ -4,10 +4,8 @@ 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 state = {
   fetchingStatus: false,
@@ -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,11 +117,6 @@ 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);
     });
@@ -153,9 +151,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 +166,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 +181,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 +249,7 @@ export const actions = {
       });
   },
   downloadAccountConversationHeatmap(_, reportObj) {
-    Report.getConversationTrafficCSV()
+    Report.getConversationTrafficCSV({ daysBefore: reportObj.daysBefore })
       .then(response => {
         downloadCsvFile(
           generateFileName({
@@ -283,9 +298,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

@@ -172,8 +172,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/views/api/v2/accounts/reports/agents.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/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

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

config/routes.rb

@@ -300,10 +300,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