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

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<div class="preview-container">
  <div class="step-header">
    <div class="step-header__left">
      <fa-icon icon="eye" class="step-header__icon"></fa-icon>
      <div>
        <h3 class="step-header__title">Preview &amp; Submit</h3>
        <p class="step-header__sub">Review all details before submitting the client registration.</p>
      </div>
    </div>
  </div>

  <!-- Client Profile Card -->
  <div class="profile-card">
    <div class="profile-avatar">
      <fa-icon [icon]="client?.legalFormId === LegalFormId.PERSON ? 'user' : 'building'" class="avatar-icon"></fa-icon>
    </div>
    <div class="profile-info">
      <h3 class="profile-name">
        @if (client?.legalFormId === LegalFormId.ENTITY) {
          {{ client.fullname }}
        }
        @if (client?.legalFormId === LegalFormId.PERSON) {
          {{ client.firstname }} {{ client.middlename ? client.middlename + ' ' : '' }}{{ client.lastname }}
        }
      </h3>
      <div class="profile-meta">
        @if (client?.officeId) {
          <span class="meta-chip">
            <fa-icon icon="briefcase" class="chip-icon"></fa-icon>
            {{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }}
          </span>
        }
        @if (client?.legalFormId) {
          <span class="meta-chip">
            {{ client.legalFormId === 1 ? 'Individual' : 'Non-Individual' }}
          </span>
        }
        @if (client?.active) {
          <span class="meta-chip status-active">Active</span>
        } @else {
          <span class="meta-chip status-inactive">Inactive</span>
        }
      </div>
    </div>
  </div>

  <!-- Personal Information -->
  <div class="info-card">
    <div class="card-header">
      <fa-icon icon="user" class="card-icon"></fa-icon>
      <span>Personal Information</span>
    </div>
    <div class="card-body">
      <div class="preview-grid">
        @if (client?.legalFormId === LegalFormId.PERSON) {
          @if (client?.firstname) {
            <div class="preview-field">
              <span class="preview-label">First Name</span>
              <span class="preview-value">{{ client.firstname }}</span>
            </div>
          }
          @if (client?.middlename) {
            <div class="preview-field">
              <span class="preview-label">Middle Name</span>
              <span class="preview-value">{{ client.middlename }}</span>
            </div>
          }
          @if (client?.lastname) {
            <div class="preview-field">
              <span class="preview-label">Last Name</span>
              <span class="preview-value">{{ client.lastname }}</span>
            </div>
          }
        }
        @if (client?.legalFormId === LegalFormId.ENTITY && client?.fullname) {
          <div class="preview-field">
            <span class="preview-label">Entity Name</span>
            <span class="preview-value">{{ client.fullname }}</span>
          </div>
        }
        @if (client?.dateOfBirth) {
          <div class="preview-field">
            <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>
          </div>
        }
        @if (client?.legalFormId) {
          <div class="preview-field">
            <span class="preview-label">Legal Form</span>
            <span class="preview-value">{{ client.legalFormId === 1 ? 'Individual' : 'Non-Individual' }}</span>
          </div>
        }
        @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>
          </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>
          </div>
        }
        @if (client?.legalFormId === LegalFormId.PERSON) {
          <div class="preview-field">
            <span class="preview-label">Is Staff?</span>
            <span class="preview-value">{{ client.isStaff | yesNo }}</span>
          </div>
        }
        @if (client?.nationalityId) {
          <div class="preview-field">
            <span class="preview-label">Nationality</span>
            <span class="preview-value">{{ client.nationalityId }}</span>
          </div>
        }
        @if (client?.maritalStatusId) {
          <div class="preview-field">
            <span class="preview-label">Marital Status</span>
            <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>
          </div>
        }
        @if (client?.ageYears !== null) {
          <div class="preview-field">
            <span class="preview-label">Age</span>
            <span class="preview-value">{{ client.ageYears }}y {{ client.ageMonths }}m {{ client.ageDays }}d</span>
          </div>
        }
        @if (client?.isMinor !== null) {
          <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'
                "
              >
                {{ client.isMinor ? 'Yes (Age < 18)' : 'No' }}
              </span>
            </span>
          </div>
        }
      </div>
    </div>
  </div>

  <!-- Entity Details (Non-Individual only) -->
  @if (client?.legalFormId === LegalFormId.ENTITY && client?.clientNonPersonDetails) {
    <div class="info-card">
      <div class="card-header">
        <fa-icon icon="building" class="card-icon"></fa-icon>
        <span>Entity Details</span>
      </div>
      <div class="card-body">
        <div class="preview-grid">
          @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>
            </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>
            </div>
          }
          @if (client.clientNonPersonDetails.incorpNumber) {
            <div class="preview-field">
              <span class="preview-label">Incorporation No</span>
              <span class="preview-value mono">{{ client.clientNonPersonDetails.incorpNumber }}</span>
            </div>
          }
          @if (client.clientNonPersonDetails.remarks) {
            <div class="preview-field full-width">
              <span class="preview-label">Remarks</span>
              <span class="preview-value">{{ client.clientNonPersonDetails.remarks }}</span>
            </div>
          }
        </div>
      </div>
    </div>
  }

  <!-- Contact & DIP Verification -->
  <div class="info-card">
    <div class="card-header">
      <fa-icon icon="mobile-alt" class="card-icon"></fa-icon>
      <span>Contact &amp; DIP Verification</span>
    </div>
    <div class="card-body">
      <div class="preview-grid">
        @if (client?.mobileNo) {
          <div class="preview-field">
            <span class="preview-label">Mobile No</span>
            <span class="preview-value mono">{{ client.mobileNo }}</span>
          </div>
        }
        <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'
              "
            >
              {{ client?.dipVerified ? 'Verified' : 'Pending' }}
            </span>
          </span>
        </div>
        @if (client?.alternateMobileNo) {
          <div class="preview-field">
            <span class="preview-label">Alternate Mobile No</span>
            <span class="preview-value mono">{{ client.alternateMobileNo }}</span>
          </div>
        }
        @if (client?.alternateMobileNo) {
          <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'
                "
              >
                {{ client?.alternateDipVerified ? 'Verified' : 'Pending' }}
              </span>
            </span>
          </div>
        }
        @if (client?.emailAddress) {
          <div class="preview-field">
            <span class="preview-label">Email Address</span>
            <span class="preview-value">{{ client.emailAddress }}</span>
          </div>
        }
        <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>
          </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>
      </div>
    </div>
  }

  <!-- KYC Details -->
  @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>
        <span>KYC Details</span>
        <span class="kyc-badge">KYC</span>
      </div>
      <div class="card-body">
        <div class="preview-grid">
          @if (kycData.panNumber) {
            <div class="preview-field">
              <span class="preview-label">PAN Number</span>
              <span class="preview-value mono">{{ kycData.panNumber }}</span>
            </div>
          }
          @if (kycData.aadhaarNumberMasked) {
            <div class="preview-field">
              <span class="preview-label">Aadhaar Number</span>
              <span class="preview-value mono">{{ kycData.aadhaarNumberMasked }}</span>
            </div>
          }
          @if (kycData.panAadhaarSeedingStatus) {
            <div class="preview-field">
              <span class="preview-label">PAN–Aadhaar Link</span>
              <span class="preview-value">
                @if (kycData.panAadhaarSeedingStatus === 'Y') {
                  <span class="preview-badge preview-badge--verified">Linked</span>
                } @else if (kycData.panAadhaarSeedingStatus === 'N') {
                  <span class="preview-badge preview-badge--pending">Not Linked</span>
                } @else {
                  {{ kycData.panAadhaarSeedingStatus }}
                }
              </span>
            </div>
          }
          @if (kycData.enterprisePan) {
            <div class="preview-field">
              <span class="preview-label">Enterprise PAN</span>
              <span class="preview-value mono">{{ kycData.enterprisePan }}</span>
            </div>
          }
          @if (kycData.cinNumber) {
            <div class="preview-field">
              <span class="preview-label">CIN (Corporate Identity Number)</span>
              <span class="preview-value mono">{{ kycData.cinNumber }}</span>
            </div>
          }
          @if (kycData.incorporationDate) {
            <div class="preview-field">
              <span class="preview-label">Incorporation Date</span>
              <span class="preview-value">{{ kycData.incorporationDate | dateFormat }}</span>
            </div>
          }
          @if (kycData.gstinNumber) {
            <div class="preview-field">
              <span class="preview-label">GSTIN Number</span>
              <span class="preview-value mono">{{ kycData.gstinNumber }}</span>
            </div>
          }
          @if (kycData.riskCategory) {
            <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
                }
              </span>
            </div>
          }
          @if (kycData.remarks) {
            <div class="preview-field full-width">
              <span class="preview-label">Remarks</span>
              <span class="preview-value">{{ kycData.remarks }}</span>
            </div>
          }
        </div>
      </div>
    </div>
  }

  <!-- Guardian Details (Minor only) -->
  @if (guardian) {
    <div class="info-card">
      <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>
      </div>
      <div class="card-body">
        <div class="preview-grid">
          <div class="preview-field">
            <span class="preview-label">Guardian Name</span>
            <span class="preview-value">{{ guardian.displayName }}</span>
          </div>
          <div class="preview-field">
            <span class="preview-label">Client ID</span>
            <span class="preview-value mono">{{ guardian.id }}</span>
          </div>
          <div class="preview-field">
            <span class="preview-label">Account No</span>
            <span class="preview-value mono">{{ guardian.accountNumber || '—' }}</span>
          </div>
          <div class="preview-field">
            <span class="preview-label">Relationship</span>
            <span class="preview-value">{{ guardianRelation || '—' }}</span>
          </div>
          @if (guardian.officeName) {
            <div class="preview-field">
              <span class="preview-label">Office</span>
              <span class="preview-value">{{ guardian.officeName }}</span>
            </div>
          }
          @if (guardian.mobileNo) {
            <div class="preview-field">
              <span class="preview-label">Mobile</span>
              <span class="preview-value mono">{{ guardian.mobileNo }}</span>
            </div>
          }
          @if (guardian.status?.value) {
            <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'
                  "
                >
                  {{ guardian.status.value }}
                </span>
              </span>
            </div>
          }
        </div>
      </div>
    </div>
  }

  <!-- Address Details -->
  @if (addressData) {
    <div class="info-card">
      <div class="card-header">
        <fa-icon icon="map" class="card-icon"></fa-icon>
        <span>Address Details</span>
      </div>
      <div class="card-body">
        @for (tab of addressTabs; track tab) {
          @if (addressData[tab]?.addressLine1) {
            <div class="address-block">
              <div class="address-block__title">{{ addressTabLabels[tab] }}</div>
              <div class="preview-grid">
                <div class="preview-field">
                  <span class="preview-label">Address Line 1</span>
                  <span class="preview-value">{{ addressData[tab].addressLine1 }}</span>
                </div>
                @if (addressData[tab].addressLine2) {
                  <div class="preview-field">
                    <span class="preview-label">Address Line 2</span>
                    <span class="preview-value">{{ addressData[tab].addressLine2 }}</span>
                  </div>
                }
                @if (addressData[tab].landmark) {
                  <div class="preview-field">
                    <span class="preview-label">Landmark</span>
                    <span class="preview-value">{{ addressData[tab].landmark }}</span>
                  </div>
                }
                @if (addressData[tab].pinCode) {
                  <div class="preview-field">
                    <span class="preview-label">PIN Code</span>
                    <span class="preview-value mono">{{ addressData[tab].pinCode }}</span>
                  </div>
                }
                @if (addressData[tab].locality) {
                  <div class="preview-field">
                    <span class="preview-label">Locality</span>
                    <span class="preview-value">{{ addressData[tab].locality }}</span>
                  </div>
                }
                @if (addressData[tab].city) {
                  <div class="preview-field">
                    <span class="preview-label">City</span>
                    <span class="preview-value">{{ addressData[tab].city }}</span>
                  </div>
                }
                @if (addressData[tab].district) {
                  <div class="preview-field">
                    <span class="preview-label">District</span>
                    <span class="preview-value">{{ addressData[tab].district }}</span>
                  </div>
                }
                @if (addressData[tab].state) {
                  <div class="preview-field">
                    <span class="preview-label">State</span>
                    <span class="preview-value">{{ addressData[tab].state }}</span>
                  </div>
                }
              </div>
            </div>
          }
        }
        @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>
        }
      </div>
    </div>
  }

  <!-- Submission Info -->
  @if (client?.submittedOnDate) {
    <div class="info-card">
      <div class="card-header">
        <fa-icon icon="calendar-alt" class="card-icon"></fa-icon>
        <span>Submission</span>
      </div>
      <div class="card-body">
        <div class="preview-grid">
          <div class="preview-field">
            <span class="preview-label">Submitted On</span>
            <span class="preview-value">{{ client.submittedOnDate | dateFormat }}</span>
          </div>
        </div>
      </div>
    </div>
  }

  <!-- Scheme & Sector Classification (Non-Individual) -->
  @if (entityClassificationData) {
    @if (entityClassificationData.msme?.enabled) {
      <div class="info-card">
        <div class="card-header">
          <fa-icon icon="cogs" class="card-icon"></fa-icon>
          <span>MSME Classification</span>
          <span class="preview-badge preview-badge--verified">Enabled</span>
        </div>
        <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>
            }
            @if (entityClassificationData.msme.msmeClassification) {
              <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>
            }
            @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>
            }
            @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>
            }
            @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>
            }
            @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>
            }
            @if (entityClassificationData.msme.socialCategoryOwner) {
              <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>
            }
            @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>
            }
            @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>
            }
            @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>
        </div>
      </div>
    }

    @if (entityClassificationData.startup?.enabled) {
      <div class="info-card">
        <div class="card-header">
          <fa-icon icon="rocket" class="card-icon"></fa-icon>
          <span>Startup India (DPIIT)</span>
          <span class="preview-badge preview-badge--verified">Enabled</span>
        </div>
        <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>
            }
            @if (entityClassificationData.startup.entityStage) {
              <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>
            }
            @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>
            }
            @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>
        </div>
      </div>
    }

    @if (entityClassificationData.mudra?.enabled) {
      <div class="info-card">
        <div class="card-header">
          <fa-icon icon="hand-holding-usd" class="card-icon"></fa-icon>
          <span>Mudra Borrower (PMMY)</span>
          <span class="preview-badge preview-badge--verified">Enabled</span>
        </div>
        <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>
            }
            @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>
            }
            @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>
            }
            @if (entityClassificationData.mudra.lendingInstitutionName) {
              <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>
            }
            @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>
        </div>
      </div>
    }

    @if (entityClassificationData.eou?.enabled) {
      <div class="info-card">
        <div class="card-header">
          <fa-icon icon="ship" class="card-icon"></fa-icon>
          <span>Export Oriented Unit (EOU)</span>
          <span class="preview-badge preview-badge--verified">Enabled</span>
        </div>
        <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>
            }
            @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>
            }
            @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>
            }
            @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>
            }
            @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>
        </div>
      </div>
    }

    @if (entityClassificationData.importexport?.enabled) {
      <div class="info-card">
        <div class="card-header">
          <fa-icon icon="exchange-alt" class="card-icon"></fa-icon>
          <span>Import Export (IEC/DGFT)</span>
          <span class="preview-badge preview-badge--verified">Enabled</span>
        </div>
        <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>
            }
            @if (entityClassificationData.importexport.iecStatus) {
              <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>
            }
            @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>
            }
            @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>
            }
            @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>
        </div>
      </div>
    }

    @if (entityClassificationData.psl?.enabled) {
      <div class="info-card">
        <div class="card-header">
          <fa-icon icon="bullseye" class="card-icon"></fa-icon>
          <span>Priority Sector (PSL)</span>
          <span class="preview-badge preview-badge--verified">Enabled</span>
        </div>
        <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>
            }
            @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>
            }
            @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>
            }
            @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>
            }
            @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>
            }
            @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>
        </div>
      </div>
    }

    @if (entityClassificationData.nps?.enabled) {
      <div class="info-card">
        <div class="card-header">
          <fa-icon icon="building" class="card-icon"></fa-icon>
          <span>Non-Priority Sector</span>
          <span class="preview-badge preview-badge--verified">Enabled</span>
        </div>
        <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>
            }
            @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>
            }
            @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>
            }
            @if (entityClassificationData.nps.riskCategory) {
              <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>
            }
            @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>
            }
            @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>
        </div>
      </div>
    }
  }

  <!-- Family Members — hidden when client isn't eligible (entities other than proprietorship). -->
  @if (showFamilyPreview) {
    <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>
                }
                <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>