อัพให้เป็น Angular 18

bf838d73 · Nattana Chaiyamat · 3a2cd348 · bf838d73 · bf838d73 · bf838d73
Commit bf838d73 authored Aug 27, 2025 by Nattana Chaiyamat
30 changed files
--- a/angular.json
+++ b/angular.json
@@ -121,10 +121,10 @@
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
-              "browserTarget": "synto:build:production"
+              "buildTarget": "synto:build:production"
            },
            "development": {
-              "browserTarget": "synto:build:development"
+              "buildTarget": "synto:build:development"
            }
          },
          "defaultConfiguration": "development"
@@ -132,7 +132,7 @@
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
-            "browserTarget": "synto:build"
+            "buildTarget": "synto:build"
          }
        },
        "test": {

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -14,16 +14,17 @@
  "private": true,
  "dependencies": {
    "@angular-slider/ngx-slider": "^2.0.4",
-    "@angular/animations": "^16.1.2",
+    "@angular/animations": "^18.2.13",
    "@angular/cdk": "^16.1.2",
-    "@angular/compiler": "^16.1.2",
+    "@angular/common": "^18.2.13",
-    "@angular/core": "^16.1.2",
+    "@angular/compiler": "^18.2.13",
+    "@angular/core": "^18.2.13",
    "@angular/fire": "^7.6.1",
-    "@angular/forms": "^16.1.2",
+    "@angular/forms": "^18.2.13",
    "@angular/material": "^16.1.2",
-    "@angular/platform-browser": "^16.1.2",
+    "@angular/platform-browser": "^18.2.13",
-    "@angular/platform-browser-dynamic": "^16.1.2",
+    "@angular/platform-browser-dynamic": "^18.2.13",
-    "@angular/router": "^16.1.2",
+    "@angular/router": "^18.2.13",
    "@asymmetrik/ngx-leaflet": "^16.0.1",
    "@firebase/app": "^0.9.14",
    "@firebase/firestore": "^4.1.0",
@@ -51,7 +52,7 @@
    "animate.css": "^4.1.1",
    "apexcharts": "^3.41.0",
    "bootstrap": "^5.3.3",
-    "browser-sync": "^2.29.3",
+    "browser-sync": "^3.0.4",
    "chart.js": "^4.3.0",
    "date-fns": "^2.30.0",
    "echarts": "^5.6.0",
@@ -92,12 +93,12 @@
    "swiper": "^8.4.6",
    "tslib": "^2.5.3",
    "wnumb": "^1.2.0",
-    "zone.js": "~0.13.1"
+    "zone.js": "~0.14.10"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^16.1.1",
+    "@angular-devkit/build-angular": "^18.2.20",
-    "@angular/cli": "~16.1.1",
+    "@angular/cli": "~18.2.20",
-    "@angular/compiler-cli": "^16.1.2",
+    "@angular/compiler-cli": "^18.2.13",
    "@types/d3-scale": "^4.0.3",
    "@types/d3-selection": "^3.0.5",
    "@types/d3-shape": "^3.1.1",
@@ -121,6 +122,6 @@
    "postcss": "^8.4.24",
    "tailwind-clip-path": "^1.0.0",
    "tailwindcss": "^3.3.2",
-    "typescript": "~5.1.3"
+    "typescript": "~5.4.5"
  }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -16,29 +16,21 @@ import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { environment } from 'src/environments/environment';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-@NgModule({
+@NgModule({ declarations: [AppComponent, CustomLayoutComponent, ContentLayoutComponent],
-  declarations: [AppComponent, CustomLayoutComponent, ContentLayoutComponent],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [
+    bootstrap: [AppComponent], imports: [BrowserModule,
-    BrowserModule,
+        AppRoutingModule,
-    AppRoutingModule,
+        SharedModule,
-    SharedModule,
+        BrowserAnimationsModule,
-    BrowserAnimationsModule,
+        StoreModule.forRoot({ data: dataReaducer }),
-    StoreModule.forRoot({ data: dataReaducer }),
+        ToastrModule.forRoot(),
-    ToastrModule.forRoot(),
+        // AngularFireModule,
-    // AngularFireModule,
+        AngularFireDatabaseModule,
-    AngularFireDatabaseModule,
+        AngularFirestoreModule,
-    AngularFirestoreModule,
+        AngularFireAuthModule,
-    AngularFireAuthModule,
+        LeafletModule,
-    LeafletModule,
+        // AngularFireModule.initializeApp(environment.firebase),
-    // AngularFireModule.initializeApp(environment.firebase),
+        ColorPickerModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
-    ColorPickerModule,
-    HttpClientModule
-  ],
-  providers: [],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  bootstrap: [AppComponent],
-})
 export class AppModule {}
--- a/src/app/authentication/authentication.module.ts
+++ b/src/app/authentication/authentication.module.ts
@@ -6,24 +6,17 @@ import { LoginPageComponent } from './login-page/login-page.component';
 import { RegisterPageComponent } from './register-page/register-page.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AngularFireAuthModule } from '@angular/fire/compat/auth';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { AuthService } from '../shared/services/auth.service';
 import { HttpRequestInterceptor } from '../shared/services/http-request.interceptor';
-@NgModule({
+@NgModule({ declarations: [LoginPageComponent, RegisterPageComponent], imports: [CommonModule,
-  declarations: [LoginPageComponent, RegisterPageComponent],
+        AuthenticationRoutingModule,
-  imports: [
+        AngularFireAuthModule,
-    CommonModule,
+        FormsModule,
-    AuthenticationRoutingModule,
+        ReactiveFormsModule], providers: [AuthService, {
-    AngularFireAuthModule,
+            provide: HTTP_INTERCEPTORS,
-    FormsModule,
+            useClass: HttpRequestInterceptor,
-    ReactiveFormsModule,
+            multi: true,
-    HttpClientModule
+        }, provideHttpClient(withInterceptorsFromDi()),] })
-  ],
-  providers: [AuthService, {
-    provide: HTTP_INTERCEPTORS,
-    useClass: HttpRequestInterceptor,
-    multi: true,
-  },]
-})
 export class AuthenticationModule { }
--- a/src/app/components/authentication/lockscreen/basic/basic.component.html
+++ b/src/app/components/authentication/lockscreen/basic/basic.component.html
@@ -37,7 +37,7 @@
              <h2
                class="text-center block text-sm font-semibold text-gray-800 dark:text-white"
              >
-                Jsontaylor@gmail.com
+                Jsontaylor&#64;gmail.com
              </h2>
              <p class="text-center text-xs text-gray-600 dark:text-white/70">
                Web designer

--- a/src/app/components/authentication/lockscreen/cover/cover.component.html
+++ b/src/app/components/authentication/lockscreen/cover/cover.component.html
@@ -33,7 +33,7 @@
                <h2
                  class="text-center block text-sm font-semibold text-gray-800 dark:text-white"
                >
-                  Jsontaylor@gmail.com
+                  Jsontaylor&#64;gmail.com
                </h2>
                <p class="text-center text-xs text-gray-600 dark:text-white/70">
                  Web designer

--- a/src/app/components/authentication/lockscreen/cover2/cover2.component.html
+++ b/src/app/components/authentication/lockscreen/cover2/cover2.component.html
@@ -63,7 +63,7 @@
                    <h2
                      class="text-center block text-sm font-semibold text-gray-800 dark:text-white"
                    >
-                      Jsontaylor@gmail.com
+                      Jsontaylor&#64;gmail.com
                    </h2>
                    <p
                      class="text-center text-xs text-gray-600 dark:text-white/70"

--- a/src/app/components/basicui/dropdown/dropdown.component.html
+++ b/src/app/components/basicui/dropdown/dropdown.component.html
@@ -439,7 +439,7 @@
          >
            <div class="ti-dropdown-header">
              <p class="ti-dropdown-header-title">Signed in as</p>
-              <p class="ti-dropdown-header-content">james@site.com</p>
+              <p class="ti-dropdown-header-content">james&#64;site.com</p>
            </div>
            <div class="mt-2 ti-dropdown-divider">
              <a class="ti-dropdown-item" href="javascript:void(0);">

--- a/src/app/components/basicui/tables/basictables/basictables.component.html
+++ b/src/app/components/basicui/tables/basictables/basictables.component.html
@@ -814,7 +814,7 @@
                        <tr>
                          <td class="font-medium">John Brown</td>
                          <td>Regional Paradigm Technician</td>
-                          <td>john@site.com</td>
+                          <td>john&#64;site.com</td>
                          <td>45</td>
                          <td>New York No. 1 Lake Park</td>
                          <td class="text-end font-medium">
@@ -825,7 +825,7 @@
                        <tr>
                          <td class="font-medium">Jim Green</td>
                          <td>Forward Response Developer</td>
-                          <td>jim@site.com</td>
+                          <td>jim&#64;site.com</td>
                          <td>27</td>
                          <td>London No. 1 Lake Park</td>
                          <td class="text-end font-medium">
@@ -836,7 +836,7 @@
                        <tr>
                          <td class="font-medium">Joe Black</td>
                          <td>Product Directives Officer</td>
-                          <td>joe@site.com</td>
+                          <td>joe&#64;site.com</td>
                          <td>31</td>
                          <td>Sidney No. 1 Lake Park</td>
                          <td class="text-end font-medium">

--- a/src/app/components/components/avatars/avatars.component.html
+++ b/src/app/components/components/avatars/avatars.component.html
@@ -796,7 +796,7 @@
                Maria Wanner
              </h3>
              <p class="text-sm font-medium text-gray-500 dark:text-white/70">
-                maria@gmail.com
+                maria&#64;gmail.com
              </p>
            </div>
          </div>

--- a/src/app/components/dashboard/crm/crm.component.html
+++ b/src/app/components/dashboard/crm/crm.component.html
@@ -189,7 +189,7 @@
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
-                          socratesitumay@gmail.com
+                          socratesitumay&#64;gmail.com
                        </p>
                      </div>
                    </div>
@@ -222,7 +222,7 @@
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
-                          jsontaylor2416@gmail.com
+                          jsontaylor2416&#64;gmail.com
                        </p>
                      </div>
                    </div>
@@ -255,7 +255,7 @@
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
-                          suzikastallone3214@gmail.com
+                          suzikastallone3214&#64;gmail.com
                        </p>
                      </div>
                    </div>
@@ -288,7 +288,7 @@
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
-                          AngelinaHose3214@gmail.com
+                          AngelinaHose3214&#64;gmail.com
                        </p>
                      </div>
                    </div>
@@ -321,7 +321,7 @@
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
-                          selenadeoyl114@gmail.com
+                          selenadeoyl114&#64;gmail.com
                        </p>
                      </div>
                    </div>
@@ -354,7 +354,7 @@
                        <p
                          class="text-xs text-gray-400 dark:text-white/80 truncate sm:max-w-max max-w-[100px] font-normal"
                        >
-                          charliedavieson@gmail.com
+                          charliedavieson&#64;gmail.com
                        </p>
                      </div>
                    </div>
@@ -570,7 +570,7 @@
                <span
                  >New member
                  <span class="badge bg-primary/20 text-primary p-1 rounded-sm"
-                    >@andreas gurrero</span
+                    >&#64;andreas gurrero</span
                  >
                  added today to AI Summit.</span
                >
@@ -850,7 +850,7 @@
                      </p>
                      <span
                        class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
-                        >socratesitumay@gmail.com</span
+                        >socratesitumay&#64;gmail.com</span
                      >
                    </div>
                  </div>
@@ -880,7 +880,7 @@
                      </p>
                      <span
                        class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
-                        >jsontaylor2416@gmail.com</span
+                        >jsontaylor2416&#64;gmail.com</span
                      >
                    </div>
                  </div>
@@ -910,7 +910,7 @@
                      </p>
                      <span
                        class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
-                        >InfernoTech@gmail.com</span
+                        >InfernoTech&#64;gmail.com</span
                      >
                    </div>
                  </div>
@@ -940,7 +940,7 @@
                      </p>
                      <span
                        class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
-                        >andrewgarfield@gmail.com</span
+                        >andrewgarfield&#64;gmail.com</span
                      >
                    </div>
                  </div>
@@ -970,7 +970,7 @@
                      </p>
                      <span
                        class="block text-xs text-gray-400 dark:text-white/80 !font-normal my-auto"
-                        >JackTech@gmail.com</span
+                        >JackTech&#64;gmail.com</span
                      >
                    </div>
                  </div>

--- a/src/app/components/dashboard/dashboard.module.ts
+++ b/src/app/components/dashboard/dashboard.module.ts
@@ -29,7 +29,7 @@ import { SubDepartmentThreeComponent } from '../company-components/company-regis
 import { SubDepartmentTwoComponent } from '../company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component';
 import { SubDepartmentFourComponent } from '../company-components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component';
 import { SectionRegistrationComponent } from '../company-components/company-registration/branch-business-unit/section-registration/section-registration.component';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { Bu1Service } from 'src/app/shared/services/bu1.service';
 import { HttpRequestInterceptor } from 'src/app/shared/services/http-request.interceptor';
 import { FormsModule } from '@angular/forms';
@@ -232,229 +232,223 @@ export class CustomDateAdapter extends NativeDateAdapter {
  }
 }
-@NgModule({
+@NgModule({ declarations: [
-  declarations: [
+        SalesComponent,
-    SalesComponent,
+        EcommerceComponent,
-    EcommerceComponent,
+        CryptoComponent,
-    CryptoComponent,
+        JobsComponent,
-    JobsComponent,
+        NftComponent,
-    NftComponent,
+        AnalyticsComponent,
-    AnalyticsComponent,
+        ProjectsComponent,
-    ProjectsComponent,
+        HrmComponent,
-    HrmComponent,
+        CrmComponent,
-    CrmComponent,
+        PersonalComponent,
-    PersonalComponent,
+        StocksComponent,
-    StocksComponent,
+        CourseComponent,
-    CourseComponent,
+        // my Component
+        CompanyRegistrationComponent,
-    // my Component
+        BranchBusinessUnitComponent,
-    CompanyRegistrationComponent,
+        DepartmentRegisterComponent,
-    BranchBusinessUnitComponent,
+        DepartmentListComponent,
-    DepartmentRegisterComponent,
+        SectionRegistrationComponent,
-    DepartmentListComponent,
+        SubDepartmentOneComponent,
-    SectionRegistrationComponent,
+        SubDepartmentTwoComponent,
-    SubDepartmentOneComponent,
+        SubDepartmentThreeComponent,
-    SubDepartmentTwoComponent,
+        SubDepartmentFourComponent,
-    SubDepartmentThreeComponent,
+        JobDescriptionComponent,
-    SubDepartmentFourComponent,
+        PositionUnitComponent,
-    JobDescriptionComponent,
+        EmployeeGroupUnit,
-    PositionUnitComponent,
+        EmployeeCategories,
-    EmployeeGroupUnit,
+        AccountSettingsComponent,
-    EmployeeCategories,
+        UserSettingsComponent,
-    AccountSettingsComponent,
+        EmployeeLevel,
-    UserSettingsComponent,
+        SetAPasswordComponent,
-    EmployeeLevel,
+        NameRegistrationComponent,
-    SetAPasswordComponent,
+        TypeRegistration,
-    NameRegistrationComponent,
+        CompetencyTopic,
-    TypeRegistration,
+        ToolRegisterComponent,
-    CompetencyTopic,
+        AssessmentToolComponent,
-    ToolRegisterComponent,
+        CompetencyManagementComponent,
-    AssessmentToolComponent,
+        JobDetailManagementComponent,
-    CompetencyManagementComponent,
+        CourseRegistrationComponent,
-    JobDetailManagementComponent,
+        DevelopmentCourseComponent,
-    CourseRegistrationComponent,
+        IndicatorsAndCurriculumComponent,
-    DevelopmentCourseComponent,
+        ImportDataComponent,
-    IndicatorsAndCurriculumComponent,
+        EditGroupIndicators,
-    ImportDataComponent,
+        GroupCompetenciesComponent,
-    EditGroupIndicators,
+        EditGroupCompetenciesComponent,
-    GroupCompetenciesComponent,
+        EvaluationCycleManagerComponent,
-    EditGroupCompetenciesComponent,
+        EvaluationCycleComponent,
-    EvaluationCycleManagerComponent,
+        SettingCompetencyComponent,
-    EvaluationCycleComponent,
+        CompetencyConfigurationComponent,
-    SettingCompetencyComponent,
+        IdpDevelopmentPlanComponent,
-    CompetencyConfigurationComponent,
+        SetIdpDevelopmentPlanComponent,
-    IdpDevelopmentPlanComponent,
+        JobCompetencyComponent,
-    SetIdpDevelopmentPlanComponent,
+        SubJobCompetencyComponent,
-    JobCompetencyComponent,
+        JobQualificationsComponent,
-    SubJobCompetencyComponent,
+        SubJobQualificationsComponent,
-    JobQualificationsComponent,
+        JobDetailComponent,
-    SubJobQualificationsComponent,
+        WorkDetailComponent,
-    JobDetailComponent,
+        CommandStructureComponent,
-    WorkDetailComponent,
+        SubCommandStructureComponent,
-    CommandStructureComponent,
+        AssessmentManagementComponent,
-    SubCommandStructureComponent,
+        AssigningApproversComponent,
-    AssessmentManagementComponent,
+        JobPositionIndicatorsComponent,
-    AssigningApproversComponent,
+        SubJobPositionIndicatorsComponent,
-    JobPositionIndicatorsComponent,
+        DefineDocumentFormComponent,
-    SubJobPositionIndicatorsComponent,
+        EditDefineDocumentFormComponent,
-    DefineDocumentFormComponent,
+        EvaluationCyclePerformanceComponent,
-    EditDefineDocumentFormComponent,
+        DocumentFormComponent,
-    EvaluationCyclePerformanceComponent,
+        EditEvaluationFormComponent,
-    DocumentFormComponent,
+        SupervisorEvaluationComponent,
-    EditEvaluationFormComponent,
+        PmsFormEmployeeComponent,
-    SupervisorEvaluationComponent,
+        EmployeeRegistrationComponent,
-    PmsFormEmployeeComponent,
+        SubEmployeeRegistrationComponent,
-    EmployeeRegistrationComponent,
+        AssessmentTopicsComponent,
-    SubEmployeeRegistrationComponent,
+        SetApproversComponent,
-    AssessmentTopicsComponent,
+        NameRegistrationPerfomanceComponent,
-    SetApproversComponent,
+        AssessmentTypesComponent,
-    NameRegistrationPerfomanceComponent,
+        EvaluationGroupingComponent,
-    AssessmentTypesComponent,
+        EditEvaluationGroupingComponent,
-    EvaluationGroupingComponent,
+        ManagementCycleComponent,
-    EditEvaluationGroupingComponent,
+        EvaluationFactorsComponent,
-    ManagementCycleComponent,
+        DefineEvaluationFactorsComponent,
-    EvaluationFactorsComponent,
+        GradeRegistrationComponent,
-    DefineEvaluationFactorsComponent,
+        GradeManagementComponent,
-    GradeRegistrationComponent,
+        GroupGradeComponent,
-    GradeManagementComponent,
+        SubGradeRegistrationComponent,
-    GroupGradeComponent,
+        SettingPerformanceEvalutionComponent,
-    SubGradeRegistrationComponent,
+        AssessmentSystemConfigurationComponent,
-    SettingPerformanceEvalutionComponent,
+        SelfEvaluationComponent,
-    AssessmentSystemConfigurationComponent,
+        CompanyRegistrationPageComponent,
-    SelfEvaluationComponent,
+        ManageUserComponent,
-    CompanyRegistrationPageComponent,
+        PmsGradeRegistrationComponent,
-    ManageUserComponent,
+        PmsGradeManagementComponent,
-    PmsGradeRegistrationComponent,
+        PmsGroupGradeComponent,
-    PmsGradeManagementComponent,
+        PmsSubGradeRegistrationComponent,
-    PmsGroupGradeComponent,
+        DayTypeRegistryComponent,
-    PmsSubGradeRegistrationComponent,
+        TimeAttendanceComponent,
-    DayTypeRegistryComponent,
+        PaginationComponent,
-    TimeAttendanceComponent,
+        RolePermissionConfigComponent,
-    PaginationComponent,
+        TimeAttendanceManageComponent,
-    RolePermissionConfigComponent,
+        TimeAttendanceStatisticsComponent,
-    TimeAttendanceManageComponent,
+        DatagridSyncfutionComponent,
-    TimeAttendanceStatisticsComponent,
+        PmsInformationComponent,
-    DatagridSyncfutionComponent,
+        PmsCompetencyComponent,
-    PmsInformationComponent,
+        PmsKpiComponent,
-    PmsCompetencyComponent,
+        PmsIdpComponent,
-    PmsKpiComponent,
+        PmsSummaryComponent,
-    PmsIdpComponent,
+        EmployeeSelfServiceComponent,
-    PmsSummaryComponent,
+        MySkillXModuleComponent,
-    EmployeeSelfServiceComponent,
+        DashboardEvaluationComponent,
-    MySkillXModuleComponent,
+        ReportCom1Component,
-    DashboardEvaluationComponent,
+        ReportCom2Component,
-    ReportCom1Component,
+        ReportCom3Component,
-    ReportCom2Component,
+        ReportPms1Component,
-    ReportCom3Component,
+        ReportPms2Component,
-    ReportPms1Component,
+        ReportPms3Component,
-    ReportPms2Component,
+        EssProfileComponent,
-    ReportPms3Component,
+        ExcelReportComponent,
-    EssProfileComponent,
+        PivotSyncfutionComponent,
-    ExcelReportComponent,
+        SettingIndividualKpiComponent,
-    PivotSyncfutionComponent,
+        SettingIndividualKpiSupervisorComponent,
-    SettingIndividualKpiComponent,
+        JobDescriptionEssComponent,
-    SettingIndividualKpiSupervisorComponent,
+        MoneyInputDirective
-    JobDescriptionEssComponent,
+    ], imports: [CommonModule,
-    MoneyInputDirective
+        DashboardRoutingModule,
-  ],
+        NgChartsModule,
-  imports: [
+        NgApexchartsModule,
-    CommonModule,
+        CarouselModule,
-    DashboardRoutingModule,
+        SharedModule,
-    NgChartsModule,
+        NgxChartsModule,
-    NgApexchartsModule,
+        NgSelectModule,
-    CarouselModule,
+        FormsModule,
-    SharedModule,
+        NgxDaterangepickerMd.forRoot(),
-    NgxChartsModule,
+        DpDatePickerModule,
-    NgSelectModule,
+        MatDatepickerModule,
-    HttpClientModule,
+        MatNativeDateModule,
-    FormsModule,
+        MatInputModule,
-    NgxDaterangepickerMd.forRoot(),
+        MatFormFieldModule,
-    DpDatePickerModule,
+        MatIconModule,
-    MatDatepickerModule,
+        GridModule,
-    MatNativeDateModule,
+        DropDownListModule,
-    MatInputModule,
+        RatingModule,
-    MatFormFieldModule,
+        MatDialogModule,
-    MatIconModule,
+        BarRatingModule,
-    GridModule,
+        PivotViewModule,
-    DropDownListModule,
+        NgxEchartsModule.forRoot({
-    RatingModule,
+            echarts: () => import('echarts')
-    MatDialogModule,
+        })], providers: [
-    BarRatingModule,
+        Bu1Service,
-    PivotViewModule,
+        Bu2Service,
-    NgxEchartsModule.forRoot({   // ✅ โหลด ECharts เพียงครั้งเดียว
+        Bu3Service,
-      echarts: () => import('echarts')
+        Bu4Service,
-    })
+        Bu5Service,
-  ],
+        Bu6Service,
-  providers: [
+        Bu7Service,
-    Bu1Service,
+        PositionService,
-    Bu2Service,
+        PLService,
-    Bu3Service,
+        EmpGroupService,
-    Bu4Service,
+        EmpTypeService,
-    Bu5Service,
+        CompanyService,
-    Bu6Service,
+        CompetencytypeService,
-    Bu7Service,
+        CompetencytopicService,
-    PositionService,
+        AssessmentService,
-    PLService,
+        CompetencycourseService,
-    EmpGroupService,
+        EmployeeService,
-    EmpTypeService,
+        EvaluationCycleService,
-    CompanyService,
+        SettingAssessmentService,
-    CompetencytypeService,
+        JobCodeService,
-    CompetencytopicService,
+        BranchService,
-    AssessmentService,
+        FileService,
-    CompetencycourseService,
+        CompetencyGroupGradeService,
-    EmployeeService,
+        IndicatorsCoursesService,
-    EvaluationCycleService,
+        IdpDevelopmentService,
-    SettingAssessmentService,
+        GroupAssessmentService,
-    JobCodeService,
+        GroupApproveService,
-    BranchService,
+        UserService,
-    FileService,
+        PmstypeService,
-    CompetencyGroupGradeService,
+        PmstopicService,
-    IndicatorsCoursesService,
+        PmsGroupAssessmentService,
-    IdpDevelopmentService,
+        PmsGroupApproveService,
-    GroupAssessmentService,
+        PmsEaluationFactorsService,
-    GroupApproveService,
+        PmsMasfromEvaluationCycleService,
-    UserService,
+        PmsGroupGradeService,
-    PmstypeService,
+        PmsSettingAssessmentService,
-    PmstopicService,
+        EvaluationAssessmentService,
-    PmsGroupAssessmentService,
+        AppraisalService,
-    PmsGroupApproveService,
+        EventgrpService,
-    PmsEaluationFactorsService,
+        PmsEvaluationCycleService,
-    PmsMasfromEvaluationCycleService,
+        PmsEvaluationAssessmentService,
-    PmsGroupGradeService,
+        PmsWorkingTimeService,
-    PmsSettingAssessmentService,
+        EvaluationIdpService,
-    EvaluationAssessmentService,
+        EmpStatusService,
-    AppraisalService,
+        ConfigPermissionService,
-    EventgrpService,
+        TokenService,
-    PmsEvaluationCycleService,
+        FieldListService,
-    PmsEvaluationAssessmentService,
+        CalculatedFieldService,
-    PmsWorkingTimeService,
+        ConditionalFormattingService,
-    EvaluationIdpService,
+        NumberFormattingService,
-    EmpStatusService,
+        ToolbarService,
-    ConfigPermissionService,
+        GroupingBarService,
-    TokenService,
+        DrillThroughService,
-    FieldListService,
+        VirtualScrollService,
-    CalculatedFieldService,
+        LineSeriesService,
-    ConditionalFormattingService,
+        ColumnSeriesService,
-    NumberFormattingService,
+        CategoryService,
-    ToolbarService,
+        LegendService,
-    GroupingBarService,
+        TooltipService,
-    DrillThroughService,
+        ResizeService,
-    VirtualScrollService,
+        SortService,
-    LineSeriesService,
+        PageService,
-    ColumnSeriesService,
+        FilterService,
-    CategoryService,
+        {
-    LegendService,
+            provide: HTTP_INTERCEPTORS,
-    TooltipService,
+            useClass: HttpRequestInterceptor,
-    ResizeService,
+            multi: true,
-    SortService,
+        },
-    PageService,
+        { provide: DateAdapter, useClass: CustomDateAdapter },
-    FilterService,
+        { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
-    {
+        provideHttpClient(withInterceptorsFromDi())
-      provide: HTTP_INTERCEPTORS,
+    ] })
-      useClass: HttpRequestInterceptor,
-      multi: true,
-    },
-    { provide: DateAdapter, useClass: CustomDateAdapter },
-    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }]
-})
 export class DashboardModule { }
--- a/src/app/components/dashboard/jobs/jobs.component.html
+++ b/src/app/components/dashboard/jobs/jobs.component.html
@@ -487,11 +487,11 @@
              />
              <div class="flex-auto">
                <div class="recent-recruiter">
-                  <p class="text-sm font-semibold mb-0 truncate">Hr@Spruko</p>
+                  <p class="text-sm font-semibold mb-0 truncate">Hr&#64;Spruko</p>
                  <p
                    class="mb-0 text-xs text-gray-500 dark:text-white/70 truncate"
                  >
-                    hr.spruko@gmail.com
+                    hr.spruko&#64;gmail.com
                  </p>
                </div>
              </div>
@@ -534,11 +534,11 @@
              />
              <div class="flex-auto">
                <div class="recent-recruiter">
-                  <p class="text-sm font-semibold mb-0 truncate">Hr@Nicero</p>
+                  <p class="text-sm font-semibold mb-0 truncate">Hr&#64;Nicero</p>
                  <p
                    class="mb-0 text-xs text-gray-500 dark:text-white/70 truncate"
                  >
-                    nicero.help@gmail.com
+                    nicero.help&#64;gmail.com
                  </p>
                </div>
              </div>
@@ -581,11 +581,11 @@
              />
              <div class="flex-auto">
                <div class="recent-recruiter">
-                  <p class="text-sm font-semibold mb-0 truncate">Hr@David</p>
+                  <p class="text-sm font-semibold mb-0 truncate">Hr&#64;David</p>
                  <p
                    class="mb-0 text-xs text-gray-500 dark:text-white/70 truncate"
                  >
-                    David.525@gmail.com
+                    David.525&#64;gmail.com
                  </p>
                </div>
              </div>
@@ -632,7 +632,7 @@
                  <p
                    class="mb-0 text-xs text-gray-500 dark:text-white/70 truncate"
                  >
-                    josephsmith@gmail.com
+                    josephsmith&#64;gmail.com
                  </p>
                </div>
              </div>
@@ -677,7 +677,7 @@
                  <p
                    class="mb-0 text-xs text-gray-500 dark:text-white/70 truncate"
                  >
-                    Kristie Nah@gmail.com
+                    Kristie Nah&#64;gmail.com
                  </p>
                </div>
              </div>
@@ -1338,7 +1338,7 @@
                    >Team Lead</span
                  >
                </td>
-                <td>mayorkelly@gmail.com</td>
+                <td>mayorkelly&#64;gmail.com</td>
                <td>
                  <div class="inline-flex items-center">
                    <i
@@ -1388,7 +1388,7 @@
                    >Director</span
                  >
                </td>
-                <td>andrewgarfield@gmail.com</td>
+                <td>andrewgarfield&#64;gmail.com</td>
                <td>
                  <div class="inline-flex items-center">
                    <i
@@ -1438,7 +1438,7 @@
                    >Manager</span
                  >
                </td>
-                <td>simoncowel234@gmail.com</td>
+                <td>simoncowel234&#64;gmail.com</td>
                <td>
                  <div class="inline-flex items-center">
                    <i
@@ -1488,7 +1488,7 @@
                    >Employee</span
                  >
                </td>
-                <td>mirindahers@gmail.com</td>
+                <td>mirindahers&#64;gmail.com</td>
                <td>
                  <div class="inline-flex items-center">
                    <i
@@ -1538,7 +1538,7 @@
                    >Director</span
                  >
                </td>
-                <td>andrewgarfield@gmail.com</td>
+                <td>andrewgarfield&#64;gmail.com</td>
                <td>
                  <div class="inline-flex items-center">
                    <i

--- a/src/app/components/dashboard/nft/nft.component.html
+++ b/src/app/components/dashboard/nft/nft.component.html
@@ -60,7 +60,7 @@
                  </div>
                  <div>
                    <p class="mb-0 font-semibold">Bloom NFT</p>
-                    <p class="text-xs text-white/70 mb-0">@bloom116</p>
+                    <p class="text-xs text-white/70 mb-0">&#64;bloom116</p>
                  </div>
                </div>
                <div class="flex flex-wrap items-center justify-between">
@@ -136,7 +136,7 @@
                  </div>
                  <div>
                    <p class="mb-0 font-semibold">Ergos NFT</p>
-                    <p class="text-xs text-white/70 mb-0">@ergos900</p>
+                    <p class="text-xs text-white/70 mb-0">&#64;ergos900</p>
                  </div>
                </div>
                <div class="flex flex-wrap items-center justify-between">
@@ -210,7 +210,7 @@
                  </div>
                  <div>
                    <p class="mb-0 font-semibold">Caros NFT</p>
-                    <p class="text-xs text-white/70 mb-0">@caros002</p>
+                    <p class="text-xs text-white/70 mb-0">&#64;caros002</p>
                  </div>
                </div>
                <div class="flex flex-wrap items-center justify-between">
@@ -277,7 +277,7 @@
                      <div>
                        <p class="text-sm font-semibold mb-0">Kakasha Si</p>
                        <span class="text-gray-500 dark:text-white/70 text-xs"
-                          >@sensei011<span
+                          >&#64;sensei011<span
                            class="ltr:ml-2 rtl:mr-2 text-success text-xs block sm:inline-block"
                            ><i
                              class="ri-arrow-up-s-line align-middle ltr:mr-1 rtl:ml-1"
@@ -317,7 +317,7 @@
                      <div>
                        <p class="text-sm font-semibold mb-0">Naruto Uzumaki</p>
                        <span class="text-gray-500 dark:text-white/70 text-xs"
-                          >@naruto111<span
+                          >&#64;naruto111<span
                            class="ltr:ml-2 rtl:mr-2 text-success text-xs block sm:inline-block"
                            ><i
                              class="ri-arrow-up-s-line align-middle ltr:mr-1 rtl:ml-1"
@@ -357,7 +357,7 @@
                      <div>
                        <p class="text-sm font-semibold mb-0">Kazimo Aruke</p>
                        <span class="text-gray-500 dark:text-white/70 text-xs"
-                          >@kazimo900<span
+                          >&#64;kazimo900<span
                            class="ltr:ml-2 rtl:mr-2 text-danger text-xs block sm:inline-block"
                            ><i
                              class="ri-arrow-down-s-line align-middle ltr:mr-1 rtl:ml-1"
@@ -397,7 +397,7 @@
                      <div>
                        <p class="text-sm font-semibold mb-0">Oorichimaru lo</p>
                        <span class="text-gray-500 dark:text-white/70 text-xs"
-                          >@ooro001<span
+                          >&#64;ooro001<span
                            class="ltr:ml-2 rtl:mr-2 text-danger text-xs block sm:inline-block"
                            ><i
                              class="ri-arrow-down-s-line align-middle ltr:mr-1 rtl:ml-1"
@@ -437,7 +437,7 @@
                      <div>
                        <p class="text-sm font-semibold mb-0">Sasuke Uchiha</p>
                        <span class="text-gray-500 dark:text-white/70 text-xs"
-                          >@sasuke777<span
+                          >&#64;sasuke777<span
                            class="ltr:ml-2 rtl:mr-2 text-danger text-xs block sm:inline-block"
                            ><i
                              class="ri-arrow-down-s-line align-middle ltr:mr-1 rtl:ml-1"
@@ -479,7 +479,7 @@
                          Lorem Ipsum Uch
                        </p>
                        <span class="text-gray-500 dark:text-white/70 text-xs"
-                          >@kakashi092<span
+                          >&#64;kakashi092<span
                            class="ltr:ml-2 rtl:mr-2 text-danger text-xs block sm:inline-block"
                            ><i
                              class="ri-arrow-down-s-line align-middle ltr:mr-1 rtl:ml-1"
@@ -519,7 +519,7 @@
                      <div>
                        <p class="text-sm font-semibold mb-0">Nagiro Ohinavo</p>
                        <span class="text-gray-500 dark:text-white/70 text-xs"
-                          >@nagiro096<span
+                          >&#64;nagiro096<span
                            class="ltr:ml-2 rtl:mr-2 text-success text-xs block sm:inline-block"
                            ><i
                              class="ri-arrow-up-s-line align-middle ltr:mr-1 rtl:ml-1"
@@ -704,7 +704,7 @@
                        </svg>
                      </p>
                      <span class="text-xs text-gray-500 dark:text-white/70"
-                        >amandananes@</span
+                        >amandananes&#64;</span
                      >
                    </div>
                  </div>
@@ -750,7 +750,7 @@
                        </svg>
                      </p>
                      <span class="text-xs text-gray-500 dark:text-white/70"
-                        >@charlesachilles</span
+                        >&#64;charlesachilles</span
                      >
                    </div>
                  </div>
@@ -796,7 +796,7 @@
                        </svg>
                      </p>
                      <span class="text-xs text-gray-500 dark:text-white/70"
-                        >@juliacamo</span
+                        >&#64;juliacamo</span
                      >
                    </div>
                  </div>
@@ -842,7 +842,7 @@
                        </svg>
                      </p>
                      <span class="text-xs text-gray-500 dark:text-white/70"
-                        >@jsontaylor</span
+                        >&#64;jsontaylor</span
                      >
                    </div>
                  </div>
@@ -921,7 +921,7 @@
                        }}</a>
                      </p>
                      <p class="text-gray-500 dark:text-white/70 text-xs mb-0">
-                        @simon
+                        &#64;simon
                      </p>
                    </div>
                  </div>

--- a/src/app/components/dashboard/projects/projects.component.html
+++ b/src/app/components/dashboard/projects/projects.component.html
@@ -339,7 +339,7 @@
                    <div class="flex-1">
                      <h6 class="font-semibold text-sm">Richard Dom</h6>
                      <span class="text-xs text-gray-500 dark:text-white/70"
-                        >richarddom1116@demo.com</span
+                        >richarddom1116&#64;demo.com</span
                      >
                    </div>
                  </div>
@@ -377,7 +377,7 @@
                    <div class="flex-1">
                      <h6 class="font-semibold text-sm">Jennifer Tab</h6>
                      <span class="text-xs text-gray-500 dark:text-white/70"
-                        >jenny258@demo.com</span
+                        >jenny258&#64;demo.com</span
                      >
                    </div>
                  </div>
@@ -415,7 +415,7 @@
                    <div class="flex-1">
                      <h6 class="font-semibold text-sm">Nikki Jey</h6>
                      <span class="text-xs text-gray-500 dark:text-white/70"
-                        >nikkiJ141@demo.com</span
+                        >nikkiJ141&#64;demo.com</span
                      >
                    </div>
                  </div>
@@ -453,7 +453,7 @@
                    <div class="flex-1">
                      <h6 class="font-semibold text-sm">Arifa Zed</h6>
                      <span class="text-xs text-gray-500 dark:text-white/70"
-                        >arifaZ@demo.com</span
+                        >arifaZ&#64;demo.com</span
                      >
                    </div>
                  </div>
@@ -491,7 +491,7 @@
                    <div class="flex-1">
                      <h6 class="font-semibold text-sm">Xiong Yu</h6>
                      <span class="text-xs text-gray-500 dark:text-white/70"
-                        >xingzing444@demo.com</span
+                        >xingzing444&#64;demo.com</span
                      >
                    </div>
                  </div>

--- a/src/app/components/forms-module/forms-module.module.ts
+++ b/src/app/components/forms-module/forms-module.module.ts
@@ -18,7 +18,7 @@ import { NgxDropzoneModule } from 'ngx-dropzone';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { SharedModule } from 'src/app/shared/sharedmodule';
 import { MaterialModuleModule } from 'src/app/materialModule/material-module/material-module.module';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NgxMatTimepickerModule } from 'ngx-mat-timepicker';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxEditorModule } from 'ngx-editor';
@@ -27,72 +27,65 @@ import { NgxColorsModule } from 'ngx-colors';
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 import { AngularEditorModule } from '@kolkov/angular-editor';
-@NgModule({
+@NgModule({ declarations: [
-  declarations: [
+        FormelementsComponent,
-    FormelementsComponent,
+        AdvancedFormsComponent,
-    AdvancedFormsComponent,
+        FormInputGroupComponent,
-    FormInputGroupComponent,
+        FileUploadsComponent,
-    FileUploadsComponent,
+        FormCheckboxComponent,
-    FormCheckboxComponent,
+        FormRadioComponent,
-    FormRadioComponent,
+        FormSelectComponent,
-    FormSelectComponent,
+        FormSwitchComponent,
-    FormSwitchComponent,
+        FormLayoutsComponent,
-    FormLayoutsComponent,
+        FormValidationsComponent,
-    FormValidationsComponent,
+        FormEditorComponent,
-    FormEditorComponent,
+    ], imports: [CommonModule,
-  ],
+        FormsModuleRoutingModule,
-  imports: [
+        NgxDropzoneModule,
-    CommonModule,
+        NgSelectModule,
-    FormsModuleRoutingModule,
+        ReactiveFormsModule,
-    NgxDropzoneModule,
+        FormsModule,
-    NgSelectModule,
+        SharedModule,
-    ReactiveFormsModule,
+        NgxMatTimepickerModule,
-    FormsModule,
+        MaterialModuleModule,
-    SharedModule,
+        MaterialModuleModule,
-    NgxMatTimepickerModule,
+        ColorPickerModule,
-    MaterialModuleModule,
+        DpDatePickerModule,
-    HttpClientModule,
+        NgxColorsModule,
-    MaterialModuleModule,
+        NgxDaterangepickerMd.forRoot(),
-    ColorPickerModule,
+        NgxEditorModule.forRoot({
-    DpDatePickerModule,
+            locals: {
-    NgxColorsModule,
+                // menu
-    NgxDaterangepickerMd.forRoot(),
+                bold: 'Bold',
-    NgxEditorModule.forRoot({
+                italic: 'Italic',
-      locals: {
+                code: 'Code',
-        // menu
+                blockquote: 'Blockquote',
-        bold: 'Bold',
+                underline: 'Underline',
-        italic: 'Italic',
+                strike: 'Strike',
-        code: 'Code',
+                // bullet_list: 'Bullet List',
-        blockquote: 'Blockquote',
+                // ordered_list: 'Ordered List',
-        underline: 'Underline',
+                heading: 'Heading',
-        strike: 'Strike',
+                h1: 'Header 1',
-        // bullet_list: 'Bullet List',
+                h2: 'Header 2',
-        // ordered_list: 'Ordered List',
+                h3: 'Header 3',
-        heading: 'Heading',
+                h4: 'Header 4',
-        h1: 'Header 1',
+                h5: 'Header 5',
-        h2: 'Header 2',
+                h6: 'Header 6',
-        h3: 'Header 3',
+                // align_left: 'Left Align',
-        h4: 'Header 4',
+                // align_center: 'Center Align',
-        h5: 'Header 5',
+                // align_right: 'Right Align',
-        h6: 'Header 6',
+                // align_justify: 'Justify',
-        // align_left: 'Left Align',
+                // text_color: 'Text Color',
-        // align_center: 'Center Align',
+                // background_color: 'Background Color',
-        // align_right: 'Right Align',
+                // popups, forms, others...
-        // align_justify: 'Justify',
+                url: 'URL',
-        // text_color: 'Text Color',
+                text: 'Text',
-        // background_color: 'Background Color',
+                openInNewTab: 'Open in new tab',
+                insert: 'Insert',
-        // popups, forms, others...
+                altText: 'Alt Text',
-        url: 'URL',
+                title: 'Title',
-        text: 'Text',
+                remove: 'Remove',
-        openInNewTab: 'Open in new tab',
+            },
-        insert: 'Insert',
+        }),
-        altText: 'Alt Text',
+        AngularEditorModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
-        title: 'Title',
-        remove: 'Remove',
-      },
-    }),
-    AngularEditorModule,
-  ],
-})
 export class FormsModuleModule {}
--- a/src/app/components/maps/maps.module.ts
+++ b/src/app/components/maps/maps.module.ts
@@ -3,20 +3,14 @@ import { CommonModule } from '@angular/common';
 import { MapsRoutingModule } from './maps-routing.module';
 import { LeafletComponent } from './leaflet/leaflet.component';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { SharedModule } from 'src/app/shared/sharedmodule';
-@NgModule({
+@NgModule({ declarations: [
-  declarations: [
+        LeafletComponent
-    LeafletComponent
+    ], imports: [CommonModule,
-  ],
+        MapsRoutingModule,
-  imports: [
+        LeafletModule,
-    CommonModule,
+        SharedModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
-    MapsRoutingModule,
-    HttpClientModule,
-    LeafletModule,
-    SharedModule
-  ]
-})
 export class MapsModule { }
--- a/src/app/components/page/contacts/contacts.component.html
+++ b/src/app/components/page/contacts/contacts.component.html
@@ -110,7 +110,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      juliawalker@gmail.com
+                      juliawalker&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -195,7 +195,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      BenDover@gmail.com
+                      BenDover&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -280,7 +280,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      EosTempor@gmail.com
+                      EosTempor&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -365,7 +365,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      JsonTaylor2023@gmail.com
+                      JsonTaylor2023&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -450,7 +450,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      SocratesItumay2023@gmail.com
+                      SocratesItumay2023&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -535,7 +535,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      WileyWaites2023@gmail.com
+                      WileyWaites2023&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -620,7 +620,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      AlicaNestle2023@gmail.com
+                      AlicaNestle2023&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -705,7 +705,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      EdgardoHuel2023@gmail.com
+                      EdgardoHuel2023&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -790,7 +790,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      Williemakit2023@gmail.com
+                      Williemakit2023&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -875,7 +875,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      KatherinaKat2023@gmail.com
+                      KatherinaKat2023&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -960,7 +960,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      Wileydover2023@gmail.com
+                      Wileydover2023&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -1045,7 +1045,7 @@
                    <p
                      class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate max-w-[9rem]"
                    >
-                      BenzMakit2023@gmail.com
+                      BenzMakit2023&#64;gmail.com
                    </p>
                    <p
                      class="text-primary dark:text-primary text-xs font-semibold"
@@ -1227,7 +1227,7 @@
              <a
                class="text-xs text-gray-500 dark:text-white/70"
-                >juliawalker@gmail.com</a
+                >juliawalker&#64;gmail.com</a
              >
            </div>
          </div>

--- a/src/app/components/page/contactus/contactus.component.html
+++ b/src/app/components/page/contactus/contactus.component.html
@@ -59,7 +59,7 @@
                <div>
                  <h5 class="font-semibold text-base">Email Address</h5>
                  <p class="text-gray-500 dark:text-white/70">
-                    info12323@example.com
+                    info12323&#64;example.com
                  </p>
                </div>
              </div>

--- a/src/app/components/page/ecommerce/ecommerce.module.ts
+++ b/src/app/components/page/ecommerce/ecommerce.module.ts
@@ -23,37 +23,31 @@ import { DpDatePickerModule } from 'ng2-date-picker';
 import { CarouselModule } from 'ngx-owl-carousel-o';
 import { NgxEditorModule } from 'ngx-editor';
 import { AngularEditorModule } from '@kolkov/angular-editor';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-@NgModule({
+@NgModule({ declarations: [
-  declarations: [
+        ProductsComponent,
-    ProductsComponent,
+        ProductListComponent,
-    ProductListComponent,
+        AddProductComponent,
-    AddProductComponent,
+        EditProductComponent,
-    EditProductComponent,
+        ProductDetailsComponent,
-    ProductDetailsComponent,
+        CartComponent,
-    CartComponent,
+        CheckoutComponent,
-    CheckoutComponent,
+        OrdersComponent,
-    OrdersComponent,
+        OrderdetailsComponent,
-    OrderdetailsComponent,
+        WhislistComponent,
-    WhislistComponent,
+    ], imports: [CommonModule,
-  ],
+        EcommerceRoutingModule,
-  imports: [
+        SharedModule,
-    CommonModule,
+        NgSelectModule,
-    EcommerceRoutingModule,
+        FormsModule,
-    SharedModule,
+        ReactiveFormsModule,
-    NgSelectModule,
+        MaterialModuleModule,
-    FormsModule,
+        NgxDropzoneModule,
-    ReactiveFormsModule,
+        NgxMatTimepickerModule,
-    MaterialModuleModule,
+        SwiperModule,
-    NgxDropzoneModule,
+        DpDatePickerModule,
-    NgxMatTimepickerModule,
+        NgxEditorModule,
-    SwiperModule,
+        CarouselModule,
-    DpDatePickerModule,
+        AngularEditorModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
-    NgxEditorModule,
-    CarouselModule,
-    HttpClientModule,
-    AngularEditorModule,
-  ],
-})
 export class EcommerceModule {}
--- a/src/app/components/page/ecommerce/orderdetails/orderdetails.component.html
+++ b/src/app/components/page/ecommerce/orderdetails/orderdetails.component.html
@@ -535,7 +535,7 @@
            <div class="space-x-3">
              <span class="text-sm font-bold">Email :</span>
              <span class="text-sm text-gray-500 dark:text-white/70"
-                >jsontaylor2135@gmail.com</span
+                >jsontaylor2135&#64;gmail.com</span
              >
            </div>
            <div class="space-x-3">

--- a/src/app/components/page/invoice/invoicedetails/invoicedetails.component.html
+++ b/src/app/components/page/invoice/invoicedetails/invoicedetails.component.html
@@ -25,7 +25,7 @@
            </div>
            <div class="mt-1">Cecilia Chapman</div>
            <div class="mt-1">P.O. Box 283 8562 Fusce Rd., 20620</div>
-            <div class="mt-1">ypurdomain@example.com</div>
+            <div class="mt-1">ypurdomain&#64;example.com</div>
          </div>
          <div class="text-end">
            <h3 class="text-2xl text-primary uppercase font-semibold">
@@ -47,7 +47,7 @@
            <address class="not-italic">
              Cecilia Chapman<br />
              P.O. Box 283 8562 Fusce Rd., 20620<br />
-              ypurdomain@example.com
+              ypurdomain&#64;example.com
            </address>
          </div>
          <div class="lg:col-span-6 col-span-12 text-end">
@@ -55,7 +55,7 @@
            <address class="not-italic">
              Cecilia Chapman<br />
              P.O. Box 283 8562 Fusce Rd., 20620<br />
-              ypurdomain@example.com
+              ypurdomain&#64;example.com
            </address>
          </div>
        </div>

--- a/src/app/components/page/landing/landing.component.html
+++ b/src/app/components/page/landing/landing.component.html
@@ -3234,7 +3234,7 @@
                      href="javascript:void(0);"
                      class="text-sm font-normal text-gray-500 dark:text-white/70"
                    >
-                      info12323@example.com</a
+                      info12323&#64;example.com</a
                    >
                  </div>
                </div>
@@ -3445,7 +3445,7 @@
                        ><i
                          class="text-white ri-mail-line ltr:mr-2 rtl:ml-2"
                        ></i
-                        >info12323@example.com</a
+                        >info12323&#64;example.com</a
                      >
                    </li>
                    <li>

--- a/src/app/components/page/mail/chat/chat.component.html
+++ b/src/app/components/page/mail/chat/chat.component.html
@@ -2864,7 +2864,7 @@
                        <div class="">
                          <h3 class="font-bold">Email</h3>
                          <p class="text-gray-500 dark:text-white/70 text-sm">
-                            Airisatou@youremail.com
+                            Airisatou&#64;youremail.com
                          </p>
                        </div>
                      </div>

--- a/src/app/components/page/mail/mail/mail.component.html
+++ b/src/app/components/page/mail/mail/mail.component.html
@@ -2721,7 +2721,7 @@
                <span class="mail-name">Json Taylor</span>
                <span
                  class="text-xs text-gray-500 dark:text-white/70 mail-email"
-                  >(JsonTaylor2022@gmail.com)</span
+                  >(JsonTaylor2022&#64;gmail.com)</span
                >
              </p>
              <p class="text-sm font-semibold text-primary mail-subject">
@@ -2808,11 +2808,11 @@
        </div>
        <div class="flex space-x-4 rtl:space-x-reverse">
          <span class="text-xs font-semibold">To : </span>
-          <span class="text-xs">WileyWaites@gmail.com</span>
+          <span class="text-xs">WileyWaites&#64;gmail.com</span>
        </div>
        <div class="flex space-x-4 rtl:space-x-reverse">
          <span class="text-xs font-semibold">CC : </span>
-          <span class="text-xs">SocratesItumay@gmail.com</span>
+          <span class="text-xs">SocratesItumay&#64;gmail.com</span>
        </div>
      </div>
      <div class="box-body">

--- a/src/app/components/page/profile/home/home.component.html
+++ b/src/app/components/page/profile/home/home.component.html
@@ -45,7 +45,7 @@
    </div>
    <div class="text-white">
      <h2 class="text-base font-semibold">Anderson Itumay</h2>
-      <p class="text-xs text-white/50">andersonitumay@abc.com</p>
+      <p class="text-xs text-white/50">andersonitumay&#64;abc.com</p>
    </div>
    <div class="flex space-x-2 rtl:space-x-reverse text-center justify-center">
      <div class="text-yellow-500 text-base hover:text-yellow-500">
@@ -559,7 +559,7 @@
                      </td>
                      <td class="!p-2">:</td>
                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
-                        andersonitumay@abc.com
+                        andersonitumay&#64;abc.com
                      </td>
                    </tr>
                    <tr class="!border-0">
@@ -570,7 +570,7 @@
                      </td>
                      <td class="!p-2">:</td>
                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
-                        andersonitumay@abc.com
+                        andersonitumay&#64;abc.com
                      </td>
                    </tr>
                    <tr class="!border-0">

--- a/src/app/components/page/profile/profilesettings/profilesettings.component.html
+++ b/src/app/components/page/profile/profilesettings/profilesettings.component.html
@@ -898,7 +898,7 @@
                      <b class="text-success"
                        >One Special Character<sup>*</sup></b
                      >
-                      e.g., ! @ # ? included.
+                      e.g., ! &#64; # ? included.
                    </p>
                  </div>
                </div>

--- a/src/app/components/page/team/team.component.html
+++ b/src/app/components/page/team/team.component.html
@@ -167,7 +167,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Socrates Itumay</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        socratesItumay@abc.com
+                        socratesItumay&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -321,7 +321,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Eos Tempor</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        eostempor@abc.com
+                        eostempor&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -475,7 +475,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Airi Satou</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        airisatou@abc.com
+                        airisatou&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -629,7 +629,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Et Kasd</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        etkasd@abc.com
+                        etkasd&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -783,7 +783,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Anderson Itumay</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        andersonitumay@abc.com
+                        andersonitumay&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -937,7 +937,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Samantha Paul</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        samanthapaul@abc.com
+                        samanthapaul&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -1091,7 +1091,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Mc Greggor</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        mcgreggor@abc.com
+                        mcgreggor&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -1245,7 +1245,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Emiley Jackson</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        emileyjackson@abc.com
+                        emileyjackson&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -1399,7 +1399,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Nicholas Sams</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        nicholassams@abc.com
+                        nicholassams&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -1553,7 +1553,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Pope Johnson</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        popejohnson@abc.com
+                        popejohnson&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -1707,7 +1707,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Megan Fox</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        meganfox@abc.com
+                        meganfox&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -1861,7 +1861,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Dolor Dlita</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        dolordlita@abc.com
+                        dolordlita&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -2038,7 +2038,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Anderson Itumay</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        andersonitumay@abc.com
+                        andersonitumay&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -2192,7 +2192,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Samantha Paul</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        samanthapaul@abc.com
+                        samanthapaul&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -2346,7 +2346,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Mc Greggor</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        mcgreggor@abc.com
+                        mcgreggor&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -2500,7 +2500,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Emiley Jackson</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        emileyjackson@abc.com
+                        emileyjackson&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -2654,7 +2654,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Nicholas Sams</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        nicholassams@abc.com
+                        nicholassams&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -2808,7 +2808,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Pope Johnson</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        popejohnson@abc.com
+                        popejohnson&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -2962,7 +2962,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Megan Fox</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        meganfox@abc.com
+                        meganfox&#64;abc.com
                      </p>
                    </div>
                    <span
@@ -3116,7 +3116,7 @@
                    <div class="mt-4">
                      <h2 class="text-base font-semibold">Dolor Dlita</h2>
                      <p class="text-xs text-gray-500 dark:text-white/70">
-                        dolordlita@abc.com
+                        dolordlita&#64;abc.com
                      </p>
                    </div>
                    <span

--- a/src/app/shared/services/http-request.interceptor.ts
+++ b/src/app/shared/services/http-request.interceptor.ts
 import { Injectable } from '@angular/core';
-import {
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
-  HttpRequest,
-  HttpHandler,
-  HttpEvent,
-  HttpInterceptor,
-  HttpErrorResponse
-} from '@angular/common/http';
 import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
 import { catchError, filter, switchMap, take, tap } from 'rxjs/operators';
 import { AuthService } from './auth.service';