From 411407d53c9ec036380493268d2fb97caeb3d0e1 Mon Sep 17 00:00:00 2001
From: Cyril Joseph <ccyyrriill83@gmail.com>
Date: Thu, 13 Nov 2025 23:40:22 -0400
Subject: [PATCH] feedback updates

---
 src/app/core/models/contact-title.ts          |  5 +++
 src/app/core/models/fees/basic-fee.ts         |  1 +
 src/app/core/models/fees/cargo-rate.ts        |  1 +
 src/app/core/models/fees/carnet-fee.ts        |  1 +
 .../models/fees/continuation-sheet-fee.ts     |  1 +
 src/app/core/models/fees/counterfoil-fee.ts   |  1 +
 src/app/core/models/fees/expedited-fee.ts     |  1 +
 src/app/core/models/fees/security-deposit.ts  |  3 +-
 .../core/services/common/common.service.ts    | 13 +++++++
 .../core/services/fees/basic-fee.service.ts   |  1 +
 .../core/services/fees/cargo-rate.service.ts  |  1 +
 .../core/services/fees/carnet-fee.service.ts  |  1 +
 .../fees/continuation-sheet-fee.service.ts    |  1 +
 .../services/fees/counterfoil-fee.service.ts  |  1 +
 .../services/fees/expedited-fee.service.ts    |  1 +
 .../services/fees/security-deposit.service.ts |  3 +-
 .../fees/basic-fee/basic-fee.component.html   |  6 ++++
 src/app/fees/basic-fee/basic-fee.component.ts |  2 +-
 .../fees/cargo-rate/cargo-rate.component.html |  6 ++++
 .../fees/cargo-rate/cargo-rate.component.ts   |  2 +-
 .../fees/carnet-fee/carnet-fee.component.html | 11 +++++-
 .../fees/carnet-fee/carnet-fee.component.ts   |  4 +--
 .../continuation-sheet-fee.component.html     |  6 ++++
 .../continuation-sheet-fee.component.ts       |  2 +-
 .../counterfoil-fee.component.html            |  6 ++++
 .../counterfoil-fee.component.ts              |  2 +-
 .../expedited-fee.component.html              |  6 ++++
 .../expedited-fee/expedited-fee.component.ts  |  2 +-
 .../security-deposit.component.html           | 22 +++++++-----
 .../security-deposit.component.ts             | 22 ++++++------
 .../preparer/contacts/contacts.component.html | 13 ++++---
 .../preparer/contacts/contacts.component.ts   | 32 ++++++++++++++++-
 .../contacts/contacts.component.html          | 13 ++++---
 .../contacts/contacts.component.ts            | 36 +++++++++++++++++--
 34 files changed, 181 insertions(+), 48 deletions(-)
 create mode 100644 src/app/core/models/contact-title.ts

diff --git a/src/app/core/models/contact-title.ts b/src/app/core/models/contact-title.ts
new file mode 100644
index 0000000..ca90681
--- /dev/null
+++ b/src/app/core/models/contact-title.ts
@@ -0,0 +1,5 @@
+export interface ContactTitle {
+    name: string;
+    id: string;
+    value: string;
+}
diff --git a/src/app/core/models/fees/basic-fee.ts b/src/app/core/models/fees/basic-fee.ts
index 40ee7fa..e77f98e 100644
--- a/src/app/core/models/fees/basic-fee.ts
+++ b/src/app/core/models/fees/basic-fee.ts
@@ -7,5 +7,6 @@ export interface BasicFee {
     spid?: number;
     dateCreated?: Date | null;
     createdBy?: string | null;
+    expiredDate?: Date | null;
     expired?: boolean;
 }
diff --git a/src/app/core/models/fees/cargo-rate.ts b/src/app/core/models/fees/cargo-rate.ts
index 712137f..d21bc5d 100644
--- a/src/app/core/models/fees/cargo-rate.ts
+++ b/src/app/core/models/fees/cargo-rate.ts
@@ -8,5 +8,6 @@ export interface CargoRate {
     rate: number,
     dateCreated?: Date | null;
     createdBy?: string | null;
+    expiredDate?: Date | null;
     expired?: boolean;
 }
diff --git a/src/app/core/models/fees/carnet-fee.ts b/src/app/core/models/fees/carnet-fee.ts
index 5aee925..3c1e4c3 100644
--- a/src/app/core/models/fees/carnet-fee.ts
+++ b/src/app/core/models/fees/carnet-fee.ts
@@ -6,5 +6,6 @@ export interface CarnetFee {
     spid: number;
     dateCreated?: Date | null;
     createdBy?: string | null;
+    expiredDate?: Date | null;
     expired?: boolean;
 }
diff --git a/src/app/core/models/fees/continuation-sheet-fee.ts b/src/app/core/models/fees/continuation-sheet-fee.ts
index a864d76..91dc210 100644
--- a/src/app/core/models/fees/continuation-sheet-fee.ts
+++ b/src/app/core/models/fees/continuation-sheet-fee.ts
@@ -7,5 +7,6 @@ export interface ContinuationSheetFee {
     carnetType: string;
     dateCreated?: Date | null;
     createdBy?: string | null;
+    expiredDate?: Date | null;
     expired?: boolean;
 }
diff --git a/src/app/core/models/fees/counterfoil-fee.ts b/src/app/core/models/fees/counterfoil-fee.ts
index 533a909..9e7c2a8 100644
--- a/src/app/core/models/fees/counterfoil-fee.ts
+++ b/src/app/core/models/fees/counterfoil-fee.ts
@@ -9,5 +9,6 @@ export interface CounterfoilFee {
     rate: number,
     dateCreated?: Date | null;
     createdBy?: string | null;
+    expiredDate?: Date | null;
     expired?: boolean;
 }
diff --git a/src/app/core/models/fees/expedited-fee.ts b/src/app/core/models/fees/expedited-fee.ts
index e7720ff..64ba11a 100644
--- a/src/app/core/models/fees/expedited-fee.ts
+++ b/src/app/core/models/fees/expedited-fee.ts
@@ -9,5 +9,6 @@ export interface ExpeditedFee {
     effectiveDate: Date;
     dateCreated?: Date | null;
     createdBy?: string | null;
+    expiredDate?: Date | null;
     expired?: boolean;
 }
diff --git a/src/app/core/models/fees/security-deposit.ts b/src/app/core/models/fees/security-deposit.ts
index d75213b..158b491 100644
--- a/src/app/core/models/fees/security-deposit.ts
+++ b/src/app/core/models/fees/security-deposit.ts
@@ -1,7 +1,7 @@
 export interface SecurityDeposit {
     securityDepositId: number;
     holderType: string;
-    uscibMember: boolean;
+    uscibMember: string;
     specialCommodity: string;
     specialCountry: string;
     rate: number;
@@ -10,5 +10,6 @@ export interface SecurityDeposit {
     spid: number;
     dateCreated?: Date | null;
     createdBy?: string | null;
+    expiredDate?: Date | null;
     expired?: boolean;
 }
diff --git a/src/app/core/services/common/common.service.ts b/src/app/core/services/common/common.service.ts
index fc03d7c..4261af3 100644
--- a/src/app/core/services/common/common.service.ts
+++ b/src/app/core/services/common/common.service.ts
@@ -20,6 +20,7 @@ import { UnitOfMeasure } from '../../models/unitofmeasure';
 import { ExtensionReason } from '../../models/extension-reason';
 import { IndustryType } from '../../models/industry-type';
 import { HolderType } from '../../models/holder-type';
+import { ContactTitle } from '../../models/contact-title';
 
 @Injectable({
   providedIn: 'root'
@@ -244,6 +245,18 @@ export class CommonService {
     );
   }
 
+  getContactTitles(): Observable<ContactTitle[]> {
+    return this.http.get<any[]>(`${this.apiUrl}/${this.apiDb}/GetParamValues?P_PARAMTYPE=012&P_SPID=${this.userService.getUserSpid()}`).pipe(
+      map((response) =>
+        response.map((item) => ({
+          name: item.PARAMDESC,
+          id: item.PARAMID,
+          value: item.PARAMVALUE,
+        }))
+      )
+    );
+  }
+
   formatUSDate(datetime: Date): string {
     const date = new Date(datetime);
     const month = String(date.getUTCMonth() + 1).padStart(2, '0');
diff --git a/src/app/core/services/fees/basic-fee.service.ts b/src/app/core/services/fees/basic-fee.service.ts
index db7f627..ed415ba 100644
--- a/src/app/core/services/fees/basic-fee.service.ts
+++ b/src/app/core/services/fees/basic-fee.service.ts
@@ -31,6 +31,7 @@ export class BasicFeeService {
       effectiveDate: item.EFFDATE,
       createdBy: item.CREATEDBY || null,
       dateCreated: item.DATECREATED || null,
+      expiredDate: item.EXPDATE || null,
       expired: item.EXPDATE ? new Date(item.EXPDATE) < new Date() : false
     }));
   }
diff --git a/src/app/core/services/fees/cargo-rate.service.ts b/src/app/core/services/fees/cargo-rate.service.ts
index 088896a..9e4b65f 100644
--- a/src/app/core/services/fees/cargo-rate.service.ts
+++ b/src/app/core/services/fees/cargo-rate.service.ts
@@ -33,6 +33,7 @@ export class CargoRateService {
       rate: item.RATE,
       createdBy: item.CREATEDBY || null,
       dateCreated: item.DATECREATED || null,
+      expiredDate: item.EXPDATE || null,
       expired: item.EXPDATE ? new Date(item.EXPDATE) < new Date() : false
     }));
   }
diff --git a/src/app/core/services/fees/carnet-fee.service.ts b/src/app/core/services/fees/carnet-fee.service.ts
index 4e8c268..e252d5f 100644
--- a/src/app/core/services/fees/carnet-fee.service.ts
+++ b/src/app/core/services/fees/carnet-fee.service.ts
@@ -32,6 +32,7 @@ export class CarnetFeeService {
       spid: item.SPID,
       createdBy: item.CREATEDBY || null,
       dateCreated: item.DATECREATED || null,
+      expiredDate: item.EXPDATE || null,
       expired: item.EXPDATE ? new Date(item.EXPDATE) < new Date() : false
     }));
   }
diff --git a/src/app/core/services/fees/continuation-sheet-fee.service.ts b/src/app/core/services/fees/continuation-sheet-fee.service.ts
index a735961..5ddd86c 100644
--- a/src/app/core/services/fees/continuation-sheet-fee.service.ts
+++ b/src/app/core/services/fees/continuation-sheet-fee.service.ts
@@ -32,6 +32,7 @@ export class ContinuationSheetFeeService {
       rate: item.RATE,
       createdBy: item.CREATEDBY || null,
       dateCreated: item.DATECREATED || null,
+      expiredDate: item.EXPDATE || null,
       expired: item.EXPDATE ? new Date(item.EXPDATE) < new Date() : false
     }));
   }
diff --git a/src/app/core/services/fees/counterfoil-fee.service.ts b/src/app/core/services/fees/counterfoil-fee.service.ts
index 41f0c2b..b9d7955 100644
--- a/src/app/core/services/fees/counterfoil-fee.service.ts
+++ b/src/app/core/services/fees/counterfoil-fee.service.ts
@@ -34,6 +34,7 @@ export class CounterfoilFeeService {
       rate: item.RATE,
       createdBy: item.CREATEDBY || null,
       dateCreated: item.DATECREATED || null,
+      expiredDate: item.EXPDATE || null,
       expired: item.EXPDATE ? new Date(item.EXPDATE) < new Date() : false
     }));
   }
diff --git a/src/app/core/services/fees/expedited-fee.service.ts b/src/app/core/services/fees/expedited-fee.service.ts
index e204036..8d540a1 100644
--- a/src/app/core/services/fees/expedited-fee.service.ts
+++ b/src/app/core/services/fees/expedited-fee.service.ts
@@ -35,6 +35,7 @@ export class ExpeditedFeeService {
       spid: item.SPID,
       createdBy: item.CREATEDBY || null,
       dateCreated: item.DATECREATED || null,
+      expiredDate: item.EXPDATE || null,
       expired: item.EXPDATE ? new Date(item.EXPDATE) < new Date() : false
     }));
   }
diff --git a/src/app/core/services/fees/security-deposit.service.ts b/src/app/core/services/fees/security-deposit.service.ts
index f74f3e8..43b389a 100644
--- a/src/app/core/services/fees/security-deposit.service.ts
+++ b/src/app/core/services/fees/security-deposit.service.ts
@@ -35,6 +35,7 @@ export class SecurityDepositService {
       spid: item.SPID,
       createdBy: item.CREATEDBY || null,
       dateCreated: item.DATECREATED || null,
+      expiredDate: item.EXPDATE || null,
       expired: item.EXPDATE ? new Date(item.EXPDATE) < new Date() : false
     }));
   }
@@ -45,7 +46,7 @@ export class SecurityDepositService {
       P_SPID: spid,
       P_EFFDATE: this.commonService.formatUSDate(data.effectiveDate),
       P_HOLDERTYPE: data.holderType,
-      P_USCIBMEMBERFLAG: data.uscibMember ? 'Y' : 'N',
+      P_USCIBMEMBERFLAG: data.uscibMember,
       P_SPCLCOMMODITY: data.specialCommodity,
       P_SPCLCOUNTRY: data.specialCountry,
       P_RATE: data.rate,
diff --git a/src/app/fees/basic-fee/basic-fee.component.html b/src/app/fees/basic-fee/basic-fee.component.html
index fede157..d86a0ea 100644
--- a/src/app/fees/basic-fee/basic-fee.component.html
+++ b/src/app/fees/basic-fee/basic-fee.component.html
@@ -37,6 +37,12 @@
                 <td mat-cell *matCellDef="let fee">{{ fee.effectiveDate | date:'mediumDate':'UTC' }}</td>
             </ng-container>
 
+            <!-- Expired Date Column -->
+            <ng-container matColumnDef="expiredDate">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Expired Date</th>
+                <td mat-cell *matCellDef="let fee">{{ fee.expiredDate | date:'mediumDate':'UTC' }}</td>
+            </ng-container>
+
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef>Actions</th>
diff --git a/src/app/fees/basic-fee/basic-fee.component.ts b/src/app/fees/basic-fee/basic-fee.component.ts
index 5364869..cd0c4ba 100644
--- a/src/app/fees/basic-fee/basic-fee.component.ts
+++ b/src/app/fees/basic-fee/basic-fee.component.ts
@@ -28,7 +28,7 @@ export class BasicFeeComponent {
 
   @ViewChild(MatSort) sort!: MatSort;
 
-  displayedColumns: string[] = ['startCarnetValue', 'endCarnetValue', 'fees', 'effectiveDate', 'actions'];
+  displayedColumns: string[] = ['startCarnetValue', 'endCarnetValue', 'fees', 'effectiveDate', 'expiredDate', 'actions'];
   dataSource = new MatTableDataSource<BasicFee>();
   feeForm: FormGroup;
   isEditing = false;
diff --git a/src/app/fees/cargo-rate/cargo-rate.component.html b/src/app/fees/cargo-rate/cargo-rate.component.html
index 13f6978..cb6e4c2 100644
--- a/src/app/fees/cargo-rate/cargo-rate.component.html
+++ b/src/app/fees/cargo-rate/cargo-rate.component.html
@@ -49,6 +49,12 @@
                 </td>
             </ng-container>
 
+            <!-- Expired Date Column -->
+            <ng-container matColumnDef="expiredDate">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Expired Date</th>
+                <td mat-cell *matCellDef="let fee">{{ fee.expiredDate | date:'mediumDate':'UTC' }}</td>
+            </ng-container>
+
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef>Actions</th>
diff --git a/src/app/fees/cargo-rate/cargo-rate.component.ts b/src/app/fees/cargo-rate/cargo-rate.component.ts
index 11da866..f49e812 100644
--- a/src/app/fees/cargo-rate/cargo-rate.component.ts
+++ b/src/app/fees/cargo-rate/cargo-rate.component.ts
@@ -28,7 +28,7 @@ export class CargoRateComponent implements OnInit {
   
   @ViewChild(MatSort) sort!: MatSort;
 
-  displayedColumns: string[] = ['carnetType', 'startSets', 'endSets', 'rate', 'effectiveDate', 'actions'];
+  displayedColumns: string[] = ['carnetType', 'startSets', 'endSets', 'rate', 'effectiveDate', 'expiredDate', 'actions'];
   dataSource = new MatTableDataSource<any>();
   cargoRateForm: FormGroup;
   isEditing = false;
diff --git a/src/app/fees/carnet-fee/carnet-fee.component.html b/src/app/fees/carnet-fee/carnet-fee.component.html
index 2848d7f..6e7a663 100644
--- a/src/app/fees/carnet-fee/carnet-fee.component.html
+++ b/src/app/fees/carnet-fee/carnet-fee.component.html
@@ -23,7 +23,7 @@
             <!-- Commission Rate Column -->
             <ng-container matColumnDef="commissionRate">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>Commission Rate</th>
-                <td mat-cell *matCellDef="let item">{{ item.commissionRate }}</td>
+                <td mat-cell *matCellDef="let item">{{ item.commissionRate | number:'1.2-2' }}</td>
             </ng-container>
 
             <!-- Effective Date Column -->
@@ -32,6 +32,12 @@
                 <td mat-cell *matCellDef="let item">{{ item.effectiveDate | date:'mediumDate':'UTC' }}</td>
             </ng-container>
 
+            <!-- Expired Date Column -->
+            <ng-container matColumnDef="expiredDate">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Expired Date</th>
+                <td mat-cell *matCellDef="let fee">{{ fee.expiredDate | date:'mediumDate':'UTC' }}</td>
+            </ng-container>
+
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef>Actions</th>
@@ -87,6 +93,9 @@
                     <mat-error *ngIf="feeCommissionForm.get('commissionRate')?.errors?.['required']">
                         Commission rate is required
                     </mat-error>
+                    <mat-error *ngIf="feeCommissionForm.get('commissionRate')?.errors?.['pattern']">
+                        Please enter a valid number with up to 2 decimal places
+                    </mat-error>
                 </mat-form-field>
 
                 <mat-form-field appearance="outline">
diff --git a/src/app/fees/carnet-fee/carnet-fee.component.ts b/src/app/fees/carnet-fee/carnet-fee.component.ts
index d064e94..82bc9a1 100644
--- a/src/app/fees/carnet-fee/carnet-fee.component.ts
+++ b/src/app/fees/carnet-fee/carnet-fee.component.ts
@@ -31,7 +31,7 @@ export class CarnetFeeComponent implements OnInit {
 
   @ViewChild(MatSort) sort!: MatSort;
 
-  displayedColumns: string[] = ['feeType', 'commissionRate', 'effectiveDate', 'actions'];
+  displayedColumns: string[] = ['feeType', 'commissionRate', 'effectiveDate', 'expiredDate', 'actions'];
   dataSource = new MatTableDataSource<CarnetFee>();
   feeCommissionForm: FormGroup;
   isEditing = false;
@@ -62,7 +62,7 @@ export class CarnetFeeComponent implements OnInit {
   constructor() {
     this.feeCommissionForm = this.fb.group({
       feeType: ['', Validators.required],
-      commissionRate: [0, [Validators.required]],
+      commissionRate: [0, [Validators.required, Validators.pattern(/^\d+\.?\d{0,2}$/)]],
       effectiveDate: ['', Validators.required]
     });
   }
diff --git a/src/app/fees/continuation-sheet-fee/continuation-sheet-fee.component.html b/src/app/fees/continuation-sheet-fee/continuation-sheet-fee.component.html
index 70870fe..c9134a4 100644
--- a/src/app/fees/continuation-sheet-fee/continuation-sheet-fee.component.html
+++ b/src/app/fees/continuation-sheet-fee/continuation-sheet-fee.component.html
@@ -44,6 +44,12 @@
                 </td>
             </ng-container>
 
+            <!-- Expired Date Column -->
+            <ng-container matColumnDef="expiredDate">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Expired Date</th>
+                <td mat-cell *matCellDef="let fee">{{ fee.expiredDate | date:'mediumDate':'UTC' }}</td>
+            </ng-container>
+
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef>Actions</th>
diff --git a/src/app/fees/continuation-sheet-fee/continuation-sheet-fee.component.ts b/src/app/fees/continuation-sheet-fee/continuation-sheet-fee.component.ts
index c7ec738..d819257 100644
--- a/src/app/fees/continuation-sheet-fee/continuation-sheet-fee.component.ts
+++ b/src/app/fees/continuation-sheet-fee/continuation-sheet-fee.component.ts
@@ -27,7 +27,7 @@ export class ContinuationSheetFeeComponent implements OnInit {
   
   @ViewChild(MatSort) sort!: MatSort;
 
-  displayedColumns: string[] = ['customerType', 'carnetType', 'rate', 'effectiveDate', 'actions'];
+  displayedColumns: string[] = ['customerType', 'carnetType', 'rate', 'effectiveDate', 'expiredDate', 'actions'];
   dataSource = new MatTableDataSource<any>();
   continuationSheetForm: FormGroup;
   isEditing = false;
diff --git a/src/app/fees/counterfoil-fee/counterfoil-fee.component.html b/src/app/fees/counterfoil-fee/counterfoil-fee.component.html
index a54abd6..1dba5c6 100644
--- a/src/app/fees/counterfoil-fee/counterfoil-fee.component.html
+++ b/src/app/fees/counterfoil-fee/counterfoil-fee.component.html
@@ -56,6 +56,12 @@
                 </td>
             </ng-container>
 
+            <!-- Expired Date Column -->
+            <ng-container matColumnDef="expiredDate">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Expired Date</th>
+                <td mat-cell *matCellDef="let fee">{{ fee.expiredDate | date:'mediumDate':'UTC' }}</td>
+            </ng-container>
+
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef>Actions</th>
diff --git a/src/app/fees/counterfoil-fee/counterfoil-fee.component.ts b/src/app/fees/counterfoil-fee/counterfoil-fee.component.ts
index ca798e3..a17b5e6 100644
--- a/src/app/fees/counterfoil-fee/counterfoil-fee.component.ts
+++ b/src/app/fees/counterfoil-fee/counterfoil-fee.component.ts
@@ -28,7 +28,7 @@ export class CounterfoilFeeComponent implements OnInit {
   
   @ViewChild(MatSort) sort!: MatSort;
 
-  displayedColumns: string[] = ['customerType', 'carnetType', 'startSets', 'endSets', 'rate', 'effectiveDate', 'actions'];
+  displayedColumns: string[] = ['customerType', 'carnetType', 'startSets', 'endSets', 'rate', 'effectiveDate', 'expiredDate', 'actions'];
   dataSource = new MatTableDataSource<any>();
   counterfoilForm: FormGroup;
   isEditing = false;
diff --git a/src/app/fees/expedited-fee/expedited-fee.component.html b/src/app/fees/expedited-fee/expedited-fee.component.html
index 6bf2b38..7667e2d 100644
--- a/src/app/fees/expedited-fee/expedited-fee.component.html
+++ b/src/app/fees/expedited-fee/expedited-fee.component.html
@@ -44,6 +44,12 @@
                 <td mat-cell *matCellDef="let fee">{{ fee.effectiveDate | date:'mediumDate':'UTC' }}</td>
             </ng-container>
 
+            <!-- Expired Date Column -->
+            <ng-container matColumnDef="expiredDate">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Expired Date</th>
+                <td mat-cell *matCellDef="let fee">{{ fee.expiredDate | date:'mediumDate':'UTC' }}</td>
+            </ng-container>
+
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef>Actions</th>
diff --git a/src/app/fees/expedited-fee/expedited-fee.component.ts b/src/app/fees/expedited-fee/expedited-fee.component.ts
index a816778..ce1d064 100644
--- a/src/app/fees/expedited-fee/expedited-fee.component.ts
+++ b/src/app/fees/expedited-fee/expedited-fee.component.ts
@@ -32,7 +32,7 @@ export class ExpeditedFeeComponent implements OnInit, OnDestroy {
   
   @ViewChild(MatSort) sort!: MatSort;
 
-  displayedColumns: string[] = ['customerType', 'deliveryType', 'time', 'fee', 'effectiveDate', 'actions'];
+  displayedColumns: string[] = ['customerType', 'deliveryType', 'time', 'fee', 'effectiveDate', 'expiredDate', 'actions'];
   dataSource = new MatTableDataSource<any>();
   feeForm: FormGroup;
   isEditing = false;
diff --git a/src/app/fees/security-deposit/security-deposit.component.html b/src/app/fees/security-deposit/security-deposit.component.html
index 2a9d09d..39c5bf6 100644
--- a/src/app/fees/security-deposit/security-deposit.component.html
+++ b/src/app/fees/security-deposit/security-deposit.component.html
@@ -24,22 +24,20 @@
             <ng-container matColumnDef="uscibMember">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>USCIB Member</th>
                 <td mat-cell *matCellDef="let deposit">
-                    <mat-icon [color]="deposit.uscibMember ? 'primary' : ''">
-                        {{ deposit.uscibMember ? 'check_circle' : 'cancel' }}
-                    </mat-icon>
+                    {{ deposit.uscibMember }}
                 </td>
             </ng-container>
 
             <!-- Special Commodity Column -->
             <ng-container matColumnDef="specialCommodity">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>Special Commodity</th>
-                <td mat-cell *matCellDef="let deposit">{{ deposit.specialCommodity || 'N/A' }}</td>
+                <td mat-cell *matCellDef="let deposit">{{ deposit.specialCommodity }}</td>
             </ng-container>
 
             <!-- Special Country Column -->
             <ng-container matColumnDef="specialCountry">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>Special Country</th>
-                <td mat-cell *matCellDef="let deposit">{{ getCountryName(deposit.specialCountry) || 'N/A' }}</td>
+                <td mat-cell *matCellDef="let deposit">{{ getCountryName(deposit.specialCountry) }}</td>
             </ng-container>
 
             <!-- Rate Column -->
@@ -60,6 +58,12 @@
                 <td mat-cell *matCellDef="let deposit">{{ deposit.effectiveDate | date:'mediumDate':'UTC' }}</td>
             </ng-container>
 
+            <!-- Expired Date Column -->
+            <ng-container matColumnDef="expiredDate">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Expired Date</th>
+                <td mat-cell *matCellDef="let fee">{{ fee.expiredDate | date:'mediumDate':'UTC' }}</td>
+            </ng-container>
+
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef>Actions</th>
@@ -101,20 +105,20 @@
 
             <div class="form-row">
                 <mat-label>Holder Type</mat-label>
-                <mat-radio-group formControlName="holderType" required class="horizontal-group">
+                <mat-radio-group formControlName="holderType" class="horizontal-group">
                     <mat-radio-button *ngFor="let type of holderTypes" [value]="type.value" class="radio-button">
                         {{ type.name }}
                     </mat-radio-button>
                 </mat-radio-group>
-                <mat-error *ngIf="depositForm.get('holderType')?.errors?.['required']">
+                <!-- <mat-error *ngIf="depositForm.get('holderType')?.errors?.['required']">
                     Holder type is required
-                </mat-error>
+                </mat-error> -->
             </div>
 
             <div class="form-row">
                 <mat-label>USCIB Member</mat-label>
                 <mat-radio-group formControlName="uscibMember" required class="horizontal-group">
-                    <mat-radio-button *ngFor="let type of yesNoOptions" [value]="type.value" class="radio-button">
+                    <mat-radio-button *ngFor="let type of uscibMemberOptions" [value]="type.value" class="radio-button">
                         {{ type.label }}
                     </mat-radio-button>
                 </mat-radio-group>
diff --git a/src/app/fees/security-deposit/security-deposit.component.ts b/src/app/fees/security-deposit/security-deposit.component.ts
index bf8642f..c5e1ae8 100644
--- a/src/app/fees/security-deposit/security-deposit.component.ts
+++ b/src/app/fees/security-deposit/security-deposit.component.ts
@@ -31,7 +31,7 @@ export class SecurityDepositComponent implements OnInit {
 
   @ViewChild(MatSort) sort!: MatSort;
 
-  displayedColumns: string[] = ['holderType', 'uscibMember', 'specialCommodity', 'specialCountry', 'rate', 'rateType', 'effectiveDate', 'actions'];
+  displayedColumns: string[] = ['holderType', 'uscibMember', 'specialCommodity', 'specialCountry', 'rate', 'rateType', 'effectiveDate', 'expiredDate', 'actions'];
   dataSource = new MatTableDataSource<any>();
   depositForm: FormGroup;
   isEditing = false;
@@ -55,9 +55,10 @@ export class SecurityDepositComponent implements OnInit {
   @Input() userPreferences!: UserPreferences;
   @Output() hasSecurityDeposits = new EventEmitter<boolean>();
 
-  yesNoOptions = [
-    { value: 'Y', label: 'Yes' },
-    { value: 'N', label: 'No' }
+  uscibMemberOptions = [
+    { value: 'Yes', label: 'Yes' },
+    { value: 'No', label: 'No' },
+    { value: 'Both', label: 'Both' }
   ];
 
   private fb = inject(FormBuilder);
@@ -68,8 +69,8 @@ export class SecurityDepositComponent implements OnInit {
 
   constructor() {
     this.depositForm = this.fb.group({
-      holderType: ['CORP', Validators.required],
-      uscibMember: ['Y', Validators.required],
+      holderType: ['CORP'],
+      uscibMember: ['Yes', Validators.required],
       specialCommodity: [''],
       specialCountry: [''],
       rate: [0, [Validators.required, Validators.min(0)]],
@@ -134,7 +135,7 @@ export class SecurityDepositComponent implements OnInit {
   loadHolderTypes(): void {
     this.commonService.getHolderTypes().subscribe({
       next: (holderTypes) => {
-        this.holderTypes = holderTypes;
+        this.holderTypes = [...holderTypes, { value: '', name: 'All', id: "0" }];
       },
       error: (error) => {
         console.error('Error loading holder types:', error);
@@ -156,7 +157,7 @@ export class SecurityDepositComponent implements OnInit {
     this.currentDepositId = null;
     this.depositForm.reset({
       holderType: 'CORP',
-      uscibMember: 'N',
+      uscibMember: 'No',
       specialCountry: '',
     });
     this.depositForm.patchValue({ rate: 0 });
@@ -173,7 +174,7 @@ export class SecurityDepositComponent implements OnInit {
     this.currentDepositId = deposit.securityDepositId;
     this.depositForm.patchValue({
       holderType: deposit.holderType,
-      uscibMember: deposit.uscibMember ? 'Y' : 'N',
+      uscibMember: deposit.uscibMember,
       specialCommodity: deposit.specialCommodity,
       specialCountry: deposit.specialCountry,
       rate: deposit.rate,
@@ -198,7 +199,6 @@ export class SecurityDepositComponent implements OnInit {
 
     const depositData = {
       ...this.depositForm.value,
-      uscibMember: this.depositForm.value.uscibMember === 'Y',
       specialCommodity: this.depositForm.value.specialCommodity || null,
       specialCountry: this.depositForm.value.specialCountry || null
     };
@@ -257,7 +257,7 @@ export class SecurityDepositComponent implements OnInit {
     this.currentDepositId = null;
     this.depositForm.reset({
       holderType: 'CORP',
-      uscibMember: 'N',
+      uscibMember: 'No',
       specialCountry: '',
     });
   }
diff --git a/src/app/preparer/contacts/contacts.component.html b/src/app/preparer/contacts/contacts.component.html
index b72e636..3e94b24 100644
--- a/src/app/preparer/contacts/contacts.component.html
+++ b/src/app/preparer/contacts/contacts.component.html
@@ -36,7 +36,7 @@
             <!-- Title Column -->
             <ng-container matColumnDef="title">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
-                <td mat-cell *matCellDef="let contact">{{ contact.title }}</td>
+                <td mat-cell *matCellDef="let contact">{{ getContactTitleLabel(contact.title) }}</td>
             </ng-container>
 
             <!-- Phone Column -->
@@ -173,17 +173,16 @@
             </div>
 
             <div class="form-row">
-
                 <mat-form-field appearance="outline">
                     <mat-label>Title</mat-label>
-                    <input matInput formControlName="title" required>
-                    <mat-icon matSuffix>work</mat-icon>
+                    <mat-select formControlName="title" required>
+                        <mat-option *ngFor="let contactTitle of contactTitles" [value]="contactTitle.value">
+                            {{ contactTitle.name }}
+                        </mat-option>
+                    </mat-select>
                     <mat-error *ngIf="contactForm.get('title')?.errors?.['required']">
                         Title is required
                     </mat-error>
-                    <mat-error *ngIf="contactForm.get('title')?.errors?.['maxlength']">
-                        Maximum 100 characters allowed
-                    </mat-error>
                 </mat-form-field>
             </div>
 
diff --git a/src/app/preparer/contacts/contacts.component.ts b/src/app/preparer/contacts/contacts.component.ts
index 5173cf4..47172b8 100644
--- a/src/app/preparer/contacts/contacts.component.ts
+++ b/src/app/preparer/contacts/contacts.component.ts
@@ -17,7 +17,9 @@ import { ConfirmDialogComponent } from '../../shared/components/confirm-dialog/c
 import { ContactLogin } from '../../core/models/preparer/contact-login';
 import { LocationService } from '../../core/services/preparer/location.service';
 import { Location } from '../../core/models/preparer/location';
-import { finalize } from 'rxjs';
+import { finalize, Subject, takeUntil } from 'rxjs';
+import { ContactTitle } from '../../core/models/contact-title';
+import { CommonService } from '../../core/services/common/common.service';
 
 @Component({
   selector: 'app-contacts',
@@ -46,6 +48,7 @@ export class ContactsComponent {
   showInactiveContacts = false;
   contacts: Contact[] = [];
   locations: Location[] = [];
+  contactTitles: ContactTitle[] = [];
 
   contactReadOnlyFields: any = {
     lastChangedDate: null,
@@ -62,8 +65,11 @@ export class ContactsComponent {
   @Input() userPreferences: UserPreferences = {};
   @Output() hasContacts = new EventEmitter<boolean>();
 
+  private destroy$ = new Subject<void>();
+
   private fb = inject(FormBuilder);
   private contactService = inject(ContactService);
+  private commonService = inject(CommonService);
   private dialog = inject(MatDialog);
   private notificationService = inject(NotificationService);
   private errorHandler = inject(ApiErrorHandlerService);
@@ -89,9 +95,15 @@ export class ContactsComponent {
   }
 
   ngOnInit(): void {
+    this.loadContactTitles();
     this.loadLocations();
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
@@ -115,6 +127,19 @@ export class ContactsComponent {
     });
   }
 
+  loadContactTitles(): void {
+    this.commonService.getContactTitles()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (contactTitles) => {
+          this.contactTitles = contactTitles;
+        },
+        error: (error) => {
+          console.error('Failed to load contact titles', error);
+        }
+      });
+  }
+
   loadContacts(): void {
     this.isLoading = true;
 
@@ -354,4 +379,9 @@ export class ContactsComponent {
     }
     return locationLabel;
   }
+
+  getContactTitleLabel(value: string): string {
+    const type = this.contactTitles.find(t => t.value === value);
+    return type ? type.name : value;
+  }
 }
diff --git a/src/app/service-provider/contacts/contacts.component.html b/src/app/service-provider/contacts/contacts.component.html
index 0228fe4..0f94c6c 100644
--- a/src/app/service-provider/contacts/contacts.component.html
+++ b/src/app/service-provider/contacts/contacts.component.html
@@ -40,7 +40,7 @@
             <!-- Title Column -->
             <ng-container matColumnDef="title">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
-                <td mat-cell *matCellDef="let contact">{{ contact.title }}</td>
+                <td mat-cell *matCellDef="let contact">{{ getContactTitleLabel(contact.title) }}</td>
             </ng-container>
 
             <!-- Phone Column -->
@@ -159,17 +159,16 @@
             </div>
 
             <div class="form-row">
-
                 <mat-form-field appearance="outline">
                     <mat-label>Title</mat-label>
-                    <input matInput formControlName="title" required>
-                    <mat-icon matSuffix>work</mat-icon>
+                    <mat-select formControlName="title" required>
+                        <mat-option *ngFor="let contactTitle of contactTitles" [value]="contactTitle.value">
+                            {{ contactTitle.name }}
+                        </mat-option>
+                    </mat-select>
                     <mat-error *ngIf="contactForm.get('title')?.errors?.['required']">
                         Title is required
                     </mat-error>
-                    <mat-error *ngIf="contactForm.get('title')?.errors?.['maxlength']">
-                        Maximum 100 characters allowed
-                    </mat-error>
                 </mat-form-field>
             </div>
 
diff --git a/src/app/service-provider/contacts/contacts.component.ts b/src/app/service-provider/contacts/contacts.component.ts
index dadf558..0856056 100644
--- a/src/app/service-provider/contacts/contacts.component.ts
+++ b/src/app/service-provider/contacts/contacts.component.ts
@@ -14,8 +14,10 @@ import { UserPreferences } from '../../core/models/user-preference';
 import { ApiErrorHandlerService } from '../../core/services/common/api-error-handler.service';
 import { NotificationService } from '../../core/services/common/notification.service';
 import { ContactService } from '../../core/services/service-provider/contact.service';
-import { finalize } from 'rxjs';
+import { finalize, Subject, takeUntil } from 'rxjs';
 import { ContactLogin } from '../../core/models/service-provider/contact-login';
+import { CommonService } from '../../core/services/common/common.service';
+import { ContactTitle } from '../../core/models/contact-title';
 
 @Component({
   selector: 'app-contacts',
@@ -29,7 +31,7 @@ export class ContactsComponent implements OnInit {
   set paginator(value: MatPaginator) {
     this.dataSource.paginator = value;
   }
-  
+
   @ViewChild(MatSort) sort!: MatSort;
 
   displayedColumns: string[] = ['firstName', 'middleInitial', 'lastName', 'title', 'phone', 'mobile', 'fax', 'email', 'defaultContact', 'actions'];
@@ -42,6 +44,7 @@ export class ContactsComponent implements OnInit {
   showForm = false;
   showInactiveContacts = false;
   contacts: Contact[] = [];
+  contactTitles: ContactTitle[] = [];
 
   contactReadOnlyFields: any = {
     lastChangedDate: null,
@@ -54,8 +57,11 @@ export class ContactsComponent implements OnInit {
   @Input() userPreferences: UserPreferences = {};
   @Output() hasContacts = new EventEmitter<boolean>();
 
+  private destroy$ = new Subject<void>();
+
   private fb = inject(FormBuilder);
   private contactService = inject(ContactService);
+  private commonService = inject(CommonService);
   private notificationService = inject(NotificationService);
   private errorHandler = inject(ApiErrorHandlerService);
   private dialog = inject(MatDialog);
@@ -65,7 +71,7 @@ export class ContactsComponent implements OnInit {
       firstName: ['', [Validators.required, Validators.maxLength(50)]],
       lastName: ['', [Validators.required, Validators.maxLength(50)]],
       middleInitial: ['', [Validators.maxLength(1)]],
-      title: ['', [Validators.required, Validators.maxLength(100)]],
+      title: ['', [Validators.required]],
       phone: ['', [Validators.required, Validators.pattern(/^[0-9\-\(\)]{10,15}$/)]],
       mobile: ['', [Validators.required, Validators.pattern(/^[0-9\-\(\)]{10,15}$/)]],
       fax: ['', [Validators.pattern(/^[0-9\-\(\)]{10,15}$/)]],
@@ -75,9 +81,15 @@ export class ContactsComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.loadContactTitles();
     this.loadContacts();
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
@@ -101,6 +113,19 @@ export class ContactsComponent implements OnInit {
     });
   }
 
+  loadContactTitles(): void {
+    this.commonService.getContactTitles()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (contactTitles) => {
+          this.contactTitles = contactTitles;
+        },
+        error: (error) => {
+          console.error('Failed to load contact titles', error);
+        }
+      });
+  }
+
   toggleShowInactiveContacts(): void {
     this.showInactiveContacts = !this.showInactiveContacts;
     this.renderContacts();
@@ -281,4 +306,9 @@ export class ContactsComponent implements OnInit {
       }
     });
   }
+
+  getContactTitleLabel(value: string): string {
+    const type = this.contactTitles.find(t => t.value === value);
+    return type ? type.name : value;
+  }
 }
\ No newline at end of file