feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436
Fixes https://github.com/chatwoot/chatwoot/issues/9767
Fixes https://github.com/chatwoot/chatwoot/issues/10156
Fixes https://github.com/chatwoot/chatwoot/issues/6031
Fixes https://github.com/chatwoot/chatwoot/issues/5696
Fixes https://github.com/chatwoot/chatwoot/issues/9250
Fixes https://github.com/chatwoot/chatwoot/issues/9762

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/shared/components/charts/BarChart.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue';
+import { Bar } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+} from 'chart.js';
+
+const props = defineProps({
+  collection: {
+    type: Object,
+    default: () => ({}),
+  },
+  chartOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+ChartJS.register(Title, Tooltip, BarElement, CategoryScale, LinearScale);
+
+const fontFamily =
+  'Inter,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+
+const defaultChartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  legend: {
+    display: false,
+    labels: {
+      fontFamily,
+    },
+  },
+  animation: {
+    duration: 0,
+  },
+  datasets: {
+    bar: {
+      barPercentage: 1.0,
+    },
+  },
+  scales: {
+    x: {
+      ticks: {
+        fontFamily: fontFamily,
+      },
+      grid: {
+        drawOnChartArea: false,
+      },
+    },
+    y: {
+      type: 'linear',
+      position: 'left',
+      ticks: {
+        fontFamily: fontFamily,
+        beginAtZero: true,
+        stepSize: 1,
+      },
+      grid: {
+        drawOnChartArea: false,
+      },
+    },
+  },
+};
+
+const options = computed(() => {
+  return { ...defaultChartOptions, ...props.chartOptions };
+});
+</script>
+
+<template>
+  <Bar :data="collection" :options="options" />
+</template>