Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one. Ran ng update @angular/core@20 @angular/cli@20 Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11 Ran npm install ngx-mat-select-search@^8.0.2. Ran ng update @angular/material@20. Updated all eslint and typescript to the latest versions. Removed @angular-devkit/schematics. Updated fontawesome. Updated rxjs and tslib. Moved required node version from 16 to 20. Updated jest-preset-angular. Set preserveWhitespaces to false. Corrected two type declarations in two typescript files to make ng serve run without errors. Removed unused angular-devkit/schematics from view-user.component.ts . Updated list of supported browsers. Upgraded prettier. Ran prettier . --write the first time. Ran prettier . --write the second time. Ran ng generate @angular/core:inject with defaults, excepted a handful of files. Fixed remaining eslint problems. Added dist directory to ignores in eslint.config.js. Let prettier fix formatting, almost everything is just line breaks. Made htmlhint ignore @if and @for Angular constructs. Updated node version in Github workflow to 22.12.0 (build.yml). Updated .env.ts. Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd. Merged changes from dev into angular20 branch.
2025-12-08 11:01:01 +01:00
parent f1b4ec2cf2
commit 7fd1486c08
1516 changed files with 39367 additions and 36037 deletions
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';

 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { OrganizationService } from '../../organization.service';
 */
@Injectable()
 export class SmsCampaignTemplateResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);

  /**
   * Returns the SMS Campaign Template.
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';

 /** rxjs Imports */
@@ -13,10 +13,7 @@ import { OrganizationService } from 'app/organization/organization.service';
 */
@Injectable()
 export class SmsCampaignResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);

  /**
   * Returns the SMS Campaign data.
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';

 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,10 +12,7 @@ import { OrganizationService } from '../../organization.service';
 */
@Injectable()
 export class SmsCampaignsResolver {
-  /**
-   * @param {OrganizationService} organizationService Organization service.
-   */
-  constructor(private organizationService: OrganizationService) {}
+  private organizationService = inject(OrganizationService);

  /**
   * Returns the SMS Campaigns data.
@@ -46,15 +46,16 @@
      </mifosx-campaign-message-step>
    </mat-step>

-    <mat-step state="preview" *ngIf="smsCampaignForm.valid" completed>
-      <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
-
-      <mifosx-campaign-preview-step
-        [smsCampaignTemplate]="smsCampaignTemplate"
-        [campaign]="smsCampaign"
-        (submitEvent)="submit()"
-      >
-      </mifosx-campaign-preview-step>
-    </mat-step>
+    @if (smsCampaignForm.valid) {
+      <mat-step state="preview" completed>
+        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
+        <mifosx-campaign-preview-step
+          [smsCampaignTemplate]="smsCampaignTemplate"
+          [campaign]="smsCampaign"
+          (submitEvent)="submit()"
+        >
+        </mifosx-campaign-preview-step>
+      </mat-step>
+    }
  </mat-stepper>
 </div>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';

 /** Custom Components */
@@ -35,6 +35,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class CreateCampaignComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+
  /** SMS Campaign Template */
  smsCampaignTemplate: any;
  /** Run report headers */
@@ -53,13 +59,7 @@ export class CreateCampaignComponent {
   * @param {SettingsService} settingsService Settings Service
   * @param {Dates} dateUtils Date Utils
   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { smsCampaignTemplate: any }) => {
      this.smsCampaignTemplate = data.smsCampaignTemplate;
    });
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';

@@ -35,6 +35,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class EditCampaignComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dateUtils = inject(Dates);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+
  /** smsCampaign */
  smsCampaign: any;
  /** SMS Campaign Template */
@@ -53,13 +59,7 @@ export class EditCampaignComponent {
   * @param {OrganizationService} organizationService Organiztion Service
   * @param {SettingsService} settingsService Settings Service
   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dateUtils: Dates,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { smsCampaign: any; smsCampaignTemplate: any }) => {
      this.smsCampaignTemplate = data.smsCampaignTemplate;
      this.smsCampaign = data.smsCampaign;
@@ -7,15 +7,11 @@
  <h3 class="mat-h3 flex-98">{{ 'labels.heading.Template Parameters' | translate }}</h3>

  <div class="layout-row-wrap layout-xs-column layout-align-center">
-    <button
-      mat-stroked-button
-      color="primary"
-      class="parameter"
-      *ngFor="let label of parameterLabels"
-      (click)="addText(label)"
-    >
-      {{ label }}
-    </button>
+    @for (label of parameterLabels; track label) {
+      <button mat-stroked-button color="primary" class="parameter" (click)="addText(label)">
+        {{ label }}
+      </button>
+    }
  </div>

  <div class="layout-row align-center gap-2percent margin-t responsive-column">
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnChanges, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, OnChanges, Input, Output, EventEmitter, OnInit, inject } from '@angular/core';
 import { Validators, UntypedFormGroup, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';

 /** Rxjs Imports */
@@ -37,6 +37,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class EditBusinessRuleParametersComponent implements OnInit, OnChanges {
+  private reportsService = inject(ReportsService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+
  /** Run Report Parameters Data */
  @Input() paramData: any;
  /** SMS Campaign */
@@ -55,16 +59,6 @@ export class EditBusinessRuleParametersComponent implements OnInit, OnChanges {
  /** Maximum Date allowed. */
  maxDate = new Date();

-  /**
-   * @param {ReportsService} reportsService Reports Service
-   * @param {SettingsService} settingsService Settings Service.
-   */
-  constructor(
-    private reportsService: ReportsService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates
-  ) {}
-
  ngOnInit(): void {
    this.maxDate = this.settingsService.businessDate;
  }
@@ -9,21 +9,27 @@
      </mat-error>
    </mat-form-field>

-    <mat-form-field class="flex-48" *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
-      <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
-      <mat-select formControlName="providerId">
-        <mat-option *ngFor="let provider of smsProviders" [value]="provider.id">
-          {{ provider.value }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
+    @if (!smsCampaignDetailsForm.controls.isNotification.value) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
+        <mat-select formControlName="providerId">
+          @for (provider of smsProviders; track provider) {
+            <mat-option [value]="provider.id">
+              {{ provider.value }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    }

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Trigger Type' | translate }}</mat-label>
      <mat-select formControlName="triggerType" required>
-        <mat-option *ngFor="let triggerType of triggerTypes" [value]="triggerType.id">
-          {{ triggerType.value }}
-        </mat-option>
+        @for (triggerType of triggerTypes; track triggerType) {
+          <mat-option [value]="triggerType.id">
+            {{ triggerType.value }}
+          </mat-option>
+        }
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Trigger Type' | translate }} {{ 'labels.commons.is' | translate }}
@@ -35,34 +41,34 @@
      {{ 'labels.inputs.Is Notification' | translate }}?
    </mat-checkbox>

-    <mat-form-field
-      class="flex-48"
-      *ngIf="smsCampaignDetailsForm.controls.recurrenceStartDate"
-      (click)="recurrenceStartDatePicker.open()"
-    >
-      <mat-label>{{ 'labels.inputs.Schedule Date' | translate }}</mat-label>
-      <input
-        matInput
-        [min]="minDate"
-        [max]="maxDate"
-        [matDatepicker]="recurrenceStartDatePicker"
-        formControlName="recurrenceStartDate"
-        required
-      />
-      <mat-datepicker-toggle matSuffix [for]="recurrenceStartDatePicker"></mat-datepicker-toggle>
-      <mat-datepicker #recurrenceStartDatePicker></mat-datepicker>
-      <mat-error>
-        {{ 'labels.inputs.Schedule Date' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (smsCampaignDetailsForm.controls.recurrenceStartDate) {
+      <mat-form-field class="flex-48" (click)="recurrenceStartDatePicker.open()">
+        <mat-label>{{ 'labels.inputs.Schedule Date' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="recurrenceStartDatePicker"
+          formControlName="recurrenceStartDate"
+          required
+        />
+        <mat-datepicker-toggle matSuffix [for]="recurrenceStartDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #recurrenceStartDatePicker></mat-datepicker>
+        <mat-error>
+          {{ 'labels.inputs.Schedule Date' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Business Rule' | translate }}</mat-label>
      <mat-select formControlName="runReportId" required>
-        <mat-option *ngFor="let rule of businessRules" [value]="rule.reportId">
-          {{ rule.reportName }}
-        </mat-option>
+        @for (rule of businessRules; track rule) {
+          <mat-option [value]="rule.reportId">
+            {{ rule.reportName }}
+          </mat-option>
+        }
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Business Rule' | translate }} {{ 'labels.commons.is' | translate }}
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, Input, EventEmitter, inject } from '@angular/core';
 import {
  UntypedFormGroup,
  Validators,
@@ -32,6 +32,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class EditSmsCampaignStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private reportService = inject(ReportsService);
+  private settingsService = inject(SettingsService);
+
  /** SMS Campaign Template */
  @Input() smsCampaignTemplate: any;
  /** SMS Campaign */
@@ -62,11 +66,7 @@ export class EditSmsCampaignStepComponent implements OnInit {
   * @param {ReportsService} reportService Reports Service
   * @param {SettingsService} settingsService Settings Service.
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private reportService: ReportsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.createSMSCampaignDetailsForm();
  }

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnChanges, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, OnChanges, Input, Output, EventEmitter, OnInit, inject } from '@angular/core';
 import { Validators, UntypedFormGroup, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';

 /** Custom Services */
@@ -31,6 +31,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class BusinessRuleParametersComponent implements OnInit, OnChanges {
+  private reportsService = inject(ReportsService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+
  /** Run Report Parameters Data */
  @Input() paramData: any;

@@ -48,17 +52,6 @@ export class BusinessRuleParametersComponent implements OnInit, OnChanges {
  /** Template Parameters Event Emitter */
  @Output() templateParameters = new EventEmitter();

-  /**
-   * @param {ReportsService} reportsService Reports Service.
-   * @param {SettingsService} settingsService Settings Service.
-   * @param {Dates} dateUtils Date Utils.
-   */
-  constructor(
-    private reportsService: ReportsService,
-    private settingsService: SettingsService,
-    private dateUtils: Dates
-  ) {}
-
  ngOnInit(): void {
    this.maxDate = this.settingsService.businessDate;
  }
@@ -9,21 +9,27 @@
      </mat-error>
    </mat-form-field>

-    <mat-form-field class="flex-48" *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
-      <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
-      <mat-select formControlName="providerId">
-        <mat-option *ngFor="let provider of smsProviders" [value]="provider.id">
-          {{ provider.value }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
+    @if (!smsCampaignDetailsForm.controls.isNotification.value) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
+        <mat-select formControlName="providerId">
+          @for (provider of smsProviders; track provider) {
+            <mat-option [value]="provider.id">
+              {{ provider.value }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    }

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Trigger Type' | translate }}</mat-label>
      <mat-select formControlName="triggerType" required>
-        <mat-option *ngFor="let triggerType of triggerTypes" [value]="triggerType.id">
-          {{ triggerType.value }}
-        </mat-option>
+        @for (triggerType of triggerTypes; track triggerType) {
+          <mat-option [value]="triggerType.id">
+            {{ triggerType.value }}
+          </mat-option>
+        }
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Trigger Type' | translate }} {{ 'labels.commons.is' | translate }}
@@ -35,78 +41,86 @@
      {{ 'labels.inputs.Is Notification' | translate }}?
    </mat-checkbox>

-    <mat-form-field
-      class="flex-48"
-      *ngIf="smsCampaignDetailsForm.contains('recurrenceStartDate')"
-      (click)="recurrenceStartDatePicker.open()"
-    >
-      <mat-label>{{ 'labels.inputs.Schedule Date' | translate }}</mat-label>
-      <input
-        matInput
-        [min]="minDate"
-        [max]="maxDate"
-        [matDatepicker]="recurrenceStartDatePicker"
-        formControlName="recurrenceStartDate"
-        required
-      />
-      <mat-datepicker-toggle matSuffix [for]="recurrenceStartDatePicker"></mat-datepicker-toggle>
-      <mat-datepicker #recurrenceStartDatePicker></mat-datepicker>
-      <mat-error>
-        {{ 'labels.inputs.Schedule Date' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (smsCampaignDetailsForm.contains('recurrenceStartDate')) {
+      <mat-form-field class="flex-48" (click)="recurrenceStartDatePicker.open()">
+        <mat-label>{{ 'labels.inputs.Schedule Date' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="minDate"
+          [max]="maxDate"
+          [matDatepicker]="recurrenceStartDatePicker"
+          formControlName="recurrenceStartDate"
+          required
+        />
+        <mat-datepicker-toggle matSuffix [for]="recurrenceStartDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #recurrenceStartDatePicker></mat-datepicker>
+        <mat-error>
+          {{ 'labels.inputs.Schedule Date' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }

-    <mat-form-field class="flex-48" *ngIf="smsCampaignDetailsForm.contains('frequency')">
-      <mat-label>{{ 'labels.inputs.Repeats' | translate }}</mat-label>
-      <mat-select formControlName="frequency" required>
-        <mat-option [value]="1">{{ 'labels.inputs.Daily' | translate }}</mat-option>
-        <mat-option [value]="2">{{ 'labels.inputs.Weekly' | translate }}</mat-option>
-        <mat-option [value]="3">{{ 'labels.inputs.Monthly' | translate }}</mat-option>
-        <mat-option [value]="4">{{ 'labels.inputs.Yearly' | translate }}</mat-option>
-      </mat-select>
-      <mat-error>
-        {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (smsCampaignDetailsForm.contains('frequency')) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.Repeats' | translate }}</mat-label>
+        <mat-select formControlName="frequency" required>
+          <mat-option [value]="1">{{ 'labels.inputs.Daily' | translate }}</mat-option>
+          <mat-option [value]="2">{{ 'labels.inputs.Weekly' | translate }}</mat-option>
+          <mat-option [value]="3">{{ 'labels.inputs.Monthly' | translate }}</mat-option>
+          <mat-option [value]="4">{{ 'labels.inputs.Yearly' | translate }}</mat-option>
+        </mat-select>
+        <mat-error>
+          {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }

-    <mat-form-field class="flex-48" *ngIf="smsCampaignDetailsForm.contains('interval')">
-      <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
-      <mat-select formControlName="interval" required>
-        <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
-          {{ interval }}
-        </mat-option>
-      </mat-select>
-      <mat-error>
-        {{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (smsCampaignDetailsForm.contains('interval')) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
+        <mat-select formControlName="interval" required>
+          @for (interval of repetitionIntervals; track interval) {
+            <mat-option [value]="interval">
+              {{ interval }}
+            </mat-option>
+          }
+        </mat-select>
+        <mat-error>
+          {{ 'labels.inputs.Repetition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }

-    <mat-form-field class="flex-48" *ngIf="smsCampaignDetailsForm.contains('repeatsOnDay')">
-      <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
-      <mat-select formControlName="repeatsOnDay" required>
-        <mat-option value="1">{{ 'labels.inputs.Monday' | translate }}</mat-option>
-        <mat-option value="2">{{ 'labels.inputs.Tuesday' | translate }}</mat-option>
-        <mat-option value="3">{{ 'labels.inputs.Wednesday' | translate }}</mat-option>
-        <mat-option value="4">{{ 'labels.inputs.Thursday' | translate }}</mat-option>
-        <mat-option value="5">{{ 'labels.inputs.Friday' | translate }}</mat-option>
-        <mat-option value="6">{{ 'labels.inputs.Saturday' | translate }}</mat-option>
-        <mat-option value="7">{{ 'labels.inputs.Sunday' | translate }}</mat-option>
-      </mat-select>
-      <mat-error>
-        {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
-        {{ 'labels.inputs.day must be selected' | translate }}
-      </mat-error>
-    </mat-form-field>
+    @if (smsCampaignDetailsForm.contains('repeatsOnDay')) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+        <mat-select formControlName="repeatsOnDay" required>
+          <mat-option value="1">{{ 'labels.inputs.Monday' | translate }}</mat-option>
+          <mat-option value="2">{{ 'labels.inputs.Tuesday' | translate }}</mat-option>
+          <mat-option value="3">{{ 'labels.inputs.Wednesday' | translate }}</mat-option>
+          <mat-option value="4">{{ 'labels.inputs.Thursday' | translate }}</mat-option>
+          <mat-option value="5">{{ 'labels.inputs.Friday' | translate }}</mat-option>
+          <mat-option value="6">{{ 'labels.inputs.Saturday' | translate }}</mat-option>
+          <mat-option value="7">{{ 'labels.inputs.Sunday' | translate }}</mat-option>
+        </mat-select>
+        <mat-error>
+          {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+          {{ 'labels.inputs.day must be selected' | translate }}
+        </mat-error>
+      </mat-form-field>
+    }

    <mat-form-field class="flex-48">
      <mat-label>{{ 'labels.inputs.Business Rule' | translate }}</mat-label>
      <mat-select formControlName="runReportId" required>
-        <mat-option *ngFor="let rule of businessRules" [value]="rule.reportId">
-          {{ rule.reportName }}
-        </mat-option>
+        @for (rule of businessRules; track rule) {
+          <mat-option [value]="rule.reportId">
+            {{ rule.reportName }}
+          </mat-option>
+        }
      </mat-select>
      <mat-error>
        {{ 'labels.inputs.Business Rule' | translate }} {{ 'labels.commons.is' | translate }}
@@ -115,24 +129,21 @@
    </mat-form-field>
  </div>

-  <div
-    class="layout-row layout-xs-column layout-align-center margin-t gap-2percent"
-    *ngIf="!smsCampaignDetailsForm.controls.runReportId.value"
-  >
-    <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Previous' | translate }}
-    </button>
-    <button mat-raised-button matStepperNext>
-      {{ 'labels.buttons.Next' | translate }}
-      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-    </button>
-  </div>
+  @if (!smsCampaignDetailsForm.controls.runReportId.value) {
+    <div class="layout-row layout-xs-column layout-align-center margin-t gap-2percent">
+      <button mat-raised-button matStepperPrevious disabled>
+        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Previous' | translate }}
+      </button>
+      <button mat-raised-button matStepperNext>
+        {{ 'labels.buttons.Next' | translate }}
+        <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+      </button>
+    </div>
+  }

-  <mifosx-business-rule-parameters
-    *ngIf="smsCampaignDetailsForm.controls.runReportId.value"
-    [paramData]="paramData"
-    (templateParameters)="passParameters($event)"
-  >
-  </mifosx-business-rule-parameters>
+  @if (smsCampaignDetailsForm.controls.runReportId.value) {
+    <mifosx-business-rule-parameters [paramData]="paramData" (templateParameters)="passParameters($event)">
+    </mifosx-business-rule-parameters>
+  }
 </form>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, ViewChild, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, EventEmitter, Output, inject } from '@angular/core';
 import {
  UntypedFormGroup,
  UntypedFormBuilder,
@@ -38,6 +38,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class SmsCampaignStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private reportService = inject(ReportsService);
+
  /** SMS Campaign Template */
  @Input() smsCampaignTemplate: any;
  /** Business Rule Parameters Component */
@@ -68,10 +71,7 @@ export class SmsCampaignStepComponent implements OnInit {
   * @param {FormBuilder} formBuilder Form Builder
   * @param {ReportsService} reportService Reports Service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private reportService: ReportsService
-  ) {
+  constructor() {
    this.createSMSCampaignDetailsForm();
    this.buildDependencies();
  }
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
 import {
@@ -54,6 +54,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class SmsCampaignsComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
  /** SMS Campaigns data. */
  smsCampaignsData: any;
  /** Columns to be displayed in sms campaigns table. */
@@ -77,7 +79,7 @@ export class SmsCampaignsComponent implements OnInit {
   * Retrieves the SMS campaigns data from `resolve`.
   * @param {ActivatedRoute} route Activated Route.
   */
-  constructor(private route: ActivatedRoute) {
+  constructor() {
    this.route.data.subscribe((data: { smsCampaigns: any }) => {
      this.smsCampaignsData = data.smsCampaigns.pageItems;
    });
@@ -1,46 +1,54 @@
 <div class="container">
  <div class="layout-row align-flex-end action-buttons m-b-20 gap-1percent">
-    <span *ngIf="smsCampaignData.campaignStatus.value !== 'active'">
-      <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SMSCAMPAIGN'" [routerLink]="['edit']">
-        <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
-      </button>
-    </span>
+    @if (smsCampaignData.campaignStatus.value !== 'active') {
+      <span>
+        <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SMSCAMPAIGN'" [routerLink]="['edit']">
+          <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
+        </button>
+      </span>
+    }

-    <span *ngIf="smsCampaignData.campaignStatus.value === 'Pending'">
-      <button
-        mat-raised-button
-        color="accent"
-        *mifosxHasPermission="'ACTIVATE_SMSCAMPAIGN'"
-        (click)="activateCampaign()"
-      >
-        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{ 'labels.buttons.Activate' | translate }}
-      </button>
-    </span>
+    @if (smsCampaignData.campaignStatus.value === 'Pending') {
+      <span>
+        <button
+          mat-raised-button
+          color="accent"
+          *mifosxHasPermission="'ACTIVATE_SMSCAMPAIGN'"
+          (click)="activateCampaign()"
+        >
+          <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{ 'labels.buttons.Activate' | translate }}
+        </button>
+      </span>
+    }

-    <span *ngIf="smsCampaignData.campaignStatus.value !== 'closed'">
-      <button mat-raised-button color="warn" *mifosxHasPermission="'CLOSE_SMSCAMPAIGN'" (click)="closeCampaign()">
-        <fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Close' | translate }}
-      </button>
-    </span>
+    @if (smsCampaignData.campaignStatus.value !== 'closed') {
+      <span>
+        <button mat-raised-button color="warn" *mifosxHasPermission="'CLOSE_SMSCAMPAIGN'" (click)="closeCampaign()">
+          <fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Close' | translate }}
+        </button>
+      </span>
+    }

-    <span
-      *ngIf="smsCampaignData.campaignStatus.value !== 'Pending' && smsCampaignData.campaignStatus.value !== 'active'"
-    >
-      <button
-        mat-raised-button
-        color="accent"
-        *mifosxHasPermission="'REACTIVATE_SMSCAMPAIGN'"
-        (click)="reactivateCampaign()"
-      >
-        <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reactivate' | translate }}
-      </button>
-    </span>
+    @if (smsCampaignData.campaignStatus.value !== 'Pending' && smsCampaignData.campaignStatus.value !== 'active') {
+      <span>
+        <button
+          mat-raised-button
+          color="accent"
+          *mifosxHasPermission="'REACTIVATE_SMSCAMPAIGN'"
+          (click)="reactivateCampaign()"
+        >
+          <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reactivate' | translate }}
+        </button>
+      </span>
+    }

-    <span *ngIf="smsCampaignData.campaignStatus.value === 'closed'">
-      <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SMSCAMPAIGN'" (click)="deleteCampaign()">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
-      </button>
-    </span>
+    @if (smsCampaignData.campaignStatus.value === 'closed') {
+      <span>
+        <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SMSCAMPAIGN'" (click)="deleteCampaign()">
+          <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
+        </button>
+      </span>
+    }
  </div>

  <mat-card class="sms-card">
@@ -70,9 +78,11 @@
                {{ smsCampaignData.smsCampaignTimeLine.submittedOnDate | dateFormat }}
              </mat-list-item>

-              <mat-list-item *ngIf="smsCampaignData.recurrence">
-                {{ 'labels.inputs.Recurrence' | translate }} : {{ smsCampaignData.recurrence }}
-              </mat-list-item>
+              @if (smsCampaignData.recurrence) {
+                <mat-list-item>
+                  {{ 'labels.inputs.Recurrence' | translate }} : {{ smsCampaignData.recurrence }}
+                </mat-list-item>
+              }

              <div class="layout-column gap-10px template-message">
                <h3>{{ 'labels.heading.Template Message' | translate }} :</h3>
@@ -82,70 +92,65 @@
          </div>
        </mat-tab>

-        <mat-tab *ngFor="let tab of smsTabs" [label]="tab.label">
-          <div class="tab-content mat-typography">
-            <form [formGroup]="smsForm" (ngSubmit)="search()">
-              <div class="layout-row layout-align-center gap-3percent">
-                <mat-form-field (click)="fromDatePicker.open()">
-                  <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
-                  <input
-                    matInput
-                    [min]="minDate"
-                    [max]="maxDate"
-                    [matDatepicker]="fromDatePicker"
-                    formControlName="fromDate"
-                  />
-                  <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
-                  <mat-datepicker #fromDatePicker></mat-datepicker>
-                </mat-form-field>
-
-                <mat-form-field (click)="toDatePicker.open()">
-                  <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
-                  <input
-                    matInput
-                    [min]="minDate"
-                    [max]="maxDate"
-                    [matDatepicker]="toDatePicker"
-                    formControlName="toDate"
-                  />
-                  <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
-                  <mat-datepicker #toDatePicker></mat-datepicker>
-                </mat-form-field>
-
-                <div class="search-button">
-                  <button mat-raised-button color="primary">
-                    <fa-icon icon="search" class="m-r-10"></fa-icon>{{ 'labels.buttons.Search' | translate }}
-                  </button>
+        @for (tab of smsTabs; track tab) {
+          <mat-tab [label]="tab.label">
+            <div class="tab-content mat-typography">
+              <form [formGroup]="smsForm" (ngSubmit)="search()">
+                <div class="layout-row layout-align-center gap-3percent">
+                  <mat-form-field (click)="fromDatePicker.open()">
+                    <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
+                    <input
+                      matInput
+                      [min]="minDate"
+                      [max]="maxDate"
+                      [matDatepicker]="fromDatePicker"
+                      formControlName="fromDate"
+                    />
+                    <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
+                    <mat-datepicker #fromDatePicker></mat-datepicker>
+                  </mat-form-field>
+                  <mat-form-field (click)="toDatePicker.open()">
+                    <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
+                    <input
+                      matInput
+                      [min]="minDate"
+                      [max]="maxDate"
+                      [matDatepicker]="toDatePicker"
+                      formControlName="toDate"
+                    />
+                    <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
+                    <mat-datepicker #toDatePicker></mat-datepicker>
+                  </mat-form-field>
+                  <div class="search-button">
+                    <button mat-raised-button color="primary">
+                      <fa-icon icon="search" class="m-r-10"></fa-icon>{{ 'labels.buttons.Search' | translate }}
+                    </button>
+                  </div>
                </div>
-              </div>
-            </form>
-
-            <table #messageTable mat-table [dataSource]="dataSource" class="mat-elevation-z1 m-b-25">
-              <ng-container matColumnDef="Message">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Message' | translate }}</th>
-                <td mat-cell *matCellDef="let sms">{{ sms.message }}</td>
-              </ng-container>
-
-              <ng-container matColumnDef="Status">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
-                <td mat-cell *matCellDef="let sms">{{ sms.status.value }}</td>
-              </ng-container>
-
-              <ng-container matColumnDef="Mobile No.">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Mobile No' | translate }}.</th>
-                <td mat-cell *matCellDef="let sms">{{ sms.mobileNo }}</td>
-              </ng-container>
-
-              <ng-container matColumnDef="Campaign Name">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Campaign Name' | translate }}</th>
-                <td mat-cell *matCellDef="let sms">{{ sms.campaignName }}</td>
-              </ng-container>
-
-              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-            </table>
-          </div>
-        </mat-tab>
+              </form>
+              <table #messageTable mat-table [dataSource]="dataSource" class="mat-elevation-z1 m-b-25">
+                <ng-container matColumnDef="Message">
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Message' | translate }}</th>
+                  <td mat-cell *matCellDef="let sms">{{ sms.message }}</td>
+                </ng-container>
+                <ng-container matColumnDef="Status">
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+                  <td mat-cell *matCellDef="let sms">{{ sms.status.value }}</td>
+                </ng-container>
+                <ng-container matColumnDef="Mobile No.">
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Mobile No' | translate }}.</th>
+                  <td mat-cell *matCellDef="let sms">{{ sms.mobileNo }}</td>
+                </ng-container>
+                <ng-container matColumnDef="Campaign Name">
+                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Campaign Name' | translate }}</th>
+                  <td mat-cell *matCellDef="let sms">{{ sms.campaignName }}</td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+              </table>
+            </div>
+          </mat-tab>
+        }
      </mat-tab-group>
    </mat-card-content>
  </mat-card>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import {
@@ -63,6 +63,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class ViewCampaignComponent implements OnInit {
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  dialog = inject(MatDialog);
+  private formBuilder = inject(UntypedFormBuilder);
+  private dateUtils = inject(Dates);
+  private organizationService = inject(OrganizationService);
+  private settingsService = inject(SettingsService);
+
  /** Minimum date allowed. */
  minDate = new Date(2000, 0, 1);
  /** Maximum date allowed. */
@@ -120,15 +128,7 @@ export class ViewCampaignComponent implements OnInit {
   * @param {OrganizationService} organizationService Organization Service
   * @param {SettingsService} settingsService Setting Service
   */
-  constructor(
-    private router: Router,
-    private route: ActivatedRoute,
-    public dialog: MatDialog,
-    private formBuilder: UntypedFormBuilder,
-    private dateUtils: Dates,
-    private organizationService: OrganizationService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { smsCampaign: any }) => {
      this.smsCampaignData = data.smsCampaign;
    });
@@ -176,7 +176,6 @@ export class ViewCampaignComponent implements OnInit {
        type: 'date',
        required: true
      })
-
    ];
    const data = {
      title: 'Close SMS Campaign',
@@ -214,7 +213,6 @@ export class ViewCampaignComponent implements OnInit {
        type: 'date',
        required: true
      })
-
    ];
    const data = {
      title: 'Activate SMS Campaign',
@@ -252,7 +250,6 @@ export class ViewCampaignComponent implements OnInit {
        type: 'date',
        required: true
      })
-
    ];
    const data = {
      title: 'Reactivate SMS Campaign',