custom class remove, footer add, eslint any error solved and all pack…

package.json

@@ -1,6 +1,6 @@
 {
   "name": "berry-free-vuetify-vuejs-admin-template",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "private": true,
   "author": "CodedThemes",
   "scripts": {
@@ -13,45 +13,46 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@tiptap/starter-kit": "2.1.7",
-    "@tiptap/vue-3": "2.1.7",
-    "apexcharts": "3.42.0",
-    "axios": "^1.5.1",
+    "@tiptap/starter-kit": "2.2.2",
+    "@tiptap/vue-3": "2.2.2",
+    "@tsconfig/node20": "^20.1.2",
+    "apexcharts": "3.45.2",
+    "axios": "1.6.7",
     "axios-mock-adapter": "^1.22.0",
     "chance": "1.1.11",
-    "date-fns": "2.30.0",
+    "date-fns": "3.3.1",
     "lodash": "4.17.21",
-    "pinia": "2.1.6",
-    "remixicon": "3.5.0",
-    "vee-validate": "4.11.3",
-    "vite-plugin-vuetify": "1.0.2",
-    "vue": "3.3.4",
-    "vue-router": "4.2.4",
+    "pinia": "2.1.7",
+    "remixicon": "4.1.0",
+    "vee-validate": "4.12.5",
+    "vite-plugin-vuetify": "2.0.1",
+    "vue": "3.4.19",
+    "vue-router": "4.2.5",
     "vue-tabler-icons": "2.21.0",
-    "vue3-apexcharts": "1.4.4",
+    "vue3-apexcharts": "1.5.2",
     "vue3-perfect-scrollbar": "1.6.1",
     "vue3-print-nb": "0.1.4",
-    "vuetify": "3.3.14",
-    "yup": "1.2.0"
+    "vuetify": "3.5.4",
+    "webpack-plugin-vuetify": "^3.0.1",
+    "yup": "1.3.3"
   },
   "devDependencies": {
-    "@mdi/font": "7.2.96",
-    "@rushstack/eslint-patch": "1.3.3",
-    "@types/chance": "1.1.3",
-    "@types/node": "20.5.7",
-    "@vitejs/plugin-vue": "4.3.3",
-    "@vue/eslint-config-prettier": "8.0.0",
-    "@vue/eslint-config-typescript": "11.0.3",
-    "@vue/tsconfig": "0.4.0",
-    "eslint": "8.48.0",
-    "eslint-plugin-vue": "9.17.0",
-    "prettier": "3.0.2",
-    "sass": "1.66.1",
-    "sass-loader": "13.3.2",
-    "typescript": "5.1.6",
-    "vite": "4.4.9",
+    "@mdi/font": "7.4.47",
+    "@rushstack/eslint-patch": "1.7.2",
+    "@types/chance": "1.1.6",
+    "@types/node": "^20.11.18",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vue/eslint-config-prettier": "9.0.0",
+    "@vue/eslint-config-typescript": "12.0.0",
+    "@vue/tsconfig": "0.5.1",
+    "eslint": "8.56.0",
+    "eslint-plugin-vue": "9.21.1",
+    "prettier": "3.2.5",
+    "sass": "1.70.0",
+    "sass-loader": "14.1.0",
+    "typescript": "5.3.3",
+    "vite": "5.1.2",
     "vue-cli-plugin-vuetify": "2.5.8",
-    "vue-tsc": "1.8.8",
-    "vuetify-loader": "^2.0.0-alpha.9"
+    "vue-tsc": "1.8.27"
   }
 }

src/components/shared/BaseBreadcrumb.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { ChevronRightIcon } from 'vue-tabler-icons';
+
+type Breadcrumb = {
+  title: string;
+  disabled: boolean;
+  href: string;
+};
 const props = defineProps({
   title: String,
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  breadcrumbs: Array as any,
+  breadcrumbs: Array as () => Breadcrumb[],
   icon: String
 });
 </script>
@@ -12,7 +17,7 @@ const props = defineProps({
 <template>
   <v-row class="page-breadcrumb mb-1 mt-1">
     <v-col cols="12" md="12">
-      <v-card variant="outlined" elevation="0" class="px-4 py-3 withbg">
+      <v-card variant="flat" class="px-4 py-3">
         <v-row no-gutters class="align-center">
           <v-col md="5">
             <h3 class="text-h3">{{ props.title }}</h3>

src/components/shared/UiParentCard.vue

@@ -6,7 +6,7 @@ const props = defineProps({
 
 // ===============================|| Ui Parent Card||=============================== //
 <template>
-  <v-card variant="outlined" elevation="0" class="withbg">
+  <v-card variant="flat">
     <v-card-item>
       <div class="d-sm-flex align-center justify-space-between">
         <v-card-title>{{ props.title }}</v-card-title>

src/layouts/full/FullLayout.vue

@@ -3,6 +3,7 @@ import { RouterView } from 'vue-router';
 import VerticalSidebarVue from './vertical-sidebar/VerticalSidebar.vue';
 import VerticalHeaderVue from './vertical-header/VerticalHeader.vue';
 import Customizer from './customizer/CustomizerPanel.vue';
+import FooterPanel from './footer/FooterPanel.vue';
 import { useCustomizerStore } from '../../stores/customizer';
 const customizer = useCustomizerStore();
 </script>
@@ -33,6 +34,11 @@ const customizer = useCustomizerStore();
             </v-btn>
           </div>
         </v-container>
+        <v-container fluid class="pt-0">
+          <div>
+            <FooterPanel />
+          </div>
+        </v-container>
       </v-main>
     </v-app>
   </v-locale-provider>

src/layouts/full/footer/FooterPanel.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+
+const footerLink = shallowRef([
+  {
+    title: 'Home',
+    url: '/'
+  },
+  {
+    title: 'Documentation',
+    url: 'https://codedthemes.gitbook.io/berry-vuetify/'
+  },
+  {
+    title: 'Support',
+    url: 'https://codedthemes.support-hub.io/'
+  }
+]);
+</script>
+<template>
+  <v-footer class="px-0 footer mt-2">
+    <v-row justify="center" align="center" no-gutters>
+      <v-col cols="12" sm="6">
+        <p class="text-body-1 mb-0 text-sm-left text-center">
+          Berry ♥ crafted by Team
+          <a href="https://themeforest.net/user/codedthemes" class="text-darkText text-decoration-none" target="_blank">Codedthemes</a>
+        </p>
+      </v-col>
+      <v-col class="text-sm-right text-center" cols="12" sm="6">
+        <a
+          v-for="(item, i) in footerLink"
+          :key="i"
+          class="mx-2 text-body-1 text-darkText text-decoration-none"
+          target="_blank"
+          :href="item.url"
+        >
+          {{ item.title }}
+        </a>
+      </v-col>
+    </v-row>
+  </v-footer>
+</template>
+
+<style lang="scss">
+.v-footer {
+  position: unset;
+}
+footer {
+  a {
+    &:hover {
+      color: rgb(var(--v-theme-primary)) !important;
+    }
+  }
+}
+</style>

src/layouts/full/vertical-sidebar/VerticalSidebar.vue

@@ -19,7 +19,7 @@ const sidebarMenu = shallowRef(sidebarItems);
     v-model="customizer.Sidebar_drawer"
     elevation="0"
     rail-width="75"
-    mobile-breakpoint="960"
+    mobile-breakpoint="lg"
     app
     class="leftSidebar"
     :rail="customizer.mini_sidebar"
@@ -52,7 +52,7 @@ const sidebarMenu = shallowRef(sidebarItems);
         <ExtraBox />
       </div>
       <div class="pa-4 text-center">
-        <v-chip color="inputBorder" size="small"> v1.0.0 </v-chip>
+        <v-chip color="inputBorder" size="small"> v1.3.0 </v-chip>
       </div>
     </perfect-scrollbar>
   </v-navigation-drawer>

src/scss/components/_VCard.scss

@@ -13,12 +13,6 @@
 .v-card {
   width: 100%;
   overflow: visible;
-  &.withbg {
-    background-color: rgb(var(--v-theme-background));
-  }
-  &.overflow-hidden {
-    overflow: hidden;
-  }
 }
 
 .v-card-item {

src/scss/components/_VTextField.scss

@@ -13,5 +13,6 @@
 .inputWithbg {
   .v-field--variant-outlined {
     background-color: rgba(0, 0, 0, 0.025);
+    border-radius: 12px !important;
   }
 }

src/scss/layout/_container.scss

@@ -61,17 +61,6 @@ $sizes: (
     transition: all 0.2s ease-in-out;
   }
 }
-.w-100 {
-  width: 100%;
-}
-
-.h-100vh {
-  height: 100vh;
-}
-
-.gap-3 {
-  gap: 16px;
-}
 
 .text-white {
   color: rgb(255, 255, 255) !important;

src/scss/layout/_topbar.scss

@@ -2,9 +2,6 @@
   height: 50px !important;
   margin: 0 20px 0 10px !important;
 }
-.SearchIcon {
-  margin-top: 2px;
-}
 
 .search-sheet {
   position: absolute;

src/scss/pages/_dashboards.scss

@@ -87,7 +87,3 @@
   }
 }
 
-.rounded-square {
-  width: 20px;
-  height: 20px;
-}

src/types/vue-apexcharts.d.ts

@@ -0,0 +1 @@
+declare module 'vue3-apexcharts';

src/utils/helpers/fake-backend.ts

@@ -1,11 +1,27 @@
 export { fakeBackend };
 
+interface User {
+  id: number;
+  username: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+}
+
+interface ResponseBody {
+  id: number;
+  username: string;
+  firstName: string;
+  lastName: string;
+  token: string;
+}
+
 function fakeBackend() {
-  const users = [{ id: 1, username: '[email protected]', password: 'admin123', firstName: 'Codedthemes', lastName: '.com' }];
+  const users: User[] = [{ id: 1, username: '[email protected]', password: 'admin123', firstName: 'Codedthemes', lastName: '.com' }];
   const realFetch = window.fetch;
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  window.fetch = function (url: any, opts: any) {
-    return new Promise((resolve: any, reject) => {
+
+  window.fetch = function (url: string, opts: { method: string; headers: { [key: string]: string }; body?: string }) {
+    return new Promise<Response>((resolve, reject) => {
       // wrap in timeout to simulate server api call
       setTimeout(handleRoute, 500);
 
@@ -24,13 +40,10 @@ function fakeBackend() {
       }
 
       // route functions
-
       function authenticate() {
         const { username, password } = body();
-        const user: any = users.find((x) => x.username === username && x.password === password);
-
+        const user = users.find((x) => x.username === username && x.password === password);
         if (!user) return error('Username or password is incorrect');
-
         return ok({
           id: user.id,
           username: user.username,
@@ -46,17 +59,16 @@ function fakeBackend() {
       }
 
       // helper functions
-
-      function ok(body: any) {
-        resolve({ ok: true, text: () => Promise.resolve(JSON.stringify(body)) });
+      function ok(body: User[] | ResponseBody): void {
+        resolve({ ok: true, text: () => Promise.resolve(JSON.stringify(body)) } as Response);
       }
 
       function unauthorized() {
-        resolve({ status: 401, text: () => Promise.resolve(JSON.stringify({ message: 'Unauthorized' })) });
+        resolve({ status: 401, text: () => Promise.resolve(JSON.stringify({ message: 'Unauthorized' })) } as Response);
       }
 
       function error(message: string) {
-        resolve({ status: 400, text: () => Promise.resolve(JSON.stringify({ message })) });
+        resolve({ status: 400, text: () => Promise.resolve(JSON.stringify({ message })) } as Response);
       }
 
       function isAuthenticated() {
@@ -67,5 +79,5 @@ function fakeBackend() {
         return opts.body && JSON.parse(opts.body);
       }
     });
-  };
+  } as typeof window.fetch; // Type assertion here
 }