cbsnexora/src/app/clients/clients-view/clients-view.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="cv-card">
  <div class="cv-top">
    <!-- Avatar -->
    <div class="cv-avatar">
      <img class="cv-avatar__img"
        [src]="clientImage ? clientImage : 'assets/images/user_placeholder.png'" />
      <div class="cv-avatar__actions">
        <button class="cv-avatar__btn"
          (click)="doAction('Upload Image')"
          matTooltip="{{ 'tooltips.Upload Image' | translate }}"
          *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
          <i class="fa fa-upload"></i>
        </button>
        <button class="cv-avatar__btn"
          (click)="doAction('Capture Image')"
          matTooltip="{{ 'tooltips.Capture Image' | translate }}"
          *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
          <i class="fa fa-camera"></i>
        </button>
        <button class="cv-avatar__btn cv-avatar__btn--danger"
          (click)="doAction('Delete Image')"
          matTooltip="{{ 'tooltips.Delete Image' | translate }}"
          *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
          <i class="fa fa-trash"></i>
        </button>
      </div>
      <span class="cv-avatar__sig" (click)="doAction('View Signature')">{{ 'labels.inputs.View Signature' | translate }}</span>
    </div>

    <!-- Info -->
    <div class="cv-info">
      <!-- Name + Status + Menu -->
      <div class="cv-name-row">
        <div class="cv-name">
          <i class="fa fa-stop cv-name__dot" [ngClass]="clientViewData.status.code | statusLookup"
            matTooltip="{{ 'labels.status.' + clientViewData.status.value | translate }}"></i>
          <span class="cv-name__text">
            <mifosx-entity-name
              [entityName]="complianceHideClientData ? maskName(clientViewData.displayName) : clientViewData.displayName"
              [display]="'right'" [hideCopy]="complianceHideClientData"></mifosx-entity-name>
          </span>
          <span class="cv-name__status">
            {{ 'labels.status.' + clientViewData.status.value | translate }}
          </span>
        </div>
        <button mat-icon-button [matMenuTriggerFor]="clientMenu" class="cv-menu-btn" aria-label="Client actions">
          <mat-icon matListIcon class="actions-menu"><fa-icon icon="bars" size="sm"></fa-icon></mat-icon>
        </button>
      </div>

      <!-- ID Chips -->
      <div class="cv-ids">
        <div class="cv-id">
          <span class="cv-id__label">{{ 'labels.inputs.Account No' | translate }}</span>
          <span class="cv-id__val">
            <mifosx-account-number accountNo="{{ clientViewData.accountNo }}"></mifosx-account-number>
          </span>
        </div>
        @if (clientViewData.cifNumber) {
          <div class="cv-id">
            <span class="cv-id__label">{{ 'labels.inputs.CIF Number' | translate }}</span>
            <span class="cv-id__val">
              <mifosx-account-number accountNo="{{ clientViewData.cifNumber }}"></mifosx-account-number>
            </span>
          </div>
        }
        @if (clientViewData.externalId) {
          <div class="cv-id">
            <span class="cv-id__label">{{ 'labels.inputs.External Id' | translate }}</span>
            <span class="cv-id__val">
              <mifosx-external-identifier
                [externalId]="complianceHideClientData ? maskValue(clientViewData.externalId) : clientViewData.externalId"
                [completed]="true" [hideCopy]="complianceHideClientData"></mifosx-external-identifier>
            </span>
          </div>
        }
      </div>

      <!-- Details Grid -->
      <div class="cv-grid">
        <div class="cv-cell">
          <div class="cv-cell__label">{{ 'labels.inputs.Office' | translate }}</div>
          <div class="cv-cell__value">{{ clientViewData.officeName }}</div>
        </div>
        <div class="cv-cell">
          <div class="cv-cell__label">{{ 'labels.inputs.Staff' | translate }}</div>
          <div class="cv-cell__value">{{ clientViewData.staffName || ('labels.inputs.Unassigned' | translate) }}</div>
        </div>
        @if (clientViewData.activationDate) {
          <div class="cv-cell">
            <div class="cv-cell__label">{{ 'labels.inputs.Activation Date' | translate }}</div>
            <div class="cv-cell__value">{{ clientViewData.activationDate | dateFormat }}</div>
          </div>
        }
        @if (clientViewData.clientType) {
          <div class="cv-cell">
            <div class="cv-cell__label">{{ 'labels.inputs.Client Type' | translate }}</div>
            <div class="cv-cell__value">{{ clientViewData.clientType.name }}</div>
          </div>
        }
        @if (clientViewData.clientClassification) {
          <div class="cv-cell">
            <div class="cv-cell__label">{{ 'labels.inputs.Client Classification' | translate }}</div>
            <div class="cv-cell__value">{{ clientViewData.clientClassification.name }}</div>
          </div>
        }
        @if (clientViewData.mobileNo) {
          <div class="cv-cell">
            <div class="cv-cell__label">{{ 'labels.inputs.Mobile Number' | translate }}</div>
            <div class="cv-cell__value">
              <mifosx-external-identifier
                [externalId]="complianceHideClientData ? maskValue(clientViewData.mobileNo) : clientViewData.mobileNo"
                [completed]="true" [hideCopy]="complianceHideClientData"></mifosx-external-identifier>
            </div>
          </div>
        }
        @if (clientViewData.emailAddress) {
          <div class="cv-cell">
            <div class="cv-cell__label">{{ 'labels.inputs.Email' | translate }}</div>
            <div class="cv-cell__value">
              <mifosx-external-identifier
                [externalId]="complianceHideClientData ? maskEmail(clientViewData.emailAddress) : clientViewData.emailAddress"
                [completed]="true" [hideCopy]="complianceHideClientData"></mifosx-external-identifier>
            </div>
          </div>
        }
        @if (clientViewData.occupationCategory) {
          <div class="cv-cell">
            <div class="cv-cell__label">{{ 'labels.inputs.Occupation Category' | translate }}</div>
            <div class="cv-cell__value">{{ clientViewData.occupationCategory.name }}</div>
          </div>
        }
        @if (clientViewData.occupation) {
          <div class="cv-cell">
            <div class="cv-cell__label">{{ 'labels.inputs.Occupation' | translate }}</div>
            <div class="cv-cell__value">{{ clientViewData.occupation.name }}</div>
          </div>
        }
        @if (clientViewData.mobileNo && clientViewData.dipVerified != null) {
          <div class="cv-cell">
            <div class="cv-cell__label">DIP Status</div>
            <div class="cv-cell__value">
              <span class="cv-badge"
                [class.cv-badge--green]="clientViewData.dipVerified === true || clientViewData.dipVerified === 'true' || clientViewData.dipVerified === 1"
                [class.cv-badge--yellow]="clientViewData.dipVerified !== true && clientViewData.dipVerified !== 'true' && clientViewData.dipVerified !== 1">
                {{ (clientViewData.dipVerified === true || clientViewData.dipVerified === 'true' || clientViewData.dipVerified === 1) ? 'Verified' : 'Pending' }}
              </span>
            </div>
          </div>
        }
        @if (clientViewData.nameVerified != null) {
          <div class="cv-cell">
            <div class="cv-cell__label">Sanctions Screening</div>
            <div class="cv-cell__value">
              <span class="cv-badge"
                [class.cv-badge--green]="clientViewData.nameVerified === true || clientViewData.nameVerified === 'true' || clientViewData.nameVerified === 1"
                [class.cv-badge--red]="clientViewData.nameVerified === false || clientViewData.nameVerified === 'false' || clientViewData.nameVerified === 0">
                {{ (clientViewData.nameVerified === true || clientViewData.nameVerified === 'true' || clientViewData.nameVerified === 1) ? 'Clear' : 'Pending' }}
              </span>
            </div>
          </div>
        }
        @if (clientViewData.nationality) {
          <div class="cv-cell">
            <div class="cv-cell__label">Nationality</div>
            <div class="cv-cell__value">{{ clientViewData.nationality.name || clientViewData.nationality }}</div>
          </div>
        }
        @if (clientViewData.maritalStatus) {
          <div class="cv-cell">
            <div class="cv-cell__label">Marital Status</div>
            <div class="cv-cell__value">{{ clientViewData.maritalStatus.name }}</div>
          </div>
        }
        @if (clientViewData.monthlyIncome != null && clientViewData.monthlyIncome !== '') {
          <div class="cv-cell">
            <div class="cv-cell__label">Monthly Income</div>
            <div class="cv-cell__value">&#8377; {{ clientViewData.monthlyIncome | number }}</div>
          </div>
        }
        @if (clientViewData.annualTurnover != null && clientViewData.annualTurnover !== '') {
          <div class="cv-cell">
            <div class="cv-cell__label">Annual Turnover</div>
            <div class="cv-cell__value">&#8377; {{ clientViewData.annualTurnover | number }}</div>
          </div>
        }
        @if (clientViewData.groups?.length > 0) {
          <div class="cv-cell">
            <div class="cv-cell__label">{{ 'labels.inputs.Member Of' | translate }}</div>
            <div class="cv-cell__value">
              @for (group of clientViewData.groups; track group) {
                <span>{{ group.name }} </span>
              }
            </div>
          </div>
        }
      </div>
    </div>
  </div>

      <mat-menu #clientMenu="matMenu">
        <button mat-menu-item [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CLIENT'">
          <mat-icon matListIcon>
            <fa-icon icon="edit" size="sm"></fa-icon>
          </mat-icon>
          <span>{{ 'labels.buttons.Edit' | translate }}</span>
        </button>

        @if (isActive()) {
          <button mat-menu-item [matMenuTriggerFor]="accountApplications">
            <mat-icon matListIcon>
              <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
            </mat-icon>
            <span>{{ 'labels.buttons.Applications' | translate }}</span>
          </button>
        }

        <button mat-menu-item [matMenuTriggerFor]="Actions">
          <mat-icon matListIcon>
            <fa-icon icon="tasks" size="sm"></fa-icon>
          </mat-icon>
          <span>{{ 'labels.buttons.Actions' | translate }}</span>
        </button>

        @if (!clientViewData.staffId) {
          <button mat-menu-item (click)="doAction('Assign Staff')">
            <mat-icon matListIcon>
              <fa-icon icon="user-tie" size="sm"></fa-icon>
            </mat-icon>
            <span>{{ 'labels.buttons.Assign Staff' | translate }}</span>
          </button>
        }

        @if (clientViewData.staffId) {
          <span>
            <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_CLIENT'" (click)="doAction('Unassign Staff')">
              <mat-icon matListIcon>
                <fa-icon icon="user-tie" size="sm"></fa-icon>
              </mat-icon>
              <span>{{ 'labels.buttons.Unassign Staff' | translate }}</span>
            </button>
          </span>
        }

        <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>
      </mat-menu>

      <mat-menu #accountApplications="matMenu">
        <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">
          {{ 'labels.buttons.New Loan Account' | translate }}
        </button>
        <button
          mat-menu-item
          *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
          [routerLink]="['savings-accounts', 'create']"
        >
          {{ 'labels.buttons.New Savings Account' | translate }}
        </button>
        <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'" [routerLink]="['shares-accounts', 'create']">
          {{ 'labels.buttons.New Share Account' | translate }}
        </button>
        <button
          mat-menu-item
          *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'"
          [routerLink]="['recurring-deposits-accounts', 'create-recurring-deposits-account']"
        >
          {{ 'labels.buttons.New Recurring Deposit Account' | translate }}
        </button>
        <button
          mat-menu-item
          *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'"
          [routerLink]="['fixed-deposits-accounts', 'create']"
        >
          {{ 'labels.buttons.New Fixed Deposits Account' | translate }}
        </button>
        <button
          mat-menu-item
          *mifosxHasPermission="'CREATE_CURRENTACCOUNT'"
          [routerLink]="['current-accounts', 'create']"
        >
          {{ 'labels.buttons.New Current Account' | translate }}
        </button>
      </mat-menu>

      <mat-menu #Actions="matMenu">
        <button mat-menu-item (click)="doAction('Close')">{{ 'labels.buttons.Close' | translate }}</button>
        <button mat-menu-item (click)="doAction('Transfer Client')">
          {{ 'labels.buttons.Transfer Client' | translate }}
        </button>
        @if (clientViewData.status.value === 'Pending') {
          <span
            ><button mat-menu-item (click)="doAction('Activate')">
              {{ 'labels.buttons.Activate' | translate }}
            </button></span
          >
        }
        @if (clientViewData.status.value === 'Pending') {
          <span
            ><button mat-menu-item (click)="doAction('Withdraw')">
              {{ 'labels.buttons.Withdraw' | translate }}
            </button></span
          >
        }
        @if (clientViewData.status.value === 'Pending') {
          <span
            ><button mat-menu-item (click)="doAction('Reject')">{{ 'labels.buttons.Reject' | translate }}</button></span
          >
        }
        @if (clientViewData.status.value === 'Pending') {
          <span
            ><button mat-menu-item *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">
              {{ 'labels.buttons.Delete' | translate }}
            </button></span
          >
        }
        @if (clientViewData.status.value === 'Closed') {
          <span
            ><button mat-menu-item (click)="doAction('Reactivate')">
              {{ 'labels.buttons.Reactivate' | translate }}
            </button></span
          >
        }
        @if (clientViewData.status.value === 'Rejected') {
          <span
            ><button mat-menu-item (click)="doAction('Undo Rejection')">
              {{ 'labels.buttons.Undo Rejection' | translate }}
            </button></span
          >
        }
        @if (clientViewData.status.value === 'Transfer in progress') {
          <span
            ><button mat-menu-item (click)="doAction('Undo Transfer')">
              {{ 'labels.buttons.Undo Transfer' | translate }}
            </button></span
          >
        }
        @if (clientViewData.status.value === 'Transfer in progress') {
          <span
            ><button mat-menu-item (click)="doAction('Accept Transfer')">
              {{ 'labels.buttons.Accept Transfer' | translate }}
            </button></span
          >
        }
        @if (clientViewData.status.value === 'Transfer in progress') {
          <span
            ><button mat-menu-item (click)="doAction('Reject Transfer')">
              {{ 'labels.buttons.Reject transfer' | translate }}
            </button></span
          >
        }
      </mat-menu>

      <mat-menu #More="matMenu">
        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'">
          {{ 'labels.buttons.Add Charge' | translate }}
        </button>
        <button mat-menu-item (click)="doAction('Create Collateral')">
          {{ 'labels.buttons.Create Collateral' | translate }}
        </button>
        <button mat-menu-item (click)="doAction('Survey')" [disabled]="true">
          {{ 'labels.buttons.Survey' | translate }}
        </button>
        <button
          mat-menu-item
          (click)="doAction('Update Default Savings')"
          *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"
        >
          {{ 'labels.buttons.Update Default Savings' | translate }}
        </button>
        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
          {{ 'labels.buttons.Upload Signature' | translate }}
        </button>
        <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
          {{ 'labels.buttons.Delete Signature' | translate }}
        </button>
        <button mat-menu-item (click)="doAction('Client Screen Reports')">
          {{ 'labels.buttons.Client Screen Reports' | translate }}
        </button>
        <button
          mat-menu-item
          (click)="doAction('Create Standing Instructions')"
          *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"
        >
          {{ 'labels.buttons.Create Standing Instructions' | translate }}
        </button>
        @if (clientViewData.status.value !== 'Transfer on hold') {
          <span>
            <button
              mat-menu-item
              (click)="doAction('View Standing Instructions')"
              *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
            >
              {{ 'labels.buttons.View Standing Instructions' | translate }}
            </button>
          </span>
        }
      </mat-menu>

  <div>
    <nav mat-tab-nav-bar class="cv-tabs" [tabPanel]="tabPanel">
      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive" [active]="general.isActive">
        <i class="fa fa-tachometer cv-tab-icon"></i> {{ 'labels.inputs.General' | translate }}
      </a>
      <a mat-tab-link [routerLink]="['./personal-data']" routerLinkActive #personalData="routerLinkActive" [active]="personalData.isActive">
        <i class="fa fa-user cv-tab-icon"></i> {{ 'labels.inputs.Personal Data' | translate }}
      </a>
      <a mat-tab-link [routerLink]="['./address']" routerLinkActive #address="routerLinkActive" [active]="address.isActive">
        <i class="fa fa-map-marker cv-tab-icon"></i> {{ 'labels.inputs.Address' | translate }}
      </a>
      @if (clientViewData?.legalForm?.id !== 2) {
        <a mat-tab-link [routerLink]="['./family-members']" routerLinkActive #familyMembers="routerLinkActive" [active]="familyMembers.isActive">
          <i class="fa fa-users cv-tab-icon"></i> Family Members
        </a>
      }
      <a mat-tab-link [routerLink]="['./nominees']" routerLinkActive #nomineesTab="routerLinkActive" [active]="nomineesTab.isActive">
        <i class="fa fa-shield cv-tab-icon"></i> Nominee
      </a>
      <a mat-tab-link [routerLink]="['./identities']" routerLinkActive #identities="routerLinkActive" [active]="identities.isActive" *mifosxHasPermission="'READ_CLIENTIDENTIFIER'">
        <i class="fa fa-id-card cv-tab-icon"></i> {{ 'labels.inputs.Identities' | translate }}
      </a>
      <a mat-tab-link [routerLink]="['./kyc']" routerLinkActive #kyc="routerLinkActive" [active]="kyc.isActive">
        <i class="fa fa-check-circle cv-tab-icon"></i> {{ 'labels.inputs.KYC' | translate }}
      </a>
      @if (clientViewData.legalForm?.id !== 1) {
        <a mat-tab-link [routerLink]="['./entity-classification']" routerLinkActive #ecTab="routerLinkActive" [active]="ecTab.isActive">
          <i class="fa fa-building cv-tab-icon"></i> Scheme &amp; Sector
        </a>
      }
      <a mat-tab-link [routerLink]="['./ckyc']" routerLinkActive #ckyc="routerLinkActive" [active]="ckyc.isActive">
        <i class="fa fa-shield cv-tab-icon"></i> {{ 'labels.inputs.CKYC' | translate }}
      </a>
      <a mat-tab-link [routerLink]="['./form60']" routerLinkActive #form60="routerLinkActive" [active]="form60.isActive">
        <i class="fa fa-file-text cv-tab-icon"></i> {{ 'labels.inputs.Form 60' | translate }}
      </a>
      <a mat-tab-link [routerLink]="['./documents']" routerLinkActive #documents="routerLinkActive" [active]="documents.isActive" *mifosxHasPermission="'READ_DOCUMENT'">
        <i class="fa fa-folder-open cv-tab-icon"></i> {{ 'labels.inputs.Documents' | translate }}
      </a>
      <a mat-tab-link [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive" [active]="notes.isActive" *mifosxHasPermission="'READ_CLIENTNOTE'">
        <i class="fa fa-sticky-note cv-tab-icon"></i> {{ 'labels.inputs.Notes' | translate }}
      </a>
      @for (clientDatatable of clientDatatables; track clientDatatable) {
        <a
          mat-tab-link
          [routerLink]="['./datatables', clientDatatable.registeredTableName]"
          routerLinkActive
          #datatable="routerLinkActive"
          [active]="datatable.isActive"
          *mifosxHasPermission="'READ_' + clientDatatable.registeredTableName"
        >
          {{ formatTabLabel(clientDatatable.registeredTableName) }}
        </a>
      }
    </nav>
    <mat-tab-nav-panel #tabPanel>
      <router-outlet></router-outlet>
    </mat-tab-nav-panel>
  </div>
</div>