Stage v2.0.0

.env

@@ -1,2 +1,2 @@
 VITE_API_URL="/"
-VITE_APP_VERSION=v1.5.0
+VITE_APP_VERSION=v2.0.0

eslint.config.js

@@ -41,5 +41,12 @@ export default [
         }
       ]
     }
+  },
+  {
+    name: 'custom/vue-rules',
+    files: ['src/pages/**/*.vue'],
+    rules: {
+      'vue/multi-word-component-names': 'off'
+    }
   }
 ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "berry-free-vuetify-vuejs-admin-template",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "private": true,
   "author": "CodedThemes",
   "type": "module",
@@ -15,43 +15,41 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@tsconfig/node24": "^24.0.3",
-    "@typescript-eslint/parser": "8.47.0",
-    "apexcharts": "5.3.6",
-    "axios": "1.13.2",
+    "@tsconfig/node24": "24.0.4",
+    "@typescript-eslint/parser": "8.56.1",
+    "apexcharts": "5.8.1",
+    "axios": "1.13.6",
     "axios-mock-adapter": "2.1.0",
     "chance": "1.1.13",
     "date-fns": "4.1.0",
-    "lodash": "4.17.21",
+    "lodash": "4.17.23",
     "pinia": "3.0.4",
     "vee-validate": "4.15.1",
-    "vite-plugin-vuetify": "2.1.2",
-    "vue": "3.5.24",
-    "vue-eslint-parser": "^10.2.0",
-    "vue-router": "4.6.3",
+    "vite-plugin-vuetify": "2.1.3",
+    "vue": "3.5.29",
+    "vue-eslint-parser": "10.4.0",
+    "vue-router": "5.0.3",
     "vue-tabler-icons": "2.21.0",
     "vue3-apexcharts": "1.10.0",
     "vue3-perfect-scrollbar": "2.0.0",
-    "vuetify": "3.10.11",
-    "webpack-plugin-vuetify": "3.1.2"
+    "vuetify": "4.0.2"
   },
   "devDependencies": {
-    "@eslint/js": "9.39.1",
+    "@eslint/js": "10.0.1",
     "@types/chance": "1.1.7",
-    "@types/node": "24.10.1",
-    "@vitejs/plugin-vue": "6.0.2",
+    "@types/node": "25.3.3",
+    "@vitejs/plugin-vue": "6.0.4",
     "@vue/eslint-config-prettier": "10.2.0",
-    "@vue/tsconfig": "0.8.1",
-    "eslint": "9.39.1",
-    "eslint-plugin-vue": "10.5.1",
-    "globals": "16.5.0",
-    "prettier": "3.6.2",
-    "sass": "1.94.1",
-    "sass-loader": "16.0.6",
+    "@vue/tsconfig": "0.9.0",
+    "eslint": "10.0.2",
+    "eslint-plugin-vue": "10.8.0",
+    "globals": "17.4.0",
+    "prettier": "3.8.1",
+    "sass": "1.97.3",
+    "sass-loader": "16.0.7",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.47.0",
-    "vite": "7.2.2",
-    "vue-cli-plugin-vuetify": "2.5.8",
-    "vue-tsc": "3.1.4"
+    "typescript-eslint": "8.56.1",
+    "vite": "7.3.1",
+    "vue-tsc": "3.2.5"
   }
-}
+}

src/views/authentication/authForms/AuthLogin.vue → src/components/authentication/authForms/AuthLogin.vue

@@ -1,26 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import Google from '@/assets/images/auth/social-google.svg';
-import { useAuthStore } from '@/stores/auth';
-import { Form } from 'vee-validate';
 
 const checkbox = ref(false);
-const valid = ref(false);
 const show1 = ref(false);
-//const logform = ref();
-const password = ref('admin123');
-const username = ref('info@codedthemes.com');
 const passwordRules = ref([
   (v: string) => !!v || 'Password is required',
   (v: string) => (v && v.length <= 10) || 'Password must be less than 10 characters'
 ]);
 const emailRules = ref([(v: string) => !!v || 'E-mail is required', (v: string) => /.+@.+\..+/.test(v) || 'E-mail must be valid']);
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-function validate(values: any, { setErrors }: any) {
-  const authStore = useAuthStore();
-  return authStore.login(username.value, password.value).catch((error) => setErrors({ apiError: error }));
-}
 </script>
 
 <template>
@@ -35,32 +23,17 @@ function validate(values: any, { setErrors }: any) {
       <v-divider class="custom-devider" />
     </v-col>
   </v-row>
-  <h5 class="text-h5 text-center my-4 mb-8">Sign in with Email address</h5>
-  <Form @submit="validate" class="mt-7 loginForm" v-slot="{ errors, isSubmitting }">
+  <h5 class="text-center my-4 mb-8">Sign in with Email address</h5>
+  <form @submit.prevent class="mt-7 loginForm">
+    <v-text-field :rules="emailRules" label="Email Address / Username" class="mt-4 mb-8" required hide-details="auto"></v-text-field>
     <v-text-field
-      v-model="username"
-      :rules="emailRules"
-      label="Email Address / Username"
-      class="mt-4 mb-8"
-      required
-      density="comfortable"
-      hide-details="auto"
-      variant="outlined"
-      color="primary"
-    ></v-text-field>
-    <v-text-field
-      v-model="password"
       :rules="passwordRules"
       label="Password"
       required
-      density="comfortable"
-      variant="outlined"
-      color="primary"
       hide-details="auto"
-      :append-icon="show1 ? '$eye' : '$eyeOff'"
+      :append-inner-icon="show1 ? '$eye' : '$eyeOff'"
       :type="show1 ? 'text' : 'password'"
       @click:append="show1 = !show1"
-      class="pwdInput"
     ></v-text-field>
 
     <div class="d-sm-flex align-center mt-2 mb-7 mb-sm-0">
@@ -77,13 +50,8 @@ function validate(values: any, { setErrors }: any) {
         <a href="javascript:void(0)" class="text-primary text-decoration-none">Forgot password?</a>
       </div>
     </div>
-    <v-btn color="secondary" :loading="isSubmitting" block class="mt-2" variant="flat" size="large" :disabled="valid" type="submit">
-      Sign In</v-btn
-    >
-    <div v-if="errors.apiError" class="mt-2">
-      <v-alert color="error">{{ errors.apiError }}</v-alert>
-    </div>
-  </Form>
+    <v-btn color="secondary" block class="mt-2" variant="flat" size="large" :disabled="false" type="submit"> Sign In</v-btn>
+  </form>
   <div class="mt-5 text-right">
     <v-divider />
     <v-btn variant="plain" to="/register" class="mt-2 text-capitalize mr-n2">Don't Have an account?</v-btn>
@@ -106,15 +74,6 @@ function validate(values: any, { setErrors }: any) {
   border-color: rgba(0, 0, 0, 0.08);
   margin: 20px 15px;
 }
-.pwdInput {
-  position: relative;
-  .v-input__append {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
 .loginForm {
   .v-text-field .v-field--active input {
     font-weight: 500;

src/views/authentication/authForms/AuthRegister.vue → src/components/authentication/authForms/AuthRegister.vue

@@ -31,28 +31,14 @@ function validate() {
       <v-divider class="custom-devider" />
     </v-col>
   </v-row>
-  <h5 class="text-h5 text-center my-4 mb-8">Sign up with Email address</h5>
+  <h5 class="text-center my-4 mb-8">Sign up with Email address</h5>
   <v-form ref="Regform" lazy-validation action="/dashboards/analytical" class="mt-7 loginForm">
     <v-row>
       <v-col cols="12" sm="6">
-        <v-text-field
-          v-model="firstname"
-          density="comfortable"
-          hide-details="auto"
-          variant="outlined"
-          color="primary"
-          label="Firstname"
-        ></v-text-field>
+        <v-text-field v-model="firstname" hide-details="auto" label="Firstname"></v-text-field>
       </v-col>
       <v-col cols="12" sm="6">
-        <v-text-field
-          v-model="lastname"
-          density="comfortable"
-          hide-details="auto"
-          variant="outlined"
-          color="primary"
-          label="Lastname"
-        ></v-text-field>
+        <v-text-field v-model="lastname" hide-details="auto" label="Lastname"></v-text-field>
       </v-col>
     </v-row>
     <v-text-field
@@ -61,24 +47,17 @@ function validate() {
       label="Email Address / Username"
       class="mt-4 mb-4"
       required
-      density="comfortable"
       hide-details="auto"
-      variant="outlined"
-      color="primary"
     ></v-text-field>
     <v-text-field
       v-model="password"
       :rules="passwordRules"
       label="Password"
       required
-      density="comfortable"
-      variant="outlined"
-      color="primary"
       hide-details="auto"
-      :append-icon="show1 ? '$eye' : '$eyeOff'"
+      :append-inner-icon="show1 ? '$eye' : '$eyeOff'"
       :type="show1 ? 'text' : 'password'"
       @click:append="show1 = !show1"
-      class="pwdInput"
     ></v-text-field>
 
     <div class="d-sm-inline-flex align-center mt-2 mb-7 mb-sm-0 font-weight-bold">
@@ -117,13 +96,4 @@ function validate() {
   border-color: rgba(0, 0, 0, 0.08);
   margin: 20px 15px;
 }
-.pwdInput {
-  position: relative;
-  .v-input__append {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
 </style>

src/views/dashboards/default/components/PopularStocks.vue → src/components/dashboard/default/PopularStocks.vue

@@ -87,7 +87,7 @@ const revenues = ref([
     <v-card variant="outlined">
       <v-card-text>
         <div class="d-flex align-center">
-          <h4 class="text-h4 mt-1">Popular Stocks</h4>
+          <h4 class="mt-1">Popular Stocks</h4>
           <div class="ml-auto">
             <v-menu transition="slide-y-transition">
               <template v-slot:activator="{ props }">
@@ -112,20 +112,20 @@ const revenues = ref([
           </div>
         </div>
 
-        <v-card class="bg-lightsecondary mt-5">
+        <v-card elevation="0" class="bg-lightsecondary mt-5">
           <div class="pa-5">
             <div class="d-flex align-start justify-space-between">
               <div>
-                <h6 class="text-secondary text-h5">Bajaj Finery</h6>
-                <span class="text-subtitle-2 text-medium-emphasis font-weight-bold">10% Profit</span>
+                <h5 class="text-secondary">Bajaj Finery</h5>
+                <h6 class="text-medium-emphasis font-weight-bold">10% Profit</h6>
               </div>
-              <h4 class="text-h4">$1839.00</h4>
+              <h4>$1839.00</h4>
             </div>
           </div>
           <apexchart type="area" height="95" :options="chartOptions1" :series="lineChart1.series"> </apexchart>
         </v-card>
         <div class="mt-4">
-          <perfect-scrollbar v-bind:style="{ height: '270px' }">
+          <perfect-scrollbar v-bind:style="{ height: '270px' }" :options="{ suppressScrollX: true }">
             <v-list lines="two" class="py-0">
               <v-list-item v-for="(revenue, i) in revenues" :key="i" :value="revenue" color="secondary" rounded="sm">
                 <template v-slot:append>
@@ -142,14 +142,14 @@ const revenues = ref([
                 </template>
                 <div class="d-inline-flex align-center justify-space-between w-100">
                   <div>
-                    <h6 class="text-subtitle-1 text-medium-emphasis font-weight-bold">
+                    <h5 class="text-medium-emphasis font-weight-bold">
                       {{ revenue.name }}
-                    </h6>
-                    <span v-if="revenue.price > 145" class="text-success text-subtitle-2">{{ revenue.profit }}% Profit</span>
-                    <span v-else class="text-error text-subtitle-2">{{ revenue.profit }}% Profit</span>
+                    </h5>
+                    <span v-if="revenue.price > 145" class="text-success text-body-small">{{ revenue.profit }}% Profit</span>
+                    <span v-else class="text-error text-body-small">{{ revenue.profit }}% Profit</span>
                   </div>
 
-                  <div class="ml-auto text-subtitle-1 text-medium-emphasis font-weight-bold">${{ revenue.price }}</div>
+                  <h5 class="ml-auto text-medium-emphasis font-weight-bold">${{ revenue.price }}</h5>
                 </div>
               </v-list-item>
             </v-list>

src/views/dashboards/default/components/TotalEarning.vue → src/components/dashboard/default/TotalEarning.vue

@@ -37,10 +37,10 @@ const items = shallowRef([
           </v-menu>
         </div>
       </div>
-      <h2 class="text-h1 font-weight-medium">
+      <h1 class="font-weight-medium">
         $500.00 <a href="#"><CircleArrowUpRightIcon stroke-width="1.5" width="28" class="text-white" /> </a>
-      </h2>
-      <span class="text-subtitle-1 text-medium-emphasis text-white">Total Earning</span>
+      </h1>
+      <span class="text-body-large text-medium-emphasis text-white">Total Earning</span>
     </v-card-text>
   </v-card>
 </template>

src/views/dashboards/default/components/TotalGrowth.vue → src/components/dashboard/default/TotalGrowth.vue

@@ -103,8 +103,8 @@ const lineChart1 = {
       <v-card-text>
         <v-row>
           <v-col cols="12" sm="9">
-            <span class="text-subtitle-2 text-disabled font-weight-bold">Total Growth</span>
-            <h3 class="text-h3 mt-1">$2,324.00</h3>
+            <h6 class="text-disabled font-weight-bold">Total Growth</h6>
+            <h3 class="mt-1">$2,324.00</h3>
           </v-col>
           <v-col cols="12" sm="3">
             <v-select

src/views/dashboards/default/components/TotalIncome.vue → src/components/dashboard/default/TotalIncome.vue

@@ -8,8 +8,8 @@
           <TableIcon stroke-width="1.5" width="25" />
         </v-btn>
         <div>
-          <h4 class="text-h4 font-weight-medium">$203k</h4>
-          <span class="text-subtitle-2 text-medium-emphasis text-white">Total Income</span>
+          <h4 class="font-weight-medium">$203k</h4>
+          <span class="text-body-small text-medium-emphasis text-white">Total Income</span>
         </div>
       </div>
     </v-card-text>
@@ -22,8 +22,8 @@
           <BuildingStoreIcon stroke-width="1.5" width="25" class="text-warning" />
         </v-btn>
         <div>
-          <h4 class="text-h4 font-weight-medium">$203k</h4>
-          <span class="text-subtitle-2 text-disabled font-weight-medium">Total Income</span>
+          <h4 class="font-weight-medium">$203k</h4>
+          <span class="text-body-small text-disabled font-weight-medium">Total Income</span>
         </div>
       </div>
     </v-card-text>

src/views/dashboards/default/components/TotalOrder.vue → src/components/dashboard/default/TotalOrder.vue

@@ -138,13 +138,13 @@ const lineChart2 = {
         <v-tabs-window-item value="1">
           <v-row>
             <v-col cols="6">
-              <h2 class="text-h1 font-weight-medium">
+              <h1 class="font-weight-medium">
                 $108
                 <a href="#">
                   <CircleArrowDownLeftIcon stroke-width="1.5" width="28" class="text-white" />
                 </a>
-              </h2>
-              <span class="text-subtitle-1 text-medium-emphasis text-white">Total Order</span>
+              </h1>
+              <span class="text-body-large text-medium-emphasis text-white">Total Order</span>
             </v-col>
             <v-col cols="6">
               <apexchart type="line" height="90" :options="chartOptions1" :series="lineChart1.series"> </apexchart>
@@ -154,13 +154,13 @@ const lineChart2 = {
         <v-tabs-window-item value="2">
           <v-row>
             <v-col cols="6">
-              <h2 class="text-h1 font-weight-medium">
+              <h1 class="font-weight-medium">
                 $961
                 <a href="#">
                   <ArrowDownLeftCircleIcon stroke-width="1.5" width="28" class="text-white" />
                 </a>
-              </h2>
-              <span class="text-subtitle-1 text-medium-emphasis text-white">Total Order</span>
+              </h1>
+              <span class="text-body-large text-medium-emphasis text-white">Total Order</span>
             </v-col>
             <v-col cols="6">
               <apexchart type="line" height="90" :options="chartOptions2" :series="lineChart2.series"> </apexchart>