cbsnexora/src/app/clients/clients-view/personal-data-tab/personal-data-tab.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="personal-data-container mat-typography">
  <!-- Personal Information -->
  <div class="pd-section">
    <div class="pd-section__header">
      <i class="fa fa-user"></i>
      <h3>{{ 'labels.heading.Personal Information' | translate }}</h3>
    </div>
    <div class="pd-section__body">
      <div class="pd-grid">
        @if (clientViewData.displayName) {
          <div class="pd-field">
            <div class="pd-field__label">{{ 'labels.inputs.Display Name' | translate }}</div>
            <div class="pd-field__value">{{ clientViewData.displayName }}</div>
          </div>
        }
        @if (isPerson()) {
          @if (clientViewData.salutation) {
            <div class="pd-field">
              <div class="pd-field__label">Salutation</div>
              <div class="pd-field__value">{{ clientViewData.salutation.name }}</div>
            </div>
          }
          @if (clientViewData.firstname) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.First Name' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.firstname }}</div>
            </div>
          }
          @if (clientViewData.middlename) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Middle Name' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.middlename }}</div>
            </div>
          }
          @if (clientViewData.lastname) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Last Name' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.lastname }}</div>
            </div>
          }
          @if (clientViewData.dateOfBirth) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Date of Birth' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.dateOfBirth | dateFormat: 'DD-MMMM-YYYY' }}</div>
            </div>
          }
          @if (clientViewData.ageYears !== null) {
            <div class="pd-field">
              <div class="pd-field__label">Age</div>
              <div class="pd-field__value">
                {{ clientViewData.ageYears }}y {{ clientViewData.ageMonths || 0 }}m {{ clientViewData.ageDays || 0 }}d
              </div>
            </div>
          }
          @if (clientViewData.gender) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Gender' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.gender.name }}</div>
            </div>
          }
          @if (clientViewData.maritalStatus) {
            <div class="pd-field">
              <div class="pd-field__label">Marital Status</div>
              <div class="pd-field__value">{{ clientViewData.maritalStatus.name }}</div>
            </div>
          }
          @if (clientViewData.educationLevel) {
            <div class="pd-field">
              <div class="pd-field__label">Education Level</div>
              <div class="pd-field__value">{{ clientViewData.educationLevel.name }}</div>
            </div>
          }
          @if (clientViewData.degreeQualification) {
            <div class="pd-field">
              <div class="pd-field__label">Degree / Qualification</div>
              <div class="pd-field__value">{{ clientViewData.degreeQualification.name }}</div>
            </div>
          }
          @if (clientViewData.religion) {
            <div class="pd-field">
              <div class="pd-field__label">Religion</div>
              <div class="pd-field__value">{{ clientViewData.religion.name }}</div>
            </div>
          }
          @if (clientViewData.socialCategory) {
            <div class="pd-field">
              <div class="pd-field__label">Social Category</div>
              <div class="pd-field__value">{{ clientViewData.socialCategory.name }}</div>
            </div>
          }
          @if (clientViewData.isMinor !== null) {
            <div class="pd-field">
              <div class="pd-field__label">Minor</div>
              <div class="pd-field__value">
                <span
                  class="pd-verify-badge"
                  [class.pd-verify-badge--verified]="!clientViewData.isMinor"
                  [class.pd-verify-badge--pending]="clientViewData.isMinor"
                >
                  {{ clientViewData.isMinor ? 'Yes (Age < 10)' : 'No' }}
                </span>
              </div>
            </div>
          }
          <div class="pd-field">
            <div class="pd-field__label">{{ 'labels.inputs.Is staff' | translate }}</div>
            <div class="pd-field__value">
              <span
                class="pd-verify-badge"
                [class.pd-verify-badge--verified]="clientViewData.isStaff"
                [class.pd-verify-badge--pending]="!clientViewData.isStaff"
              >
                {{ clientViewData.isStaff ? 'Yes' : 'No' }}
              </span>
            </div>
          </div>
        }
        @if (isLegalEntity()) {
          @if (clientViewData.fullname) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Entity Name' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.fullname }}</div>
            </div>
          }
          @if (clientViewData.dateOfBirth) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Incorporation Date' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.dateOfBirth | dateFormat: 'DD-MM-YYYY' }}</div>
            </div>
          }
        }
        @if (clientViewData.legalForm) {
          <div class="pd-field">
            <div class="pd-field__label">{{ 'labels.inputs.Legal Form' | translate }}</div>
            <div class="pd-field__value">{{ clientViewData.legalForm.id === 1 ? 'Individual' : 'Non-Individual' }}</div>
          </div>
        }
        <div class="pd-field">
          <div class="pd-field__label">Nationality</div>
          <div class="pd-field__value">
            {{ clientViewData.nationalityId || clientViewData.nationality || 'Indian' }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Account Information -->
  <div class="pd-section">
    <div class="pd-section__header">
      <i class="fa fa-id-card"></i>
      <h3>{{ 'labels.heading.Account Information' | translate }}</h3>
    </div>
    <div class="pd-section__body">
      <div class="pd-grid">
        <div class="pd-field">
          <div class="pd-field__label">{{ 'labels.inputs.Account No' | translate }}</div>
          <div class="pd-field__value monospace">{{ clientViewData.accountNo || '-' }}</div>
        </div>
        <div class="pd-field">
          <div class="pd-field__label">{{ 'labels.inputs.CIF Number' | translate }}</div>
          <div class="pd-field__value monospace">{{ clientViewData.cifNumber || '-' }}</div>
        </div>
        <div class="pd-field">
          <div class="pd-field__label">{{ 'labels.inputs.Office' | translate }}</div>
          <div class="pd-field__value">{{ clientViewData.officeName || '-' }}</div>
        </div>
        <div class="pd-field">
          <div class="pd-field__label">{{ 'labels.inputs.Staff' | translate }}</div>
          <div class="pd-field__value">{{ clientViewData.staffName || ('labels.inputs.Unassigned' | translate) }}</div>
        </div>
        @if (clientViewData.savingsAccountNo) {
          <div class="pd-field">
            <div class="pd-field__label">{{ 'labels.inputs.Default Savings Account' | translate }}</div>
            <div class="pd-field__value monospace">{{ clientViewData.savingsAccountNo }}</div>
          </div>
        }
      </div>
    </div>
  </div>

  <!-- Non-Person Details Section (for Legal Entities) -->
  @if (isLegalEntity() && clientViewData.clientNonPersonDetails) {
    <div class="pd-section">
      <div class="pd-section__header">
        <i class="fa fa-building"></i>
        <h3>{{ 'labels.heading.Entity Details' | translate }}</h3>
      </div>
      <div class="pd-section__body">
        <div class="pd-grid">
          @if (clientViewData.clientNonPersonDetails.constitution) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Constitution' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.clientNonPersonDetails.constitution.name }}</div>
            </div>
          }
          @if (clientViewData.clientNonPersonDetails.mainBusinessLine) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Main Business Line' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.clientNonPersonDetails.mainBusinessLine.name }}</div>
            </div>
          }
          @if (clientViewData.clientNonPersonDetails.incorpValidityTillDate) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</div>
              <div class="pd-field__value">
                {{ clientViewData.clientNonPersonDetails.incorpValidityTillDate | dateFormat: 'DD-MM-YYYY' }}
              </div>
            </div>
          }
          @if (clientViewData.clientNonPersonDetails.incorpNumber) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Incorporation No' | translate }}</div>
              <div class="pd-field__value monospace">{{ clientViewData.clientNonPersonDetails.incorpNumber }}</div>
            </div>
          }
          @if (clientViewData.clientNonPersonDetails.remarks) {
            <div class="pd-field full-width">
              <div class="pd-field__label">{{ 'labels.inputs.Remarks' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.clientNonPersonDetails.remarks }}</div>
            </div>
          }
        </div>
      </div>
    </div>
  }

  <!-- Contact Details -->
  <div class="pd-section">
    <div class="pd-section__header">
      <i class="fa fa-phone"></i>
      <h3>Contact Details</h3>
    </div>
    <div class="pd-section__body">
      <div class="pd-grid">
        <div class="pd-field">
          <div class="pd-field__label">{{ 'labels.inputs.Mobile Number' | translate }}</div>
          <div class="pd-field__value">
            <span class="pd-contact-icon"><i class="fa fa-mobile"></i> {{ clientViewData.mobileNo || '-' }}</span>
          </div>
        </div>
        @if (clientViewData.alternateMobileNo) {
          <div class="pd-field">
            <div class="pd-field__label">Alternate Mobile No</div>
            <div class="pd-field__value">
              <span class="pd-contact-icon"><i class="fa fa-mobile"></i> {{ clientViewData.alternateMobileNo }}</span>
            </div>
          </div>
        }
        <div class="pd-field">
          <div class="pd-field__label">{{ 'labels.inputs.Email' | translate }}</div>
          <div class="pd-field__value">
            <span class="pd-contact-icon"
              ><i class="fa fa-envelope-o"></i> {{ clientViewData.emailAddress || '-' }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- DIP & Sanctions Verification -->
  <div class="pd-section">
    <div class="pd-section__header">
      <i class="fa fa-shield"></i>
      <h3>DIP &amp; Sanctions Verification</h3>
    </div>
    <div class="pd-section__body">
      <div class="pd-grid">
        <!-- Primary Mobile DIP -->
        <div class="pd-field">
          <div class="pd-field__label">Mobile DIP Status</div>
          <div class="pd-field__value">
            @if (
              clientViewData.mobileVerified === true ||
              clientViewData.mobileVerified === 'true' ||
              clientViewData.mobileVerified === 1 ||
              clientViewData.dipVerified === true ||
              clientViewData.dipVerified === 'true' ||
              clientViewData.dipVerified === 1
            ) {
              <span class="pd-verify-badge pd-verify-badge--verified">
                <i class="fa fa-check-circle"></i> Verified
              </span>
            } @else {
              <span class="pd-verify-badge pd-verify-badge--pending"> <i class="fa fa-clock-o"></i> Pending </span>
            }
          </div>
        </div>
        @if (clientViewData.dipTimestamp) {
          <div class="pd-field">
            <div class="pd-field__label">DIP Verified On</div>
            <div class="pd-field__value monospace">{{ formatDateTime(clientViewData.dipTimestamp) }}</div>
          </div>
        }
        <!-- Alternate Mobile DIP -->
        @if (clientViewData.alternateMobileNo) {
          <div class="pd-field">
            <div class="pd-field__label">Alternate Mobile DIP Status</div>
            <div class="pd-field__value">
              @if (
                clientViewData.alternateDipVerified === true ||
                clientViewData.alternateDipVerified === 'true' ||
                clientViewData.alternateDipVerified === 1
              ) {
                <span class="pd-verify-badge pd-verify-badge--verified">
                  <i class="fa fa-check-circle"></i> Verified
                </span>
              } @else {
                <span class="pd-verify-badge pd-verify-badge--pending"> <i class="fa fa-clock-o"></i> Pending </span>
              }
            </div>
          </div>
          @if (clientViewData.alternateDipTimestamp) {
            <div class="pd-field">
              <div class="pd-field__label">Alternate DIP Verified On</div>
              <div class="pd-field__value monospace">{{ formatDateTime(clientViewData.alternateDipTimestamp) }}</div>
            </div>
          }
        }

        <!-- Sanctions / Name Screening -->
        <div class="pd-field">
          <div class="pd-field__label">Name Screening (Sanctions)</div>
          <div class="pd-field__value">
            @if (
              clientViewData.nameVerified === true ||
              clientViewData.nameVerified === 'true' ||
              clientViewData.nameVerified === 1
            ) {
              <span class="pd-verify-badge pd-verify-badge--verified"><i class="fa fa-check-circle"></i> Clear</span>
            } @else if (
              clientViewData.nameVerified === false ||
              clientViewData.nameVerified === 'false' ||
              clientViewData.nameVerified === 0
            ) {
              <span class="pd-verify-badge pd-verify-badge--danger"
                ><i class="fa fa-exclamation-triangle"></i> Match Found</span
              >
            } @else {
              <span class="pd-verify-badge pd-verify-badge--pending"><i class="fa fa-clock-o"></i> Pending</span>
            }
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Financial & Classification (Individual only) -->
  @if (clientViewData?.legalForm?.id !== 2) {
    <div class="pd-section">
      <div class="pd-section__header">
        <i class="fa fa-chart-line"></i>
        <h3>Financial &amp; Classification</h3>
      </div>
      <div class="pd-section__body">
        <div class="pd-grid">
          <div class="pd-field">
            <div class="pd-field__label">Monthly Income</div>
            <div class="pd-field__value">
              @if (clientViewData.monthlyIncome !== null && clientViewData.monthlyIncome !== '') {
                <span class="monospace">&#8377; {{ clientViewData.monthlyIncome | number }}</span>
              } @else {
                -
              }
            </div>
          </div>
          <div class="pd-field">
            <div class="pd-field__label">Annual Turnover (Last FY)</div>
            <div class="pd-field__value">
              @if (clientViewData.annualTurnover !== null && clientViewData.annualTurnover !== '') {
                <span class="monospace">&#8377; {{ clientViewData.annualTurnover | number }}</span>
              } @else {
                -
              }
            </div>
          </div>
          @if (clientViewData.clientType) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Client Type' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.clientType.name }}</div>
            </div>
          }
          @if (clientViewData.clientClassification) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Client Classification' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.clientClassification.name }}</div>
            </div>
          }
          @if (clientViewData.occupationCategory) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Occupation Category' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.occupationCategory.name }}</div>
            </div>
          }
          @if (clientViewData.occupation) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Occupation' | translate }}</div>
              <div class="pd-field__value">{{ clientViewData.occupation.name }}</div>
            </div>
          }
        </div>
      </div>
    </div>
  }

  <!-- Guardian Details (Minor) -->
  @if (clientViewData.isMinor && clientViewData.guardianClientId) {
    <div class="pd-section">
      <div class="pd-section__header">
        <i class="fa fa-user-shield"></i>
        <h3>Guardian Details</h3>
        <span class="pd-section__badge pd-section__badge--minor">Minor</span>
      </div>
      <div class="pd-section__body">
        <div class="pd-grid">
          <div class="pd-field">
            <div class="pd-field__label">Guardian Name</div>
            <div class="pd-field__value">{{ clientViewData.guardianClientDisplayName || '-' }}</div>
          </div>
          <div class="pd-field">
            <div class="pd-field__label">Guardian Client ID</div>
            <div class="pd-field__value monospace">{{ clientViewData.guardianClientId }}</div>
          </div>
          @if (clientViewData.guardianRelation) {
            <div class="pd-field">
              <div class="pd-field__label">Relationship</div>
              <div class="pd-field__value">{{ clientViewData.guardianRelation }}</div>
            </div>
          }
        </div>
      </div>
    </div>
  }

  <!-- Group Membership -->
  @if (clientViewData.groups && clientViewData.groups.length > 0) {
    <div class="pd-section">
      <div class="pd-section__header">
        <i class="fa fa-users"></i>
        <h3>{{ 'labels.heading.Group Membership' | translate }}</h3>
      </div>
      <div class="pd-section__body">
        <div class="pd-grid">
          @for (group of clientViewData.groups; track group) {
            <div class="pd-field">
              <div class="pd-field__label">{{ 'labels.inputs.Group' | translate }}</div>
              <div class="pd-field__value">{{ group.name }}</div>
            </div>
          }
        </div>
      </div>
    </div>
  }

  <!-- Important Dates -->
  <div class="pd-section">
    <div class="pd-section__header">
      <i class="fa fa-calendar"></i>
      <h3>{{ 'labels.heading.Important Dates' | translate }}</h3>
    </div>
    <div class="pd-section__body">
      <div class="pd-grid">
        @if (clientViewData.timeline?.submittedOnDate) {
          <div class="pd-field">
            <div class="pd-field__label">{{ 'labels.inputs.Submitted On' | translate }}</div>
            <div class="pd-field__value">{{ clientViewData.timeline.submittedOnDate | dateFormat: 'DD-MM-YYYY' }}</div>
          </div>
        }
        @if (clientViewData.activationDate) {
          <div class="pd-field">
            <div class="pd-field__label">{{ 'labels.inputs.Activation Date' | translate }}</div>
            <div class="pd-field__value">{{ clientViewData.activationDate | dateFormat: 'DD-MM-YYYY' }}</div>
          </div>
        }
        @if (clientViewData.timeline?.closedOnDate) {
          <div class="pd-field">
            <div class="pd-field__label">{{ 'labels.inputs.Closed Date' | translate }}</div>
            <div class="pd-field__value">{{ clientViewData.timeline.closedOnDate | dateFormat: 'DD-MM-YYYY' }}</div>
          </div>
        }
      </div>
    </div>
  </div>

  <!-- Status -->
  <div class="pd-section">
    <div class="pd-section__header">
      <i class="fa fa-info-circle"></i>
      <h3>{{ 'labels.heading.Status' | translate }}</h3>
    </div>
    <div class="pd-section__body">
      <div class="pd-grid">
        @if (clientViewData.status) {
          <div class="pd-field">
            <div class="pd-field__label">{{ 'labels.inputs.Client Status' | translate }}</div>
            <div class="pd-field__value">
              <span
                class="pd-field__value status-badge"
                [class.status-active]="clientViewData.status.value === 'Active'"
                [class.status-closed]="clientViewData.status.value === 'Closed'"
                [class.status-pending]="
                  clientViewData.status.value !== 'Active' && clientViewData.status.value !== 'Closed'
                "
              >
                {{ 'labels.status.' + clientViewData.status.value | translate }}
              </span>
            </div>
          </div>
        }
        @if (clientViewData.subStatus) {
          <div class="pd-field">
            <div class="pd-field__label">{{ 'labels.inputs.Sub Status' | translate }}</div>
            <div class="pd-field__value">{{ clientViewData.subStatus.name }}</div>
          </div>
        }
      </div>
    </div>
  </div>
</div>