Stage 6.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": "angular.json",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "low",
"description": "The absence of a newline at the end of the file should be addressed as it can lead to issues in certain environments and tools.",
"recommendedFix": "Add a newline at the end of the file to comply with standard file formatting practices.",
"codeFix": "\n"
}
]
}

[phoenixcoded20]

{
"file": "src/app/app.component.html",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "The self-closing syntax for <router-outlet/> is not valid. It should be used as an opening and closing tag to maintain proper HTML structure.",
"recommendedFix": "Change the self-closing tag to properly open and close the <router-outlet>.",
"codeFix": "\n"
}
]
}

[phoenixcoded20]

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

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using 'javascript:void(0)' is not recommended. It may lead to accessibility issues and is generally considered a bad practice. A better alternative is to use a button element with appropriate event handling.",
"recommendedFix": "Replace anchor tags with button elements or provide a proper 'href' attribute with an accessible link.",
"codeFix": "<button class="text-muted" aria-label="Order ID {{ order.id }}" onClick={() => handleOrderClick(order.id)}>{{ order.id }}\n<button class="list-group-item list-group-item-action px-3" aria-label="Transaction history for {{ history.name }}" onClick={() => handleTransactionClick(history.id)}>{{ history.name }}"
}
]
}

[phoenixcoded20]

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

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using 'javascript:void(0)' for links is discouraged as it may confuse users and is not semantically correct. It is better to use a button for actions that do not link to another resource.",
"recommendedFix": "Change the tags to elements or add a proper link destination if applicable.",
"codeFix": "<button type="button" class="auth-logo"><img src="assets/images/logo-dark.svg" alt="logo" />\n<h5 class="text-secondary f-w-400"><button type="button" class="link-btn">Forgot Password?"
}
]
}

[phoenixcoded20]

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

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using 'javascript:void(0)' is still discouraged as it can be misleading. Instead, use a button element or a more appropriate link with a valid href attribute.",
"recommendedFix": "Replace the anchor tags with button elements or ensure real links are provided in the href attribute.",
"codeFix": "<a href="#"><img src="assets/images/logo-dark.svg" alt="logo img" />\n<a href="#" class="text-primary">Terms of Service\n<a href="#" class="text-primary">Privacy Policy"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/admin-layout.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "The 'NavCollapse' event handler directly modifies the component state within the template. This is generally not recommended as it can lead to code that's harder to maintain and understand. A dedicated method should be used to handle such logic.",
"recommendedFix": "Modify the NavCollapse event handler to call a method that encapsulates the state change logic.",
"codeFix": "<app-navigation class="pc-sidebar" [ngClass]="{ \n 'navbar-collapsed': navCollapsed, \n 'mob-open': navCollapsedMob \n }" (NavCollapse)="handleNavCollapse()" />"
},
{
"type": "nit",
"severity": "low",
"description": "There is no newline at the end of the file, which is typically considered good practice.",
"recommendedFix": "Add a newline at the end of the file.",
"codeFix": "\n"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/admin-layout.component.ts",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using definite assignment assertion (! mark) should be avoided unless you have a guarantee that the property will be assigned before usage. It is generally better to initialize props with default values to ensure clarity and maintainability.",
"recommendedFix": "Initialize navCollapsed with a default value (true/false) instead of using the definite assignment assertion.",
"codeFix": "navCollapsed: boolean = false;"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.ts",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using definite assignment assertions (the ! modifier) can mask potential issues with uninitialized state. It's better to provide a default value to ensure the variable is always initialized.",
"recommendedFix": "Initialize navCollapsed and navCollapsedMob with default values to ensure they are set before use.",
"codeFix": "typescript\nnavCollapsed: boolean = false;\nnavCollapsedMob: boolean = false;\n"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using href=\"javascript:void(0)\" is not a best practice for links. It can cause accessibility issues and may not work correctly in some situations. A better approach is to use a button element or an a tag with a proper role.",
"recommendedFix": "Replace the anchor tag with a button element or ensure the anchor tag has a proper role attribute.",
"codeFix": "<button title="click to menu collapse" class="pc-head-link ms-0" [ngClass]="{ on: navCollapsed() }">\n <i antIcon type="menu-fold" theme="outline">\n"
},
{
"type": "bug",
"severity": "high",
"description": "The dropdown-menu class is misspelled as dropdowm-menu-end which will not render correctly. It should be dropdown-menu-end.",
"recommendedFix": "Fix the spelling of the class name for proper functionality.",
"codeFix": " <div class="dropdown-menu dropdown-menu-end pc-h-dropdown drp-search" ngbDropdownMenu>"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.scss",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "The use of ::ng-deep is discouraged in modern CSS practices as it is a deprecated feature in Angular that causes styles to leak through the view encapsulation. Instead, consider using more specific selectors or employ other mechanisms that maintain style encapsulation.",
"recommendedFix": "Remove the ::ng-deep selector and refactor the styles accordingly.",
"codeFix": ".search-shortcut {\n display: flex;\n align-items: center;\n gap: 4px;\n background: var(--bs-gray-300);\n padding: 0px 4px;\n border-radius: 4px;\n color: var(--bs-secondary);\n\n // Commented out deprecated syntax\n // ::ng-deep .mantis-dark & {\n // background: var(--bs-gray-700) !important;\n // }\n }"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using 'javascript:' in href attributes is not recommended. Instead, 'javascript:void(0)' is more appropriate as it doesn't cause page jumps or reloads.",
"recommendedFix": "Change all 'href="javascript:"' to 'href="javascript:void(0)"'.",
"codeFix": "html\n<a href=\"javascript:void(0)\" class=\"pc-head-link dropdown-toggle arrow-none me-0 bg-gray-200\" data-bs-toggle=\"dropdown\" ngbDropdownToggle>\n<a href=\"javascript:void(0)\" class=\"link-primary\">View all</a>\n<a href=\"javascript:void(0)\" class=\"bg-transparent\"><i class=\"d-flex f-20\" antIcon theme=\"outline\" type=\"logout\"></i></a>\n<a href=\"javascript:void(0)\" class=\"dropdown-item\">\n\n"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/navigation/nav-content/nav-collapse/nav-collapse.component.html",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "The use of 'href="javascript:void(0)"' in anchor tags is generally discouraged as it can lead to accessibility issues and is not semantics-compliant. Instead, an empty anchor tag should use (click) to handle navigation or actions.",
"recommendedFix": "Remove the href attribute altogether or replace it with a valid action or URL that doesn't involve JavaScript void.",
"codeFix": "<a [routerLinkActive]="['active']" class="nav-link" (click)="navCollapse($event)">"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/navigation/nav-content/nav-content.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using self-closing tags for components that have children is not a standard practice and can lead to confusion.",
"recommendedFix": "Use the standard opening and closing tag format for the app-nav-group component.",
"codeFix": "<app-nav-group [item]="item">"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/navigation/nav-content/nav-content.component.ts",
"approved": false,

"issues": [
{
"type": "improvement",
"severity": "medium",
"description": "Using document.querySelector directly in component methods is not a best practice for React components. It's better to use React refs for DOM manipulation, which can improve maintainability and performance. This also helps in avoiding potential issues with accessing DOM directly in a React environment where virtual DOM is applied.",
"recommendedFix": "Refactor the component to use refs instead of querying the DOM directly for better integration with React and future-proofing the code.",
"codeFix": "const navRef = useRef(null);\n\nuseEffect(() => {\n navRef.current = document.querySelector('app-navigation.coded-navbar');\n}, []);\n\nconst navMob = () => {\n if (windowWidth < 1025 && navRef.current?.classList.contains('mob-open')) {\n NavCollapsedMob.emit();\n }\n};"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/navigation/nav-content/nav-item/nav-item.component.ts",
"approved": false,
"issues": [
{
"type": "bug",
"severity": "medium",
"description": "The import statement for 'input' is incorrectly named. It should be 'Input' with a capital 'I' as per Angular conventions.",
"recommendedFix": "Change 'input' to 'Input' in the import statement.",
"codeFix": "import { Component, Input, inject } from '@angular/core';"
},
{
"type": "nit",
"severity": "low",
"description": "The usage of inject seems unnecessary at the class level if you don't have lifecycle hooks or constructor-based dependency injection.",
"recommendedFix": "Consider injecting the service either in the constructor or within a method if it's only needed occasionally.",
"codeFix": "constructor(private layoutState: LayoutStateService) {}"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/navigation/navigation.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using 'javascript:' in href attributes can lead to accessibility issues and is considered a bad practice. Instead, using [routerLink] is preferred for navigation within Angular applications.",
"recommendedFix": "Replace 'href="javascript:"' with a proper routing method, such as [routerLink].",
"codeFix": "<a [routerLink]="['/dashboard/default']" class="b-brand">"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/layouts/admin-layout/navigation/navigation.component.ts",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Importing RouterLink directly in the component's imports is unnecessary since it's not being utilized in the component's template or logic.",
"recommendedFix": "Remove the RouterLink import from the imports array unless it is actually used in the component.",
"codeFix": "- imports: [SharedModule, NavContentComponent, CommonModule,RouterLink],\n+ imports: [SharedModule, NavContentComponent, CommonModule],"
}
]
}

[phoenixcoded20]

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

"issues": [
{
"type": "best-practice",
"severity": "low",
"description": "Using self-closing tags for void elements is a common convention in JSX and improves readability. However, in HTML, it's not valid to use self-closing tags for elements that are not designed to be self-closing.",
"recommendedFix": "Revert the change back to the original form of the router-outlet tag.",
"codeFix": "-\n+"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/shared/apexchart/analytics-chart/analytics-chart.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using 'javascript:void(0)' is not an optimal practice for links. This can lead to confusion regarding navigability and accessibility. Instead, it is better to use a button element with appropriate onClick handlers for non-navigation actions.",
"recommendedFix": "Replace the anchor tags with button elements to enhance accessibility and semantic meaning.",
"codeFix": "<button type="button" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">\n Company Finance Growth\n <span class="h5 mb-0">+45.14%\n \n <button type="button" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">\n Company Expenses Ratio\n <span class="h5 mb-0">0.58%\n "
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/shared/apexchart/income-overview-chart/income-overview-chart.component.html",
"approved": false,
"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using the '!' operator for non-null assertion could lead to runtime errors if 'chartOptions' or any of its properties are undefined or null. Proper handling of potentially undefined values is preferable for stability.",
"recommendedFix": "Introduce optional chaining (?.) to avoid potential errors during runtime if 'chartOptions' is not defined.",
"codeFix": "<apx-chart\n [series]='chartOptions.series'\n [chart]='chartOptions.chart'\n [plotOptions]='chartOptions.plotOptions'\n [dataLabels]='chartOptions.dataLabels'\n [xaxis]='chartOptions.xaxis'\n [colors]='chartOptions.colors'\n [stroke]='chartOptions.stroke'\n [yaxis]='chartOptions.yaxis'\n [grid]='chartOptions.grid'\n [tooltip]='chartOptions.tooltip'\n />"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/shared/apexchart/monthly-bar-chart/monthly-bar-chart.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using the '!' operator for non-null assertion in Angular templates can lead to runtime errors if the value is actually null or undefined. This is particularly risky if 'chartOptions' could be initialized asynchronously or if there are any conditions under which it might not have the expected properties.",
"recommendedFix": "Ensure that 'chartOptions' is properly initialized and contains the expected properties before binding them to the 'apx-chart'. Use safe navigation or default values instead.",
"codeFix": "<apx-chart\n [series]="chartOptions.series || []"\n [chart]="chartOptions.chart || {}"\n [dataLabels]="chartOptions.dataLabels || {}"\n [xaxis]="chartOptions.xaxis || {}"\n [colors]="chartOptions.colors || []"\n [stroke]="chartOptions.stroke || {}"\n [yaxis]="chartOptions.yaxis || {}"\n [grid]="chartOptions.grid || {}"\n [theme]="chartOptions.theme || {}"\n />"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/shared/apexchart/sales-report-chart/sales-report-chart.component.html",
"approved": false,

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using non-null assertion operator '!' on properties can lead to runtime errors if the properties are undefined. It is better to ensure that the properties are guaranteed to exist before usage.",
"recommendedFix": "Remove the non-null assertions and ensure the data is provided before rendering the chart.",
"codeFix": "<apx-chart\n [series]="chartOptions.series"\n [chart]="chartOptions.chart"\n [dataLabels]="chartOptions.dataLabels"\n [legend]="chartOptions.legend"\n [xaxis]="chartOptions.xaxis"\n [colors]="chartOptions.colors"\n [stroke]="chartOptions.stroke"\n [grid]="chartOptions.grid"\n [plotOptions]="chartOptions.plotOptions"\n [tooltip]="chartOptions.tooltip"\n />"
}
]
}

[phoenixcoded20]

{
"file": "src/app/theme/shared/components/breadcrumb/breadcrumb.component.html",
"approved": false,
"issues": [
{
"type": "bug",
"severity": "medium",
"description": "The condition for rendering a non-link breadcrumb is based on 'if (breadcrumb.url === true)', which seems incorrect. It should likely check if the URL is falsy or specifically for certain conditions as per the previous implementation.",
"recommendedFix": "Change the condition to correctly represent non-link cases, such as checking for falsy values.",
"codeFix": "@if (breadcrumb.url === false && breadcrumb.type !== 'group') {\n<li class="breadcrumb-item">\n<a href="javascript:void(0)">{{ breadcrumb.title }}\n\n}"
},
{
"type": "improvement",
"severity": "low",
"description": "The use of 'javascript:void(0)' in anchor tags can be more semantic. Consider using a button or a span with appropriate event handlers for non-link elements.",
"recommendedFix": "Replace the anchor tag with a span or button that does not redirect and applies appropriate styling.",
"codeFix": "<span class="f-14 f-w-600">{{ breadcrumb.title }}"
}
]
}

[phoenixcoded20]

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

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "The 'url' property in the 'titleType' interface is defined as 'string | boolean | undefined', which can lead to ambiguity in how URLs are handled. It's better to keep it strictly as 'string' or 'undefined' for clarity.",
"recommendedFix": "Refine the type to avoid boolean, ensuring the code stays clear about URL expectations.",
"codeFix": "interface titleType {\n url: string | undefined;\n title: string;\n breadcrumbs: unknown;\n type: string;\n}"
},
{
"type": "best-practice",
"severity": "medium",
"description": "Using 'input' for defining component properties is inconsistent with conventional Angular practices. It is recommended to use the correct Angular property binding when declaring inputs.",
"recommendedFix": "Change the input property declaration to use the correct '@input()' decorator.",
"codeFix": "@input() type: string = 'theme1';\nreadonly dashboard = true;\nreadonly Component = false;"
},
{
"type": "nit",
"severity": "low",
"description": "Consistency in using comments should be maintained. In the patch, some comments are in lowercase while others have inconsistent capitalization.",
"recommendedFix": "Ensure all comments follow a consistent capitalization style.",
"codeFix": "// Process the current route immediately on initial load\n// Subscribe to future navigation events"
}
]
}

[phoenixcoded20]

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

"issues": [
{
"type": "best-practice",
"severity": "low",
"description": "Using self-closing tags for and is not a standard practice in Angular. While it may work, it can reduce readability and clarity in the code.",
"recommendedFix": "Change and back to and to maintain consistency and readability.",
"codeFix": "<ng-container *ngTemplateOutlet="headerTitleTemplate">\n<ng-container *ngTemplateOutlet="headerOptionsTemplate">\n"
}
]
}

[phoenixcoded20]

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

"issues": [
{
"type": "best-practice",
"severity": "medium",
"description": "Using ChangeDetectionStrategy.Eager can lead to performance issues, as it checks for changes in every cycle.",
"recommendedFix": "Consider using ChangeDetectionStrategy.OnPush to optimize performance, especially if the component doesn't rely on many inputs or external state changes.",
"codeFix": "typescript\nchangeDetection: ChangeDetectionStrategy.OnPush,\n"
}
]
}