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/superadmin_pages/views/dashboard/Index.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { computed } from 'vue';
+import BarChart from 'shared/components/charts/BarChart.vue';
+const props = defineProps({
+  componentData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const prepareData = sourceData => {
+  var labels = [];
+  var data = [];
+  sourceData.forEach(item => {
+    labels.push(item[0]);
+    data.push(item[1]);
+  });
+  return {
+    labels,
+    datasets: [
+      {
+        type: 'bar',
+        backgroundColor: 'rgb(31, 147, 255)',
+        yAxisID: 'y',
+        label: 'Conversations',
+        data: data,
+      },
+    ],
+  };
+};
+
+const chartData = computed(() => {
+  return prepareData(props.componentData.chartData);
+});
+
+const { accountsCount, usersCount, inboxesCount, conversationsCount } =
+  props.componentData;
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <header class="main-content__header" role="banner">
+      <h1 id="page-title" class="main-content__page-title">Admin Dashboard</h1>
+    </header>
+
+    <section class="main-content__body main-content__body--flush">
+      <div class="report--list">
+        <div class="report-card">
+          <div class="metric">{{ accountsCount }}</div>
+          <div>Accounts</div>
+        </div>
+        <div class="report-card">
+          <div class="metric">{{ usersCount }}</div>
+          <div>Users</div>
+        </div>
+        <div class="report-card">
+          <div class="metric">{{ inboxesCount }}</div>
+          <div>Inboxes</div>
+        </div>
+        <div class="report-card">
+          <div class="metric">{{ conversationsCount }}</div>
+          <div>Conversations</div>
+        </div>
+      </div>
+    </section>
+    <BarChart
+      class="p-8 w-full"
+      :collection="chartData"
+      style="max-height: 500px"
+    />
+  </div>
+</template>