feat: Add CSAT reports (#2608)

app/javascript/dashboard/components/widgets/ReportStatsCard.vue

@@ -1,12 +1,21 @@
 <template>
-  <div class="small-2 report-card" :class="{ 'active': selected }" v-on:click="onClick(index)">
-    <h3 class="heading">{{heading}}</h3>
-    <h4 class="metric">{{point}}</h4>
-    <p class="desc">{{desc}}</p>
+  <div
+    class="small-2 report-card"
+    :class="{ active: selected }"
+    @click="onClick(index)"
+  >
+    <h3 class="heading">
+      {{ heading }}
+    </h3>
+    <h4 class="metric">
+      {{ point }}
+    </h4>
+    <p class="desc">
+      {{ desc }}
+    </p>
   </div>
 </template>
 <script>
-
 export default {
   props: {
     heading: String,

app/javascript/dashboard/components/widgets/UserAvatarWithName.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="row--user-block">
+    <thumbnail
+      :src="user.thumbnail"
+      :size="size"
+      :username="user.name"
+      :status="user.availability_status"
+    />
+    <h6 class="text-block-title text-truncate text-capitalize">
+      {{ user.name }}
+    </h6>
+  </div>
+</template>
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    user: {
+      type: Object,
+      default: () => {},
+    },
+    size: {
+      type: String,
+      default: '20px',
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.row--user-block {
+  align-items: center;
+  display: flex;
+  text-align: left;
+
+  .user-name {
+    margin: 0;
+    text-transform: capitalize;
+  }
+  .user-thumbnail-box {
+    margin-right: var(--space-small);
+  }
+}
+</style>

app/javascript/dashboard/components/widgets/chart/HorizontalBarChart.js

@@ -0,0 +1,54 @@
+import { HorizontalBar } from 'vue-chartjs';
+
+const chartOptions = {
+  responsive: true,
+  legend: {
+    display: false,
+  },
+  title: {
+    display: false,
+  },
+  tooltips: {
+    enabled: false,
+  },
+  scales: {
+    xAxes: [
+      {
+        gridLines: {
+          offsetGridLines: false,
+        },
+        display: false,
+        stacked: true,
+      },
+    ],
+    yAxes: [
+      {
+        gridLines: {
+          offsetGridLines: false,
+        },
+        display: false,
+        stacked: true,
+      },
+    ],
+  },
+};
+
+export default {
+  extends: HorizontalBar,
+  props: {
+    collection: {
+      type: Object,
+      default: () => {},
+    },
+    chartOptions: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  mounted() {
+    this.renderChart(this.collection, {
+      ...chartOptions,
+      ...this.chartOptions,
+    });
+  },
+};