Fixed build errors

.babelrc

@@ -1,7 +1,3 @@
 {
-  "presets": ["@babel/preset-env"],
-  "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread"
-  ]
+  "presets": ["@babel/preset-env"]
 }

package.json

@@ -18,38 +18,32 @@
   "devDependencies": {
     "@babel/core": "^7.24.5",
     "@babel/eslint-parser": "^7.24.5",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-transform-runtime": "^7.24.3",
     "@babel/preset-env": "^7.24.5",
     "@babel/runtime": "^7.24.5",
-    "babel-core": "^6.26.3",
     "babel-loader": "^9.1.3",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-stage-0": "^6.24.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.1",
     "css-minimizer-webpack-plugin": "^7.0.0",
-    "eslint": "^8.55.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.29.1",
     "html-webpack-plugin": "^5.6.0",
-    "imagemin-webpack-plugin": "^2.4.2",
     "mini-css-extract-plugin": "^2.9.0",
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^9.5.13",
     "sass": "^1.77.1",
     "sass-loader": "^14.2.1",
-    "shx": "^0.3.3",
+    "shx": "^0.3.4",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.5.0",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard": "^36.0.0",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dashboard": "^3.3.1",
+    "webpack-dashboard": "^3.3.6",
     "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
@@ -58,16 +52,15 @@
     "@fullcalendar/interaction": "^6.1.11",
     "@fullcalendar/list": "^6.1.11",
     "@fullcalendar/timegrid": "^6.1.11",
-    "@popperjs/core": "^2.11.6",
-    "babel-polyfill": "^6.26.0",
+    "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
-    "bootstrap-datepicker": "^1.9.0",
+    "bootstrap-datepicker": "^1.10.0",
     "brand-colors": "^2.1.1",
     "chart.js": "^4.4.2",
     "datatables": "^1.10.18",
     "easy-pie-chart": "^2.1.7",
     "file-loader": "^6.2.0",
-    "jquery": "^3.6.0",
+    "jquery": "^3.7.1",
     "jquery-sparkline": "^2.4.0",
     "jvectormap": "^2.0.4",
     "load-google-maps-api": "^2.0.2",

src/assets/styles/index.scss

@@ -1,6 +1,6 @@
-@import 'spec/settings/index';
-@import 'spec/tools/index';
-@import "bootstrap/scss/bootstrap";
-@import 'spec/index';
-@import 'vendor/index';
+@use 'spec/settings/index' as *;
+@use 'spec/tools/index' as *;
+@use "bootstrap/scss/bootstrap" as *;
+@use 'spec/index' as *;
+@use 'vendor/index' as *;
 

src/assets/styles/spec/components/forms.scss

@@ -1,3 +1,6 @@
+@use '../settings/baseColors' as *;
+@use '../settings/materialColors' as *;
+
 .checkbox label {
   display: inline-block;
   vertical-align: middle;

src/assets/styles/spec/components/index.scss

@@ -1,9 +1,9 @@
-@import 'sidebar';
-@import 'topbar';
-@import 'pageContainer';
-@import 'progressBar';
-@import 'easyPieChart';
-@import 'forms';
-@import 'masonry';
-@import 'loader';
-@import 'footer';
+@use 'sidebar' as *;
+@use 'topbar' as *;
+@use 'pageContainer' as *;
+@use 'progressBar' as *;
+@use 'easyPieChart' as *;
+@use 'forms' as *;
+@use 'masonry' as *;
+@use 'loader' as *;
+@use 'footer' as *;

src/assets/styles/spec/components/pageContainer.scss

@@ -1,3 +1,7 @@
+@use '../settings/baseColors' as *;
+@use '../settings/breakpoints' as *;
+@use '../tools/mixins/mediaQueriesRanges' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------

src/assets/styles/spec/components/sidebar.scss

@@ -1,3 +1,9 @@
+@use '../settings/baseColors' as *;
+@use '../tools/mixins/mediaQueriesRanges' as *;
+@use '../settings/breakpoints' as *;
+@use '../tools/mixins/clearfix' as *;
+@use '../settings/materialColors' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------

src/assets/styles/spec/components/topbar.scss

@@ -1,3 +1,10 @@
+@use 'sass:color';
+@use '../settings/baseColors' as *;
+@use '../settings/breakpoints' as *;
+@use '../tools/mixins/mediaQueriesRanges' as *;
+@use '../tools/mixins/clearfix' as *;
+@use '../tools/mixins/placeholder' as *;
+
 // ---------------------------------------------------------
 // @TOC
 
@@ -181,7 +188,7 @@
       }
 
       @include placeholder {
-        color: lighten($default-text-color, 20%);
+        color: color.adjust($default-text-color, $lightness: 20%);
         font-style: italic;
       }
     }

src/assets/styles/spec/generic/base.scss

@@ -1,3 +1,7 @@
+@use '../settings/fonts' as *;
+@use '../settings/baseColors' as *;
+@use 'sass:color';
+
 html, html a, body {
   -webkit-font-smoothing: antialiased;
 }
@@ -25,6 +29,7 @@ h6 {
   font-family: $font-secondary;
   letter-spacing: 0.5px;
   line-height: 1.5;
+  font-weight: 400;
 
   a {
     font-family: $font-secondary;
@@ -32,7 +37,7 @@ h6 {
 
   small {
     font-weight: 300;
-    color: lighten($default-dark, 5%);
+    color: color.adjust($default-dark, $lightness: 5%);
   }
 }
 

src/assets/styles/spec/generic/index.scss

@@ -1 +1 @@
-@import 'base';
+@use 'base' as *;

src/assets/styles/spec/index.scss

@@ -1,4 +1,4 @@
-@import 'generic/index';
-@import 'components/index';
-@import 'screens/index';
-@import 'utils/index';
+@use 'generic/index' as *;
+@use 'components/index' as *;
+@use 'screens/index' as *;
+@use 'utils/index' as *;

src/assets/styles/spec/screens/chat.scss

@@ -1,3 +1,7 @@
+@use '../settings/baseColors' as *;
+@use '../settings/breakpoints' as *;
+@use '../tools/mixins/mediaQueriesRanges' as *;
+
 #chat-sidebar {
   width: 250px;
   height: calc(100vh - #{$header-height} - 60px);

src/assets/styles/spec/screens/email.scss

@@ -1,3 +1,7 @@
+@use '../settings/baseColors' as *;
+@use '../settings/breakpoints' as *;
+@use '../tools/mixins/mediaQueriesRanges' as *;
+
 .email-app {
   .email-side-nav {
     background: $default-white;

src/assets/styles/spec/screens/index.scss

@@ -1,2 +1,2 @@
-@import 'chat';
-@import 'email';
+@use 'chat' as *;
+@use 'email' as *;

src/assets/styles/spec/settings/baseColors.scss

@@ -1,3 +1,6 @@
+@use 'sass:color';
+@use 'materialColors' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------
@@ -71,11 +74,11 @@ $default-white        : #fff;
 // @Inverted Colors
 // ---------------------------------------------------------
 
-$inverse-danger       : lighten($default-danger, 35%);
-$inverse-info         : lighten($default-info, 45%);
-$inverse-primary      : lighten($default-primary, 30%);
-$inverse-success      : lighten($default-success, 45%);
-$inverse-warning      : lighten($default-warning, 45%);
+$inverse-danger       : color.adjust($default-danger, $lightness: 35%);
+$inverse-info         : color.adjust($default-info, $lightness: 45%);
+$inverse-primary      : color.adjust($default-primary, $lightness: 30%);
+$inverse-success      : color.adjust($default-success, $lightness: 45%);
+$inverse-warning      : color.adjust($default-warning, $lightness: 45%);
 
 // ---------------------------------------------------------
 // @Others
@@ -94,7 +97,7 @@ $side-nav-dark-font   : #99abb4;
 // ---------------------------------------------------------
 
 $theme-danger         : #f53f61;
-$theme-dark           : lighten($side-nav-dark, 10%);
+$theme-dark           : color.adjust($side-nav-dark, $lightness: 10%);
 $theme-info           : $default-info;
 $theme-primary        : $default-primary;
-$theme-success        : desaturate($default-success, 5%);
+$theme-success        : color.adjust($default-success, $saturation: -5%);

src/assets/styles/spec/settings/index.scss

@@ -1,6 +1,4 @@
-@import 'breakpoints';
-@import 'fonts';
-@import 'brand-colors/dist/latest/scss/brand-colors.latest.scss';
-@import 'materialColors';
-@import 'baseColors';
-@import 'borders';
+@use 'breakpoints' as *;
+@use 'brand-colors/dist/latest/scss/brand-colors.latest.scss' as *;
+@use 'baseColors' as *;
+@use 'borders' as *;

src/assets/styles/spec/tools/index.scss

@@ -1 +1 @@
-@import 'mixins/index';
+@use 'mixins/index' as *;

src/assets/styles/spec/tools/mixins/index.scss

@@ -1,3 +1,3 @@
-@import 'placeholder';
-@import 'clearfix';
-@import 'mediaQueriesRanges';
+@use 'placeholder' as *;
+@use 'clearfix' as *;
+@use 'mediaQueriesRanges' as *;

src/assets/styles/spec/utils/colors.scss

@@ -1,3 +1,6 @@
+@use '../settings/materialColors' as *;
+@use '../settings/baseColors' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------

src/assets/styles/spec/utils/index.scss

@@ -1,2 +1,2 @@
-@import 'layout/index';
-@import 'colors';
+@use 'layout/index' as *;
+@use 'colors' as *;

src/assets/styles/spec/utils/layout/helpers/border.scss

@@ -1,3 +1,6 @@
+@use '../../../settings/baseColors' as colors;
+@use '../../../settings/borders' as borders;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------
@@ -11,11 +14,11 @@
 // @Quick Border Helpers
 // ---------------------------------------------------------
 
-.bd  { border: #{$border-width} solid #{$border-color} !important; }
-.bdT { border-top: #{$border-width} solid #{$border-color} !important; }
-.bdR { border-right: #{$border-width} solid #{$border-color} !important; }
-.bdB { border-bottom: #{$border-width} solid #{$border-color} !important; }
-.bdL { border-left: #{$border-width} solid #{$border-color} !important; }
+.bd  { border: #{borders.$border-width} solid #{colors.$border-color} !important; }
+.bdT { border-top: #{borders.$border-width} solid #{colors.$border-color} !important; }
+.bdR { border-right: #{borders.$border-width} solid #{colors.$border-color} !important; }
+.bdB { border-bottom: #{borders.$border-width} solid #{colors.$border-color} !important; }
+.bdL { border-left: #{borders.$border-width} solid #{colors.$border-color} !important; }
 
 // ---------------------------------------------------------
 // @Border Width

src/assets/styles/spec/utils/layout/helpers/flex.scss

@@ -1,3 +1,5 @@
+@use '../mixins/generateResponsive' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------

src/assets/styles/spec/utils/layout/helpers/index.scss

@@ -1,11 +1,11 @@
-@import 'flex';
-@import 'layout';
-@import 'lists';
-@import 'margin';
-@import 'objects';
-@import 'padding';
-@import 'positions';
-@import 'sizes';
-@import 'typography';
-@import 'border';
-@import 'pseudo';
+@use 'flex' as *;
+@use 'layout' as *;
+@use 'lists' as *;
+@use 'margin' as *;
+@use 'objects' as *;
+@use 'padding' as *;
+@use 'positions' as *;
+@use 'sizes' as *;
+@use 'typography' as *;
+@use 'border' as *;
+@use 'pseudo' as *;

src/assets/styles/spec/utils/layout/helpers/layout.scss

@@ -1,3 +1,5 @@
+@use '../mixins/generateResponsive' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------

src/assets/styles/spec/utils/layout/helpers/margin.scss

@@ -1,3 +1,5 @@
+@use '../mixins/generateResponsive' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------

src/assets/styles/spec/utils/layout/helpers/padding.scss

@@ -1,3 +1,5 @@
+@use '../mixins/generateResponsive' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------

src/assets/styles/spec/utils/layout/helpers/positions.scss

@@ -1,3 +1,5 @@
+@use '../mixins/generateResponsive' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------

src/assets/styles/spec/utils/layout/helpers/sizes.scss

@@ -1,3 +1,5 @@
+@use '../mixins/generateResponsive' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------

src/assets/styles/spec/utils/layout/helpers/typography.scss

@@ -1,3 +1,4 @@
+@use '../mixins/generateResponsive' as *;
 
 // ---------------------------------------------------------
 // @TOC

src/assets/styles/spec/utils/layout/index.scss

@@ -1,3 +1,3 @@
-@import 'mixins/index';
-@import 'utils/index';
-@import 'helpers/index';
+@use 'mixins/index' as *;
+@use 'utils/index' as *;
+@use 'helpers/index' as *;

src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss

@@ -1,3 +1,9 @@
+@use '../../../settings/breakpoints' as *;
+@use 'mediaQueryCondition' as *;
+
+// Initialize global variable to avoid deprecation warning
+$breakpointAlias: null;
+
 // ---------------------------------------------------------
 // @Responsive Suffix Generator
 // ---------------------------------------------------------

src/assets/styles/spec/utils/layout/mixins/index.scss

@@ -1,2 +1,2 @@
-@import 'mediaQueryCondition';
-@import 'generateResponsive';
+@use 'mediaQueryCondition' as *;
+@use 'generateResponsive' as *;

src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss

@@ -1,3 +1,5 @@
+@use '../../../settings/breakpoints' as *;
+
 // ---------------------------------------------------------
 // @Media Queries Generator
 // ---------------------------------------------------------

src/assets/styles/spec/utils/layout/utils/center.scss

@@ -1,3 +1,5 @@
+@use '../mixins/generateResponsive' as *;
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------

src/assets/styles/spec/utils/layout/utils/gap.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use '../mixins/generateResponsive' as *;
 
 // ---------------------------------------------------------
 // @TOC

src/assets/styles/spec/utils/layout/utils/index.scss

@@ -1,5 +1,5 @@
-@import 'center';
-@import 'gap';
-@import 'peers';
-@import 'layers';
+@use 'center' as *;
+@use 'gap' as *;
+@use 'peers' as *;
+@use 'layers' as *;
 

src/assets/styles/vendor/datepicker.scss

@@ -1,3 +1,8 @@
+@use 'sass:color';
+@use '../spec/settings/baseColors' as *;
+@use '../spec/settings/breakpoints' as *;
+@use '../spec/tools/mixins/mediaQueriesRanges' as *;
+
 .datepicker {
   border-radius: 0;
   padding: 25px;
@@ -95,7 +100,7 @@
 
     &.active {
       border-radius: 0;
-      border-color: lighten($default-info, 20%);
+      border-color: color.adjust($default-info, $lightness: 20%);
     }
   }
 

src/assets/styles/vendor/fullcalendar.scss

@@ -1,3 +1,5 @@
+@use '../spec/settings/baseColors' as *;
+
 .fc {
   background-color: $default-white;
   border: 1px solid $border-color;

src/assets/styles/vendor/index.scss

@@ -1,8 +1,8 @@
-@import 'perfect-scrollbar/css/perfect-scrollbar';
-@import 'themify-icons';
-@import 'font-awesome';
-@import 'perfectScrollbar';
-@import 'sparkline';
-@import 'jquery.datatables';
-@import 'fullcalendar';
-@import 'datepicker';
+@use 'perfect-scrollbar/css/perfect-scrollbar' as *;
+@use 'themify-icons' as *;
+@use 'font-awesome' as *;
+@use 'perfectScrollbar' as *;
+@use 'sparkline' as *;
+@use 'jquery.datatables' as *;
+@use 'fullcalendar' as *;
+@use 'datepicker' as *;

src/assets/styles/vendor/jquery.datatables.scss

@@ -1,3 +1,7 @@
+@use '../spec/settings/baseColors' as *;
+@use '../spec/settings/breakpoints' as *;
+@use '../spec/tools/mixins/mediaQueriesRanges' as *;
+
 table {
   &.dataTable {
     &.no-footer {

webpack/config.js

@@ -78,4 +78,12 @@ module.exports = {
   resolve,
   plugins,
   devServer,
+  // Suppress Bootstrap SASS deprecation warnings
+  stats: {
+    warningsFilter: [
+      /Deprecation Warning/,
+      /node_modules\/bootstrap/,
+      /repetitive deprecation warnings omitted/
+    ]
+  }
 };

webpack/devServer.js

@@ -20,7 +20,7 @@ const devServer = {
     watch: true,
   },
   historyApiFallback: true,
-  port: manifest.IS_PRODUCTION ? 3001 : 3000,
+  port: manifest.IS_PRODUCTION ? 3001 : 4000,
   compress: manifest.IS_PRODUCTION,
   client: {
     overlay: true,
@@ -41,6 +41,17 @@ const devServer = {
       version: false,
       warnings: true,
       colors: true,
+      warningsFilter: [
+        /Deprecation Warning/,
+        /node_modules\/bootstrap/,
+        /repetitive deprecation warnings omitted/,
+        /red\(\) is deprecated/,
+        /green\(\) is deprecated/,
+        /blue\(\) is deprecated/,
+        /mix\(white, \$color/,
+        /mix\(black, \$color/,
+        /Global built-in functions are deprecated/
+      ]
     },
   },
 };

webpack/plugins/imageminPlugin.js

@@ -1,7 +0,0 @@
-const
-  manifest          = require('../manifest'),
-  ImageminPlugin    = require('imagemin-webpack-plugin').default;
-
-module.exports = new ImageminPlugin({
-  disable: manifest.IS_DEVELOPMENT,
-});

webpack/plugins/index.js

@@ -4,7 +4,6 @@ const
 const plugins = [];
 
 plugins.push(
-  require('./imageminPlugin'),
   ...(require('./htmlPlugin')),
   ...(require('./internal')),
   require('./caseSensitivePlugin'),

webpack/rules/sass.js

@@ -47,6 +47,7 @@ const loaders = [
     loader: 'sass-loader',
     options: {
       sourceMap: manifest.IS_DEVELOPMENT,
+      api: 'modern-compiler',
       sassOptions: {
         outputStyle: manifest.MINIFY ? 'compressed' : 'expanded',
         includePaths: [
@@ -54,6 +55,8 @@ const loaders = [
           path.join(manifest.paths.src, 'assets', 'styles'),
           path.join(manifest.paths.src, ''),
         ],
+        quietDeps: true,
+        verbose: false
       },
     }
   }