UX consistancy changes.

src/admin/jest.config.js

@@ -16,12 +16,19 @@ module.exports = {
     '^.+\\.[jt]sx?$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    '/node_modules/(?!(vuetify)/)',
+    '/node_modules/(?!(vuetify|@vueuse|@iconify)/)',
   ],
   moduleNameMapper: {
     '\\.(css|scss|sass)$': '<rootDir>/tests/__mocks__/styleMock.js',
     '\\.(svg|png|jpg|jpeg|gif|webp|woff2?)$': '<rootDir>/tests/__mocks__/fileMock.js',
     '^@/(.*)$': '<rootDir>/src/$1',
+    '^@core/(.*)$': '<rootDir>/src/@core/$1',
+    '^@core$': '<rootDir>/src/@core',
+    '^@layouts/(.*)$': '<rootDir>/src/@layouts/$1',
+    '^@layouts$': '<rootDir>/src/@layouts',
+    '^@images/(.*)$': '<rootDir>/src/assets/images/$1',
+    '^@styles/(.*)$': '<rootDir>/src/assets/styles/$1',
+    '^@configured-variables$': '<rootDir>/tests/__mocks__/styleMock.js',
   },
   globals: {
     'vue-jest': {

src/admin/package-lock.json

@@ -8,12 +8,16 @@
       "name": "mic-check-admin",
       "version": "1.0.0",
       "dependencies": {
-        "@mdi/js": "^7.4.47",
+        "@iconify-json/bxl": "^1.2.0",
+        "@iconify-json/ri": "^1.2.0",
+        "@iconify/vue": "^4.1.0",
+        "@vueuse/core": "^11.0.0",
         "axios": "^1.15.0",
         "pinia": "^3.0.4",
         "vue": "^3.4.0",
         "vue-router": "^4.3.0",
-        "vuetify": "^3.6.0"
+        "vue3-perfect-scrollbar": "^2.0.0",
+        "vuetify": "^3.7.5"
       },
       "devDependencies": {
         "@babel/core": "^7.24.0",
@@ -28,10 +32,12 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "sass": "^1.77.2",
+        "sass-embedded": "^1.77.0",
         "ts-jest": "^29.1.4",
         "typescript": "^5.4.5",
         "vite": "^8.0.8",
-        "vite-plugin-vuetify": "^2.1.3"
+        "vite-plugin-vuetify": "^2.1.3",
+        "vite-svg-loader": "^5.1.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1706,6 +1712,12 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.11.0.tgz",
+      "integrity": "sha512-sBXGT13cpmPR5BMgHE6UEEfEaShh5Ror6rfN3yEK5si7QVrtZg8LEPQb0VVhiLRUslD2yLnXtnRzG035J/mZXQ==",
+      "devOptional": true
+    },
     "node_modules/@emnapi/core": {
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
@@ -1734,6 +1746,41 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@iconify-json/bxl": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@iconify-json/bxl/-/bxl-1.2.4.tgz",
+      "integrity": "sha512-R6gVQSxB1+XeVClK7KdACnk1SfP8xiAu6LHuKZmp6Ro5zwMQbpe9vFBv30F6eHMDL8lZ7eXuac5SRJ9C8DKehQ==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify-json/ri": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.2.10.tgz",
+      "integrity": "sha512-WWMhoncVVM+Xmu9T5fgu2lhYRrKTEWhKk3Com0KiM111EeEsRLiASjpsFKnC/SrB6covhUp95r2mH8tGxhgd5Q==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+    },
+    "node_modules/@iconify/vue": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.3.0.tgz",
+      "integrity": "sha512-Xq0h6zMrHBbrW8jXJ9fISi+x8oDQllg5hTDkDuxnWiskJ63rpJu9CvJshj8VniHVTbsxCg9fVoPAaNp3RQI5OQ==",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -2566,11 +2613,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@mdi/js": {
-      "version": "7.4.47",
-      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
-      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ=="
-    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -3346,6 +3388,11 @@
       "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.35",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz",
@@ -3553,6 +3600,89 @@
         "vuetify": ">=3"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.3.0.tgz",
+      "integrity": "sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "11.3.0",
+        "@vueuse/shared": "11.3.0",
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.3.0.tgz",
+      "integrity": "sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.3.0.tgz",
+      "integrity": "sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==",
+      "dependencies": {
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -4166,6 +4296,12 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
     "node_modules/brace-expansion": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
@@ -4424,6 +4560,12 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/colorjs.io": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
+      "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+      "devOptional": true
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -4435,6 +4577,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/common-path-prefix": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
@@ -4590,6 +4741,22 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/css-tree": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@@ -4603,6 +4770,51 @@
         "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -4737,6 +4949,44 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -4750,6 +5000,35 @@
         "node": ">=12"
       }
     },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -8314,6 +8593,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/null-loader": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-4.0.1.tgz",
@@ -8577,6 +8868,11 @@
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
       "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
     },
+    "node_modules/perfect-scrollbar": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.6.tgz",
+      "integrity": "sha512-rixgxw3SxyJbCaSpo1n35A/fwI1r2rdwMKOTCg/AcG+xOEyZcE8UHVjpZMFCVImzsFoCZeJTT+M/rdEIQYO2nw=="
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -8957,6 +9253,15 @@
       "integrity": "sha512-UromN0peaE53IaBRe9W7CjrZgXl90fqGpK+mIZbA3qSTeYqg3pqpROBdIPvOG3F5ereDHNwoHBI2e50n1BDr1g==",
       "devOptional": true
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "devOptional": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -8964,9 +9269,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.98.0",
+      "version": "1.99.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.98.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.99.0.tgz",
-      "integrity": "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==",
+      "integrity": "sha512-kgW13M54DUB7IsIRM5LvJkNlpH+WhMpooUcaWGFARkF1Tc82v9mIWkCbCYf+MBvpIUBSeSOTilpZjEPr2VYE6Q==",
       "devOptional": true,
       "dependencies": {
         "chokidar": "^4.0.0",
@@ -8983,6 +9288,350 @@
         "@parcel/watcher": "^2.4.1"
       }
     },
+    "node_modules/sass-embedded": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.99.0.tgz",
+      "integrity": "sha512-gF/juR1aX02lZHkvwxdF80SapkQeg2fetoDF6gIQkNbSw5YEUFspMkyGTjPjgZSgIHuZpy+Wz4PlebKnLXMjdg==",
+      "devOptional": true,
+      "dependencies": {
+        "@bufbuild/protobuf": "^2.5.0",
+        "colorjs.io": "^0.5.0",
+        "immutable": "^5.1.5",
+        "rxjs": "^7.4.0",
+        "supports-color": "^8.1.1",
+        "sync-child-process": "^1.0.2",
+        "varint": "^6.0.0"
+      },
+      "bin": {
+        "sass": "dist/bin/sass.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "optionalDependencies": {
+        "sass-embedded-all-unknown": "1.99.0",
+        "sass-embedded-android-arm": "1.99.0",
+        "sass-embedded-android-arm64": "1.99.0",
+        "sass-embedded-android-riscv64": "1.99.0",
+        "sass-embedded-android-x64": "1.99.0",
+        "sass-embedded-darwin-arm64": "1.99.0",
+        "sass-embedded-darwin-x64": "1.99.0",
+        "sass-embedded-linux-arm": "1.99.0",
+        "sass-embedded-linux-arm64": "1.99.0",
+        "sass-embedded-linux-musl-arm": "1.99.0",
+        "sass-embedded-linux-musl-arm64": "1.99.0",
+        "sass-embedded-linux-musl-riscv64": "1.99.0",
+        "sass-embedded-linux-musl-x64": "1.99.0",
+        "sass-embedded-linux-riscv64": "1.99.0",
+        "sass-embedded-linux-x64": "1.99.0",
+        "sass-embedded-unknown-all": "1.99.0",
+        "sass-embedded-win32-arm64": "1.99.0",
+        "sass-embedded-win32-x64": "1.99.0"
+      }
+    },
+    "node_modules/sass-embedded-all-unknown": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.99.0.tgz",
+      "integrity": "sha512-qPIRG8Uhjo6/OKyAKixTnwMliTz+t9K6Duk0mx5z+K7n0Ts38NSJz2sjDnc7cA/8V9Lb3q09H38dZ1CLwD+ssw==",
+      "cpu": [
+        "!arm",
+        "!arm64",
+        "!riscv64",
+        "!x64"
+      ],
+      "optional": true,
+      "dependencies": {
+        "sass": "1.99.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.99.0.tgz",
+      "integrity": "sha512-EHvJ0C7/VuP78Qr6f8gIUVUmCqIorEQpw2yp3cs3SMg02ZuumlhjXvkTcFBxHmFdFR23vTNk1WnhY6QSeV1nFQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.99.0.tgz",
+      "integrity": "sha512-fNHhdnP23yqqieCbAdym4N47AleSwjbNt6OYIYx4DdACGdtERjQB4iOX/TaKsW034MupfF7SjnAAK8w7Ptldtg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-riscv64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.99.0.tgz",
+      "integrity": "sha512-4zqDFRvgGDTL5vTHuIhRxUpXFoh0Cy7Gm5Ywk19ASd8Settmd14YdPRZPmMxfgS1GH292PofV1fq1ifiSEJWBw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-x64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.99.0.tgz",
+      "integrity": "sha512-Uk53k/dGYt04RjOL4gFjZ0Z9DH9DKh8IA8WsXUkNqsxerAygoy3zqRBS2zngfE9K2jiOM87q+1R1p87ory9oQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-arm64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.99.0.tgz",
+      "integrity": "sha512-u61/7U3IGLqoO6gL+AHeiAtlTPFwJK1+964U8gp45ZN0hzh1yrARf5O1mivXv8NnNgJvbG2wWJbiNZP0lG/lTg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-x64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.99.0.tgz",
+      "integrity": "sha512-j/kkk/NcXdIameLezSfXjgCiBkVcA+G60AXrX768/3g0miK1g7M9dj7xOhCb1i7/wQeiEI3rw2LLuO63xRIn4A==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.99.0.tgz",
+      "integrity": "sha512-d4IjJZrX2+AwB2YCy1JySwdptJECNP/WfAQLUl8txI3ka8/d3TUI155GtelnoZUkio211PwIeFvvAeZ9RXPQnw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.99.0.tgz",
+      "integrity": "sha512-btNcFpItcB56L40n8hDeL7sRSMLDXQ56nB5h2deddJx1n60rpKSElJmkaDGHtpkrY+CTtDRV0FZDjHeTJddYew==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.99.0.tgz",
+      "integrity": "sha512-2gvHOupgIw3ytatXT4nFUow71LFbuOZPEwG+HUzcNQDH8ue4Ez8cr03vsv5MDv3lIjOKcXwDvWD980t18MwkoQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.99.0.tgz",
+      "integrity": "sha512-Hi2bt/IrM5P4FBKz6EcHAlniwfpoz9mnTdvSd58y+avA3SANM76upIkAdSayA8ZGwyL3gZokru1AKDPF9lJDNw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-riscv64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.99.0.tgz",
+      "integrity": "sha512-mKqGvVaJ9rHMqyZsF0kikQe4NO0f4osb67+X6nLhBiVDKvyazQHJ3zJQreNefIE36yL2sjHIclSB//MprzaQDg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-x64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.99.0.tgz",
+      "integrity": "sha512-huhgOMmOc30r7CH7qbRbT9LerSEGSnWuS4CYNOskr9BvNeQp4dIneFufNRGZ7hkOAxUM8DglxIZJN/cyAT95Ew==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-riscv64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.99.0.tgz",
+      "integrity": "sha512-mevFPIFAVhrH90THifxLfOntFmHtcEKOcdWnep2gJ0X4DVva4AiVIRlQe/7w9JFx5+gnDRE1oaJJkzuFUuYZsA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-x64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.99.0.tgz",
+      "integrity": "sha512-9k7IkULqIZdCIVt4Mboryt6vN8Mjmm3EhI1P3mClU5y5i3wLK5ExC3cbVWk047KsID/fvB1RLslqghXJx5BoxA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-unknown-all": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.99.0.tgz",
+      "integrity": "sha512-P7MxiUtL/XzGo3PX0CaB8lNNEFLQWKikPA8pbKytx9ZCLZSDkt2NJcdAbblB/sqMs4AV3EK2NadV8rI/diq3xg==",
+      "optional": true,
+      "os": [
+        "!android",
+        "!darwin",
+        "!linux",
+        "!win32"
+      ],
+      "dependencies": {
+        "sass": "1.99.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-arm64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.99.0.tgz",
+      "integrity": "sha512-8whpsW7S+uO8QApKfQuc36m3P9EISzbVZOgC79goob4qGy09u8Gz/rYvw8h1prJDSjltpHGhOzBE6LDz7WvzVw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-x64": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.99.0.tgz",
+      "integrity": "sha512-ipuOv1R2K4MHeuCEAZGpuUbAgma4gb0sdacyrTjJtMOy/OY9UvWfVlwErdB09KIkp4fPDpQJDJfvYN6bC8jeNg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sass-embedded/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "devOptional": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
+      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
+      "dev": true,
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -9269,12 +9918,58 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svgo": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz",
+      "integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0",
+        "sax": "^1.5.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/sync-child-process": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
+      "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
+      "devOptional": true,
+      "dependencies": {
+        "sync-message-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/sync-message-port": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.2.0.tgz",
+      "integrity": "sha512-gAQ9qrUN/UCypHtGFbbe7Rc/f9bzO88IwrG8TDo/aMKAApKyD6E3W4Cm0EfhfBb6Z6SKt59tTCTfD+n1xmAvMg==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.2.tgz",
@@ -9625,7 +10320,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "optional": true
+      "devOptional": true
     },
     "node_modules/type-detect": {
       "version": "4.0.8",
@@ -9803,6 +10498,12 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/varint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+      "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+      "devOptional": true
+    },
     "node_modules/vite": {
       "version": "8.0.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.8.tgz",
@@ -9899,6 +10600,19 @@
         "vuetify": ">=3"
       }
     },
+    "node_modules/vite-svg-loader": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.1.tgz",
+      "integrity": "sha512-RPzcXA/EpKJA0585x58DBgs7my2VfeJ+j2j1EoHY4Zh82Y7hV4cR1fElgy2aZi85+QSrcLLoTStQ5uZjD68u+Q==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "svgo": "^3.3.3"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.13"
+      }
+    },
     "node_modules/vite/node_modules/picomatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
@@ -9951,6 +10665,17 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/vue3-perfect-scrollbar": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vue3-perfect-scrollbar/-/vue3-perfect-scrollbar-2.0.0.tgz",
+      "integrity": "sha512-nSWVcRyViCgt0Pe3RhU3w/BllLcFSrEzYOGlRBjSyhVmiZlERHHziffW+9P8L0IMEWouC5t+uYrgNJGSAElqMA==",
+      "dependencies": {
+        "perfect-scrollbar": "^1.5.5"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vuetify": {
       "version": "3.12.4",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.12.4.tgz",

src/admin/package.json

@@ -10,12 +10,16 @@
     "test": "jest --passWithNoTests"
   },
   "dependencies": {
-    "@mdi/js": "^7.4.47",
+    "@iconify-json/bxl": "^1.2.0",
+    "@iconify-json/ri": "^1.2.0",
+    "@iconify/vue": "^4.1.0",
+    "@vueuse/core": "^11.0.0",
     "axios": "^1.15.0",
     "pinia": "^3.0.4",
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
-    "vuetify": "^3.6.0"
+    "vue3-perfect-scrollbar": "^2.0.0",
+    "vuetify": "^3.7.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -30,10 +34,12 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "sass": "^1.77.2",
+    "sass-embedded": "^1.77.0",
     "ts-jest": "^29.1.4",
     "typescript": "^5.4.5",
     "vite": "^8.0.8",
-    "vite-plugin-vuetify": "^2.1.3"
+    "vite-plugin-vuetify": "^2.1.3",
+    "vite-svg-loader": "^5.1.0"
   },
   "overrides": {
     "brace-expansion": "^5.0.5"

src/admin/src/@core/components/MoreBtn.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+interface Props {
+  menuList?: unknown[]
+  itemProps?: boolean
+  iconSize?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <IconBtn>
+    <VIcon
+      :size="iconSize"
+      icon="ri-more-2-line"
+    />
+
+    <VMenu
+      v-if="props.menuList"
+      activator="parent"
+    >
+      <VList
+        :items="props.menuList"
+        :item-props="props.itemProps"
+      />
+    </VMenu>
+  </IconBtn>
+</template>

src/admin/src/@core/components/ThemeSwitcher.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import { useCycleList } from '@vueuse/core';
+import { useTheme } from 'vuetify';
+import type { ThemeSwitcherTheme } from '@layouts/types';
+
+const props = defineProps<{
+  themes: ThemeSwitcherTheme[]
+}>()
+
+const { name: themeName, global: globalTheme } = useTheme()
+const { state: currentThemeName, next: getNextThemeName, index: currentThemeIndex } = useCycleList(props.themes.map(t => t.name), { initialValue: themeName })
+
+const changeTheme = () => {
+  globalTheme.name.value = getNextThemeName()
+}
+
+// Update icon if theme is changed from other sources
+watch(() => globalTheme.name.value, val => {
+  currentThemeName.value = val
+})
+</script>
+
+<template>
+  <IconBtn @click="changeTheme">
+    <VIcon :icon="props.themes[currentThemeIndex].icon" />
+    <VTooltip
+      activator="parent"
+      open-delay="1000"
+      scroll-strategy="close"
+    >
+      <span class="text-capitalize">{{ currentThemeName }}</span>
+    </VTooltip>
+  </IconBtn>
+</template>

src/admin/src/@core/components/cards/CardStatisticsHorizontal.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  color?: string
+  icon: string
+  stats: number
+  change: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+
+const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
+</script>
+
+<template>
+  <VCard>
+    <VCardText class="d-flex align-center">
+      <VAvatar
+        size="44"
+        rounded
+        :color="props.color"
+        variant="tonal"
+        class="me-4"
+      >
+        <VIcon
+          :icon="props.icon"
+          size="30"
+        />
+      </VAvatar>
+
+      <div>
+        <span class="text-caption">{{ props.title }}</span>
+        <div class="d-flex align-center flex-wrap">
+          <span class="text-h6 font-weight-semibold">{{ kFormatter(props.stats) }}</span>
+          <div
+            v-if="props.change"
+            :class="`${isPositive ? 'text-success' : 'text-error'} mt-1`"
+          >
+            <VIcon
+              :icon="isPositive ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"
+              size="24"
+            />
+            <span class="text-base">
+              {{ Math.abs(props.change) }}%
+            </span>
+          </div>
+        </div>
+      </div>
+    </VCardText>
+  </VCard>
+</template>

src/admin/src/@core/components/cards/CardStatisticsVertical.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  color?: string
+  icon: string
+  stats: string
+  change: number
+  subtitle: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+
+const isPositive = computed(() => Math.sign(props.change) === 1)
+
+const moreList = [
+  { title: 'Share', value: 'Share' },
+  { title: 'Refresh', value: 'Refresh' },
+  { title: 'Update', value: 'Update' },
+]
+</script>
+
+<template>
+  <VCard>
+    <VCardText class="d-flex align-center">
+      <VAvatar
+        v-if="props.icon"
+        size="40"
+        :color="props.color"
+        class="elevation-2"
+      >
+        <VIcon
+          :icon="props.icon"
+          size="24"
+        />
+      </VAvatar>
+
+      <VSpacer />
+
+      <MoreBtn
+        class="me-n3 mt-n1"
+        :menu-list="moreList"
+      />
+    </VCardText>
+
+    <VCardText>
+      <h6 class="text-h6 mb-1">
+        {{ props.title }}
+      </h6>
+
+      <div
+        v-if="props.change"
+        class="d-flex align-center mb-1 flex-wrap"
+      >
+        <h4 class="text-h4 me-2">
+          {{ props.stats }}
+        </h4>
+        <div
+          :class="isPositive ? 'text-success' : 'text-error'"
+          class="text-body-1"
+        >
+          {{ isPositive ? `+${props.change}` : props.change }}%
+        </div>
+      </div>
+      <div class="text-body-2">
+        {{ props.subtitle }}
+      </div>
+    </VCardText>
+  </VCard>
+</template>

src/admin/src/@core/components/cards/CardStatisticsWithImages.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  subtitle: string
+  stats: string
+  change: number
+  image: string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'primary',
+})
+
+const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
+</script>
+
+<template>
+  <VCard class="overflow-visible">
+    <div class="d-flex position-relative">
+      <VCardText>
+        <h6 class="text-base font-weight-semibold mb-4">
+          {{ props.title }}
+        </h6>
+        <div class="d-flex align-center flex-wrap mb-4">
+          <h5 class="text-h5 font-weight-semibold me-2">
+            {{ props.stats }}
+          </h5>
+          <span
+            class="text-caption"
+            :class="isPositive ? 'text-success' : 'text-error'"
+          >
+            {{ isPositive ? `+${props.change}` : props.change }}%
+          </span>
+        </div>
+
+        <VChip
+          v-if="props.subtitle"
+          size="small"
+          :color="props.color"
+        >
+          {{ props.subtitle }}
+        </VChip>
+      </VCardText>
+
+      <VSpacer />
+
+      <div class="illustrator-img">
+        <VImg
+          v-if="props.image"
+          :src="props.image"
+          :width="110"
+        />
+      </div>
+    </div>
+  </VCard>
+</template>
+
+<style lang="scss">
+.illustrator-img {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 5%;
+}
+</style>

src/admin/src/@core/scss/base/_components.scss

@@ -0,0 +1,191 @@
+@use "mixins";
+@use "@layouts/styles/placeholders";
+@use "@layouts/styles/mixins" as layoutMixins;
+@use "@configured-variables" as variables;
+@use "@styles/variables/_vuetify.scss" as vuetify;
+
+// 👉 Avatar group
+.v-avatar-group {
+  display: flex;
+  align-items: center;
+
+  > * {
+    &:not(:first-child) {
+      margin-inline-start: -0.8rem;
+    }
+
+    transition: transform 0.25s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      z-index: 2;
+      transform: translateY(-5px) scale(1.05);
+
+      @include mixins.elevation(3);
+    }
+  }
+
+  > .v-avatar {
+    border: 2px solid rgb(var(--v-theme-surface));
+    transition: transform 0.15s ease;
+  }
+}
+
+// 👉 Button outline with default color border color
+.v-alert--variant-outlined,
+.v-avatar--variant-outlined,
+.v-btn.v-btn--variant-outlined,
+.v-card--variant-outlined,
+.v-chip--variant-outlined,
+.v-list-item--variant-outlined {
+  &:not([class*="text-"]) {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+
+  &.text-default {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+}
+
+// 👉 Custom Input
+.v-label.custom-input {
+  padding: 1rem;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  opacity: 1;
+  white-space: normal;
+
+  &:hover {
+    border-color: rgba(var(--v-border-color), 0.25);
+  }
+
+  &.active {
+    border-color: rgb(var(--v-theme-primary));
+
+    .v-icon {
+      color: rgb(var(--v-theme-primary)) !important;
+    }
+  }
+
+  &.custom-checkbox,
+  &.custom-radio {
+    .v-input__control {
+      grid-area: none;
+    }
+  }
+}
+
+// 👉 Datatable
+.v-data-table-footer__pagination {
+  @include layoutMixins.rtl {
+    .v-btn {
+      .v-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+// Dialog responsive width
+.v-dialog {
+  // dialog custom close btn
+  .v-dialog-close-btn {
+    position: absolute;
+    z-index: 1;
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
+    inset-block-start: 0.5rem;
+    inset-inline-end: 0.5rem;
+
+    .v-btn__overlay {
+      display: none;
+    }
+  }
+
+  .v-card {
+    @extend %style-scroll-bar;
+  }
+}
+
+@media (min-width: 600px) {
+  .v-dialog {
+    &.v-dialog-sm,
+    &.v-dialog-lg,
+    &.v-dialog-xl {
+      .v-overlay__content {
+        inline-size: 565px !important;
+      }
+    }
+  }
+}
+
+@media (min-width: 960px) {
+  .v-dialog {
+    &.v-dialog-lg,
+    &.v-dialog-xl {
+      .v-overlay__content {
+        inline-size: 865px !important;
+      }
+    }
+  }
+}
+
+@media (min-width: 1264px) {
+  .v-dialog.v-dialog-xl {
+    .v-overlay__content {
+      inline-size: 1165px !important;
+    }
+  }
+}
+
+// 👉 Expansion panel
+.v-expansion-panels.customized-panels {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: vuetify.$border-radius-root;
+
+  .v-expansion-panel-title {
+    background-color: rgb(var(--v-theme-expansion-panel-text-custom-bg));
+    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    margin-block-end: -1px;
+  }
+
+  .v-expansion-panel-text__wrapper {
+    padding: 20px;
+  }
+}
+
+// v-tab with pill support
+.v-tabs.v-tabs-pill {
+  .v-tab.v-btn {
+    border-radius: 0.25rem !important;
+    transition: none;
+
+    .v-tab__slider {
+      visibility: hidden;
+    }
+  }
+}
+
+// loop for all colors bg
+@each $color-name in variables.$theme-colors-name {
+  body .v-tabs.v-tabs-pill {
+    .v-slide-group__content {
+      gap: 0.25rem;
+    }
+    .v-tab--selected.text-#{$color-name} {
+      background-color: rgb(var(--v-theme-#{$color-name}));
+      color: rgb(var(--v-theme-on-#{$color-name})) !important;
+    }
+  }
+}
+
+// ℹ️ We are make even width of all v-timeline body
+.v-timeline--vertical.v-timeline {
+  .v-timeline-item {
+    .v-timeline-item__body {
+      justify-self: stretch !important;
+    }
+  }
+}
+
+// 👉 Switch
+.v-switch .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
+  color: #fff !important;
+}

src/admin/src/@core/scss/base/_dark.scss

@@ -0,0 +1,16 @@
+@use "@configured-variables" as variables;
+
+// ————————————————————————————————————
+// * ——— Perfect Scrollbar
+// ————————————————————————————————————
+
+body.v-theme--dark {
+  .ps__rail-y,
+  .ps__rail-x {
+    background-color: transparent !important;
+  }
+
+  .ps__thumb-y {
+    background-color: variables.$plugin-ps-thumb-y-dark;
+  }
+}

src/admin/src/@core/scss/base/_default-layout-w-vertical-nav.scss

@@ -0,0 +1,103 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/base/placeholders" as *;
+@use "@core/scss/template/placeholders" as *;
+@use "misc";
+@use "@core/scss/base/mixins";
+
+$header: ".layout-navbar";
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: ".layout-navbar .navbar-content-container";
+}
+
+.layout-wrapper.layout-nav-type-vertical {
+  // SECTION  Layout Navbar
+  // 👉 Elevated navbar
+  @if variables.$vertical-nav-navbar-style == "elevated" {
+    // Add transition
+    #{$header} {
+      transition: padding 0.2s ease, background-color 0.18s ease;
+    }
+
+    // If navbar is contained => Add border radius to header
+    @if variables.$layout-vertical-nav-navbar-is-contained {
+      #{$header} {
+        border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+    }
+
+    // Scrolled styles for sticky navbar
+    @at-root {
+      /* ℹ️ This html selector with not selector is required when:
+        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and our style broke
+    */
+      html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky,
+      &.window-scrolled.layout-navbar-sticky {
+
+        #{$header} {
+          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
+          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+        }
+
+        .navbar-blur#{$header} {
+          @extend %blurry-bg;
+        }
+      }
+    }
+  }
+
+  // 👉 Floating navbar
+  @else if  variables.$vertical-nav-navbar-style == "floating" {
+    // ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
+    .layout-navbar {
+      &.navbar-blur {
+        @extend %default-layout-vertical-nav-floating-navbar-overlay;
+      }
+    }
+
+    &:not(.layout-navbar-sticky) {
+      #{$header} {
+        margin-block-start: variables.$vertical-nav-floating-navbar-top;
+      }
+    }
+
+    #{$header} {
+      @if variables.$layout-vertical-nav-navbar-is-contained {
+        border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+
+      background-color: rgb(var(--v-theme-surface));
+
+      @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+    }
+
+    .navbar-blur#{$header} {
+      @extend %blurry-bg;
+    }
+  }
+
+  // !SECTION
+
+  // 👉 Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
+
+      // Sticky footer
+      @at-root {
+        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
+        .layout-footer-sticky#{$ele-layout-footer} {
+          .footer-content-container {
+            background-color: rgb(var(--v-theme-surface));
+            padding-block: 0;
+            padding-inline: 1.2rem;
+
+            @include mixins.elevation(3);
+          }
+        }
+      }
+    }
+  }
+}

src/admin/src/@core/scss/base/_default-layout.scss

@@ -0,0 +1,16 @@
+@use "@core/scss/base/placeholders";
+@use "@core/scss/base/variables";
+
+.layout-vertical-nav,
+.layout-horizontal-nav {
+  ol,
+  ul {
+    list-style: none;
+  }
+}
+
+.layout-navbar {
+  @if variables.$navbar-high-emphasis-text {
+    @extend %layout-navbar;
+  }
+}

src/admin/src/@core/scss/base/_index.scss

@@ -0,0 +1,40 @@
+@use "sass:map";
+
+// Layout
+@use "vertical-nav";
+@use "default-layout";
+@use "default-layout-w-vertical-nav";
+
+// Layouts package
+@use "layouts";
+
+// Components
+@use "components";
+
+// Utilities
+@use "utilities";
+
+// Misc
+@use "misc";
+
+// Dark
+@use "dark";
+
+// libs
+@use "libs/perfect-scrollbar";
+
+a {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+}
+
+// Vuetify 3 don't provide margin bottom style like vuetify 2
+p {
+  margin-block-end: 1rem;
+}
+
+// Iconify icon size
+svg.iconify {
+  block-size: 1em;
+  inline-size: 1em;
+}

src/admin/src/@core/scss/base/_layouts.scss

@@ -0,0 +1,63 @@
+@use "@configured-variables" as variables;
+
+/* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
+
+/*
+  ℹ️ When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
+*/
+// .layout-wrapper.layout-nav-type-vertical {
+//   &.layout-content-height-fixed {
+//     .page-content-container {
+//       > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
+//         flex-grow: 1;
+//         block-size: 100%;
+//       }
+//     }
+//   }
+// }
+.layout-wrapper.layout-nav-type-vertical {
+  &.layout-content-height-fixed {
+    .page-content-container {
+      > .v-layout:first-child {
+        overflow: hidden;
+        min-block-size: 100%;
+
+        > .v-main {
+          // overflow-y: auto;
+
+          .v-main__wrap > :first-child {
+            block-size: 100%;
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ℹ️ Let div/v-layout take full height. E.g. Email App
+.layout-wrapper.layout-nav-type-horizontal {
+  &.layout-content-height-fixed {
+    > .layout-page-content {
+      display: flex;
+    }
+  }
+}
+
+// 👉 Floating navbar styles
+@if variables.$vertical-nav-navbar-style == "floating" {
+  // ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder)
+  body .layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky {
+    .layout-navbar {
+      inset-block-start: variables.$vertical-nav-floating-navbar-top;
+    }
+
+    /*
+      ℹ️ If it's floating navbar
+      Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
+    */
+    .layout-page-content {
+      margin-block-start: variables.$vertical-nav-floating-navbar-top;
+    }
+  }
+}

src/admin/src/@core/scss/base/_misc.scss

@@ -0,0 +1,20 @@
+// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
+.scrollable-content {
+  &.v-navigation-drawer {
+    .v-navigation-drawer__content {
+      display: flex;
+      overflow: hidden;
+      flex-direction: column;
+    }
+  }
+}
+
+// ℹ️ adding styling for code tag
+code {
+  border-radius: 3px;
+  color: rgb(var(--v-code-color));
+  font-size: 90%;
+  font-weight: 400;
+  padding-block: 0.2em;
+  padding-inline: 0.4em;
+}

src/admin/src/@core/scss/base/_mixins.scss

@@ -0,0 +1,63 @@
+@use "sass:map";
+@use "@styles/variables/vuetify.scss";
+
+@mixin elevation($z, $important: false) {
+  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
+}
+
+// #region before-pseudo
+// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
+@mixin before-pseudo() {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    border-radius: inherit;
+    background: currentcolor;
+    block-size: 100%;
+    content: "";
+    inline-size: 100%;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+// #endregion before-pseudo
+
+@mixin bordered-skin($component, $border-property: "border", $important: false) {
+  #{$component} {
+    box-shadow: none !important;
+    // stylelint-disable-next-line annotation-no-unknown
+    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
+  }
+}
+
+// #region selected-states
+// ℹ️ Inspired from vuetify's active-states mixin
+// focus => 0.12 & selected => 0.08
+@mixin selected-states($selector) {
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:hover
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:focus-visible
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      #{$selector} {
+        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+      }
+    }
+  }
+}
+
+// #endregion selected-states

src/admin/src/@core/scss/base/_utilities.scss

@@ -0,0 +1,184 @@
+@use "@configured-variables" as variables;
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+/* 👉 Demo spacers */
+
+/* TODO: Use vuetify SCSS variable here; */
+$card-spacer-content: 16px;
+
+.demo-space-x {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-block-start: -$card-spacer-content;
+
+  & > * {
+    margin-block-start: $card-spacer-content;
+    margin-inline-end: $card-spacer-content;
+  }
+}
+
+.demo-space-y {
+  & > * {
+    margin-block-end: $card-spacer-content;
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+}
+
+// 👉 Card match height
+.match-height.v-row {
+  .v-card {
+    block-size: 100%;
+  }
+}
+
+// 👉 Whitespace
+.whitespace-no-wrap {
+  white-space: nowrap;
+}
+
+// 👉 Colors
+
+/*
+  ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
+  Moreover, we also use this class in some places
+
+  ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
+
+  ℹ️ We also need !important to get correct color in badge icon
+*/
+.text-white {
+  color: #fff !important;
+}
+
+.text-white-variant {
+  color: rgba(255, 255, 255, var(--v-high-emphasis-opacity));
+}
+
+.text-link {
+  &:not(:hover) {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+}
+
+.bg-var-theme-background {
+  background-color: rgba(var(--v-theme-on-background), var(--v-hover-opacity)) !important;
+}
+
+.bg-global-primary {
+  background-color: rgb(var(--v-theme-primary)) !important;
+  color: rgb(var(--v-theme-on-primary)) !important;
+}
+
+// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
+@each $color-name in variables.$theme-colors-name {
+  .bg-light-#{$color-name} {
+    background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
+  }
+}
+
+// 👉 clamp text
+.clamp-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.custom-badge {
+  .v-badge__badge {
+    border-radius: 6px !important;
+    block-size: 12px !important;
+    inline-size: 12px !important;
+  }
+}
+
+.leading-normal {
+  line-height: normal !important;
+}
+
+// 👉 for rtl only
+.flip-in-rtl {
+  @include layoutsMixins.rtl {
+    transform: scaleX(-1);
+  }
+}
+
+// 👉 Carousel
+.carousel-delimiter-top-end {
+  .v-carousel__controls {
+    justify-content: end;
+    block-size: 40px;
+    inset-block-start: 0;
+    padding-inline: 1rem;
+
+    .v-btn--icon.v-btn--density-default {
+      block-size: calc(var(--v-btn-height) + -10px);
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+      inline-size: calc(var(--v-btn-height) + -8px);
+
+      &.v-btn--active {
+        color: #fff;
+      }
+
+      .v-btn__overlay {
+        opacity: 0;
+      }
+
+      .v-ripple__container {
+        display: none;
+      }
+
+      .v-btn__content {
+        .v-icon {
+          block-size: 8px !important;
+          font-size: 8px !important;
+          inline-size: 8px !important;
+        }
+      }
+    }
+  }
+
+  @each $color-name in variables.$theme-colors-name {
+
+    &.dots-active-#{$color-name} {
+      .v-carousel__controls {
+        .v-btn--active {
+          color: rgb(var(--v-theme-#{$color-name})) !important;
+        }
+      }
+    }
+  }
+}
+
+.v-timeline-item {
+  .app-timeline-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.3125rem;
+  }
+
+  .app-timeline-meta {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: 12px;
+    line-height: 0.875rem;
+  }
+
+  .app-timeline-text {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: 14px;
+    line-height: 1.25rem;
+  }
+
+  .timeline-chip {
+    border-radius: 6px;
+    background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
+    padding-block: 5px;
+    padding-inline: 10px;
+  }
+}

src/admin/src/@core/scss/base/_utils.scss

@@ -0,0 +1,90 @@
+@use "sass:map";
+@use "sass:list";
+@use "@configured-variables" as variables;
+
+// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+
+  @return $map;
+}
+
+@function map-deep-set($map, $keys, $value) {
+  $maps: ($map,);
+  $result: null;
+
+  // If the last key is a map already
+  // Warn the user we will be overriding it with $value
+  @if type-of(nth($keys, -1)) == "map" {
+    @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
+  }
+
+  // If $keys is a single key
+  // Just merge and return
+  @if length($keys) == 1 {
+    @return map-merge($map, ($keys: $value));
+  }
+
+  // Loop from the first to the second to last key from $keys
+  // Store the associated map to this key in the $maps list
+  // If the key doesn't exist, throw an error
+  @for $i from 1 through length($keys) - 1 {
+    $current-key: list.nth($keys, $i);
+    $current-map: list.nth($maps, -1);
+    $current-get: map.get($current-map, $current-key);
+
+    @if not $current-get {
+      @error "Key `#{$key}` doesn't exist at current level in map.";
+    }
+
+    $maps: list.append($maps, $current-get);
+  }
+
+  // Loop from the last map to the first one
+  // Merge it with the previous one
+  @for $i from length($maps) through 1 {
+    $current-map: list.nth($maps, $i);
+    $current-key: list.nth($keys, $i);
+    $current-val: if($i == list.length($maps), $value, $result);
+    $result: map.map-merge($current-map, ($current-key: $current-val));
+  }
+
+  // Return result
+  @return $result;
+}
+
+// font size utility classes
+@each $name, $size in variables.$font-sizes {
+  .text-#{$name} {
+    font-size: $size;
+    line-height: map.get(variables.$font-line-height, $name);
+  }
+}
+
+// truncate utility class
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// gap utility class
+@each $name, $size in variables.$gap {
+  .gap-#{$name} {
+    gap: $size;
+  }
+
+  .gap-x-#{$name} {
+    column-gap: $size;
+  }
+
+  .gap-y-#{$name} {
+    row-gap: $size;
+  }
+}
+
+.list-none {
+  list-style-type: none;
+}

src/admin/src/@core/scss/base/_variables.scss

@@ -0,0 +1,198 @@
+@use "vuetify/lib/styles/tools/functions" as *;
+
+/*
+  TODO: Add docs on when to use placeholder vs when to use SASS variable
+
+  Placeholder
+    - When we want to keep customization to our self between templates use it
+
+  Variables
+    - When we want to allow customization from both user and our side
+    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
+*/
+
+@forward "@layouts/styles/variables" with (
+  // Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
+  $layout-vertical-nav-z-index: 1003,
+  $layout-overlay-z-index: 1002,
+);
+@use "@layouts/styles/variables" as *;
+
+// 👉 Default layout
+
+$navbar-high-emphasis-text: true !default;
+
+// @forward "@layouts/styles/variables" with (
+//   $layout-vertical-nav-width: 350px !default,
+// );
+
+$theme-colors-name: (
+  "primary",
+  "secondary",
+  "error",
+  "info",
+  "success",
+  "warning"
+) !default;
+
+// 👉 Default layout with vertical nav
+
+$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
+
+// 👉 Vertical nav
+$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
+$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
+
+// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
+// This is used by nav items & nav header
+$vertical-nav-horizontal-spacing: 1rem !default;
+$vertical-nav-horizontal-padding: 0.75rem !default;
+
+// Vertical nav header height. Mostly we will align it with navbar height;
+$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
+$vertical-nav-navbar-elevation: 3 !default;
+$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
+$vertical-nav-floating-navbar-top: 1rem !default;
+
+// Vertical nav header padding
+$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
+$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
+
+// Move logo when vertical nav is mini (collapsed but not hovered)
+$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
+
+// Space between logo and title
+$vertical-nav-header-logo-title-spacing: 0.9rem !default;
+
+// Section title margin top (when its not first child)
+$vertical-nav-section-title-mt: 1.5rem !default;
+
+// Section title margin bottom
+$vertical-nav-section-title-mb: 0.5rem !default;
+
+// Vertical nav icons
+$vertical-nav-items-icon-size: 1.5rem !default;
+$vertical-nav-items-nested-icon-size: 0.9rem !default;
+$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
+
+// Transition duration for nav group arrow
+$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
+
+// Timing function for nav group arrow
+$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
+
+// 👉 Horizontal nav
+
+/*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+*/
+$horizontal-nav-padding: 0.6875rem !default;
+
+// Gap between top level horizontal nav items
+$horizontal-nav-top-level-items-gap: 4px !default;
+
+// Horizontal nav icons
+$horizontal-nav-items-icon-size: 1.5rem !default;
+$horizontal-nav-third-level-icon-size: 0.9rem !default;
+$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
+$horizontal-nav-group-arrow-icon-size: 1.375rem !default;
+
+// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
+// 120px is combined height of navbar & horizontal nav
+$horizontal-nav-popper-content-max-height: calc(100dvh - 120px - 4rem) !default;
+
+// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
+$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
+
+// 👉 Plugins
+
+$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
+
+// 👉 Vuetify
+
+// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
+$vuetify-reduce-default-compact-button-icon-size: true !default;
+
+// 👉 Custom variables
+// for utility classes
+$font-sizes: () !default;
+$font-sizes: map-deep-merge(
+  (
+    "xs": 0.75rem,
+    "sm": 0.875rem,
+    "base": 1rem,
+    "lg": 1.125rem,
+    "xl": 1.25rem,
+    "2xl": 1.5rem,
+    "3xl": 1.875rem,
+    "4xl": 2.25rem,
+    "5xl": 3rem,
+    "6xl": 3.75rem,
+    "7xl": 4.5rem,
+    "8xl": 6rem,
+    "9xl": 8rem
+  ),
+  $font-sizes
+);
+
+// line height
+$font-line-height: () !default;
+$font-line-height: map-deep-merge(
+  (
+    "xs": 1rem,
+    "sm": 1.25rem,
+    "base": 1.5rem,
+    "lg": 1.75rem,
+    "xl": 1.75rem,
+    "2xl": 2rem,
+    "3xl": 2.25rem,
+    "4xl": 2.5rem,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1
+  ),
+  $font-line-height
+);
+
+// gap utility class
+$gap: () !default;
+$gap: map-deep-merge(
+  (
+    "0": 0,
+    "1": 0.25rem,
+    "2": 0.5rem,
+    "3": 0.75rem,
+    "4": 1rem,
+    "5": 1.25rem,
+    "6":1.5rem,
+    "7": 1.75rem,
+    "8": 2rem,
+    "9": 2.25rem,
+    "10": 2.5rem,
+    "11": 2.75rem,
+    "12": 3rem,
+    "14": 3.5rem,
+    "16": 4rem,
+    "20": 5rem,
+    "24": 6rem,
+    "28": 7rem,
+    "32": 8rem,
+    "36": 9rem,
+    "40": 10rem,
+    "44": 11rem,
+    "48": 12rem,
+    "52": 13rem,
+    "56": 14rem,
+    "60": 15rem,
+    "64": 16rem,
+    "72": 18rem,
+    "80": 20rem,
+    "96": 24rem
+  ),
+  $gap
+);

src/admin/src/@core/scss/base/_vertical-nav.scss

@@ -0,0 +1,259 @@
+@use "@core/scss/base/placeholders" as *;
+@use "@core/scss/template/placeholders" as *;
+@use "@layouts/styles/mixins" as layoutsMixins;
+@use "@configured-variables" as variables;
+@use "@core/scss/base/mixins" as mixins;
+@use "vuetify/lib/styles/tools/states" as vuetifyStates;
+
+.layout-nav-type-vertical {
+  // 👉 Layout Vertical nav
+  .layout-vertical-nav {
+    $sl-layout-nav-type-vertical: &;
+
+    @extend %nav;
+
+    @at-root {
+      // ℹ️ Add styles for collapsed vertical nav
+      .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
+        @include mixins.elevation(6);
+      }
+    }
+
+    background-color: variables.$vertical-nav-background-color;
+
+    // 👉 Nav header
+    .nav-header {
+      overflow: hidden;
+      padding: variables.$vertical-nav-header-padding;
+      margin-inline: variables.$vertical-nav-header-inline-spacing;
+      min-block-size: variables.$vertical-nav-header-height;
+
+      // TEMPLATE: Check if we need to move this to master
+      .app-logo {
+        flex-shrink: 0;
+        transition: transform 0.25s ease-in-out;
+
+        @at-root {
+          // Move logo a bit to align center with the icons in vertical nav mini variant
+          .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}:not(.hovered) .nav-header .app-logo {
+            transform: translateX(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini);
+
+            @include layoutsMixins.rtl {
+              transform: translateX(-(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini));
+            }
+          }
+        }
+      }
+
+      .app-title {
+        margin-inline-start: variables.$vertical-nav-header-logo-title-spacing;
+      }
+
+      .header-action {
+        @extend %nav-header-action;
+      }
+    }
+
+    // 👉 Nav items shadow
+    .vertical-nav-items-shadow {
+      position: absolute;
+      z-index: 1;
+      background:
+        linear-gradient(
+          rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
+          rgba(#{variables.$vertical-nav-background-color-rgb}, 75%) 45%,
+          rgba(#{variables.$vertical-nav-background-color-rgb}, 20%) 80%,
+          transparent
+        );
+      block-size: 55px;
+      inline-size: 100%;
+      inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s ease-in-out;
+      will-change: opacity;
+
+      @include layoutsMixins.rtl {
+        transform: translateX(8px);
+      }
+    }
+
+    &.scrolled {
+      .vertical-nav-items-shadow {
+        opacity: 1;
+      }
+    }
+
+    // ℹ️ Setting z-index 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow;
+    .ps__rail-y {
+      z-index: 1;
+    }
+
+    // 👉 Nav section title
+    .nav-section-title {
+      @extend %vertical-nav-item;
+      @extend %vertical-nav-section-title;
+
+      margin-block-end: variables.$vertical-nav-section-title-mb;
+
+      &:not(:first-child) {
+        margin-block-start: variables.$vertical-nav-section-title-mt;
+      }
+
+      .placeholder-icon {
+        margin-inline: auto;
+      }
+    }
+
+    // Nav item badge
+    .nav-item-badge {
+      @extend %vertical-nav-item-badge;
+    }
+
+    // 👉 Nav group & Link
+    .nav-link,
+    .nav-group {
+      overflow: hidden;
+
+      > :first-child {
+        @extend %vertical-nav-item;
+        @extend %vertical-nav-item-interactive;
+      }
+
+      .nav-item-icon {
+        @extend %vertical-nav-items-icon;
+      }
+
+      &.disabled {
+        opacity: var(--v-disabled-opacity);
+        pointer-events: none;
+      }
+
+      a {
+        outline: none;
+      }
+    }
+
+    // 👉 Vertical nav link
+    .nav-link {
+      @extend %nav-link;
+
+      > .router-link-exact-active {
+        @extend %nav-link-active;
+      }
+
+      > a {
+        // Adds before psudo element to style hover state
+        @include mixins.before-pseudo;
+
+        // Adds vuetify states
+
+        &:not(.router-link-active, .router-link-exact-active) {
+          @include vuetifyStates.states($active: false);
+        }
+      }
+    }
+
+    // 👉 Vertical nav group
+    .nav-group {
+      // Reduce the size of icon if link/group is inside group
+      .nav-group,
+      .nav-link {
+        .nav-item-icon {
+          @extend %vertical-nav-items-nested-icon;
+        }
+      }
+
+      // Hide icons after 2nd level
+      & .nav-group {
+        .nav-link,
+        .nav-group {
+          .nav-item-icon {
+            @extend %vertical-nav-items-icon-after-2nd-level;
+          }
+        }
+      }
+
+      .nav-group-arrow {
+        flex-shrink: 0;
+        transform-origin: center;
+        transition: transform variables.$vertical-nav-nav-group-arrow-transition-duration variables.$vertical-nav-nav-group-arrow-transition-timing-function;
+        will-change: transform;
+      }
+
+      // Rotate arrow icon if group is opened
+      &.open {
+        > .nav-group-label .nav-group-arrow {
+          transform: rotateZ(90deg);
+        }
+      }
+
+      // Nav group label
+      > :first-child {
+        // Adds before psudo element to style hover state
+        @include mixins.before-pseudo;
+      }
+
+      &:not(.active,.open) > :first-child {
+        // Adds vuetify states
+        @include vuetifyStates.states($active: false);
+      }
+
+      // Active & open states for nav group label
+      &.active,
+      &.open {
+        > :first-child {
+          @extend %vertical-nav-group-open-active;
+        }
+      }
+    }
+  }
+}
+
+// SECTION: Transitions
+.vertical-nav-section-title-enter-active,
+.vertical-nav-section-title-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+}
+
+.vertical-nav-section-title-enter-from,
+.vertical-nav-section-title-leave-to {
+  opacity: 0;
+  transform: translateX(15px);
+
+  @include layoutsMixins.rtl {
+    transform: translateX(-15px);
+  }
+}
+
+.transition-slide-x-enter-active,
+.transition-slide-x-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
+}
+
+.transition-slide-x-enter-from,
+.transition-slide-x-leave-to {
+  opacity: 0;
+  transform: translateX(-15px);
+
+  @include layoutsMixins.rtl {
+    transform: translateX(15px);
+  }
+}
+
+.vertical-nav-app-title-enter-active,
+.vertical-nav-app-title-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
+}
+
+.vertical-nav-app-title-enter-from,
+.vertical-nav-app-title-leave-to {
+  opacity: 0;
+  transform: translateX(-15px);
+
+  @include layoutsMixins.rtl {
+    transform: translateX(15px);
+  }
+}
+
+// !SECTION

src/admin/src/@core/scss/base/libs/_perfect-scrollbar.scss

@@ -0,0 +1,35 @@
+$ps-size: 0.25rem;
+$ps-hover-size: 0.375rem;
+$ps-track-size: 0.5rem;
+
+.ps__thumb-y {
+  inline-size: $ps-size !important;
+  inset-inline-end: 0.0625rem;
+}
+
+.ps__thumb-y,
+.ps__thumb-x {
+  background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
+}
+
+.ps__thumb-x {
+  block-size: $ps-size !important;
+}
+
+.ps__rail-x {
+  background: transparent !important;
+  block-size: $ps-track-size;
+}
+
+.ps__rail-y {
+  background: transparent !important;
+  inline-size: $ps-track-size !important;
+  inset-inline-end: 0.125rem !important;
+  inset-inline-start: unset !important;
+}
+
+.ps__rail-y.ps--clicking .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y:hover > .ps__thumb-y {
+  inline-size: $ps-hover-size !important;
+}

src/admin/src/@core/scss/base/libs/vuetify/_index.scss

@@ -0,0 +1 @@
+@use "overrides";

src/admin/src/@core/scss/base/libs/vuetify/_overrides.scss

@@ -0,0 +1,257 @@
+@use "@core/scss/base/utils";
+@use "@configured-variables" as variables;
+
+// 👉 Application
+// ℹ️ We need accurate vh in mobile devices as well
+.v-application__wrap {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  min-height: 100dvh;
+}
+
+// 👉 Typography
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.text-h1,
+.text-h2,
+.text-h3,
+.text-h4,
+.text-h5,
+.text-h6,
+.text-button,
+.text-overline,
+.v-card-title {
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+
+body,
+.text-body-1,
+.text-body-2,
+.text-subtitle-1,
+.text-subtitle-2 {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+// 👉 Grid
+// Remove margin-bottom of v-input_details inside grid (validation error message)
+.v-row {
+  .v-col,
+  [class^="v-col-*"] {
+    .v-input__details {
+      margin-block-end: 0;
+    }
+  }
+}
+
+// 👉 Button
+@if variables.$vuetify-reduce-default-compact-button-icon-size {
+  .v-btn--density-compact.v-btn--size-default {
+    .v-btn__content > svg {
+      block-size: 22px;
+      font-size: 22px;
+      inline-size: 22px;
+    }
+  }
+}
+
+// 👉 Card
+// Removes padding-top for immediately placed v-card-text after itself
+.v-card-text {
+  & + & {
+    padding-block-start: 0 !important;
+  }
+}
+
+/*
+  👉 Checkbox & Radio Ripple
+
+  TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
+  We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
+  Tested with checkbox & switches
+*/
+.v-checkbox.v-input,
+.v-switch.v-input {
+  --v-input-control-height: auto;
+
+  flex: unset;
+}
+
+.v-radio-group {
+  .v-selection-control-group {
+    .v-radio:not(:last-child) {
+      margin-inline-end: 0.9rem;
+    }
+  }
+}
+
+/*
+  👉 Tabs
+  Disable tab transition
+
+  This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
+
+  This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
+*/
+.disable-tab-transition {
+  overflow: unset !important;
+
+  .v-window__container {
+    block-size: auto !important;
+  }
+
+  .v-window-item:not(.v-window-item--active) {
+    display: none !important;
+  }
+
+  .v-window__container .v-window-item {
+    transform: none !important;
+  }
+}
+
+// 👉 List
+.v-list {
+  // Set icons opacity to .87
+  .v-list-item__prepend > .v-icon,
+  .v-list-item__append > .v-icon {
+    opacity: var(--v-high-emphasis-opacity);
+  }
+}
+
+// 👉 Card list
+
+/*
+  ℹ️ Custom class
+
+  Remove list spacing inside card
+
+  This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
+*/
+.card-list {
+  --v-card-list-gap: 20px;
+
+  &.v-list {
+    padding-block: 0;
+  }
+
+  .v-list-item {
+    min-block-size: unset;
+    min-block-size: auto !important;
+    padding-block: 0 !important;
+    padding-inline: 0 !important;
+
+    > .v-ripple__container {
+      opacity: 0;
+    }
+
+    &:not(:last-child) {
+      padding-block-end: var(--v-card-list-gap) !important;
+    }
+  }
+
+  .v-list-item:hover,
+  .v-list-item:focus,
+  .v-list-item:active,
+  .v-list-item.active {
+    > .v-list-item__overlay {
+      opacity: 0 !important;
+    }
+  }
+}
+
+// 👉 Divider
+.v-divider {
+  color: rgb(var(--v-border-color));
+}
+
+.v-divider.v-divider--vertical {
+  block-size: inherit;
+}
+
+// 👉 DataTable
+.v-data-table {
+  /* stylelint-disable-next-line no-descending-specificity */
+  .v-checkbox-btn .v-selection-control__wrapper {
+    margin-inline-start: 0 !important;
+  }
+
+  .v-selection-control {
+    display: flex !important;
+  }
+
+  .v-pagination {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  }
+}
+
+// 👉 v-field
+.v-field:hover .v-field__outline {
+  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
+}
+
+// 👉 VLabel
+.v-label {
+  opacity: 1 !important;
+
+  &:not(.v-field-label--floating) {
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+  }
+}
+
+// 👉 Overlay
+.v-overlay__scrim,
+.v-navigation-drawer__scrim {
+  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
+  opacity: 1 !important;
+}
+
+// 👉 VMessages
+.v-messages {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  opacity: 1 !important;
+}
+
+// 👉 Alert close btn
+.v-alert__close {
+  .v-btn--icon .v-icon {
+    --v-icon-size-multiplier: 1.5;
+  }
+}
+
+// 👉 Badge icon alignment
+.v-badge__badge {
+  display: flex;
+  align-items: center;
+}
+
+// 👉 Btn focus outline style removed
+.v-btn:focus-visible::after {
+  opacity: 0 !important;
+}
+
+// .v-select chip spacing for slot
+.v-input:not(.v-select--chips) .v-select__selection {
+  .v-chip {
+    margin-block: 2px var(--select-chips-margin-bottom);
+  }
+}
+
+// 👉 VCard and VList subtitle color
+.v-card-subtitle,
+.v-list-item-subtitle {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+// 👉 placeholders
+.v-field__input {
+  @at-root {
+    & input::placeholder,
+    input#{&}::placeholder,
+    textarea#{&}::placeholder {
+      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
+      opacity: 1 !important;
+    }
+  }
+}

src/admin/src/@core/scss/base/libs/vuetify/_variables.scss

@@ -0,0 +1,64 @@
+@use "sass:map";
+
+/* 👉 Shadow opacities */
+$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
+$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
+$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
+
+/* 👉 Card transition properties */
+$card-transition-property-custom: box-shadow, opacity;
+
+@forward "vuetify/settings" with (
+  // 👉 General settings
+  $color-pack: false !default,
+
+  // 👉 Shadow opacity
+  $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
+  $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
+  $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
+
+    // 👉 Card
+  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $card-elevation: 6 !default,
+  $card-title-line-height: 1.6 !default,
+  $card-actions-min-height: unset !default,
+  $card-text-padding: 1.25rem !default,
+  $card-item-padding: 1.25rem !default,
+  $card-actions-padding: 0 12px 12px !default,
+  $card-transition-property: $card-transition-property-custom !default,
+  $card-subtitle-opacity: 1 !default,
+
+  // 👉 Expansion Panel
+  $expansion-panel-active-title-min-height: 48px !default,
+
+  // 👉 List
+  $list-item-icon-margin-end: 16px !default,
+  $list-item-icon-margin-start: 16px !default,
+  $list-item-subtitle-opacity: 1 !default,
+
+  // 👉 Navigation Drawer
+  $navigation-drawer-content-overflow-y: hidden !default,
+
+  // 👉 Tooltip
+  $tooltip-background-color: rgba(59, 55, 68, 0.9) !default,
+  $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
+  $tooltip-font-size: 0.75rem !default,
+
+  $button-icon-density: ("default": 2, "comfortable": 0, "compact": -1 ) !default,
+
+   // 👉 VTimeline
+  $timeline-dot-size: 34px !default,
+
+  // 👉 table
+  $table-transition-property:  height !default,
+
+  // 👉 VOverlay
+  $overlay-opacity: 1 !default,
+
+  // 👉 VContainer
+  $container-max-widths: (
+    "xl": 1440px,
+    "xxl": 1440px
+  ) !default,
+
+);

src/admin/src/@core/scss/base/placeholders/_default-layout-vertical-nav.scss

@@ -0,0 +1,45 @@
+@use "@configured-variables" as variables;
+@use "misc";
+@use "@core/scss/base/mixins";
+
+%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
+  background-color: rgb(var(--v-theme-surface));
+}
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  @include mixins.elevation(variables.$vertical-nav-navbar-elevation);
+
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.2rem;
+  }
+}
+
+%default-layout-vertical-nav-floating-navbar-overlay {
+  isolation: isolate;
+
+  &::after {
+    position: absolute;
+    z-index: -1;
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    /* stylelint-enable */
+    background:
+      linear-gradient(
+        180deg,
+        rgba(var(--v-theme-background), 70%) 44%,
+        rgba(var(--v-theme-background), 43%) 73%,
+        rgba(var(--v-theme-background), 0%)
+      );
+    background-repeat: repeat;
+    block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
+    content: "";
+    inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
+    inset-inline: 0 0;
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-mask: linear-gradient(black, black 18%, transparent 100%);
+    mask: linear-gradient(black, black 18%, transparent 100%);
+    /* stylelint-enable */
+  }
+}

src/admin/src/@core/scss/base/placeholders/_default-layout.scss

@@ -0,0 +1,3 @@
+%layout-navbar {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}

src/admin/src/@core/scss/base/placeholders/_index.scss

@@ -0,0 +1,5 @@
+@forward "vertical-nav";
+@forward "nav";
+@forward "default-layout";
+@forward "default-layout-vertical-nav";
+@forward "misc";

src/admin/src/@core/scss/base/placeholders/_misc.scss

@@ -0,0 +1,7 @@
+%blurry-bg {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  /* stylelint-enable */
+  background-color: rgb(var(--v-theme-surface), 0.9);
+}

src/admin/src/@core/scss/base/placeholders/_nav.scss

@@ -0,0 +1,33 @@
+@use "@core/scss/base/mixins";
+
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+  .nav-item-title {
+    letter-spacing: 0.15px;
+  }
+
+  .nav-section-title {
+    letter-spacing: 0.4px;
+  }
+}
+
+/*
+    Active nav link styles for horizontal & vertical nav
+
+    For horizontal nav it will be only applied to top level nav items
+    For vertical nav it will be only applied to nav links (not nav groups)
+*/
+%nav-link-active {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+
+  @include mixins.elevation(3);
+}
+
+%nav-link {
+  a {
+    color: inherit;
+  }
+}

src/admin/src/@core/scss/base/placeholders/_vertical-nav.scss

@@ -0,0 +1,80 @@
+@use "@core/scss/base/mixins";
+@use "@configured-variables" as variables;
+@use "vuetify/lib/styles/tools/states" as vuetifyStates;
+
+%nav-header-action {
+  font-size: 1.25rem;
+}
+
+// Nav items styles (including section title)
+%vertical-nav-item {
+  margin-block: 0;
+  margin-inline: variables.$vertical-nav-horizontal-spacing;
+  padding-block: 0;
+  padding-inline: variables.$vertical-nav-horizontal-padding;
+  white-space: nowrap;
+}
+
+// This is same as `%vertical-nav-item` except section title is excluded
+%vertical-nav-item-interactive {
+  border-radius: 0.4rem;
+  block-size: 2.75rem;
+
+  /*
+    ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
+    With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
+  */
+  margin-block-end: 0.375rem;
+}
+
+// Common styles for nav item icon styles
+// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
+%vertical-nav-items-icon {
+  flex-shrink: 0;
+  font-size: variables.$vertical-nav-items-icon-size;
+  margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
+}
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  /*
+    ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
+    (1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
+  */
+  $vertical-nav-items-nested-icon-margin-inline: calc((variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2);
+
+  font-size: variables.$vertical-nav-items-nested-icon-size;
+  margin-inline: $vertical-nav-items-nested-icon-margin-inline $vertical-nav-items-nested-icon-margin-inline + variables.$vertical-nav-items-icon-margin-inline-end;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+  visibility: hidden;
+}
+
+// Open & Active nav group styles
+%vertical-nav-group-open-active {
+  @include mixins.selected-states("&::before");
+}
+
+// Section title
+// ℹ️ Setting height will prevent jerking when text & icon is toggled
+%vertical-nav-section-title {
+  block-size: 1.5rem;
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+  display: inline-block;
+  border-radius: 1.5rem;
+  font-size: 0.8em;
+  font-weight: 500;
+  line-height: 1;
+  padding-block: 0.25em;
+  padding-inline: 0.55em;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+}

src/admin/src/@core/scss/template/_default-layout-w-vertical-nav.scss

@@ -0,0 +1,28 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/base/mixins";
+
+$header: ".layout-navbar";
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: ".layout-navbar .navbar-content-container";
+}
+
+.layout-wrapper.layout-nav-type-vertical {
+  // 👉 Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      // Sticky footer
+      @at-root {
+        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
+        .layout-footer-sticky#{$ele-layout-footer} {
+          .footer-content-container {
+            box-shadow: 0 -4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
+            padding-inline: 1.5rem;
+          }
+        }
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/_mixins.scss

@@ -0,0 +1,12 @@
+@use "vuetify/lib/styles/settings" as vuetify_settings;
+
+@mixin avatar-font-sizes($map: $avatar-sizes) {
+  @each $sizeName, $multiplier in vuetify_settings.$size-scales {
+    /* stylelint-disable-next-line scss/no-global-function-names */
+    $size: map-get($map, $sizeName);
+
+    &.v-avatar--size-#{$sizeName} {
+      font-size: #{$size}px;
+    }
+  }
+}

src/admin/src/@core/scss/template/_utilities.scss

@@ -0,0 +1,51 @@
+.v-timeline{
+  .v-timeline-item {
+    .app-timeline-title {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+      font-size: 15px;
+      font-weight: 500;
+      letter-spacing: 0.15px;
+      line-height: 1.375rem;
+    }
+
+    .app-timeline-meta {
+      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+      font-size: 13px;
+      letter-spacing: 0.4px;
+      line-height: 1.125rem;
+    }
+
+    .app-timeline-text {
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+      font-size: .9375rem;
+      line-height: 1.375rem;
+    }
+  }
+}
+
+.per-page-select {
+  margin-block: auto;
+
+  .v-field__input {
+    align-items: center;
+    padding: 2px;
+  }
+
+  .v-field__append-inner {
+    align-items: center;
+    padding: 0;
+
+    .v-icon {
+      margin-inline-start: 0 !important;
+    }
+  }
+}
+
+.leading-normal {
+  font-weight: 600;
+  letter-spacing: .0094rem;
+}
+
+.bg-custom-background{
+  background-color: rgb(var(--v-table-header-color)) !important;
+}

src/admin/src/@core/scss/template/_utils.scss

@@ -0,0 +1,41 @@
+@use "sass:string";
+
+/*
+  ℹ️ This function is helpful when we have multi dimensional value
+
+  Assume we have padding variable `$nav-padding-horizontal: 10px;`
+  With above variable let's say we use it in some style:
+  ```scss
+  .selector {
+    margin-left: $nav-padding-horizontal;
+  }
+  ```
+
+  Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
+  In this case above style will be invalid.
+
+  This function will extract the left most value from the variable value.
+
+  $nav-padding-horizontal: 10px; => 10px;
+  $nav-padding-horizontal: 10px 15px; => 10px;
+
+  This is safe:
+  ```scss
+  .selector {
+    margin-left: get-first-value($nav-padding-horizontal);
+  }
+  ```
+*/
+@function get-first-value($var) {
+  $start-at: string.index(#{$var}, " ");
+
+  @if $start-at {
+    @return string.slice(
+      #{$var},
+      0,
+      $start-at
+    );
+  } @else {
+    @return $var;
+  }
+}

src/admin/src/@core/scss/template/_variables.scss

@@ -0,0 +1,56 @@
+@use "sass:map";
+@use "utils";
+
+$vertical-nav-horizontal-padding-custom: 1.4375rem 1rem;
+
+// ℹ️ We created this SCSS var to extract the start padding
+// Docs: https://sass-lang.com/documentation/modules/string
+// $vertical-nav-horizontal-padding => 0 8px;
+// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
+//   string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
+// string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
+
+$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-custom) !default;
+$vertical-nav-items-icon-margin-inline-end: 0 !default;
+
+@forward "@core/scss/base/variables" with (
+  $layout-vertical-nav-collapsed-width: 68px !default,
+  // ℹ️ This is used to keep consistency between nav items and nav header left & right margin
+  // This is used by nav items & nav header
+  $vertical-nav-horizontal-spacing: 0 1rem !default,
+  $vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default,
+  // Vertical nav header padding
+  $vertical-nav-header-padding: 1.25rem 0 1.25rem $vertical-nav-horizontal-padding-start !default,
+  
+  // Vertical nav icons
+  $vertical-nav-items-icon-size: 1.375rem !default,
+  $vertical-nav-items-nested-icon-size: 0.75rem !default,
+
+
+  // Section title margin top (when its not first child)
+  $vertical-nav-section-title-mt: 1.25rem !default,
+
+  $layout-vertical-nav-footer-height: 54px !default,
+  
+  // Horizontal nav icons
+  $horizontal-nav-items-icon-size: 1.375rem !default,
+  $horizontal-nav-items-icon-margin-inline-end: 0.5rem !default,
+  
+  // 👉 Horizontal nav
+  $horizontal-nav-padding: 0.625rem !default,
+  $horizontal-nav-third-level-icon-size: 0.75rem !default,
+  
+  // Gap between top level horizontal nav items
+  $horizontal-nav-top-level-items-gap: 8px !default,
+
+  // ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
+  $horizontal-nav-popper-content-top: calc(0.625rem + 0.375rem - 0.25rem) !default,
+
+  $font-sizes: (
+    "sm": 0.8125rem,
+    "base": 0.9375rem,
+  ),
+  $font-line-height: (
+    "base": 1.375rem,
+  ),
+);

src/admin/src/@core/scss/template/_vertical-nav.scss

@@ -0,0 +1,51 @@
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+.layout-nav-type-vertical {
+  // 👉 Layout Vertical nav
+  .layout-vertical-nav {
+    .nav-items{
+      padding-block-start: .25rem;
+    }
+
+    // 👉 Vertical nav group
+    .nav-group {
+      .nav-group-arrow {
+        font-size: 1.375rem;
+      }
+    }
+
+    // 👉 Nav group & Link
+    .nav-link,
+    .nav-group {
+      // shadow cut issue fix
+      margin-block-end: -0.5rem;
+      padding-block-end: 0.5rem;
+
+      a {
+        outline: none;
+      }
+    }
+
+    // 👉 Nav section title
+    .nav-section-title {
+      .placeholder-icon {
+        transform: translateX(-3px);
+
+        @include layoutsMixins.rtl {
+          transform: translateX(3px);
+        }
+      }
+    }
+
+    // 👉 Nav header
+    .nav-header {
+      padding-block: 1.25rem;
+      padding-inline: 23px 0;
+    }
+  }
+}
+
+//  👉 Overlay 
+.layout-overlay{
+  touch-action: none;
+}

src/admin/src/@core/scss/template/index.scss

@@ -0,0 +1,10 @@
+@use "sass:map";
+@use "@core/scss/base";
+
+// layouts
+@use "vertical-nav";
+@use "default-layout-w-vertical-nav";
+
+// Utilities
+@use "utilities";
+

src/admin/src/@core/scss/template/libs/apex-chart.scss

@@ -0,0 +1,107 @@
+@use "@styles/variables/_vuetify.scss" as vuetify;
+@use "@layouts/styles/mixins" as layoutsMixins;
+@use "@core/scss/base/mixins";
+
+body .apexcharts-canvas {
+  &line[stroke="transparent"] {
+    display: "none";
+  }
+
+  .apexcharts-tooltip {
+    @include mixins.elevation(3);
+
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-surface));
+
+    .apexcharts-tooltip-title {
+      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+      background: rgb(var(--v-theme-surface));
+      font-weight: 600;
+    }
+
+    &.apexcharts-theme-light {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    }
+
+    &.apexcharts-theme-dark {
+      color: white;
+    }
+
+    .apexcharts-tooltip-series-group:first-of-type {
+      padding-block-end: 0;
+    }
+  }
+
+  .apexcharts-xaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-grey-50));
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+
+    &::after {
+      border-block-end-color: rgb(var(--v-theme-grey-50));
+    }
+
+    &::before {
+      border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-yaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-grey-50));
+
+    &::after {
+      border-inline-start-color: rgb(var(--v-theme-grey-50));
+    }
+
+    &::before {
+      border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+  }
+
+  .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
+    @include layoutsMixins.rtl {
+      text-anchor: start;
+    }
+  }
+
+  .apexcharts-text,
+  .apexcharts-tooltip-text,
+  .apexcharts-datalabel-label,
+  .apexcharts-datalabel,
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text,
+  .apexcharts-legend-text {
+    font-family: vuetify.$body-font-family !important;
+  }
+
+  .apexcharts-pie-label {
+    fill: white;
+    filter: none;
+  }
+
+  .apexcharts-marker {
+    box-shadow: none;
+  }
+
+  .apexcharts-tooltip-marker {
+    margin-inline-end: 0.625rem;
+
+    @include layoutsMixins.rtl {
+      margin-inline: 0 0.625rem !important;
+    }
+  }
+
+  .apexcharts-legend-marker {
+    margin-inline-end: 0.3875rem !important;
+
+    @include layoutsMixins.rtl {
+      margin-inline-end: 0.75rem !important;
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/_overrides.scss

@@ -0,0 +1,38 @@
+@use "@core/scss/base/utils";
+@use "@configured-variables" as variables;
+
+// 👉 Body
+// set body font size 15px
+body {
+  font-size: 15px !important;
+}
+
+// 👉 Typography
+.text-h1,
+.text-h2,
+.text-h3,
+.text-h4,
+.text-h5,
+.text-h6,
+.text-overline,
+.v-input {
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+
+.text-caption{
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
+}
+
+.v-card-subtitle,
+.text-subtitle-1,
+.text-subtitle-2 {
+  color: rgba(var(--v-theme-on-background), 0.55);
+}
+
+// 👉 Input placeholder alignment
+.v-input--density-compact{
+  input::placeholder { 
+    position: relative;
+    inset-block-start: 1px;
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/_variables.scss

@@ -0,0 +1,323 @@
+$font-family-custom: "Inter", sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
+  "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+/* stylelint-disable length-zero-no-unit */
+@forward "../../../base/libs/vuetify/variables" with (
+  $body-font-family: $font-family-custom !default,
+  $border-radius-root: 6px,
+
+  $rounded: (
+    "sm": 4px,
+    "shaped": 25px 0,
+    "lg":8px,
+  ) !default,
+
+  // 👉 Typography
+  $typography: (
+    "h1": (
+      "size": 2.875rem,
+      "weight": 500,
+      "line-height": 4.25rem,
+      "letter-spacing": normal,
+    ),
+    "h2": (
+      "size": 2.375rem,
+      "weight": 500,
+      "line-height": 3.5rem,
+      "letter-spacing": normal,
+    ),
+    "h3": (
+      "size": 1.75rem,
+      "weight": 500,
+      "line-height": 2.625rem,
+      "letter-spacing": normal,
+    ),
+    "h4": (
+      "size": 1.5rem,
+      "weight": 500,
+      "line-height": 2.375rem,
+      "letter-spacing": normal,
+    ),
+    "h5": (
+      "size": 1.125rem,
+      "weight": 500,
+      "line-height": 1.75rem,
+      "letter-spacing": normal,
+    ),
+    "h6": (
+      "size": 0.9375rem,
+      "line-height": 1.375rem,
+      "letter-spacing": normal,
+    ),
+    "subtitle-1": (
+      "size": 0.9375rem,
+      "line-height": 1.375rem,
+      "letter-spacing": normal,
+    ),
+    "subtitle-2": (
+      "size": 0.8125rem,
+      "line-height": 1.25rem,
+      "letter-spacing": normal,
+    ),
+    "body-1": (
+      "size": 0.9375rem,
+      "line-height": 1.375rem,
+      "letter-spacing": normal,
+    ),
+    "body-2": (
+      "size": 0.8125rem,
+      "line-height": 1.25rem,
+      "letter-spacing": normal,
+    ),
+    "caption": (
+      "size": 0.8125rem,
+      "line-height": 1.125rem,
+      "letter-spacing": 0.025rem,
+    ),
+    "overline": (
+      "weight": 400,
+      "line-height": 0.875rem,
+      "letter-spacing": 0.05rem,
+    ),
+    "button": (
+      "size": 0.9375rem,
+      "weight": 500,
+      "letter-spacing": normal,
+      "font-family": $font-family-custom,
+      "text-transform": capitalize,
+    ),
+  )!default,
+
+  //  👉 Shadows
+  $shadow-key-umbra: (
+    0: (0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1)),
+    1: (0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12)),
+    2: (0 2px 4px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity))),
+    3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)),
+    4: (0 3px 6px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity))),
+    5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)),
+    6: (0 4px 10px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity))),
+    7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)),
+    8: (0 6px 16px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity))),
+    9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)),
+    10: (0 8px 28px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity))),
+    11: (0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2)),
+    12: (0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22)),
+    13: (0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22)),
+    14: (0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24)),
+    15: (0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24)),
+    16: (0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26)),
+    17: (0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26)),
+    18: (0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28)),
+    19: (0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28)),
+    20: (0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3)),
+    21: (0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32)),
+    22: (0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32)),
+    23: (0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34)),
+    24: (0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34))
+  ) !default,
+
+  $shadow-key-penumbra: (
+    0: (0 0 transparent),
+    1: (0 0 transparent),
+    2: (0 0 transparent),
+    3: (0 0 transparent),
+    4: (0 0 transparent),
+    5: (0 0 transparent),
+    6: (0 0 transparent),
+    7: (0 0 transparent),
+    8: (0 0 transparent),
+    9: (0 0 transparent),
+    10: (0 0 transparent),
+    11: (0 0 transparent),
+    12: (0 0 transparent),
+    13: (0 0 transparent),
+    14: (0 0 transparent),
+    15: (0 0 transparent),
+    16: (0 0 transparent),
+    17: (0 0 transparent),
+    18: (0 0 transparent),
+    19: (0 0 transparent),
+    20: (0 0 transparent),
+    21: (0 0 transparent),
+    22: (0 0 transparent),
+    23: (0 0 transparent),
+    24: (0 0 transparent),
+  ) !default,
+
+  $shadow-key-ambient: (
+    0: (0 0 transparent),
+    1: (0 0 transparent),
+    2: (0 0 transparent),
+    3: (0 0 transparent),
+    4: (0 0 transparent),
+    5: (0 0 transparent),
+    6: (0 0 transparent),
+    7: (0 0 transparent),
+    8: (0 0 transparent),
+    9: (0 0 transparent),
+    10: (0 0 transparent),
+    11: (0 0 transparent),
+    12: (0 0 transparent),
+    13: (0 0 transparent),
+    14: (0 0 transparent),
+    15: (0 0 transparent),
+    16: (0 0 transparent),
+    17: (0 0 transparent),
+    18: (0 0 transparent),
+    19: (0 0 transparent),
+    20: (0 0 transparent),
+    21: (0 0 transparent),
+    22: (0 0 transparent),
+    23: (0 0 transparent),
+    24: (0 0 transparent),
+  ) !default,
+
+  // 👉 Avatar
+  $avatar-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default,
+
+  // 👉 Alert
+  $alert-title-font-size: 1.125rem !default,
+  $alert-text-line-height: 1.625rem !default,
+
+  // 👉 Autocomplete
+  $autocomplete-content-elevation: 8 !default,
+  $combobox-content-elevation: 8 !default,
+  $select-content-elevation: 8 !default,
+  
+  // 👉 Badge
+  $badge-height: 1.375rem !default,
+  $badge-min-width: 1.375rem !default,
+  $badge-dot-height: 8px !default,
+  $badge-dot-width: 8px !default,
+  $badge-border-radius: 50px !default,
+  $badge-font-size: 0.8125rem !default,
+
+  // 👉 Buttons
+  $button-height: 38px !default,
+  $button-padding-ratio: 2.15 !default,
+  $button-margin-start: 0 !default,
+  $button-disabled-opacity: .45 !default,
+  $button-elevation: ('default': 2, 'hover': 2, 'active': 0) !default,
+  $button-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default,
+  $button-line-height: 1.375rem !default,
+  $button-margin-end: 0.375rem !default,
+  $button-card-actions-padding: 0 18px !default,
+  
+  // 👉 Chip
+  $chip-font-size: 13px !default,
+  $chip-close-size: 20px !default,
+  $chip-font-weight: 500 !default,
+
+  // 👉 Cards
+  $card-actions-padding: 0 6px 6px !default,
+  $card-title-font-size: 1.125rem !default,
+  $card-title-line-height: 1.75rem !default,
+  $card-text-font-size: 0.9375rem !default,
+  $card-text-line-height: 1.375rem !default,
+  $card-subtitle-font-size: 0.9375rem !default,
+  $card-subtitle-line-height: 1.375rem !default,
+  $card-subtitle-font-weight: 400 !default,
+  $card-subtitle-header-padding: 0 !default,
+
+  // 👉 Dialog 
+  $dialog-elevation: 10 !default,
+  $dialog-card-header-padding: 20px !default,
+  $dialog-card-text-padding: 0 20px 20px !default,
+
+  // 👉 Expansion Panel
+  $expansion-panel-active-margin: 0.5rem !default,
+  $expansion-panel-text-padding: 0 20px 20px !default,
+  $expansion-panel-title-padding: 12px 20px !default,
+  $expansion-panel-title-min-height: 46px !default,
+  $expansion-panel-active-title-min-height: 46px !default,
+
+  // 👉 Field
+  $field-outline-opacity: 0.22 !default,
+  $field-control-affixed-padding: 16px !default,
+  $field-control-affixed-inner-padding: 10px !default,
+  $field-font-size: 15px !default,
+
+  // 👉 Label
+  $label-font-size: 0.9375rem !default,
+  $label-letter-spacing: normal !default,
+  
+  // 👉 List
+  $list-item-one-line-min-height: 38px !default,
+  $list-subheader-min-height: 38px !default,
+  $list-item-padding: 8px 20px !default,
+  $list-subheader-font-weight: 500 !default,
+  $list-item-icon-margin-start: 12px !default,
+  $list-item-min-height: 38px !default,
+  $list-item-nav-title-font-size: 0.9375rem !default,
+  $list-item-nav-title-font-weight: 400 !default,
+  $list-item-nav-subtitle-font-size: 0.8125rem !default,
+  $list-item-subtitle-line-height: 1.25rem !default,
+
+  // 👉 label
+  $field-label-floating-scale: 0.8125 !default,
+  
+  // 👉 Snackbar
+  $snackbar-background: rgb(var(--v-tooltip-background)) !default,
+  $snackbar-color: rgb(var(--v-theme-surface)) !default,
+  $snackbar-content-padding: 12px 16px !default,
+  $snackbar-wrapper-padding: 0 !default,
+  $snackbar-wrapper-min-height: 44px !default,
+  $snackbar-elevation: 2 !default,
+  $snackbar-btn-padding: 0 10px !default,
+  $snackbar-action-margin: 16px !default,
+
+  // 👉 Slider
+  $slider-thumb-hover-opacity: var(--v-activated-opacity) !default,
+
+  // 👉 Switch
+  $switch-inset-track-width: 1.875rem !default,
+  $switch-inset-track-height: 1.125rem !default,
+  $switch-inset-thumb-height: 0.875rem !default,
+  $switch-inset-thumb-width: 0.875rem !default,
+  $switch-inset-thumb-off-height: 0.875rem !default,
+  $switch-track-opacity: 1 !default,
+  $switch-track-background: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !default,
+
+  // 👉 Tooltip
+  $tooltip-background-color: rgb(var(--v-tooltip-background)) !default,
+  $tooltip-text-color: rgb(var(--v-theme-surface)) !default,
+  $tooltip-border-radius: 0.25rem !default,
+  $tooltip-font-size: 0.8125rem !default,
+  $tooltip-padding: 4px 12px !default,
+  $tooltip-line-height: 1.25rem !default,
+  
+  // 👉 VPagination
+  $pagination-item-margin: 0.1875rem !default,
+
+  // 👉 Tabs
+  $tabs-height: 38px !default,
+  $tab-min-width: 60px !default,
+
+  // 👉 Timeline
+  $timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default,
+  $timeline-divider-line-thickness: 1.5px !default,
+  $timeline-item-padding: 16px !default,
+
+  // 👉 Slider
+  $slider-track-active-size-offset: 0px !default,
+  $slider-thumb-label-border-radius: 6px !default,
+  $slider-thumb-label-height: 28px !default,
+  $slider-thumb-label-padding: 4px 10px !default,
+
+  // 👉 Table
+  $table-row-height: 50px !default,
+  $table-header-font-weight: 500 !default,
+  $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $table-font-size: 15px !default,
+  $table-column-padding: 0 20px !default,
+
+  // 👉 Radio
+  $radio-group-label-selection-group-padding-inline: 0 !default,
+
+  // 👉 navigation drawer
+  $navigation-drawer-temporary-elevation: 8 !default,
+  $navigation-drawer-transition-duration: 0.4s !default,
+
+  // 👉 Messages
+  $messages-font-size: 13px !default,
+);

src/admin/src/@core/scss/template/libs/vuetify/components/_alert.scss

@@ -0,0 +1,103 @@
+@use "@core/scss/base/mixins";
+@use "@configured-variables" as variables;
+
+/* 👉 Alert
+/ ℹ️ custom icon styling */
+
+// 👉 Alert
+.v-alert {
+  .v-alert__content {
+    font-size: 0.9375rem;
+    font-weight: 400;
+    line-height: 1.375rem;
+
+    .v-alert-title {
+      margin-block-end: 0.25rem;
+    }
+  }
+
+  &:not(.v-alert--prominent) .v-alert__prepend {
+    border-radius: 0.375rem;
+    block-size: 1.875rem;
+    inline-size: 1.875rem;
+
+    .v-icon {
+      margin: auto;
+      block-size: 1.375rem !important;
+      font-size: 1.375rem !important;
+      inline-size: 1.375rem !important;
+    }
+  }
+
+  &:not(.v-alert--prominent) {
+    &.v-alert--variant-flat,
+    &.v-alert--variant-elevated {
+      .v-alert__prepend {
+        background-color: #fff;
+
+        @include mixins.elevation(2);
+      }
+    }
+
+    &.v-alert--variant-tonal {
+      .v-alert__prepend {
+        z-index: 1;
+      }
+    }
+  }
+
+  .v-alert__close {
+    .v-btn--icon {
+      --v-btn-height: 34px;
+
+      .v-btn__content {
+        padding: 0.375rem;
+
+        .v-icon {
+          block-size: 1.25rem;
+          font-size: 1.25rem;
+          inline-size: 1.25rem;
+        }
+      }
+    }
+  }
+}
+
+@each $color-name in variables.$theme-colors-name {
+  .v-alert {
+    &:not(.v-alert--prominent) {
+      &.bg-#{$color-name},
+      &.text-#{$color-name} {
+        .v-alert__prepend .v-icon {
+          color: rgb(var(--v-theme-#{$color-name})) !important;
+        }
+      }
+
+      &.v-alert--variant-tonal {
+        &.text-#{$color-name},
+        &.bg-#{$color-name} {
+          .v-alert__underlay {
+            background: rgb(var(--v-theme-#{$color-name})) !important;
+          }
+
+          .v-alert__prepend {
+            background-color: rgb(var(--v-theme-#{$color-name}));
+
+            .v-icon {
+              color: #fff !important;
+            }
+          }
+        }
+      }
+
+      &.v-alert--variant-outlined {
+        &.text-#{$color-name},
+        &.bg-#{$color-name} {
+          .v-alert__prepend {
+            background-color: rgba(var(--v-theme-#{$color-name}), 0.16);
+          }
+        }
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_avatar.scss

@@ -0,0 +1,28 @@
+@use "@core/scss/base/mixins";
+
+// 👉 Avatar
+body {
+  .v-avatar {
+    font-size: 0.9375rem;
+
+    .v-icon {
+      block-size: 1.5rem;
+      font-size: 1.5rem;
+      inline-size: 1.5rem;
+    }
+
+    &.v-avatar--variant-tonal:not([class*="text-"]) {
+      .v-avatar__underlay {
+        --v-activated-opacity: 0.08;
+      }
+    }
+  }
+
+  .v-avatar-group {
+    > * {
+      &:hover {
+        @include mixins.elevation(6);
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_badge.scss

@@ -0,0 +1,35 @@
+@use "@configured-variables" as variables;
+
+// 👉 Badge
+.v-badge {
+  &.v-badge--inline:not(.v-badge--dot) {
+    .v-badge__wrapper {
+      .v-badge__badge {
+        padding-block: 4px;
+        padding-inline: 8px;
+      }
+    }
+  }
+
+  &.v-badge--tonal {
+    @each $color-name in variables.$theme-colors-name {
+      .v-badge__wrapper {
+        .v-badge__badge.bg-#{$color-name} {
+          background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
+          color: rgb(var(--v-theme-#{$color-name})) !important;
+        }
+      }
+    }
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  &.v-badge--bordered.v-badge--dot .v-badge__badge {
+    border-radius: 10px;
+    block-size: 12px;
+    inline-size: 12px;
+
+    &::after {
+      border-width: 2px;
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_button.scss

@@ -0,0 +1,271 @@
+/* stylelint-disable no-descending-specificity */
+@use "sass:list";
+@use "sass:map";
+@use "@configured-variables" as variables;
+
+/* 👉 Button
+ Above map but opacity values as key and variant as value */
+
+body {
+  .v-btn {
+    &:not(.v-btn--block) {
+      min-inline-size: auto;
+    }
+
+    &--variant-elevated,
+    &--variant-flat {
+      &.v-btn--disabled {
+        .v-btn__overlay {
+          opacity: 0.45;
+        }
+      }
+    }
+
+    // Default (elevated) button
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    &--variant-elevated,
+    &--variant-flat {
+      // We want darker background on hover instead of light
+
+      &:hover {
+        .v-btn__overlay {
+          opacity: 0;
+        }
+      }
+
+      &:not(.v-btn--loading, .v-btn--disabled) {
+        @each $color-name in variables.$theme-colors-name {
+          &.bg-#{$color-name} {
+            &:hover,
+            &:active,
+            &:focus {
+              background-color: rgb(var(--v-theme-#{$color-name}-darken-1)) !important;
+            }
+          }
+        }
+      }
+    }
+
+    &--variant-elevated {
+      &:active {
+        box-shadow: none;
+      }
+    }
+
+    // Outlined variant
+    &--variant-outlined,
+    &--variant-text {
+      .v-btn__overlay {
+        --v-hover-opacity: 0.08;
+      }
+
+      &:active {
+        .v-btn__overlay {
+          opacity: var(--v-hover-opacity);
+        }
+      }
+
+      &:focus {
+        .v-btn__overlay {
+          opacity: var(--v-hover-opacity);
+        }
+      }
+    }
+
+    // Tonal variant
+    &--variant-tonal {
+      &:hover {
+        .v-btn__underlay {
+          opacity: 0;
+        }
+
+        .v-btn__overlay {
+          --v-hover-opacity: 0.24;
+        }
+      }
+
+      &:active {
+        .v-btn__overlay {
+          --v-hover-opacity: 0.24;
+
+          opacity: var(--v-hover-opacity);
+        }
+
+        .v-btn__underlay {
+          opacity: 0;
+        }
+      }
+
+      &:focus {
+        .v-btn__overlay {
+          --v-hover-opacity: 0.24;
+
+          opacity: var(--v-hover-opacity);
+        }
+
+        .v-btn__underlay {
+          opacity: 0;
+        }
+      }
+    }
+
+    &--icon.v-btn--density-default {
+      block-size: var(--v-btn-height);
+      inline-size: var(--v-btn-height);
+      padding-inline: 6px;
+
+      &.v-btn--size-default {
+        .v-icon {
+          --v-icon-size-multiplier: 1 !important;
+        }
+      }
+
+      &.v-btn--size-small {
+        .v-icon {
+          block-size: 20px;
+          font-size: 20px;
+          inline-size: 20px;
+        }
+      }
+
+      &.v-btn--size-large {
+        .v-icon {
+          block-size: 28px;
+          font-size: 28px;
+          inline-size: 28px;
+        }
+      }
+    }
+
+    &:not(.v-btn--icon) .v-icon {
+      --v-icon-size-multiplier: 0.7115;
+
+      inline-size: auto;
+    }
+
+    &--variant-text,
+    &--variant-plain {
+      &:not(.v-btn--icon) {
+        padding-inline: 14px;
+      }
+    }
+
+    // Button Size
+    &--size-x-small {
+      --v-btn-height: 28px;
+      --v-btn-size: 11px;
+
+      &:not(.v-btn--icon) {
+        border-radius: 0.125rem;
+      }
+
+      line-height: 14px;
+      padding-block: 0;
+      padding-inline: 10px;
+    }
+
+    &--size-small {
+      --v-btn-height: 34px;
+      --v-btn-size: 13px;
+
+      &:not(.v-btn--icon) {
+        border-radius: 0.25rem;
+      }
+
+      line-height: 18px;
+      padding-block: 0;
+      padding-inline: 14px;
+
+      .v-icon {
+        --v-icon-size-multiplier: 0.718;
+      }
+    }
+
+    &--size-large {
+      --v-btn-height: 42px;
+      --v-btn-size: 17px;
+
+      &:not(.v-btn--icon) {
+        border-radius: 0.5rem;
+      }
+
+      line-height: 26px;
+      padding-block: 0;
+      padding-inline: 22px;
+    }
+
+    &--size-x-large {
+      --v-btn-height: 48px;
+      --v-btn-size: 19px;
+
+      &:not(.v-btn--icon) {
+        border-radius: 0.625rem;
+      }
+
+      line-height: 30px;
+      padding-block: 0;
+      padding-inline: 26px;
+    }
+
+    // Toggle Button
+    &-toggle {
+      .v-btn {
+        border-radius: 0.375rem;
+        block-size: 52px !important;
+        border-inline-end: none;
+        inline-size: 52px !important;
+
+        &.v-btn--density-comfortable {
+          block-size: 44px !important;
+          inline-size: 44px !important;
+        }
+
+        &.v-btn--density-compact {
+          block-size: 36px !important;
+          inline-size: 36px !important;
+        }
+
+        .v-icon {
+          color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+          font-size: 24px;
+        }
+
+        &--active {
+          .v-icon {
+            color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+          }
+        }
+      }
+
+      &.v-btn-group {
+        align-items: center;
+        padding: 7px;
+        border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+        block-size: 66px;
+
+        .v-btn.v-btn--active {
+          .v-btn__overlay {
+            --v-activated-opacity: 0.08;
+          }
+        }
+
+        &.v-btn-group--density-compact {
+          block-size: 50px;
+        }
+
+        &.v-btn-group--density-comfortable {
+          block-size: 58px;
+        }
+      }
+    }
+  }
+
+  // 👉 Btn group
+  .v-btn-group {
+    border: none;
+
+    &.v-btn-group--divided .v-btn:not(:last-child) {
+      border-inline-end-color: unset;
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_cards.scss

@@ -0,0 +1 @@
+// 👉 Card

src/admin/src/@core/scss/template/libs/vuetify/components/_checkbox.scss

@@ -0,0 +1,42 @@
+@use "sass:list";
+@use "sass:map";
+@use "@styles/variables/vuetify";
+@use "@configured-variables" as variables;
+
+// 👉 checkbox box shadow
+.v-checkbox-btn {
+  &.v-selection-control--dirty {
+    .v-selection-control__input {
+      .v-icon.custom-checkbox-checked,
+      .v-icon.custom-checkbox-indeterminate {
+        // ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG;Usingfilter
+        filter: drop-shadow(rgba(var(--v-shadow-key-umbra-color), 16%) 0 2px 4px);
+      }
+    }
+  }
+
+  &.v-selection-control {
+    .v-label {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    }
+
+    .v-selection-control__input {
+      svg {
+        font-size: 1.5rem;
+      }
+    }
+  }
+
+  &:not(.v-selection-control--dirty) {
+    .v-selection-control__input {
+      > .v-icon {
+        color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+        opacity: 1;
+      }
+
+      > .custom-checkbox-indeterminate {
+        color: rgb(var(--v-theme-primary));
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_chip.scss

@@ -0,0 +1,99 @@
+// 👉 Chip
+.v-chip {
+  line-height: 1.25rem !important;
+
+  &:not(.v-chip--variant-elevated) {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+
+  .v-chip__close {
+    margin-inline: 4px -8px !important;
+
+    .v-icon {
+      opacity: 0.7;
+    }
+  }
+
+  &:not([class*="text-"]) {
+    --v-activated-opacity: 0.08;
+  }
+
+  &.v-chip--size-small {
+    --v-chip-height: 24px !important;
+
+    font-size: 13px !important;
+    padding-block: 0 !important;
+    padding-inline: 12px !important;
+
+    .v-chip__prepend {
+      .v-icon--start {
+        font-size: 1rem;
+        margin-inline: -8px 4px;
+      }
+
+      .v-avatar {
+        --v-avatar-height: 16px;
+      }
+
+      .v-avatar--start {
+        margin-inline: -8px 4px;
+      }
+    }
+
+    .v-chip__append {
+      .v-icon--end {
+        font-size: 1rem;
+        margin-inline: 4px -8px;
+      }
+
+      .v-avatar {
+        --v-avatar-height: 16px;
+      }
+
+      .v-avatar--end {
+        margin-inline: 4px -8px;
+      }
+    }
+
+    .v-chip__close {
+      font-size: 16px;
+      max-block-size: 16px;
+      max-inline-size: 16px;
+    }
+  }
+
+  &.v-chip--size-default {
+    padding-block: 0 !important;
+    padding-inline: 16px !important;
+
+    .v-chip__prepend {
+      .v-icon--start {
+        font-size: 1.25rem;
+        margin-inline: -8px 4px;
+      }
+
+      .v-avatar {
+        --v-avatar-height: 20px;
+      }
+
+      .v-avatar--start {
+        margin-inline: -8px 4px;
+      }
+    }
+
+    .v-chip__append {
+      .v-icon--end {
+        font-size: 1.25rem;
+        margin-inline: 4px -8px;
+      }
+
+      .v-avatar {
+        --v-avatar-height: 20px;
+      }
+
+      .v-avatar--end {
+        margin-inline: 4px -8px;
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_dialog.scss

@@ -0,0 +1,12 @@
+// 👉 Dialog
+
+body {
+  .v-dialog {
+    font-size: 0.9375rem;
+    line-height: 1.375rem;
+
+    .v-dialog-close-btn {
+      color: rgb(var(--v-theme-secondary)) !important;
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_expansion-panels.scss

@@ -0,0 +1,47 @@
+@use "@core/scss/base/mixins";
+
+// 👉 Expansion Panel
+.v-expansion-panels {
+  .v-expansion-panel {
+    .v-expansion-panel-title {
+      font-weight: 500;
+
+      &--active {
+        .v-expansion-panel-title__overlay,
+        &:hover .v-expansion-panel-title__overlay {
+          opacity: 0 !important;
+        }
+      }
+
+      .v-expansion-panel-title__icon {
+        .v-icon {
+          block-size: 1.25rem;
+          font-size: 1.25rem;
+          inline-size: 1.25rem;
+        }
+      }
+
+      &:hover {
+        .v-expansion-panel-title__overlay {
+          opacity: 0 !important;
+        }
+      }
+    }
+
+    .v-expansion-panel-text {
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+      font-size: 15px;
+      line-height: 1.375rem;
+    }
+  }
+
+  &:not(.v-expansion-panels--variant-accordion) {
+    .v-expansion-panel {
+      &.v-expansion-panel--active {
+        .v-expansion-panel__shadow {
+          @include mixins.elevation(6);
+        }
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_field.scss

@@ -0,0 +1,58 @@
+@use "@configured-variables" as variables;
+@use "sass:map";
+@use "@styles/variables/vuetify";
+@use "@core/scss/base/mixins";
+@use "@core/scss/base/utils";
+
+// 👉 VField
+// Override Vuetify's default outline color for text fields to match the theme
+// ℹ️ We cannot override directly border color because it does not work with dirty or focus state
+.v-field__outline {
+  color: rgba(var(--v-theme-on-surface));
+
+  &:not([class*="text-"]) .v-label {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  }
+}
+
+// override input height on comfortable and compact density
+.v-text-field,
+.v-autocomplete,
+.v-combobox,
+.v-file-input,
+.v-select {
+  &.v-input.v-input--density-default:not(.v-textarea) .v-field__input {
+    min-block-size: 56px;
+  }
+
+  &.v-input.v-input--density-comfortable:not(.v-textarea) .v-field__input {
+    min-block-size: 48px;
+  }
+
+  &.v-input.v-input--density-compact:not(.v-textarea) .v-field__input {
+    min-block-size: 40px;
+  }
+}
+
+.v-field.v-field--focused .v-field__outline,
+.v-input.v-input--error .v-field__outline {
+  --v-field-border-opacity: 1 !important;
+}
+
+// hover state outline color
+@media (hover: hover) {
+  .v-field:not(.v-field--focused, .v-field--error):hover .v-field__outline {
+    --v-field-border-opacity: 0.6 !important;
+  }
+}
+
+.v-field__prepend-inner,
+.v-field__append-inner,
+.v-field__clearable,
+.v-input__prepend,
+.v-input__append {
+  > .v-icon {
+    font-size: 20px;
+    opacity: var(--v-high-emphasis-opacity) !important;
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_list.scss

@@ -0,0 +1,22 @@
+// 👉 VList
+
+.v-list {
+  // .v-icon {
+  //   font-size: 1.375rem;font-sizefont-size
+  // }
+
+  .v-list-item {
+    &.v-list-item--active:not(.v-list-group__header) {
+      .v-list-item__content,
+      .v-list-item__prepend {
+        * {
+          color: rgb(var(--v-theme-primary));
+        }
+      }
+
+      .v-list-item__overlay {
+        background: rgb(var(--v-theme-primary));
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_menu.scss

@@ -0,0 +1,6 @@
+// 👉 VMenu
+.v-menu {
+  .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
+    padding-inline: 16px;
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_otp-input.scss

@@ -0,0 +1,18 @@
+// 👉 Otp input
+
+.v-otp-input {
+  justify-content: unset !important;
+
+  .v-otp-input__content {
+    max-inline-size: 100%;
+
+    .v-field.v-field--focused {
+      .v-field__outline {
+        .v-field__outline__start,
+        .v-field__outline__end {
+          border-color: rgb(var(--v-theme-primary)) !important;
+        }
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_pagination.scss

@@ -0,0 +1,172 @@
+/* stylelint-disable no-descending-specificity */
+@use "@configured-variables" as variables;
+@use "@core/scss/base/mixins";
+
+// 👉 VPagination
+
+.v-pagination {
+  .v-pagination__list {
+    .v-pagination__next,
+    .v-pagination__last,
+    .v-pagination__first,
+    .v-pagination__prev {
+      .v-btn {
+        &.v-btn--icon {
+          &.v-btn--size-default {
+            .v-icon {
+              block-size: 1.375rem;
+              font-size: 1.375rem;
+              inline-size: 1.375rem;
+            }
+          }
+
+          &.v-btn--size-small {
+            .v-icon {
+              block-size: 1.25rem;
+              font-size: 1.25rem;
+              inline-size: 1.25rem;
+            }
+          }
+
+          &.v-btn--size-large {
+            .v-icon {
+              block-size: 1.5rem;
+              font-size: 1.5rem;
+              inline-size: 1.5rem;
+            }
+          }
+        }
+      }
+    }
+
+    // Common styles for buttons
+    .v-pagination__item,
+    .v-pagination__next,
+    .v-pagination__last,
+    .v-pagination__first,
+    .v-pagination__prev {
+      .v-btn {
+        color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+        font-weight: 400;
+        line-height: 1;
+        transform: none;
+
+        &--size-default {
+          --v-btn-size: 13px;
+        }
+
+        &--size-large {
+          --v-btn-size: 15px;
+        }
+
+        &.v-btn--disabled {
+          opacity: 0.4;
+        }
+
+        &--variant-tonal {
+          .v-btn__underlay {
+            --v-activated-opacity: 0.08;
+          }
+
+          &:hover {
+            .v-btn__underlay {
+              --v-activated-opacity: 0;
+            }
+
+            .v-btn__overlay {
+              --v-hover-opacity: 0.16;
+            }
+          }
+        }
+
+        @each $color-name in variables.$theme-colors-name {
+          &--variant-tonal.text-#{$color-name} {
+            .v-btn__underlay {
+              background: rgb(var(--v-theme-on-surface));
+            }
+
+            .v-btn__content {
+              color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+            }
+
+            &:hover {
+              .v-btn__content {
+                color: rgb(var(--v-theme-#{$color-name}));
+              }
+            }
+          }
+        }
+
+        &--variant-outlined {
+          &:hover {
+            .v-btn__overlay {
+              --v-hover-opacity: 0.06;
+            }
+          }
+        }
+      }
+    }
+
+    .v-pagination__item--is-active {
+      .v-btn {
+        &:not([class*="text-"]) {
+          color: rgb(var(--v-theme-primary));
+        }
+      }
+
+      .v-btn.v-btn--variant-tonal {
+        .v-btn__overlay {
+          --v-hover-opacity: 0.16;
+
+          background: rgb(var(--v-theme-primary));
+          opacity: var(--v-hover-opacity);
+        }
+
+        .v-btn__content {
+          color: rgb(var(--v-theme-primary));
+        }
+
+        .v-btn__underlay {
+          opacity: 0;
+        }
+
+        &:hover {
+          .v-btn__overlay {
+            --v-hover-opacity: 0.24;
+          }
+        }
+      }
+
+      @each $color-name in variables.$theme-colors-name {
+        .v-btn.v-btn--variant-tonal.text-#{$color-name} {
+          @include mixins.elevation(2);
+
+          .v-btn__overlay {
+            background: rgb(var(--v-theme-#{$color-name}));
+            opacity: 1;
+          }
+
+          .v-btn__content {
+            z-index: 1;
+            color: #fff;
+          }
+        }
+      }
+
+      .v-btn.v-btn--variant-outlined {
+        border-color: rgb(var(--v-theme-primary));
+
+        .v-btn__content {
+          color: rgb(var(--v-theme-primary));
+        }
+
+        .v-btn__overlay {
+          --v-hover-opacity: 0.16;
+
+          background: rgb(var(--v-theme-primary));
+          opacity: var(--v-hover-opacity);
+        }
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_progress.scss

@@ -0,0 +1,3 @@
+@use "@configured-variables" as variables;
+
+// 👉 Progress

src/admin/src/@core/scss/template/libs/vuetify/components/_radio.scss

@@ -0,0 +1,47 @@
+@use "@core/scss/base/mixins";
+@use "@configured-variables" as variables;
+
+// 👉 Radio
+.v-radio,
+.v-radio-btn {
+  &.v-selection-control--dirty {
+    .v-selection-control__input {
+      .custom-radio-checked {
+        filter: drop-shadow(rgba(var(--v-shadow-key-umbra-color), 16%) 0 2px 4px);
+      }
+    }
+  }
+
+  &.v-selection-control {
+    .v-selection-control__input {
+      svg {
+        font-size: 1.5rem;
+      }
+    }
+
+    .v-label {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    }
+  }
+
+  &:not(.v-selection-control--dirty) {
+    .v-selection-control__input > .v-icon {
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+      opacity: 1;
+    }
+  }
+}
+
+.v-radio-group.v-input > .v-input__control > .v-label {
+  font-size: 0.9375rem;
+  line-height: 22px;
+  margin-inline-start: 0;
+}
+
+.v-radio-group {
+  .v-selection-control-group {
+    .v-radio:not(:last-child) {
+      margin-inline-end: 0;
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_rating.scss

@@ -0,0 +1,14 @@
+// // 👉 Rating
+// .v-rating {
+//   .v-rating__wrapper {
+//     .v-btn {
+//       &:hover {
+//         transform: none;transform
+//       }
+
+//       .v-icon {
+//         --v-icon-size-multiplier: 1;--v-icon-size-multiplier
+//       }
+//     }
+//   }
+// }

src/admin/src/@core/scss/template/libs/vuetify/components/_slider.scss

@@ -0,0 +1,28 @@
+// 👉 Slider
+
+.v-slider {
+  .v-slider-track__background--opacity {
+    opacity: 0.16;
+  }
+}
+
+.v-slider-thumb {
+  .v-slider-thumb__surface::after {
+    border-radius: 50%;
+    background-color: #fff;
+    block-size: calc(var(--v-slider-thumb-size) - 10px);
+    inline-size: calc(var(--v-slider-thumb-size) - 10px);
+  }
+
+  .v-slider-thumb__label {
+    background-color: rgb(var(--v-tooltip-background));
+    color: rgb(var(--v-theme-surface));
+    font-weight: 500;
+    letter-spacing: 0.15px;
+    line-height: 1.25rem;
+
+    &::before {
+      content: none;
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_snackbar.scss

@@ -0,0 +1,10 @@
+// 👉 snackbar
+
+.v-snackbar {
+  .v-snackbar__actions {
+    .v-btn {
+      padding-block: 0;
+      padding-inline: 10px;
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_switch.scss

@@ -0,0 +1,57 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/base/mixins";
+
+// 👉 Switch
+
+.v-switch {
+  .v-label {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    line-height: 22px;
+  }
+}
+
+.v-switch.v-switch--inset {
+  .v-selection-control .v-selection-control__wrapper {
+    block-size: 36px;
+  }
+
+  .v-ripple__container {
+    opacity: 0;
+  }
+
+  .v-switch__track {
+    background-color: rgba(var(--v-theme-on-surface), var(--v-focus-opacity));
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 16%) inset;
+    opacity: 1;
+  }
+
+  .v-selection-control__input {
+    transform: translateX(-5px) !important;
+
+    --v-selection-control-size: 1.125rem;
+
+    .v-switch__thumb {
+      background-color: #fff;
+      block-size: 0.875rem;
+      box-shadow: none;
+      filter: drop-shadow(0 2px 4px rgba(var(--v-shadow-key-umbra-color), 16%));
+      inline-size: 0.875rem;
+      transform: scale(1);
+    }
+  }
+
+  .v-selection-control--dirty {
+    @each $color-name in variables.$theme-colors-name {
+      .text-#{$color-name} {
+        .v-switch__track {
+          border-color: rgb(var(--v-theme-#{$color-name}));
+          background-color: rgb(var(--v-theme-#{$color-name}));
+        }
+      }
+    }
+
+    .v-selection-control__input {
+      transform: translateX(5px) !important;
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_table.scss

@@ -0,0 +1,36 @@
+.v-data-table {
+  table {
+    tbody {
+      tr {
+        &.v-data-table-group-header-row {
+          td {
+            background: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 👉 Table
+.v-table {
+  .v-table__wrapper {
+    border-radius: 0;
+
+    table {
+      thead {
+        tr {
+          th {
+            background: rgb(var(--v-table-header-color)) !important;
+            border-block-end: none !important;
+            color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+            font-size: 0.8125rem;
+            letter-spacing: 0.2px;
+            line-height: 24px;
+            text-transform: uppercase;
+          }
+        }
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_tabs.scss

@@ -0,0 +1,113 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/base/mixins";
+
+body {
+  .v-tabs {
+    .v-tab.v-btn {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+      padding-block: 0;
+      padding-inline: 1.375rem;
+
+      .v-icon {
+        block-size: 1.125rem;
+        font-size: 1.125rem;
+        inline-size: 1.125rem;
+      }
+
+      &.v-btn--stacked {
+        .v-icon {
+          block-size: 1.5rem !important;
+          font-size: 1.5rem !important;
+          inline-size: 1.5rem !important;
+        }
+      }
+    }
+
+    &:not(.v-tabs-pill) {
+      &.v-tabs--vertical {
+        border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+
+        .v-tab__slider {
+          inset-inline-end: 0;
+          inset-inline-start: unset;
+        }
+      }
+
+      &.v-tabs--horizontal {
+        border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+
+        .v-tab__slider {
+          inset-block-end: 1px;
+          inset-block-start: unset;
+        }
+      }
+
+      .v-tab {
+        &.v-tab--selected {
+          &.v-btn.v-btn--variant-text {
+            &:hover,
+            &:active,
+            &:focus {
+              .v-btn__overlay {
+                --v-hover-opacity: 0;
+              }
+            }
+          }
+        }
+
+        &:not(.v-tab--selected) {
+          &.v-btn.v-btn--variant-text {
+            &:hover,
+            &:active,
+            &:focus {
+              color: rgb(var(--v-theme-primary));
+
+              .v-btn__overlay {
+                --v-hover-opacity: 0;
+              }
+
+              .v-btn__content {
+                .v-tab__slider {
+                  opacity: var(--v-activated-opacity);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.v-tabs-pill {
+      .v-slide-group__content {
+        gap: 0.25rem;
+      }
+
+      &.v-slide-group,
+      .v-slide-group__container {
+        box-sizing: content-box;
+        padding: 1rem;
+        margin: -1rem;
+      }
+
+      /* stylelint-disable-next-line no-descending-specificity */
+      .v-tab {
+        &.v-btn {
+          border-radius: 0.375rem !important;
+        }
+
+        &:not(.v-tab--selected) {
+          /* stylelint-disable-next-line no-descending-specificity */
+          &.v-btn.v-btn--variant-text {
+            &:hover {
+              color: rgb(var(--v-theme-primary));
+            }
+          }
+        }
+
+        &.v-tab--selected {
+          @include mixins.elevation(2);
+        }
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_textarea.scss

@@ -0,0 +1 @@
+// 👉 Text Area

src/admin/src/@core/scss/template/libs/vuetify/components/_timeline.scss

@@ -0,0 +1,52 @@
+@use "@configured-variables" as variables;
+@use "sass:map";
+@use "@styles/variables/vuetify";
+@use "@core/scss/base/mixins";
+@use "@core/scss/base/utils";
+
+// 👉 Timeline
+
+.v-timeline {
+  &:not(.v-timeline--variant-outlined) .v-timeline-divider__dot {
+    background: none !important;
+
+    .v-timeline-divider__inner-dot {
+      box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
+
+      @each $color-name in variables.$theme-colors-name {
+
+        &.bg-#{$color-name} {
+          box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
+        }
+      }
+    }
+  }
+
+  .v-timeline-item {
+    .timeline-chip {
+      border-radius: 6px;
+      background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
+      padding-block: 5px;
+      padding-inline: 10px;
+    }
+  }
+
+  &.v-timeline--variant-outlined {
+    .v-timeline-item {
+      .v-timeline-divider {
+        .v-timeline-divider__dot {
+          background: none !important;
+        }
+      }
+
+      .v-timeline-divider__after {
+        border: 1px dashed rgba(var(--v-border-color), var(--v-border-opacity));
+        background: none;
+      }
+
+      .v-timeline-divider__before {
+        background: none;
+      }
+    }
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/_tooltip.scss

@@ -0,0 +1,7 @@
+// 👉 Tooltip
+
+.v-tooltip {
+  .v-overlay__content {
+    font-weight: 500;
+  }
+}

src/admin/src/@core/scss/template/libs/vuetify/components/index.scss

@@ -0,0 +1,25 @@
+@use "alert";
+@use "avatar";
+@use "button";
+@use "badge";
+@use "cards";
+@use "chip";
+@use "dialog";
+@use "expansion-panels";
+@use "list";
+@use "menu";
+@use "pagination";
+@use "progress";
+@use "rating";
+@use "snackbar";
+@use "slider";
+@use "table";
+@use "tabs";
+@use "timeline";
+@use "tooltip";
+@use "otp-input";
+@use "field";
+@use "checkbox";
+@use "textarea";
+@use "radio";
+@use "switch";

src/admin/src/@core/scss/template/libs/vuetify/index.scss

@@ -0,0 +1,3 @@
+@use "@core/scss/base/libs/vuetify";
+@use "overrides";
+@use "components/index";

src/admin/src/@core/scss/template/pages/misc.scss

@@ -0,0 +1,36 @@
+.layout-blank {
+  .misc-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.25rem;
+    min-block-size: 100dvh;
+
+    .misc-footer-img {
+      position: absolute;
+      inline-size: 100%;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+
+    .misc-footer-tree, .misc-footer-tree-1 {
+      position: absolute;
+    }
+    
+    .misc-footer-tree {
+      inset-block-end: 3.75rem;
+      inset-inline-start: 3.75rem;
+    }
+    
+    .misc-footer-tree-1 {
+      inset-block-end: 5rem;
+      inset-inline-end: 4.75rem;
+    }
+
+  }
+
+  .misc-avatar {
+    z-index: 1;
+  }
+}

src/admin/src/@core/scss/template/pages/page-auth.scss

@@ -0,0 +1,61 @@
+.layout-blank {
+  .auth-wrapper {
+    min-block-size: 100dvh;
+  }
+
+  .auth-footer-mask {
+    position: absolute;
+    inset-block-end: 0;
+    max-inline-size: 100%;
+    min-inline-size: 100%;
+  }
+
+  .auth-footer-tree{
+    position: absolute !important;
+    inset-block-end: 70px;
+    inset-inline-start: 70px;
+  }
+
+  .auth-footer-start-tree, .auth-footer-end-tree{
+    position: absolute !important;
+    z-index: 1 !important;
+  }
+
+  .auth-footer-start-tree{
+    inset-block-end: 3.75rem;
+    inset-inline-start: 3.75rem;
+  }
+
+  .auth-footer-end-tree{
+    inset-block-end: 4.625rem;
+    inset-inline-end: 5rem;
+  }
+
+  .auth-card, .auth-card-v2, .auth-illustration {
+    z-index: 1 !important;
+  }
+}
+
+@media (min-width: 960px) {
+  .skin--bordered {
+    .auth-card-v2 {
+      border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+    }
+  }
+}
+
+
+.auth-logo {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 2rem;
+  inset-inline-start: 2.3rem;
+}
+
+.auth-title{
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: 0.273px;
+  line-height: normal;
+  text-transform: capitalize;
+}

src/admin/src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss

@@ -0,0 +1,11 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/base/mixins";
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
+
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.5rem;
+  }
+}

src/admin/src/@core/scss/template/placeholders/_index.scss

@@ -0,0 +1,5 @@
+
+@forward "nav";
+@forward "default-layout-vertical-nav";
+@forward "vertical-nav";
+@forward "misc";

src/admin/src/@core/scss/template/placeholders/_misc.scss

@@ -0,0 +1,7 @@
+%blurry-bg {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(9px);
+  backdrop-filter: blur(9px);
+  /* stylelint-enable */
+  background-color: rgb(var(--v-theme-surface), 0.85);
+}

src/admin/src/@core/scss/template/placeholders/_nav.scss

@@ -0,0 +1,17 @@
+@use "@core/scss/base/mixins";
+
+%nav-link-active {
+  background: linear-gradient(-72.47deg, rgb(var(--v-theme-primary)) 22.16%,
+  rgba(var(--v-theme-primary), 0.7) 76.47%) !important;
+
+  i { color: rgb(var(--v-theme-on-primary)) !important; }
+
+  @include mixins.elevation(4);
+}
+
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  .nav-item-title {
+    line-height: 1.375rem;
+  }
+}

src/admin/src/@core/scss/template/placeholders/_vertical-nav.scss

@@ -0,0 +1,94 @@
+@use "@configured-variables" as variables;
+
+%nav-header-action {
+  color:rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  font-size: 0;
+}
+
+// ℹ️ Add divider around section title
+%vertical-nav-section-title {
+  block-size: 2rem;
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+
+  /*
+    ℹ️ We will use this to add gap between divider and text.
+    Moreover, we will use this to adjust the `flex-basis` property of left divider
+  */
+  $divider-gap: 0.625rem;
+
+  // Thanks: https://stackoverflow.com/a/62359101/10796681
+  .title-text {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-start;
+    column-gap: $divider-gap;
+
+    &::before,
+    &::after {
+      border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+      content: "";
+    }
+
+    &::after {
+      flex: 1 1 auto;
+    }
+
+    &::before {
+      flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
+      margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
+    }
+  }
+
+  // ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
+  @at-root {
+    .layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
+      margin-inline: 4px 0;
+    }
+  }
+}
+
+%vertical-nav-item-interactive {
+  // Add pill shape styles
+  block-size: 2.375rem !important;
+  border-end-end-radius: 3.125rem !important;
+  border-end-start-radius: 0 !important;
+  border-start-end-radius: 3.125rem !important;
+  border-start-start-radius: 0 !important;
+
+  // ℹ️ Wobble effect
+  transition: margin-inline 0.15s ease-in-out;
+  will-change: margin-inline;
+
+  // Reduce margin inline end when vertical nav is in collapsed mode and not hovered
+  .layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) & {
+    margin-inline: 0 5px;
+  }
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+  font-size: .8125rem;
+  line-height: 20px;
+  padding-block: 0.125rem;
+  padding-inline: 0.75rem;
+}
+
+// Nav items styles (including section title)
+%vertical-nav-item {
+  gap: .5rem;
+  padding-block: 0.4375rem;
+}
+
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  margin-inline: .375rem;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+  margin-inline-start: 1rem;
+  visibility: visible;
+}

src/admin/src/@core/utils/colorConverter.ts

@@ -0,0 +1,35 @@
+/**
+ * Convert Hex color to rgb
+ * @param hex
+ */
+
+export const hexToRgb = (hex: string) => {
+// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+
+  hex = hex.replace(shorthandRegex, (m: string, r: string, g: string, b: string) => {
+    return r + r + g + g + b + b
+  })
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
+  return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null
+}
+
+/**
+ *RGBA color to Hex color with / without opacity
+ */
+export const rgbaToHex = (rgba: string, forceRemoveAlpha = false) => {
+  return (
+    `#${
+      rgba
+        .replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values
+        .split(',') // splits them at ","
+        .filter((string, index) => !forceRemoveAlpha || index !== 3)
+        .map(string => Number.parseFloat(string)) // Converts them to numbers
+        .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
+        .map(number => number.toString(16)) // Converts numbers to hex
+        .map(string => (string.length === 1 ? `0${string}` : string)) // Adds 0 when length of one number is 1
+        .join('')}`
+  )
+}

src/admin/src/@core/utils/formatters.ts

@@ -0,0 +1,6 @@
+// TODO: Try to implement this: https://twitter.com/fireship_dev/status/1565424801216311297
+export const kFormatter = (num: number) => {
+  const regex = /\B(?=(\d{3})+(?!\d))/g
+
+  return Math.abs(num) > 9999 ? `${Math.sign(num) * +((Math.abs(num) / 1000).toFixed(1))}k` : Math.abs(num).toFixed(0).replace(regex, ',')
+}

src/admin/src/@core/utils/helpers.ts

@@ -0,0 +1,32 @@
+// 👉 IsEmpty
+export const isEmpty = (value: unknown): boolean => {
+  if (value === null || value === undefined || value === '')
+    return true
+
+  return !!(Array.isArray(value) && value.length === 0)
+}
+
+// 👉 IsNullOrUndefined
+export const isNullOrUndefined = (value: unknown): value is undefined | null => {
+  return value === null || value === undefined
+}
+
+// 👉 IsEmptyArray
+export const isEmptyArray = (arr: unknown): boolean => {
+  return Array.isArray(arr) && arr.length === 0
+}
+
+// 👉 IsObject
+export const isObject = (obj: unknown): obj is Record<string, unknown> =>
+  obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
+
+// 👉 IsToday
+export const isToday = (date: Date) => {
+  const today = new Date()
+
+  return (
+    date.getDate() === today.getDate()
+    && date.getMonth() === today.getMonth()
+    && date.getFullYear() === today.getFullYear()
+  )
+}

src/admin/src/@core/utils/plugins.ts

@@ -0,0 +1,54 @@
+import type { App } from 'vue'
+
+/**
+ * This is helper function to register plugins like a nuxt
+ * To register a plugin just export a const function `defineVuePlugin` that takes `app` as argument and call `app.use`
+ * For Scanning plugins it will include all files in `src/plugins` and `src/plugins/**\/index.ts`
+ *
+ *
+ * @param {App} app Vue app instance
+ * @returns void
+ *
+ * @example
+ * ```ts
+ * // File: src/plugins/vuetify/index.ts
+ *
+ * import type { App } from 'vue'
+ * import { createVuetify } from 'vuetify'
+ *
+ * const vuetify = createVuetify({ ... })
+ *
+ * export default function (app: App) {
+ *   app.use(vuetify)
+ * }
+ * ```
+ *
+ * All you have to do is use this helper function in `main.ts` file like below:
+ * ```ts
+ * // File: src/main.ts
+ * import { registerPlugins } from '@core/utils/plugins'
+ * import { createApp } from 'vue'
+ * import App from '@/App.vue'
+ *
+ * // Create vue app
+ * const app = createApp(App)
+ *
+ * // Register plugins
+ * registerPlugins(app) // [!code focus]
+ *
+ * // Mount vue app
+ * app.mount('#app')
+ * ```
+ */
+
+export const registerPlugins = (app: App) => {
+  const imports = import.meta.glob<{ default: (app: App) => void }>(['../../plugins/*.{ts,js}', '../../plugins/*/index.{ts,js}'], { eager: true })
+
+  const importPaths = Object.keys(imports).sort()
+
+  importPaths.forEach(path => {
+    const pluginImportModule = imports[path]
+
+    pluginImportModule.default?.(app)
+  })
+}

src/admin/src/@layouts/components.ts

@@ -0,0 +1,3 @@
+export { default as VerticalNavLayout } from './components/VerticalNavLayout.vue'
+export { default as VerticalNavLink } from './components/VerticalNavLink.vue'
+export { default as VerticalNavSectionTitle } from './components/VerticalNavSectionTitle.vue'

src/admin/src/@layouts/components/TransitionExpand.vue

@@ -0,0 +1,92 @@
+<!-- Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/ -->
+
+<script lang="ts">
+import { Transition } from 'vue'
+
+export default defineComponent({
+  name: 'TransitionExpand',
+  setup(_, { slots }) {
+    const onEnter = (element: HTMLElement) => {
+      const width = getComputedStyle(element).width
+
+      element.style.width = width
+      element.style.position = 'absolute'
+      element.style.visibility = 'hidden'
+      element.style.height = 'auto'
+
+      const height = getComputedStyle(element).height
+
+      element.style.width = ''
+      element.style.position = ''
+      element.style.visibility = ''
+      element.style.height = '0px'
+
+      // Force repaint to make sure the
+      // animation is triggered correctly.
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height
+
+      // Trigger the animation.
+      // We use `requestAnimationFrame` because we need
+      // to make sure the browser has finished
+      // painting after setting the `height`
+      // to `0` in the line above.
+      requestAnimationFrame(() => {
+        element.style.height = height
+      })
+    }
+
+    const onAfterEnter = (element: HTMLElement) => {
+      element.style.height = 'auto'
+    }
+
+    const onLeave = (element: HTMLElement) => {
+      const height = getComputedStyle(element).height
+
+      element.style.height = height
+
+      // Force repaint to make sure the
+      // animation is triggered correctly.
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height
+
+      requestAnimationFrame(() => {
+        element.style.height = '0px'
+      })
+    }
+
+    return () => h(
+      h(Transition),
+      {
+        name: 'expand',
+        onEnter,
+        onAfterEnter,
+        onLeave,
+      },
+      () => slots.default?.(),
+    )
+  },
+})
+</script>
+
+<style>
+.expand-enter-active,
+.expand-leave-active {
+  overflow: hidden;
+  transition: block-size var(--expand-transition-duration, 0.25s) ease;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  block-size: 0;
+}
+</style>
+
+<style scoped>
+* {
+  backface-visibility: hidden;
+  perspective: 1000px;
+  transform: translateZ(0);
+  will-change: block-size;
+}
+</style>

src/admin/src/@layouts/components/VerticalNav.vue

@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import type { Component } from 'vue';
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
+import { useDisplay } from 'vuetify';
+import logo from '@images/logo.svg?raw';
+
+interface Props {
+  tag?: string | Component
+  isOverlayNavActive: boolean
+  toggleIsOverlayNavActive: (value: boolean) => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: 'aside',
+})
+
+const { mdAndDown } = useDisplay()
+
+const refNav = ref()
+
+/*
+  ℹ️ Close overlay side when route is changed
+  Close overlay vertical nav when link is clicked
+*/
+const route = useRoute()
+
+watch(
+  () => route.path,
+  () => {
+    props.toggleIsOverlayNavActive(false)
+  })
+
+const isVerticalNavScrolled = ref(false)
+const updateIsVerticalNavScrolled = (val: boolean) => isVerticalNavScrolled.value = val
+
+const handleNavScroll = (evt: Event) => {
+  isVerticalNavScrolled.value = (evt.target as HTMLElement).scrollTop > 0
+}
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <Component
+    :is="props.tag"
+    ref="refNav"
+    data-allow-mismatch
+    class="layout-vertical-nav"
+    :class="[
+      {
+        'visible': isOverlayNavActive,
+        'scrolled': isVerticalNavScrolled,
+        'overlay-nav': mdAndDown,
+      },
+    ]"
+  >
+    <!-- 👉 Header -->
+    <div class="nav-header">
+      <slot name="nav-header">
+        <RouterLink
+          to="/"
+          class="app-logo app-title-wrapper"
+        >
+          <div
+            class="d-flex"
+            v-html="logo"
+          />
+
+          <h1 class="font-weight-medium leading-normal text-xl text-uppercase">
+            Materio
+          </h1>
+        </RouterLink>
+      </slot>
+    </div>
+    <slot name="before-nav-items">
+      <div class="vertical-nav-items-shadow" />
+    </slot>
+    <slot
+      name="nav-items"
+      :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled"
+    >
+      <PerfectScrollbar
+        tag="ul"
+        class="nav-items"
+        :options="{ wheelPropagation: false }"
+        @ps-scroll-y="handleNavScroll"
+      >
+        <slot />
+      </PerfectScrollbar>
+    </slot>
+    <slot name="after-nav-items" />
+  </Component>
+</template>
+
+<style lang="scss" scoped>
+.app-logo {
+  display: flex;
+  align-items: center;
+  column-gap: 0.75rem;
+
+  .app-logo-title {
+    font-size: 1.25rem;
+    font-weight: 500;
+    line-height: 1.75rem;
+    text-transform: uppercase;
+  }
+}
+</style>
+
+<style lang="scss">
+@use "@configured-variables" as variables;
+@use "@layouts/styles/mixins";
+
+// 👉 Vertical Nav
+.layout-vertical-nav {
+  position: fixed;
+  z-index: variables.$layout-vertical-nav-z-index;
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  inline-size: variables.$layout-vertical-nav-width;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  transition: inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+  will-change: transform, inline-size;
+
+  .nav-header {
+    display: flex;
+    align-items: center;
+
+    .header-action {
+      cursor: pointer;
+
+      @at-root {
+        #{variables.$selector-vertical-nav-mini} .nav-header .header-action {
+          &.nav-pin,
+          &.nav-unpin {
+            display: none !important;
+          }
+        }
+      }
+    }
+  }
+
+  .app-title-wrapper {
+    margin-inline-end: auto;
+  }
+
+  .nav-items {
+    block-size: 100%;
+
+    // ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
+    // overflow-x: hidden;
+
+    // // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
+    // overflow-y: auto;
+  }
+
+  .nav-item-title {
+    overflow: hidden;
+    margin-inline-end: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // 👉 Collapsed
+  .layout-vertical-nav-collapsed & {
+    &:not(.hovered) {
+      inline-size: variables.$layout-vertical-nav-collapsed-width;
+    }
+  }
+}
+
+// Small screen vertical nav transition
+@media (max-width: 1279px) {
+  .layout-vertical-nav {
+    &:not(.visible) {
+      transform: translateX(-#{variables.$layout-vertical-nav-width});
+
+      @include mixins.rtl {
+        transform: translateX(variables.$layout-vertical-nav-width);
+      }
+    }
+
+    transition: transform 0.25s ease-in-out;
+  }
+}
+</style>

src/admin/src/@layouts/components/VerticalNavGroup.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { NavGroup } from '@layouts/types';
+
+defineProps<{
+  item: Omit<NavGroup, 'children'>
+}>()
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <li
+    class="nav-group"
+    :class="isOpen && 'open'"
+  >
+    <div
+      class="nav-group-label"
+      @click="isOpen = !isOpen"
+    >
+      <VIcon
+        :icon="item.icon || 'ri-checkbox-blank-circle-line'"
+        class="nav-item-icon"
+      />
+      <span class="nav-item-title">{{ item.title }}</span>
+      <span
+        class="nav-item-badge"
+        :class="item.badgeClass"
+      >
+        {{ item.badgeContent }}
+      </span>
+      <VIcon
+        icon="ri-arrow-right-s-line"
+        class="nav-group-arrow"
+      />
+    </div>
+    <div class="nav-group-children-wrapper">
+      <ul class="nav-group-children">
+        <slot />
+      </ul>
+    </div>
+  </li>
+</template>
+
+<style lang="scss">
+.layout-vertical-nav {
+  .nav-group {
+    &-label {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .nav-group-children-wrapper {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 0.3s ease-in-out;
+
+      .nav-group-children {
+        overflow: hidden;
+      }
+    }
+
+    &.open {
+      .nav-group-children-wrapper {
+        grid-template-rows: 1fr;
+      }
+    }
+  }
+}
+</style>

src/admin/src/@layouts/components/VerticalNavLayout.vue

@@ -0,0 +1,209 @@
+<script lang="ts">
+import { defineComponent, h, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { syncRef, useToggle } from '@vueuse/core';
+import VerticalNav from '@layouts/components/VerticalNav.vue';
+import { useDisplay } from 'vuetify';
+
+export default defineComponent({
+  setup(props, { slots }) {
+    const isOverlayNavActive = ref(false)
+    const isLayoutOverlayVisible = ref(false)
+    const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)
+
+    const route = useRoute()
+    const { mdAndDown } = useDisplay()
+
+    // ℹ️ This is alternative to below two commented watcher
+    // We want to show overlay if overlay nav is visible and want to hide overlay if overlay is hidden and vice versa.
+    syncRef(isOverlayNavActive, isLayoutOverlayVisible)
+
+    return () => {
+      // 👉 Vertical nav
+      const verticalNav = h(
+        VerticalNav,
+        { isOverlayNavActive: isOverlayNavActive.value, toggleIsOverlayNavActive },
+        {
+          'nav-header': () => slots['vertical-nav-header']?.({ toggleIsOverlayNavActive }),
+          'before-nav-items': () => slots['before-vertical-nav-items']?.(),
+          'default': () => slots['vertical-nav-content']?.(),
+          'after-nav-items': () => slots['after-vertical-nav-items']?.(),
+        },
+      )
+
+      // 👉 Navbar
+      const navbar = h(
+        'header',
+        { class: ['layout-navbar navbar-blur'] },
+        [
+          h(
+            'div',
+            { class: 'navbar-content-container' },
+            slots.navbar?.({
+              toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
+            }),
+          ),
+        ],
+      )
+
+      const main = h(
+        'main',
+        { class: 'layout-page-content' },
+        h('div', { class: 'page-content-container' }, slots.default?.()),
+      )
+
+      // 👉 Footer
+      const footer = h(
+        'footer',
+        { class: 'layout-footer' },
+        [
+          h(
+            'div',
+            { class: 'footer-content-container' },
+            slots.footer?.(),
+          ),
+        ],
+      )
+
+      // 👉 Overlay
+      const layoutOverlay = h(
+        'div',
+        {
+          class: ['layout-overlay', { visible: isLayoutOverlayVisible.value }],
+          onClick: () => { isLayoutOverlayVisible.value = !isLayoutOverlayVisible.value },
+        },
+      )
+
+      return h(
+        'div',
+        {
+          class: [
+            'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid',
+            mdAndDown.value && 'layout-overlay-nav',
+            route.meta.layoutWrapperClasses,
+          ],
+        },
+        [
+          verticalNav,
+          h(
+            'div',
+            { class: 'layout-content-wrapper' },
+            [
+              navbar,
+              main,
+              footer,
+            ],
+          ),
+          layoutOverlay,
+        ],
+      )
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+@use "@configured-variables" as variables;
+@use "@layouts/styles/placeholders";
+@use "@layouts/styles/mixins";
+
+.layout-wrapper.layout-nav-type-vertical {
+  // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
+  block-size: 100%;
+
+  .layout-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-block-size: 100dvh;
+    transition: padding-inline-start 0.2s ease-in-out;
+    will-change: padding-inline-start;
+
+    @media screen and (min-width: 1280px) {
+      padding-inline-start: variables.$layout-vertical-nav-width;
+    }
+  }
+
+  .layout-navbar {
+    z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
+
+    .navbar-content-container {
+      block-size: variables.$layout-vertical-nav-navbar-height;
+    }
+
+    @at-root {
+      .layout-wrapper.layout-nav-type-vertical {
+        .layout-navbar {
+          @if variables.$layout-vertical-nav-navbar-is-contained {
+            @include mixins.boxed-content;
+          }
+
+          // else
+          @else {
+            .navbar-content-container {
+              @include mixins.boxed-content;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.layout-navbar-sticky .layout-navbar {
+    @extend %layout-navbar-sticky;
+  }
+
+  &.layout-navbar-hidden .layout-navbar {
+    @extend %layout-navbar-hidden;
+  }
+
+  // 👉 Footer
+  .layout-footer {
+    @include mixins.boxed-content;
+  }
+
+  // 👉 Layout overlay
+  .layout-overlay {
+    position: fixed;
+    z-index: variables.$layout-overlay-z-index;
+    background-color: rgb(0 0 0 / 60%);
+    cursor: pointer;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease-in-out;
+    will-change: transform;
+
+    &.visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  // Adjust right column pl when vertical nav is collapsed
+  &.layout-vertical-nav-collapsed .layout-content-wrapper {
+    padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
+  }
+
+  // 👉 Content height fixed
+  &.layout-content-height-fixed {
+    .layout-content-wrapper {
+      max-block-size: 100dvh;
+    }
+
+    .layout-page-content {
+      display: flex;
+      overflow: hidden;
+
+      .page-content-container {
+        inline-size: 100%;
+
+        > :first-child {
+          max-block-size: 100%;
+          overflow-y: auto;
+        }
+      }
+    }
+  }
+}
+</style>

src/admin/src/@layouts/components/VerticalNavLink.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { NavLink } from '@layouts/types'
+
+defineProps<{
+  item: NavLink
+}>()
+</script>
+
+<template>
+  <li
+    class="nav-link"
+    :class="{ disabled: item.disable }"
+  >
+    <Component
+      :is="item.to ? 'RouterLink' : 'a'"
+      :to="item.to"
+      :href="item.href"
+      :target="item.target"
+    >
+      <VIcon
+        :icon="item.icon || 'ri-checkbox-blank-circle-line'"
+        class="nav-item-icon"
+      />
+      <!-- 👉 Title -->
+      <span class="nav-item-title">
+        {{ item.title }}
+      </span>
+      <span
+        class="nav-item-badge"
+        :class="item.badgeClass"
+      >
+        {{ item.badgeContent }}
+      </span>
+    </Component>
+  </li>
+</template>
+
+<style lang="scss">
+.layout-vertical-nav {
+  .nav-link a {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+}
+</style>

src/admin/src/@layouts/components/VerticalNavSectionTitle.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { NavSectionTitle } from '@layouts/types'
+
+defineProps<{
+  item: NavSectionTitle
+}>()
+</script>
+
+<template>
+  <li class="nav-section-title">
+    <div class="title-wrapper">
+      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+      <span
+        class="title-text"
+        v-text="item.heading"
+      />
+      <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+    </div>
+  </li>
+</template>

src/admin/src/@layouts/enums.ts

@@ -0,0 +1,27 @@
+export const ContentWidth = {
+  Fluid: 'fluid',
+  Boxed: 'boxed',
+} as const
+
+export const NavbarType = {
+  Sticky: 'sticky',
+  Static: 'static',
+  Hidden: 'hidden',
+} as const
+
+export const FooterType = {
+  Sticky: 'sticky',
+  Static: 'static',
+  Hidden: 'hidden',
+} as const
+
+export const AppContentLayoutNav = {
+  Vertical: 'vertical',
+  Horizontal: 'horizontal',
+} as const
+
+export const HorizontalNavType = {
+  Sticky: 'sticky',
+  Static: 'static',
+  Hidden: 'hidden',
+} as const

src/admin/src/@layouts/index.ts

@@ -0,0 +1 @@
+export * from './components'

src/admin/src/@layouts/styles/_classes.scss

@@ -0,0 +1,3 @@
+.cursor-pointer {
+  cursor: pointer;
+}

src/admin/src/@layouts/styles/_default-layout.scss

@@ -0,0 +1,35 @@
+// These are styles which are both common in layout w/ vertical nav & horizontal nav
+@use "@layouts/styles/rtl";
+@use "@layouts/styles/placeholders";
+@use "@layouts/styles/mixins";
+@use "@configured-variables" as variables;
+
+html,
+body {
+  min-block-size: 100%;
+}
+
+.layout-page-content {
+  @include mixins.boxed-content(true);
+
+  flex-grow: 1;
+
+  // TODO: Use grid gutter variable here
+  padding-block: 1.5rem;
+}
+
+.layout-footer {
+  .footer-content-container {
+    block-size: variables.$layout-vertical-nav-footer-height;
+  }
+
+  .layout-footer-sticky & {
+    position: sticky;
+    inset-block-end: 0;
+    will-change: transform;
+  }
+
+  .layout-footer-hidden & {
+    display: none;
+  }
+}

src/admin/src/@layouts/styles/_global.scss

@@ -0,0 +1,10 @@
+*,
+::before,
+::after {
+  box-sizing: inherit;
+  background-repeat: no-repeat;
+}
+
+html {
+  box-sizing: border-box;
+}

src/admin/src/@layouts/styles/_mixins.scss

@@ -0,0 +1,30 @@
+@use "placeholders";
+@use "@configured-variables" as variables;
+
+@mixin rtl {
+  @if variables.$enable-rtl-styles {
+    [dir="rtl"] & {
+      @content;
+    }
+  }
+}
+
+@mixin boxed-content($nest-selector: false) {
+  & {
+    @extend %boxed-content-spacing;
+
+    @at-root {
+      @if $nest-selector == false {
+        .layout-content-width-boxed#{&} {
+          @extend %boxed-content;
+        }
+      }
+      // stylelint-disable-next-line @stylistic/indentation
+      @else {
+        .layout-content-width-boxed & {
+          @extend %boxed-content;
+        }
+      }
+    }
+  }
+}

src/admin/src/@layouts/styles/_placeholders.scss

@@ -0,0 +1,53 @@
+// placeholders
+@use "@configured-variables" as variables;
+
+%boxed-content {
+  @at-root #{&}-spacing {
+    // TODO: Use grid gutter variable here
+    padding-inline: 1.5rem;
+  }
+
+  inline-size: 100%;
+  margin-inline: auto;
+  max-inline-size: variables.$layout-boxed-content-width;
+}
+
+%layout-navbar-hidden {
+  display: none;
+}
+
+// ℹ️ We created this placeholder even it is being used in just layout w/ vertical nav because in future we might apply style to both navbar & horizontal nav separately
+%layout-navbar-sticky {
+  position: sticky;
+  inset-block-start: 0;
+
+  // will-change: transform;
+  // inline-size: 100%;
+}
+
+%style-scroll-bar {
+  /* width */
+
+  &::-webkit-scrollbar {
+    background: rgb(var(--v-theme-surface));
+    block-size: 8px;
+    border-end-end-radius: 14px;
+    border-start-end-radius: 14px;
+    inline-size: 4px;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    border-radius: 0.5rem;
+    background: rgb(var(--v-theme-perfect-scrollbar-thumb));
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+}

src/admin/src/@layouts/styles/_rtl.scss

@@ -0,0 +1,7 @@
+@use "./mixins";
+
+.layout-vertical-nav .nav-group-arrow {
+  @include mixins.rtl {
+    transform: rotate(180deg);
+  }
+}

src/admin/src/@layouts/styles/_variables.scss

@@ -0,0 +1,29 @@
+// @use "@styles/style.scss";
+
+// 👉 Vertical nav
+$layout-vertical-nav-z-index: 12 !default;
+$layout-vertical-nav-width: 260px !default;
+$layout-vertical-nav-collapsed-width: 80px !default;
+$selector-vertical-nav-mini: ".layout-vertical-nav-collapsed .layout-vertical-nav:not(:hover)";
+
+// 👉 Horizontal nav
+$layout-horizontal-nav-z-index: 11 !default;
+$layout-horizontal-nav-navbar-height: 64px !default;
+
+// 👉 Navbar
+$layout-vertical-nav-navbar-height: 64px !default;
+$layout-vertical-nav-navbar-is-contained: true !default;
+$layout-vertical-nav-layout-navbar-z-index: 11 !default;
+$layout-horizontal-nav-layout-navbar-z-index: 11 !default;
+
+// 👉 Main content
+$layout-boxed-content-width: 1440px !default;
+
+//  👉Footer
+$layout-vertical-nav-footer-height: 56px !default;
+
+// 👉 Layout overlay
+$layout-overlay-z-index: 11 !default;
+
+// 👉 RTL
+$enable-rtl-styles: true !default;

src/admin/src/@layouts/styles/index.scss

@@ -0,0 +1,3 @@
+@use "global";
+@use "vue3-perfect-scrollbar/style.css";
+@use "classes";

src/admin/src/@layouts/types.ts

@@ -0,0 +1,59 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface AclProperties {
+  action: string
+  subject: string
+}
+
+// 👉 Vertical nav section title
+export interface NavSectionTitle extends Partial<AclProperties> {
+  heading: string
+}
+
+// 👉 Vertical nav link
+declare type ATagTargetAttrValues = '_blank' | '_self' | '_parent' | '_top' | 'framename'
+declare type ATagRelAttrValues =
+  | 'alternate'
+  | 'author'
+  | 'bookmark'
+  | 'external'
+  | 'help'
+  | 'license'
+  | 'next'
+  | 'nofollow'
+  | 'noopener'
+  | 'noreferrer'
+  | 'prev'
+  | 'search'
+  | 'tag'
+
+export interface NavLinkProps {
+  to?: RouteLocationRaw | string | null
+  href?: string
+  target?: ATagTargetAttrValues
+  rel?: ATagRelAttrValues
+}
+
+export interface NavLink extends NavLinkProps, Partial<AclProperties> {
+  title: string
+  icon?: unknown
+  badgeContent?: string
+  badgeClass?: string
+  disable?: boolean
+}
+
+// 👉 Vertical nav group
+export interface NavGroup extends Partial<AclProperties> {
+  title: string
+  icon?: unknown
+  badgeContent?: string
+  badgeClass?: string
+  children: (NavLink | NavGroup)[]
+  disable?: boolean
+}
+
+// 👉 Components ========================
+export interface ThemeSwitcherTheme {
+  name: string
+  icon: string
+}

src/admin/src/@layouts/utils.ts

@@ -0,0 +1,17 @@
+/**
+ * Convert Hex color to rgb
+ * @param hex
+ */
+
+export const hexToRgb = (hex: string) => {
+// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+
+  hex = hex.replace(shorthandRegex, (m: string, r: string, g: string, b: string) => {
+    return r + r + g + g + b + b
+  })
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
+  return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null
+}

src/admin/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app theme="light">
+  <v-app>
     <router-view />
   </v-app>
 </template>

src/admin/src/api/users.ts

@@ -0,0 +1,21 @@
+import apiClient from './client';
+import type { UserProfileResponse, UpdateProfileRequest, ChangePasswordRequest } from '@/types/api';
+
+export async function getMe(): Promise<UserProfileResponse> {
+  const { data } = await apiClient.get<UserProfileResponse>('/v1/users/me');
+  return data;
+}
+
+export async function updateMe(request: UpdateProfileRequest): Promise<UserProfileResponse> {
+  const { data } = await apiClient.put<UserProfileResponse>('/v1/users/me', request);
+  return data;
+}
+
+export async function changePassword(request: ChangePasswordRequest): Promise<void> {
+  await apiClient.post('/v1/users/me/change-password', request);
+}
+
+export async function getUserById(id: number): Promise<UserProfileResponse> {
+  const { data } = await apiClient.get<UserProfileResponse>(`/v1/users/${id}`);
+  return data;
+}