Skip to content

chore: upgrade Angular and package dependencies to latest (ECD-UI)#81

Open
IndAlok wants to merge 3 commits into
PSMRI:mainfrom
IndAlok:main
Open

chore: upgrade Angular and package dependencies to latest (ECD-UI)#81
IndAlok wants to merge 3 commits into
PSMRI:mainfrom
IndAlok:main

Conversation

@IndAlok

@IndAlok IndAlok commented May 14, 2026

Copy link
Copy Markdown

📋 Description

JIRA ID: N/A

Related issue: PSMRI/AMRIT#15

This PR upgrades ECD-UI to Angular 21 (superseding earlier Angular 19-only attempts) and updates dependencies to latest compatible versions.

Summary of changes:

  • Angular/dependency migration and lockfile refresh.
  • TypeScript pinning and module-resolution compatibility updates.
  • standalone: false migration for NgModule declarations.
  • Targeted compatibility fixes in UI/material/chart-related code paths.
  • Replaced jQuery-dependent resize handling where unnecessary with native window resize handling.
  • Added ESLint 10 bridge and chunked lint-staged execution.

Motivation:

  • Ensures current-version alignment while removing compile/runtime risks from outdated patterns and stricter modern typing/lint behavior.

✅ Type of Change

  • 🛠 Refactor (change that is neither a fix nor a new feature)
  • ⚙️ Config change (configuration file or build script updates)
  • 🧹 Chore (miscellaneous changes that don't modify src or test files)

ℹ️ Additional Information

Validation:

  • npm ci passed.
  • ng build --configuration=ci --aot passed.

Common-UI dependency:

Summary by CodeRabbit

  • New Features

    • Updated the app to work with newer Angular and Angular Material versions.
    • Refreshed the visual theme and some form controls for a more modern look.
  • Bug Fixes

    • Improved chart resizing and interaction behavior across several dashboards.
    • Updated input handling in login and form fields for better clipboard support.
    • Switched to newer table, dialog, and chip components for improved compatibility.

@coderabbitai

coderabbitai Bot commented May 14, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@IndAlok, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 11 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 42282503-0033-45ed-9808-9a6564a6f183

📥 Commits

Reviewing files that changed from the base of the PR and between a1f6c22 and 5ef0307.

📒 Files selected for processing (15)
  • Common-UI
  • angular.json
  • package.json
  • src/app/app-modules/associate-anm-mo/associate-anm-mo.module.ts
  • src/app/app-modules/associate-anm-mo/floating-videocall/floating-video.component.ts
  • src/app/app-modules/core/charts/agent-quality-score-chart/agent-quality-score-chart.component.ts
  • src/app/app-modules/core/charts/centre-overall-quality-rating-chart/centre-overall-quality-rating-chart.component.ts
  • src/app/app-modules/core/charts/customer-satisfaction/customer-satisfaction.component.ts
  • src/app/app-modules/core/charts/skillset-wise-quality-rating-chart/skillset-wise-quality-rating-chart.component.ts
  • src/app/app-modules/core/charts/tenure-wise-quality-ratings/tenure-wise-quality-ratings.component.ts
  • src/app/app-modules/core/common-dialog/common-dialog.component.ts
  • src/app/app-modules/shared/directives/noEmptySpaceWithAllChracs.ts
  • src/app/app-modules/shared/directives/textareaWithCopyPaste.ts
  • src/custom-theme.scss
  • src/styles.css
📝 Walkthrough

Walkthrough

This PR upgrades the ECD-UI project from Angular 16 to Angular 21, updating Node.js version requirements, build tooling (ESLint flat config, lint-staged, tsconfig), and migrating HTTP client provider setup. It replaces legacy Angular Material imports with non-legacy equivalents across modules and components, marks components/directives/pipes as standalone: false, updates clipboard event handler types, converts jQuery-based chart resize handlers to native listeners, and migrates theming and chip template markup.

Changes

Angular 21 Migration

Layer / File(s) Summary
Build tooling and dependency upgrades
.nvmrc, Common-UI, angular.json, eslint.config.cjs, lint-staged.config.cjs, package.json, tsconfig.json
Node version, Angular builder target keys, ESLint flat config, lint-staged config, dependency/devDependency version bumps (Angular 16→21), and moduleResolution bundler switch.
Root module HTTP client and bootstrap component
src/app/app.module.ts, src/app/app.component.ts, .../http-interceptor.service.ts
Migrates HttpClientModule to provideHttpClient(withInterceptorsFromDi()), reformats NgModule metadata, marks AppComponent non-standalone, simplifies HTTP import statement.
Non-legacy Material module imports
material.module.ts, various *.module.ts
Replaces MatLegacy* module imports with non-legacy Mat* equivalents across feature modules.
Component dialog/table legacy API migration + standalone flag
~80 component files across associate-anm-mo, core, quality-auditor, quality-supervisor, supervisor modules
Migrates MatDialog/MatDialogRef/MAT_DIALOG_DATA and MatTableDataSource/MatPaginator imports off legacy packages and adds standalone: false to the same decorators.
Standalone:false additions on remaining components/pipes
~35 component/pipe files
Adds standalone: false decorator metadata without accompanying import changes.
ClipboardEvent typing in shared directives
src/app/app-modules/shared/directives/*, login.component.ts
Updates paste/copy/cut @HostListener parameter types from KeyboardEvent to ClipboardEvent.
Chart resize handler migration
src/app/app-modules/core/charts/*
Replaces jQuery $(window).on('resize', ...) with native window.addEventListener('resize', ...) and removes dead commented code.
Theming and template updates
src/custom-theme.scss, dial-preference.component.html, create-section-questionnaire-mapping.component.html, create-questionnaire.component.html
Migrates SCSS theming to Material's M2 API, updates form field appearance to "fill", and migrates chip-list/chip to chip-grid/chip-row markup.

Estimated code review effort: 4 (Complex) | ~75 minutes

Possibly related issues

Possibly related PRs

  • PSMRI/ECD-UI#82: Modifies the same video-call feature files (e.g., FloatingVideoComponent, video-consultation, agents-innerpage) with overlapping Angular component wiring changes.

Suggested reviewers: snehar-nd

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: upgrading Angular and package dependencies.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@sonarqubecloud

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (6)
src/app/app-modules/core/charts/centre-overall-quality-rating-chart/centre-overall-quality-rating-chart.component.ts (1)

176-183: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Resize listeners and ECharts instances accumulate without cleanup.

setQualityRatingData is called multiple times per data-fetch cycle (line 144 with empty data, line 155 with API response, and again on each checkFrequency call). Each call adds a new anonymous resize listener and creates a new echarts.init() instance on the same DOM element — neither is ever removed or disposed. This is the same pattern as the other chart components in this PR.

🔒 Proposed fix: store instance/handler, clean up before re-adding, add ngOnDestroy
 export class CentreOverallQualityRatingChartComponent implements OnInit, DoCheck, OnDestroy {
   currentLanguageSet: any;
   qualityRatingData: any;
   frequencyList: any[] = [];
   frequency: any;
   month: any;
   enableMonthFilter = false;
   lastSixMonths: any = [];
+  private chartInstance: echarts.ECharts | null = null;
+  private resizeHandler: (() => void) | null = null;

   constructor(
     private setLanguageService: SetLanguageService,
     private qualitySupervisorService: QualitySupervisorService,
     private confirmationService: ConfirmationService,
     readonly sessionstorage:SessionStorageService,
     private masterService: MasterService
   ) {}
   setQualityRatingData(ratingData: any) {
     // ...existing filter code...

     const chartDom = document.getElementById('main');
     if(chartDom){
+      if (this.chartInstance) {
+        this.chartInstance.dispose();
+      }
+      if (this.resizeHandler) {
+        window.removeEventListener('resize', this.resizeHandler);
+      }
+
-      const myChart = echarts.init(chartDom);
-    window.addEventListener('resize', function(){
-      if(myChart !== null && myChart !== undefined){
-        myChart.resize();
-      }
-  });
+      this.chartInstance = echarts.init(chartDom);
+      this.resizeHandler = () => {
+        if (this.chartInstance) {
+          this.chartInstance.resize();
+        }
+      };
+      window.addEventListener('resize', this.resizeHandler);

     const option = {
       // ...existing option config...
     };

-    option && myChart.setOption(option);
+    option && this.chartInstance.setOption(option);
     }
   // ...existing commented-out code...
   }
+
+  ngOnDestroy() {
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+  }
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@src/app/app-modules/core/charts/centre-overall-quality-rating-chart/centre-overall-quality-rating-chart.component.ts`
around lines 176 - 183, The resize handler and ECharts instance in
setQualityRatingData are being recreated on every call without cleanup, causing
leaks and duplicate listeners. Update
centre-overall-quality-rating-chart.component.ts to store the chart instance and
resize callback as class members, dispose/remove them before re-initializing,
and add an ngOnDestroy cleanup path to remove the window resize listener and
dispose the chart. Use the setQualityRatingData flow and the existing
echarts.init logic as the place to centralize this lifecycle management.
src/app/app-modules/core/charts/tenure-wise-quality-ratings/tenure-wise-quality-ratings.component.ts (1)

140-148: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Resize listeners and ECharts instances accumulate without cleanup.

setTenureQualityRatingData is called twice per data-fetch cycle (line 106 with empty data, line 116 with API response). Each call adds a new anonymous resize listener and creates a new echarts.init() instance on the same DOM element — neither is ever removed or disposed. Same pattern as the other chart components in this PR.

🔒 Proposed fix: store instance/handler, clean up before re-adding, add ngOnDestroy
 export class TenureWiseQualityRatingsComponent implements OnInit, DoCheck, OnDestroy {
   currentLanguageSet: any;
   qualityRatingData: any;
   frequencyList: any[] = [];
   frequency: any;
   roleList: any = [];
   psmId: any;
   agentRole: any;
+  private chartInstance: echarts.ECharts | null = null;
+  private resizeHandler: (() => void) | null = null;

   /**
    * DE40034072
    * 10-02-2023
    */
   constructor(
     private setLanguageService: SetLanguageService,
     private qualitySupervisorService: QualitySupervisorService,
     private confirmationService: ConfirmationService,
     readonly sessionstorage:SessionStorageService,
     private masterService: MasterService
   ) {}
   setTenureQualityRatingData(ratingData: any) {
     // ...existing filter code...

     const chartDom = document.getElementById('mainTenureChart');
     if(chartDom){
+      if (this.chartInstance) {
+        this.chartInstance.dispose();
+      }
+      if (this.resizeHandler) {
+        window.removeEventListener('resize', this.resizeHandler);
+      }
+
-      const myChart = echarts.init(chartDom);
-
-    window.addEventListener('resize', function(){
-      if(myChart !== null && myChart !== undefined){
-        myChart.resize();
-      }
-  });
+      this.chartInstance = echarts.init(chartDom);
+      this.resizeHandler = () => {
+        if (this.chartInstance) {
+          this.chartInstance.resize();
+        }
+      };
+      window.addEventListener('resize', this.resizeHandler);

     // let option: EChartsOption;
     // myChart.resize({...});

     const option: EChartsOption = {
       // ...existing option config...
     };

-    option && myChart.setOption(option);
+    option && this.chartInstance.setOption(option);

     }
   // ...existing commented-out code...
   }
+
+  ngOnDestroy() {
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+  }
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@src/app/app-modules/core/charts/tenure-wise-quality-ratings/tenure-wise-quality-ratings.component.ts`
around lines 140 - 148, `setTenureQualityRatingData` is creating a new ECharts
instance and anonymous resize listener every time it runs, so repeated fetch
cycles leak charts and handlers. Update `TenureWiseQualityRatingsComponent` to
store the chart instance and resize callback as fields, reuse or dispose the
existing instance before calling `echarts.init`, and remove the listener when
replacing it. Also add `ngOnDestroy` to cleanly remove the resize listener and
dispose the chart instance when the component is destroyed.
src/app/app-modules/core/charts/skillset-wise-quality-rating-chart/skillset-wise-quality-rating-chart.component.ts (1)

229-237: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Resize listeners and ECharts instances accumulate without cleanup.

setChartData is called twice per data-fetch cycle (line 168 with empty data, line 177 with API response). Each call adds a new anonymous resize listener and creates a new echarts.init() instance on the same DOM element — neither is ever removed or disposed. Same pattern as the other chart components in this PR.

🔒 Proposed fix: store instance/handler, clean up before re-adding, add ngOnDestroy
 export class SkillsetWiseQualityRatingChartComponent implements OnInit, DoCheck, OnDestroy {
   currentLanguageSet: any;
   qualityRatingData: any;
   roleList: any[] = [];
   frequencyList: any[] = [];
   agentRole: any;
   month: any;
   psmId: any;
   monthsOfCurrentYear: any = [];
+  private chartInstance: echarts.ECharts | null = null;
+  private resizeHandler: (() => void) | null = null;

   constructor(
     private setLanguageService: SetLanguageService,
     private qualitySupervisorService: QualitySupervisorService,
     private confirmationService: ConfirmationService,
     readonly sessionstorage:SessionStorageService,
     private masterService: MasterService
   ) {}
   setChartData(xValue: any, yValue: any, ratingData: any) {
     const chartDom = document.getElementById('mainQualityChart');
     if(chartDom){
+      if (this.chartInstance) {
+        this.chartInstance.dispose();
+      }
+      if (this.resizeHandler) {
+        window.removeEventListener('resize', this.resizeHandler);
+      }
+
-      const myChart = echarts.init(chartDom);
-
-      window.addEventListener('resize', function(){
-        if(myChart !== null && myChart !== undefined){
-          myChart.resize();
-        }
-    });
+      this.chartInstance = echarts.init(chartDom);
+      this.resizeHandler = () => {
+        if (this.chartInstance) {
+          this.chartInstance.resize();
+        }
+      };
+      window.addEventListener('resize', this.resizeHandler);

       // let option: EChartsOption;
      const  option: EChartsOption = {
        // ...existing option config...
      };

-      option && myChart.setOption(option);
+      option && this.chartInstance.setOption(option);

     }
   // ...existing commented-out code...
   }
+
+  ngOnDestroy() {
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+  }
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@src/app/app-modules/core/charts/skillset-wise-quality-rating-chart/skillset-wise-quality-rating-chart.component.ts`
around lines 229 - 237, The chart setup in setChartData is leaking both resize
listeners and ECharts instances because each call creates a new echarts.init on
the same DOM node and registers an anonymous window resize handler with no
cleanup. Store the chart instance and resize callback as class members in
skillset-wise-quality-rating-chart.component, dispose/remove them before
creating a new chart, and implement ngOnDestroy to unregister the listener and
dispose the chart. Keep the fix aligned with the existing setChartData flow so
repeated data-fetch calls reuse or replace the prior instance cleanly.
src/app/app-modules/core/charts/agent-quality-score-chart/agent-quality-score-chart.component.ts (1)

150-157: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Resize listeners and ECharts instances accumulate without cleanup.

setAgentGradeData is called multiple times per data-fetch cycle (line 119 with empty data, line 129 with API response, and again on each checkFrequency call). Each invocation adds a new anonymous resize listener to window and creates a new echarts.init() instance on the same DOM element — neither is ever removed or disposed. Anonymous functions cannot be passed to removeEventListener, so these handlers persist for the lifetime of the page. Over repeated interactions this leaks memory and causes an increasing number of resize handlers to fire on every window resize.

🔒 Proposed fix: store instance/handler, clean up before re-adding, add ngOnDestroy
 export class AgentQualityScoreChartComponent implements OnInit, DoCheck, OnDestroy {
   currentLanguageSet: any;
   qualityGradeData: any;
   frequencyList: any[] = [];
   frequency: any;
   lastSixMonths: any = [];
   enableMonthFilter = false;
   month: any;
+  private chartInstance: echarts.ECharts | null = null;
+  private resizeHandler: (() => void) | null = null;

   constructor(
     private setLanguageService: SetLanguageService,
     private qualitySupervisorService: QualitySupervisorService,
     private confirmationService: ConfirmationService,
     readonly sessionstorage:SessionStorageService,
     private masterService: MasterService
   ) {}
   setAgentGradeData(ratingData: any) {
     // ...existing filter/comment code...

     const chartDom = document.getElementById('agentQualityMain');
     if(chartDom){
+      if (this.chartInstance) {
+        this.chartInstance.dispose();
+      }
+      if (this.resizeHandler) {
+        window.removeEventListener('resize', this.resizeHandler);
+      }
+
-      const myChart = echarts.init(chartDom);
-    window.addEventListener('resize', function(){
-      if(myChart !== null && myChart !== undefined){
-        myChart.resize();
-      }
-  });
+      this.chartInstance = echarts.init(chartDom);
+      this.resizeHandler = () => {
+        if (this.chartInstance) {
+          this.chartInstance.resize();
+        }
+      };
+      window.addEventListener('resize', this.resizeHandler);
+
     // let option: EChartsOption;
     const option: EChartsOption = {
       // ...existing option config...
     };

-    option && myChart.setOption(option);
+    option && this.chartInstance.setOption(option);
     }
   // ...existing commented-out code...
   }
+
+  ngOnDestroy() {
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+  }
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@src/app/app-modules/core/charts/agent-quality-score-chart/agent-quality-score-chart.component.ts`
around lines 150 - 157, Resize handlers and ECharts instances in
setAgentGradeData are being recreated on every call without cleanup, causing
leaks and duplicate resize work. Refactor agent-quality-score-chart.component.ts
to store the chart instance and the resize handler as class members instead of
anonymous locals inside the document.getElementById('agentQualityMain') block,
dispose/remove any existing listener before creating a new echarts.init()
instance, and add ngOnDestroy to remove the window listener and dispose the
chart when the component is destroyed.
src/app/app-modules/core/charts/customer-satisfaction/customer-satisfaction.component.ts (1)

122-130: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Resize listeners and ECharts instances accumulate without cleanup.

setCustomerSatisfactionData is called twice per data-fetch cycle (line 88 with empty data, line 98 with API response). Each call adds a new anonymous resize listener and creates a new echarts.init() instance on the same DOM element — neither is ever removed or disposed. Same pattern as the other chart components in this PR.

🔒 Proposed fix: store instance/handler, clean up before re-adding, add ngOnDestroy
 export class CustomerSatisfactionComponent implements OnInit, DoCheck, OnDestroy {
   currentLanguageSet: any;
   customerSatisfactionData: any;
   frequencyList: any[] = [];
   frequency: any;
+  private chartInstance: echarts.ECharts | null = null;
+  private resizeHandler: (() => void) | null = null;

   constructor(
     private setLanguageService: SetLanguageService,
     private qualitySupervisorService: QualitySupervisorService,
     private confirmationService: ConfirmationService,
     readonly sessionstorage:SessionStorageService,
     private masterService: MasterService
   ) {}
   setCustomerSatisfactionData(ratingData: any) {
     // ...existing filter code...

     const chartDom = document.getElementById('mainCustomerChart');
     if(chartDom){
+      if (this.chartInstance) {
+        this.chartInstance.dispose();
+      }
+      if (this.resizeHandler) {
+        window.removeEventListener('resize', this.resizeHandler);
+      }
+
-      const myChart = echarts.init(chartDom);
-
-    window.addEventListener('resize', function(){
-      if(myChart !== null && myChart !== undefined){
-        myChart.resize();
-      }
-  });
+      this.chartInstance = echarts.init(chartDom);
+      this.resizeHandler = () => {
+        if (this.chartInstance) {
+          this.chartInstance.resize();
+        }
+      };
+      window.addEventListener('resize', this.resizeHandler);

     const option = {
       // ...existing option config...
     };

-    option && myChart.setOption(option);
+    option && this.chartInstance.setOption(option);
     }
   // ...existing commented-out code...
   }
+
+  ngOnDestroy() {
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+  }
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@src/app/app-modules/core/charts/customer-satisfaction/customer-satisfaction.component.ts`
around lines 122 - 130, `setCustomerSatisfactionData` is creating a new ECharts
instance and anonymous resize listener on every call without cleanup, so
repeated fetch cycles leak both handlers and chart instances. Store the chart
instance and resize handler as fields on `CustomerSatisfactionComponent`, reuse
or dispose the existing `echarts.init()` instance before creating a new one, and
remove the `window.addEventListener('resize', ...)` handler when replacing it.
Also add `ngOnDestroy` to dispose the chart and unregister the resize listener
so the component cleans up correctly.
src/custom-theme.scss (1)

10-43: 🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win

Include src/custom-theme.scss in the global styles bundle
src/custom-theme.scss isn’t referenced in angular.json or imported from src/styles.css, so the custom Material theme never reaches the app at runtime. Add it to the global styles array or import it from src/styles.css.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/custom-theme.scss` around lines 10 - 43, The custom Angular Material
theme in custom-theme.scss is defined but never loaded into the app. Make sure
this stylesheet is included in the global build by either adding it to the
angular.json styles bundle or importing it from styles.css, and keep the
existing theme setup around mat.all-component-typographies, mat.core, and
mat.all-component-themes intact so the theme is applied at runtime.
🧹 Nitpick comments (7)
src/app/app-modules/shared/directives/textareaWithCopyPaste.ts (1)

83-93: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove dead commented-out code instead of updating its types.

The commented-out blockPaste/blockCopy/blockCut handlers (lines 83-93) are dead code. Updating their type annotations to ClipboardEvent adds no value — the active onPaste handler at line 69 already correctly uses ClipboardEvent. Consider removing these commented blocks entirely.

♻️ Proposed cleanup
-//   `@HostListener`("paste", ["$event"]) blockPaste(event: ClipboardEvent) {
-//     event.preventDefault();
-//   }
-
-//   `@HostListener`("copy", ["$event"]) blockCopy(event: ClipboardEvent) {
-//     event.preventDefault();
-//   }
-
-//   `@HostListener`("cut", ["$event"]) blockCut(event: ClipboardEvent) {
-//     event.preventDefault();
-//   }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/app-modules/shared/directives/textareaWithCopyPaste.ts` around lines
83 - 93, Remove the dead commented-out paste/copy/cut handlers from
textareaWithCopyPasteDirective instead of changing their annotations. The
commented block with blockPaste, blockCopy, and blockCut is unused, and the
active onPaste handler already covers the ClipboardEvent typing. Keep the
directive focused on the live methods and delete the commented code entirely.
src/app/app-modules/shared/directives/noEmptySpaceWithAllChracs.ts (1)

44-54: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove commented-out dead code.

The commented-out @HostListener stubs for paste, copy, and cut are dead code. Since the type was updated from KeyboardEvent to ClipboardEvent in this PR, consider removing them entirely rather than maintaining commented-out stubs.

♻️ Proposed cleanup
   }
-
-//   `@HostListener`("paste", ["$event"]) blockPaste(event: ClipboardEvent) {
-//     event.preventDefault();
-//   }
-
-//   `@HostListener`("copy", ["$event"]) blockCopy(event: ClipboardEvent) {
-//     event.preventDefault();
-//   }
-
-//   `@HostListener`("cut", ["$event"]) blockCut(event: ClipboardEvent) {
-//     event.preventDefault();
-//   }
  
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/app-modules/shared/directives/noEmptySpaceWithAllChracs.ts` around
lines 44 - 54, Remove the commented-out dead code in noEmptySpaceWithAllChracs
by deleting the unused `@HostListener` stubs for `blockPaste`, `blockCopy`, and
`blockCut`; keep the directive focused on the active `ClipboardEvent` handling
and do not leave commented method shells behind in the class.
src/app/app-modules/associate-anm-mo/associate-anm-mo.module.ts (1)

29-29: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove dead commented-out import.

Line 29 contains a leftover commented-out import with a duplicate MatInputModule reference. The actual import is correctly present on line 36. This dead code adds confusion during the migration review.

🧹 Proposed cleanup
 import { MatFormFieldModule } from '`@angular/material/form-field`';
-// import { MatInputModule, MatInputModule } from '`@angular/material/input`';
 import { MatCardModule } from '`@angular/material/card`';
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/app-modules/associate-anm-mo/associate-anm-mo.module.ts` at line 29,
Remove the dead commented-out import in associate-anm-mo.module.ts and keep the
real Angular Material import only in the module’s import section. The commented
line with the duplicate MatInputModule reference should be deleted, using the
surrounding NgModule/import block and the MatInputModule symbol as the location
cue.
src/custom-theme.scss (1)

17-17: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Stale comment references pre-M2 typography API.

The comment mentions mat.define-typography-config(), but the file has been migrated to M2 APIs (mat.m2-define-*). Update the comment to reference mat.m2-define-typography-config() for consistency.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/custom-theme.scss` at line 17, The comment in custom-theme.scss still
references the old typography API, so update that stale reference to match the
migrated M2 naming. In the commented-out mat.typography-hierarchy usage, replace
the mention of mat.define-typography-config() with
mat.m2-define-typography-config() so the documentation stays consistent with the
rest of the theme setup and the mat namespace used in this file.
src/app/app-modules/core/common-dialog/common-dialog.component.ts (1)

26-30: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consolidate duplicate imports from @angular/material/dialog.

Two separate import statements pull from the same module; merge for clarity.

♻️ Suggested consolidation
-import {
-  MatDialog,
-  MatDialogRef,
-  MAT_DIALOG_DATA,
-} from '`@angular/material/dialog`';
-import { MatDialogModule } from '`@angular/material/dialog`';
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+} from '`@angular/material/dialog`';

Note MatDialogModule doesn't appear to be referenced elsewhere in this file (no imports array since the component is standalone: false); verify whether it's needed here at all.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/app-modules/core/common-dialog/common-dialog.component.ts` around
lines 26 - 30, Consolidate the duplicated `@angular/material/dialog` imports in
common-dialog.component.ts by merging MatDialogModule into the existing import
list for MatDialog, MatDialogRef, and MAT_DIALOG_DATA, then remove the extra
import statement; while doing so, verify whether MatDialogModule is used
anywhere in CommonDialogComponent and delete it entirely if it is not needed.
package.json (1)

45-45: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Remove rxjs-compat — it conflicts with RxJS 7 and is unnecessary for Angular 21.

rxjs-compat@^6.6.7 is a bridge for RxJS 5→6 migration. It declares a peer dependency on rxjs@^6, which conflicts with rxjs@~7.8.2 in this project. This can trigger peer dependency warnings or, worse, dual RxJS installations leading to runtime type mismatches. Since the project already uses RxJS 7.x with Angular 16+, this package is dead weight.

♻️ Proposed fix
     "rxjs": "~7.8.2",
-    "rxjs-compat": "^6.6.7",
     "tslib": "^2.8.1",
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@package.json` at line 45, Remove the rxjs-compat dependency from package.json
because it is only for RxJS 5→6 migration and conflicts with the project’s RxJS
7 setup. Update the dependency list in the package manifest so the project
relies on the existing rxjs package directly, and make sure any imports or usage
patterns in the app are already compatible with RxJS 7; use the package.json
entry for rxjs-compat as the unique marker to locate and delete it.
angular.json (1)

113-116: 📐 Maintainability & Code Quality | 🔵 Trivial

Consider migrating from browser to application builder.

The buildTarget migration is correct. The referenced build target (line 14) still uses @angular-devkit/build-angular:browser, deprecated since Angular 17. Consider migrating to @angular-devkit/build-angular:application in a future PR for full Angular 21 compatibility and access to modern build features (esbuild, native SSR, etc.).

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@angular.json` around lines 113 - 116, The project’s build configuration still
references the deprecated Angular browser builder, so update the build target
definition used by the ECD-ui build to switch from
`@angular-devkit/build-angular`:browser to
`@angular-devkit/build-angular`:application. Locate the builder config for the
ECD-ui build target and migrate it in a future-compatible way, keeping the
existing buildTarget references intact while aligning the underlying builder
with Angular 21 requirements. Ensure any related architect entries remain
consistent after the builder change.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@Common-UI`:
- Line 1: The Common-UI submodule pointer is set to a commit that is not
available on the remote, so update the submodule reference to a reachable commit
that exists in the Common-UI repository or ensure the referenced commit is
pushed before merging. Locate the submodule pin for Common-UI and change it to a
valid remote commit so fresh checkouts can initialize it successfully.

In `@eslint.config.cjs`:
- Around line 1-20: Add `@eslint/eslintrc` and `@eslint/js` as direct
devDependencies because eslint.config.cjs imports FlatCompat and js from those
packages. Update package.json accordingly so the ESLint config does not rely on
transitive installs, while keeping the existing FlatCompat setup and
.eslintrc.json compatibility intact.

In `@package.json`:
- Around line 50-82: The devDependencies in package.json are no longer aligned
with the repo’s Node 18 target because eslint and lint-staged require newer Node
versions. Update the tooling choices in the package.json dependency set so they
remain compatible with Node 18, or if the project is intentionally moving up,
adjust the repo’s Node version floor consistently across docs and CI; use the
existing package.json devDependency entries and the Node target references in
the repo to guide the change.
- Line 35: The package.json dependency entry for ecd-ui is malformed because it
uses file: without an actual target path, so update or remove that dependency in
the package.json manifest. Point ecd-ui to the intended local package directory
using a valid file: reference (for example, the correct sibling or nested
package), and make sure it is not a self-referencing placeholder. Verify the
dependency name and target path together so the local package can be resolved
correctly.

In
`@src/app/app-modules/associate-anm-mo/floating-videocall/floating-video.component.ts`:
- Line 7: The `@angular/core` import in floating-video.component.ts appears to
declare OnDestroy twice, which will cause a duplicate-identifier compile error.
Inspect the full import clause that includes ChangeDetectionStrategy and
OnDestroy, remove the repeated OnDestroy entry, and keep the class’s OnDestroy
implementation unchanged.

---

Outside diff comments:
In
`@src/app/app-modules/core/charts/agent-quality-score-chart/agent-quality-score-chart.component.ts`:
- Around line 150-157: Resize handlers and ECharts instances in
setAgentGradeData are being recreated on every call without cleanup, causing
leaks and duplicate resize work. Refactor agent-quality-score-chart.component.ts
to store the chart instance and the resize handler as class members instead of
anonymous locals inside the document.getElementById('agentQualityMain') block,
dispose/remove any existing listener before creating a new echarts.init()
instance, and add ngOnDestroy to remove the window listener and dispose the
chart when the component is destroyed.

In
`@src/app/app-modules/core/charts/centre-overall-quality-rating-chart/centre-overall-quality-rating-chart.component.ts`:
- Around line 176-183: The resize handler and ECharts instance in
setQualityRatingData are being recreated on every call without cleanup, causing
leaks and duplicate listeners. Update
centre-overall-quality-rating-chart.component.ts to store the chart instance and
resize callback as class members, dispose/remove them before re-initializing,
and add an ngOnDestroy cleanup path to remove the window resize listener and
dispose the chart. Use the setQualityRatingData flow and the existing
echarts.init logic as the place to centralize this lifecycle management.

In
`@src/app/app-modules/core/charts/customer-satisfaction/customer-satisfaction.component.ts`:
- Around line 122-130: `setCustomerSatisfactionData` is creating a new ECharts
instance and anonymous resize listener on every call without cleanup, so
repeated fetch cycles leak both handlers and chart instances. Store the chart
instance and resize handler as fields on `CustomerSatisfactionComponent`, reuse
or dispose the existing `echarts.init()` instance before creating a new one, and
remove the `window.addEventListener('resize', ...)` handler when replacing it.
Also add `ngOnDestroy` to dispose the chart and unregister the resize listener
so the component cleans up correctly.

In
`@src/app/app-modules/core/charts/skillset-wise-quality-rating-chart/skillset-wise-quality-rating-chart.component.ts`:
- Around line 229-237: The chart setup in setChartData is leaking both resize
listeners and ECharts instances because each call creates a new echarts.init on
the same DOM node and registers an anonymous window resize handler with no
cleanup. Store the chart instance and resize callback as class members in
skillset-wise-quality-rating-chart.component, dispose/remove them before
creating a new chart, and implement ngOnDestroy to unregister the listener and
dispose the chart. Keep the fix aligned with the existing setChartData flow so
repeated data-fetch calls reuse or replace the prior instance cleanly.

In
`@src/app/app-modules/core/charts/tenure-wise-quality-ratings/tenure-wise-quality-ratings.component.ts`:
- Around line 140-148: `setTenureQualityRatingData` is creating a new ECharts
instance and anonymous resize listener every time it runs, so repeated fetch
cycles leak charts and handlers. Update `TenureWiseQualityRatingsComponent` to
store the chart instance and resize callback as fields, reuse or dispose the
existing instance before calling `echarts.init`, and remove the listener when
replacing it. Also add `ngOnDestroy` to cleanly remove the resize listener and
dispose the chart instance when the component is destroyed.

In `@src/custom-theme.scss`:
- Around line 10-43: The custom Angular Material theme in custom-theme.scss is
defined but never loaded into the app. Make sure this stylesheet is included in
the global build by either adding it to the angular.json styles bundle or
importing it from styles.css, and keep the existing theme setup around
mat.all-component-typographies, mat.core, and mat.all-component-themes intact so
the theme is applied at runtime.

---

Nitpick comments:
In `@angular.json`:
- Around line 113-116: The project’s build configuration still references the
deprecated Angular browser builder, so update the build target definition used
by the ECD-ui build to switch from `@angular-devkit/build-angular`:browser to
`@angular-devkit/build-angular`:application. Locate the builder config for the
ECD-ui build target and migrate it in a future-compatible way, keeping the
existing buildTarget references intact while aligning the underlying builder
with Angular 21 requirements. Ensure any related architect entries remain
consistent after the builder change.

In `@package.json`:
- Line 45: Remove the rxjs-compat dependency from package.json because it is
only for RxJS 5→6 migration and conflicts with the project’s RxJS 7 setup.
Update the dependency list in the package manifest so the project relies on the
existing rxjs package directly, and make sure any imports or usage patterns in
the app are already compatible with RxJS 7; use the package.json entry for
rxjs-compat as the unique marker to locate and delete it.

In `@src/app/app-modules/associate-anm-mo/associate-anm-mo.module.ts`:
- Line 29: Remove the dead commented-out import in associate-anm-mo.module.ts
and keep the real Angular Material import only in the module’s import section.
The commented line with the duplicate MatInputModule reference should be
deleted, using the surrounding NgModule/import block and the MatInputModule
symbol as the location cue.

In `@src/app/app-modules/core/common-dialog/common-dialog.component.ts`:
- Around line 26-30: Consolidate the duplicated `@angular/material/dialog` imports
in common-dialog.component.ts by merging MatDialogModule into the existing
import list for MatDialog, MatDialogRef, and MAT_DIALOG_DATA, then remove the
extra import statement; while doing so, verify whether MatDialogModule is used
anywhere in CommonDialogComponent and delete it entirely if it is not needed.

In `@src/app/app-modules/shared/directives/noEmptySpaceWithAllChracs.ts`:
- Around line 44-54: Remove the commented-out dead code in
noEmptySpaceWithAllChracs by deleting the unused `@HostListener` stubs for
`blockPaste`, `blockCopy`, and `blockCut`; keep the directive focused on the
active `ClipboardEvent` handling and do not leave commented method shells behind
in the class.

In `@src/app/app-modules/shared/directives/textareaWithCopyPaste.ts`:
- Around line 83-93: Remove the dead commented-out paste/copy/cut handlers from
textareaWithCopyPasteDirective instead of changing their annotations. The
commented block with blockPaste, blockCopy, and blockCut is unused, and the
active onPaste handler already covers the ClipboardEvent typing. Keep the
directive focused on the live methods and delete the commented code entirely.

In `@src/custom-theme.scss`:
- Line 17: The comment in custom-theme.scss still references the old typography
API, so update that stale reference to match the migrated M2 naming. In the
commented-out mat.typography-hierarchy usage, replace the mention of
mat.define-typography-config() with mat.m2-define-typography-config() so the
documentation stays consistent with the rest of the theme setup and the mat
namespace used in this file.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9e7a9d57-a68b-4072-b40f-6381eb9975b6

📥 Commits

Reviewing files that changed from the base of the PR and between e09f9df and a1f6c22.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (120)
  • .nvmrc
  • Common-UI
  • angular.json
  • eslint.config.cjs
  • lint-staged.config.cjs
  • package.json
  • src/app/app-modules/associate-anm-mo/agents-innerpage/agents-innerpage.component.ts
  • src/app/app-modules/associate-anm-mo/associate-anm-mo.module.ts
  • src/app/app-modules/associate-anm-mo/beneficiary-call-history/beneficiary-call-history.component.ts
  • src/app/app-modules/associate-anm-mo/beneficiary-registration/ben-registration/ben-registration.component.ts
  • src/app/app-modules/associate-anm-mo/call-closure/call-closure.component.ts
  • src/app/app-modules/associate-anm-mo/czentrix-iframe/czentrix-iframe.component.ts
  • src/app/app-modules/associate-anm-mo/ecd-questionnaire/ecd-questionnaire.component.ts
  • src/app/app-modules/associate-anm-mo/floating-videocall/floating-video.component.ts
  • src/app/app-modules/associate-anm-mo/high-risk-reasons/high-risk-reasons.component.ts
  • src/app/app-modules/associate-anm-mo/outbound-worklist/outbound-worklist.component.ts
  • src/app/app-modules/associate-anm-mo/safe-url.pipe.ts
  • src/app/app-modules/associate-anm-mo/video-consultation/video-consultation.component.ts
  • src/app/app-modules/associate-anm-mo/view-details/view-details.component.ts
  • src/app/app-modules/core/activity-this-week/activity-this-week.component.ts
  • src/app/app-modules/core/alerts-notifications-locationmessages/open-alerts-notification-locationmessages/open-alerts-notification-locationmessages.component.ts
  • src/app/app-modules/core/call-statistics/call-statistics.component.ts
  • src/app/app-modules/core/charts/agent-quality-score-chart/agent-quality-score-chart.component.ts
  • src/app/app-modules/core/charts/centre-overall-quality-rating-chart/centre-overall-quality-rating-chart.component.ts
  • src/app/app-modules/core/charts/customer-satisfaction/customer-satisfaction.component.ts
  • src/app/app-modules/core/charts/skillset-wise-quality-rating-chart/skillset-wise-quality-rating-chart.component.ts
  • src/app/app-modules/core/charts/tenure-wise-quality-ratings/tenure-wise-quality-ratings.component.ts
  • src/app/app-modules/core/common-dialog/common-dialog.component.ts
  • src/app/app-modules/core/dashboard/dashboard.component.ts
  • src/app/app-modules/core/footer/footer.component.ts
  • src/app/app-modules/core/header/header.component.ts
  • src/app/app-modules/core/rating/rating.component.ts
  • src/app/app-modules/core/reports/reports.component.ts
  • src/app/app-modules/core/spinner/spinner.component.ts
  • src/app/app-modules/material/material.module.ts
  • src/app/app-modules/quality-auditor/call-audit/call-audit/call-audit.component.ts
  • src/app/app-modules/quality-auditor/call-rating/call-rating.component.ts
  • src/app/app-modules/quality-auditor/innerpage-quality-auditor/innerpage-quality-auditor/innerpage-quality-auditor.component.ts
  • src/app/app-modules/quality-auditor/quality-auditor.module.ts
  • src/app/app-modules/quality-auditor/view-casesheet/view-casesheet.component.ts
  • src/app/app-modules/quality-supervisor/activites/Grade-config/create-grade-config/create-grade-config.component.ts
  • src/app/app-modules/quality-supervisor/activites/Grade-config/edit-grade-config/edit-grade-config.component.ts
  • src/app/app-modules/quality-supervisor/activites/Grade-config/grade-configuration/grade-configuration.component.ts
  • src/app/app-modules/quality-supervisor/activites/agent-mapping-configuration/agent-mapping-configuration.component.ts
  • src/app/app-modules/quality-supervisor/activites/create-agent/create-agent.component.ts
  • src/app/app-modules/quality-supervisor/activites/edit-agent/edit-agent.component.ts
  • src/app/app-modules/quality-supervisor/activites/quality-audit-question-config/create-qa-question-config/create-qa-question-config/create-qa-question-config.component.ts
  • src/app/app-modules/quality-supervisor/activites/quality-audit-question-config/edit-qa-question-config/edit-qa-config/edit-qa-config.component.ts
  • src/app/app-modules/quality-supervisor/activites/quality-audit-question-config/qa-question-config/qa-question-config/qa-question-config.component.ts
  • src/app/app-modules/quality-supervisor/activites/qualityAudit-sectionConfiguration/createquality-section-configuration/createquality-section-configuration.component.ts
  • src/app/app-modules/quality-supervisor/activites/qualityAudit-sectionConfiguration/edit-quality-section-configuration/edit-quality-section-configuration.component.ts
  • src/app/app-modules/quality-supervisor/activites/qualityAudit-sectionConfiguration/quality-section-configuration/quality-section-configuration.component.ts
  • src/app/app-modules/quality-supervisor/activites/reports-quality-supervisor/reports-quality-supervisor.component.ts
  • src/app/app-modules/quality-supervisor/activites/sample-selection/create-sample-selection/create-sample-selection.component.ts
  • src/app/app-modules/quality-supervisor/activites/sample-selection/edit-sample-selection/edit-sample-selection.component.ts
  • src/app/app-modules/quality-supervisor/activites/sample-selection/sample-selection-configuration/sample-selection-configuration.component.ts
  • src/app/app-modules/quality-supervisor/innerpage-quality-supervisor/innerpage-supervisor/innerpage-supervisor.component.ts
  • src/app/app-modules/quality-supervisor/quality-supervisor.module.ts
  • src/app/app-modules/services/confirmation/confirmation.service.ts
  • src/app/app-modules/services/http-inteceptor/http-interceptor.service.ts
  • src/app/app-modules/shared/directives/email/my-email.directive.ts
  • src/app/app-modules/shared/directives/inputField/input-field.directive.ts
  • src/app/app-modules/shared/directives/mobileNumber/mobile-number.directive.ts
  • src/app/app-modules/shared/directives/name/my-name.directive.ts
  • src/app/app-modules/shared/directives/noEmptySpaceWithAllChracs.ts
  • src/app/app-modules/shared/directives/password/my-password.directive.ts
  • src/app/app-modules/shared/directives/searchId/search-id-validator.directive.ts
  • src/app/app-modules/shared/directives/smsTemplate/sms-template-validator.directive.ts
  • src/app/app-modules/shared/directives/stringValidator/string-validator.directive.ts
  • src/app/app-modules/shared/directives/textarea/textarea.directive.ts
  • src/app/app-modules/shared/directives/textareaWithCopyPaste.ts
  • src/app/app-modules/shared/directives/username/user-name.directive.ts
  • src/app/app-modules/shared/utcdate.pipe.ts
  • src/app/app-modules/supervisor/activities/alerts/alert-notification/alert-notification.component.ts
  • src/app/app-modules/supervisor/activities/alerts/alert-notification/create-alert/create-alert.component.ts
  • src/app/app-modules/supervisor/activities/alerts/alert-notification/edit-alert/edit-alert.component.ts
  • src/app/app-modules/supervisor/activities/call-allocation/call-allocation/call-allocation.component.ts
  • src/app/app-modules/supervisor/activities/call-reallocation/call-reallocation/call-reallocation.component.ts
  • src/app/app-modules/supervisor/activities/force-logout/force-logout.component.ts
  • src/app/app-modules/supervisor/activities/notification-supervisor/create-notification/create-notification.component.ts
  • src/app/app-modules/supervisor/activities/notification-supervisor/edit-notification/edit-notification.component.ts
  • src/app/app-modules/supervisor/activities/notification-supervisor/supervisor-notification/supervisor-notification.component.ts
  • src/app/app-modules/supervisor/activities/supervisor-locationMessages/create-location-message/create-location-message.component.ts
  • src/app/app-modules/supervisor/activities/supervisor-locationMessages/edit-location-message/edit-location-message.component.ts
  • src/app/app-modules/supervisor/activities/supervisor-locationMessages/location-messages/location-messages.component.ts
  • src/app/app-modules/supervisor/activities/uploadexcel/uploadexcel.component.ts
  • src/app/app-modules/supervisor/configurations/call-configurations/call-configuration/call-configuration.component.ts
  • src/app/app-modules/supervisor/configurations/call-configurations/call-section-questionaire-mapping/call-section-questionaire-mapping.component.ts
  • src/app/app-modules/supervisor/configurations/call-configurations/create-call-configuration/create-call-configuration.component.ts
  • src/app/app-modules/supervisor/configurations/call-configurations/edit-call-configuration/edit-call-configuration.component.ts
  • src/app/app-modules/supervisor/configurations/create-section-questionnaire-mapping/create-section-questionnaire-mapping.component.ts
  • src/app/app-modules/supervisor/configurations/dial-preference/dial-preference/dial-preference.component.html
  • src/app/app-modules/supervisor/configurations/dial-preference/dial-preference/dial-preference.component.ts
  • src/app/app-modules/supervisor/configurations/question-Mapping/create-question-mapping/create-question-mapping.component.ts
  • src/app/app-modules/supervisor/configurations/question-Mapping/edit-question-mapping/edit-question-mapping.component.ts
  • src/app/app-modules/supervisor/configurations/question-Mapping/map-questionaire-configuration/map-questionaire-configuration.component.ts
  • src/app/app-modules/supervisor/configurations/questionnaire-config/create-questionnaire/create-questionnaire.component.html
  • src/app/app-modules/supervisor/configurations/questionnaire-config/create-questionnaire/create-questionnaire.component.ts
  • src/app/app-modules/supervisor/configurations/questionnaire-config/questionnaire-configuration/questionnaire-configuration.component.ts
  • src/app/app-modules/supervisor/configurations/section-configurations/create-section-configuration/create-section-configuration.component.ts
  • src/app/app-modules/supervisor/configurations/section-configurations/edit-section-configuration/edit-section-configuration.component.ts
  • src/app/app-modules/supervisor/configurations/section-configurations/section-configuration/section-configuration.component.ts
  • src/app/app-modules/supervisor/configurations/section-questionnaire-map/create-section-questionnaire-mapping/create-section-questionnaire-mapping.component.html
  • src/app/app-modules/supervisor/configurations/section-questionnaire-map/create-section-questionnaire-mapping/create-section-questionnaire-mapping.component.ts
  • src/app/app-modules/supervisor/configurations/section-questionnaire-map/edit-section-questionnaire-mapping/edit-section-questionnaire-mapping.component.ts
  • src/app/app-modules/supervisor/configurations/section-questionnaire-map/section-questionnaire-mapping/section-questionnaire-mapping.component.ts
  • src/app/app-modules/supervisor/configurations/sms-template/sms-template/sms-template.component.ts
  • src/app/app-modules/supervisor/innerpage-supervisor/innerpage-supervisor/innerpage-supervisor.component.ts
  • src/app/app-modules/supervisor/supervisor-reports/supervisor-reports/supervisor-reports.component.ts
  • src/app/app-modules/supervisor/supervisor.module.ts
  • src/app/app-modules/user-login/captcha/captcha.component.ts
  • src/app/app-modules/user-login/forgot-password/forgot-password.component.ts
  • src/app/app-modules/user-login/login/login.component.ts
  • src/app/app-modules/user-login/role-selection/role-selection.component.ts
  • src/app/app-modules/user-login/set-password/set-password.component.ts
  • src/app/app-modules/user-login/set-security-questions/set-security-questions.component.ts
  • src/app/app.component.ts
  • src/app/app.module.ts
  • src/custom-theme.scss
  • tsconfig.json

Comment thread Common-UI Outdated
Comment thread eslint.config.cjs
Comment thread package.json Outdated
Comment thread package.json
Comment on lines +50 to +82
"@angular-devkit/build-angular": "^21.2.10",
"@angular-eslint/builder": "21.3.1",
"@angular-eslint/eslint-plugin": "21.3.1",
"@angular-eslint/eslint-plugin-template": "21.3.1",
"@angular-eslint/schematics": "21.3.1",
"@angular-eslint/template-parser": "21.3.1",
"@angular/cli": "^21.2.10",
"@angular/compiler-cli": "^21.2.12",
"@commitlint/cli": "^21.0.1",
"@commitlint/config-conventional": "^21.0.1",
"@types/crypto-js": "^4.2.2",
"@types/file-saver": "^2.0.7",
"@types/jasmine": "~6.0.0",
"@types/jquery": "^4.0.0",
"@typescript-eslint/eslint-plugin": "^8.59.3",
"@typescript-eslint/parser": "^8.59.3",
"commitizen": "^4.3.1",
"cz-conventional-changelog": "^3.3.0",
"ejs": "^3.1.9",
"eslint": "^8.51.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"ejs": "^5.0.2",
"eslint": "^10.3.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.5",
"husky": "^9.1.7",
"jasmine-core": "~4.3.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"jasmine-core": "~6.2.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.0.0",
"lint-staged": "^15.2.2",
"prettier": "^3.2.5",
"prettier-eslint": "^16.3.0",
"typescript": "5.1.3"
"karma-jasmine-html-reporter": "~2.2.0",
"lint-staged": "^17.0.4",
"prettier": "^3.8.3",
"prettier-eslint": "^16.4.2",
"typescript": "~5.9.3"

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check ESLint 10 peer dep support from `@typescript-eslint/parser`
curl -s "https://registry.npmjs.org/@typescript-eslint/parser/latest" | jq '{version, peerDependencies, engines}'

# Check ESLint 10 exists and its breaking changes
curl -s "https://registry.npmjs.org/eslint/10.3.0" | jq '{version, engines}'

# Verify TypeScript 5.9 exists
curl -s "https://registry.npmjs.org/typescript/5.9.3" | jq '{version, engines}'

# Check lint-staged 17 exists
curl -s "https://registry.npmjs.org/lint-staged/17.0.4" | jq '{version, engines}'

Repository: PSMRI/ECD-UI

Length of output: 578


🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect the project manifest around the top-level metadata and devDependencies
python3 - <<'PY'
from pathlib import Path
import json

p = Path("package.json")
data = json.loads(p.read_text())
print("name:", data.get("name"))
print("version:", data.get("version"))
print("engines:", data.get("engines"))
print("packageManager:", data.get("packageManager"))
print("devDependencies:")
for k in ["eslint","`@typescript-eslint/parser`","`@typescript-eslint/eslint-plugin`","typescript","lint-staged","`@commitlint/cli`","prettier-eslint","`@angular-eslint/builder`","`@angular-eslint/eslint-plugin`"]:
    if k in data.get("devDependencies", {}):
        print(f"  {k}: {data['devDependencies'][k]}")
PY

# Find any documented Node version requirements in the repo
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' --glob '!coverage' 'node\s+v?(\d+|\d+\.\d+)|engines|packageManager|lint-staged|eslint@|typescript@' .

Repository: PSMRI/ECD-UI

Length of output: 50368


🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Look for explicit Node/runtime constraints in common repo files
for f in .nvmrc .node-version .tool-versions README.md CONTRIBUTING.md package.json .github/workflows/*.yml .github/workflows/*.yaml; do
  [ -e "$f" ] || continue
  echo "### $f"
  sed -n '1,220p' "$f" | rg -n 'node|Node|npm|pnpm|yarn|volta|engines|lts|>=|lint-staged|eslint|typescript' -n || true
done

# Show any files that look like runtime/version pins
fd -a -d 2 '(^\.nvmrc$|^\.node-version$|^\.tool-versions$|^package\.json$|^README\.md$|^CONTRIBUTING\.md$|workflow)' .

Repository: PSMRI/ECD-UI

Length of output: 2909


Align the dev tooling with the repo’s Node 18 target

  • @typescript-eslint/*@8.59.3`` is fine with ESLint 10 and TypeScript 5.9, but eslint@10.3.0 requires Node `^20.19.0 || ^22.13.0 || >=24` and `lint-staged@17.0.4` requires Node `>=22.22.1`. Either raise the Node floor across docs/CI or keep these devDependencies on Node 18–compatible releases.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@package.json` around lines 50 - 82, The devDependencies in package.json are
no longer aligned with the repo’s Node 18 target because eslint and lint-staged
require newer Node versions. Update the tooling choices in the package.json
dependency set so they remain compatible with Node 18, or if the project is
intentionally moving up, adjust the repo’s Node version floor consistently
across docs and CI; use the existing package.json devDependency entries and the
Node target references in the repo to guide the change.

@sonarqubecloud

sonarqubecloud Bot commented Jul 8, 2026

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant