PUSH

-> Bump tailwind to v4

.cursorrules

@@ -116,7 +116,7 @@ const VueDevelopmentConventions = {
 // - Consistently use Tailwind’s configuration for theme colors, spacing, and typography.
 // - Use `dark:` variants and CSS variables to ensure theming and accessibility.
 // - Avoid excessive custom CSS; rely on Tailwind’s utility classes for most styling needs.
-
+// - YOU SHOULD BASED ON TAILWIND V4: and always read [upgrade docs](https://tailwindcss.com/docs/upgrade-guide)
 
 // =========================================
 // 3. PERFORMANCE & OPTIMIZATION

frontend/package.json

@@ -13,6 +13,7 @@
 		"format": "prettier --write src/"
 	},
 	"dependencies": {
+		"@tailwindcss/vite": "^4.0.6",
 		"@tanstack/vue-table": "^8.20.5",
 		"@types/html2canvas": "^1.0.0",
 		"@types/js-cookie": "^3.0.6",
@@ -44,14 +45,12 @@
 		"@vue/eslint-config-prettier": "^10.1.0",
 		"@vue/eslint-config-typescript": "^14.1.3",
 		"@vue/tsconfig": "^0.5.1",
-		"autoprefixer": "^10.4.20",
 		"eslint": "^9.14.0",
 		"eslint-plugin-vue": "^9.30.0",
 		"npm-run-all2": "^7.0.1",
-		"postcss": "^8.4.49",
 		"prettier": "^3.3.3",
 		"rollup-plugin-visualizer": "^5.12.0",
-		"tailwindcss": "^3.4.15",
+		"tailwindcss": "^4.0.0",
 		"typescript": "~5.6.3",
 		"vite": "^5.4.12",
 		"vite-plugin-vue-devtools": "^7.5.4",

frontend/src/assets/main.css

@@ -1,9 +1,25 @@
 /* ./src/index.css */
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
 
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap') layer(utilities);
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentColor);
+    }
+}
 
 @layer base {
     html {

frontend/src/components/admin/LayoutDashboard.vue

@@ -4,7 +4,7 @@
         <!-- Mobile Menu Button -->
         <button
             @click="isSidebarOpen = !isSidebarOpen"
-            class="lg:hidden fixed top-4 left-4 z-50 p-2 bg-gray-800/50 rounded-full backdrop-blur-sm"
+            class="lg:hidden fixed top-4 left-4 z-50 p-2 bg-gray-800/50 rounded-full backdrop-blur-xs"
         >
             <Menu v-if="!isSidebarOpen" class="w-6 h-6 text-pink-400" />
             <X v-else class="w-6 h-6 text-pink-400" />
@@ -19,9 +19,7 @@
             ]"
         >
             <div class="p-6">
-                <h1
-                    class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent"
-                >
+                <h1 class="text-2xl font-bold bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent">
                     <span class="block text-lg">{{ Settings.getSetting('debug_name') }}</span>
                     <span class="block text-sm text-gray-400">{{ Settings.getSetting('debug_version') }}</span>
                 </h1>
@@ -99,7 +97,7 @@
                         v-model="searchQuery"
                         type="search"
                         placeholder="Search..."
-                        class="w-full bg-gray-700/50 text-gray-100 placeholder-gray-400 rounded-full py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-pink-500"
+                        class="w-full bg-gray-700/50 text-gray-100 placeholder-gray-400 rounded-full py-2 pl-10 pr-4 focus:outline-hidden focus:ring-2 focus:ring-pink-500"
                         @focus="isSearchFocused = true"
                         @blur="handleSearchBlur"
                     />
@@ -125,7 +123,7 @@
                 <div class="relative ml-4">
                     <button
                         @click="isProfileOpen = !isProfileOpen"
-                        class="flex items-center space-x-2 focus:outline-none"
+                        class="flex items-center space-x-2 focus:outline-hidden"
                     >
                         <img :src="Session.getInfo('avatar')" alt="User Avatar" class="w-8 h-8 rounded-full" />
                         <ChevronDown class="w-4 h-4 text-gray-400" :class="{ 'rotate-180': isProfileOpen }" />
@@ -147,7 +145,7 @@
             </header>
 
             <!-- Main Content -->
-            <main class="flex-grow p-6 overflow-y-auto">
+            <main class="grow p-6 overflow-y-auto">
                 <div class="p-3">
                     <slot></slot>
                 </div>

frontend/src/components/client/Auth/FormCard.vue

@@ -12,7 +12,7 @@ defineProps({
 defineEmits(['submit']);
 </script>
 <template>
-    <div class="w-full max-w-md bg-[#12121f]/90 backdrop-blur-sm rounded-lg shadow-xl p-8">
+    <div class="w-full max-w-md bg-[#12121f]/90 backdrop-blur-xs rounded-lg shadow-xl p-8">
         <!-- Logo and Title -->
         <div class="flex items-center gap-3 mb-6">
             <img :src="Settings.getSetting('app_logo')" alt="Logo" class="w-8 h-8" />

frontend/src/components/client/Auth/FormInput.vue

@@ -9,7 +9,7 @@
                 :type="showPassword ? 'text' : type"
                 :value="modelValue"
                 @input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value || '')"
-                class="w-full px-4 py-2 bg-[#1a1a2e] border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
+                class="w-full px-4 py-2 bg-[#1a1a2e] border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-hidden focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
                 :placeholder="placeholder"
                 :required="required"
                 :maxlength="maxChar"

frontend/src/components/client/Dashboard/Account/Activities.vue

@@ -70,7 +70,7 @@ const columnsActivities = [
             <p class="mt-2">Loading activities...</p>
         </div>
 
-        <div v-else-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded" role="alert">
+        <div v-else-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-sm" role="alert">
             <p>{{ error }}</p>
         </div>
 

frontend/src/components/client/Dashboard/Account/Billing.vue

@@ -194,14 +194,14 @@ const resetFields = async () => {
             <button
                 @click="saveChanges"
                 type="button"
-                class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded text-sm font-medium transition-colors"
+                class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-sm text-sm font-medium transition-colors"
             >
                 {{ t('account.pages.billing.page.form.update_button.label') }}
             </button>
             <button
                 @click="resetFields"
                 type="button"
-                class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded text-sm font-medium transition-colors"
+                class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-sm text-sm font-medium transition-colors"
             >
                 {{ t('account.pages.billing.page.form.update_button.reset') }}
             </button>

frontend/src/components/client/Dashboard/Account/Layout.vue

@@ -20,7 +20,7 @@ import Session from '@/mythicalclient/Session';
 <template>
     <!-- User Info -->
     <div class="flex flex-col sm:flex-row items-start gap-4 mb-8 p-4 bg-gray-800/20 rounded-lg">
-        <img :src="Session.getInfo('avatar')" alt="" class="w-16 h-16 rounded bg-gray-800" />
+        <img :src="Session.getInfo('avatar')" alt="" class="w-16 h-16 rounded-sm bg-gray-800" />
         <div class="flex-1 min-w-0">
             <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                 <div class="space-y-1">

frontend/src/components/client/Dashboard/Account/Mails.vue

@@ -66,7 +66,7 @@ const columnsEmails = [
             h(
                 'button',
                 {
-                    class: 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600',
+                    class: 'px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600',
                     target: '_blank',
                     rel: 'noopener noreferrer',
                     onClick: () => (window.location.href = `/api/user/session/emails/${row.original.id}/raw`),
@@ -85,7 +85,7 @@ const columnsEmails = [
             <p class="mt-2">Loading emails...</p>
         </div>
 
-        <div v-else-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded" role="alert">
+        <div v-else-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-sm" role="alert">
             <p>{{ error }}</p>
         </div>
 

frontend/src/components/client/Dashboard/Account/Security.vue

@@ -53,7 +53,7 @@ const disable2FA = () => {
     >
         <router-link
             to="/auth/forgot-password"
-            class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded text-sm font-medium transition-colors"
+            class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-sm text-sm font-medium transition-colors"
         >
             {{ t('account.pages.security.page.cards.password.change_button.label') }}
         </router-link>

frontend/src/components/client/Dashboard/Main/Announcements.vue

@@ -160,7 +160,7 @@ onUnmounted(() => {
                 <div
                     v-for="announcement in announcements"
                     :key="announcement.id"
-                    class="flex-none w-[400px] snap-start group/card bg-gray-900/50 backdrop-blur-sm border border-gray-700/50 rounded-xl overflow-hidden transition-all duration-300 hover:border-[#a855f7]/50"
+                    class="flex-none w-[400px] snap-start group/card bg-gray-900/50 backdrop-blur-xs border border-gray-700/50 rounded-xl overflow-hidden transition-all duration-300 hover:border-[#a855f7]/50"
                 >
                     <!-- Image container -->
                     <div class="aspect-video relative overflow-hidden">
@@ -202,7 +202,7 @@ onUnmounted(() => {
 
                         <button
                             @click="openAnnouncement(announcement)"
-                            class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-center text-sm"
+                            class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded-sm transition-colors text-center text-sm"
                         >
                             {{ t('Components.Announcements.Card.ReadMore') }}
                         </button>
@@ -230,7 +230,7 @@ onUnmounted(() => {
     <Teleport to="body">
         <div v-if="isModalOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4" @click="closeModal">
             <div
-                class="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
+                class="fixed inset-0 bg-black/70 backdrop-blur-xs transition-opacity"
                 :class="{ 'opacity-0': !isModalMounted, 'opacity-100': isModalMounted }"
             ></div>
 
@@ -259,7 +259,7 @@ onUnmounted(() => {
                                     :key="index"
                                     :src="image"
                                     :alt="`${selectedAnnouncement.title} - Image ${index + 1}`"
-                                    class="w-full h-full object-cover flex-shrink-0"
+                                    class="w-full h-full object-cover shrink-0"
                                 />
                             </div>
 

frontend/src/components/client/Dashboard/Main/BillingInfo.vue

@@ -20,7 +20,7 @@ const { t } = useI18n();
         </div>
         <RouterLink
             to="/addfunds"
-            class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-center text-sm"
+            class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded-sm transition-colors text-center text-sm"
         >
             {{ t('components.dashboard.billing.add_funds') }}
         </RouterLink>

frontend/src/components/client/Dashboard/Main/ProductList.vue

@@ -17,11 +17,11 @@
                     <div class="text-sm text-purple-500">{{ server.hostname }}</div>
                 </div>
                 <div class="flex items-center gap-3">
-                    <span class="px-2 py-1 bg-emerald-500/20 text-emerald-400 rounded text-xs font-medium">
+                    <span class="px-2 py-1 bg-emerald-500/20 text-emerald-400 rounded-sm text-xs font-medium">
                         Active
                     </span>
                     <button
-                        class="px-3 py-1 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-sm"
+                        class="px-3 py-1 bg-purple-600 hover:bg-purple-500 text-white rounded-sm transition-colors text-sm"
                     >
                         Manage
                     </button>

frontend/src/components/client/Dashboard/Main/TicketList.vue

@@ -57,7 +57,7 @@ onMounted(fetchRecentTickets);
                 </div>
                 <span
                     :class="[
-                        'px-2 py-1 rounded text-xs font-medium',
+                        'px-2 py-1 rounded-sm text-xs font-medium',
                         ticket.status === t('Components.Tickets.status.Open')
                             ? 'bg-green-500/20 text-green-400'
                             : ticket.status === t('Components.Tickets.status.Closed')
@@ -77,7 +77,7 @@ onMounted(fetchRecentTickets);
         </div>
         <RouterLink
             to="/ticket"
-            class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-center text-sm"
+            class="mt-4 block w-full px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded-sm transition-colors text-center text-sm"
         >
             {{ t('Components.Tickets.viewMore') }}
         </RouterLink>

frontend/src/components/client/Dashboard/Main/UserInfo.vue

@@ -24,13 +24,13 @@ import { BookMarkedIcon as MarketIcon } from 'lucide-vue-next';
             <div class="flex gap-2 w-full">
                 <RouterLink
                     to="/account"
-                    class="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded transition-colors text-sm"
+                    class="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded-sm transition-colors text-sm"
                 >
                     {{ $t('components.profile.update') }}
                 </RouterLink>
                 <a
                     href="/auth/logout"
-                    class="flex-1 px-4 py-2 bg-purple-800 hover:bg-purple-700 text-white rounded transition-colors text-sm"
+                    class="flex-1 px-4 py-2 bg-purple-800 hover:bg-purple-700 text-white rounded-sm transition-colors text-sm"
                 >
                     {{ $t('components.profile.logout') }}
                 </a>

frontend/src/components/client/Errors/ErrorPage.vue

@@ -30,7 +30,7 @@ const goHome = () => {
 </script>
 <template>
     <Layout>
-        <div class="w-full max-w-md bg-[#12121f]/90 backdrop-blur-sm rounded-lg shadow-xl p-8 text-center">
+        <div class="w-full max-w-md bg-[#12121f]/90 backdrop-blur-xs rounded-lg shadow-xl p-8 text-center">
             <div class="mb-6">
                 <component :is="icon" class="w-20 h-20 mx-auto text-purple-500" />
             </div>

frontend/src/components/client/Layout.vue

@@ -20,7 +20,7 @@ onMounted(async () => {
 <template>
     <div class="min-h-screen bg-[#0a0a1f] relative overflow-hidden">
         <!-- Background elements -->
-        <div class="absolute inset-0 bg-gradient-to-b from-[#0a0a1f] via-[#1a0b2e] to-[#0a0a1f]">
+        <div class="absolute inset-0 bg-linear-to-b from-[#0a0a1f] via-[#1a0b2e] to-[#0a0a1f]">
             <div class="stars"></div>
             <div class="mountains"></div>
         </div>

frontend/src/components/client/LayoutDashboard.vue

@@ -166,7 +166,7 @@ onMounted(async () => {
 <template>
     <div class="min-h-screen bg-[#0a0a1f] relative overflow-hidden">
         <!-- Background elements -->
-        <div class="absolute inset-0 bg-gradient-to-b from-[#0a0a1f] via-[#1a0b2e] to-[#0a0a1f]">
+        <div class="absolute inset-0 bg-linear-to-b from-[#0a0a1f] via-[#1a0b2e] to-[#0a0a1f]">
             <div class="stars"></div>
             <div class="mountains"></div>
         </div>
@@ -179,7 +179,7 @@ onMounted(async () => {
                 <!-- Backdrop for mobile sidebar -->
                 <div
                     v-if="isSidebarOpen"
-                    class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 lg:hidden"
+                    class="fixed inset-0 bg-black/50 backdrop-blur-xs z-40 lg:hidden"
                     @click="closeSidebar"
                 ></div>
 
@@ -189,7 +189,7 @@ onMounted(async () => {
                     @toggle-search="toggleSearch"
                     @toggle-notifications="toggleNotifications"
                     @toggle-profile="toggleProfile"
-                    class="bg-[#0a0a1f]/80 backdrop-blur-sm border-b border-purple-900/50"
+                    class="bg-[#0a0a1f]/80 backdrop-blur-xs border-b border-purple-900/50"
                 />
 
                 <!-- Sidebar with updated styling -->

frontend/src/components/client/layout/NotificationsDropdown.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         v-if="isOpen"
-        class="absolute top-16 right-4 w-80 bg-gray-900/95 backdrop-blur-sm border border-gray-700/50 rounded-lg shadow-xl z-50 dropdown"
+        class="absolute top-16 right-4 w-80 bg-gray-900/95 backdrop-blur-xs border border-gray-700/50 rounded-lg shadow-xl z-50 dropdown"
     >
         <div class="p-4">
             <h3 class="font-semibold mb-4 text-purple-400">{{ t('components.notifications.title') }}</h3>
@@ -11,7 +11,7 @@
                     :key="notification.id"
                     class="flex items-start gap-3 p-2 hover:bg-gray-800/50 rounded-lg transition-colors"
                 >
-                    <div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center flex-shrink-0">
+                    <div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0">
                         <component :is="notification.icon" class="h-4 w-4 text-purple-400" />
                     </div>
                     <div>

frontend/src/components/client/layout/ProfileDropdown.vue

@@ -2,15 +2,15 @@
     <Transition name="dropdown">
         <div
             v-if="isOpen"
-            class="absolute top-16 right-4 w-80 bg-gray-900/95 backdrop-blur-sm border border-gray-700/50 rounded-xl shadow-2xl z-50"
+            class="absolute top-16 right-4 w-80 bg-gray-900/95 backdrop-blur-xs border border-gray-700/50 rounded-xl shadow-2xl z-50"
             @click.stop
         >
             <!-- User Profile Section -->
             <div class="p-5 border-b border-gray-700/50">
                 <div class="flex items-center gap-4">
                     <div class="relative">
                         <div
-                            class="h-12 w-12 rounded-full bg-gradient-to-tr from-purple-500/20 to-blue-500/20 flex items-center justify-center ring-2 ring-purple-500/20"
+                            class="h-12 w-12 rounded-full bg-linear-to-tr from-purple-500/20 to-blue-500/20 flex items-center justify-center ring-2 ring-purple-500/20"
                         >
                             <img :src="userInfo.avatar" alt="User Avatar" class="h-full w-full rounded-full" />
                         </div>

frontend/src/components/client/layout/SearchModal.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         v-if="isSearchOpen"
-        class="fixed inset-0 bg-gray-900/95 backdrop-blur-sm z-50"
+        class="fixed inset-0 bg-gray-900/95 backdrop-blur-xs z-50"
         @click="$emit('close')"
         @keydown.ctrl.k.prevent="$emit('close')"
         @keydown.ctrl.d.prevent="toggleDashboard"
@@ -13,7 +13,7 @@
                     type="text"
                     :placeholder="$t('components.search.placeholder')"
                     v-model="searchQuery"
-                    class="w-full bg-gray-800/50 border border-gray-700/50 rounded-lg pl-11 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 text-gray-100"
+                    class="w-full bg-gray-800/50 border border-gray-700/50 rounded-lg pl-11 pr-4 py-3 focus:outline-hidden focus:ring-2 focus:ring-purple-500/50 text-gray-100"
                     @keydown.esc="$emit('close')"
                     @input="performSearch"
                     @keydown.enter="handleEnter"