feedback updates

src/app/app.routes.server.ts

@@ -12,7 +12,7 @@ export const serverRoutes: ServerRoute[] = [
   { path: ':appId/table-record', renderMode: RenderMode.Client },
   { path: ':appId/country-messages', renderMode: RenderMode.Client },
   { path: ':appId/add-preparer', renderMode: RenderMode.Client },
-  { path: ':appId/edit-carnet/:headerid', renderMode: RenderMode.Client },
+  { path: ':appId/process-carnet/:headerid', renderMode: RenderMode.Client },
   { path: ':appId/view-carnet/:headerid', renderMode: RenderMode.Client },
   { path: ':appId/add-holder', renderMode: RenderMode.Client },
   { path: ':appId/edit-holder/:holderid', renderMode: RenderMode.Client },

src/app/app.routes.ts

@@ -21,7 +21,7 @@ export const routes: Routes = [
             { path: 'table-record', loadComponent: () => import('./param/manage-table-record/manage-table-record.component').then(m => m.ManageTableRecordComponent) },
             { path: 'param-record/:id', loadComponent: () => import('./param/manage-param-record/manage-param-record.component').then(m => m.ManageParamRecordComponent) },
             { path: 'country-messages', loadComponent: () => import('./param/manage-country/manage-country.component').then(m => m.ManageCountryComponent) },
-            { path: 'edit-carnet/:headerid', loadComponent: () => import('./carnet/edit/edit-carnet.component').then(m => m.EditCarnetComponent), canDeactivate: [CarnetCleanupGuard] },
+            { path: 'process-carnet/:headerid', loadComponent: () => import('./carnet/edit/edit-carnet.component').then(m => m.EditCarnetComponent), canDeactivate: [CarnetCleanupGuard] },
             { path: 'view-carnet/:headerid', loadComponent: () => import('./carnet/view/view-carnet.component').then(m => m.ViewCarnetComponent), canDeactivate: [CarnetCleanupGuard] },
             { path: 'add-holder', loadComponent: () => import('./holder/add/add-holder.component').then(m => m.AddHolderComponent), canDeactivate: [CarnetCleanupGuard] },
             { path: 'edit-holder/:holderid', loadComponent: () => import('./holder/edit/edit-holder.component').then(m => m.EditHolderComponent), canDeactivate: [CarnetCleanupGuard] },

src/app/carnet/additional-set/additional-set.component.html

@@ -0,0 +1 @@
+<p>additional-set works!</p>

src/app/carnet/additional-set/additional-set.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-additional-set',
+  imports: [],
+  templateUrl: './additional-set.component.html',
+  styleUrl: './additional-set.component.scss'
+})
+export class AdditionalSetComponent {
+
+}

src/app/carnet/application/application.component.ts

@@ -77,7 +77,7 @@ export class ApplicationComponent {
       name: this.applicationName,
     });
 
-    if (this.isEditMode) {
+    if (this.isEditMode || this.isViewMode) {
       this.applicationDetailsForm.get('name')?.disable();
       this.disableSaveButton = true;
     }

src/app/carnet/duplicate/duplicate.component.html

@@ -0,0 +1 @@
+<p>duplicate works!</p>

src/app/carnet/duplicate/duplicate.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-duplicate',
+  imports: [],
+  templateUrl: './duplicate.component.html',
+  styleUrl: './duplicate.component.scss'
+})
+export class DuplicateComponent {
+
+}

src/app/carnet/goods/goods.component.ts

@@ -174,6 +174,10 @@ export class GoodsComponent {
       horseUsed: data.horseUsed || false,
       authorizedRepresentatives: data.authorizedRepresentatives || ''
     });
+
+    if (this.isViewMode) {
+      this.goodsForm.disable();
+    }
   }
 
   // Add new item to the table

src/app/carnet/replacement-set/replacement-set.component.html

@@ -0,0 +1 @@
+<p>replacement-set works!</p>

src/app/carnet/replacement-set/replacement-set.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-replacement-set',
+  imports: [],
+  templateUrl: './replacement-set.component.html',
+  styleUrl: './replacement-set.component.scss'
+})
+export class ReplacementSetComponent {
+
+}

src/app/carnet/shipping/fees-dialog.component.ts

@@ -0,0 +1,78 @@
+import { Component, inject, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { AngularMaterialModule } from '../../shared/module/angular-material.module';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CarnetService } from '../../core/services/carnet/carnet.service';
+import { Fees } from '../../core/models/carnet/fee';
+import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
+import { NotificationService } from '../../core/services/common/notification.service';
+
+@Component({
+  selector: 'app-fees-dialog',
+  imports: [AngularMaterialModule, CommonModule, FormsModule],
+  template: `
+    <h3 mat-dialog-title>Fees and Charges</h3>
+    <mat-dialog-content>
+        <p> The following fees apply:</p>
+        <ul>
+            <li *ngIf="estimatedFees.basicFee">Basic fee: {{estimatedFees.basicFee | currency}}</li>
+            <li *ngIf="estimatedFees.counterFoilFee">Counterfoil Fee: {{estimatedFees.counterFoilFee | currency}}
+            </li>
+            <li *ngIf="estimatedFees.continuationSheetFee">Continuation sheet fee:
+                {{estimatedFees.continuationSheetFee | currency}}</li>
+            <li *ngIf="estimatedFees.expeditedFee">Expedited fee: {{estimatedFees.expeditedFee | currency}}</li>
+            <li *ngIf="estimatedFees.shippingFee">Shipping fee: {{estimatedFees.shippingFee | currency}}</li>
+            <li *ngIf="estimatedFees.bondPremium">Bond Premium: {{estimatedFees.bondPremium | currency}}</li>
+            <li *ngIf="estimatedFees.cargoPremium">Cargo Premium: {{estimatedFees.cargoPremium | currency}}</li>
+            <li *ngIf="estimatedFees.ldiPremium">LDI Premium: {{estimatedFees.ldiPremium | currency}}</li>
+        </ul>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-raised-button color="primary" (click)="onClose()">
+        Ok
+      </button>
+    </mat-dialog-actions>
+  `,
+  styles: [`
+    li {
+        margin-bottom: 8px;
+    }
+  `]
+})
+export class FeesDialogComponent {
+  estimatedFees: Fees = {};
+  headerid: number | null = null;
+
+  private carnetService = inject(CarnetService);
+  private notificationService = inject(NotificationService);
+  private errorHandler = inject(ApiErrorHandlerService);
+
+  constructor(
+    public dialogRef: MatDialogRef<FeesDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { headerid: any }
+  ) {
+    this.headerid = data.headerid;
+  }
+
+  ngOnInit(): void {
+    if (this.headerid && this.headerid > 0) {
+      this.carnetService.getEstimatedFees(this.headerid).subscribe({
+        next: (data: Fees) => {
+          if (data) {
+            this.estimatedFees = data;
+          }
+        },
+        error: (error: any) => {
+          let errorMessage = this.errorHandler.handleApiError(error, 'Failed to get estimated fees');
+          this.notificationService.showError(errorMessage);
+          console.error('Error getting estimated fees:', error);
+        }
+      });
+    }
+  }
+
+  onClose(): void {
+    this.dialogRef.close();
+  }
+}

src/app/carnet/shipping/shipping.component.html

@@ -343,6 +343,16 @@
         </div>
 
         <div class="form-actions">
+            <button mat-raised-button color="primary" type="button" (click)="showEstimatedFees()"
+                *ngIf="showEstimatedFeesButton && !isViewMode">
+                <span>Estimated Fees</span>
+            </button>
+
+            <button mat-raised-button color="primary" type="submit" *ngIf="!isViewMode"
+                [disabled]="shippingForm.invalid || changeInProgress">
+                Save
+            </button>
+
             <button mat-raised-button color="primary" type="button" (click)="processApplication()"
                 [disabled]="!enableSubmitButton" *ngIf="showProcessButton && !isViewMode">
                 <span>Process Application</span>
@@ -353,11 +363,6 @@
                 <span>Submit Application</span>
             </button>
 
-            <button mat-raised-button color="primary" type="submit" *ngIf="!isViewMode"
-                [disabled]="shippingForm.invalid || changeInProgress">
-                Save
-            </button>
-
             <button mat-raised-button color="primary" type="button" (click)="returnToHome()" *ngIf="isViewMode">
                 Back
             </button>

src/app/carnet/shipping/shipping.component.ts

@@ -26,6 +26,7 @@ import { StorageService } from '../../core/services/common/storage.service';
 import { FormOfSecurity } from '../../core/models/formofsecurity';
 import { CarnetService } from '../../core/services/carnet/carnet.service';
 import { environment } from '../../../environments/environment';
+import { FeesDialogComponent } from './fees-dialog.component';
 
 @Component({
   selector: 'app-shipping',
@@ -62,7 +63,9 @@ export class ShippingComponent {
   deliveryEstimate: string = '';
   holderid: number = 0;
   holder: Holder | undefined | null = null;
+
   showSubmitButton: boolean = environment.appType === 'client';
+  showEstimatedFeesButton: boolean = environment.appType === 'client';
   showProcessButton: boolean = environment.appType === 'service-provider';
 
   countriesHasStates = ['US', 'CA', 'MX'];
@@ -444,6 +447,10 @@ export class ShippingComponent {
     this.calculateDeliveryEstimate();
     this.shippingForm.markAsUntouched();
     this.completed.emit(this.shippingForm.valid);
+
+    if (this.isViewMode) {
+      this.shippingForm.disable();
+    }
   }
 
   patchAddressContactData(): void {
@@ -460,7 +467,7 @@ export class ShippingComponent {
     if (this.holder?.holderType.trim() === 'GOV') {
       formOfSecurityControl?.setValue(this.govFormOfSecurities?.[0].value);
       formOfSecurityControl?.disable();
-    } else {
+    } else if (!this.isViewMode) {
       formOfSecurityControl?.enable();
     }
 
@@ -688,6 +695,13 @@ export class ShippingComponent {
     });
   }
 
+  showEstimatedFees(): void {
+    const dialogRef = this.dialog.open(FeesDialogComponent, {
+      width: '500px',
+      data: { headerid: this.headerid }
+    });
+  }
+
   submitApplication(): void {
     this.onSubmit(true);
   }

src/app/carnet/travel-plan/travel-plan.component.ts

@@ -284,6 +284,9 @@ export class TravelPlanComponent {
     });
 
     this.completed.emit(this.travelForm.valid);
+    if (this.isViewMode) {
+      this.travelForm.disable();
+    }
   }
 
   onSubmit(): void {

src/app/core/models/service-provider/contact-login.ts

@@ -0,0 +1,4 @@
+export interface ContactLogin {
+    spid: number;
+    emailAddress: string;
+}

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

@@ -16,4 +16,5 @@ export interface Contact {
     lastUpdatedDate?: Date | null;
     isInactive?: boolean | null;
     inactivatedDate?: Date | null;
+    hasLogin?: boolean | null;
 }

src/app/core/services/carnet/shipping.service.ts

@@ -33,13 +33,13 @@ export class ShippingService {
       paymentMethod: shippingDetails.PAYMENTMETHOD,
 
       //needsBond: shippingDetails.BONDPROTECTION === 'Y',
-      needsInsurance: shippingDetails.INSPROTECTION === 'Y',
+      needsInsurance: shippingDetails.INSPROTECTION === 'ACCEPT',
-      needsLostDocProtection: shippingDetails.LDIPROTECTION === 'Y',
+      needsLostDocProtection: shippingDetails.LDIPROTECTION === 'ACCEPT',
       formOfSecurity: shippingDetails.FORMOFSECURITY
     };
 
     shippingData.address = {
-      companyName: shippingDetails.P_SHIPNAME,
+      companyName: shippingDetails.SHIPNAME,
       addressid: shippingDetails.SHIPADDRESSID,
       address1: shippingDetails.ADDRESS1,
       address2: shippingDetails.ADDRESS2,
@@ -77,8 +77,8 @@ export class ShippingService {
       P_PAYMENTMETHOD: shippingData.paymentMethod,
 
       // P_BONDPROTECTION: shippingData.needsBond ? 'Y' : 'N',
-      P_INSPROTECTION: shippingData.needsInsurance ? 'Y' : 'N',
+      P_INSPROTECTION: shippingData.needsInsurance ? 'ACCEPT' : 'DECLINE',
-      P_LDIPROTECTION: shippingData.needsLostDocProtection ? 'Y' : 'N',
+      P_LDIPROTECTION: shippingData.needsLostDocProtection ? 'ACCEPT' : 'DECLINE',
       P_FORMOFSECURITY: shippingData.formOfSecurity,
 
       P_SHIPNAME: shippingData.address?.companyName,

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

@@ -4,6 +4,7 @@ import { map, Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { Contact } from '../../models/service-provider/contact';
 import { UserService } from '../common/user.service';
+import { ContactLogin } from '../../models/service-provider/contact-login';
 
 @Injectable({
   providedIn: 'root'
@@ -38,7 +39,8 @@ export class ContactService {
       lastUpdatedBy: contact.LASTUPDATEDBY || null,
       lastUpdatedDate: contact.LASTUPDATEDDATE || null,
       isInactive: contact.INACTIVEFLAG === 'Y' || false,
-      inactivatedDate: contact.INACTIVEDATE || null
+      inactivatedDate: contact.INACTIVEDATE || null,
+      hasLogin: contact.LOGINFLAG === 'Y' || false
     }));
   }
 
@@ -82,4 +84,18 @@ export class ContactService {
   deleteContact(spContactId: string): Observable<any> {
     return this.http.patch(`${this.apiUrl}/${this.apiDb}/InactivateSPContact/${spContactId}`, null);
   }
+
+  createContactLogin(data: ContactLogin): Observable<any> {
+    const contact = {
+      P_SPID: data.spid,
+      P_EMAILADDR: data.emailAddress,
+      P_ENABLEPASSWORDPOLICY: 'Y',
+      P_DOMAIN: 'test',
+      P_LOOKUPCODE: 'test',
+      P_USERID: this.userService.getUser()
+    }
+
+    return this.http.post(`${this.apiUrl}/${this.apiDb}/CreateSPLogins`, contact);
+  }
+
 }

src/app/guards/carnet-cleanup.guard.ts

@@ -16,7 +16,7 @@ export const CarnetCleanupGuard: CanDeactivateFn<CanComponentDeactivate> = (comp
   // console.log(`Navigating away. Destination: ${nextUrl}`);
 
   // If the destination URL includes 'holder/carnet', skip the cleanup and allow navigation.
-  if (nextUrl.includes('edit-carnet') || nextUrl.includes('view-carnet')
+  if (nextUrl.includes('process-carnet') || nextUrl.includes('view-carnet')
     || nextUrl.includes('add-holder') || nextUrl.includes('edit-holder')) {
     return true;
   }

src/app/holder/basic-details/basic-details.component.ts

@@ -14,6 +14,7 @@ import { BasicDetailService } from '../../core/services/holder/basic-detail.serv
 import { BasicDetail } from '../../core/models/holder/basic-detail';
 import { StorageService } from '../../core/services/common/storage.service';
 import { NavigationService } from '../../core/services/common/navigation.service';
+import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'app-basic-detail',
@@ -37,6 +38,7 @@ export class BasicDetailComponent implements OnInit, OnDestroy {
   isLoading = false;
   changeInProgress = false;
   countriesHasStates = ['US', 'CA', 'MX'];
+  returnTo: string = environment.appType === 'client' ? 'edit-carnet' : 'process-carnet';
 
   private destroy$ = new Subject<void>();
 
@@ -215,7 +217,7 @@ export class BasicDetailComponent implements OnInit, OnDestroy {
 
   goBackToCarnetApplication(): void {
     this.storageService.removeItem('currentapplication')
-    this.navigationService.navigate(["edit-carnet", this.currentApplicationDetails?.headerid],
+    this.navigationService.navigate([this.returnTo, this.currentApplicationDetails?.headerid],
       {
         state: { isEditMode: true },
         queryParams: {

src/app/holder/contacts/contacts.component.ts

@@ -17,6 +17,7 @@ import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/c
 import { NavigationService } from '../../core/services/common/navigation.service';
 import { StorageService } from '../../core/services/common/storage.service';
 import { finalize } from 'rxjs';
+import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'app-contacts',
@@ -47,6 +48,7 @@ export class ContactsComponent {
   showInactiveContacts = false;
   contacts: Contact[] = [];
   currentApplicationDetails: { headerid: number, applicationName: string } | null = null;
+  returnTo: string = environment.appType === 'client' ? 'edit-carnet' : 'process-carnet';
 
   contactReadOnlyFields: any = {
     lastChangedDate: null,
@@ -245,7 +247,7 @@ export class ContactsComponent {
 
   goBackToCarnetApplication(): void {
     this.storageService.removeItem('currentapplication')
-    this.navigationService.navigate(["edit-carnet", this.currentApplicationDetails?.headerid],
+    this.navigationService.navigate([this.returnTo, this.currentApplicationDetails?.headerid],
       {
         state: { isEditMode: true },
         queryParams: {

src/app/home/home.component.html

@@ -93,7 +93,41 @@
                                     matTooltip="Process">
                                     <mat-icon>pending_actions</mat-icon>
                                 </button>
-                                <button mat-icon-button color="primary" (click)="viewCarnet(item)" matTooltip="View">
+                                <button matIconButton [matMenuTriggerFor]="carnetActions">
+                                    <mat-icon>more_horiz</mat-icon>
+                                </button>
+                                <mat-menu #carnetActions="matMenu">
+                                    <button mat-menu-item (click)="viewCarnet(item)">
+                                        <mat-icon>article</mat-icon>
+                                        <span>View Carnet</span>
+                                    </button>
+                                    <button mat-menu-item (click)="resetClient(item.headerid)"
+                                        *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted'"
+                                        [hidden]="getCarnetStatusLabel(item.carnetStatus) !== 'Submitted'">
+                                        <mat-icon>assignment_return</mat-icon>
+                                        <span>Reset to Client</span>
+                                    </button>
+                                    <button mat-menu-item (click)="deleteCarnet(item.headerid)" *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted' || 
+                                    getCarnetStatusLabel(item.carnetStatus) === 'Not Submitted'">
+                                        <mat-icon>delete</mat-icon>
+                                        <span>Delete Carnet</span>
+                                    </button>
+                                    <button mat-menu-item (click)="printGeneralList(item.headerid)">
+                                        <mat-icon>print</mat-icon>
+                                        <span>Print General List</span>
+                                    </button>
+                                    <button mat-menu-item (click)="printCarnet(item.headerid)"
+                                        *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Valid'">
+                                        <mat-icon>print</mat-icon>
+                                        <span>Print Carnet</span>
+                                    </button>
+                                    <button mat-menu-item (click)="voidCarnet(item.headerid)"
+                                        *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Valid'">
+                                        <mat-icon>delete_forever</mat-icon>
+                                        <span>Void Carnet</span>
+                                    </button>
+                                </mat-menu>
+                                <!-- <button mat-icon-button color="primary" (click)="viewCarnet(item)" matTooltip="View">
                                     <mat-icon>article</mat-icon>
                                 </button>
                                 <button mat-icon-button color="primary" (click)="resetClient(item.headerid)"
@@ -117,7 +151,7 @@
                                 <button mat-icon-button color="primary" (click)="voidCarnet(item.headerid)"
                                     *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Valid'" matTooltip="Void">
                                     <mat-icon>delete_forever</mat-icon>
-                                </button>
+                                </button> -->
                             </div>
                         </td>
                     </ng-container>

src/app/home/home.component.scss

@@ -49,15 +49,15 @@
                 }
             }
 
-            .mat-column-actions {
+            // .mat-column-actions {
-                width: 160px;
+            //     width: 160px;
 
-                .action-buttons {
+            //     .action-buttons {
-                    width: 100%;
+            //         width: 100%;
-                    display: flex;
+            //         display: flex;
-                    gap: 4px;
+            //         gap: 4px;
-                }
+            //     }
-            }
+            // }
 
             .no-data-message {
                 text-align: center;

src/app/home/home.component.ts

@@ -172,7 +172,7 @@ export class HomeComponent {
       this.storageService.set("carnet-clientid", item.clientid);
       this.storageService.set("carnet-locationid", item.locationid);
 
-      this.navigateTo(['edit-carnet', item.headerid], {
+      this.navigateTo(['process-carnet', item.headerid], {
         queryParams: { applicationname: item.applicationName }
       });
     } else {

src/app/param/manage-country/manage-country.component.ts

@@ -52,11 +52,12 @@ export class ManageCountryComponent {
   }
 
   onCountrySelectionChanged(event: MatSelectChange) {
-    this.currentCountry = this.countries.find(c => c.paramId === +event.value);
+    this.renderCountry(+event.value);
-
+  }
-    this.currentCountryId = this.countriesWithMessages.
-      find(c => c.paramValue === this.currentCountry?.paramValue)?.paramId ?? 0;
 
+  renderCountry(countryid: number): void {
+    this.currentCountry = this.countries.find(c => c.paramId === countryid);
+    this.currentCountryId = this.countriesWithMessages.find(c => c.paramValue === this.currentCountry?.paramValue)?.paramId ?? 0;
     this.patchCountryData();
   }
 
@@ -78,6 +79,10 @@ export class ManageCountryComponent {
       next: (results) => {
         this.countries = this.joinCountriesWithMessages(results.countries, results.countriesWithMessages);
         this.countriesWithMessages = results.countriesWithMessages;
+
+        if (this.currentCountry) {
+          this.renderCountry(this.currentCountry.paramId!);
+        }
       },
       error: (error) => {
         console.error('Error loading countries messages data', error);

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

@@ -66,6 +66,11 @@
                     <button mat-icon-button color="primary" (click)="editContact(contact)" matTooltip="Edit">
                         <mat-icon>edit</mat-icon>
                     </button>
+                    <button mat-icon-button color="primary" *ngIf="!contact.isInactive || !contact.hasLogin"
+                        [hidden]="contact.isInactive || contact.hasLogin" (click)="createLogin(contact.email)"
+                        matTooltip="Login">
+                        <mat-icon>person</mat-icon>
+                    </button>
                     <button mat-icon-button color="warn" *ngIf="!contact.defaultContact || !contact.isInactive" (click)="
                         deleteContact(contact.spContactId)" [hidden]="contact.defaultContact || contact.isInactive"
                         matTooltip="Delete">

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

@@ -15,6 +15,7 @@ import { ApiErrorHandlerService } from '../../core/services/common/api-error-han
 import { NotificationService } from '../../core/services/common/notification.service';
 import { ContactService } from '../../core/services/service-provider/contact.service';
 import { finalize } from 'rxjs';
+import { ContactLogin } from '../../core/models/service-provider/contact-login';
 
 @Component({
   selector: 'app-contacts',
@@ -215,6 +216,39 @@ export class ContactsComponent implements OnInit {
     this.contactForm.reset();
   }
 
+  createLogin(emailAddress: string): void {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '450px',
+      data: {
+        title: 'Confirm Login Creation',
+        message: 'Are you sure you want to create a login for this contact?',
+        confirmText: 'Yes',
+        cancelText: 'Cancel'
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        const contactLoginData: ContactLogin = {
+          spid: this.spid,
+          emailAddress: emailAddress
+        };
+        this.contactService.createContactLogin(contactLoginData).subscribe({
+          next: () => {
+            this.notificationService.showSuccess(`Login created successfully`);
+            this.loadContacts();
+            this.cancelEdit();
+          },
+          error: (error) => {
+            let errorMessage = this.errorHandler.handleApiError(error, `Failed to create login`);
+            this.notificationService.showError(errorMessage);
+            console.error('Error saving login:', error);
+          }
+        });
+      }
+    });
+  }
+
   // setDefaultContact(contactId: string): void {
   //   this.contactService.setDefaultServiceProviderContact(this.spid, contactId).subscribe({
   //     next: () => {