feat(ui): complete rebuild and modernization of the admin UI

[orielhaim]

Summary

Complete modernization of the Admin UI frontend (ui/). The existing stack has not been meaningfully updated since April 2023 and relies on dependencies that are deprecated or end-of-life. This PR rebuilds the frontend with a current, actively-maintained toolchain while preserving all existing functionality.

Motivation

The current UI depends on Vue 2 (EOL since Dec 31 2023), Webpack 4 via the deprecated @vue/cli-service, Vuetify 2, and several unmaintained packages (node-sass, babel-eslint, webpack-remove-debug). These create security exposure, prevent contributors from using modern APIs, and make the project increasingly difficult to maintain.

Migration details

Category	Before	After
Framework	Vue 2.6	Vue 3.5
UI library	Vuetify 2.4	Vuetify 4.0
Build tool	Webpack 4 (@vue/cli-service 4.5)	Vite 8
CSS	-	TailwindCSS 4.2
State management	Vuex 3	Pinia 3
Router	vue-router 3	vue-router 4
i18n	vue-i18n 8	vue-i18n 11
Charts	chart.js 3 + vue-chartjs 4	chart.js 4 + vue-chartjs 5
Linting & formatting	ESLint 6 + Prettier + babel-eslint	Biome 2.4
Package manager	npm	pnpm
Sass	node-sass (deprecated) + sass-loader	Dart Sass (built-in Vite support)
Icons	bundled via vuetify-loader	@mdi/font 7

Removed packages (no longer needed)

@vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex, @vue/cli-service, @vue/eslint-config-prettier, babel-eslint, core-js, eslint, eslint-plugin-prettier, eslint-plugin-vue, node-sass, prettier (ui), sass-loader, vue-cli-plugin-i18n, vue-cli-plugin-vuetify, vue-template-compiler, vuetify-loader, webpack-remove-debug

Added packages

@biomejs/biome, @vitejs/plugin-vue, @tailwindcss/vite, tailwindcss, vite, vite-plugin-vuetify, pinia, @mdi/font

UI refresh

Modernized the overall dashboard appearance for a cleaner, more contemporary look and feel, leveraging Vuetify 4's updated design language alongside TailwindCSS utility classes.

How to test

cd ui
pnpm install
pnpm dev

Breaking changes

• Package manager: the ui/ project now uses pnpm. Run pnpm install instead of npm install.
• Node.js: Vite 8 requires Node.js 20+.
• Build output: generated by Vite instead of Webpack - file hashing and chunk structure in ui/dist/ will differ, but the deployment method (static file hosting) remains the same.

Related issues

• Closes [Question] Why not Vue 3? #17

[vercel]

@orielhaim is attempting to deploy a commit to the SocketIO Team on Vercel.

A member of the Team first needs to authorize it.

[darrachequesne]

Hi! Thanks a lot for your work on this 👍

I'm not sure about all the changes (introduction of biome, tailwindcss and pnpm), but I'll do my best to review it as soon as possible.

[orielhaim]

Basically this is just my feeling about how the modern stack should look. I highly recommend considering it. Anyway let me know if there are things to improve or change. I would be happy to continue contributing to the project

[darrachequesne]

Unfortunately, it seems that much of the modernization code was AI-generated and is quite difficult for a human to read, which will complicate any future maintenance. Do you think it could be split in multiple PR?

[orielhaim]

Yeah I gave it a few hours I didn't know if it was worth working hard for and if you were even alive😂
Basically I plan to improve it and send more pull requests soon. I already have plans for some new features and improvements and of course I will write the code in a much nicer way later

[darrachequesne]

Hi! I went ahead and merged the upgrade part: 3dae74e

I think the modernization part could be applied as a custom CSS layer (https://vuetifyjs.com/en/styles/layers/#utilities-group), what do you think?

[orielhaim]

Yes it's definitely possible. I started with a version like this but then I switched to tailwind to make it less messy
Btw why did you use vite 7 and not 8?

[darrachequesne]

There were conflicts with vite@8:

npm warn ERESOLVE overriding peer dependency
npm warn While resolving: vite-plugin-inspect@11.3.3
npm warn Found: vite@8.0.2
npm warn node_modules/vite
npm warn   dev vite@"^8.0.1" from the root project
npm warn   5 more (vite-plugin-vue-devtools, vite-plugin-vue-inspector, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer vite@"^6.0.0 || ^7.0.0-0" from vite-plugin-inspect@11.3.3
npm warn node_modules/vite-plugin-vue-devtools/node_modules/vite-plugin-inspect
npm warn   vite-plugin-inspect@"^11.3.3" from vite-plugin-vue-devtools@8.1.1
npm warn   node_modules/vite-plugin-vue-devtools
npm warn
npm warn Conflicting peer dependency: vite@7.3.1
npm warn node_modules/vite
npm warn   peer vite@"^6.0.0 || ^7.0.0-0" from vite-plugin-inspect@11.3.3
npm warn   node_modules/vite-plugin-vue-devtools/node_modules/vite-plugin-inspect
npm warn     vite-plugin-inspect@"^11.3.3" from vite-plugin-vue-devtools@8.1.1
npm warn     node_modules/vite-plugin-vue-devtools

[orielhaim]

We can upgrade to vite-plugin-inspect v12 to resolve this