diff --git a/angular.json b/angular.json
index 66b2b8a5..fff7647f 100644
--- a/angular.json
+++ b/angular.json
@@ -17,16 +17,27 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
- "allowedCommonJsDependencies": ["apexcharts"],
+ "allowedCommonJsDependencies": [
+ "apexcharts"
+ ],
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
- "assets": ["src/favicon.ico", "src/assets", "src/fake-data"],
- "styles": ["node_modules/bootstrap/scss/bootstrap.scss", "src/styles.scss"],
- "scripts": ["node_modules/apexcharts/dist/apexcharts.min.js"]
+ "assets": [
+ "src/favicon.ico",
+ "src/assets",
+ "src/fake-data"
+ ],
+ "styles": [
+ "node_modules/bootstrap/scss/bootstrap.scss",
+ "src/styles.scss"
+ ],
+ "scripts": [
+ "node_modules/apexcharts/dist/apexcharts.min.js"
+ ]
},
"configurations": {
"production": {
@@ -87,15 +98,32 @@
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
- "assets": ["src/favicon.ico", "src/assets"],
- "styles": ["src/styles.scss"],
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ],
+ "styles": [
+ "src/styles.scss"
+ ],
"scripts": []
}
+ },
+ "lint": {
+ "builder": "@angular-eslint/builder:lint",
+ "options": {
+ "lintFilePatterns": [
+ "src/**/*.ts",
+ "src/**/*.html"
+ ]
+ }
}
}
}
},
"cli": {
- "analytics": "0eaad924-6e2a-434b-aad5-51d9f46776fc"
+ "analytics": "0eaad924-6e2a-434b-aad5-51d9f46776fc",
+ "schematicCollections": [
+ "angular-eslint"
+ ]
}
}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..926b2ac4
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,46 @@
+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",
+ }],
+ },
+}, ...compat.extends("plugin:@angular-eslint/template/recommended").map(config => ({
+ ...config,
+ files: ["**/*.html"],
+})), {
+ files: ["**/*.html"],
+ rules: {},
+}];
\ No newline at end of file
diff --git a/package.json b/package.json
index bb8a17fe..d6a2119c 100644
--- a/package.json
+++ b/package.json
@@ -8,44 +8,53 @@
"build": "ng build",
"build-prod": "ng build --configuration production --base-href /demos/admin-templates/datta-able/angular/free/",
"watch": "ng build --watch --configuration development",
- "test": "ng test"
+ "test": "ng test",
+ "lint": "ng lint",
+ "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/localize": "^18.0.5",
- "@angular/platform-browser": "^18.0.5",
- "@angular/platform-browser-dynamic": "^18.0.5",
- "@angular/router": "^18.0.5",
- "@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/localize": "19.0.5",
+ "@angular/platform-browser": "19.0.5",
+ "@angular/platform-browser-dynamic": "19.0.5",
+ "@angular/router": "19.0.5",
+ "@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",
- "screenfull": "^6.0.2",
- "tslib": "^2.6.3",
- "zone.js": "~0.14.7"
+ "screenfull": "6.0.2",
+ "tslib": "2.8.1",
+ "zone.js": "~0.15.0"
},
"devDependencies": {
- "@angular-devkit/build-angular": "^18.0.6",
- "@angular/cli": "~18.0.6",
- "@angular/compiler-cli": "^18.0.5",
- "@types/jasmine": "~5.1.4",
- "@types/node": "^20.14.9",
- "jasmine-core": "~5.1.2",
- "karma": "~6.4.3",
+ "@angular-devkit/build-angular": "19.0.6",
+ "@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/lodash": "4.17.13",
+ "@types/node": "22.10.2",
+ "angular-eslint": "19.0.2",
+ "eslint": "^9.16.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",
+ "typescript-eslint": "8.18.0"
}
-}
+}
\ No newline at end of file
diff --git a/src/app/app-config.ts b/src/app/app-config.ts
index 5dc26835..e69de29b 100644
--- a/src/app/app-config.ts
+++ b/src/app/app-config.ts
@@ -1,4 +0,0 @@
-export class DattaConfig {
- static layout: string = 'vertical';
- static isCollapseMenu: Boolean = false;
-}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0a9c9677..dbc56f9b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -15,7 +15,7 @@ const routes: Routes = [
},
{
path: 'dashboard',
- loadComponent: () => import('./demo/dashboard/dashboard.component')
+ loadComponent: () => import('./demo/dashboard/dashboard.component').then((c) => c.DashboardComponent)
},
{
path: 'basic',
@@ -31,7 +31,7 @@ const routes: Routes = [
},
{
path: 'apexchart',
- loadComponent: () => import('./demo/chart/apex-chart/apex-chart.component')
+ loadComponent: () => import('./demo/pages/core-chart/apex-chart/apex-chart.component')
},
{
path: 'sample-page',
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4e620726..d3dbe45a 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,16 +1,22 @@
-import { Component, OnInit } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+// Angular import
+import { Component, OnInit, inject } from '@angular/core';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+
+// project import
+import { SpinnerComponent } from './theme/shared/components/spinner/spinner.component';
@Component({
selector: 'app-root',
+ imports: [SpinnerComponent, RouterModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
- title = 'datta-able';
+ private router = inject(Router);
- constructor(private router: Router) {}
+ title = 'datta-able';
+ // life cycle hook
ngOnInit() {
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
deleted file mode 100644
index 17369129..00000000
--- a/src/app/app.module.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-// angular import
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { AppRoutingModule } from './app-routing.module';
-
-// project import
-import { AppComponent } from './app.component';
-import { SharedModule } from './theme/shared/shared.module';
-import { GuestComponent } from './theme/layout/guest/guest.component';
-import { AdminComponent } from './theme/layout/admin/admin.component';
-import { ConfigurationComponent } from './theme/layout/admin/configuration/configuration.component';
-import { NavBarComponent } from './theme/layout/admin/nav-bar/nav-bar.component';
-import { NavigationComponent } from './theme/layout/admin/navigation/navigation.component';
-import { NavLeftComponent } from './theme/layout/admin/nav-bar/nav-left/nav-left.component';
-import { NavRightComponent } from './theme/layout/admin/nav-bar/nav-right/nav-right.component';
-import { NavContentComponent } from './theme/layout/admin/navigation/nav-content/nav-content.component';
-import { NavLogoComponent } from './theme/layout/admin/navigation/nav-logo/nav-logo.component';
-import { NavCollapseComponent } from './theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component';
-import { NavGroupComponent } from './theme/layout/admin/navigation/nav-content/nav-group/nav-group.component';
-import { NavItemComponent } from './theme/layout/admin/navigation/nav-content/nav-item/nav-item.component';
-import { NavSearchComponent } from './theme/layout/admin/nav-bar/nav-left/nav-search/nav-search.component';
-import { NavigationItem } from './theme/layout/admin/navigation/navigation';
-import { ToggleFullScreenDirective } from './theme/shared/components/full-screen/toggle-full-screen';
-
-@NgModule({
- declarations: [
- AppComponent,
- GuestComponent,
- AdminComponent,
- ConfigurationComponent,
- NavBarComponent,
- NavigationComponent,
- NavLeftComponent,
- NavRightComponent,
- NavContentComponent,
- NavLogoComponent,
- NavCollapseComponent,
- NavGroupComponent,
- NavItemComponent,
- NavSearchComponent,
- ToggleFullScreenDirective
- ],
- imports: [BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, SharedModule, BrowserAnimationsModule],
- providers: [NavigationItem],
- 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 00000000..b921d982
--- /dev/null
+++ b/src/app/demo/admin-panel/README.md
@@ -0,0 +1,24 @@
+**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:
+
+# Datta Able Admin Panel - Unlock Premium Features with the Pro Version
+
+Looking for more advanced features and pages? This page(folder) is part of the premium version of our 4.0.0 template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level!
+
+## Included in the Pro Version:
+
+- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations.
+- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development.
+- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management.
+- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components.
+- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design.
+- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options.
+- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management.
+- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually.
+- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery.
+- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager.
+- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback.
+- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages.
+
+👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - 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 00000000..b921d982
--- /dev/null
+++ b/src/app/demo/application/README.md
@@ -0,0 +1,24 @@
+**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:
+
+# Datta Able Admin Panel - Unlock Premium Features with the Pro Version
+
+Looking for more advanced features and pages? This page(folder) is part of the premium version of our 4.0.0 template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level!
+
+## Included in the Pro Version:
+
+- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations.
+- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development.
+- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management.
+- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components.
+- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design.
+- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options.
+- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management.
+- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually.
+- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery.
+- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager.
+- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback.
+- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages.
+
+👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience!
diff --git a/src/app/demo/dashboard/dashboard.component.html b/src/app/demo/dashboard/dashboard.component.html
index c5e0150d..b5e9b5b3 100644
--- a/src/app/demo/dashboard/dashboard.component.html
+++ b/src/app/demo/dashboard/dashboard.component.html
@@ -15,7 +15,7 @@
-
+
@@ -81,14 +81,14 @@
Target:
{{ list.target }}
-
+
Duration:
{{ list.duration }}
-
+
@@ -112,15 +112,15 @@
- @for (list of progressing; track list) {
+ @for (list of progressing; track list; let last = $last) {
{{ list.number }}
{{ list.amount }}
-
}
@@ -128,7 +128,7 @@
{{ list.amount }}
-
+
@@ -148,8 +148,8 @@
- Reject
- Approve
+ Reject
+ Approve
|
}
diff --git a/src/app/demo/dashboard/dashboard.component.ts b/src/app/demo/dashboard/dashboard.component.ts
index b1943b78..a0496d4f 100644
--- a/src/app/demo/dashboard/dashboard.component.ts
+++ b/src/app/demo/dashboard/dashboard.component.ts
@@ -1,10 +1,11 @@
// angular import
import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
// project import
import { SharedModule } from 'src/app/theme/shared/shared.module';
-declare const AmCharts: any;
+declare const AmCharts;
import '../../../assets/charts/amchart/amcharts.js';
import '../../../assets/charts/amchart/gauge.js';
@@ -21,12 +22,12 @@ import mapColor from 'src/fake-data/map-color-data.json';
@Component({
selector: 'app-dashboard',
- standalone: true,
- imports: [SharedModule],
+ imports: [CommonModule, SharedModule],
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
-export default class DashboardComponent implements OnInit {
+export class DashboardComponent implements OnInit {
+ // life cycle event
ngOnInit() {
setTimeout(() => {
const latlong = dataJson;
@@ -216,7 +217,7 @@ export default class DashboardComponent implements OnInit {
balloon: {
drop: true,
adjustBorderColor: false,
- color: '#ffffff',
+ color: '#222',
fillAlphas: 0.2,
bullet: 'round',
bulletBorderAlpha: 1,
@@ -233,6 +234,7 @@ export default class DashboardComponent implements OnInit {
}, 500);
}
+ // public method
sales = [
{
title: 'Daily Sales',
@@ -240,23 +242,26 @@ export default class DashboardComponent implements OnInit {
amount: '$249.95',
percentage: '67%',
progress: 50,
- design: 'col-md-6'
+ design: 'col-md-6',
+ progress_bg: 'progress-c-theme'
},
{
title: 'Monthly Sales',
icon: 'icon-arrow-down text-c-red',
- amount: '$2.942.32',
+ amount: '$2,942.32',
percentage: '36%',
progress: 35,
- design: 'col-md-6'
+ design: 'col-md-6',
+ progress_bg: 'progress-c-theme2'
},
{
title: 'Yearly Sales',
icon: 'icon-arrow-up text-c-green',
- amount: '$8.638.32',
+ amount: '$8,638.32',
percentage: '80%',
progress: 70,
- design: 'col-md-12'
+ design: 'col-md-12',
+ progress_bg: 'progress-c-theme'
}
];
@@ -284,7 +289,9 @@ export default class DashboardComponent implements OnInit {
target: '35,098',
progress: 60,
duration: '3,539',
- progress2: 45
+ progress2: 45,
+ progress_bg: 'progress-c-theme',
+ progress_bg_2: 'progress-c-theme2'
},
{
design: 'col-md-6',
@@ -295,7 +302,9 @@ export default class DashboardComponent implements OnInit {
target: '34,185',
progress: 40,
duration: '4,567',
- progress2: 70
+ progress2: 70,
+ progress_bg: 'progress-c-theme',
+ progress_bg_2: 'progress-c-theme2'
},
{
design: 'col-md-6',
@@ -306,7 +315,9 @@ export default class DashboardComponent implements OnInit {
target: '25,998',
progress: 80,
duration: '7,753',
- progress2: 50
+ progress2: 50,
+ progress_bg: 'progress-c-theme',
+ progress_bg_2: 'progress-c-theme2'
}
];
@@ -314,27 +325,32 @@ export default class DashboardComponent implements OnInit {
{
number: '5',
amount: '384',
- progress: 70
+ progress: 70,
+ progress_bg: 'progress-c-theme'
},
{
number: '4',
amount: '145',
- progress: 35
+ progress: 35,
+ progress_bg: 'progress-c-theme'
},
{
number: '3',
amount: '24',
- progress: 25
+ progress: 25,
+ progress_bg: 'progress-c-theme'
},
{
number: '2',
amount: '1',
- progress: 10
+ progress: 10,
+ progress_bg: 'progress-c-theme'
},
{
number: '1',
amount: '0',
- progress: 0
+ progress: 0,
+ progress_bg: 'progress-c-theme'
}
];
@@ -342,35 +358,35 @@ export default class DashboardComponent implements OnInit {
{
src: 'assets/images/user/avatar-1.jpg',
title: 'Isabella Christensen',
- text: 'Lorem Ipsum is simply dummy',
+ text: 'Requested account activation',
time: '11 MAY 12:56',
color: 'text-c-green'
},
{
src: 'assets/images/user/avatar-2.jpg',
title: 'Ida Jorgensen',
- text: 'Lorem Ipsum is simply',
+ text: 'Pending document verification',
time: '11 MAY 10:35',
color: 'text-c-red'
},
{
src: 'assets/images/user/avatar-3.jpg',
title: 'Mathilda Andersen',
- text: 'Lorem Ipsum is simply dummy',
+ text: 'Completed profile setup',
time: '9 MAY 17:38',
color: 'text-c-green'
},
{
src: 'assets/images/user/avatar-1.jpg',
title: 'Karla Soreness',
- text: 'Lorem Ipsum is simply',
+ text: 'Requires additional information',
time: '19 MAY 12:56',
color: 'text-c-red'
},
{
src: 'assets/images/user/avatar-2.jpg',
title: 'Albert Andersen',
- text: 'Lorem Ipsum is',
+ text: 'Approved and verified account',
time: '21 July 12:56',
color: 'text-c-green'
}
diff --git a/src/app/demo/extension/README.md b/src/app/demo/extension/README.md
new file mode 100644
index 00000000..b921d982
--- /dev/null
+++ b/src/app/demo/extension/README.md
@@ -0,0 +1,24 @@
+**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:
+
+# Datta Able Admin Panel - Unlock Premium Features with the Pro Version
+
+Looking for more advanced features and pages? This page(folder) is part of the premium version of our 4.0.0 template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level!
+
+## Included in the Pro Version:
+
+- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations.
+- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development.
+- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management.
+- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components.
+- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design.
+- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options.
+- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management.
+- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually.
+- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery.
+- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager.
+- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback.
+- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages.
+
+👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience!
diff --git a/src/app/demo/layout/README.md b/src/app/demo/layout/README.md
new file mode 100644
index 00000000..b921d982
--- /dev/null
+++ b/src/app/demo/layout/README.md
@@ -0,0 +1,24 @@
+**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:
+
+# Datta Able Admin Panel - Unlock Premium Features with the Pro Version
+
+Looking for more advanced features and pages? This page(folder) is part of the premium version of our 4.0.0 template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level!
+
+## Included in the Pro Version:
+
+- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations.
+- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development.
+- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management.
+- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components.
+- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design.
+- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options.
+- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management.
+- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually.
+- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery.
+- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager.
+- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback.
+- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages.
+
+👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience!
diff --git a/src/app/demo/chart/apex-chart/apex-chart.component.html b/src/app/demo/pages/core-chart/apex-chart/apex-chart.component.html
similarity index 100%
rename from src/app/demo/chart/apex-chart/apex-chart.component.html
rename to src/app/demo/pages/core-chart/apex-chart/apex-chart.component.html
diff --git a/src/app/demo/chart/apex-chart/apex-chart.component.scss b/src/app/demo/pages/core-chart/apex-chart/apex-chart.component.scss
similarity index 100%
rename from src/app/demo/chart/apex-chart/apex-chart.component.scss
rename to src/app/demo/pages/core-chart/apex-chart/apex-chart.component.scss
diff --git a/src/app/demo/chart/apex-chart/apex-chart.component.ts b/src/app/demo/pages/core-chart/apex-chart/apex-chart.component.ts
similarity index 82%
rename from src/app/demo/chart/apex-chart/apex-chart.component.ts
rename to src/app/demo/pages/core-chart/apex-chart/apex-chart.component.ts
index a689b3a6..43dd72a5 100644
--- a/src/app/demo/chart/apex-chart/apex-chart.component.ts
+++ b/src/app/demo/pages/core-chart/apex-chart/apex-chart.component.ts
@@ -1,47 +1,11 @@
// angular import
-import { Component, ViewChild } from '@angular/core';
+import { Component, viewChild } from '@angular/core';
// project import
import { SharedModule } from 'src/app/theme/shared/shared.module';
// third party
-import { NgApexchartsModule } from 'ng-apexcharts';
-
-import {
- ApexAxisChartSeries,
- ApexNonAxisChartSeries,
- ApexChart,
- ChartComponent,
- ApexDataLabels,
- ApexPlotOptions,
- ApexYAxis,
- ApexResponsive,
- ApexLegend,
- ApexStroke,
- ApexXAxis,
- ApexFill,
- ApexTooltip,
- ApexTitleSubtitle,
- ApexGrid
-} from 'ng-apexcharts';
-
-export type ChartOptions = {
- series: ApexAxisChartSeries | ApexNonAxisChartSeries;
- chart: ApexChart;
- dataLabels: ApexDataLabels;
- plotOptions: ApexPlotOptions;
- yaxis: ApexYAxis;
- xaxis: ApexXAxis;
- fill: ApexFill;
- tooltip: ApexTooltip;
- stroke: ApexStroke;
- legend: ApexLegend;
- responsive: ApexResponsive[];
- colors: string[];
- labels: string[];
- title: ApexTitleSubtitle;
- grid: ApexGrid;
-};
+import { ApexOptions, ChartComponent, NgApexchartsModule } from 'ng-apexcharts';
@Component({
selector: 'app-apex-chart',
@@ -51,13 +15,13 @@ export type ChartOptions = {
styleUrls: ['./apex-chart.component.scss']
})
export default class ApexChartComponent {
- @ViewChild('chart') chart: ChartComponent;
- barSimpleChart: Partial;
- barStackedChart: Partial;
- areaAngleChart: Partial;
- areaSmoothChart: Partial;
- lineAreaChart: Partial;
- donutChart: Partial;
+ chart = viewChild('chart');
+ barSimpleChart: Partial;
+ barStackedChart: Partial;
+ areaAngleChart: Partial;
+ areaSmoothChart: Partial;
+ lineAreaChart: Partial;
+ donutChart: Partial;
constructor() {
this.barSimpleChart = {
diff --git a/src/app/demo/ui-elements/ui-basic/basic-collapse/basic-collapse.component.html b/src/app/demo/ui-elements/ui-basic/basic-collapse/basic-collapse.component.html
index 8bf57e4a..00b3da59 100644
--- a/src/app/demo/ui-elements/ui-basic/basic-collapse/basic-collapse.component.html
+++ b/src/app/demo/ui-elements/ui-basic/basic-collapse/basic-collapse.component.html
@@ -9,8 +9,10 @@ Basic Collapse
type="button"
class="btn btn-primary"
(click)="collapse.toggle()"
+ (keydown)="collapse.toggle()"
+ (keyup)="collapse.toggle()"
[attr.aria-expanded]="!isCollapsed"
- aria-controls="collapseExample"
+ title="Toggle Collapse"
>
Toggle with Function
diff --git a/src/app/demo/widget/README.md b/src/app/demo/widget/README.md
new file mode 100644
index 00000000..b921d982
--- /dev/null
+++ b/src/app/demo/widget/README.md
@@ -0,0 +1,24 @@
+**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:
+
+# Datta Able Admin Panel - Unlock Premium Features with the Pro Version
+
+Looking for more advanced features and pages? This page(folder) is part of the premium version of our 4.0.0 template. Upgrade to the Pro version to access these exclusive pages and take your project to the next level!
+
+## Included in the Pro Version:
+
+- [Dashboard](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/dashboard/default) : Interactive and insightful dashboards with essential data visualizations.
+- [Widget](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/widget/statistic) : Pre-built widgets to enhance functionality and speed up development.
+- [Admin Panel](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panel for efficient management.
+- [Component](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/alert) : A diverse library of reusable and customizable UI components.
+- [Icons](https://feathericons.com/) : A variety of icons for intuitive navigation and design.
+- [Forms](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/forms/basic) : Dynamic forms with validation and customization options.
+- [Table](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/bootstrap/basicTable) : Structured and sortable tables for data management.
+- [Chart](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/chart/apex-chart) : Beautifully rendered charts to present data visually.
+- [Authentication](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/auth/signup) : Secure authentication pages with login, signup, and password recovery.
+- [To Do List](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/todo/basic) : A functional and intuitive task manager.
+- [Rating](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/advance/rating) : Integrated rating components for user feedback.
+- [Toasts](https://codedthemes.com/demos/admin-templates/datta-able/angular/default/basic/toasts) : Notification system for alerts and messages.
+
+👉 [Explore the Pro version now](https://codedthemes.com/item/datta-able-angular/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) - and supercharge your development experience!
diff --git a/src/app/theme/layout/admin/admin.component.html b/src/app/theme/layout/admin/admin.component.html
index 2dfc40ce..bdc59007 100644
--- a/src/app/theme/layout/admin/admin.component.html
+++ b/src/app/theme/layout/admin/admin.component.html
@@ -6,16 +6,16 @@
}"
(NavCollapse)="this.navCollapsed = !this.navCollapsed"
(NavCollapsedMob)="navMobClick()"
->
-
+/>
+
-
+
diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts
index 6c2b2024..0194b38e 100644
--- a/src/app/theme/layout/admin/admin.component.ts
+++ b/src/app/theme/layout/admin/admin.component.ts
@@ -1,31 +1,33 @@
// angular import
import { Component } from '@angular/core';
-import { Location } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
// project import
-import { DattaConfig } from 'src/app/app-config';
+import { NavBarComponent } from './nav-bar/nav-bar.component';
+import { NavigationComponent } from './navigation/navigation.component';
+import { ConfigurationComponent } from 'src/app/theme/layout/admin/configuration/configuration.component';
+import { BreadcrumbsComponent } from '../../shared/components/breadcrumbs/breadcrumbs.component';
@Component({
selector: 'app-admin',
+ imports: [NavBarComponent, NavigationComponent, RouterModule, CommonModule, ConfigurationComponent, BreadcrumbsComponent],
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.scss']
})
export class AdminComponent {
- navCollapsed: any;
+ // public props
+ navCollapsed;
navCollapsedMob: boolean;
windowWidth: number;
- constructor(private location: Location) {
- let current_url = this.location.path();
- if (this.location['_baseHref']) {
- current_url = this.location['_baseHref'] + this.location.path();
- }
-
+ // constructor
+ constructor() {
this.windowWidth = window.innerWidth;
- this.navCollapsed = this.windowWidth >= 992 ? DattaConfig.isCollapseMenu : false;
this.navCollapsedMob = false;
}
+ // public method
navMobClick() {
if (this.navCollapsedMob && !document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) {
this.navCollapsedMob = !this.navCollapsedMob;
@@ -37,6 +39,7 @@ export class AdminComponent {
}
}
+ // this is for eslint rule
handleKeyDown(event: KeyboardEvent): void {
if (event.key === 'Escape') {
this.closeMenu();
@@ -45,7 +48,7 @@ export class AdminComponent {
closeMenu() {
if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) {
- document.querySelector('app-navigation.pcoded-navbar')?.classList.remove('mob-open');
+ document.querySelector('app-navigation.pcoded-navbar').classList.remove('mob-open');
}
}
}
diff --git a/src/app/theme/layout/admin/configuration/configuration.component.ts b/src/app/theme/layout/admin/configuration/configuration.component.ts
index 9d69d4bc..5fe24688 100644
--- a/src/app/theme/layout/admin/configuration/configuration.component.ts
+++ b/src/app/theme/layout/admin/configuration/configuration.component.ts
@@ -1,3 +1,4 @@
+// angular import
import { Component } from '@angular/core';
@Component({
diff --git a/src/app/theme/layout/admin/nav-bar/nav-bar.component.html b/src/app/theme/layout/admin/nav-bar/nav-bar.component.html
index 82709ad0..3e1e4b32 100644
--- a/src/app/theme/layout/admin/nav-bar/nav-bar.component.html
+++ b/src/app/theme/layout/admin/nav-bar/nav-bar.component.html
@@ -1,7 +1,7 @@