feat: client extra fields + KYC home-visit & video-KYC dialogs

- Add Education Level, Degree/Qualification, Religion, Social Category dropdowns (individual clients) with dependent filtering on the create/edit/preview/view flows
- Add Agriculture Income & Non-Agriculture Income fields under Financial & Classification
- Gate Save with a Verify Client alert dialog when sanctions screening is not yet performed
- Trim Office Name and CKYC Number columns from clients list; widen table to fill container
- Remove DIP/Screening log IDs from preview and personal-data tabs
- Rename "Branch Visit" to "Home Visit" across KYC management
- Wire Take Action: open dedicated dialogs for Schedule Home Visit (officer + datetime) and Send Video KYC link (channels + officer + 48h expiry + session preview)
- Migrate Signatory and Guardian image dialogs to inject() for prefer-inject lint rule

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -42,7 +42,9 @@
           <mat-select-trigger>
             @if (createClientForm.get('legalFormId')?.value) {
               <span class="legal-form-option">
-                <mat-icon class="legal-form-option-icon">{{ createClientForm.get('legalFormId')?.value === 1 ? 'person' : 'business' }}</mat-icon>
+                <mat-icon class="legal-form-option-icon">{{
+                  createClientForm.get('legalFormId')?.value === 1 ? 'person' : 'business'
+                }}</mat-icon>
                 {{ getSelectedLegalFormLabel() }}
               </span>
             }
@@ -67,12 +69,12 @@
                 @if (getSelectedNationality().flagType === 'india') {
                   <span class="nat-flag">
                     <svg viewBox="0 0 36 24" class="nat-flag-svg">
-                      <rect width="36" height="8" fill="#FF9933"/>
-                      <rect y="8" width="36" height="8" fill="#FFFFFF"/>
-                      <rect y="16" width="36" height="8" fill="#138808"/>
-                      <circle cx="18" cy="12" r="3" fill="#000080"/>
-                      <circle cx="18" cy="12" r="2.5" fill="#FFFFFF"/>
-                      <circle cx="18" cy="12" r="0.7" fill="#000080"/>
+                      <rect width="36" height="8" fill="#FF9933" />
+                      <rect y="8" width="36" height="8" fill="#FFFFFF" />
+                      <rect y="16" width="36" height="8" fill="#138808" />
+                      <circle cx="18" cy="12" r="3" fill="#000080" />
+                      <circle cx="18" cy="12" r="2.5" fill="#FFFFFF" />
+                      <circle cx="18" cy="12" r="0.7" fill="#000080" />
                     </svg>
                   </span>
                 } @else {
@@ -88,12 +90,12 @@
                 @if (nat.flagType === 'india') {
                   <span class="nat-flag">
                     <svg viewBox="0 0 36 24" class="nat-flag-svg">
-                      <rect width="36" height="8" fill="#FF9933"/>
-                      <rect y="8" width="36" height="8" fill="#FFFFFF"/>
-                      <rect y="16" width="36" height="8" fill="#138808"/>
-                      <circle cx="18" cy="12" r="3" fill="#000080"/>
-                      <circle cx="18" cy="12" r="2.5" fill="#FFFFFF"/>
-                      <circle cx="18" cy="12" r="0.7" fill="#000080"/>
+                      <rect width="36" height="8" fill="#FF9933" />
+                      <rect y="8" width="36" height="8" fill="#FFFFFF" />
+                      <rect y="16" width="36" height="8" fill="#138808" />
+                      <circle cx="18" cy="12" r="3" fill="#000080" />
+                      <circle cx="18" cy="12" r="2.5" fill="#FFFFFF" />
+                      <circle cx="18" cy="12" r="0.7" fill="#000080" />
                     </svg>
                   </span>
                 } @else {
@@ -129,7 +131,10 @@
       @if (createClientForm.get('fullname')) {
         <mat-form-field appearance="outline" class="form-field full-width">
           <mat-label>
-            {{ 'labels.inputs.' + getDateLabel(createClientForm.get('legalFormId')?.value, ['Name', 'Entity Name']) | translate }}
+            {{
+              'labels.inputs.' + getDateLabel(createClientForm.get('legalFormId')?.value, ['Name', 'Entity Name'])
+                | translate
+            }}
           </mat-label>
           <input matInput required formControlName="fullname" />
           @if (createClientForm.controls.fullname.hasError('required')) {
@@ -150,30 +155,39 @@
             </div>
             <div class="verify-inline">
               @if (!sanctionsVerified && !sanctionsBlocked) {
-                <button mat-stroked-button color="primary" type="button" class="verify-name-btn"
+                <button
+                  mat-stroked-button
+                  color="primary"
+                  type="button"
+                  class="verify-name-btn"
                   [disabled]="readOnly"
-                  (click)="verifySanctions()">
+                  (click)="verifySanctions()"
+                >
                   <fa-icon icon="shield-alt" class="verify-name-icon"></fa-icon>
                   Verify Entity
                 </button>
               }
               @if (sanctionsVerified) {
                 <span class="sanctions-citation">RBI KYC Master Direction (2016) — Section 51 &amp; PMLA 2002</span>
-                <span class="verify-status verified">
-                  <fa-icon icon="check-circle"></fa-icon> Verified
-                </span>
-                <mat-icon class="sanctions-info-icon"
+                <span class="verify-status verified"> <fa-icon icon="check-circle"></fa-icon> Verified </span>
+                <mat-icon
+                  class="sanctions-info-icon"
                   matTooltip="All customer names must be verified against the UN Security Council Consolidated List before account opening and periodically thereafter. Positive matches must be escalated to the Principal Officer immediately."
-                  matTooltipClass="sanctions-tooltip">info</mat-icon>
+                  matTooltipClass="sanctions-tooltip"
+                  >info</mat-icon
+                >
               }
               @if (sanctionsBlocked) {
                 <span class="sanctions-citation">RBI KYC Master Direction (2016) — Section 51 &amp; PMLA 2002</span>
                 <span class="verify-status blocked">
                   <fa-icon icon="exclamation-triangle"></fa-icon> Sanctions Match
                 </span>
-                <mat-icon class="sanctions-info-icon blocked-info"
+                <mat-icon
+                  class="sanctions-info-icon blocked-info"
                   matTooltip="All customer names must be verified against the UN Security Council Consolidated List before account opening and periodically thereafter. Positive matches must be escalated to the Principal Officer immediately."
-                  matTooltipClass="sanctions-tooltip">info</mat-icon>
+                  matTooltipClass="sanctions-tooltip"
+                  >info</mat-icon
+                >
               }
             </div>
           </div>
@@ -181,7 +195,9 @@
       }
 
       <!-- Person: Salutation + First / Middle / Last Name -->
-      @if (createClientForm.get('firstname') || createClientForm.get('middlename') || createClientForm.get('lastname')) {
+      @if (
+        createClientForm.get('firstname') || createClientForm.get('middlename') || createClientForm.get('lastname')
+      ) {
         <div class="name-fields-row">
           @if (createClientForm.get('salutationId') && salutationOptions?.length > 0) {
             <mat-form-field appearance="outline" class="name-field salutation-field-wide">
@@ -213,7 +229,10 @@
               <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
               <span matPrefix class="field-prefix-icon"><mat-icon>person_outline</mat-icon></span>
               <input matInput formControlName="middlename" />
-              @if (createClientForm.controls.middlename?.hasError('pattern') && createClientForm.controls.middlename?.touched) {
+              @if (
+                createClientForm.controls.middlename?.hasError('pattern') &&
+                createClientForm.controls.middlename?.touched
+              ) {
                 <mat-error>Only letters, spaces, dots and hyphens allowed</mat-error>
               }
             </mat-form-field>
@@ -243,30 +262,39 @@
             </div>
             <div class="verify-inline">
               @if (!sanctionsVerified && !sanctionsBlocked) {
-                <button mat-stroked-button color="primary" type="button" class="verify-name-btn"
+                <button
+                  mat-stroked-button
+                  color="primary"
+                  type="button"
+                  class="verify-name-btn"
                   [disabled]="readOnly"
-                  (click)="verifySanctions()">
+                  (click)="verifySanctions()"
+                >
                   <fa-icon icon="shield-alt" class="verify-name-icon"></fa-icon>
                   Verify Client
                 </button>
               }
               @if (sanctionsVerified) {
                 <span class="sanctions-citation">RBI KYC Master Direction (2016) — Section 51 &amp; PMLA 2002</span>
-                <span class="verify-status verified">
-                  <fa-icon icon="check-circle"></fa-icon> Verified
-                </span>
-                <mat-icon class="sanctions-info-icon"
+                <span class="verify-status verified"> <fa-icon icon="check-circle"></fa-icon> Verified </span>
+                <mat-icon
+                  class="sanctions-info-icon"
                   matTooltip="All customer names must be verified against the UN Security Council Consolidated List before account opening and periodically thereafter. Positive matches must be escalated to the Principal Officer immediately."
-                  matTooltipClass="sanctions-tooltip">info</mat-icon>
+                  matTooltipClass="sanctions-tooltip"
+                  >info</mat-icon
+                >
               }
               @if (sanctionsBlocked) {
                 <span class="sanctions-citation">RBI KYC Master Direction (2016) — Section 51 &amp; PMLA 2002</span>
                 <span class="verify-status blocked">
                   <fa-icon icon="exclamation-triangle"></fa-icon> Sanctions Match
                 </span>
-                <mat-icon class="sanctions-info-icon blocked-info"
+                <mat-icon
+                  class="sanctions-info-icon blocked-info"
                   matTooltip="All customer names must be verified against the UN Security Council Consolidated List before account opening and periodically thereafter. Positive matches must be escalated to the Principal Officer immediately."
-                  matTooltipClass="sanctions-tooltip">info</mat-icon>
+                  matTooltipClass="sanctions-tooltip"
+                  >info</mat-icon
+                >
               }
             </div>
           </div>
@@ -278,10 +306,18 @@
         <mat-form-field appearance="outline" class="form-field" (click)="dateOfBirthDatePicker.open()">
           <mat-label>Date of Birth</mat-label>
           <span matPrefix class="field-prefix-icon"><mat-icon>calendar_today</mat-icon></span>
-          <input matInput required [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth" />
+          <input
+            matInput
+            required
+            [max]="maxDate"
+            [matDatepicker]="dateOfBirthDatePicker"
+            formControlName="dateOfBirth"
+          />
           <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
-          @if (createClientForm.get('dateOfBirth')?.hasError('required') && createClientForm.get('dateOfBirth')?.touched) {
+          @if (
+            createClientForm.get('dateOfBirth')?.hasError('required') && createClientForm.get('dateOfBirth')?.touched
+          ) {
             <mat-error>Date of Birth is <strong>required</strong></mat-error>
           }
         </mat-form-field>
@@ -324,7 +360,6 @@
           }
         </div>
       }
-
     </div>
 
     <!-- Minor / Guardian Mapping (mandatory if age < 10) -->
@@ -341,9 +376,15 @@
           </div>
           <div class="guardian-section__header-right">
             <div class="guardian-section__age-chips">
-              <span class="guardian-age-chip"><strong>{{ ageBreakdown.years }}</strong> yrs</span>
-              <span class="guardian-age-chip"><strong>{{ ageBreakdown.months }}</strong> mos</span>
-              <span class="guardian-age-chip"><strong>{{ ageBreakdown.days }}</strong> days</span>
+              <span class="guardian-age-chip"
+                ><strong>{{ ageBreakdown.years }}</strong> yrs</span
+              >
+              <span class="guardian-age-chip"
+                ><strong>{{ ageBreakdown.months }}</strong> mos</span
+              >
+              <span class="guardian-age-chip"
+                ><strong>{{ ageBreakdown.days }}</strong> days</span
+              >
               <span class="guardian-minor-badge">MINOR</span>
             </div>
             @if (!selectedGuardian && !guardianLinking) {
@@ -357,13 +398,14 @@
 
         <!-- Body -->
         <div class="guardian-section__body" formGroupName="guardianDetails">
-
           <!-- Empty state: no guardian linked, not linking -->
           @if (!selectedGuardian && !guardianLinking) {
             <div class="guardian-empty guardian-empty--required">
               <mat-icon class="guardian-empty__icon">person_off</mat-icon>
               <div class="guardian-empty__content">
-                <span class="guardian-empty__text">No guardian linked yet. Click <strong>"Link Guardian"</strong> to search and add.</span>
+                <span class="guardian-empty__text"
+                  >No guardian linked yet. Click <strong>"Link Guardian"</strong> to search and add.</span
+                >
                 <span class="guardian-empty__required">Guardian is mandatory for minor accounts</span>
               </div>
             </div>
@@ -377,22 +419,33 @@
                 <mat-select required formControlName="guardianRelation">
                   <mat-option value="FATHER"><mat-icon class="icon-option-icon">man</mat-icon> Father</mat-option>
                   <mat-option value="MOTHER"><mat-icon class="icon-option-icon">woman</mat-icon> Mother</mat-option>
-                  <mat-option value="LEGAL_GUARDIAN"><mat-icon class="icon-option-icon">gavel</mat-icon> Legal Guardian</mat-option>
-                  <mat-option value="GRANDPARENT"><mat-icon class="icon-option-icon">elderly</mat-icon> Grandparent</mat-option>
+                  <mat-option value="LEGAL_GUARDIAN"
+                    ><mat-icon class="icon-option-icon">gavel</mat-icon> Legal Guardian</mat-option
+                  >
+                  <mat-option value="GRANDPARENT"
+                    ><mat-icon class="icon-option-icon">elderly</mat-icon> Grandparent</mat-option
+                  >
                   <mat-option value="OTHER"><mat-icon class="icon-option-icon">group</mat-icon> Other</mat-option>
                 </mat-select>
               </mat-form-field>
 
               <div class="guardian-search-wrapper guardian-search-col">
-                <mat-form-field appearance="outline" class="guardian-search-field"
-                  [class.guardian-search-disabled]="!createClientForm.get('guardianDetails.guardianRelation')?.value">
+                <mat-form-field
+                  appearance="outline"
+                  class="guardian-search-field"
+                  [class.guardian-search-disabled]="!createClientForm.get('guardianDetails.guardianRelation')?.value"
+                >
                   <mat-label>Search Guardian by Name or Client ID</mat-label>
                   <span matPrefix class="field-prefix-icon"><mat-icon>person_search</mat-icon></span>
-                  <input matInput [value]="guardianSearchText"
+                  <input
+                    matInput
+                    [value]="guardianSearchText"
                     (input)="onGuardianSearch($any($event.target).value)"
                     (blur)="dismissGuardianSearch()"
                     [disabled]="!createClientForm.get('guardianDetails.guardianRelation')?.value"
-                    placeholder="Select relationship first, then search..." autocomplete="off" />
+                    placeholder="Select relationship first, then search..."
+                    autocomplete="off"
+                  />
                 </mat-form-field>
 
                 @if (guardianSearching) {
@@ -413,11 +466,17 @@
                         <div class="guardian-result-item__info">
                           <span class="guardian-result-item__name">{{ result.displayName }}</span>
                           <span class="guardian-result-item__meta">
-                            ID: {{ result.id }} &middot; A/C: {{ result.accountNumber }} &middot; {{ result.officeName }}@if (result.dateOfBirth) { &middot; DOB: {{ result.dateOfBirth | dateFormat }} }@if (result.fatherSpouseName) { &middot; {{ result.fatherSpouseName }} }
+                            ID: {{ result.id }} &middot; A/C: {{ result.accountNumber }} &middot;
+                            {{ result.officeName }}
+                            @if (result.dateOfBirth) {
+                              &middot; DOB: {{ result.dateOfBirth | dateFormat }}
+                            }
+                            @if (result.fatherSpouseName) {
+                              &middot; {{ result.fatherSpouseName }}
+                            }
                           </span>
                         </div>
-                        <span class="guardian-result-item__status"
-                          [class.active]="result.status?.value === 'Active'">
+                        <span class="guardian-result-item__status" [class.active]="result.status?.value === 'Active'">
                           {{ result.status?.value }}
                         </span>
                       </div>
@@ -429,7 +488,13 @@
                 }
               </div>
 
-              <button mat-icon-button type="button" class="guardian-cancel-link" (click)="guardianLinking = false" matTooltip="Cancel">
+              <button
+                mat-icon-button
+                type="button"
+                class="guardian-cancel-link"
+                (click)="guardianLinking = false"
+                matTooltip="Cancel"
+              >
                 <mat-icon>close</mat-icon>
               </button>
             </div>
@@ -453,8 +518,12 @@
                 <span class="guardian-row__col guardian-row__col--photo">
                   <div class="guardian-row__avatar" [class.has-photo]="selectedGuardian.profileImageUrl">
                     @if (selectedGuardian.profileImageUrl) {
-                      <img [src]="selectedGuardian.profileImageUrl" alt="Photo" class="avatar-photo guardian-row__zoomable"
-                        (click)="zoomGuardianImage(selectedGuardian.profileImageUrl, 'Guardian Photo')" />
+                      <img
+                        [src]="selectedGuardian.profileImageUrl"
+                        alt="Photo"
+                        class="avatar-photo guardian-row__zoomable"
+                        (click)="zoomGuardianImage(selectedGuardian.profileImageUrl, 'Guardian Photo')"
+                      />
                     } @else {
                       <fa-icon icon="user-shield"></fa-icon>
                     }
@@ -470,26 +539,40 @@
                   </div>
                 </span>
                 <span class="guardian-row__col guardian-row__col--rel">
-                  <span class="guardian-row__rel-badge">{{ createClientForm.get('guardianDetails.guardianRelation')?.value || '-' }}</span>
+                  <span class="guardian-row__rel-badge">{{
+                    createClientForm.get('guardianDetails.guardianRelation')?.value || '-'
+                  }}</span>
                 </span>
                 <span class="guardian-row__col guardian-row__col--cif">
-                  <span class="guardian-row__mono">{{ selectedGuardian.accountNo || selectedGuardian.accountNumber || '-' }}</span>
+                  <span class="guardian-row__mono">{{
+                    selectedGuardian.accountNo || selectedGuardian.accountNumber || '-'
+                  }}</span>
                 </span>
                 <span class="guardian-row__col guardian-row__col--status">
-                  <span class="guardian-row__status-badge"
-                    [class.guardian-row__status-badge--active]="selectedGuardian.status?.value === 'Active'">
+                  <span
+                    class="guardian-row__status-badge"
+                    [class.guardian-row__status-badge--active]="selectedGuardian.status?.value === 'Active'"
+                  >
                     {{ selectedGuardian.status?.value || '-' }}
                   </span>
                 </span>
                 <span class="guardian-row__col guardian-row__col--actions">
-                  <button mat-icon-button type="button" class="guardian-action-btn"
+                  <button
+                    mat-icon-button
+                    type="button"
+                    class="guardian-action-btn"
                     (click)="guardianExpanded = !guardianExpanded"
-                    [matTooltip]="guardianExpanded ? 'Collapse' : 'View Details'">
+                    [matTooltip]="guardianExpanded ? 'Collapse' : 'View Details'"
+                  >
                     <mat-icon>{{ guardianExpanded ? 'expand_less' : 'visibility' }}</mat-icon>
                   </button>
-                  <button mat-icon-button type="button" class="guardian-action-btn guardian-action-btn--delete"
+                  <button
+                    mat-icon-button
+                    type="button"
+                    class="guardian-action-btn guardian-action-btn--delete"
                     (click)="removeGuardian()"
-                    matTooltip="Delete">
+                    matTooltip="Delete"
+                  >
                     <mat-icon>delete</mat-icon>
                   </button>
                 </span>
@@ -506,16 +589,22 @@
                     @if (selectedGuardian.panNumber) {
                       <div class="guardian-expand__item">
                         <span class="guardian-expand__label">PAN</span>
-                        <span class="guardian-expand__value">{{ selectedGuardian.panNumber }}
-                          @if (selectedGuardian.panVerified) { <mat-icon class="verify-tick-sm">check_circle</mat-icon> }
+                        <span class="guardian-expand__value"
+                          >{{ selectedGuardian.panNumber }}
+                          @if (selectedGuardian.panVerified) {
+                            <mat-icon class="verify-tick-sm">check_circle</mat-icon>
+                          }
                         </span>
                       </div>
                     }
                     @if (selectedGuardian.aadhaarMasked) {
                       <div class="guardian-expand__item">
                         <span class="guardian-expand__label">Aadhaar</span>
-                        <span class="guardian-expand__value">{{ selectedGuardian.aadhaarMasked }}
-                          @if (selectedGuardian.aadhaarVerified) { <mat-icon class="verify-tick-sm">check_circle</mat-icon> }
+                        <span class="guardian-expand__value"
+                          >{{ selectedGuardian.aadhaarMasked }}
+                          @if (selectedGuardian.aadhaarVerified) {
+                            <mat-icon class="verify-tick-sm">check_circle</mat-icon>
+                          }
                         </span>
                       </div>
                     }
@@ -535,8 +624,12 @@
                   @if (selectedGuardian.signatureUrl) {
                     <div class="guardian-expand__sig">
                       <span class="guardian-expand__label">Specimen Signature</span>
-                      <img [src]="selectedGuardian.signatureUrl" alt="Signature" class="guardian-expand__sig-img guardian-row__zoomable"
-                        (click)="zoomGuardianImage(selectedGuardian.signatureUrl, 'Specimen Signature')" />
+                      <img
+                        [src]="selectedGuardian.signatureUrl"
+                        alt="Signature"
+                        class="guardian-expand__sig-img guardian-row__zoomable"
+                        (click)="zoomGuardianImage(selectedGuardian.signatureUrl, 'Specimen Signature')"
+                      />
                     </div>
                   }
                 </div>
@@ -549,7 +642,7 @@
 
     <!-- Non-Individual Details -->
     @if (createClientForm.get('clientNonPersonDetails')) {
-      <div class="form-grid" formGroupName="clientNonPersonDetails" style="margin-top: 16px;">
+      <div class="form-grid" formGroupName="clientNonPersonDetails" style="margin-top: 16px">
         <mat-form-field appearance="outline" class="form-field">
           <mat-label>Constitution Type</mat-label>
           <mat-select formControlName="constitutionId" required>
@@ -607,7 +700,10 @@
           </h4>
           <div class="minor-info-bar">
             <fa-icon icon="info-circle" class="minor-info-icon"></fa-icon>
-            <span>Select registered clients as authorized signatories — as per Board Resolution / Partnership Deed. Max 10.</span>
+            <span
+              >Select registered clients as authorized signatories — as per Board Resolution / Partnership Deed. Max
+              10.</span
+            >
           </div>
 
           <!-- Signatory List Table -->
@@ -638,27 +734,45 @@
                   <span class="sig-table__col sig-table__col--name">
                     <strong>{{ sig.displayName }}</strong>
                     @if (sig._loading) {
-                      <mat-progress-spinner diameter="14" mode="indeterminate" class="sig-inline-spinner"></mat-progress-spinner>
+                      <mat-progress-spinner
+                        diameter="14"
+                        mode="indeterminate"
+                        class="sig-inline-spinner"
+                      ></mat-progress-spinner>
                     }
                   </span>
                   <span class="sig-table__col sig-table__col--id">{{ sig.cifNumber || sig.id }}</span>
                   <span class="sig-table__col sig-table__col--pan">
                     {{ sig.panNumber || '-' }}
-                    @if (sig.panVerified) { <mat-icon class="verify-tick-sm">check_circle</mat-icon> }
+                    @if (sig.panVerified) {
+                      <mat-icon class="verify-tick-sm">check_circle</mat-icon>
+                    }
                   </span>
                   <span class="sig-table__col sig-table__col--din">
                     @if (sig.dinNumber) {
                       {{ sig.dinNumber }}
-                      @if (sig.dinVerified) { <mat-icon class="verify-tick-sm">check_circle</mat-icon> }
-                      @if (!sig.dinVerified) { <mat-icon class="verify-cross-sm">cancel</mat-icon> }
+                      @if (sig.dinVerified) {
+                        <mat-icon class="verify-tick-sm">check_circle</mat-icon>
+                      }
+                      @if (!sig.dinVerified) {
+                        <mat-icon class="verify-cross-sm">cancel</mat-icon>
+                      }
                     } @else {
-                      <button mat-stroked-button class="din-verify-btn" type="button" matTooltip="Verify DIN" (click)="openDinVerifyDialog(sig)">
+                      <button
+                        mat-stroked-button
+                        class="din-verify-btn"
+                        type="button"
+                        matTooltip="Verify DIN"
+                        (click)="openDinVerifyDialog(sig)"
+                      >
                         <mat-icon class="din-verify-icon">badge</mat-icon> Verify DIN
                       </button>
                     }
                   </span>
                   <span class="sig-table__col sig-table__col--status">
-                    <span class="sig-status-chip" [class.active]="sig.status?.value === 'Active'">{{ sig.status?.value || '-' }}</span>
+                    <span class="sig-status-chip" [class.active]="sig.status?.value === 'Active'">{{
+                      sig.status?.value || '-'
+                    }}</span>
                   </span>
                   <span class="sig-table__col sig-table__col--actions">
                     <button mat-icon-button type="button" matTooltip="View Details" (click)="viewSignatoryDetails(sig)">
@@ -680,10 +794,14 @@
                 <mat-form-field appearance="outline" class="guardian-search-field">
                   <mat-label>Add Signatory — Search by Name or Client ID</mat-label>
                   <span matPrefix class="field-prefix-icon"><mat-icon>person_add</mat-icon></span>
-                  <input matInput [value]="signatorySearchText"
+                  <input
+                    matInput
+                    [value]="signatorySearchText"
                     (input)="onSignatorySearch($any($event.target).value)"
                     (blur)="dismissSignatorySearch()"
-                    placeholder="Type name or client ID..." autocomplete="off" />
+                    placeholder="Type name or client ID..."
+                    autocomplete="off"
+                  />
                 </mat-form-field>
                 @if (signatorySearching) {
                   <div class="guardian-results">
@@ -700,9 +818,20 @@
                         <div class="guardian-result-item__avatar"><fa-icon icon="user"></fa-icon></div>
                         <div class="guardian-result-item__info">
                           <span class="guardian-result-item__name">{{ result.displayName }}</span>
-                          <span class="guardian-result-item__meta">ID: {{ result.id }} &middot; A/C: {{ result.accountNumber }} &middot; {{ result.officeName }}@if (result.dateOfBirth) { &middot; DOB: {{ result.dateOfBirth | dateFormat }} }@if (result.fatherSpouseName) { &middot; {{ result.fatherSpouseName }} }</span>
+                          <span class="guardian-result-item__meta"
+                            >ID: {{ result.id }} &middot; A/C: {{ result.accountNumber }} &middot;
+                            {{ result.officeName }}
+                            @if (result.dateOfBirth) {
+                              &middot; DOB: {{ result.dateOfBirth | dateFormat }}
+                            }
+                            @if (result.fatherSpouseName) {
+                              &middot; {{ result.fatherSpouseName }}
+                            }
+                          </span>
                         </div>
-                        <span class="guardian-result-item__status" [class.active]="result.status?.value === 'Active'">{{ result.status?.value }}</span>
+                        <span class="guardian-result-item__status" [class.active]="result.status?.value === 'Active'">{{
+                          result.status?.value
+                        }}</span>
                       </div>
                     }
                   </div>
@@ -728,7 +857,6 @@
           <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
       </div>
-
     }
   </div>
 
@@ -737,9 +865,12 @@
     <h4 class="section-title">
       <fa-icon icon="mobile-alt" class="section-icon"></fa-icon>
       Contact Details
-      <mat-icon class="dip-info-icon"
+      <mat-icon
+        class="dip-info-icon"
         matTooltip="Digital Intelligence Platform (DIP) refers to the fraud-monitoring and intelligence ecosystem created by the Department of Telecommunications (DoT)"
-        matTooltipPosition="above">info</mat-icon>
+        matTooltipPosition="above"
+        >info</mat-icon
+      >
     </h4>
 
     <div class="form-grid">
@@ -747,21 +878,35 @@
       <mat-form-field appearance="outline" class="form-field">
         <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
         <span matPrefix class="field-prefix-icon"><mat-icon>phone_android</mat-icon></span>
-        <input matInput required type="text" formControlName="mobileNo" placeholder="e.g. 9876543210" maxlength="10"
+        <input
+          matInput
+          required
+          type="text"
+          formControlName="mobileNo"
+          placeholder="e.g. 9876543210"
+          maxlength="10"
           (keypress)="$event.charCode >= 48 && $event.charCode <= 57 ? true : $event.preventDefault()"
-          (paste)="$event.preventDefault()" />
+          (paste)="$event.preventDefault()"
+        />
         @if (createClientForm.get('mobileNo')?.hasError('required') && createClientForm.get('mobileNo')?.touched) {
           <mat-error>Mobile number is <strong>required</strong></mat-error>
-        } @else if (createClientForm.get('mobileNo')?.hasError('pattern') && createClientForm.get('mobileNo')?.touched) {
+        } @else if (
+          createClientForm.get('mobileNo')?.hasError('pattern') && createClientForm.get('mobileNo')?.touched
+        ) {
           <mat-error>Enter valid 10-digit number (starts with 6-9)</mat-error>
         }
       </mat-form-field>
 
       <div class="form-field mobile-verify-row">
         @if (!mobileVerified) {
-          <button mat-stroked-button color="primary" type="button" class="verify-btn"
+          <button
+            mat-stroked-button
+            color="primary"
+            type="button"
+            class="verify-btn"
             [disabled]="readOnly || createClientForm.get('mobileNo')?.value?.length !== 10"
-            (click)="verifyWithDIP()">
+            (click)="verifyWithDIP()"
+          >
             <fa-icon icon="shield-alt" class="m-r-10"></fa-icon>
             Verify with DIP
           </button>
@@ -774,19 +919,33 @@
       <mat-form-field appearance="outline" class="form-field">
         <mat-label>Alternate Mobile No</mat-label>
         <span matPrefix class="field-prefix-icon"><mat-icon>phone_android</mat-icon></span>
-        <input matInput type="text" formControlName="alternateMobileNo" placeholder="e.g. 9876543210" maxlength="10"
+        <input
+          matInput
+          type="text"
+          formControlName="alternateMobileNo"
+          placeholder="e.g. 9876543210"
+          maxlength="10"
           (keypress)="$event.charCode >= 48 && $event.charCode <= 57 ? true : $event.preventDefault()"
-          (paste)="$event.preventDefault()" />
-        @if (createClientForm.get('alternateMobileNo')?.hasError('pattern') && createClientForm.get('alternateMobileNo')?.touched) {
+          (paste)="$event.preventDefault()"
+        />
+        @if (
+          createClientForm.get('alternateMobileNo')?.hasError('pattern') &&
+          createClientForm.get('alternateMobileNo')?.touched
+        ) {
           <mat-error>Enter valid 10-digit number (starts with 6-9)</mat-error>
         }
       </mat-form-field>
 
       <div class="form-field mobile-verify-row">
         @if (!alternateMobileVerified) {
-          <button mat-stroked-button color="primary" type="button" class="verify-btn"
+          <button
+            mat-stroked-button
+            color="primary"
+            type="button"
+            class="verify-btn"
             [disabled]="readOnly || createClientForm.get('alternateMobileNo')?.value?.length !== 10"
-            (click)="verifyAlternateDIP()">
+            (click)="verifyAlternateDIP()"
+          >
             <fa-icon icon="shield-alt" class="m-r-10"></fa-icon>
             Verify with DIP
           </button>
@@ -800,21 +959,27 @@
         <mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
         <span matPrefix class="field-prefix-icon"><mat-icon>email</mat-icon></span>
         <input matInput required formControlName="emailAddress" placeholder="e.g. name@example.com" />
-        @if (createClientForm.get('emailAddress')?.hasError('required') && createClientForm.get('emailAddress')?.touched) {
+        @if (
+          createClientForm.get('emailAddress')?.hasError('required') && createClientForm.get('emailAddress')?.touched
+        ) {
           <mat-error>Email is <strong>required</strong></mat-error>
         } @else if (createClientForm.get('emailAddress')?.invalid && createClientForm.get('emailAddress')?.touched) {
           <mat-error>Enter a valid email (e.g. name&#64;example.com)</mat-error>
         }
       </mat-form-field>
 
-      @if (createClientForm.get('legalFormId')?.value === LegalFormId.PERSON && maritalStatusOptions.length > 0 && !isMinor) {
+      @if (
+        createClientForm.get('legalFormId')?.value === LegalFormId.PERSON && maritalStatusOptions.length > 0 && !isMinor
+      ) {
         <mat-form-field appearance="outline" class="form-field">
           <mat-label>Marital Status</mat-label>
           <mat-select formControlName="maritalStatusId">
             <mat-select-trigger>
               @if (getSelectedMaritalStatus()) {
                 <span class="icon-option">
-                  <mat-icon class="icon-option-icon">{{ getMaritalStatusIcon(getSelectedMaritalStatus().name) }}</mat-icon>
+                  <mat-icon class="icon-option-icon">{{
+                    getMaritalStatusIcon(getSelectedMaritalStatus().name)
+                  }}</mat-icon>
                   {{ getSelectedMaritalStatus().name }}
                 </span>
               }
@@ -833,83 +998,249 @@
     </div>
   </div>
 
+  <!-- Section: Education & Social Details (Individual only) -->
+  @if (createClientForm.get('legalFormId')?.value === LegalFormId.PERSON) {
+    <div class="section-block">
+      <h4 class="section-title">
+        <fa-icon icon="book" class="section-icon"></fa-icon>
+        Education &amp; Social Details
+      </h4>
+      <div class="form-grid">
+        <!-- Education Level (non-minor) -->
+        @if (!isMinor) {
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Education Level</mat-label>
+            <mat-select formControlName="educationLevelId">
+              <mat-select-trigger>
+                @if (getSelectedEducationLevel()) {
+                  <span class="icon-option">
+                    <mat-icon class="icon-option-icon">{{
+                      getEducationLevelIcon(getSelectedEducationLevel().name)
+                    }}</mat-icon>
+                    {{ getSelectedEducationLevel().name }}
+                  </span>
+                }
+              </mat-select-trigger>
+              @for (el of educationLevelOptions; track el) {
+                <mat-option [value]="el.id">
+                  <span class="icon-option">
+                    <mat-icon class="icon-option-icon">{{ getEducationLevelIcon(el.name) }}</mat-icon>
+                    {{ el.name }}
+                  </span>
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+
+          <!-- Degree / Qualification (depends on Education Level) -->
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Degree / Qualification</mat-label>
+            <mat-select
+              formControlName="degreeQualificationId"
+              [placeholder]="getSelectedEducationLevel() ? 'Select Degree' : 'Select Education Level first'"
+            >
+              <mat-select-trigger>
+                @if (getSelectedDegreeQualification()) {
+                  <span class="icon-option">
+                    <mat-icon class="icon-option-icon">{{
+                      getDegreeQualificationIcon(getSelectedDegreeQualification().name)
+                    }}</mat-icon>
+                    {{ getSelectedDegreeQualification().name }}
+                  </span>
+                }
+              </mat-select-trigger>
+              @for (dq of filteredDegreeQualificationOptions; track dq) {
+                <mat-option [value]="dq.id">
+                  <span class="icon-option">
+                    <mat-icon class="icon-option-icon">{{ getDegreeQualificationIcon(dq.name) }}</mat-icon>
+                    {{ dq.name }}
+                  </span>
+                </mat-option>
+              }
+              @if (!getSelectedEducationLevel()) {
+                <mat-option disabled>
+                  <em>Please select Education Level first</em>
+                </mat-option>
+              } @else if (filteredDegreeQualificationOptions.length === 0) {
+                <mat-option disabled>
+                  <em>No options available</em>
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+
+        <!-- Religion -->
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Religion</mat-label>
+          <mat-select formControlName="religionId">
+            <mat-select-trigger>
+              @if (getSelectedReligion()) {
+                <span class="icon-option">
+                  <mat-icon class="icon-option-icon">{{ getReligionIcon(getSelectedReligion().name) }}</mat-icon>
+                  {{ getSelectedReligion().name }}
+                </span>
+              }
+            </mat-select-trigger>
+            @for (r of religionOptions; track r) {
+              <mat-option [value]="r.id">
+                <span class="icon-option">
+                  <mat-icon class="icon-option-icon">{{ getReligionIcon(r.name) }}</mat-icon>
+                  {{ r.name }}
+                </span>
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+
+        <!-- Social Category -->
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Social Category</mat-label>
+          <mat-select formControlName="socialCategoryId">
+            <mat-select-trigger>
+              @if (getSelectedSocialCategory()) {
+                <span class="icon-option">
+                  <mat-icon class="icon-option-icon">{{
+                    getSocialCategoryIcon(getSelectedSocialCategory().name)
+                  }}</mat-icon>
+                  {{ getSelectedSocialCategory().name }}
+                </span>
+              }
+            </mat-select-trigger>
+            @for (sc of socialCategoryOptions; track sc) {
+              <mat-option [value]="sc.id">
+                <span class="icon-option">
+                  <mat-icon class="icon-option-icon">{{ getSocialCategoryIcon(sc.name) }}</mat-icon>
+                  {{ sc.name }}
+                </span>
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </div>
+  }
+
   <!-- Section: Financial & Classification (Individual only) -->
   @if (createClientForm.get('legalFormId')?.value === LegalFormId.PERSON) {
-  <div class="section-block">
-    <h4 class="section-title">
-      <fa-icon icon="chart-line" class="section-icon"></fa-icon>
-      Financial &amp; Classification
-    </h4>
-    <div class="form-grid">
-
-
-      <mat-form-field appearance="outline" class="form-field">
-        <mat-label>{{ 'labels.inputs.Occupation Category' | translate }}</mat-label>
-        <mat-select formControlName="occupationCategoryId">
-          <mat-select-trigger>
-            @if (getSelectedOccupationCategory()) {
-              <span class="occ-option">
-                <mat-icon class="occ-option-icon">{{ getOccupationCategoryIcon(getSelectedOccupationCategory().name) }}</mat-icon>
-                {{ getSelectedOccupationCategory().name }}
-              </span>
+    <div class="section-block">
+      <h4 class="section-title">
+        <fa-icon icon="chart-line" class="section-icon"></fa-icon>
+        Financial &amp; Classification
+      </h4>
+      <div class="form-grid">
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>{{ 'labels.inputs.Occupation Category' | translate }}</mat-label>
+          <mat-select formControlName="occupationCategoryId">
+            <mat-select-trigger>
+              @if (getSelectedOccupationCategory()) {
+                <span class="occ-option">
+                  <mat-icon class="occ-option-icon">{{
+                    getOccupationCategoryIcon(getSelectedOccupationCategory().name)
+                  }}</mat-icon>
+                  {{ getSelectedOccupationCategory().name }}
+                </span>
+              }
+            </mat-select-trigger>
+            @for (cat of occupationCategoryOptions; track cat) {
+              <mat-option [value]="cat.id">
+                <span class="occ-option">
+                  <mat-icon class="occ-option-icon">{{ getOccupationCategoryIcon(cat.name) }}</mat-icon>
+                  {{ cat.name }}
+                </span>
+              </mat-option>
             }
-          </mat-select-trigger>
-          @for (cat of occupationCategoryOptions; track cat) {
-            <mat-option [value]="cat.id">
-              <span class="occ-option">
-                <mat-icon class="occ-option-icon">{{ getOccupationCategoryIcon(cat.name) }}</mat-icon>
-                {{ cat.name }}
-              </span>
-            </mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
+          </mat-select>
+        </mat-form-field>
 
-      <mat-form-field appearance="outline" class="form-field">
-        <mat-label>{{ 'labels.inputs.Occupation' | translate }}</mat-label>
-        <mat-select formControlName="occupationId">
-          <mat-select-trigger>
-            @if (getSelectedOccupation()) {
-              <span class="occ-option">
-                <mat-icon class="occ-option-icon">{{ getOccupationIcon(getSelectedOccupation().name) }}</mat-icon>
-                {{ getSelectedOccupation().name }}
-              </span>
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>{{ 'labels.inputs.Occupation' | translate }}</mat-label>
+          <mat-select formControlName="occupationId">
+            <mat-select-trigger>
+              @if (getSelectedOccupation()) {
+                <span class="occ-option">
+                  <mat-icon class="occ-option-icon">{{ getOccupationIcon(getSelectedOccupation().name) }}</mat-icon>
+                  {{ getSelectedOccupation().name }}
+                </span>
+              }
+            </mat-select-trigger>
+            @for (occ of occupationOptions; track occ) {
+              <mat-option [value]="occ.id">
+                <span class="occ-option">
+                  <mat-icon class="occ-option-icon">{{ getOccupationIcon(occ.name) }}</mat-icon>
+                  {{ occ.name }}
+                </span>
+              </mat-option>
             }
-          </mat-select-trigger>
-          @for (occ of occupationOptions; track occ) {
-            <mat-option [value]="occ.id">
-              <span class="occ-option">
-                <mat-icon class="occ-option-icon">{{ getOccupationIcon(occ.name) }}</mat-icon>
-                {{ occ.name }}
-              </span>
-            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Monthly Income</mat-label>
+          <span matPrefix class="rupee-prefix">&#8377;</span>
+          <input matInput type="number" formControlName="monthlyIncome" min="0" />
+          @if (
+            createClientForm.get('monthlyIncome')?.hasError('pattern') && createClientForm.get('monthlyIncome')?.touched
+          ) {
+            <mat-error>Enter a valid amount</mat-error>
+          } @else if (
+            createClientForm.get('monthlyIncome')?.hasError('min') && createClientForm.get('monthlyIncome')?.touched
+          ) {
+            <mat-error>Amount cannot be negative</mat-error>
           }
-        </mat-select>
-      </mat-form-field>
+        </mat-form-field>
 
-      <mat-form-field appearance="outline" class="form-field">
-        <mat-label>Monthly Income</mat-label>
-        <span matPrefix class="rupee-prefix">&#8377;</span>
-        <input matInput type="number" formControlName="monthlyIncome" min="0" />
-        @if (createClientForm.get('monthlyIncome')?.hasError('pattern') && createClientForm.get('monthlyIncome')?.touched) {
-          <mat-error>Enter a valid amount</mat-error>
-        } @else if (createClientForm.get('monthlyIncome')?.hasError('min') && createClientForm.get('monthlyIncome')?.touched) {
-          <mat-error>Amount cannot be negative</mat-error>
-        }
-      </mat-form-field>
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Annual Turnover (Last FY)</mat-label>
+          <span matPrefix class="rupee-prefix">&#8377;</span>
+          <input matInput type="number" formControlName="annualTurnover" min="0" />
+          @if (
+            createClientForm.get('annualTurnover')?.hasError('pattern') &&
+            createClientForm.get('annualTurnover')?.touched
+          ) {
+            <mat-error>Enter a valid amount</mat-error>
+          } @else if (
+            createClientForm.get('annualTurnover')?.hasError('min') && createClientForm.get('annualTurnover')?.touched
+          ) {
+            <mat-error>Amount cannot be negative</mat-error>
+          }
+        </mat-form-field>
 
-      <mat-form-field appearance="outline" class="form-field">
-        <mat-label>Annual Turnover (Last FY)</mat-label>
-        <span matPrefix class="rupee-prefix">&#8377;</span>
-        <input matInput type="number" formControlName="annualTurnover" min="0" />
-        @if (createClientForm.get('annualTurnover')?.hasError('pattern') && createClientForm.get('annualTurnover')?.touched) {
-          <mat-error>Enter a valid amount</mat-error>
-        } @else if (createClientForm.get('annualTurnover')?.hasError('min') && createClientForm.get('annualTurnover')?.touched) {
-          <mat-error>Amount cannot be negative</mat-error>
-        }
-      </mat-form-field>
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Agriculture Income</mat-label>
+          <span matPrefix class="rupee-prefix">&#8377;</span>
+          <input matInput type="number" formControlName="agricultureIncome" min="0" />
+          @if (
+            createClientForm.get('agricultureIncome')?.hasError('pattern') &&
+            createClientForm.get('agricultureIncome')?.touched
+          ) {
+            <mat-error>Enter a valid amount</mat-error>
+          } @else if (
+            createClientForm.get('agricultureIncome')?.hasError('min') &&
+            createClientForm.get('agricultureIncome')?.touched
+          ) {
+            <mat-error>Amount cannot be negative</mat-error>
+          }
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Non-Agriculture Income</mat-label>
+          <span matPrefix class="rupee-prefix">&#8377;</span>
+          <input matInput type="number" formControlName="nonAgricultureIncome" min="0" />
+          @if (
+            createClientForm.get('nonAgricultureIncome')?.hasError('pattern') &&
+            createClientForm.get('nonAgricultureIncome')?.touched
+          ) {
+            <mat-error>Enter a valid amount</mat-error>
+          } @else if (
+            createClientForm.get('nonAgricultureIncome')?.hasError('min') &&
+            createClientForm.get('nonAgricultureIncome')?.touched
+          ) {
+            <mat-error>Amount cannot be negative</mat-error>
+          }
+        </mat-form-field>
+      </div>
     </div>
-  </div>
   }
 
   <!-- submittedOnDate is set automatically via form default (business date) -->

src/app/clients/client-stepper/client-general-step/client-general-step.component.scss

@@ -95,8 +95,8 @@ form {
   background: #f0f9ff;
   border: 1px solid #bae6fd;
   border-radius: 6px;
-  margin-top: -8px;
-  margin-bottom: 4px;
+  margin-top: 12px;
+  margin-bottom: 16px;
 }
 
 .full-name-preview {
@@ -408,7 +408,10 @@ form {
 .guardian-cancel-link {
   color: #94a3b8 !important;
   margin-top: 8px;
-  &:hover { color: #ef4444 !important; }
+
+  &:hover {
+    color: #ef4444 !important;
+  }
 }
 
 /* ═══ Guardian Row Table ═══ */
@@ -437,7 +440,10 @@ form {
   align-items: center;
   padding: 10px 12px;
   transition: background 0.1s;
-  &:hover { background: #f8fafc; }
+
+  &:hover {
+    background: #f8fafc;
+  }
 }
 
 .guardian-row__col {
@@ -445,12 +451,33 @@ form {
   font-size: 13px;
   color: #1e293b;
 
-  &--photo { flex: 0 0 50px; }
-  &--name { flex: 1; min-width: 0; }
-  &--rel { flex: 0 0 120px; }
-  &--cif { flex: 0 0 130px; }
-  &--status { flex: 0 0 80px; }
-  &--actions { flex: 0 0 110px; display: flex; gap: 2px; justify-content: flex-end; }
+  &--photo {
+    flex: 0 0 50px;
+  }
+
+  &--name {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &--rel {
+    flex: 0 0 120px;
+  }
+
+  &--cif {
+    flex: 0 0 130px;
+  }
+
+  &--status {
+    flex: 0 0 80px;
+  }
+
+  &--actions {
+    flex: 0 0 110px;
+    display: flex;
+    gap: 2px;
+    justify-content: flex-end;
+  }
 }
 
 .guardian-row__avatar {
@@ -543,14 +570,22 @@ form {
     color: #64748b;
   }
 
-  &:hover mat-icon { color: #1074b9; }
-  &--delete:hover mat-icon { color: #ef4444; }
+  &:hover mat-icon {
+    color: #1074b9;
+  }
+
+  &--delete:hover mat-icon {
+    color: #ef4444;
+  }
 }
 
 .guardian-row__zoomable {
   cursor: zoom-in;
   transition: transform 0.15s;
-  &:hover { transform: scale(1.05); }
+
+  &:hover {
+    transform: scale(1.05);
+  }
 }
 
 /* Expandable detail panel */
@@ -558,12 +593,19 @@ form {
   border-top: 1px solid #e2e8f0;
   background: #f8fafc;
   padding: 16px 20px;
-  animation: guardianSlideDown 0.2s ease-out;
+  animation: guardian-slide-down 0.2s ease-out;
 }
 
-@keyframes guardianSlideDown {
-  from { opacity: 0; max-height: 0; }
-  to { opacity: 1; max-height: 500px; }
+@keyframes guardian-slide-down {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+
+  to {
+    opacity: 1;
+    max-height: 500px;
+  }
 }
 
 .guardian-expand__grid {
@@ -666,7 +708,9 @@ form {
     width: 100%;
   }
 
-  .guardian-row__header { display: none; }
+  .guardian-row__header {
+    display: none;
+  }
 
   .guardian-row__data {
     flex-wrap: wrap;
@@ -674,10 +718,23 @@ form {
   }
 
   .guardian-row__col {
-    &--photo { flex: 0 0 40px; }
-    &--name { flex: 1 1 200px; }
-    &--rel, &--cif, &--status { flex: 0 0 auto; }
-    &--actions { flex: 0 0 auto; }
+    &--photo {
+      flex: 0 0 40px;
+    }
+
+    &--name {
+      flex: 1 1 200px;
+    }
+
+    &--rel,
+    &--cif,
+    &--status {
+      flex: 0 0 auto;
+    }
+
+    &--actions {
+      flex: 0 0 auto;
+    }
   }
 
   .guardian-expand__grid {
@@ -777,8 +834,13 @@ form {
   transition: background 0.1s;
   border-bottom: 1px solid #f1f5f9;
 
-  &:last-child { border-bottom: none; }
-  &:hover { background: #f0f7ff; }
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: #f0f7ff;
+  }
 }
 
 .guardian-result-item__avatar {
@@ -882,7 +944,10 @@ form {
 
 .guardian-card__remove {
   color: #94a3b8 !important;
-  &:hover { color: #ef4444 !important; }
+
+  &:hover {
+    color: #ef4444 !important;
+  }
 }
 
 .guardian-card__body {
@@ -899,8 +964,13 @@ form {
   border-bottom: 1px solid #f1f5f9;
   border-right: 1px solid #f1f5f9;
 
-  &:nth-child(2n) { border-right: none; }
-  &:nth-last-child(-n+2) { border-bottom: none; }
+  &:nth-child(2n) {
+    border-right: none;
+  }
+
+  &:nth-last-child(-n + 2) {
+    border-bottom: none;
+  }
 }
 
 .guardian-card__label {
@@ -1069,10 +1139,22 @@ form {
     color: #0f172a;
   }
 
-  .row-micro td { background: #ecfdf5; }
-  .row-small td { background: #e0f2fe; }
-  .row-medium td { background: #fffbeb; }
-  .row-large td { background: #f8fafc; color: #94a3b8; }
+  .row-micro td {
+    background: #ecfdf5;
+  }
+
+  .row-small td {
+    background: #e0f2fe;
+  }
+
+  .row-medium td {
+    background: #fffbeb;
+  }
+
+  .row-large td {
+    background: #f8fafc;
+    color: #94a3b8;
+  }
 }
 
 .msme-dot {
@@ -1082,10 +1164,21 @@ form {
   border-radius: 50%;
   margin-right: 6px;
 
-  &.green { background: #10b981; }
-  &.blue { background: #0ea5e9; }
-  &.amber { background: #f59e0b; }
-  &.gray { background: #cbd5e1; }
+  &.green {
+    background: #10b981;
+  }
+
+  &.blue {
+    background: #0ea5e9;
+  }
+
+  &.amber {
+    background: #f59e0b;
+  }
+
+  &.gray {
+    background: #cbd5e1;
+  }
 }
 
 .msme-class-table-footer {
@@ -1499,19 +1592,68 @@ form {
   border-bottom: 1px solid #f1f5f9;
   transition: background 0.15s;
 
-  &:last-child { border-bottom: none; }
-  &:hover { background: #f8fafc; }
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: #f8fafc;
+  }
 }
 
 .sig-table__col {
-  &--sno { flex: 0 0 32px; text-align: center; color: #94a3b8; font-size: 12px; }
-  &--photo { flex: 0 0 40px; }
-  &--name { flex: 1; font-size: 13px; display: flex; align-items: center; gap: 6px; }
-  &--id { flex: 0 0 100px; font-size: 12px; color: #64748b; }
-  &--pan { flex: 0 0 120px; font-size: 12px; color: #1e293b; display: flex; align-items: center; gap: 3px; }
-  &--din { flex: 0 0 140px; font-size: 12px; color: #1e293b; display: flex; align-items: center; gap: 3px; }
-  &--status { flex: 0 0 80px; }
-  &--actions { flex: 0 0 80px; display: flex; gap: 2px; }
+  &--sno {
+    flex: 0 0 32px;
+    text-align: center;
+    color: #94a3b8;
+    font-size: 12px;
+  }
+
+  &--photo {
+    flex: 0 0 40px;
+  }
+
+  &--name {
+    flex: 1;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &--id {
+    flex: 0 0 100px;
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  &--pan {
+    flex: 0 0 120px;
+    font-size: 12px;
+    color: #1e293b;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  }
+
+  &--din {
+    flex: 0 0 140px;
+    font-size: 12px;
+    color: #1e293b;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  }
+
+  &--status {
+    flex: 0 0 80px;
+  }
+
+  &--actions {
+    flex: 0 0 80px;
+    display: flex;
+    gap: 2px;
+  }
 }
 
 .sig-table__avatar {
@@ -1526,11 +1668,21 @@ form {
   font-size: 12px;
   overflow: hidden;
 
-  &.has-photo { padding: 0; }
-  .avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+  &.has-photo {
+    padding: 0;
+  }
+
+  .avatar-photo {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
 }
 
-.sig-inline-spinner { display: inline-block; }
+.sig-inline-spinner {
+  display: inline-block;
+}
 
 .verify-tick-sm {
   font-size: 14px !important;
@@ -1569,7 +1721,10 @@ form {
   font-size: 11px;
   font-weight: 600;
   color: #94a3b8;
-  &.active { color: #22c55e; }
+
+  &.active {
+    color: #22c55e;
+  }
 }
 
 .sig-action-icon {
@@ -1577,7 +1732,10 @@ form {
   width: 18px !important;
   height: 18px !important;
   color: #64748b;
-  &.remove { color: #ef4444; }
+
+  &.remove {
+    color: #ef4444;
+  }
 }
 
 .sig-add-wrapper {

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html

@@ -88,14 +88,18 @@
         }
         @if (client?.dateOfBirth) {
           <div class="preview-field">
-            <span class="preview-label">{{ client.legalFormId === LegalFormId.PERSON ? 'Date of Birth' : 'Incorporation Date' }}</span>
+            <span class="preview-label">{{
+              client.legalFormId === LegalFormId.PERSON ? 'Date of Birth' : 'Incorporation Date'
+            }}</span>
             <span class="preview-value">{{ client.dateOfBirth | dateFormat }}</span>
           </div>
         }
         @if (client?.legalFormId === LegalFormId.PERSON && client?.genderId) {
           <div class="preview-field">
             <span class="preview-label">Gender</span>
-            <span class="preview-value">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
+            <span class="preview-value">{{
+              client.genderId | find: clientTemplate.genderOptions : 'id' : 'name'
+            }}</span>
           </div>
         }
         @if (client?.legalFormId) {
@@ -107,13 +111,17 @@
         @if (client?.officeId) {
           <div class="preview-field">
             <span class="preview-label">Office</span>
-            <span class="preview-value">{{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }}</span>
+            <span class="preview-value">{{
+              client.officeId | find: clientTemplate.officeOptions : 'id' : 'name'
+            }}</span>
           </div>
         }
         @if (client?.staffId) {
           <div class="preview-field">
             <span class="preview-label">Staff</span>
-            <span class="preview-value">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
+            <span class="preview-value">{{
+              client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName'
+            }}</span>
           </div>
         }
         @if (client?.legalFormId === LegalFormId.PERSON) {
@@ -134,10 +142,42 @@
             <span class="preview-value">{{ client.maritalStatusId | find: maritalStatusOptions : 'id' : 'name' }}</span>
           </div>
         }
+        @if (client?.educationLevelId) {
+          <div class="preview-field">
+            <span class="preview-label">Education Level</span>
+            <span class="preview-value">{{
+              client.educationLevelId | find: educationLevelOptions : 'id' : 'name'
+            }}</span>
+          </div>
+        }
+        @if (client?.degreeQualificationId) {
+          <div class="preview-field">
+            <span class="preview-label">Degree / Qualification</span>
+            <span class="preview-value">{{
+              client.degreeQualificationId | find: degreeQualificationOptions : 'id' : 'name'
+            }}</span>
+          </div>
+        }
+        @if (client?.religionId) {
+          <div class="preview-field">
+            <span class="preview-label">Religion</span>
+            <span class="preview-value">{{ client.religionId | find: religionOptions : 'id' : 'name' }}</span>
+          </div>
+        }
+        @if (client?.socialCategoryId) {
+          <div class="preview-field">
+            <span class="preview-label">Social Category</span>
+            <span class="preview-value">{{
+              client.socialCategoryId | find: socialCategoryOptions : 'id' : 'name'
+            }}</span>
+          </div>
+        }
         @if (client?.salutationId) {
           <div class="preview-field">
             <span class="preview-label">Salutation</span>
-            <span class="preview-value">{{ client.salutationId | find: clientTemplate.salutationOptions : 'id' : 'name' }}</span>
+            <span class="preview-value">{{
+              client.salutationId | find: clientTemplate.salutationOptions : 'id' : 'name'
+            }}</span>
           </div>
         }
         @if (client?.ageYears != null) {
@@ -150,7 +190,11 @@
           <div class="preview-field">
             <span class="preview-label">Minor</span>
             <span class="preview-value">
-              <span [class]="client.isMinor ? 'preview-badge preview-badge--danger' : 'preview-badge preview-badge--verified'">
+              <span
+                [class]="
+                  client.isMinor ? 'preview-badge preview-badge--danger' : 'preview-badge preview-badge--verified'
+                "
+              >
                 {{ client.isMinor ? 'Yes (Age < 10)' : 'No' }}
               </span>
             </span>
@@ -172,13 +216,19 @@
           @if (client.clientNonPersonDetails.constitutionId) {
             <div class="preview-field">
               <span class="preview-label">Constitution</span>
-              <span class="preview-value">{{ client.clientNonPersonDetails.constitutionId | find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name' }}</span>
+              <span class="preview-value">{{
+                client.clientNonPersonDetails.constitutionId
+                  | find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
+              }}</span>
             </div>
           }
           @if (client.clientNonPersonDetails.mainBusinessLineId) {
             <div class="preview-field">
               <span class="preview-label">Main Business Line</span>
-              <span class="preview-value">{{ client.clientNonPersonDetails.mainBusinessLineId | find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name' }}</span>
+              <span class="preview-value">{{
+                client.clientNonPersonDetails.mainBusinessLineId
+                  | find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
+              }}</span>
             </div>
           }
           @if (client.clientNonPersonDetails.incorpNumber) {
@@ -215,17 +265,15 @@
         <div class="preview-field">
           <span class="preview-label">DIP Verification</span>
           <span class="preview-value">
-            <span [class]="client?.dipVerified ? 'preview-badge preview-badge--verified' : 'preview-badge preview-badge--pending'">
+            <span
+              [class]="
+                client?.dipVerified ? 'preview-badge preview-badge--verified' : 'preview-badge preview-badge--pending'
+              "
+            >
               {{ client?.dipVerified ? 'Verified' : 'Pending' }}
             </span>
           </span>
         </div>
-        @if (client?.dipLookupLogId) {
-          <div class="preview-field">
-            <span class="preview-label">DIP Lookup Log ID</span>
-            <span class="preview-value mono">{{ client.dipLookupLogId }}</span>
-          </div>
-        }
         @if (client?.alternateMobileNo) {
           <div class="preview-field">
             <span class="preview-label">Alternate Mobile No</span>
@@ -236,18 +284,18 @@
           <div class="preview-field">
             <span class="preview-label">Alternate DIP Verification</span>
             <span class="preview-value">
-              <span [class]="client?.alternateDipVerified ? 'preview-badge preview-badge--verified' : 'preview-badge preview-badge--pending'">
+              <span
+                [class]="
+                  client?.alternateDipVerified
+                    ? 'preview-badge preview-badge--verified'
+                    : 'preview-badge preview-badge--pending'
+                "
+              >
                 {{ client?.alternateDipVerified ? 'Verified' : 'Pending' }}
               </span>
             </span>
           </div>
         }
-        @if (client?.alternateDipLookupLogId) {
-          <div class="preview-field">
-            <span class="preview-label">Alternate DIP Lookup Log ID</span>
-            <span class="preview-value mono">{{ client.alternateDipLookupLogId }}</span>
-          </div>
-        }
         @if (client?.emailAddress) {
           <div class="preview-field">
             <span class="preview-label">Email Address</span>
@@ -257,78 +305,103 @@
         <div class="preview-field">
           <span class="preview-label">Name Verification (Sanctions)</span>
           <span class="preview-value">
-            <span [class]="client?.nameVerified ? 'preview-badge preview-badge--verified' : 'preview-badge preview-badge--danger'">
-              {{ client?.nameVerified ? 'Verified — Clear' : (client?.nameVerified === false ? 'Sanctions Match' : 'Pending') }}
+            <span
+              [class]="
+                client?.nameVerified ? 'preview-badge preview-badge--verified' : 'preview-badge preview-badge--danger'
+              "
+            >
+              {{
+                client?.nameVerified
+                  ? 'Verified — Clear'
+                  : client?.nameVerified === false
+                    ? 'Sanctions Match'
+                    : 'Pending'
+              }}
             </span>
           </span>
         </div>
-        @if (client?.screeningLogId) {
-          <div class="preview-field">
-            <span class="preview-label">Screening Log ID</span>
-            <span class="preview-value mono">{{ client.screeningLogId }}</span>
-          </div>
-        }
       </div>
     </div>
   </div>
 
   <!-- Financial & Classification (Individual only) -->
   @if (client?.legalFormId !== 2) {
-  <div class="info-card">
-    <div class="card-header">
-      <fa-icon icon="chart-line" class="card-icon"></fa-icon>
-      <span>Financial &amp; Classification</span>
-    </div>
-    <div class="card-body">
-      <div class="preview-grid">
-        @if (client?.occupationCategoryId) {
-          <div class="preview-field">
-            <span class="preview-label">Occupation Category</span>
-            <span class="preview-value">{{ client.occupationCategoryId | find: clientTemplate.occupationCategoryOptions : 'id' : 'name' }}</span>
-          </div>
-        }
-        @if (client?.occupationId) {
-          <div class="preview-field">
-            <span class="preview-label">Occupation</span>
-            <span class="preview-value">{{ client.occupationId | find: clientTemplate.occupationOptions : 'id' : 'name' }}</span>
-          </div>
-        }
-        @if (client?.clientTypeId) {
-          <div class="preview-field">
-            <span class="preview-label">Client Type</span>
-            <span class="preview-value">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
-          </div>
-        }
-        @if (client?.clientClassificationId) {
-          <div class="preview-field">
-            <span class="preview-label">Client Classification</span>
-            <span class="preview-value">{{ client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name' }}</span>
-          </div>
-        }
-        @if (client?.monthlyIncome) {
-          <div class="preview-field">
-            <span class="preview-label">Monthly Income</span>
-            <span class="preview-value">₹ {{ client.monthlyIncome | number }}</span>
-          </div>
-        }
-        @if (client?.annualTurnover) {
-          <div class="preview-field">
-            <span class="preview-label">Annual Turnover</span>
-            <span class="preview-value">₹ {{ client.annualTurnover | number }}</span>
-          </div>
-        }
-        @if (!client?.occupationCategoryId && !client?.occupationId && !client?.clientTypeId && !client?.clientClassificationId && !client?.monthlyIncome && !client?.annualTurnover) {
-          <div class="preview-field full-width">
-            <span class="preview-value no-data">No classification data provided</span>
-          </div>
-        }
+    <div class="info-card">
+      <div class="card-header">
+        <fa-icon icon="chart-line" class="card-icon"></fa-icon>
+        <span>Financial &amp; Classification</span>
+      </div>
+      <div class="card-body">
+        <div class="preview-grid">
+          @if (client?.occupationCategoryId) {
+            <div class="preview-field">
+              <span class="preview-label">Occupation Category</span>
+              <span class="preview-value">{{
+                client.occupationCategoryId | find: clientTemplate.occupationCategoryOptions : 'id' : 'name'
+              }}</span>
+            </div>
+          }
+          @if (client?.occupationId) {
+            <div class="preview-field">
+              <span class="preview-label">Occupation</span>
+              <span class="preview-value">{{
+                client.occupationId | find: clientTemplate.occupationOptions : 'id' : 'name'
+              }}</span>
+            </div>
+          }
+          @if (client?.clientTypeId) {
+            <div class="preview-field">
+              <span class="preview-label">Client Type</span>
+              <span class="preview-value">{{
+                client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name'
+              }}</span>
+            </div>
+          }
+          @if (client?.clientClassificationId) {
+            <div class="preview-field">
+              <span class="preview-label">Client Classification</span>
+              <span class="preview-value">{{
+                client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
+              }}</span>
+            </div>
+          }
+          @if (client?.monthlyIncome) {
+            <div class="preview-field">
+              <span class="preview-label">Monthly Income</span>
+              <span class="preview-value">₹ {{ client.monthlyIncome | number }}</span>
+            </div>
+          }
+          @if (client?.annualTurnover) {
+            <div class="preview-field">
+              <span class="preview-label">Annual Turnover</span>
+              <span class="preview-value">₹ {{ client.annualTurnover | number }}</span>
+            </div>
+          }
+          @if (
+            !client?.occupationCategoryId &&
+            !client?.occupationId &&
+            !client?.clientTypeId &&
+            !client?.clientClassificationId &&
+            !client?.monthlyIncome &&
+            !client?.annualTurnover
+          ) {
+            <div class="preview-field full-width">
+              <span class="preview-value no-data">No classification data provided</span>
+            </div>
+          }
+        </div>
       </div>
     </div>
-  </div>
   }
 
   <!-- KYC Details -->
-  @if (kycData?.panNumber || kycData?.aadhaarNumberMasked || kycData?.gstinNumber || kycData?.enterprisePan || kycData?.cinNumber) {
+  @if (
+    kycData?.panNumber ||
+    kycData?.aadhaarNumberMasked ||
+    kycData?.gstinNumber ||
+    kycData?.enterprisePan ||
+    kycData?.cinNumber
+  ) {
     <div class="info-card">
       <div class="card-header">
         <fa-icon icon="fingerprint" class="card-icon"></fa-icon>
@@ -391,9 +464,13 @@
             <div class="preview-field">
               <span class="preview-label">Risk Category</span>
               <span class="preview-value">
-                @if (kycData.riskCategory === 1) { Low Risk }
-                @else if (kycData.riskCategory === 2) { Medium Risk }
-                @else if (kycData.riskCategory === 3) { High Risk }
+                @if (kycData.riskCategory === 1) {
+                  Low Risk
+                } @else if (kycData.riskCategory === 2) {
+                  Medium Risk
+                } @else if (kycData.riskCategory === 3) {
+                  High Risk
+                }
               </span>
             </div>
           }
@@ -414,7 +491,7 @@
       <div class="card-header">
         <fa-icon icon="user-shield" class="card-icon"></fa-icon>
         <span>Guardian Details</span>
-        <span class="preview-badge preview-badge--info" style="margin-left:auto">Minor</span>
+        <span class="preview-badge preview-badge--info" style="margin-left: auto">Minor</span>
       </div>
       <div class="card-body">
         <div class="preview-grid">
@@ -450,7 +527,13 @@
             <div class="preview-field">
               <span class="preview-label">Status</span>
               <span class="preview-value">
-                <span [class]="guardian.status?.value === 'Active' ? 'preview-badge preview-badge--verified' : 'preview-badge preview-badge--pending'">
+                <span
+                  [class]="
+                    guardian.status?.value === 'Active'
+                      ? 'preview-badge preview-badge--verified'
+                      : 'preview-badge preview-badge--pending'
+                  "
+                >
                   {{ guardian.status.value }}
                 </span>
               </span>
@@ -524,7 +607,12 @@
             </div>
           }
         }
-        @if (!addressData.permanent?.addressLine1 && !addressData.current?.addressLine1 && !addressData.office?.addressLine1 && !addressData.correspondence?.addressLine1) {
+        @if (
+          !addressData.permanent?.addressLine1 &&
+          !addressData.current?.addressLine1 &&
+          !addressData.office?.addressLine1 &&
+          !addressData.correspondence?.addressLine1
+        ) {
           <div class="preview-field full-width">
             <span class="preview-value no-data">No address data provided</span>
           </div>
@@ -563,40 +651,76 @@
         <div class="card-body">
           <div class="preview-grid">
             @if (entityClassificationData.msme.udyamRegistrationNumber) {
-              <div class="preview-field"><span class="preview-label">Udyam Registration No.</span><span class="preview-value mono">{{ entityClassificationData.msme.udyamRegistrationNumber }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Udyam Registration No.</span
+                ><span class="preview-value mono">{{ entityClassificationData.msme.udyamRegistrationNumber }}</span>
+              </div>
             }
             @if (entityClassificationData.msme.msmeClassification) {
-              <div class="preview-field"><span class="preview-label">MSME Classification</span><span class="preview-value">{{ entityClassificationData.msme.msmeClassification }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">MSME Classification</span
+                ><span class="preview-value">{{ entityClassificationData.msme.msmeClassification }}</span>
+              </div>
             }
             @if (entityClassificationData.msme.enterpriseType) {
-              <div class="preview-field"><span class="preview-label">Enterprise Type</span><span class="preview-value">{{ entityClassificationData.msme.enterpriseType }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Enterprise Type</span
+                ><span class="preview-value">{{ entityClassificationData.msme.enterpriseType }}</span>
+              </div>
             }
             @if (entityClassificationData.msme.nicActivityCode) {
-              <div class="preview-field"><span class="preview-label">NIC Activity Code</span><span class="preview-value mono">{{ entityClassificationData.msme.nicActivityCode }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">NIC Activity Code</span
+                ><span class="preview-value mono">{{ entityClassificationData.msme.nicActivityCode }}</span>
+              </div>
             }
             @if (entityClassificationData.msme.annualTurnover) {
-              <div class="preview-field"><span class="preview-label">Annual Turnover</span><span class="preview-value">₹ {{ entityClassificationData.msme.annualTurnover }} Cr</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Annual Turnover</span
+                ><span class="preview-value">₹ {{ entityClassificationData.msme.annualTurnover }} Cr</span>
+              </div>
             }
             @if (entityClassificationData.msme.investmentPlantMachinery) {
-              <div class="preview-field"><span class="preview-label">Investment (Plant &amp; Machinery)</span><span class="preview-value">₹ {{ entityClassificationData.msme.investmentPlantMachinery }} Cr</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Investment (Plant &amp; Machinery)</span
+                ><span class="preview-value">₹ {{ entityClassificationData.msme.investmentPlantMachinery }} Cr</span>
+              </div>
             }
             @if (entityClassificationData.msme.financialYearAssessment) {
-              <div class="preview-field"><span class="preview-label">FY of Assessment</span><span class="preview-value">{{ entityClassificationData.msme.financialYearAssessment }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">FY of Assessment</span
+                ><span class="preview-value">{{ entityClassificationData.msme.financialYearAssessment }}</span>
+              </div>
             }
             @if (entityClassificationData.msme.socialCategoryOwner) {
-              <div class="preview-field"><span class="preview-label">Social Category</span><span class="preview-value">{{ entityClassificationData.msme.socialCategoryOwner }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Social Category</span
+                ><span class="preview-value">{{ entityClassificationData.msme.socialCategoryOwner }}</span>
+              </div>
             }
             @if (entityClassificationData.msme.genderPrimaryOwner) {
-              <div class="preview-field"><span class="preview-label">Gender of Owner</span><span class="preview-value">{{ entityClassificationData.msme.genderPrimaryOwner }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Gender of Owner</span
+                ><span class="preview-value">{{ entityClassificationData.msme.genderPrimaryOwner }}</span>
+              </div>
             }
             @if (entityClassificationData.msme.noOfEmployees) {
-              <div class="preview-field"><span class="preview-label">No. of Employees</span><span class="preview-value">{{ entityClassificationData.msme.noOfEmployees }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">No. of Employees</span
+                ><span class="preview-value">{{ entityClassificationData.msme.noOfEmployees }}</span>
+              </div>
             }
             @if (entityClassificationData.msme.womenLedEnterprise) {
-              <div class="preview-field"><span class="preview-label">Women-led Enterprise</span><span class="preview-value"><span class="preview-badge preview-badge--verified">Yes</span></span></div>
+              <div class="preview-field">
+                <span class="preview-label">Women-led Enterprise</span
+                ><span class="preview-value"><span class="preview-badge preview-badge--verified">Yes</span></span>
+              </div>
             }
             @if (entityClassificationData.msme.divyangPwdOwned) {
-              <div class="preview-field"><span class="preview-label">Divyang (PWD) Owned</span><span class="preview-value"><span class="preview-badge preview-badge--verified">Yes</span></span></div>
+              <div class="preview-field">
+                <span class="preview-label">Divyang (PWD) Owned</span
+                ><span class="preview-value"><span class="preview-badge preview-badge--verified">Yes</span></span>
+              </div>
             }
           </div>
         </div>
@@ -613,19 +737,34 @@
         <div class="card-body">
           <div class="preview-grid">
             @if (entityClassificationData.startup.dpiitRecognitionNumber) {
-              <div class="preview-field"><span class="preview-label">DPIIT Recognition No.</span><span class="preview-value mono">{{ entityClassificationData.startup.dpiitRecognitionNumber }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">DPIIT Recognition No.</span
+                ><span class="preview-value mono">{{ entityClassificationData.startup.dpiitRecognitionNumber }}</span>
+              </div>
             }
             @if (entityClassificationData.startup.entityStage) {
-              <div class="preview-field"><span class="preview-label">Entity Stage</span><span class="preview-value">{{ entityClassificationData.startup.entityStage }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Entity Stage</span
+                ><span class="preview-value">{{ entityClassificationData.startup.entityStage }}</span>
+              </div>
             }
             @if (entityClassificationData.startup.sectorAsDpiit) {
-              <div class="preview-field"><span class="preview-label">Sector (DPIIT)</span><span class="preview-value">{{ entityClassificationData.startup.sectorAsDpiit }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Sector (DPIIT)</span
+                ><span class="preview-value">{{ entityClassificationData.startup.sectorAsDpiit }}</span>
+              </div>
             }
             @if (entityClassificationData.startup.taxExemption80iac) {
-              <div class="preview-field"><span class="preview-label">80IAC Tax Exemption</span><span class="preview-value"><span class="preview-badge preview-badge--verified">Yes</span></span></div>
+              <div class="preview-field">
+                <span class="preview-label">80IAC Tax Exemption</span
+                ><span class="preview-value"><span class="preview-badge preview-badge--verified">Yes</span></span>
+              </div>
             }
             @if (entityClassificationData.startup.pslLoanLimit) {
-              <div class="preview-field"><span class="preview-label">PSL Loan Limit</span><span class="preview-value">₹ {{ entityClassificationData.startup.pslLoanLimit | number }} Cr</span></div>
+              <div class="preview-field">
+                <span class="preview-label">PSL Loan Limit</span
+                ><span class="preview-value">₹ {{ entityClassificationData.startup.pslLoanLimit | number }} Cr</span>
+              </div>
             }
           </div>
         </div>
@@ -642,22 +781,40 @@
         <div class="card-body">
           <div class="preview-grid">
             @if (entityClassificationData.mudra.mudraCategory) {
-              <div class="preview-field"><span class="preview-label">Mudra Category</span><span class="preview-value">{{ entityClassificationData.mudra.mudraCategory }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Mudra Category</span
+                ><span class="preview-value">{{ entityClassificationData.mudra.mudraCategory }}</span>
+              </div>
             }
             @if (entityClassificationData.mudra.mudraLoanAccountNo) {
-              <div class="preview-field"><span class="preview-label">Loan Account No.</span><span class="preview-value mono">{{ entityClassificationData.mudra.mudraLoanAccountNo }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Loan Account No.</span
+                ><span class="preview-value mono">{{ entityClassificationData.mudra.mudraLoanAccountNo }}</span>
+              </div>
             }
             @if (entityClassificationData.mudra.sanctionedAmount) {
-              <div class="preview-field"><span class="preview-label">Sanctioned Amount</span><span class="preview-value">₹ {{ entityClassificationData.mudra.sanctionedAmount | number }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Sanctioned Amount</span
+                ><span class="preview-value">₹ {{ entityClassificationData.mudra.sanctionedAmount | number }}</span>
+              </div>
             }
             @if (entityClassificationData.mudra.lendingInstitutionName) {
-              <div class="preview-field"><span class="preview-label">Lending Institution</span><span class="preview-value">{{ entityClassificationData.mudra.lendingInstitutionName }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Lending Institution</span
+                ><span class="preview-value">{{ entityClassificationData.mudra.lendingInstitutionName }}</span>
+              </div>
             }
             @if (entityClassificationData.mudra.repaymentStatus) {
-              <div class="preview-field"><span class="preview-label">Repayment Status</span><span class="preview-value">{{ entityClassificationData.mudra.repaymentStatus }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Repayment Status</span
+                ><span class="preview-value">{{ entityClassificationData.mudra.repaymentStatus }}</span>
+              </div>
             }
             @if (entityClassificationData.mudra.npaFlag) {
-              <div class="preview-field"><span class="preview-label">NPA Flag</span><span class="preview-value"><span class="preview-badge preview-badge--danger">NPA</span></span></div>
+              <div class="preview-field">
+                <span class="preview-label">NPA Flag</span
+                ><span class="preview-value"><span class="preview-badge preview-badge--danger">NPA</span></span>
+              </div>
             }
           </div>
         </div>
@@ -674,19 +831,36 @@
         <div class="card-body">
           <div class="preview-grid">
             @if (entityClassificationData.eou.eouRegistrationNumber) {
-              <div class="preview-field"><span class="preview-label">EOU Registration No.</span><span class="preview-value mono">{{ entityClassificationData.eou.eouRegistrationNumber }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">EOU Registration No.</span
+                ><span class="preview-value mono">{{ entityClassificationData.eou.eouRegistrationNumber }}</span>
+              </div>
             }
             @if (entityClassificationData.eou.registeredDcZone) {
-              <div class="preview-field"><span class="preview-label">Registered DC Zone</span><span class="preview-value">{{ entityClassificationData.eou.registeredDcZone }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Registered DC Zone</span
+                ><span class="preview-value">{{ entityClassificationData.eou.registeredDcZone }}</span>
+              </div>
             }
             @if (entityClassificationData.eou.gstinEou) {
-              <div class="preview-field"><span class="preview-label">GSTIN (EOU)</span><span class="preview-value mono">{{ entityClassificationData.eou.gstinEou }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">GSTIN (EOU)</span
+                ><span class="preview-value mono">{{ entityClassificationData.eou.gstinEou }}</span>
+              </div>
             }
             @if (entityClassificationData.eou.annualExportObligation) {
-              <div class="preview-field"><span class="preview-label">Export Obligation</span><span class="preview-value">₹ {{ entityClassificationData.eou.annualExportObligation | number }} Cr</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Export Obligation</span
+                ><span class="preview-value"
+                  >₹ {{ entityClassificationData.eou.annualExportObligation | number }} Cr</span
+                >
+              </div>
             }
             @if (entityClassificationData.eou.adCategoryBankCode) {
-              <div class="preview-field"><span class="preview-label">AD Bank Code</span><span class="preview-value mono">{{ entityClassificationData.eou.adCategoryBankCode }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">AD Bank Code</span
+                ><span class="preview-value mono">{{ entityClassificationData.eou.adCategoryBankCode }}</span>
+              </div>
             }
           </div>
         </div>
@@ -703,22 +877,40 @@
         <div class="card-body">
           <div class="preview-grid">
             @if (entityClassificationData.importexport.iecCode) {
-              <div class="preview-field"><span class="preview-label">IEC Code</span><span class="preview-value mono">{{ entityClassificationData.importexport.iecCode }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">IEC Code</span
+                ><span class="preview-value mono">{{ entityClassificationData.importexport.iecCode }}</span>
+              </div>
             }
             @if (entityClassificationData.importexport.iecStatus) {
-              <div class="preview-field"><span class="preview-label">IEC Status</span><span class="preview-value">{{ entityClassificationData.importexport.iecStatus }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">IEC Status</span
+                ><span class="preview-value">{{ entityClassificationData.importexport.iecStatus }}</span>
+              </div>
             }
             @if (entityClassificationData.importexport.tradeType) {
-              <div class="preview-field"><span class="preview-label">Trade Type</span><span class="preview-value">{{ entityClassificationData.importexport.tradeType }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Trade Type</span
+                ><span class="preview-value">{{ entityClassificationData.importexport.tradeType }}</span>
+              </div>
             }
             @if (entityClassificationData.importexport.primaryHsCode) {
-              <div class="preview-field"><span class="preview-label">Primary HS Code</span><span class="preview-value mono">{{ entityClassificationData.importexport.primaryHsCode }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Primary HS Code</span
+                ><span class="preview-value mono">{{ entityClassificationData.importexport.primaryHsCode }}</span>
+              </div>
             }
             @if (entityClassificationData.importexport.eefcAccountRequired) {
-              <div class="preview-field"><span class="preview-label">EEFC Account</span><span class="preview-value"><span class="preview-badge preview-badge--verified">Required</span></span></div>
+              <div class="preview-field">
+                <span class="preview-label">EEFC Account</span
+                ><span class="preview-value"><span class="preview-badge preview-badge--verified">Required</span></span>
+              </div>
             }
             @if (entityClassificationData.importexport.femaDeclarationObtained) {
-              <div class="preview-field"><span class="preview-label">FEMA Declaration</span><span class="preview-value"><span class="preview-badge preview-badge--verified">Obtained</span></span></div>
+              <div class="preview-field">
+                <span class="preview-label">FEMA Declaration</span
+                ><span class="preview-value"><span class="preview-badge preview-badge--verified">Obtained</span></span>
+              </div>
             }
           </div>
         </div>
@@ -735,22 +927,40 @@
         <div class="card-body">
           <div class="preview-grid">
             @if (entityClassificationData.psl.pslCategory) {
-              <div class="preview-field"><span class="preview-label">PSL Category</span><span class="preview-value">{{ entityClassificationData.psl.pslCategory }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">PSL Category</span
+                ><span class="preview-value">{{ entityClassificationData.psl.pslCategory }}</span>
+              </div>
             }
             @if (entityClassificationData.psl.pslSubCategory) {
-              <div class="preview-field"><span class="preview-label">PSL Sub-category</span><span class="preview-value">{{ entityClassificationData.psl.pslSubCategory }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">PSL Sub-category</span
+                ><span class="preview-value">{{ entityClassificationData.psl.pslSubCategory }}</span>
+              </div>
             }
             @if (entityClassificationData.psl.pslSanctionedLimit) {
-              <div class="preview-field"><span class="preview-label">Sanctioned Limit</span><span class="preview-value">₹ {{ entityClassificationData.psl.pslSanctionedLimit | number }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Sanctioned Limit</span
+                ><span class="preview-value">₹ {{ entityClassificationData.psl.pslSanctionedLimit | number }}</span>
+              </div>
             }
             @if (entityClassificationData.psl.fiddReportingCode) {
-              <div class="preview-field"><span class="preview-label">FIDD Reporting Code</span><span class="preview-value mono">{{ entityClassificationData.psl.fiddReportingCode }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">FIDD Reporting Code</span
+                ><span class="preview-value mono">{{ entityClassificationData.psl.fiddReportingCode }}</span>
+              </div>
             }
             @if (entityClassificationData.psl.weakerSectionFlag) {
-              <div class="preview-field"><span class="preview-label">Weaker Section</span><span class="preview-value"><span class="preview-badge preview-badge--verified">Yes</span></span></div>
+              <div class="preview-field">
+                <span class="preview-label">Weaker Section</span
+                ><span class="preview-value"><span class="preview-badge preview-badge--verified">Yes</span></span>
+              </div>
             }
             @if (entityClassificationData.psl.womenEntrepreneurFlag) {
-              <div class="preview-field"><span class="preview-label">Women Entrepreneur</span><span class="preview-value"><span class="preview-badge preview-badge--verified">Yes</span></span></div>
+              <div class="preview-field">
+                <span class="preview-label">Women Entrepreneur</span
+                ><span class="preview-value"><span class="preview-badge preview-badge--verified">Yes</span></span>
+              </div>
             }
           </div>
         </div>
@@ -767,25 +977,46 @@
         <div class="card-body">
           <div class="preview-grid">
             @if (entityClassificationData.nps.industrySector) {
-              <div class="preview-field"><span class="preview-label">Industry Sector</span><span class="preview-value">{{ entityClassificationData.nps.industrySector }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Industry Sector</span
+                ><span class="preview-value">{{ entityClassificationData.nps.industrySector }}</span>
+              </div>
             }
             @if (entityClassificationData.nps.nicCode) {
-              <div class="preview-field"><span class="preview-label">NIC Code</span><span class="preview-value mono">{{ entityClassificationData.nps.nicCode }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">NIC Code</span
+                ><span class="preview-value mono">{{ entityClassificationData.nps.nicCode }}</span>
+              </div>
             }
             @if (entityClassificationData.nps.annualRevenueBand) {
-              <div class="preview-field"><span class="preview-label">Annual Revenue Band</span><span class="preview-value">{{ entityClassificationData.nps.annualRevenueBand }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Annual Revenue Band</span
+                ><span class="preview-value">{{ entityClassificationData.nps.annualRevenueBand }}</span>
+              </div>
             }
             @if (entityClassificationData.nps.riskCategory) {
-              <div class="preview-field"><span class="preview-label">Risk Category</span><span class="preview-value">{{ entityClassificationData.nps.riskCategory }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">Risk Category</span
+                ><span class="preview-value">{{ entityClassificationData.nps.riskCategory }}</span>
+              </div>
             }
             @if (entityClassificationData.nps.amlRiskClassification) {
-              <div class="preview-field"><span class="preview-label">AML Risk</span><span class="preview-value">{{ entityClassificationData.nps.amlRiskClassification }}</span></div>
+              <div class="preview-field">
+                <span class="preview-label">AML Risk</span
+                ><span class="preview-value">{{ entityClassificationData.nps.amlRiskClassification }}</span>
+              </div>
             }
             @if (entityClassificationData.nps.pepFlag) {
-              <div class="preview-field"><span class="preview-label">PEP Flag</span><span class="preview-value"><span class="preview-badge preview-badge--danger">PEP</span></span></div>
+              <div class="preview-field">
+                <span class="preview-label">PEP Flag</span
+                ><span class="preview-value"><span class="preview-badge preview-badge--danger">PEP</span></span>
+              </div>
             }
             @if (entityClassificationData.nps.amlWatchlistMatch) {
-              <div class="preview-field"><span class="preview-label">AML Watchlist</span><span class="preview-value"><span class="preview-badge preview-badge--danger">Match Found</span></span></div>
+              <div class="preview-field">
+                <span class="preview-label">AML Watchlist</span
+                ><span class="preview-value"><span class="preview-badge preview-badge--danger">Match Found</span></span>
+              </div>
             }
           </div>
         </div>
@@ -793,58 +1024,64 @@
     }
   }
 
-
   <!-- Family Members (Individual only) -->
   @if (client?.legalFormId !== 2) {
-  <div class="info-card">
-    <div class="card-header">
-      <fa-icon icon="users" class="card-icon"></fa-icon>
-      <span>Family Members</span>
-      @if (familyMembers.length > 0) {
-        <span class="count-badge">{{ familyMembers.length }}</span>
-      }
-    </div>
-    <div class="card-body">
-      @if (familyMembers.length === 0) {
-        <div class="preview-empty preview-empty--warn">
-          <mat-icon class="preview-empty__icon">warning</mat-icon>
-          <span>No family members added. At least one is required.</span>
-        </div>
-      } @else {
-        <div class="fm-preview-list">
-          @for (member of familyMembers; track member; let i = $index) {
-            <div class="fm-preview-row">
-              <div class="fm-preview-row__sno">{{ i + 1 }}</div>
-              <div class="fm-preview-row__avatar">
-                <mat-icon>person</mat-icon>
-              </div>
-              <div class="fm-preview-row__info">
-                <span class="fm-preview-row__name">{{ member.firstName || member.displayName }}</span>
-                <span class="fm-preview-row__meta">
-                  @if (member.relationship) { {{ member.relationship }} }
-                  @if (member.dateOfBirth) { &middot; DOB: {{ member.dateOfBirth }} }
-                </span>
-              </div>
-              @if (member.aadhaarNumber || member.panNumber) {
-                <div class="fm-preview-row__ids">
-                  @if (member.panNumber) { <span class="fm-preview-id">PAN: {{ member.panNumber }}</span> }
-                  @if (member.aadhaarNumber) { <span class="fm-preview-id">Aadhaar: {{ member.aadhaarNumber }}</span> }
+    <div class="info-card">
+      <div class="card-header">
+        <fa-icon icon="users" class="card-icon"></fa-icon>
+        <span>Family Members</span>
+        @if (familyMembers.length > 0) {
+          <span class="count-badge">{{ familyMembers.length }}</span>
+        }
+      </div>
+      <div class="card-body">
+        @if (familyMembers.length === 0) {
+          <div class="preview-empty preview-empty--warn">
+            <mat-icon class="preview-empty__icon">warning</mat-icon>
+            <span>No family members added. At least one is required.</span>
+          </div>
+        } @else {
+          <div class="fm-preview-list">
+            @for (member of familyMembers; track member; let i = $index) {
+              <div class="fm-preview-row">
+                <div class="fm-preview-row__sno">{{ i + 1 }}</div>
+                <div class="fm-preview-row__avatar">
+                  <mat-icon>person</mat-icon>
                 </div>
-              }
-              <div class="fm-preview-row__status">
-                @if (member.isDependent) {
-                  <span class="preview-badge preview-badge--info">Dependent</span>
-                }
-                @if (member.linkedClientId) {
-                  <span class="preview-badge preview-badge--verified">Linked</span>
+                <div class="fm-preview-row__info">
+                  <span class="fm-preview-row__name">{{ member.firstName || member.displayName }}</span>
+                  <span class="fm-preview-row__meta">
+                    @if (member.relationship) {
+                      {{ member.relationship }}
+                    }
+                    @if (member.dateOfBirth) {
+                      &middot; DOB: {{ member.dateOfBirth }}
+                    }
+                  </span>
+                </div>
+                @if (member.aadhaarNumber || member.panNumber) {
+                  <div class="fm-preview-row__ids">
+                    @if (member.panNumber) {
+                      <span class="fm-preview-id">PAN: {{ member.panNumber }}</span>
+                    }
+                    @if (member.aadhaarNumber) {
+                      <span class="fm-preview-id">Aadhaar: {{ member.aadhaarNumber }}</span>
+                    }
+                  </div>
                 }
+                <div class="fm-preview-row__status">
+                  @if (member.isDependent) {
+                    <span class="preview-badge preview-badge--info">Dependent</span>
+                  }
+                  @if (member.linkedClientId) {
+                    <span class="preview-badge preview-badge--verified">Linked</span>
+                  }
+                </div>
               </div>
-            </div>
-          }
-        </div>
-      }
+            }
+          </div>
+        }
+      </div>
     </div>
-  </div>
   }
-
 </div>

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.ts

@@ -73,9 +73,22 @@ export class ClientPreviewStepComponent {
   @Input() maritalStatusId: number | null = null;
   /** Marital Status Options */
   @Input() maritalStatusOptions: any[] = [];
+  /** Education Level Options */
+  @Input() educationLevelOptions: any[] = [];
+  /** Degree / Qualification Options */
+  @Input() degreeQualificationOptions: any[] = [];
+  /** Religion Options */
+  @Input() religionOptions: any[] = [];
+  /** Social Category Options */
+  @Input() socialCategoryOptions: any[] = [];
 
   /** Address tab labels */
-  addressTabs = ['permanent', 'current', 'office', 'correspondence'];
+  addressTabs = [
+    'permanent',
+    'current',
+    'office',
+    'correspondence'
+  ];
   addressTabLabels: Record<string, string> = {
     permanent: 'Permanent Address',
     current: 'Current / Residential',

src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.html

@@ -7,7 +7,6 @@
 -->
 
 <div class="personal-data-container mat-typography">
-
   <!-- Personal Information -->
   <div class="pd-section">
     <div class="pd-section__header">
@@ -50,13 +49,15 @@
           @if (clientViewData.dateOfBirth) {
             <div class="pd-field">
               <div class="pd-field__label">{{ 'labels.inputs.Date of Birth' | translate }}</div>
-              <div class="pd-field__value">{{ clientViewData.dateOfBirth | dateFormat:'DD-MMMM-YYYY' }}</div>
+              <div class="pd-field__value">{{ clientViewData.dateOfBirth | dateFormat: 'DD-MMMM-YYYY' }}</div>
             </div>
           }
           @if (clientViewData.ageYears != null) {
             <div class="pd-field">
               <div class="pd-field__label">Age</div>
-              <div class="pd-field__value">{{ clientViewData.ageYears }}y {{ clientViewData.ageMonths || 0 }}m {{ clientViewData.ageDays || 0 }}d</div>
+              <div class="pd-field__value">
+                {{ clientViewData.ageYears }}y {{ clientViewData.ageMonths || 0 }}m {{ clientViewData.ageDays || 0 }}d
+              </div>
             </div>
           }
           @if (clientViewData.gender) {
@@ -71,11 +72,39 @@
               <div class="pd-field__value">{{ clientViewData.maritalStatus.name }}</div>
             </div>
           }
+          @if (clientViewData.educationLevel) {
+            <div class="pd-field">
+              <div class="pd-field__label">Education Level</div>
+              <div class="pd-field__value">{{ clientViewData.educationLevel.name }}</div>
+            </div>
+          }
+          @if (clientViewData.degreeQualification) {
+            <div class="pd-field">
+              <div class="pd-field__label">Degree / Qualification</div>
+              <div class="pd-field__value">{{ clientViewData.degreeQualification.name }}</div>
+            </div>
+          }
+          @if (clientViewData.religion) {
+            <div class="pd-field">
+              <div class="pd-field__label">Religion</div>
+              <div class="pd-field__value">{{ clientViewData.religion.name }}</div>
+            </div>
+          }
+          @if (clientViewData.socialCategory) {
+            <div class="pd-field">
+              <div class="pd-field__label">Social Category</div>
+              <div class="pd-field__value">{{ clientViewData.socialCategory.name }}</div>
+            </div>
+          }
           @if (clientViewData.isMinor != null) {
             <div class="pd-field">
               <div class="pd-field__label">Minor</div>
               <div class="pd-field__value">
-                <span class="pd-verify-badge" [class.pd-verify-badge--verified]="!clientViewData.isMinor" [class.pd-verify-badge--pending]="clientViewData.isMinor">
+                <span
+                  class="pd-verify-badge"
+                  [class.pd-verify-badge--verified]="!clientViewData.isMinor"
+                  [class.pd-verify-badge--pending]="clientViewData.isMinor"
+                >
                   {{ clientViewData.isMinor ? 'Yes (Age < 10)' : 'No' }}
                 </span>
               </div>
@@ -84,7 +113,11 @@
           <div class="pd-field">
             <div class="pd-field__label">{{ 'labels.inputs.Is staff' | translate }}</div>
             <div class="pd-field__value">
-              <span class="pd-verify-badge" [class.pd-verify-badge--verified]="clientViewData.isStaff" [class.pd-verify-badge--pending]="!clientViewData.isStaff">
+              <span
+                class="pd-verify-badge"
+                [class.pd-verify-badge--verified]="clientViewData.isStaff"
+                [class.pd-verify-badge--pending]="!clientViewData.isStaff"
+              >
                 {{ clientViewData.isStaff ? 'Yes' : 'No' }}
               </span>
             </div>
@@ -100,7 +133,7 @@
           @if (clientViewData.dateOfBirth) {
             <div class="pd-field">
               <div class="pd-field__label">{{ 'labels.inputs.Incorporation Date' | translate }}</div>
-              <div class="pd-field__value">{{ clientViewData.dateOfBirth | dateFormat:'DD-MM-YYYY' }}</div>
+              <div class="pd-field__value">{{ clientViewData.dateOfBirth | dateFormat: 'DD-MM-YYYY' }}</div>
             </div>
           }
         }
@@ -112,7 +145,9 @@
         }
         <div class="pd-field">
           <div class="pd-field__label">Nationality</div>
-          <div class="pd-field__value">{{ clientViewData.nationalityId || clientViewData.nationality || 'Indian' }}</div>
+          <div class="pd-field__value">
+            {{ clientViewData.nationalityId || clientViewData.nationality || 'Indian' }}
+          </div>
         </div>
       </div>
     </div>
@@ -176,7 +211,9 @@
           @if (clientViewData.clientNonPersonDetails.incorpValidityTillDate) {
             <div class="pd-field">
               <div class="pd-field__label">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</div>
-              <div class="pd-field__value">{{ clientViewData.clientNonPersonDetails.incorpValidityTillDate | dateFormat:'DD-MM-YYYY' }}</div>
+              <div class="pd-field__value">
+                {{ clientViewData.clientNonPersonDetails.incorpValidityTillDate | dateFormat: 'DD-MM-YYYY' }}
+              </div>
             </div>
           }
           @if (clientViewData.clientNonPersonDetails.incorpNumber) {
@@ -221,7 +258,9 @@
         <div class="pd-field">
           <div class="pd-field__label">{{ 'labels.inputs.Email' | translate }}</div>
           <div class="pd-field__value">
-            <span class="pd-contact-icon"><i class="fa fa-envelope-o"></i> {{ clientViewData.emailAddress || '-' }}</span>
+            <span class="pd-contact-icon"
+              ><i class="fa fa-envelope-o"></i> {{ clientViewData.emailAddress || '-' }}</span
+            >
           </div>
         </div>
       </div>
@@ -240,15 +279,19 @@
         <div class="pd-field">
           <div class="pd-field__label">Mobile DIP Status</div>
           <div class="pd-field__value">
-            @if (clientViewData.mobileVerified === true || clientViewData.mobileVerified === 'true' || clientViewData.mobileVerified === 1
-              || clientViewData.dipVerified === true || clientViewData.dipVerified === 'true' || clientViewData.dipVerified === 1) {
+            @if (
+              clientViewData.mobileVerified === true ||
+              clientViewData.mobileVerified === 'true' ||
+              clientViewData.mobileVerified === 1 ||
+              clientViewData.dipVerified === true ||
+              clientViewData.dipVerified === 'true' ||
+              clientViewData.dipVerified === 1
+            ) {
               <span class="pd-verify-badge pd-verify-badge--verified">
                 <i class="fa fa-check-circle"></i> Verified
               </span>
             } @else {
-              <span class="pd-verify-badge pd-verify-badge--pending">
-                <i class="fa fa-clock-o"></i> Pending
-              </span>
+              <span class="pd-verify-badge pd-verify-badge--pending"> <i class="fa fa-clock-o"></i> Pending </span>
             }
           </div>
         </div>
@@ -258,26 +301,21 @@
             <div class="pd-field__value monospace">{{ formatDateTime(clientViewData.dipTimestamp) }}</div>
           </div>
         }
-        @if (clientViewData.dipLookupLogId) {
-          <div class="pd-field">
-            <div class="pd-field__label">DIP Lookup Log ID</div>
-            <div class="pd-field__value monospace">{{ clientViewData.dipLookupLogId }}</div>
-          </div>
-        }
-
         <!-- Alternate Mobile DIP -->
         @if (clientViewData.alternateMobileNo) {
           <div class="pd-field">
             <div class="pd-field__label">Alternate Mobile DIP Status</div>
             <div class="pd-field__value">
-              @if (clientViewData.alternateDipVerified === true || clientViewData.alternateDipVerified === 'true' || clientViewData.alternateDipVerified === 1) {
+              @if (
+                clientViewData.alternateDipVerified === true ||
+                clientViewData.alternateDipVerified === 'true' ||
+                clientViewData.alternateDipVerified === 1
+              ) {
                 <span class="pd-verify-badge pd-verify-badge--verified">
                   <i class="fa fa-check-circle"></i> Verified
                 </span>
               } @else {
-                <span class="pd-verify-badge pd-verify-badge--pending">
-                  <i class="fa fa-clock-o"></i> Pending
-                </span>
+                <span class="pd-verify-badge pd-verify-badge--pending"> <i class="fa fa-clock-o"></i> Pending </span>
               }
             </div>
           </div>
@@ -287,93 +325,91 @@
               <div class="pd-field__value monospace">{{ formatDateTime(clientViewData.alternateDipTimestamp) }}</div>
             </div>
           }
-          @if (clientViewData.alternateDipLookupLogId) {
-            <div class="pd-field">
-              <div class="pd-field__label">Alternate DIP Log ID</div>
-              <div class="pd-field__value monospace">{{ clientViewData.alternateDipLookupLogId }}</div>
-            </div>
-          }
         }
 
         <!-- Sanctions / Name Screening -->
         <div class="pd-field">
           <div class="pd-field__label">Name Screening (Sanctions)</div>
           <div class="pd-field__value">
-            @if (clientViewData.nameVerified === true || clientViewData.nameVerified === 'true' || clientViewData.nameVerified === 1) {
+            @if (
+              clientViewData.nameVerified === true ||
+              clientViewData.nameVerified === 'true' ||
+              clientViewData.nameVerified === 1
+            ) {
               <span class="pd-verify-badge pd-verify-badge--verified"><i class="fa fa-check-circle"></i> Clear</span>
-            } @else if (clientViewData.nameVerified === false || clientViewData.nameVerified === 'false' || clientViewData.nameVerified === 0) {
-              <span class="pd-verify-badge pd-verify-badge--danger"><i class="fa fa-exclamation-triangle"></i> Match Found</span>
+            } @else if (
+              clientViewData.nameVerified === false ||
+              clientViewData.nameVerified === 'false' ||
+              clientViewData.nameVerified === 0
+            ) {
+              <span class="pd-verify-badge pd-verify-badge--danger"
+                ><i class="fa fa-exclamation-triangle"></i> Match Found</span
+              >
             } @else {
               <span class="pd-verify-badge pd-verify-badge--pending"><i class="fa fa-clock-o"></i> Pending</span>
             }
           </div>
         </div>
-        @if (clientViewData.screeningLogId) {
-          <div class="pd-field">
-            <div class="pd-field__label">Screening Log ID</div>
-            <div class="pd-field__value monospace">{{ clientViewData.screeningLogId }}</div>
-          </div>
-        }
       </div>
     </div>
   </div>
 
   <!-- Financial & Classification (Individual only) -->
   @if (clientViewData?.legalForm?.id !== 2) {
-  <div class="pd-section">
-    <div class="pd-section__header">
-      <i class="fa fa-chart-line"></i>
-      <h3>Financial &amp; Classification</h3>
-    </div>
-    <div class="pd-section__body">
-      <div class="pd-grid">
-        <div class="pd-field">
-          <div class="pd-field__label">Monthly Income</div>
-          <div class="pd-field__value">
-            @if (clientViewData.monthlyIncome != null && clientViewData.monthlyIncome !== '') {
-              <span class="monospace">&#8377; {{ clientViewData.monthlyIncome | number }}</span>
-            } @else {
-              -
-            }
+    <div class="pd-section">
+      <div class="pd-section__header">
+        <i class="fa fa-chart-line"></i>
+        <h3>Financial &amp; Classification</h3>
+      </div>
+      <div class="pd-section__body">
+        <div class="pd-grid">
+          <div class="pd-field">
+            <div class="pd-field__label">Monthly Income</div>
+            <div class="pd-field__value">
+              @if (clientViewData.monthlyIncome != null && clientViewData.monthlyIncome !== '') {
+                <span class="monospace">&#8377; {{ clientViewData.monthlyIncome | number }}</span>
+              } @else {
+                -
+              }
+            </div>
           </div>
+          <div class="pd-field">
+            <div class="pd-field__label">Annual Turnover (Last FY)</div>
+            <div class="pd-field__value">
+              @if (clientViewData.annualTurnover != null && clientViewData.annualTurnover !== '') {
+                <span class="monospace">&#8377; {{ clientViewData.annualTurnover | number }}</span>
+              } @else {
+                -
+              }
+            </div>
+          </div>
+          @if (clientViewData.clientType) {
+            <div class="pd-field">
+              <div class="pd-field__label">{{ 'labels.inputs.Client Type' | translate }}</div>
+              <div class="pd-field__value">{{ clientViewData.clientType.name }}</div>
+            </div>
+          }
+          @if (clientViewData.clientClassification) {
+            <div class="pd-field">
+              <div class="pd-field__label">{{ 'labels.inputs.Client Classification' | translate }}</div>
+              <div class="pd-field__value">{{ clientViewData.clientClassification.name }}</div>
+            </div>
+          }
+          @if (clientViewData.occupationCategory) {
+            <div class="pd-field">
+              <div class="pd-field__label">{{ 'labels.inputs.Occupation Category' | translate }}</div>
+              <div class="pd-field__value">{{ clientViewData.occupationCategory.name }}</div>
+            </div>
+          }
+          @if (clientViewData.occupation) {
+            <div class="pd-field">
+              <div class="pd-field__label">{{ 'labels.inputs.Occupation' | translate }}</div>
+              <div class="pd-field__value">{{ clientViewData.occupation.name }}</div>
+            </div>
+          }
         </div>
-        <div class="pd-field">
-          <div class="pd-field__label">Annual Turnover (Last FY)</div>
-          <div class="pd-field__value">
-            @if (clientViewData.annualTurnover != null && clientViewData.annualTurnover !== '') {
-              <span class="monospace">&#8377; {{ clientViewData.annualTurnover | number }}</span>
-            } @else {
-              -
-            }
-          </div>
-        </div>
-        @if (clientViewData.clientType) {
-          <div class="pd-field">
-            <div class="pd-field__label">{{ 'labels.inputs.Client Type' | translate }}</div>
-            <div class="pd-field__value">{{ clientViewData.clientType.name }}</div>
-          </div>
-        }
-        @if (clientViewData.clientClassification) {
-          <div class="pd-field">
-            <div class="pd-field__label">{{ 'labels.inputs.Client Classification' | translate }}</div>
-            <div class="pd-field__value">{{ clientViewData.clientClassification.name }}</div>
-          </div>
-        }
-        @if (clientViewData.occupationCategory) {
-          <div class="pd-field">
-            <div class="pd-field__label">{{ 'labels.inputs.Occupation Category' | translate }}</div>
-            <div class="pd-field__value">{{ clientViewData.occupationCategory.name }}</div>
-          </div>
-        }
-        @if (clientViewData.occupation) {
-          <div class="pd-field">
-            <div class="pd-field__label">{{ 'labels.inputs.Occupation' | translate }}</div>
-            <div class="pd-field__value">{{ clientViewData.occupation.name }}</div>
-          </div>
-        }
       </div>
     </div>
-  </div>
   }
 
   <!-- Guardian Details (Minor) -->
@@ -436,19 +472,19 @@
         @if (clientViewData.timeline?.submittedOnDate) {
           <div class="pd-field">
             <div class="pd-field__label">{{ 'labels.inputs.Submitted On' | translate }}</div>
-            <div class="pd-field__value">{{ clientViewData.timeline.submittedOnDate | dateFormat:'DD-MM-YYYY' }}</div>
+            <div class="pd-field__value">{{ clientViewData.timeline.submittedOnDate | dateFormat: 'DD-MM-YYYY' }}</div>
           </div>
         }
         @if (clientViewData.activationDate) {
           <div class="pd-field">
             <div class="pd-field__label">{{ 'labels.inputs.Activation Date' | translate }}</div>
-            <div class="pd-field__value">{{ clientViewData.activationDate | dateFormat:'DD-MM-YYYY' }}</div>
+            <div class="pd-field__value">{{ clientViewData.activationDate | dateFormat: 'DD-MM-YYYY' }}</div>
           </div>
         }
         @if (clientViewData.timeline?.closedOnDate) {
           <div class="pd-field">
             <div class="pd-field__label">{{ 'labels.inputs.Closed Date' | translate }}</div>
-            <div class="pd-field__value">{{ clientViewData.timeline.closedOnDate | dateFormat:'DD-MM-YYYY' }}</div>
+            <div class="pd-field__value">{{ clientViewData.timeline.closedOnDate | dateFormat: 'DD-MM-YYYY' }}</div>
           </div>
         }
       </div>
@@ -467,10 +503,14 @@
           <div class="pd-field">
             <div class="pd-field__label">{{ 'labels.inputs.Client Status' | translate }}</div>
             <div class="pd-field__value">
-              <span class="pd-field__value status-badge"
+              <span
+                class="pd-field__value status-badge"
                 [class.status-active]="clientViewData.status.value === 'Active'"
                 [class.status-closed]="clientViewData.status.value === 'Closed'"
-                [class.status-pending]="clientViewData.status.value !== 'Active' && clientViewData.status.value !== 'Closed'">
+                [class.status-pending]="
+                  clientViewData.status.value !== 'Active' && clientViewData.status.value !== 'Closed'
+                "
+              >
                 {{ 'labels.status.' + clientViewData.status.value | translate }}
               </span>
             </div>
@@ -485,5 +525,4 @@
       </div>
     </div>
   </div>
-
 </div>

src/app/clients/clients.component.html

@@ -74,7 +74,6 @@
           <mat-option value="pending">CKYC Pending</mat-option>
         </mat-select>
       </mat-form-field>
-
     </div>
   </div>
 
@@ -89,7 +88,9 @@
       <ng-container matColumnDef="displayName">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
         <td mat-cell *matCellDef="let row" class="cell-link">
-          <mat-icon class="row-legal-icon" [ngClass]="row.legalForm?.id === 2 ? 'entity' : 'person'">{{ row.legalForm?.id === 2 ? 'business' : 'person' }}</mat-icon>
+          <mat-icon class="row-legal-icon" [ngClass]="row.legalForm?.id === 2 ? 'entity' : 'person'">{{
+            row.legalForm?.id === 2 ? 'business' : 'person'
+          }}</mat-icon>
           {{ hideClientData ? maskName(row.displayName) : row.displayName }}
           @if (row._ckycDone) {
             <mat-icon class="row-ckyc-icon" matTooltip="CKYC Done">verified</mat-icon>
@@ -111,18 +112,6 @@
         <td mat-cell *matCellDef="let row" class="cell-mono">{{ row.cifNumber }}</td>
       </ng-container>
 
-      <!-- CKYC Number Column -->
-      <ng-container matColumnDef="ckycNumber">
-        <th mat-header-cell *matHeaderCellDef>CKYC Number</th>
-        <td mat-cell *matCellDef="let row" class="cell-mono">
-          @if (row._ckycNumber) {
-            {{ row._ckycNumber }}
-          } @else {
-            <span class="ckyc-pending">—</span>
-          }
-        </td>
-      </ng-container>
-
       <!-- Legal Form Column -->
       <ng-container matColumnDef="legalForm">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Legal Form' | translate }}</th>
@@ -149,7 +138,11 @@
         <td mat-cell *matCellDef="let row">
           <div class="profile-steps">
             @for (step of getProfileSteps(row); track step.label) {
-              <span class="step-dot" [class.done]="step.done" [matTooltip]="step.label + (step.done ? ' ✓' : ' — Pending')">
+              <span
+                class="step-dot"
+                [class.done]="step.done"
+                [matTooltip]="step.label + (step.done ? ' ✓' : ' — Pending')"
+              >
                 {{ step.label.charAt(0) }}
               </span>
             }
@@ -157,12 +150,6 @@
         </td>
       </ng-container>
 
-      <!-- Office Column -->
-      <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Office Name' | translate }}</th>
-        <td mat-cell *matCellDef="let row">{{ row.officeName }}</td>
-      </ng-container>
-
       <!-- Actions Column -->
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>

src/app/clients/clients.component.ts

@@ -90,11 +90,9 @@ export class ClientsComponent implements OnInit {
     'displayName',
     'accountNumber',
     'cifNumber',
-    'ckycNumber',
     'legalForm',
     'status',
     'profileCompletion',
-    'officeName',
     'actions'
   ];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
@@ -167,34 +165,37 @@ export class ClientsComponent implements OnInit {
 
     // Use individual subscriptions instead of forkJoin to avoid EMPTY observable issues
     clients.forEach((client, i) => {
-      this.clientService.getClientData(client.id?.toString()).pipe(
-        catchError(() => of(null))
-      ).subscribe((data: any) => {
-        if (data?.legalForm) {
-          clients[i].legalForm = data.legalForm;
-          this.applyClientFilters();
-        }
-      });
+      this.clientService
+        .getClientData(client.id?.toString())
+        .pipe(catchError(() => of(null)))
+        .subscribe((data: any) => {
+          if (data?.legalForm) {
+            clients[i].legalForm = data.legalForm;
+            this.applyClientFilters();
+          }
+        });
 
-      this.clientService.getClientKyc(client.id?.toString()).pipe(
-        catchError(() => of(null))
-      ).subscribe((kyc: any) => {
-        if (kyc) {
-          clients[i]._kycDone = kyc.kycStatus === 300;
-          clients[i]._ckycDone = !!kyc.ckycNumber;
-          clients[i]._ckycNumber = kyc.ckycNumber || '';
-          this.applyClientFilters();
-        }
-      });
+      this.clientService
+        .getClientKyc(client.id?.toString())
+        .pipe(catchError(() => of(null)))
+        .subscribe((kyc: any) => {
+          if (kyc) {
+            clients[i]._kycDone = kyc.kycStatus === 300;
+            clients[i]._ckycDone = !!kyc.ckycNumber;
+            clients[i]._ckycNumber = kyc.ckycNumber || '';
+            this.applyClientFilters();
+          }
+        });
 
-      this.clientService.getClientAddressData(client.id?.toString()).pipe(
-        catchError(() => of(null))
-      ).subscribe((addr: any) => {
-        if (addr && Array.isArray(addr) && addr.length > 0) {
-          clients[i]._addressDone = true;
-          this.applyClientFilters();
-        }
-      });
+      this.clientService
+        .getClientAddressData(client.id?.toString())
+        .pipe(catchError(() => of(null)))
+        .subscribe((addr: any) => {
+          if (addr && Array.isArray(addr) && addr.length > 0) {
+            clients[i]._addressDone = true;
+            this.applyClientFilters();
+          }
+        });
     });
   }
 
@@ -255,7 +256,7 @@ export class ClientsComponent implements OnInit {
   }
 
   getCompletedCount(row: any): number {
-    return this.getProfileSteps(row).filter(s => s.done).length;
+    return this.getProfileSteps(row).filter((s) => s.done).length;
   }
 
   private resetPaginator() {

src/app/clients/create-client/create-client.component.html

@@ -12,7 +12,12 @@
     <h2>{{ 'labels.heading.Create Client' | translate }}</h2>
   </div>
 
-  <mat-tab-group class="client-tabs" animationDuration="200ms" [preserveContent]="true" [(selectedIndex)]="selectedTabIndex">
+  <mat-tab-group
+    class="client-tabs"
+    animationDuration="200ms"
+    [preserveContent]="true"
+    [(selectedIndex)]="selectedTabIndex"
+  >
     <!-- Tab 1: General Details -->
     <mat-tab>
       <ng-template mat-tab-label>
@@ -62,7 +67,8 @@
           </div>
         }
         <div class="tab-section">
-          <mifosx-client-kyc-step #clientKyc
+          <mifosx-client-kyc-step
+            #clientKyc
             [isNonIndividual]="legalFormType === 2"
             [clientId]="createdClientId"
             [constitutionMeta]="clientGeneralStep?.selectedConstitution"
@@ -127,13 +133,18 @@
                 <mat-icon>edit</mat-icon> Edit
               </button>
             } @else {
-              <button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(addressTabIdx)">
+              <button
+                mat-stroked-button
+                class="tab-mode-btn tab-mode-btn--cancel"
+                (click)="cancelTabEdit(addressTabIdx)"
+              >
                 <mat-icon>close</mat-icon> Cancel
               </button>
             }
           </div>
         }
-        <mifosx-client-india-address-step #clientIndiaAddress
+        <mifosx-client-india-address-step
+          #clientIndiaAddress
           [readOnly]="isTabReadOnly(addressTabIdx)"
         ></mifosx-client-india-address-step>
       </div>
@@ -155,13 +166,18 @@
                   <mat-icon>edit</mat-icon> Edit
                 </button>
               } @else {
-                <button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(familyTabIdx)">
+                <button
+                  mat-stroked-button
+                  class="tab-mode-btn tab-mode-btn--cancel"
+                  (click)="cancelTabEdit(familyTabIdx)"
+                >
                   <mat-icon>close</mat-icon> Cancel
                 </button>
               }
             </div>
           }
-          <mifosx-client-family-members-step #clientFamilyMembers
+          <mifosx-client-family-members-step
+            #clientFamilyMembers
             [clientTemplate]="clientTemplate"
             [clientId]="createdClientId"
             [maritalStatusId]="clientGeneralStep?.createClientForm?.get('maritalStatusId')?.value"
@@ -191,6 +207,10 @@
           [familyMembers]="clientFamilyMembersStep?.clientFamilyMembers || []"
           [maritalStatusId]="clientGeneralStep?.createClientForm?.get('maritalStatusId')?.value"
           [maritalStatusOptions]="clientGeneralStep?.maritalStatusOptions || []"
+          [educationLevelOptions]="clientGeneralStep?.educationLevelOptions || []"
+          [degreeQualificationOptions]="clientGeneralStep?.degreeQualificationOptions || []"
+          [religionOptions]="clientGeneralStep?.religionOptions || []"
+          [socialCategoryOptions]="clientGeneralStep?.socialCategoryOptions || []"
           (submitEvent)="submit()"
         ></mifosx-client-preview-step>
       </div>
@@ -220,9 +240,19 @@
       }
       @if (selectedTabIndex < totalTabs - 1) {
         <div class="save-next-wrapper">
-          <button mat-raised-button color="primary" class="save-next-btn" (click)="onNext()" [disabled]="savingClient || (selectedTabIndex === 0 && clientGeneralStep?.sanctionsBlocked)">
+          <button
+            mat-raised-button
+            color="primary"
+            class="save-next-btn"
+            (click)="onNext()"
+            [disabled]="savingClient || (selectedTabIndex === 0 && clientGeneralStep?.sanctionsBlocked)"
+          >
             @if (savingClient) {
-              <mat-progress-spinner diameter="18" mode="indeterminate" class="m-r-10 save-spinner"></mat-progress-spinner>
+              <mat-progress-spinner
+                diameter="18"
+                mode="indeterminate"
+                class="m-r-10 save-spinner"
+              ></mat-progress-spinner>
               Saving...
             } @else {
               <mat-icon class="m-r-6">save</mat-icon>

src/app/clients/create-client/create-client.component.ts

@@ -198,6 +198,26 @@ export class CreateClientComponent {
         return;
       }
 
+      // Sanctions verification gate — Verify Client must be clicked before save
+      if (!this.clientGeneralStep?.sanctionsVerified) {
+        this.dialog
+          .open(VerifyClientAlertDialogComponent, {
+            width: '420px',
+            autoFocus: false
+          })
+          .afterClosed()
+          .subscribe(() => {
+            setTimeout(() => {
+              const verifyBtn = document.querySelector('.verify-name-btn') as HTMLElement;
+              if (verifyBtn) {
+                verifyBtn.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                verifyBtn.focus();
+              }
+            }, 100);
+          });
+        return;
+      }
+
       // Show confirmation dialog
       const dialogRef = this.dialog.open(SaveConfirmDialogComponent, {
         width: '440px',
@@ -236,10 +256,14 @@ export class CreateClientComponent {
       }
       // Upload photo & signature
       if (this.clientKycStep?.photographFile) {
-        this.clientsService.uploadClientProfileImage(clientId, this.clientKycStep.photographFile).subscribe({ error: () => {} });
+        this.clientsService
+          .uploadClientProfileImage(clientId, this.clientKycStep.photographFile)
+          .subscribe({ error: () => {} });
       }
       if (this.clientKycStep?.signatureFile) {
-        this.clientsService.uploadClientSignatureImage(clientId, this.clientKycStep.signatureFile).subscribe({ error: () => {} });
+        this.clientsService
+          .uploadClientSignatureImage(clientId, this.clientKycStep.signatureFile)
+          .subscribe({ error: () => {} });
       }
       return;
     }
@@ -368,16 +392,27 @@ export class CreateClientComponent {
    * Finalize: upload photo/signature, save KYC, save addresses, then navigate.
    */
   private finalizeClient(clientId: string) {
-    const navigateToClient = () => this.router.navigate(['../', clientId], { relativeTo: this.route });
+    const navigateToClient = () =>
+      this.router.navigate(
+        [
+          '../',
+          clientId
+        ],
+        { relativeTo: this.route }
+      );
 
     // Upload photo if selected
     if (this.clientKycStep?.photographFile) {
-      this.clientsService.uploadClientProfileImage(clientId, this.clientKycStep.photographFile).subscribe({ error: () => {} });
+      this.clientsService
+        .uploadClientProfileImage(clientId, this.clientKycStep.photographFile)
+        .subscribe({ error: () => {} });
     }
 
     // Upload signature if selected
     if (this.clientKycStep?.signatureFile) {
-      this.clientsService.uploadClientSignatureImage(clientId, this.clientKycStep.signatureFile).subscribe({ error: () => {} });
+      this.clientsService
+        .uploadClientSignatureImage(clientId, this.clientKycStep.signatureFile)
+        .subscribe({ error: () => {} });
     }
 
     // Save addresses from India address step
@@ -409,16 +444,36 @@ export class CreateClientComponent {
     const addressData = this.clientIndiaAddressStep.addressData;
     // Map tab names to Fineract address type names (as defined in address template)
     const typeNameMap: Record<string, string[]> = {
-      permanent: ['Permanent', 'Permanent Address'],
-      current: ['Residential', 'Current', 'Current / Residential', 'Communication'],
-      office: ['Office', 'Office / Work', 'Business', 'Work'],
-      correspondence: ['Correspondence', 'Mailing', 'Postal']
+      permanent: [
+        'Permanent',
+        'Permanent Address'
+      ],
+      current: [
+        'Residential',
+        'Current',
+        'Current / Residential',
+        'Communication'
+      ],
+      office: [
+        'Office',
+        'Office / Work',
+        'Business',
+        'Work'
+      ],
+      correspondence: [
+        'Correspondence',
+        'Mailing',
+        'Postal'
+      ]
     };
 
     this.clientsService.getClientAddressTemplate().subscribe({
       next: (template: any) => {
         const typeOptions = template?.addressTypeIdOptions || [];
-        for (const [tab, addr] of Object.entries(addressData)) {
+        for (const [
+          tab,
+          addr
+        ] of Object.entries(addressData)) {
           if (!addr || !(addr as any).addressLine1) continue;
 
           // Find matching address type ID
@@ -448,8 +503,8 @@ export class CreateClientComponent {
 
           // Try to resolve state to stateProvinceId
           if ((addr as any).state && template?.stateProvinceIdOptions?.length) {
-            const stateMatch = template.stateProvinceIdOptions.find((s: any) =>
-              s.name?.toLowerCase() === (addr as any).state?.toLowerCase()
+            const stateMatch = template.stateProvinceIdOptions.find(
+              (s: any) => s.name?.toLowerCase() === (addr as any).state?.toLowerCase()
             );
             if (stateMatch) payload.stateProvinceId = stateMatch.id;
           }
@@ -535,34 +590,228 @@ export class CreateClientComponent {
       </div>
     </div>
   `,
-  styles: [`
-    .scd { background: #fff; border-radius: 12px; overflow: hidden; }
-    .scd-header {
-      display: flex; align-items: center; gap: 14px;
-      padding: 20px 24px 16px;
-    }
-    .scd-header__icon-wrap {
-      width: 44px; height: 44px; border-radius: 12px;
-      background: #eff6ff; display: flex; align-items: center; justify-content: center;
-    }
-    .scd-header__icon { color: #1074b9; font-size: 24px; width: 24px; height: 24px; }
-    .scd-header__title { margin: 0; font-size: 17px; font-weight: 700; color: #0f172a; }
-    .scd-header__sub { margin: 2px 0 0; font-size: 12px; color: #64748b; }
-    .scd-body { padding: 0 24px 20px; }
-    .scd-body p { margin: 0 0 14px; font-size: 14px; color: #374151; line-height: 1.5; }
-    .scd-info {
-      display: flex; align-items: flex-start; gap: 8px;
-      padding: 10px 14px; background: #f0f9ff; border: 1px solid #bae6fd;
-      border-radius: 8px; font-size: 12px; color: #0c4a6e;
-    }
-    .scd-info__icon { font-size: 16px !important; width: 16px !important; height: 16px !important; color: #0284c7; flex-shrink: 0; margin-top: 1px; }
-    .scd-actions {
-      display: flex; justify-content: flex-end; gap: 10px;
-      padding: 14px 24px; border-top: 1px solid #f1f5f9; background: #f8fafc;
-    }
-    .scd-cancel, .scd-confirm { display: flex !important; align-items: center; gap: 6px; font-size: 13px !important; height: 38px !important; border-radius: 8px !important; }
-    .scd-confirm { font-weight: 600 !important; }
-  `],
-  imports: [MatIcon, MatDialogClose]
+  styles: [
+    `
+      .scd {
+        background: #fff;
+        border-radius: 12px;
+        overflow: hidden;
+      }
+      .scd-header {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        padding: 20px 24px 16px;
+      }
+      .scd-header__icon-wrap {
+        width: 44px;
+        height: 44px;
+        border-radius: 12px;
+        background: #eff6ff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .scd-header__icon {
+        color: #1074b9;
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+      }
+      .scd-header__title {
+        margin: 0;
+        font-size: 17px;
+        font-weight: 700;
+        color: #0f172a;
+      }
+      .scd-header__sub {
+        margin: 2px 0 0;
+        font-size: 12px;
+        color: #64748b;
+      }
+      .scd-body {
+        padding: 0 24px 20px;
+      }
+      .scd-body p {
+        margin: 0 0 14px;
+        font-size: 14px;
+        color: #374151;
+        line-height: 1.5;
+      }
+      .scd-info {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 10px 14px;
+        background: #f0f9ff;
+        border: 1px solid #bae6fd;
+        border-radius: 8px;
+        font-size: 12px;
+        color: #0c4a6e;
+      }
+      .scd-info__icon {
+        font-size: 16px !important;
+        width: 16px !important;
+        height: 16px !important;
+        color: #0284c7;
+        flex-shrink: 0;
+        margin-top: 1px;
+      }
+      .scd-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+        padding: 14px 24px;
+        border-top: 1px solid #f1f5f9;
+        background: #f8fafc;
+      }
+      .scd-cancel,
+      .scd-confirm {
+        display: flex !important;
+        align-items: center;
+        gap: 6px;
+        font-size: 13px !important;
+        height: 38px !important;
+        border-radius: 8px !important;
+      }
+      .scd-confirm {
+        font-weight: 600 !important;
+      }
+    `
+  ],
+  imports: [
+    MatIcon,
+    MatDialogClose
+  ]
 })
 export class SaveConfirmDialogComponent {}
+
+/**
+ * Verify Client Required Alert Dialog
+ */
+@Component({
+  selector: 'mifosx-verify-client-alert-dialog',
+  template: `
+    <div class="vcad">
+      <div class="vcad-header">
+        <div class="vcad-header__icon-wrap">
+          <mat-icon class="vcad-header__icon">shield</mat-icon>
+        </div>
+        <div>
+          <h3 class="vcad-header__title">Verification Required</h3>
+          <p class="vcad-header__sub">Client name must be screened before saving</p>
+        </div>
+      </div>
+      <div class="vcad-body">
+        <p>
+          Please click <strong>Verify Client</strong> to screen the client name against the UN Security Council
+          Consolidated Sanctions List before proceeding.
+        </p>
+        <div class="vcad-info">
+          <mat-icon class="vcad-info__icon">gavel</mat-icon>
+          <span
+            >RBI KYC Master Direction (2016) — Section 51 &amp; PMLA 2002. Sanctions screening is mandatory before
+            account opening.</span
+          >
+        </div>
+      </div>
+      <div class="vcad-actions">
+        <button mat-flat-button color="primary" [mat-dialog-close]="true" class="vcad-ok">
+          <mat-icon>check</mat-icon>
+          OK, Verify Now
+        </button>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .vcad {
+        background: #fff;
+        border-radius: 12px;
+        overflow: hidden;
+      }
+      .vcad-header {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        padding: 20px 24px 16px;
+      }
+      .vcad-header__icon-wrap {
+        width: 44px;
+        height: 44px;
+        border-radius: 12px;
+        background: #fef3c7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .vcad-header__icon {
+        color: #d97706;
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+      }
+      .vcad-header__title {
+        margin: 0;
+        font-size: 17px;
+        font-weight: 700;
+        color: #0f172a;
+      }
+      .vcad-header__sub {
+        margin: 2px 0 0;
+        font-size: 12px;
+        color: #64748b;
+      }
+      .vcad-body {
+        padding: 0 24px 20px;
+      }
+      .vcad-body p {
+        margin: 0 0 14px;
+        font-size: 14px;
+        color: #374151;
+        line-height: 1.5;
+      }
+      .vcad-info {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 10px 14px;
+        background: #fff7ed;
+        border: 1px solid #fed7aa;
+        border-radius: 8px;
+        font-size: 12px;
+        color: #7c2d12;
+      }
+      .vcad-info__icon {
+        font-size: 16px !important;
+        width: 16px !important;
+        height: 16px !important;
+        color: #d97706;
+        flex-shrink: 0;
+        margin-top: 1px;
+      }
+      .vcad-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+        padding: 14px 24px;
+        border-top: 1px solid #f1f5f9;
+        background: #f8fafc;
+      }
+      .vcad-ok {
+        display: flex !important;
+        align-items: center;
+        gap: 6px;
+        font-size: 13px !important;
+        height: 38px !important;
+        border-radius: 8px !important;
+        font-weight: 600 !important;
+      }
+    `
+  ],
+  imports: [
+    MatIcon,
+    MatDialogClose
+  ]
+})
+export class VerifyClientAlertDialogComponent {}

src/app/clients/edit-client/edit-client.component.html

@@ -180,6 +180,12 @@
           [addressData]="clientIndiaAddressStep?.addressData"
           [guardian]="clientGeneralStep?.selectedGuardian"
           [guardianRelation]="clientGeneralStep?.createClientForm?.get('guardianDetails.guardianRelation')?.value || ''"
+          [maritalStatusId]="clientGeneralStep?.createClientForm?.get('maritalStatusId')?.value"
+          [maritalStatusOptions]="clientGeneralStep?.maritalStatusOptions || []"
+          [educationLevelOptions]="clientGeneralStep?.educationLevelOptions || []"
+          [degreeQualificationOptions]="clientGeneralStep?.degreeQualificationOptions || []"
+          [religionOptions]="clientGeneralStep?.religionOptions || []"
+          [socialCategoryOptions]="clientGeneralStep?.socialCategoryOptions || []"
           (submitEvent)="submit()"
         ></mifosx-client-preview-step>
       </div>