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/views/super_admin/dashboard/index.html.erb

@@ -1,65 +1,11 @@
-<%#
-# Index
-
-This view is the template for the index page.
-It is responsible for rendering the search bar, header and pagination.
-It renders the `_table` partial to display details about the resources.
-
-## Local variables:
-
-- `page`:
-  An instance of [Administrate::Page::Collection][1].
-  Contains helper methods to help display a table,
-  and knows which attributes should be displayed in the resource's table.
-- `resources`:
-  An instance of `ActiveRecord::Relation` containing the resources
-  that match the user's search criteria.
-  By default, these resources are passed to the table partial to be displayed.
-- `search_term`:
-  A string containing the term the user has searched for, if any.
-- `show_search_bar`:
-  A boolean that determines if the search bar should be shown.
-
-[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Collection
-%>
-<%= javascript_include_tag "dashboardChart" %>
-
 <% content_for(:title) do %>
   Admin Dashboard
 <% end %>
 
-<header class="main-content__header" role="banner">
-  <h1 class="main-content__page-title" id="page-title">
-    <%= content_for(:title) %>
-  </h1>
-</header>
-
-<section class="main-content__body main-content__body--flush">
-
-<div class="report--list">
-  <div class="report-card">
-    <div class="metric"><%= @accounts_count %></div>
-    <div>Accounts</div>
-  </div>
-  <div class="report-card">
-    <div class="metric"><%= @users_count  %></div>
-    <div>Users</div>
-  </div>
-  <div class="report-card">
-    <div class="metric"><%= @inboxes_count  %></div>
-    <div>Inboxes</div>
-  </div>
-  <div class="report-card">
-    <div class="metric"><%= @conversations_count %></div>
-    <div>Conversations</div>
-  </div>
-</div>
-
-<div class="chart--container" style="height:500px">
-  <canvas id="dashboard-chart" width="500" height="250"></canvas>
-</div>
-<%= javascript_tag do -%>
-drawSuperAdminDashboard(<%= @data.to_json.html_safe -%>)
-<% end -%>
-
-</section>
+<%= render_vue_component('DashboardIndex', {
+  accountsCount: @accounts_count,
+  usersCount: @users_count,
+  inboxesCount: @inboxes_count,
+  conversationsCount: @conversations_count,
+  chartData: @data
+}) %>