tookit · tookit · May 22, 2025 · May 22, 2025 · May 22, 2025 · Jun 17, 2025
diff --git a/.gitignore b/.gitignore
@@ -49,3 +49,4 @@ Thumbs.db
 *.wmv
 
 .vercel
+.qodo
diff --git a/index.html b/index.html
@@ -1,35 +1,35 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
-    />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" />
     <title>Materiv - Vue3 Typescript based Admin Dashboard Template</title>
-    <meta name="description" content="Vue Material Admin Template is a 
-    Google Material Design  inspired admin dashboard template built with Vue and Vuetify.">
-    <meta name="keywords"
-    content="admin, dashboard, webapp, template, responsive, material, bootstrap, crm, uikit, framework, backend, app, widgets, premium, file manamger, mail, vue, vuetify, echarts, vue3">
+    <meta
+      name="description"
+      content="Vue Material Admin Template is a 
+    Google Material Design  inspired admin dashboard template built with Vue and Vuetify."
+    />
+    <meta
+      name="keywords"
+      content="admin, dashboard, webapp, template, responsive, material, bootstrap, crm, uikit, framework, backend, app, widgets, premium, file manamger, mail, vue, vuetify, echarts, vue3"
+    />
     <link rel="stylesheet" type="text/css" href="/loader.css" />
+    <!-- Google Tag Manager -->
     <script>
-      (function(w, d, s, l, i) {
-          w[l] = w[l] || [];
-          w[l].push({
-              'gtm.start': new Date().getTime(),
-              event: 'gtm.js'
-          });
-          var f = d.getElementsByTagName(s)[0],
-              j = d.createElement(s),
-              dl = l != 'dataLayer' ? '&l=' + l : '';
-          j.async = true;
-          j.src =
-              'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-          f.parentNode.insertBefore(j, f);
-      })(window, document, 'script', 'dataLayer', 'GTM-MM8HJ22');
-  </script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', 'GTM-TWGH5GDP');
+    </script>
+    <!-- End Google Tag Manager -->
   </head>
   <body>
     <div id="app">
@@ -38,8 +38,15 @@
       </div>
     </div>
     <script type="module" src="/src/main.ts"></script>
-    <noscript>
-      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MM8HJ22" height="0" width="0" style="display:none;visibility:hidden"></iframe>
-  </noscript>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-TWGH5GDP"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <!-- End Google Tag Manager (noscript) -->
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,56 +10,56 @@
   },
   "dependencies": {
     "@braks/vue-flow": "0.4.38",
-    "@date-io/dayjs": "^3.0.0",
-    "@fullcalendar/core": "^6.1.11",
-    "@fullcalendar/daygrid": "^6.1.11",
-    "@fullcalendar/interaction": "^6.1.11",
-    "@fullcalendar/list": "^6.1.11",
-    "@fullcalendar/timegrid": "^6.1.11",
-    "@fullcalendar/vue3": "^6.1.11",
-    "@vueuse/core": "10.9.0",
-    "@vueuse/math": "10.9.0",
-    "apexcharts": "3.46.0",
-    "axios": "^1.6.7",
-    "date-fns": "^3.3.1",
-    "dayjs": "^1.11.10",
-    "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.2.1",
-    "prismjs": "^1.29.0",
-    "vue": "3.4.21",
-    "vue-flatpickr-component": "11.0.4",
-    "vue-i18n": "^9.9.1",
+    "@date-io/dayjs": "^3.2.0",
+    "@fullcalendar/core": "^6.1.17",
+    "@fullcalendar/daygrid": "^6.1.17",
+    "@fullcalendar/interaction": "^6.1.17",
+    "@fullcalendar/list": "^6.1.17",
+    "@fullcalendar/timegrid": "^6.1.17",
+    "@fullcalendar/vue3": "^6.1.17",
+    "@vueuse/core": "13.2.0",
+    "@vueuse/math": "13.2.0",
+    "apexcharts": "4.7.0",
+    "axios": "^1.9.0",
+    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.13",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.3.0",
+    "prismjs": "^1.30.0",
+    "vue": "3.5.14",
+    "vue-flatpickr-component": "12.0.0",
+    "vue-i18n": "^11.1.3",
     "vue-prism-component": "^2.0.0",
-    "vue-router": "4.3.0",
-    "vue3-apexcharts": "1.5.2",
-    "vue3-perfect-scrollbar": "1.6.1",
-    "vuetify": "3.5.6",
-    "yup": "^1.3.3"
+    "vue-router": "4.5.1",
+    "vue3-apexcharts": "1.8.0",
+    "vue3-perfect-scrollbar": "2.0.0",
+    "vuetify": "3.8.6",
+    "yup": "^1.6.1"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",
-    "@rushstack/eslint-patch": "^1.7.2",
+    "@rushstack/eslint-patch": "^1.11.0",
     "@types/chance": "^1.1.6",
-    "@types/node": "^20.11.22",
-    "@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.57.0",
-    "eslint-plugin-vue": "^9.22.0",
-    "msw": "^2.2.2",
-    "prettier": "^3.2.5",
-    "sass": "^1.71.1",
-    "sass-loader": "^14.1.1",
-    "typescript": "^5.3.3",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-vue-components": "^0.26.0",
-    "unplugin-vue-define-options": "1.4.2",
-    "vite": "^5.1.4",
-    "vite-plugin-vue-devtools": "^7.0.15",
-    "vite-plugin-vuetify": "2.0.2",
+    "@types/node": "^22.15.21",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.27.0",
+    "eslint-plugin-vue": "^10.1.0",
+    "msw": "^2.8.4",
+    "prettier": "^3.5.3",
+    "sass": "^1.89.0",
+    "sass-loader": "^16.0.5",
+    "typescript": "^5.8.3",
+    "unplugin-auto-import": "^19.2.0",
+    "unplugin-vue-components": "^28.5.0",
+    "unplugin-vue-define-options": "1.5.5",
+    "vite": "^6.3.5",
+    "vite-plugin-vue-devtools": "^7.7.6",
+    "vite-plugin-vuetify": "2.1.1",
     "vue-cli-plugin-vuetify": "2.5.8",
-    "vue-tsc": "1.8.27",
+    "vue-tsc": "2.2.10",
     "vuetify-loader": "^2.0.0-alpha.9"
   }
 }
diff --git a/src/components/AppCardCode.vue b/src/components/AppCardCode.vue
@@ -77,12 +77,3 @@ const isCodeShown = ref(false);
     </VExpandTransition>
   </VCard>
 </template>
-
-<style lang="scss">
-// @use '@/styles/variables/_vuetify.scss';
-
-// :not(pre) > code[class*='language-'],
-// pre[class*='language-'] {
-//   border-radius: vuetify.$card-border-radius;
-// }
-</style>
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
@@ -1,10 +1,18 @@
 <script setup lang="ts">
-import Logo from '@/components/Logo.vue';
 import { reactive, computed } from 'vue';
 import { useLocale } from 'vuetify';
+import Logo from '@/components/Logo.vue';
 
 const { t } = useLocale();
-const items = [
+
+interface NavItem {
+  type?: 'subheader';
+  title: string;
+  props?: Record<string, any>;
+  value?: string;
+}
+
+const items: NavItem[] = [
   { type: 'subheader', title: t('apps') },
   {
     title: t('dashboard'),
@@ -103,7 +111,13 @@ const items = [
   }
 ];
 
-const drawerProps = reactive({
+interface DrawerProps {
+  rail: boolean;
+  railWidth: number;
+  icon: string;
+}
+
+const drawerProps = reactive<DrawerProps>({
   rail: false,
   railWidth: 256,
   icon: 'mdi-arrow-left'
@@ -117,7 +131,7 @@ const handleDrawerWidth = () => {
   drawerProps.icon = drawerProps.railWidth === 256 ? 'mdi-arrow-expand-left  ' : 'mdi-arrow-expand-right';
 };
 
-const menus = computed(() => {
+const menus = computed<NavItem[]>(() => {
   if (drawerProps.railWidth === 256) {
     return items;
   } else {

diff --git a/src/views/apps/CalendarView.vue b/src/views/apps/CalendarView.vue
@@ -45,7 +45,7 @@ const handleEventUpdate = (e) => {
       <VLayout>
         <VNavigationDrawer :width="292" absolute touchless location="start" class="calendar-add-event-drawer">
           <div class="ma-6">
-            <VBtn block prepend-icon="mdi-plus" @click="handleAddEvent"> {{ $t('add_event') }} </VBtn>
+            <VBtn block prepend-icon="mdi-plus" @click="handleAddEvent"> {{ t('add_event') }} </VBtn>
           </div>
           <VDivider />
           <div class="d-flex align-center justify-center pa-2 mb-3">
@@ -58,7 +58,7 @@ const handleEventUpdate = (e) => {
           </div>
           <VDivider />
           <div class="pa-7">
-            <VListSubheader>{{ $t('filter') }}</VListSubheader>
+            <VListSubheader>{{ t('filter') }}</VListSubheader>
             <div class="d-flex flex-column calendars-checkbox">
               <VCheckbox v-model="checkAll" :label="t('view_all')" />
               <VCheckbox

diff --git a/src/views/apps/ChatView.vue b/src/views/apps/ChatView.vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
-// import { VSkeletonLoader } from 'vuetify/labs/VSkeletonLoader';
-import { IChatMessage, IUser } from '@/api/type';
 import { ref, watchEffect, reactive } from 'vue';
+import { useLocale } from 'vuetify';
+import { IChatMessage, IUser } from '@/api/type';
 import { useChatStore } from '@/store/chatStore';
 import ChatAvatar from '@/components/chat/ChatAvatar.vue';
 import ChatMessage from '@/components/chat/ChatMessage.vue';
 import VerticalProfileCard from '@/components/card/VerticalProfileCard.vue';
 import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
 const store = useChatStore();
+const { t } = useLocale();
 const loading = ref(true);
 const showDialog = ref(false);
 const selectedUser = reactive<IUser>({
@@ -54,7 +55,7 @@ const handleViewChat = (chat) => {
         </VToolbar>
         <VDivider />
         <VList lines="two" class="pa-0">
-          <VListSubheader>{{ $t('recent') }}</VListSubheader>
+          <VListSubheader>{{ t('recent') }}</VListSubheader>
           <VDivider />
           <VSkeletonLoader v-if="loading" type="list-item-avatar"></VSkeletonLoader>
           <template v-for="chat in store.chats" :key="chat.id">
@@ -71,7 +72,7 @@ const handleViewChat = (chat) => {
             </VListItem>
             <VDivider />
           </template>
-          <VListSubheader>{{ $t('contact') }}</VListSubheader>
+          <VListSubheader>{{ t('contact') }}</VListSubheader>
           <VDivider />
           <VSkeletonLoader v-if="loading" type="list-item-avatar"></VSkeletonLoader>
           <template v-for="contact in store.chatContacts" :key="contact.id">