code optimizations and angular version upgrade

angular.json

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/carnet-portal-app",
             "index": "src/index.html",
@@ -51,7 +51,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1500kB",
+                  "maximumWarning": "2MB",
                   "maximumError": "5MB"
                 },
                 {
@@ -77,7 +77,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "carnet-portal-app:build:production"
@@ -90,10 +90,10 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",
@@ -129,5 +129,31 @@
   },
   "cli": {
     "analytics": "7c8b4b49-3b4a-41d5-97c5-1671d7b09dae"
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

package.json

@@ -11,18 +11,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^19.2.7",
+    "@angular/cdk": "^20.0.4",
-    "@angular/common": "^19.2.0",
+    "@angular/common": "^20.0.5",
-    "@angular/compiler": "^19.2.0",
+    "@angular/compiler": "^20.0.5",
-    "@angular/core": "^19.2.0",
+    "@angular/core": "^20.0.5",
-    "@angular/forms": "^19.2.0",
+    "@angular/forms": "^20.0.5",
-    "@angular/material": "^19.2.7",
+    "@angular/material": "^20.0.4",
-    "@angular/material-moment-adapter": "^19.2.7",
+    "@angular/material-moment-adapter": "^20.0.4",
-    "@angular/platform-browser": "^19.2.0",
+    "@angular/platform-browser": "^20.0.5",
-    "@angular/platform-browser-dynamic": "^19.2.0",
+    "@angular/platform-browser-dynamic": "^20.0.5",
-    "@angular/platform-server": "^19.2.0",
+    "@angular/platform-server": "^20.0.5",
-    "@angular/router": "^19.2.0",
+    "@angular/router": "^20.0.5",
-    "@angular/ssr": "^19.2.5",
+    "@angular/ssr": "^20.0.4",
     "express": "^4.18.2",
     "ng2-charts": "^8.0.0",
     "ngx-cookie-service": "^19.1.2",
@@ -31,9 +31,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.5",
+    "@angular/build": "^20.0.4",
-    "@angular/cli": "^19.2.5",
+    "@angular/cli": "^20.0.4",
-    "@angular/compiler-cli": "^19.2.0",
+    "@angular/compiler-cli": "^20.0.5",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
@@ -44,6 +44,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.7.2"
+    "typescript": "~5.8.3"
   }
-}
+}

src/app/app.config.server.ts

@@ -1,5 +1,5 @@
+import { provideServerRendering } from '@angular/ssr';
 import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/platform-server';
 import { appConfig } from './app.config';
 
 const serverConfig: ApplicationConfig = {

src/app/app.routes.ts

@@ -1,7 +1,7 @@
 import { Routes } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 import { HomeComponent } from './home/home.component';
-import { AuthGuard } from './auth/auth.guard';
+import { AuthGuard } from './guards/auth.guard';
 import { AddServiceProviderComponent } from './service-provider/add/add-service-provider.component';
 import { EditServiceProviderComponent } from './service-provider/edit/edit-service-provider.component';
 import { NotFoundComponent } from './shared/components/not-found/not-found.component';

src/app/common/footer/footer.component.scss

@@ -1,11 +1,11 @@
-@import 'colors';
+@use 'colors' as colors;
 
 .footer {
-    background-color: $background-header;
+    background-color: colors.$background-header;
     padding: 8px;
-    border-top: 1px solid $divider-color;
+    border-top: 1px solid colors.$divider-color;
     backdrop-filter: blur(10px);
-    background-color: rgba($background-header, 0.9);
+    background-color: rgba(colors.$background-header, 0.9);
 
     /* Fixed footer styles */
     position: fixed;
@@ -29,18 +29,18 @@
         gap: 24px;
 
         a {
-            color: $text-secondary;
+            color: colors.$text-secondary;
             text-decoration: none;
             transition: color 0.3s ease;
 
             &:hover {
-                color: $primary-color;
+                color: colors.$primary-color;
             }
         }
     }
 
     .copyright {
-        color: $text-secondary;
+        color: colors.$text-secondary;
         font-size: 12px;
     }
 }

src/app/common/secured-header/secured-header.component.scss

@@ -1,5 +1,4 @@
-@import 'colors';
+@use 'colors' as colors;
-@import 'mixins';
 
 .navbar {
     display: flex;
@@ -7,9 +6,9 @@
     align-items: center;
     padding: 0 24px;
     height: 64px;
-    background-color: $primary-color;
+    background-color: colors.$primary-color;
     color: white;
-    @include box-shadow(2);
+    box-shadow: var(--mat-sys-level2);
     position: relative;
     z-index: 100; // Higher than footer's z-index
 
@@ -59,7 +58,7 @@
             top: 48px;
             background-color: white;
             border-radius: 4px;
-            @include box-shadow(3);
+            box-shadow: var(--mat-sys-level3);
             min-width: 200px;
             overflow: hidden;
             z-index: 101;
@@ -69,11 +68,11 @@
                 align-items: center;
                 gap: 8px;
                 padding: 12px 16px;
-                border-bottom: 1px solid $divider-color;
+                border-bottom: 1px solid colors.$divider-color;
-                color: $text-primary;
+                color: colors.$text-primary;
 
                 mat-icon {
-                    color: $text-secondary;
+                    color: colors.$text-secondary;
                 }
             }
 
@@ -83,12 +82,12 @@
                 align-items: center;
                 gap: 8px;
                 padding: 8px 16px;
-                color: $text-primary;
+                color: colors.$text-primary;
                 border: none;
                 cursor: pointer;
 
                 mat-icon {
-                    color: $text-secondary;
+                    color: colors.$text-secondary;
                 }
             }
         }

src/app/common/secured-header/secured-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { UserService } from '../../core/services/common/user.service';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
@@ -15,11 +15,9 @@ export class SecuredHeaderComponent implements OnInit {
   userEmail: string = '';
   showProfileMenu: boolean = false;
 
-  constructor(
+  private userService = inject(UserService);
-    private userService: UserService,
+  private authService = inject(AuthService);
-    private authService: AuthService,
+  private navigationService = inject(NavigationService);
-    private navigationService: NavigationService
-  ) { }
 
   ngOnInit(): void {
     this.userEmail = this.userService.getSafeUser();

src/app/core/interceptors/auth.interceptor.ts

@@ -1,5 +1,5 @@
 // auth.interceptor.ts
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
 import { Observable, throwError, BehaviorSubject } from 'rxjs';
 import { catchError, filter, switchMap, take } from 'rxjs/operators';
@@ -13,7 +13,7 @@ export class AuthInterceptor implements HttpInterceptor {
 
   private requestQueue: { request: HttpRequest<any>, next: HttpHandler }[] = [];
 
-  constructor(private authService: AuthService) { }
+  private authService = inject(AuthService);
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 

src/app/core/services/common/auth.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
-import { Observable, tap } from 'rxjs';
+import { Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { UserService } from './user.service';
 import { StorageService } from './storage.service';
@@ -14,13 +14,12 @@ import { ApiErrorHandlerService } from './api-error-handler.service';
 export class AuthService {
   private apiUrl = environment.apiUrl;
 
-  constructor(private http: HttpClient,
+  private http = inject(HttpClient);
-    private userService: UserService,
+  private userService = inject(UserService);
-    private storageService: StorageService,
+  private storageService = inject(StorageService);
-    private router: Router,
+  private router = inject(Router);
-    private notificationService: NotificationService,
+  private notificationService = inject(NotificationService);
-    private errorHandler: ApiErrorHandlerService
+  private errorHandler = inject(ApiErrorHandlerService);
-  ) { }
 
   login(username: string, password: string): Observable<any> {
     return this.http.post(`${this.apiUrl}/login`, { p_emailaddr: username, p_password: password });

src/app/core/services/common/common.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { catchError, map, Observable, of } from 'rxjs';
 import { Region } from '../../models/region';
 import { State } from '../../models/state';
@@ -20,7 +20,7 @@ export class CommonService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient) { }
+  private http = inject(HttpClient);
 
   getCountries(spid: number = 0): Observable<Country[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetParamValues?P_PARAMTYPE=002&P_SPID=0`).pipe(

src/app/core/services/common/cookie.service.ts

@@ -1,11 +1,11 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { CookieService as NgxCookieService } from 'ngx-cookie-service';
 
 @Injectable({
     providedIn: 'root'
 })
 export class CookieHelperService {
-    constructor(private ngxCookieService: NgxCookieService) { }
+    private ngxCookieService = inject(NgxCookieService);
 
     /**
      * Get a value from cookie

src/app/core/services/common/navigation.service.ts

@@ -1,7 +1,6 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { Location } from '@angular/common';
-import { StorageService } from './storage.service';
 
 
 @Injectable({
@@ -9,10 +8,10 @@ import { StorageService } from './storage.service';
 })
 export class NavigationService {
 
-//  private readonly USER_APPID_KEY = 'CurrentAppId';
+  //private readonly USER_APPID_KEY = 'CurrentAppId';
 
-  constructor(private router: Router,
+  private router = inject(Router);
-    private location: Location) { }
+  private location = inject(Location);
 
   /* Not applicable for this app   
   setCurrentAppId(appId: string): void {
@@ -33,7 +32,7 @@ export class NavigationService {
   }
 
   navigateByUrl(url: string, extras?: any): void {
-    // const currentAppId = this.getCurrentAppId();
+    //const currentAppId = this.getCurrentAppId();
 
     // Ensure URL starts with current appId
     const fullUrl = `/${url.startsWith('/') ? url : `/${url}`}`;

src/app/core/services/common/notification.service.ts

@@ -1,11 +1,13 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Injectable({
   providedIn: 'root'
 })
 export class NotificationService {
-  constructor(private snackBar: MatSnackBar) { }
+
+  private snackBar = inject(MatSnackBar);
+
 
   showSuccess(message: string): void {
     this.snackBar.open(message, 'Close', {

src/app/core/services/common/storage.service.ts

@@ -7,7 +7,6 @@ import { inject, Injectable, PLATFORM_ID } from '@angular/core';
 export class StorageService {
   private readonly platformId = inject(PLATFORM_ID);
 
-  constructor() { }
   setItem(key: string, value: string): void {
     sessionStorage.setItem(key, value);
   }

src/app/core/services/common/user.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, signal } from '@angular/core';
+import { afterNextRender, inject, Injectable, signal } from '@angular/core';
 import { StorageService } from './storage.service';
 import { BehaviorSubject, map, Observable, of, Subject, tap } from 'rxjs';
 import { environment } from '../../../../environments/environment';
@@ -21,7 +21,22 @@ export class UserService {
 
   private userLoggedInSubject = new BehaviorSubject<boolean>(false);
 
-  constructor(private http: HttpClient, private storageService: StorageService) { }
+  private http = inject(HttpClient);
+  private storageService = inject(StorageService);
+
+  constructor() {
+    afterNextRender(() => {
+      // Initialize user details from storage if available
+      const userDetails = this.getUserDetails();
+      if (userDetails) {
+        this.userDetailsSignal.set(userDetails);
+      }
+
+      // Check if user is logged in
+      const userEmail = this.getUser();
+      this.userLoggedInSubject.next(!!userEmail);
+    });
+  }
 
   watchUser(): Observable<boolean> {
     return this.userLoggedInSubject.asObservable();

src/app/core/services/home.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../environments/environment';
 import { UserService } from './common/user.service';
@@ -11,7 +11,8 @@ export class HomeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
 
   getCarnetSummaryData(): Observable<any> {
     const userid = this.userService.getUser();

src/app/core/services/service-provider/basic-detail.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { BasicDetail } from '../../models/service-provider/basic-detail';
 import { filter, map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
@@ -12,7 +12,8 @@ export class BasicDetailService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
 
   getBasicDetailsById(id: number): BasicDetail | any {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetSelectedServiceprovider/${id}`).pipe(

src/app/core/services/service-provider/basic-fee.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { environment } from '../../../../environments/environment';
 import { HttpClient } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
@@ -13,7 +13,9 @@ export class BasicFeeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
 
   getBasicFees(spid: number): Observable<BasicFee[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetBasicFeeRates/${spid}/ACTIVE`).pipe(
@@ -28,7 +30,7 @@ export class BasicFeeService {
       fees: item.FEES,
       effectiveDate: item.EFFDATE,
       createdBy: item.CREATEDBY || null,
-      dateCreated: item.DATECREATED || null      
+      dateCreated: item.DATECREATED || null
     }));
   }
 

src/app/core/services/service-provider/carnet-fee.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
@@ -13,7 +13,9 @@ export class CarnetFeeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
 
   getFeeCommissions(spid: number): Observable<CarnetFee[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetFeeComm/${spid}/ACTIVE`).pipe(

src/app/core/services/service-provider/carnet-sequence.service.ts

@@ -1,9 +1,8 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { CarnetSequence } from '../../models/service-provider/carnet-sequence';
-import { UserService } from '../common/user.service';
 
 @Injectable({
   providedIn: 'root'
@@ -12,7 +11,7 @@ export class CarnetSequenceService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
 
   getCarnetSequenceById(id: number): Observable<CarnetSequence[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetCarnetSequence/${id}`).pipe(

src/app/core/services/service-provider/contact.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { Contact } from '../../models/service-provider/contact';
@@ -12,7 +12,8 @@ export class ContactService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
 
   getContactsById(id: number): Observable<Contact[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetSPAllContacts/${id}`).pipe(

src/app/core/services/service-provider/continuation-sheet-fee.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../../environments/environment';
@@ -13,7 +13,9 @@ export class ContinuationSheetFeeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
 
   getContinuationSheets(spid: number): Observable<ContinuationSheetFee[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetCsFeeRates/${spid}/ACTIVE`).pipe(

src/app/core/services/service-provider/counterfoil-fee.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
@@ -13,8 +13,10 @@ export class CounterfoilFeeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
-
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
+  
   getCounterfoils(spid: number): Observable<CounterfoilFee[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetCfFeeRates/${spid}/ACTIVE`).pipe(
       map(response => this.mapToCounterFoilFee(response)));

src/app/core/services/service-provider/expedited-fee.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../../environments/environment';
@@ -13,7 +13,9 @@ export class ExpeditedFeeService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
 
   getExpeditedFees(spid: number): Observable<ExpeditedFee[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetEfFeeRates/${spid}/ACTIVE`).pipe(

src/app/core/services/service-provider/security-deposit.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { SecurityDeposit } from '../../models/service-provider/security-deposit';
@@ -13,7 +13,9 @@ export class SecurityDepositService {
   private apiUrl = environment.apiUrl;
   private apiDb = environment.apiDb;
 
-  constructor(private http: HttpClient, private userService: UserService, private commonService: CommonService) { }
+  private http = inject(HttpClient);
+  private userService = inject(UserService);
+  private commonService = inject(CommonService);
 
   getSecurityDeposits(spid: number): Observable<SecurityDeposit[]> {
     return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetBondRates/${spid}/ACTIVE`).pipe(

src/app/core/services/user-preference.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { DEFAULT_USER_PREFERENCES, UserPreferences } from '../models/user-preference';
 import { CookieHelperService } from './common/cookie.service';
 
@@ -8,7 +8,7 @@ import { CookieHelperService } from './common/cookie.service';
 export class UserPreferencesService {
     private readonly COOKIE_KEY = 'user_preferences';
 
-    constructor(private cookieService: CookieHelperService) { }
+    private cookieService = inject(CookieHelperService);
 
     getPreferences(): UserPreferences {
         const preferences = this.cookieService.get<UserPreferences>(this.COOKIE_KEY);

src/app/guards/auth.guard.ts

@@ -0,0 +1,23 @@
+import { inject, Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+import { UserService } from '../core/services/common/user.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+
+  private userService = inject(UserService);
+  private router = inject(Router);
+
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): boolean {
+    if (this.userService.isLoggedIn()) {
+      return true;
+    }
+
+    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
+    return false;
+  }
+}

src/app/home/chart/chart.component.scss

@@ -1,5 +1,4 @@
-@import 'colors';
+@use 'colors' as colors;
-@import 'mixins';
 
 .dashboard-chart-container {
     padding: 24px 0px;
@@ -37,7 +36,7 @@
                 margin: 0;
                 font-size: 16px;
                 font-weight: 400;
-                color: $primary-color;
+                color: colors.$primary-color;
             }
 
             .edit-icon {
@@ -45,7 +44,7 @@
                 transition: color 0.2s ease;
 
                 &:hover {
-                    color: $primary-color;
+                    color: colors.$primary-color;
                 }
 
                 mat-icon {

src/app/home/chart/chart.component.ts

@@ -1,9 +1,8 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
-import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
+import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
-import { Router } from '@angular/router';
 import { CarnetStatus } from '../../core/models/carnet-status';
 import { NavigationService } from '../../core/services/common/navigation.service';
 
@@ -18,10 +17,10 @@ export class ChartComponent {
   @Input() carnetStatuses: CarnetStatus[] = [];
   @Output() carnetStatusData = new EventEmitter<any>();
 
-  constructor(private navigationService: NavigationService) { }
+  private navigationService = inject(NavigationService);
 
   navigateToManageProvider(spid: number): void {
-    this.navigationService.navigate(['/service-provider', spid]);
+    this.navigationService.navigate(['service-provider', spid]);
   }
 
   public chartClicked(event: any, chartIndex: number): void {

src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, inject, ViewChild } from '@angular/core';
 import { HomeService } from '../core/services/home.service';
 import { AngularMaterialModule } from '../shared/module/angular-material.module';
 import { ChartComponent } from './chart/chart.component';
@@ -12,8 +12,8 @@ import { CommonModule } from '@angular/common';
 import { CustomPaginator } from '../shared/custom-paginator';
 import { CarnetStatus } from '../core/models/carnet-status';
 import { ApiErrorHandlerService } from '../core/services/common/api-error-handler.service';
-import { NotificationService } from '../core/services/common/notification.service';
 import { CommonService } from '../core/services/common/common.service';
+import { NotificationService } from '../core/services/common/notification.service';
 
 @Component({
   selector: 'app-home',
@@ -43,13 +43,12 @@ export class HomeComponent {
 
   displayedColumns: string[] = ['applicationName', 'holderName', 'carnetNumber', 'usSets', 'foreignSets', 'transitSets', 'carnetValue', 'issueDate', 'expiryDate', 'orderType', 'carnetStatus'];
 
+  private homeService = inject(HomeService);
+  private errorHandler = inject(ApiErrorHandlerService);
+  private notificationService = inject(NotificationService);
+  private commonService = inject(CommonService);
 
-  constructor(
+  constructor(userPrefenceService: UserPreferencesService) {
-    private homeService: HomeService,
-    private errorHandler: ApiErrorHandlerService,
-    private notificationService: NotificationService,
-    userPrefenceService: UserPreferencesService,
-    private commonService: CommonService) {
     this.userPreferences = userPrefenceService.getPreferences();
   }
 

src/app/login/login.component.scss

@@ -1,4 +1,4 @@
-@import 'colors';
+@use 'colors' as colors;
 
 .login-container {
     display: flex;
@@ -26,7 +26,7 @@
 
         .welcome-title {
             text-align: center;
-            color: $primary-color;
+            color: colors.$primary-color;
             margin-bottom: 0.5rem;
         }
 
@@ -76,7 +76,7 @@
     .info-section {
         flex: 1;
         padding: 4rem;
-        background-color: $primary-color;
+        background-color: colors.$primary-color;
         color: white;
         display: flex;
         flex-direction: column;

src/app/login/login.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { AuthService } from '../core/services/common/auth.service';
 import { NavigationService } from '../core/services/common/navigation.service';
@@ -18,12 +18,12 @@ export class LoginComponent {
   isLoading = false;
   errorMessage = '';
 
-  constructor(
+  private authService = inject(AuthService);
-    private fb: FormBuilder,
+  private userService = inject(UserService);
-    private authService: AuthService,
+  private navigationService = inject(NavigationService);
-    private userService: UserService,
+  private fb = inject(FormBuilder);
-    private navigationService: NavigationService
+
-  ) {
+  constructor() {
     this.loginForm = this.fb.group({
       username: ['', Validators.required],
       password: ['', Validators.required]

src/app/service-provider/add/add-service-provider.component.scss

@@ -1,5 +1,3 @@
-@import 'colors';
-
 .service-provider-container {
     max-width: 1200px;
     margin: 24px auto;

src/app/service-provider/add/add-service-provider.component.ts

@@ -11,8 +11,8 @@ import { CounterfoilFeeComponent } from '../counterfoil-fee/counterfoil-fee.comp
 import { ExpeditedFeeComponent } from '../expedited-fee/expedited-fee.component';
 import { SecurityDepositComponent } from '../security-deposit/security-deposit.component';
 import { ContinuationSheetFeeComponent } from "../continuation-sheet-fee/continuation-sheet-fee.component";
-import { UserPreferencesService } from '../../core/services/user-preference.service';
 import { UserPreferences } from '../../core/models/user-preference';
+import { UserPreferencesService } from '../../core/services/user-preference.service';
 
 @Component({
   selector: 'app-add-service-provider',

src/app/service-provider/basic-details/basic-details.component.scss

@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'mixins';
-
 .basic-details-container {
     display: flex;
     flex-direction: column;
@@ -90,9 +87,9 @@
         mat-form-field {
             width: 100%;
 
-            mat-icon[matSuffix] {
+            // mat-icon[matSuffix] {
-                color: $icon-color;
+            //     color: $icon-color;
-            }
+            // }
         }
     }
 }

src/app/service-provider/basic-details/basic-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter, OnDestroy, inject } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -6,16 +6,16 @@ import { BasicDetail } from '../../core/models/service-provider/basic-detail';
 import { Country } from '../../core/models/country';
 import { Region } from '../../core/models/region';
 import { State } from '../../core/models/state';
-import { CommonService } from '../../core/services/common/common.service';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
-import { NotificationService } from '../../core/services/common/notification.service';
 import { ZipCodeValidator } from '../../shared/validators/zipcode-validator';
-import { BasicDetailService } from '../../core/services/service-provider/basic-detail.service';
-import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { BondSurety } from '../../core/models/bond-surety';
 import { CargoSurety } from '../../core/models/cargo-surety';
 import { CargoPolicy } from '../../core/models/cargo-policy';
+import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
+import { CommonService } from '../../core/services/common/common.service';
+import { NotificationService } from '../../core/services/common/notification.service';
+import { BasicDetailService } from '../../core/services/service-provider/basic-detail.service';
 
 @Component({
   selector: 'app-basic-details',
@@ -42,13 +42,13 @@ export class BasicDetailsComponent implements OnInit, OnDestroy {
 
   private destroy$ = new Subject<void>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private commonService = inject(CommonService);
-    private commonService: CommonService,
+  private basicDetailService = inject(BasicDetailService);
-    private basicDetailService: BasicDetailService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private errorHandler: ApiErrorHandlerService
+
-  ) {
+  constructor() {
     this.basicDetailsForm = this.createForm();
   }
 
@@ -281,7 +281,7 @@ export class BasicDetailsComponent implements OnInit, OnDestroy {
       error: (error) => {
         let errorMessage = this.errorHandler.handleApiError(error, `Failed to ${this.isEditMode ? 'update' : 'add'} basic details`);
         this.notificationService.showError(errorMessage);
-        console.error('Error saving contact:', error);
+        console.error('Error saving basic details:', error);
       }
     });
   }

src/app/service-provider/basic-fee/basic-fee.component.scss

@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'mixins';
-
 .basic-fee-container {
     padding: 24px;
     display: flex;
@@ -69,7 +66,7 @@
 
             h3 {
                 margin: 0;
-                color: $primary-color;
+                color: var(--mat-sys-primary);
                 font-weight: 500;
             }
         }

src/app/service-provider/basic-fee/basic-fee.component.ts

@@ -1,6 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, Output, ViewChild } from '@angular/core';
-import { BasicFeeService } from '../../core/services/service-provider/basic-fee.service';
-import { NotificationService } from '../../core/services/common/notification.service';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
@@ -8,11 +6,12 @@ import { BasicFee } from '../../core/models/service-provider/basic-fee';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { MatDialog } from '@angular/material/dialog';
 import { CustomPaginator } from '../../shared/custom-paginator';
 import { forkJoin } from 'rxjs';
-import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { UserPreferences } from '../../core/models/user-preference';
+import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
+import { NotificationService } from '../../core/services/common/notification.service';
+import { BasicFeeService } from '../../core/services/service-provider/basic-fee.service';
 
 @Component({
   selector: 'app-basic-fee',
@@ -43,13 +42,12 @@ export class BasicFeeComponent {
   @Input() spid: number = 0;
   @Output() hasBasicFees = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private basicFeeService = inject(BasicFeeService);
-    private basicFeeService: BasicFeeService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.feeForm = this.fb.group({
       startCarnetValue: [0, [Validators.required, Validators.min(0)]],
       endCarnetValue: [null, [Validators.min(0)]],

src/app/service-provider/carnet-fee/carnet-fee.component.scss

@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'mixins';
-
 .fee-commission-container {
     padding: 24px;
     display: flex;
@@ -83,7 +80,7 @@
 
             h3 {
                 margin: 0;
-                color: $primary-color;
+                color: var(--mat-sys-primary);
                 font-weight: 500;
             }
         }

src/app/service-provider/carnet-fee/carnet-fee.component.ts

@@ -1,20 +1,19 @@
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
-import { NotificationService } from '../../core/services/common/notification.service';
 import { CommonModule } from '@angular/common';
 import { CustomPaginator } from '../../shared/custom-paginator';
-import { CommonService } from '../../core/services/common/common.service';
 import { CarnetFee } from '../../core/models/service-provider/carnet-fee';
 import { FeeType } from '../../core/models/fee-type';
-import { CarnetFeeService } from '../../core/services/service-provider/carnet-fee.service';
-import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { UserPreferences } from '../../core/models/user-preference';
+import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
+import { CommonService } from '../../core/services/common/common.service';
+import { NotificationService } from '../../core/services/common/notification.service';
+import { CarnetFeeService } from '../../core/services/service-provider/carnet-fee.service';
 
 @Component({
   selector: 'app-carnet-fee',
@@ -47,14 +46,13 @@ export class CarnetFeeComponent implements OnInit {
   @Input() spid: number = 0;
   @Output() hasFeeCommissions = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private feeCommissionService = inject(CarnetFeeService);
-    private feeCommissionService: CarnetFeeService,
+  private commonService = inject(CommonService);
-    private commonService: CommonService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.feeCommissionForm = this.fb.group({
       feeType: ['', Validators.required],
       commissionRate: [0, [Validators.required]],

src/app/service-provider/carnet-sequence/carnet-sequence.component.scss

@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'mixins';
-
 .carnet-sequence-container {
     padding: 24px;
     display: flex;
@@ -89,7 +86,7 @@
 
             h3 {
                 margin: 0;
-                color: $primary-color;
+                color: var(--mat-sys-primary);
                 font-weight: 500;
             }
         }

src/app/service-provider/carnet-sequence/carnet-sequence.component.ts

@@ -1,21 +1,19 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { CarnetSequence } from '../../core/models/service-provider/carnet-sequence';
 import { Subject, takeUntil } from 'rxjs';
-import { NotificationService } from '../../core/services/common/notification.service';
-import { CommonService } from '../../core/services/common/common.service';
 import { Region } from '../../core/models/region';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
 import { CustomPaginator } from '../../shared/custom-paginator';
-import { CarnetSequenceService } from '../../core/services/service-provider/carnet-sequence.service';
-import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { UserPreferences } from '../../core/models/user-preference';
+import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
+import { CommonService } from '../../core/services/common/common.service';
+import { NotificationService } from '../../core/services/common/notification.service';
+import { CarnetSequenceService } from '../../core/services/service-provider/carnet-sequence.service';
 
 @Component({
   selector: 'app-carnet-sequence',
@@ -50,14 +48,13 @@ export class CarnetSequenceComponent implements OnInit {
   sequences: CarnetSequence[] = [];
   regions: Region[] = [];
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private carnetSequenceService = inject(CarnetSequenceService);
-    private carnetSequenceService: CarnetSequenceService,
+  private commonService = inject(CommonService);
-    private notificationService: NotificationService,
+  private notificationService = inject(NotificationService);
-    private commonService: CommonService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.sequenceForm = this.fb.group({
       carnetType: ['ORIGINAL', Validators.required],
       region: ['', Validators.required],

src/app/service-provider/contacts/contacts.component.scss

@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'mixins';
-
 .contacts-container {
     padding: 24px;
     display: flex;
@@ -88,7 +85,7 @@
 
             h3 {
                 margin: 0;
-                color: $primary-color;
+                color: var(--mat-sys-primary);
                 font-weight: 500;
             }
         }

src/app/service-provider/contacts/contacts.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -6,14 +6,14 @@ import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
 import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
-import { NotificationService } from '../../core/services/common/notification.service';
 import { Contact } from '../../core/models/service-provider/contact';
 import { PhonePipe } from '../../shared/pipes/phone.pipe';
 import { CommonModule } from '@angular/common';
 import { CustomPaginator } from '../../shared/custom-paginator';
-import { ContactService } from '../../core/services/service-provider/contact.service';
-import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { UserPreferences } from '../../core/models/user-preference';
+import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
+import { NotificationService } from '../../core/services/common/notification.service';
+import { ContactService } from '../../core/services/service-provider/contact.service';
 
 @Component({
   selector: 'app-contacts',
@@ -45,13 +45,13 @@ export class ContactsComponent implements OnInit {
   @Input() userPreferences: UserPreferences = {};
   @Output() hasContacts = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private contactService = inject(ContactService);
-    private contactService: ContactService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+  private dialog = inject(MatDialog);
-    private errorHandler: ApiErrorHandlerService
+
-  ) {
+  constructor() {
     this.contactForm = this.fb.group({
       firstName: ['', [Validators.required, Validators.maxLength(50)]],
       lastName: ['', [Validators.required, Validators.maxLength(50)]],

src/app/service-provider/continuation-sheet-fee/continuation-sheet-fee.component.scss

@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'mixins';
-
 .continuation-sheet-container {
     padding: 24px;
     display: flex;
@@ -83,7 +80,7 @@
 
             h3 {
                 margin: 0;
-                color: $primary-color;
+                color: var(--mat-sys-primary);
                 font-weight: 500;
             }
         }

src/app/service-provider/continuation-sheet-fee/continuation-sheet-fee.component.ts

@@ -1,18 +1,16 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
-import { NotificationService } from '../../core/services/common/notification.service';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
 import { of } from 'rxjs';
 import { CustomPaginator } from '../../shared/custom-paginator';
-import { ContinuationSheetFeeService } from '../../core/services/service-provider/continuation-sheet-fee.service';
-import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { UserPreferences } from '../../core/models/user-preference';
+import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
+import { NotificationService } from '../../core/services/common/notification.service';
+import { ContinuationSheetFeeService } from '../../core/services/service-provider/continuation-sheet-fee.service';
 
 @Component({
   selector: 'app-continuation-sheet-fee',
@@ -55,13 +53,12 @@ export class ContinuationSheetFeeComponent implements OnInit {
   @Input() userPreferences!: UserPreferences;
   @Output() hasContinuationSheetFee = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private continuationSheetFeeService = inject(ContinuationSheetFeeService);
-    private continuationSheetFeeService: ContinuationSheetFeeService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.continuationSheetForm = this.fb.group({
       customerType: ['PREPARER', Validators.required],
       carnetType: ['ORIGINAL', Validators.required],

src/app/service-provider/counterfoil-fee/counterfoil-fee.component.scss

@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'mixins';
-
 .counterfoil-container {
     padding: 24px;
     display: flex;
@@ -83,7 +80,7 @@
 
             h3 {
                 margin: 0;
-                color: $primary-color;
+                color: var(--mat-sys-primary);
                 font-weight: 500;
             }
         }

src/app/service-provider/counterfoil-fee/counterfoil-fee.component.ts

@@ -1,18 +1,16 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
-import { NotificationService } from '../../core/services/common/notification.service';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
 import { CounterfoilFee } from '../../core/models/service-provider/counterfoil-fee';
 import { CustomPaginator } from '../../shared/custom-paginator';
-import { CounterfoilFeeService } from '../../core/services/service-provider/counterfoil-fee.service';
-import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { UserPreferences } from '../../core/models/user-preference';
+import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
+import { NotificationService } from '../../core/services/common/notification.service';
+import { CounterfoilFeeService } from '../../core/services/service-provider/counterfoil-fee.service';
 
 @Component({
   selector: 'app-counterfoil-fee',
@@ -55,13 +53,12 @@ export class CounterfoilFeeComponent implements OnInit {
   @Input() userPreferences!: UserPreferences;
   @Output() hasCounterFoilFee = new EventEmitter<boolean>();
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private counterfoilFeeService = inject(CounterfoilFeeService);
-    private counterfoilFeeService: CounterfoilFeeService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.counterfoilForm = this.fb.group({
       customerType: ['PREPARER', Validators.required],
       carnetType: ['ORIGINAL', Validators.required],

src/app/service-provider/edit/edit-service-provider.component.scss

@@ -1,8 +1,8 @@
-@import 'colors';
+@use 'colors' as colors;
 
 .page-header {
     margin: 0.5rem 0px;
-    color: $primary-color;
+    color: colors.$primary-color;
     font-weight: 500;
 }
 

src/app/service-provider/edit/edit-service-provider.component.ts

@@ -1,4 +1,4 @@
-import { afterNextRender, Component, viewChild } from '@angular/core';
+import { afterNextRender, Component, inject, viewChild } from '@angular/core';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
 import { MatAccordion } from '@angular/material/expansion';
 import { BasicDetailsComponent } from '../basic-details/basic-details.component';
@@ -12,8 +12,8 @@ import { ContinuationSheetFeeComponent } from "../continuation-sheet-fee/continu
 import { ExpeditedFeeComponent } from "../expedited-fee/expedited-fee.component";
 import { SecurityDepositComponent } from "../security-deposit/security-deposit.component";
 import { UserPreferences } from '../../core/models/user-preference';
-import { UserPreferencesService } from '../../core/services/user-preference.service';
 import { CommonModule } from '@angular/common';
+import { UserPreferencesService } from '../../core/services/user-preference.service';
 
 @Component({
   selector: 'app-edit-service-provider',
@@ -28,7 +28,9 @@ export class EditServiceProviderComponent {
   serviceProviderName: string | null = null;
   userPreferences: UserPreferences;
 
-  constructor(private route: ActivatedRoute, private userPrefenceService: UserPreferencesService) {
+  private route = inject(ActivatedRoute);
+
+  constructor(userPrefenceService: UserPreferencesService) {
     this.userPreferences = userPrefenceService.getPreferences();
     afterNextRender(() => {
       // Open all panels

src/app/service-provider/expedited-fee/expedited-fee.component.scss

@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'mixins';
-
 .expedited-fee-container {
     padding: 24px;
     display: flex;
@@ -83,7 +80,7 @@
 
             h3 {
                 margin: 0;
-                color: $primary-color;
+                color: var(--mat-sys-primary);
                 font-weight: 500;
             }
         }

src/app/service-provider/expedited-fee/expedited-fee.component.ts

@@ -1,23 +1,21 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
-import { NotificationService } from '../../core/services/common/notification.service';
 import { CommonModule } from '@angular/common';
 import { CustomPaginator } from '../../shared/custom-paginator';
 import { ExpeditedFee } from '../../core/models/service-provider/expedited-fee';
 import { DeliveryType } from '../../core/models/delivery-type';
 import { TimeZone } from '../../core/models/timezone';
-import { CommonService } from '../../core/services/common/common.service';
 import { Subject, takeUntil } from 'rxjs';
-import { ExpeditedFeeService } from '../../core/services/service-provider/expedited-fee.service';
-import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
-import { TimeFormatService } from '../../core/services/common/timeformat.service';
 import { UserPreferences } from '../../core/models/user-preference';
+import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
+import { CommonService } from '../../core/services/common/common.service';
+import { NotificationService } from '../../core/services/common/notification.service';
+import { TimeFormatService } from '../../core/services/common/timeformat.service';
+import { ExpeditedFeeService } from '../../core/services/service-provider/expedited-fee.service';
 
 @Component({
   selector: 'app-expedited-fee',
@@ -58,15 +56,14 @@ export class ExpeditedFeeComponent implements OnInit, OnDestroy {
   deliveryTypes: DeliveryType[] = [];
   timeZones: TimeZone[] = [];
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private expeditedFeeService = inject(ExpeditedFeeService);
-    private expeditedFeeService: ExpeditedFeeService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private commonService: CommonService,
+  private commonService = inject(CommonService);
-    private dialog: MatDialog,
+  private timeFormatHelper = inject(TimeFormatService);
-    private errorHandler: ApiErrorHandlerService,
+
-    private timeFormatHelper: TimeFormatService
+  constructor() {
-  ) {
     this.feeForm = this.fb.group({
       customerType: ['PREPARER', Validators.required],
       deliveryType: ['', Validators.required],

src/app/service-provider/security-deposit/security-deposit.component.scss

@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'mixins';
-
 .security-deposit-container {
     padding: 24px;
     display: flex;
@@ -88,7 +85,7 @@
 
             h3 {
                 margin: 0;
-                color: $primary-color;
+                color: var(--mat-sys-primary);
                 font-weight: 500;
             }
         }

src/app/service-provider/security-deposit/security-deposit.component.ts

@@ -1,20 +1,18 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/confirm-dialog.component';
 import { AngularMaterialModule } from '../../shared/module/angular-material.module';
-import { NotificationService } from '../../core/services/common/notification.service';
 import { CommonModule } from '@angular/common';
 import { CustomPaginator } from '../../shared/custom-paginator';
 import { Country } from '../../core/models/country';
-import { CommonService } from '../../core/services/common/common.service';
 import { SecurityDeposit } from '../../core/models/service-provider/security-deposit';
-import { SecurityDepositService } from '../../core/services/service-provider/security-deposit.service';
-import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { UserPreferences } from '../../core/models/user-preference';
+import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
+import { CommonService } from '../../core/services/common/common.service';
+import { NotificationService } from '../../core/services/common/notification.service';
+import { SecurityDepositService } from '../../core/services/service-provider/security-deposit.service';
 
 @Component({
   selector: 'app-security-deposit',
@@ -58,14 +56,13 @@ export class SecurityDepositComponent implements OnInit {
     { value: 'N', label: 'No' }
   ];
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private securityDepositService = inject(SecurityDepositService);
-    private securityDepositService: SecurityDepositService,
+  private notificationService = inject(NotificationService);
-    private commonService: CommonService,
+  private errorHandler = inject(ApiErrorHandlerService);
-    private notificationService: NotificationService,
+  private commonService = inject(CommonService);
-    private dialog: MatDialog,
+
-    private errorHandler: ApiErrorHandlerService
+  constructor() {
-  ) {
     this.depositForm = this.fb.group({
       holderType: ['CORP', Validators.required],
       uscibMember: ['Y', Validators.required],

src/app/user-settings/user-settings.component.scss

@@ -1,12 +1,11 @@
-@import 'colors';
+@use 'colors' as colors;
-@import 'mixins';
 
 .settings-container {
     margin: 2rem auto;
     padding: 0 1rem;
 
     h3 {
-        color: $primary-color;
+        color: colors.$primary-color;
         font-weight: 500;
     }
 
@@ -14,7 +13,7 @@
         margin-bottom: 2rem;
 
         h5 {
-            color: $primary-color;
+            color: colors.$primary-color;
             font-size: 1rem;
             margin-bottom: 1.5rem;
             padding-bottom: 0.5rem;

src/app/user-settings/user-settings.component.ts

@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
-import { UserPreferencesService } from '../core/services/user-preference.service';
 import { UserPreferences } from '../core/models/user-preference';
 import { AngularMaterialModule } from '../shared/module/angular-material.module';
 import { CommonModule } from '@angular/common';
-import { NotificationService } from '../core/services/common/notification.service';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { NotificationService } from '../core/services/common/notification.service';
+import { UserPreferencesService } from '../core/services/user-preference.service';
 
 @Component({
   selector: 'app-user-settings',
@@ -14,16 +14,16 @@ import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 })
 export class UserSettingsComponent implements OnInit {
   pageSizeOptions = [5, 10, 25, 50];
-  
+
   userPreferences: UserPreferences = {};
   userPreferencesForm: FormGroup;
   isLoading = true;
 
-  constructor(
+  private fb = inject(FormBuilder);
-    private fb: FormBuilder,
+  private preferencesService = inject(UserPreferencesService);
-    private preferencesService: UserPreferencesService,
+  private notificationService = inject(NotificationService);
-    private notificationService: NotificationService
+
-  ) {
+  constructor() {
     this.userPreferencesForm = this.fb.group({
       pageSize: ['']
     });

src/styles/animation.scss

@@ -1,22 +0,0 @@
-// Animation definitions
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}

src/styles/mixins.scss

@@ -1,29 +0,0 @@
-// Common mixins
-@mixin box-shadow($level: 1) {
-    @if $level ==1 {
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    }
-
-    @else if $level ==2 {
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-    }
-
-    @else if $level ==3 {
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-    }
-
-    @else if $level ==4 {
-        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-    }
-
-    @else if $level ==5 {
-        box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
-    }
-}
-
-@mixin card($level: 1) {
-    @include box-shadow($level);
-    border-radius: 8px;
-    background-color: white;
-    overflow: hidden;
-}