diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index da9f127..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "root": true, - "ignorePatterns": ["projects/**/*"], - "overrides": [ - { - "files": ["*.ts"], - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:@angular-eslint/recommended", - "plugin:@angular-eslint/template/process-inline-templates" - ], - "rules": { - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "app", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "app", - "style": "kebab-case" - } - ] - } - }, - { - "files": ["*.html"], - "extends": ["plugin:@angular-eslint/template/recommended"], - "rules": {} - } - ] -} diff --git a/README.md b/README.md index 4b247d2..b840628 100644 --- a/README.md +++ b/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 diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..3f948fb --- /dev/null +++ b/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: {} + } +]; diff --git a/package.json b/package.json index e26870e..1696b92 100644 --- a/package.json +++ b/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" } } diff --git a/src/app/demo/default/dashboard/analytics-chart/analytics-chart.component.scss b/src/app/app-config.ts similarity index 100% rename from src/app/demo/default/dashboard/analytics-chart/analytics-chart.component.scss rename to src/app/app-config.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7c56d77..fffe9b9 100644 --- a/src/app/app-routing.module.ts +++ b/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) } ] } diff --git a/src/app/app.component.html b/src/app/app.component.html index 0680b43..93ded4b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b42bcf3..13cf54f 100644 --- a/src/app/app.component.ts +++ b/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 diff --git a/src/app/app.module.ts b/src/app/app.module.ts deleted file mode 100644 index a97cdea..0000000 --- a/src/app/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -// angular import -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -// project import -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { SharedModule } from './theme/shared/shared.module'; - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule, SharedModule, BrowserAnimationsModule], - bootstrap: [AppComponent] -}) -export class AppModule {} diff --git a/src/app/demo/admin-panel/README.md b/src/app/demo/admin-panel/README.md new file mode 100644 index 0000000..2bfb2ed --- /dev/null +++ b/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 Mantis Admin Panel! 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 version 2.0.0. 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? + +🚀 Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚡ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+📱 Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+🛠 Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/application/README.md b/src/app/demo/application/README.md new file mode 100644 index 0000000..2bfb2ed --- /dev/null +++ b/src/app/demo/application/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 Mantis Admin Panel! 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 version 2.0.0. 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? + +🚀 Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚡ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+📱 Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+🛠 Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/chart/README.md b/src/app/demo/chart/README.md new file mode 100644 index 0000000..2bfb2ed --- /dev/null +++ b/src/app/demo/chart/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 Mantis Admin Panel! 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 version 2.0.0. 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? + +🚀 Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚡ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+📱 Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+🛠 Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/component/advance-component/README.md b/src/app/demo/component/advance-component/README.md new file mode 100644 index 0000000..2bfb2ed --- /dev/null +++ b/src/app/demo/component/advance-component/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 Mantis Admin Panel! 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 version 2.0.0. 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? + +🚀 Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚡ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+📱 Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+🛠 Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/ui-component/ui-color/ui-color.component.html b/src/app/demo/component/basic-component/color/color.component.html similarity index 100% rename from src/app/demo/ui-component/ui-color/ui-color.component.html rename to src/app/demo/component/basic-component/color/color.component.html diff --git a/src/app/demo/default/dashboard/income-overview-chart/income-overview-chart.component.scss b/src/app/demo/component/basic-component/color/color.component.scss similarity index 100% rename from src/app/demo/default/dashboard/income-overview-chart/income-overview-chart.component.scss rename to src/app/demo/component/basic-component/color/color.component.scss diff --git a/src/app/demo/component/basic-component/color/color.component.ts b/src/app/demo/component/basic-component/color/color.component.ts new file mode 100644 index 0000000..7323b5b --- /dev/null +++ b/src/app/demo/component/basic-component/color/color.component.ts @@ -0,0 +1,14 @@ +// Angular import +import { Component } from '@angular/core'; + +// project import + +import { CardComponent } from 'src/app/theme/shared/components/card/card.component'; + +@Component({ + selector: 'app-color', + imports: [CardComponent], + templateUrl: './color.component.html', + styleUrl: './color.component.scss' +}) +export class ColorComponent {} diff --git a/src/app/demo/ui-component/typography/typography.component.html b/src/app/demo/component/basic-component/typography/typography.component.html similarity index 100% rename from src/app/demo/ui-component/typography/typography.component.html rename to src/app/demo/component/basic-component/typography/typography.component.html diff --git a/src/app/demo/ui-component/typography/typography.component.scss b/src/app/demo/component/basic-component/typography/typography.component.scss similarity index 100% rename from src/app/demo/ui-component/typography/typography.component.scss rename to src/app/demo/component/basic-component/typography/typography.component.scss diff --git a/src/app/demo/component/basic-component/typography/typography.component.ts b/src/app/demo/component/basic-component/typography/typography.component.ts new file mode 100644 index 0000000..7943988 --- /dev/null +++ b/src/app/demo/component/basic-component/typography/typography.component.ts @@ -0,0 +1,14 @@ +// Angular import +import { Component } from '@angular/core'; + +// project import + +import { CardComponent } from 'src/app/theme/shared/components/card/card.component'; + +@Component({ + selector: 'app-typography', + imports: [CardComponent], + templateUrl: './typography.component.html', + styleUrl: './typography.component.scss' +}) +export class TypographyComponent {} diff --git a/src/app/demo/default/dashboard/dashboard.component.html b/src/app/demo/dashboard/default/default.component.html similarity index 100% rename from src/app/demo/default/dashboard/dashboard.component.html rename to src/app/demo/dashboard/default/default.component.html diff --git a/src/app/demo/default/dashboard/dashboard.component.scss b/src/app/demo/dashboard/default/default.component.scss similarity index 100% rename from src/app/demo/default/dashboard/dashboard.component.scss rename to src/app/demo/dashboard/default/default.component.scss diff --git a/src/app/demo/default/dashboard/dashboard.component.ts b/src/app/demo/dashboard/default/default.component.ts similarity index 71% rename from src/app/demo/default/dashboard/dashboard.component.ts rename to src/app/demo/dashboard/default/default.component.ts index 3eda45c..194f255 100644 --- a/src/app/demo/default/dashboard/dashboard.component.ts +++ b/src/app/demo/dashboard/default/default.component.ts @@ -1,36 +1,39 @@ // angular import -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; // project import import tableData from 'src/fake-data/default-data.json'; -import { SharedModule } from 'src/app/theme/shared/shared.module'; -import { MonthlyBarChartComponent } from './monthly-bar-chart/monthly-bar-chart.component'; -import { IncomeOverviewChartComponent } from './income-overview-chart/income-overview-chart.component'; -import { AnalyticsChartComponent } from './analytics-chart/analytics-chart.component'; -import { SalesReportChartComponent } from './sales-report-chart/sales-report-chart.component'; + +import { MonthlyBarChartComponent } from 'src/app/theme/shared/apexchart/monthly-bar-chart/monthly-bar-chart.component'; +import { IncomeOverviewChartComponent } from 'src/app/theme/shared/apexchart/income-overview-chart/income-overview-chart.component'; +import { AnalyticsChartComponent } from 'src/app/theme/shared/apexchart/analytics-chart/analytics-chart.component'; +import { SalesReportChartComponent } from 'src/app/theme/shared/apexchart/sales-report-chart/sales-report-chart.component'; // icons -import { IconService } from '@ant-design/icons-angular'; +import { IconService, IconDirective } from '@ant-design/icons-angular'; import { FallOutline, GiftOutline, MessageOutline, RiseOutline, SettingOutline } from '@ant-design/icons-angular/icons'; +import { CardComponent } from 'src/app/theme/shared/components/card/card.component'; @Component({ selector: 'app-default', - standalone: true, imports: [ CommonModule, - SharedModule, + CardComponent, + IconDirective, MonthlyBarChartComponent, IncomeOverviewChartComponent, AnalyticsChartComponent, SalesReportChartComponent ], - templateUrl: './dashboard.component.html', - styleUrls: ['./dashboard.component.scss'] + templateUrl: './default.component.html', + styleUrls: ['./default.component.scss'] }) export class DefaultComponent { + private iconService = inject(IconService); + // constructor - constructor(private iconService: IconService) { + constructor() { this.iconService.addIcon(...[RiseOutline, FallOutline, SettingOutline, GiftOutline, MessageOutline]); } diff --git a/src/app/demo/forms/README.md b/src/app/demo/forms/README.md new file mode 100644 index 0000000..2bfb2ed --- /dev/null +++ b/src/app/demo/forms/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 Mantis Admin Panel! 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 version 2.0.0. 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? + +🚀 Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚡ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+📱 Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+🛠 Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/layouts/README.md b/src/app/demo/layouts/README.md new file mode 100644 index 0000000..2bfb2ed --- /dev/null +++ b/src/app/demo/layouts/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 Mantis Admin Panel! 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 version 2.0.0. 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? + +🚀 Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚡ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+📱 Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+🛠 Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/other/sample-page/sample-page.component.html b/src/app/demo/other/sample-page/sample-page.component.html deleted file mode 100644 index a4c257c..0000000 --- a/src/app/demo/other/sample-page/sample-page.component.html +++ /dev/null @@ -1,12 +0,0 @@ -
-
- -

- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt - in culpa qui officia deserunt mollit anim id est laborum." -

-
-
-
diff --git a/src/app/demo/others/sample-page/sample-page.component.html b/src/app/demo/others/sample-page/sample-page.component.html new file mode 100644 index 0000000..f9aa21f --- /dev/null +++ b/src/app/demo/others/sample-page/sample-page.component.html @@ -0,0 +1,10 @@ +
+
+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dignissimos nemo animi quisquam, fugit repellat velit? Doloremque + maxime eveniet autem repellendus officia est! Ex dolore, quae reprehenderit enim vel reiciendis? +

+
+
+
diff --git a/src/app/demo/other/sample-page/sample-page.component.scss b/src/app/demo/others/sample-page/sample-page.component.scss similarity index 100% rename from src/app/demo/other/sample-page/sample-page.component.scss rename to src/app/demo/others/sample-page/sample-page.component.scss diff --git a/src/app/demo/other/sample-page/sample-page.component.ts b/src/app/demo/others/sample-page/sample-page.component.ts similarity index 51% rename from src/app/demo/other/sample-page/sample-page.component.ts rename to src/app/demo/others/sample-page/sample-page.component.ts index fdf36e7..1537136 100644 --- a/src/app/demo/other/sample-page/sample-page.component.ts +++ b/src/app/demo/others/sample-page/sample-page.component.ts @@ -1,14 +1,15 @@ // angular import import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; // project import -import { SharedModule } from 'src/app/theme/shared/shared.module'; + +import { CardComponent } from 'src/app/theme/shared/components/card/card.component'; @Component({ selector: 'app-sample-page', - standalone: true, - imports: [SharedModule], + imports: [CommonModule, CardComponent], templateUrl: './sample-page.component.html', styleUrls: ['./sample-page.component.scss'] }) -export default class SamplePageComponent {} +export class SamplePageComponent {} diff --git a/src/app/demo/authentication/login/login.component.html b/src/app/demo/pages/authentication/auth-login/auth-login.component.html similarity index 100% rename from src/app/demo/authentication/login/login.component.html rename to src/app/demo/pages/authentication/auth-login/auth-login.component.html diff --git a/src/app/demo/authentication/login/login.component.scss b/src/app/demo/pages/authentication/auth-login/auth-login.component.scss similarity index 93% rename from src/app/demo/authentication/login/login.component.scss rename to src/app/demo/pages/authentication/auth-login/auth-login.component.scss index d78ea76..5432259 100644 --- a/src/app/demo/authentication/login/login.component.scss +++ b/src/app/demo/pages/authentication/auth-login/auth-login.component.scss @@ -1,4 +1,4 @@ -@import '../../../../scss/settings/color-variables.scss'; +@import '../../../../../scss/settings/color-variables.scss'; .auth-main { position: relative; @@ -42,7 +42,7 @@ .auth-form { flex-direction: column; - background: url('../../../../assets/images/authentication/img-auth-bg.svg'); + background: url('../../../../../assets/images/authentication/img-auth-bg.svg'); min-height: 100vh; padding: 24px; background-repeat: no-repeat; diff --git a/src/app/demo/authentication/login/login.component.ts b/src/app/demo/pages/authentication/auth-login/auth-login.component.ts similarity index 71% rename from src/app/demo/authentication/login/login.component.ts rename to src/app/demo/pages/authentication/auth-login/auth-login.component.ts index b213d54..765a396 100644 --- a/src/app/demo/authentication/login/login.component.ts +++ b/src/app/demo/pages/authentication/auth-login/auth-login.component.ts @@ -1,15 +1,14 @@ -// angular import +// project import import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; @Component({ - selector: 'app-login', - standalone: true, + selector: 'app-auth-login', imports: [RouterModule], - templateUrl: './login.component.html', - styleUrls: ['./login.component.scss'] + templateUrl: './auth-login.component.html', + styleUrl: './auth-login.component.scss' }) -export default class LoginComponent { +export class AuthLoginComponent { // public method SignInOptions = [ { diff --git a/src/app/demo/authentication/register/register.component.html b/src/app/demo/pages/authentication/auth-register/auth-register.component.html similarity index 100% rename from src/app/demo/authentication/register/register.component.html rename to src/app/demo/pages/authentication/auth-register/auth-register.component.html diff --git a/src/app/demo/authentication/register/register.component.scss b/src/app/demo/pages/authentication/auth-register/auth-register.component.scss similarity index 92% rename from src/app/demo/authentication/register/register.component.scss rename to src/app/demo/pages/authentication/auth-register/auth-register.component.scss index 876e227..25af6aa 100644 --- a/src/app/demo/authentication/register/register.component.scss +++ b/src/app/demo/pages/authentication/auth-register/auth-register.component.scss @@ -1,4 +1,4 @@ -@import '../../../../scss/settings/color-variables.scss'; +@import '../../../../../scss/settings/color-variables.scss'; .auth-main { position: relative; @@ -42,7 +42,7 @@ .auth-form { flex-direction: column; - background: url('../../../../assets/images/authentication/img-auth-bg.svg'); + background: url('../../../../../assets/images/authentication/img-auth-bg.svg'); min-height: 100vh; padding: 24px; background-repeat: no-repeat; diff --git a/src/app/demo/authentication/register/register.component.ts b/src/app/demo/pages/authentication/auth-register/auth-register.component.ts similarity index 70% rename from src/app/demo/authentication/register/register.component.ts rename to src/app/demo/pages/authentication/auth-register/auth-register.component.ts index 812b0f6..2032b3e 100644 --- a/src/app/demo/authentication/register/register.component.ts +++ b/src/app/demo/pages/authentication/auth-register/auth-register.component.ts @@ -1,15 +1,14 @@ -// angular import +// Angular import import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; @Component({ - selector: 'app-register', - standalone: true, + selector: 'app-auth-register', imports: [RouterModule], - templateUrl: './register.component.html', - styleUrls: ['./register.component.scss'] + templateUrl: './auth-register.component.html', + styleUrl: './auth-register.component.scss' }) -export default class RegisterComponent { +export class AuthRegisterComponent { // public method SignUpOptions = [ { diff --git a/src/app/demo/table/README.md b/src/app/demo/table/README.md new file mode 100644 index 0000000..2bfb2ed --- /dev/null +++ b/src/app/demo/table/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 Mantis Admin Panel! 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 version 2.0.0. 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? + +🚀 Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚡ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+📱 Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+🛠 Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/ui-component/typography/typography.component.ts b/src/app/demo/ui-component/typography/typography.component.ts deleted file mode 100644 index e61c16b..0000000 --- a/src/app/demo/ui-component/typography/typography.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -// angular import -import { Component } from '@angular/core'; - -// project import -import { SharedModule } from 'src/app/theme/shared/shared.module'; - -@Component({ - selector: 'app-typography', - standalone: true, - imports: [SharedModule], - templateUrl: './typography.component.html', - styleUrls: ['./typography.component.scss'] -}) -export default class TypographyComponent {} diff --git a/src/app/demo/ui-component/ui-color/ui-color.component.ts b/src/app/demo/ui-component/ui-color/ui-color.component.ts deleted file mode 100644 index 0f761a6..0000000 --- a/src/app/demo/ui-component/ui-color/ui-color.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -// angular import -import { Component } from '@angular/core'; -import { SharedModule } from 'src/app/theme/shared/shared.module'; - -@Component({ - selector: 'app-ui-color', - standalone: true, - imports: [SharedModule], - templateUrl: './ui-color.component.html', - styleUrls: ['./ui-color.component.scss'] -}) -export default class UiColorComponent {} diff --git a/src/app/demo/widget/README.md b/src/app/demo/widget/README.md new file mode 100644 index 0000000..2bfb2ed --- /dev/null +++ b/src/app/demo/widget/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 Mantis Admin Panel! 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 version 2.0.0. 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? + +🚀 Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚡ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+📱 Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+🛠 Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/theme/layouts/admin-layout/admin-layout.component.html b/src/app/theme/layouts/admin-layout/admin-layout.component.html index fbf93f6..0ebba98 100644 --- a/src/app/theme/layouts/admin-layout/admin-layout.component.html +++ b/src/app/theme/layouts/admin-layout/admin-layout.component.html @@ -14,7 +14,7 @@
- +
@@ -43,3 +43,4 @@ + diff --git a/src/app/theme/layouts/admin-layout/admin-layout.component.ts b/src/app/theme/layouts/admin-layout/admin-layout.component.ts index b342819..2eaf238 100644 --- a/src/app/theme/layouts/admin-layout/admin-layout.component.ts +++ b/src/app/theme/layouts/admin-layout/admin-layout.component.ts @@ -4,14 +4,15 @@ import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; // Project import -import { SharedModule } from '../../shared/shared.module'; + import { NavBarComponent } from './nav-bar/nav-bar.component'; import { NavigationComponent } from './navigation/navigation.component'; +import { ConfigurationComponent } from './configuration/configuration.component'; +import { BreadcrumbComponent } from 'src/app/theme/shared/components/breadcrumb/breadcrumb.component'; @Component({ selector: 'app-admin', - standalone: true, - imports: [CommonModule, SharedModule, NavigationComponent, NavBarComponent, RouterModule], + imports: [CommonModule, BreadcrumbComponent, NavigationComponent, NavBarComponent, RouterModule, ConfigurationComponent], templateUrl: './admin-layout.component.html', styleUrls: ['./admin-layout.component.scss'] }) diff --git a/src/app/demo/default/dashboard/sales-report-chart/sales-report-chart.component.scss b/src/app/theme/layouts/admin-layout/configuration/configuration.component.html similarity index 100% rename from src/app/demo/default/dashboard/sales-report-chart/sales-report-chart.component.scss rename to src/app/theme/layouts/admin-layout/configuration/configuration.component.html diff --git a/src/app/demo/ui-component/ui-color/ui-color.component.scss b/src/app/theme/layouts/admin-layout/configuration/configuration.component.scss similarity index 100% rename from src/app/demo/ui-component/ui-color/ui-color.component.scss rename to src/app/theme/layouts/admin-layout/configuration/configuration.component.scss diff --git a/src/app/theme/layouts/admin-layout/configuration/configuration.component.ts b/src/app/theme/layouts/admin-layout/configuration/configuration.component.ts new file mode 100644 index 0000000..abfc887 --- /dev/null +++ b/src/app/theme/layouts/admin-layout/configuration/configuration.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-configuration', + imports: [], + templateUrl: './configuration.component.html', + styleUrl: './configuration.component.scss' +}) +export class ConfigurationComponent {} diff --git a/src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.html b/src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.html index e04a27f..99f375e 100644 --- a/src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.html +++ b/src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.html @@ -4,7 +4,7 @@
- +
diff --git a/src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.ts b/src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.ts index 11ba409..bf5004d 100644 --- a/src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.ts +++ b/src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.ts @@ -1,26 +1,25 @@ // angular import -import { Component, Output, EventEmitter, HostListener } from '@angular/core'; +import { Component, output } from '@angular/core'; // project import -import { SharedModule } from 'src/app/theme/shared/shared.module'; + import { NavLeftComponent } from './nav-left/nav-left.component'; import { NavRightComponent } from './nav-right/nav-right.component'; @Component({ selector: 'app-nav-bar', - standalone: true, - imports: [SharedModule, NavLeftComponent, NavRightComponent], + imports: [NavLeftComponent, NavRightComponent], templateUrl: './nav-bar.component.html', styleUrls: ['./nav-bar.component.scss'] }) export class NavBarComponent { // public props - @Output() NavCollapse = new EventEmitter(); - @Output() NavCollapsedMob = new EventEmitter(); + NavCollapse = output(); + NavCollapsedMob = output(); - navCollapsed; + navCollapsed: boolean; windowWidth: number; - navCollapsedMob; + navCollapsedMob: boolean; // Constructor constructor() { @@ -28,13 +27,6 @@ export class NavBarComponent { this.navCollapsedMob = false; } - @HostListener('window:resize', ['$event']) - // eslint-disable-next-line - onResize(event: any): void { - this.windowWidth = event.target.innerWidth; - this.navCollapseMob(); - } - // public method navCollapse() { if (this.windowWidth >= 1025) { diff --git a/src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.html b/src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.html index 3af37da..fef111f 100644 --- a/src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.html +++ b/src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.html @@ -4,11 +4,11 @@ href="javascript:" title="click to menu collapse" class="pc-head-link ms-0" - [ngClass]="{ on: navCollapsed }" + [ngClass]="{ on: navCollapsed() }" id="sidebar-hide mobile-collapse" (click)="navCollapse()" > - @if (navCollapsed === true) { + @if (navCollapsed() === true) { } @else { diff --git a/src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.ts b/src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.ts index 0a233c8..5a6a24d 100644 --- a/src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.ts +++ b/src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.ts @@ -1,29 +1,30 @@ // Angular import -import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { Component, inject, input, output } from '@angular/core'; // project import -import { SharedModule } from 'src/app/theme/shared/shared.module'; // icons -import { IconService } from '@ant-design/icons-angular'; +import { IconService, IconDirective } from '@ant-design/icons-angular'; import { MenuUnfoldOutline, MenuFoldOutline, SearchOutline } from '@ant-design/icons-angular/icons'; @Component({ selector: 'app-nav-left', - standalone: true, - imports: [SharedModule], + imports: [IconDirective, CommonModule], templateUrl: './nav-left.component.html', styleUrls: ['./nav-left.component.scss'] }) export class NavLeftComponent { + private iconService = inject(IconService); + // public props - @Input() navCollapsed!: boolean; - @Output() NavCollapse = new EventEmitter(); - @Output() NavCollapsedMob = new EventEmitter(); + navCollapsed = input.required(); + NavCollapse = output(); + NavCollapsedMob = output(); windowWidth: number; // Constructor - constructor(private iconService: IconService) { + constructor() { this.windowWidth = window.innerWidth; this.iconService.addIcon(...[MenuUnfoldOutline, MenuFoldOutline, SearchOutline]); } diff --git a/src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.html b/src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.html index f80acd6..221aee8 100644 --- a/src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.html +++ b/src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.html @@ -1,6 +1,6 @@
  • - +
  • diff --git a/src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.ts b/src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.ts index 29c4a88..3a0559e 100644 --- a/src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.ts +++ b/src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.ts @@ -1,14 +1,11 @@ // angular import -import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Component, inject, input, output } from '@angular/core'; import { RouterModule } from '@angular/router'; // project import -import { SharedModule } from 'src/app/theme/shared/shared.module'; - -// third party // icon -import { IconService } from '@ant-design/icons-angular'; +import { IconService, IconDirective } from '@ant-design/icons-angular'; import { BellOutline, SettingOutline, @@ -28,21 +25,24 @@ import { ArrowRightOutline, GithubOutline } from '@ant-design/icons-angular/icons'; +import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap'; +import { NgScrollbarModule } from 'ngx-scrollbar'; @Component({ selector: 'app-nav-right', - standalone: true, - imports: [SharedModule, RouterModule], + imports: [IconDirective, RouterModule, NgScrollbarModule, NgbNavModule, NgbDropdownModule], templateUrl: './nav-right.component.html', styleUrls: ['./nav-right.component.scss'] }) export class NavRightComponent { - @Input() styleSelectorToggle!: boolean; - @Output() Customize = new EventEmitter(); + private iconService = inject(IconService); + + styleSelectorToggle = input(); + Customize = output(); windowWidth: number; screenFull: boolean = true; - constructor(private iconService: IconService) { + constructor() { this.windowWidth = window.innerWidth; this.iconService.addIcon( ...[ diff --git a/src/app/theme/layouts/admin-layout/navigation/nav-content/nav-collapse/nav-collapse.component.ts b/src/app/theme/layouts/admin-layout/navigation/nav-content/nav-collapse/nav-collapse.component.ts index 8dc2505..23f5c0b 100644 --- a/src/app/theme/layouts/admin-layout/navigation/nav-content/nav-collapse/nav-collapse.component.ts +++ b/src/app/theme/layouts/admin-layout/navigation/nav-content/nav-collapse/nav-collapse.component.ts @@ -1,18 +1,18 @@ // Angular import -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, Input, output } from '@angular/core'; import { animate, style, transition, trigger } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; // project import import { NavigationItem } from '../../navigation'; -import { SharedModule } from 'src/app/theme/shared/shared.module'; + import { NavItemComponent } from '../nav-item/nav-item.component'; +import { IconDirective } from '@ant-design/icons-angular'; @Component({ selector: 'app-nav-collapse', - standalone: true, - imports: [CommonModule, SharedModule, RouterModule, NavItemComponent], + imports: [CommonModule, IconDirective, RouterModule, NavItemComponent], templateUrl: './nav-collapse.component.html', styleUrls: ['./nav-collapse.component.scss'], animations: [ @@ -29,7 +29,7 @@ export class NavCollapseComponent { // public props // Compact Menu in use For Sub Child Open in sidebar menu - @Output() showCollapseItem: EventEmitter = new EventEmitter(); + showCollapseItem = output(); // all Version Get Item(Component Name Take) @Input() item!: NavigationItem; @@ -75,7 +75,7 @@ export class NavCollapseComponent { } // for Compact Menu - subMenuCollapse(item: object) { + subMenuCollapse(item: void) { this.showCollapseItem.emit(item); } } diff --git a/src/app/theme/layouts/admin-layout/navigation/nav-content/nav-content.component.html b/src/app/theme/layouts/admin-layout/navigation/nav-content/nav-content.component.html index 14060c9..6bb18f4 100644 --- a/src/app/theme/layouts/admin-layout/navigation/nav-content/nav-content.component.html +++ b/src/app/theme/layouts/admin-layout/navigation/nav-content/nav-content.component.html @@ -1,5 +1,5 @@ - +