cbsnexora/src/app/clients/edit-client/edit-client.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="create-client-container">
  <div class="client-header">
    <fa-icon icon="user" class="header-icon"></fa-icon>
    <h2>{{ 'labels.heading.Edit Client' | translate }}</h2>
  </div>

  <mat-tab-group
    class="client-tabs"
    animationDuration="200ms"
    [preserveContent]="true"
    [(selectedIndex)]="selectedTabIndex"
  >
    <!-- Tab 1: General Details -->
    <mat-tab>
      <ng-template mat-tab-label>
        <fa-icon icon="user" class="tab-icon"></fa-icon>
        {{ 'labels.inputs.GENERAL' | translate }}
      </ng-template>
      <div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(0)">
        <div class="tab-mode-bar">
          @if (isTabReadOnly(0)) {
            <button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(0)">
              <mat-icon>edit</mat-icon> Edit
            </button>
          } @else {
            <button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(0)">
              <mat-icon>close</mat-icon> Cancel
            </button>
          }
        </div>
        <mifosx-client-general-step
          [clientTemplate]="clientDataAndTemplate"
          [clientData]="clientDataAndTemplate"
          [readOnly]="isTabReadOnly(0)"
          (legalFormChangeEvent)="legalFormChange($event)"
        ></mifosx-client-general-step>
      </div>
    </mat-tab>

    <!-- Tab 2: KYC & Documents -->
    <mat-tab>
      <ng-template mat-tab-label>
        <fa-icon icon="id-card" class="tab-icon"></fa-icon>
        KYC &amp; Documents
      </ng-template>
      <div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(1)">
        <div class="tab-mode-bar">
          @if (isTabReadOnly(1)) {
            <button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(1)">
              <mat-icon>edit</mat-icon> Edit
            </button>
          } @else {
            <button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(1)">
              <mat-icon>close</mat-icon> Cancel
            </button>
          }
        </div>
        @if (dobChanged) {
          <div class="rekyc-alert">
            <mat-icon class="rekyc-alert__icon">warning</mat-icon>
            <div class="rekyc-alert__text">
              <strong>Re-KYC Required:</strong> Client name or date of birth was changed. Please re-verify PAN and
              update the remarks below before proceeding.
            </div>
          </div>
        }
        <div class="tab-section">
          <mifosx-client-kyc-step
            #clientKyc
            [isNonIndividual]="legalFormType === 2"
            [clientId]="clientId"
            [readOnly]="isTabReadOnly(1)"
          ></mifosx-client-kyc-step>
        </div>
      </div>
    </mat-tab>

    <!-- Tab 3: Entity MSME & KYC (Non-Individual only) -->
    @if (legalFormType === 2) {
      <mat-tab>
        <ng-template mat-tab-label>
          <fa-icon icon="building" class="tab-icon"></fa-icon>
          Scheme &amp; Sector Classification
        </ng-template>
        <div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(2)">
          <div class="tab-mode-bar">
            @if (isTabReadOnly(2)) {
              <button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(2)">
                <mat-icon>edit</mat-icon> Edit
              </button>
            } @else {
              <button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(2)">
                <mat-icon>close</mat-icon> Cancel
              </button>
            }
          </div>
          <mifosx-client-entity-kyc-step
            #clientEntityKyc
            [constitutionType]="getConstitutionType()"
            [readOnly]="isTabReadOnly(2)"
          ></mifosx-client-entity-kyc-step>
        </div>
      </mat-tab>
    }

    <!-- Tab: Address -->
    <mat-tab>
      <ng-template mat-tab-label>
        <fa-icon icon="map" class="tab-icon"></fa-icon>
        ADDRESS
      </ng-template>
      @let addressTabIdx = legalFormType === 2 ? 3 : 2;
      <div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(addressTabIdx)">
        <div class="tab-mode-bar">
          @if (isTabReadOnly(addressTabIdx)) {
            <button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(addressTabIdx)">
              <mat-icon>edit</mat-icon> Edit
            </button>
          } @else {
            <button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(addressTabIdx)">
              <mat-icon>close</mat-icon> Cancel
            </button>
          }
        </div>
        <mifosx-client-india-address-step
          #clientIndiaAddress
          [clientId]="clientId"
          [readOnly]="isTabReadOnly(addressTabIdx)"
        ></mifosx-client-india-address-step>
      </div>
    </mat-tab>

    <!-- Tab: Family Members / Nominees -->
    <mat-tab>
      <ng-template mat-tab-label>
        <fa-icon icon="users" class="tab-icon"></fa-icon>
        FAMILY
      </ng-template>
      @let familyTabIdx = legalFormType === 2 ? 4 : 3;
      <div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(familyTabIdx)">
        <div class="tab-mode-bar">
          @if (isTabReadOnly(familyTabIdx)) {
            <button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(familyTabIdx)">
              <mat-icon>edit</mat-icon> Edit
            </button>
          } @else {
            <button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(familyTabIdx)">
              <mat-icon>close</mat-icon> Cancel
            </button>
          }
        </div>
        <mifosx-client-family-members-step
          #clientFamilyMembers
          [clientTemplate]="clientDataAndTemplate"
          [clientId]="clientId"
          [readOnly]="isTabReadOnly(familyTabIdx)"
        ></mifosx-client-family-members-step>
      </div>
    </mat-tab>

    <!-- Tab: Application Summary & Submit -->
    <mat-tab>
      <ng-template mat-tab-label>
        <fa-icon icon="eye" class="tab-icon"></fa-icon>
        Application Summary
      </ng-template>
      <div class="tab-content">
        <mifosx-client-preview-step
          [clientTemplate]="clientDataAndTemplate"
          [client]="client"
          [kycData]="clientKycStep?.kycData"
          [addressData]="clientIndiaAddressStep?.addressData"
          [guardian]="clientGeneralStep?.selectedGuardian"
          [guardianRelation]="clientGeneralStep?.createClientForm?.get('guardianDetails.guardianRelation')?.value || ''"
          [entityClassificationData]="clientEntityKycStep?.classificationData"
          [familyMembers]="clientFamilyMembersStep?.clientFamilyMembers || []"
          [maritalStatusId]="clientGeneralStep?.createClientForm?.get('maritalStatusId')?.value"
          [maritalStatusOptions]="clientGeneralStep?.maritalStatusOptions || []"
          [educationLevelOptions]="clientGeneralStep?.educationLevelOptions || []"
          [degreeQualificationOptions]="clientGeneralStep?.degreeQualificationOptions || []"
          [religionOptions]="clientGeneralStep?.religionOptions || []"
          [socialCategoryOptions]="clientGeneralStep?.socialCategoryOptions || []"
          (submitEvent)="submit()"
        ></mifosx-client-preview-step>
      </div>
    </mat-tab>
  </mat-tab-group>

  <!-- Bottom Action Bar -->
  <div class="action-bar">
    <button mat-raised-button [routerLink]="['../']" class="cancel-btn">
      {{ 'labels.buttons.Cancel' | translate }}
    </button>
    <div class="action-bar-right">
      @if (selectedTabIndex > 0) {
        <button mat-raised-button (click)="selectedTabIndex = selectedTabIndex - 1">
          <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
          {{ 'labels.buttons.Previous' | translate }}
        </button>
      }
      @if (selectedTabIndex < totalTabs - 1) {
        <button mat-raised-button color="primary" (click)="onNext()" [disabled]="savingClient">
          @if (savingClient) {
            <mat-progress-spinner diameter="18" mode="indeterminate" class="m-r-10"></mat-progress-spinner>
            Saving...
          } @else if (isCurrentTabEdited()) {
            <fa-icon icon="save" class="m-r-10"></fa-icon>
            Save &amp; Next
            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
          } @else {
            {{ 'labels.buttons.Next' | translate }}
            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
          }
        </button>
      }
      @if (selectedTabIndex === totalTabs - 1 && areFormvalids()) {
        <button mat-raised-button color="primary" (click)="submit()" [disabled]="savingClient">
          @if (savingClient) {
            <mat-progress-spinner diameter="18" mode="indeterminate" class="m-r-10"></mat-progress-spinner>
            Saving...
          } @else {
            <fa-icon icon="check" class="m-r-10"></fa-icon>
            {{ 'labels.buttons.Submit' | translate }}
          }
        </button>
      }
    </div>
  </div>
</div>