From bcd5633d2a07bc71838d4b9cd6e0665d053bb6d0 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Tue, 13 Feb 2024 14:36:04 -0800
Subject: [PATCH] Filter for live conversations

---
 .../v2/reports/agent_summary_builder.rb       |  17 ++-
 .../v2/reports/team_summary_builder.rb        |   6 +
 .../v2/accounts/live_reports_controller.rb    |   2 +-
 app/javascript/dashboard/api/liveReports.js   |   4 +-
 .../dashboard/api/summaryReports.js           |  30 +++++
 .../settings/reports/LiveReports.vue          |  41 ++----
 .../settings/reports/TeamReports.vue          |  22 +++-
 .../LiveReports/OpenConversations.vue         |  79 ++++++++++++
 .../components/overview/MetricCard.vue        |  14 +-
 .../dashboard/store/modules/reports.js        |   4 +-
 .../dashboard/store/modules/summaryReports.js | 121 ++++++++++++++++++
 11 files changed, 288 insertions(+), 52 deletions(-)
 create mode 100644 app/javascript/dashboard/api/summaryReports.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/LiveReports/OpenConversations.vue
 create mode 100644 app/javascript/dashboard/store/modules/summaryReports.js

diff --git a/app/builders/v2/reports/agent_summary_builder.rb b/app/builders/v2/reports/agent_summary_builder.rb
index 382c67bf5..49bd706cb 100644
--- a/app/builders/v2/reports/agent_summary_builder.rb
+++ b/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
diff --git a/app/builders/v2/reports/team_summary_builder.rb b/app/builders/v2/reports/team_summary_builder.rb
index 3d7e765b3..00afb7132 100644
--- a/app/builders/v2/reports/team_summary_builder.rb
+++ b/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]
diff --git a/app/controllers/api/v2/accounts/live_reports_controller.rb b/app/controllers/api/v2/accounts/live_reports_controller.rb
index 59804c988..27a06a66d 100644
--- a/app/controllers/api/v2/accounts/live_reports_controller.rb
+++ b/app/controllers/api/v2/accounts/live_reports_controller.rb
@@ -42,7 +42,7 @@ class Api::V2::Accounts::LiveReportsController < Api::V1::Accounts::BaseControll
   def team
     return unless permitted_params[:team_id]
 
-    @team ||= Current.account.teams.find_by(permitted_params[:team_id])
+    @team ||= Current.account.teams.find(permitted_params[:team_id])
   end
 
   def load_conversations
diff --git a/app/javascript/dashboard/api/liveReports.js b/app/javascript/dashboard/api/liveReports.js
index 759ebc2a9..1435da258 100644
--- a/app/javascript/dashboard/api/liveReports.js
+++ b/app/javascript/dashboard/api/liveReports.js
@@ -6,8 +6,8 @@ class LiveReportsAPI extends ApiClient {
     super('live_reports', { accountScoped: true, apiVersion: 'v2' });
   }
 
-  getConversationMetric() {
-    return axios.get(`${this.url}/conversation_metrics`);
+  getConversationMetric(params = {}) {
+    return axios.get(`${this.url}/conversation_metrics`, { params });
   }
 
   getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
diff --git a/app/javascript/dashboard/api/summaryReports.js b/app/javascript/dashboard/api/summaryReports.js
new file mode 100644
index 000000000..f978ec107
--- /dev/null
+++ b/app/javascript/dashboard/api/summaryReports.js
@@ -0,0 +1,30 @@
+/* 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}/agents`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+}
+
+export default new SummaryReportsAPI();
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index 2cf0668ba..9c8d44dc4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -1,28 +1,13 @@
 <template>
   <div class="flex-1 overflow-auto p-4">
     <div class="row">
-      <div class="column small-12 medium-8 conversation-metric">
+      <open-conversations />
+
+      <div class="column small-12 medium-4 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 column"
-          >
-            <h3 class="heading">
-              {{ name }}
-            </h3>
-            <p class="metric">{{ metric }}</p>
-          </div>
-        </metric-card>
-      </div>
-      <div class="column small-12 medium-4">
-        <metric-card :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
           <div
             v-for="(metric, name, index) in agentStatusMetrics"
             :key="index"
@@ -79,20 +64,22 @@
 </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 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';
 
 export default {
   name: 'LiveReports',
   components: {
+    OpenConversations,
     TeamTable,
     AgentTable,
     MetricCard,
@@ -108,7 +95,6 @@ export default {
       agentStatus: 'agents/getAgentStatus',
       agents: 'agents/getAgents',
       teams: 'teams/getTeams',
-      accountConversationMetric: 'getAccountConversationMetric',
       agentConversationMetric: 'getAgentConversationMetric',
       teamConversationMetric: 'getTeamConversationMetric',
       accountConversationHeatmap: 'getAccountConversationHeatmapData',
@@ -124,16 +110,6 @@ 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');
@@ -146,7 +122,6 @@ export default {
   },
   methods: {
     fetchAllData() {
-      this.$store.dispatch('fetchLiveConversationMetric');
       this.$store.dispatch('fetchAgentConversationMetric');
       this.$store.dispatch('fetchTeamConversationMetric');
       this.fetchHeatmapData();
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
index d920404c1..0925b1d2a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
@@ -1,19 +1,27 @@
 <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="overflow-auto">
+    <metric-card :is-live="false" header="Team wise reports" />
+    <metric-card :is-live="false" header="Team wise reports">
+      <woot-reports
+        key="team-reports"
+        class="!p-0"
+        type="team"
+        getter-key="teams/getTeams"
+        action-key="teams/get"
+        :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
+      />
+    </metric-card>
+  </div>
 </template>
 
 <script>
 import WootReports from './components/WootReports.vue';
+import MetricCard from './components/overview/MetricCard.vue';
 
 export default {
   components: {
     WootReports,
+    MetricCard,
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/LiveReports/OpenConversations.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/LiveReports/OpenConversations.vue
new file mode 100644
index 000000000..958e8e41f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/LiveReports/OpenConversations.vue
@@ -0,0 +1,79 @@
+<script>
+import { mapGetters } from 'vuex';
+import { OVERVIEW_METRICS } from '../../constants';
+import MetricCard from '../overview/MetricCard.vue';
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+
+export default {
+  components: {
+    MultiselectDropdown,
+    MetricCard,
+  },
+  data() {
+    return {
+      selectedTeam: null,
+    };
+  },
+  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;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('fetchLiveConversationMetric');
+  },
+  methods: {
+    onSelectTeam(team) {
+      this.$store.dispatch('fetchLiveConversationMetric', { team_id: team.id });
+      this.selectedTeam = team;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="column small-12 medium-8 conversation-metric">
+    <metric-card
+      class="overflow-visible"
+      :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="teams"
+          :selected-item="selectedTeam"
+          multiselector-title=""
+          multiselector-placeholder="Select a team"
+          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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
index 3d47af259..c52624442 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
@@ -4,7 +4,7 @@
       <slot name="header">
         <div class="card-header--title-area">
           <h5>{{ header }}</h5>
-          <span class="live">
+          <span v-if="isLive" class="live">
             <span class="ellipse" /><span>{{
               $t('OVERVIEW_REPORTS.LIVE')
             }}</span>
@@ -15,7 +15,7 @@
         </div>
       </slot>
     </div>
-    <div v-if="!isLoading" class="card-body row">
+    <div v-if="!isLoading" class="card-body row" :class="!isLive ? 'px-0' : ''">
       <slot />
     </div>
     <div v-else-if="isLoading" class="conversation-metric-loader">
@@ -33,6 +33,10 @@ export default {
     Spinner,
   },
   props: {
+    isLive: {
+      type: Boolean,
+      default: true,
+    },
     header: {
       type: String,
       default: '',
@@ -45,6 +49,10 @@ export default {
       type: String,
       default: '',
     },
+    isFilter: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
@@ -95,9 +103,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;
     }
diff --git a/app/javascript/dashboard/store/modules/reports.js b/app/javascript/dashboard/store/modules/reports.js
index 3e92486c7..f82c22775 100644
--- a/app/javascript/dashboard/store/modules/reports.js
+++ b/app/javascript/dashboard/store/modules/reports.js
@@ -131,10 +131,10 @@ export const actions = {
         commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
       });
   },
-  fetchLiveConversationMetric({ commit }) {
+  fetchLiveConversationMetric({ commit }, params = {}) {
     commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, true);
     liveReports
-      .getConversationMetric()
+      .getConversationMetric(params)
       .then(accountConversationMetric => {
         commit(
           types.default.SET_ACCOUNT_CONVERSATION_METRIC,
diff --git a/app/javascript/dashboard/store/modules/summaryReports.js b/app/javascript/dashboard/store/modules/summaryReports.js
new file mode 100644
index 000000000..19cb78966
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/summaryReports.js
@@ -0,0 +1,121 @@
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
+import types from '../mutation-types';
+import LabelsAPI from '../../api/labels';
+import AnalyticsHelper from '../../helper/AnalyticsHelper';
+import { LABEL_EVENTS } from '../../helper/AnalyticsHelper/events';
+
+export const state = {
+  teamSummaryReports: [],
+  agentSummaryReports: [],
+  uiFlags: {
+    isFetching: false,
+    isFetchingItem: false,
+    isCreating: false,
+    isDeleting: false,
+  },
+};
+
+export const getters = {
+  getAgentSummaryReport(_state) {
+    return _state.agentSummaryReports;
+  },
+  getTeamSummaryReports(_state) {
+    return _state.teamSummaryReports;
+  },
+  getLabelsOnSidebar(_state) {
+    return _state.records
+      .filter(record => record.show_on_sidebar)
+      .sort((a, b) => a.title.localeCompare(b.title));
+  },
+};
+
+export const actions = {
+  revalidate: async function revalidate({ commit }, { newKey }) {
+    try {
+      const isExistingKeyValid = await LabelsAPI.validateCacheKey(newKey);
+      if (!isExistingKeyValid) {
+        const response = await LabelsAPI.refetchAndCommit(newKey);
+        commit(types.SET_LABELS, response.data.payload);
+      }
+    } catch (error) {
+      // Ignore error
+    }
+  },
+
+  get: async function getLabels({ commit }) {
+    commit(types.SET_LABEL_UI_FLAG, { isFetching: true });
+    try {
+      const response = await LabelsAPI.get(true);
+      const sortedLabels = response.data.payload.sort((a, b) =>
+        a.title.localeCompare(b.title)
+      );
+      commit(types.SET_LABELS, sortedLabels);
+    } catch (error) {
+      // Ignore error
+    } finally {
+      commit(types.SET_LABEL_UI_FLAG, { isFetching: false });
+    }
+  },
+
+  create: async function createLabels({ commit }, cannedObj) {
+    commit(types.SET_LABEL_UI_FLAG, { isCreating: true });
+    try {
+      const response = await LabelsAPI.create(cannedObj);
+      AnalyticsHelper.track(LABEL_EVENTS.CREATE);
+      commit(types.ADD_LABEL, response.data);
+    } catch (error) {
+      const errorMessage = error?.response?.data?.message;
+      throw new Error(errorMessage);
+    } finally {
+      commit(types.SET_LABEL_UI_FLAG, { isCreating: false });
+    }
+  },
+
+  update: async function updateLabels({ commit }, { id, ...updateObj }) {
+    commit(types.SET_LABEL_UI_FLAG, { isUpdating: true });
+    try {
+      const response = await LabelsAPI.update(id, updateObj);
+      AnalyticsHelper.track(LABEL_EVENTS.UPDATE);
+      commit(types.EDIT_LABEL, response.data);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.SET_LABEL_UI_FLAG, { isUpdating: false });
+    }
+  },
+
+  delete: async function deleteLabels({ commit }, id) {
+    commit(types.SET_LABEL_UI_FLAG, { isDeleting: true });
+    try {
+      await LabelsAPI.delete(id);
+      AnalyticsHelper.track(LABEL_EVENTS.DELETED);
+      commit(types.DELETE_LABEL, id);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.SET_LABEL_UI_FLAG, { isDeleting: false });
+    }
+  },
+};
+
+export const mutations = {
+  [types.SET_LABEL_UI_FLAG](_state, data) {
+    _state.uiFlags = {
+      ..._state.uiFlags,
+      ...data,
+    };
+  },
+
+  [types.SET_LABELS]: MutationHelpers.set,
+  [types.ADD_LABEL]: MutationHelpers.create,
+  [types.EDIT_LABEL]: MutationHelpers.update,
+  [types.DELETE_LABEL]: MutationHelpers.destroy,
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};