Commit

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

@@ -1,7 +1,13 @@
 <template>
   <div class="overflow-auto">
-    <metric-card :is-live="false" header="Team wise reports" />
-    <metric-card :is-live="false" header="Team wise reports">
+    <metric-card :is-live="false" header="All teams overview">
+      <team-list-table />
+    </metric-card>
+    <metric-card
+      :is-live="false"
+      header="Team wise reports"
+      class="overflow-visible"
+    >
       <woot-reports
         key="team-reports"
         class="!p-0"
@@ -15,6 +21,7 @@
 </template>
 
 <script>
+import TeamListTable from './components/AggregateTables/TeamListTable.vue';
 import WootReports from './components/WootReports.vue';
 import MetricCard from './components/overview/MetricCard.vue';
 
@@ -22,6 +29,7 @@ export default {
   components: {
     WootReports,
     MetricCard,
+    TeamListTable,
   },
 };
 </script>

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

@@ -0,0 +1,152 @@
+<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',
+    }),
+    tableData() {
+      return this.teams.map(team => {
+        const teamMetrics = this.getTeamMetrics(team.id);
+        return {
+          name: team.name,
+          conversationsCount: teamMetrics.open || 0,
+          avgFirstResponseTime: teamMetrics.open || 0,
+          avgResolutionTime: teamMetrics.open || 0,
+          resolutionsCount: teamMetrics.open || 0,
+        };
+      });
+    },
+    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/overview/TeamTable.vue

@@ -27,7 +27,6 @@
 import { VeTable, VePagination } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
 import rtlMixin from 'shared/mixins/rtlMixin';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 export default {
   name: 'TeamTable',
@@ -79,17 +78,10 @@ export default {
           width: 25,
           renderBodyCell: ({ row }) => (
             <div class="row-user-block">
-              <Thumbnail
-                src={row.thumbnail}
-                size="32px"
-                username={row.agent}
-                status={row.status}
-              />
               <div class="user-block">
-                <h6 class="title overflow-hidden whitespace-nowrap text-ellipsis">
+                <h6 class="capitalize title overflow-hidden whitespace-nowrap text-ellipsis">
                   {row.agent}
                 </h6>
-                <span class="sub-title">{row.email}</span>
               </div>
             </div>
           ),