mantis free version upgrade angular 19 and folder structure do accord…

README.md

@@ -12,15 +12,15 @@ Mantis is a free angular admin dashboard template built with Angular and latest
 
 [Pro version](https://codedthemes.com/item/mantis-angular-admin-template/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) of Mantis Angular Dashboard template contains features like TypeScript, Apps, Authentication Methods (i.e. JWT), Advance Components, Form Plugins, Layouts, Widgets, and many more.
 
-| [Mantis Free](https://mantisdashboard.io/angular/free/) | [Mantis](https://codedthemes.com/item/mantis-angular-admin-template/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium)            |
-| ------------------------------------------------------- | :------------------------------------------------------------------------------- |
-| **9** Demo pages                                        | **45+** demo pages                                                               |
-| -                                                       | ✓ Multi-language                                                                 |
-| -                                                       | ✓ Dark/Light Mode 🌓                                                             |
-| -                                                       | ✓ TypeScript version                                                             |
-| -                                                       | ✓ 6+ color Options                                                               |
-| -                                                       | ✓ RTL                                                                            |
-| -                                                       | ✓ [More components](https://mantisdashboard.io/angular/default/components/basic/alert) |
+| [Mantis Free](https://mantisdashboard.io/angular/free/) | [Mantis](https://codedthemes.com/item/mantis-angular-admin-template/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium)        |
+| ------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **9** Demo pages                                        | **45+** demo pages                                                                                                                                            |
+| -                                                       | ✓ Multi-language                                                                                                                                              |
+| -                                                       | ✓ Dark/Light Mode 🌓                                                                                                                                          |
+| -                                                       | ✓ TypeScript version                                                                                                                                          |
+| -                                                       | ✓ 6+ color Options                                                                                                                                            |
+| -                                                       | ✓ RTL                                                                                                                                                         |
+| -                                                       | ✓ [More components](https://mantisdashboard.io/angular/default/components/basic/alert)                                                                        |
 | ✓ MIT License                                           | ✓ [Pro License](https://codedthemes.com/item/mantis-angular-admin-template/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) |
 
 ## Why Mantis?
@@ -93,7 +93,7 @@ yarn start
 ## Technology Stack
 
 - Bootstrap 5
-- Angular 17
+- Angular 19
 
 ## Author
 

eslint.config.mjs

@@ -0,0 +1,62 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all
+});
+
+export default [
+  {
+    ignores: ['projects/**/*']
+  },
+  ...compat
+    .extends(
+      'eslint:recommended',
+      'plugin:@typescript-eslint/recommended',
+      'plugin:@angular-eslint/recommended',
+      'plugin:@angular-eslint/template/process-inline-templates'
+    )
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts']
+    })),
+  {
+    files: ['**/*.ts'],
+
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase'
+        }
+      ],
+
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case'
+        }
+      ],
+      // Disable the prefer-standalone rule
+      '@angular-eslint/prefer-standalone': 'off'
+    }
+  },
+  ...compat.extends('plugin:@angular-eslint/template/recommended').map((config) => ({
+    ...config,
+    files: ['**/*.html']
+  })),
+  {
+    files: ['**/*.html'],
+    rules: {}
+  }
+];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantis-free-angular-admin-template",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "author": "CodedThemes",
   "license": "MIT",
   "scripts": {
@@ -11,51 +11,54 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "lint": "ng lint",
-    "lint-fix": "ng lint --fix"
+    "lint:fix": "ng lint --fix",
+    "prettier": "prettier --write ./src"
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^18.0.5",
-    "@angular/cdk": "^18.0.5",
-    "@angular/common": "^18.0.5",
-    "@angular/compiler": "^18.0.5",
-    "@angular/core": "^18.0.5",
-    "@angular/forms": "^18.0.5",
-    "@angular/platform-browser": "^18.0.5",
-    "@angular/platform-browser-dynamic": "^18.0.5",
-    "@angular/router": "^18.0.5",
-    "@ant-design/icons-angular": "^18.0.0",
-    "@ng-bootstrap/ng-bootstrap": "^17.0.0",
-    "@popperjs/core": "^2.11.8",
-    "apexcharts": "^3.49.2",
-    "bootstrap": "^5.3.3",
-    "ng-apexcharts": "^1.11.0",
-    "ngx-scrollbar": "^15.0.1",
+    "@angular/animations": "19.0.5",
+    "@angular/cdk": "19.0.4",
+    "@angular/common": "19.0.5",
+    "@angular/compiler": "19.0.5",
+    "@angular/core": "19.0.5",
+    "@angular/forms": "19.0.5",
+    "@angular/platform-browser": "19.0.5",
+    "@angular/platform-browser-dynamic": "19.0.5",
+    "@angular/router": "19.0.5",
+    "@ant-design/icons-angular": "19.0.0",
+    "@ng-bootstrap/ng-bootstrap": "18.0.0",
+    "@popperjs/core": "2.11.8",
+    "apexcharts": "3.49.2",
+    "bootstrap": "5.3.3",
+    "ng-apexcharts": "1.11.0",
+    "ngx-scrollbar": "16.1.1",
     "rxjs": "~7.8.1",
-    "tslib": "^2.6.3",
-    "zone.js": "~0.14.7"
+    "tslib": "2.8.1",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.6",
-    "@angular-eslint/builder": "18.0.1",
-    "@angular-eslint/eslint-plugin": "18.0.1",
-    "@angular-eslint/eslint-plugin-template": "18.0.1",
-    "@angular-eslint/schematics": "18.0.1",
-    "@angular-eslint/template-parser": "18.0.1",
-    "@angular/cli": "~18.0.6",
-    "@angular/compiler-cli": "^18.0.5",
-    "@types/jasmine": "~5.1.4",
-    "@types/node": "^20.14.9",
-    "@typescript-eslint/eslint-plugin": "7.14.1",
-    "@typescript-eslint/parser": "7.14.1",
-    "eslint": "^9.5.0",
-    "jasmine-core": "~5.1.2",
-    "karma": "~6.4.3",
+    "@angular-devkit/build-angular": "19.0.6",
+    "@angular-eslint/builder": "19.0.2",
+    "@angular-eslint/eslint-plugin": "19.0.2",
+    "@angular-eslint/eslint-plugin-template": "19.0.2",
+    "@angular-eslint/schematics": "19.0.2",
+    "@angular-eslint/template-parser": "19.0.2",
+    "@angular/cli": "~19.0.6",
+    "@angular/compiler-cli": "19.0.5",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.17.0",
+    "@types/jasmine": "~5.1.5",
+    "@types/node": "22.10.2",
+    "@typescript-eslint/eslint-plugin": "8.18.1",
+    "@typescript-eslint/parser": "8.18.1",
+    "eslint": "9.17.0",
+    "jasmine-core": "~5.5.0",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "prettier": "3.3.2",
-    "typescript": "5.4"
+    "prettier": "3.4.2",
+    "typescript": "5.6.3"
   }
 }

src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 // Project import
 import { AdminComponent } from './theme/layouts/admin-layout/admin-layout.component';
-import { GuestComponent } from './theme/layouts/guest/guest.component';
+import { GuestLayoutComponent } from './theme/layouts/guest-layout/guest-layout.component';
 
 const routes: Routes = [
   {
@@ -18,33 +18,34 @@ const routes: Routes = [
       },
       {
         path: 'dashboard/default',
-        loadComponent: () => import('./demo/default/dashboard/dashboard.component').then((c) => c.DefaultComponent)
+        loadComponent: () => import('./demo/dashboard/default/default.component').then((c) => c.DefaultComponent)
       },
       {
         path: 'typography',
-        loadComponent: () => import('./demo/ui-component/typography/typography.component')
+        loadComponent: () => import('./demo/component/basic-component/color/color.component').then((c) => c.ColorComponent)
       },
       {
         path: 'color',
-        loadComponent: () => import('./demo/ui-component/ui-color/ui-color.component')
+        loadComponent: () => import('./demo/component/basic-component/typography/typography.component').then((c) => c.TypographyComponent)
       },
       {
         path: 'sample-page',
-        loadComponent: () => import('./demo/other/sample-page/sample-page.component')
+        loadComponent: () => import('./demo/others/sample-page/sample-page.component').then((c) => c.SamplePageComponent)
       }
     ]
   },
   {
     path: '',
-    component: GuestComponent,
+    component: GuestLayoutComponent,
     children: [
       {
         path: 'login',
-        loadComponent: () => import('./demo/authentication/login/login.component')
+        loadComponent: () => import('./demo/pages/authentication/auth-login/auth-login.component').then((c) => c.AuthLoginComponent)
       },
       {
         path: 'register',
-        loadComponent: () => import('./demo/authentication/register/register.component')
+        loadComponent: () =>
+          import('./demo/pages/authentication/auth-register/auth-register.component').then((c) => c.AuthRegisterComponent)
       }
     ]
   }

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet><app-spinner /></router-outlet>

src/app/app.component.ts

@@ -1,10 +1,13 @@
 // angular import
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { SpinnerComponent } from './theme/shared/components/spinner/spinner.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  imports: [RouterOutlet, SpinnerComponent]
 })
 export class AppComponent {
   // public props

src/app/demo/admin-panel/README.md

@@ -0,0 +1,47 @@
+**Note:** *This README file is maintained to ensure the product structure aligns with the Pro version, making migration to Pro seamless when you choose to upgrade. This alignment aims to provide a smoother experience during the upgrade, especially regarding directory structure. You may notice these files and folders appearing throughout the project where they are part of the Pro version. While this might feel slightly inconvenient, it is intended to simplify your migration process and provide assistance. If these files are unnecessary for your use case, you can easily remove them.*
+
+Please continue reading below to explore the features of the Pro version:
+
+# Mantis Admin Panel - Unlock Premium Features with the Pro Version
+
+Elevate your project with the Pro Version of the <b>Mantis Admin Panel!</b> Built to cater to modern web applications, the Pro version is loaded with advanced features, intuitive design elements, and dynamic tools that ensure seamless functionality.
+
+This page (folder) is a sneak peek into the premium features available in <b>version 2.0.0</b>. Upgrade to the Pro version to unlock exclusive pages and components that will take your project to the next level.
+
+## Included in the Pro Version:
+
+[🚀 Dashboards](https://mantisdashboard.io/angular/default/dashboard/default) : Advanced dashboards with real-time insights and data visualizations for actionable metrics.
+
+[📦 Widgets](https://mantisdashboard.io/angular/default/widget/statistics) : A curated library of pre-built widgets for enhanced functionality and faster development.
+
+[⚙️ Admin Panel](https://mantisdashboard.io/angular/default/online-course/dashboard) : Fully responsive, user-friendly admin panels for efficient and seamless management.
+
+[🔧 Components](https://mantisdashboard.io/angular/default/components/basic/button) : A rich collection of reusable and customizable UI components.
+
+[🚀 Advanced Components](https://mantisdashboard.io/angular/default/components/advance/sweet-alert) : Sophisticated and innovative tools to enhance the overall design and functionality of your application.
+
+[📝 Forms](https://mantisdashboard.io/angular/default/form/form-basic) : Dynamic and customizable forms with advanced validation features for a smooth user experience.
+
+[📊 Tables](https://mantisdashboard.io/angular/default/bootstrap-table/basic-table) : Structured, interactive tables with sorting, filtering, and pagination options.
+
+[📈 Charts](https://mantisdashboard.io/angular/default/apex-chart) : Beautifully designed charts powered by modern data visualization libraries.
+
+[🔒 Authentication](https://codedthemes.com/demos/admin-templates/gradient-able/angular/stage/auth/register) : Secure pages for login, registration, and password recovery, ensuring robust user management.
+
+[🛒 E-commerce App](https://mantisdashboard.io/angular/default/e-commerce/product) : A complete e-commerce management system for handling products, inventory, and transactions.
+
+[💬 Chat Messages](https://mantisdashboard.io/angular/default/chat) : An integrated chat system to enhance communication within your application.
+
+[👤 User Profile](https://mantisdashboard.io/angular/default/user/user-profile) : A sleek and customizable user profile page for managing user details and settings.
+
+## Why Upgrade to the Pro Version?
+
+🚀 <b>Advanced Features</b> : Access premium components and tools designed for modern, high-end projects. <br/><br/>
+⚡ <b>Faster Development</b> : Pre-designed pages, widgets, and features help you save time and effort. <br/><br/>
+📱 <b>Fully Responsive Design</b> : Enjoy a flawless experience across desktops, tablets, and smartphones. <br/><br/>
+🛠 <b>Developer-Friendly</b> : Modular code, clear documentation, and well-structured components make customization a breeze. <br/><br/>
+🎨 <b>Customization-Ready</b> : Personalize every aspect of your project with ease to match your branding needs.
+
+## Get Started with the Pro Version!
+
+👉 [Explore the Pro version now](https://codedthemes.com/item/mantis-angular-admin-template/) - and supercharge your development experience!