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',