Stage v7.0.0

[ct-anjali-patel]

Commit Checklist

• Remove UNUSED comment code
• Remove any logging like console.log
• Remove all warnings and errors while build
• Check vulnerabilities
• Make sure build for production is working. Try running command for prod build in local.
• Fix prettier: npx prettier --write .
• Fix eslint: npx eslint src\ --fix command
• Push package.lock only if you used npm, push yarn.lock only if you used yarn. NPM will udpate both lock file so make sure you dont push yarn.lock updated by NPM
• WCAG

General

• Follow import structure. module/third-party/files/component/style/types/asset
• Try to use theme for design like palette, typography, variant, components, etc. (don't use custom color code anyhow)
• Before adding custom style follow our pre-built components/elements

[phoenixcoded20]

{
"file": ".yarn/install-state.gz",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "high",
"description": "No code patch is available for review, which does not provide any context or changes to evaluate. A code patch is necessary for analysis.",
"recommendedFix": "Provide a valid patch that contains code changes for review.",
"codeFix": "N/A"
}
]
}

[phoenixcoded20]

{
"file": "angular.json",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "The usage of 'scripts' in the build configuration can lead to increased bundle sizes and potential performance issues. It is generally advised to import scripts using ES6 imports in the relevant Angular component or service instead of bundling them via 'angular.json'.",
"recommendedFix": "Remove the 'scripts' entry from the build configuration and import apexcharts directly where needed in the application.",
"codeFix": "json\n- \"scripts\": [\"node_modules/apexcharts/dist/apexcharts.min.js\"],\n"
}
]
}

[phoenixcoded20]

{
"file": "src/app/demo/dashboard/dashboard.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using self-closing tags for components is generally preferred in React for improved clarity and to follow JSX convention, especially when there are no children. The original format of using closing tags is less concise and can lead to confusion.",
"recommendedFix": "Alter the component tags to use a self-closing format to improve readability and express intent.",
"codeFix": "diff\n@@ -15,7 +15,7 @@ <h3 class=\"f-w-300 d-flex align-items-center m-b-0\">\n </div>\n </div>\n <div class=\"m-t-30\">\n- <ngb-progressbar type=\"progress-bar {{ sale.progress_bg }}\" height=\"7px\" [value]=\"sale.progress\"></ngb-progressbar>\n+ <ngb-progressbar type=\"progress-bar {{ sale.progress_bg }}\" height=\"7px\" [value]=\"sale.progress\"/>\n </div>\n </app-card>\n </div>\n@@ -81,14 +81,14 @@ <h6 class=\"text-center m-b-10\">\n <span class=\"text-muted m-r-5\">Target:</span>\n {{ list.target }}\n </h6>\n- <ngb-progressbar type=\"progress-bar {{ list.progress_bg }}\" height=\"6px\" [value]=\"list.progress\"></ngb-progressbar>\n+ <ngb-progressbar type=\"progress-bar {{ list.progress_bg }}\" height=\"6px\" [value]=\"list.progress\"/>\n </div>\n <div class=\"col-6\">\n <h6 class=\"text-center m-b-10\">\n <span class=\"text-muted m-r-5\">Duration:</span>\n {{ list.duration }}\n </h6>\n- <ngb-progressbar type=\"progress-bar {{ list.progress_bg_2 }}\" height=\"6px\" [value]=\"list.progress2\"></ngb-progressbar>\n+ <ngb-progressbar type=\"progress-bar {{ list.progress_bg_2 }}\" height=\"6px\" [value]=\"list.progress2\"/>\n </div>\n </div>\n </div>\n@@ -120,7 +120,7 @@ <h6 class=\"align-items-center float-start\">\n </h6>\n <h6 class=\"align-items-center float-end\">{{ list.amount }}</h6>\n <div class=\"m-t-30\" [ngClass]=\"{ 'm-b-20': !last }\">\n- <ngb-progressbar type=\"progress-bar {{ list.progress_bg }}\" height=\"6px\" [value]=\"list.progress\"></ngb-progressbar>\n+ <ngb-progressbar type=\"progress-bar {{ list.progress_bg }}\" height=\"6px\" [value]=\"list.progress\"/>\n </div>\n </div>\n }\n"
}
]
}

[phoenixcoded20]

{
"file": "src/app/demo/pages/authentication/auth-signin/auth-signin.component.html",
"approved": false,

"issues": [
{
"type": "bug",
"severity": "high",
"description": "The id attribute for the password field is duplicated. This can lead to DOM issues, as IDs should be unique within a document.",
"recommendedFix": "Change the id of the second password input to ensure it is unique.",
"codeFix": "@@ -45,7 +45,7 @@ \n type="text" \n- id="password" \n+ id="confirmPassword" \n class="form-control" \n [field]="loginForm.password" \n [class.is-invalid]="submitted() && loginForm.password().errors().length > 0" \n placeholder="Password (min. 8 characters)" \n />"
}
]
}

[phoenixcoded20]

{
"file": "src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts",
"approved": false,

"issues": [
{
"type": "bug",
"severity": "high",
"description": "The import of 'Field' has been replaced by 'FormField', but this may affect how form fields are being referenced and utilized in the component. This needs to be verified as it might lead to runtime errors if 'FormField' and 'Field' are not interchangeable.",
"recommendedFix": "Ensure that 'FormField' is the correct replacement for 'Field' in the context of the form implementation. If it is not appropriate, revert the change.",
"codeFix": "diff\n-import { email, Field, form, minLength, required } from '@angular/forms/signals';\n+import { email, form, FormField, minLength, required } from '@angular/forms/signals';\n"
}
]
}

[phoenixcoded20]

{
"file": "src/app/demo/pages/authentication/auth-signup/auth-signup.component.html",
"approved": false,

"issues": [
{
"type": "bug",
"severity": "high",
"description": "The attribute 'ormField' is a typo and should be 'formField'.",
"recommendedFix": "Update 'ormField' to 'formField' in the appropriate places.",
"codeFix": "@@ -37,7 +37,7 @@\n id="floatingInput"\n [class.is-invalid]="submitted() && registerForm.email().invalid()"\n placeholder="Email Address"\n- [field]="registerForm.email"\n+ [formField]="registerForm.email"\n />\n@@ -53,7 +53,7 @@\n type="password"\n id="password"\n class="form-control"\n- [field]="registerForm.password"\n+ [formField]="registerForm.password"\n [class.is-invalid]="submitted() && registerForm.password().errors().length > 0"\n placeholder="Password (min. 8 characters)"\n />\n@@ -62,7 +62,7 @@\n type="text"\n id="password"\n class="form-control"\n- [field]="registerForm.password"\n+ [formField]="registerForm.password"\n [class.is-invalid]="submitted() && registerForm.password().errors().length > 0"\n placeholder="Password (min. 8 characters)"\n />"
}
]
}

[phoenixcoded20]

{
"file": "src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts",
"approved": false,
"issues": [
{
"type": "bug",
"severity": "high",
"description": "The 'Field' import has been replaced with 'FormField', but the change may not be correctly aligned with the API expectations of the form library. This could lead to runtime errors if 'FormField' is not a valid replacement or does not function the same way as 'Field'.",
"recommendedFix": "Verify whether 'FormField' is the correct and intended import to use in place of 'Field'. If it is, ensure that any usage in the component is adjusted accordingly.",
"codeFix": "import { email, form, Field, minLength, required } from '@angular/forms/signals';\nimports: [CommonModule, RouterModule, SharedModule, Field],"
}
]
}

[phoenixcoded20]

{
"file": "src/app/demo/pages/core-chart/apex-chart/apex-chart.component.html",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "The closing tag for the custom component 'apx-chart' has been changed from a separate closing tag to a self-closing syntax. While self-closing syntax is valid for components without children, it may lead to confusion if 'apx-chart' were to accept children in the future. It's better to maintain the standard closing tag for clarity and flexibility.",
"recommendedFix": "Revert the changes to keep the traditional closing tag format for better maintainability and readability.",
"codeFix": "- />\n+ >"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layout/guest/guest.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "low",
"description": "Using self-closing tags is less common in HTML. This can lead to confusion regarding the expected structure of the document.",
"recommendedFix": "Revert to the traditional opening and closing tag format.",
"codeFix": ""
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/shared/components/breadcrumbs/breadcrumbs.component.ts",
"approved": false,

"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "Using ChangeDetectorRef to manually trigger change detection is generally not needed when using OnPush strategy. It can lead to unnecessary performance overhead and is counter to the benefits of the OnPush strategy.",
"recommendedFix": "Remove the call to this.cdr.detectChanges() to rely on the default change detection mechanism.",
"codeFix": "- this.cdr.detectChanges();\n"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/shared/components/card/card.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "low",
"description": "The original code uses self-closing tags for ng-content. While this may not cause functional issues in many cases, it's not the conventional approach for ng-content and could impact readability in the context of Angular templates.",
"recommendedFix": "Use the standard ng-content syntax to maintain consistency and readability for future developers.",
"codeFix": "@@ -51,17 +51,17 @@ \n- \n+ \n \n \n }\n <div [@collapsedCard]="collapsedCard">\n <div class="card-block" [ngClass]="blockClass()">\n- \n+ \n \n @if (footerTemplate()) {\n <div class="card-footer" [ngClass]="footerClass()">\n- <ng-container *ngTemplateOutlet="footerTemplate()">\n+ <ng-container *ngTemplateOutlet="footerTemplate()">\n \n }\n }\n"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/shared/components/spinner/spinner.component.ts",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using ChangeDetectorRef.detectChanges() after state updates can lead to performance issues by triggering unnecessary change detection cycles. It's better to use the async pipe in the template or rely on Angular's default change detection strategy.",
"recommendedFix": "Remove the calls to this.cdr.detectChanges() after changing isSpinnerVisible as it may not be needed with proper binding in the template.",
"codeFix": "typescript\n+ // Remove the following lines\n+ this.cdr.detectChanges();\n+ this.cdr.detectChanges();\n+ this.cdr.detectChanges();\n"
}
]
}

[phoenixcoded20]

{
"file": "src/assets/charts/amchart/ammap.min.js",
"approved": false,

"issues": [
{
"type": "bug",
"severity": "high",
"description": "The removal of the case for 'Z' in the switch statement is likely a bug, as it may disrupt the intended flow of handling path commands in an SVG context. The 'Z' command typically signifies the closing of a path, and removing it can lead to unexpected behavior.",
"recommendedFix": "Reintroduce the case for 'Z' to ensure proper handling of the close path command.",
"codeFix": "case 'Z':\ncase 'z':\n break;"
}
]
}

[phoenixcoded20]

{
"file": "src/index.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "The titles and descriptions are referencing specific version numbers (21 and 22) of the Angular template, which could lead to confusion if users expect support or updates. It's better to generalize or omit specific version references.",
"recommendedFix": "Change the title and content to remove specific version references to make it more generic and future-proof.",
"codeFix": "html\n+ <title>Dashboard | Datta Able Angular Template</title>\n- <title>Dashboard | Datta Able Angular 22+ Template</title>\n+ content=\"Datta Able Angular Admin Template is made with Bootstrap 5 and ng-bootstrap. It includes a wide range of features, pre-built pages, and UI components to start your next project.\"\n- content=\"Datta Able Angular 22 is an admin template made with Bootstrap 5 and ng-bootstrap 20. It includes a wide range of features, pre-built pages, and UI components to start your next project.\"\n+ content=\"Admin templates, Bootstrap Admin templates, Angular, bootstrap 5.x.x, Dashboard, Dashboard Templates, sass admin templates, html admin templates, Responsive, Bootstrap Admin templates free download, premium Bootstrap Admin templates, premium Angular Admin templates download\" \n- content=\"Admin templates, Bootstrap Admin templates, Angular 22+, bootstrap 5.x.x, Dashboard, Dashboard Templates, sass admin templates, html admin templates, Responsive, Bootstrap Admin templates free download, Angular 22 Admin templates free download,premium Bootstrap Admin templates, premium Angular 22 Admin templates download\" \n"
}
]
}

[phoenixcoded20]

{
"file": "src/scss/_custom.scss",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using '!important' should be avoided unless absolutely necessary as it can make the CSS harder to maintain and overrides normal cascading rules.",
"recommendedFix": "Refactor the styles to avoid using '!important' by increasing specificity or reorganizing the CSS rules.",
"codeFix": "ng-scrollbar {\n --scrollbar-thumb-color: rgba(184, 184, 184, 0.3);\n --scrollbar-track-color: transparent;\n\n .track-inner {\n --scrollbar-track-shape: 4px;\n }\n}"
},
{
"type": "nit",
"severity": "low",
"description": "There is no newline at the end of the file, which might cause issues in some environments and is considered a best practice.",
"recommendedFix": "Add a newline at the end of the file.",
"codeFix": "\n"
}
]
}

[phoenixcoded20]

{
"file": "tsconfig.json",
"approved": false,

"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "Setting 'strict' to false reduces type safety across the project. It's recommended to keep strict mode enabled to catch type errors early.",
"recommendedFix": "Remove 'strict': false from the compilerOptions to enable strict mode.",
"codeFix": "json\n \"strict\": true,\n"
},
{
"type": "improvement",
"severity": "medium",
"description": "'downlevelIteration' option is removed, which can cause issues when targeting older JavaScript versions if you rely on iterables. It's advisable to keep it enabled if your JS targets require it.",
"recommendedFix": "Re-add 'downlevelIteration': true to the compilerOptions if compatibility with older JS versions is needed.",
"codeFix": "json\n \"downlevelIteration\": true,\n"
}
]
}