Refactor code and add Vuetify plugin and components

[martedesco]

This pull request primarily focuses on the migration of the Vue.js application to Vuetify, a Material Design component framework. The changes involve the introduction of several new dependencies, modifications to the application's main structure, and the refactoring of existing components to use Vuetify's components and styles.

Dependency changes:

• package.json: Added new dependencies such as @mdi/font, roboto-fontface, vuetify, webfontloader, @types/webfontloader, vue-cli-plugin-vuetify, and webpack-plugin-vuetify. Upgraded TypeScript from version ~4.5.5 to ^5.4.5. [1] [2]

UI component modifications:

• src/App.vue: Replaced AppHeader and MetricsViewer with a v-app containing a MainComponent.
• src/components/MainComponent.vue: Created a new MainComponent that includes a v-card with a toolbar and window for displaying different metrics.
• src/components/MetricsViewer.vue: Refactored the MetricsViewer component to use Vuetify components such as v-card, v-card-item, and v-main. Also adjusted the chartOptions in the defineComponent export. [1] [2] [3]

Configuration and setup:

• public/index.html: Changed the language attribute in the html tag from an empty string to "en".
• src/main.ts: Added usage of Vuetify and a call to loadFonts before mounting the app.
• src/plugins/vuetify.js and src/plugins/vuetify.ts: Set up Vuetify with Material Design Icons. [1] [2]
• src/plugins/webfontloader.ts: Implemented a function to load the Roboto font using the webfontloader package.
• vue.config.js: Added Vuetify to the plugin options in the Vue configuration.