376 lines
16 KiB
HTML
376 lines
16 KiB
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)">
|
|
@if (hasPendingGeneralEdit) {
|
|
<div class="pending-edit-banner">
|
|
<mat-icon>hourglass_top</mat-icon>
|
|
<span
|
|
>An edit is awaiting approval from another user. You can't submit another edit until it's resolved.</span
|
|
>
|
|
</div>
|
|
}
|
|
<div class="tab-mode-bar">
|
|
@if (isTabReadOnly(0)) {
|
|
<button
|
|
mat-flat-button
|
|
class="tab-mode-btn tab-mode-btn--edit"
|
|
[disabled]="hasPendingGeneralEdit"
|
|
(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>
|
|
|
|
<!-- Dual-OTP contact-change verification panel — appears only once the mobile
|
|
number and/or email address differ from the loaded snapshot. Save stays
|
|
gated (see currentStepValid) until every required block below is verified. -->
|
|
@if (!isTabReadOnly(0) && (contactChanges.mobileChanged || contactChanges.emailChanged)) {
|
|
<div class="contact-verify-panel">
|
|
<div class="contact-verify-panel__header">
|
|
<mat-icon>verified_user</mat-icon>
|
|
<div class="contact-verify-panel__header-text">
|
|
<strong>Verify Contact Change</strong>
|
|
<span
|
|
>An OTP must be verified on both the old and new
|
|
{{
|
|
contactChanges.mobileChanged && contactChanges.emailChanged
|
|
? 'mobile number and email address'
|
|
: contactChanges.mobileChanged
|
|
? 'mobile number'
|
|
: 'email address'
|
|
}}
|
|
before this change can be saved.</span
|
|
>
|
|
</div>
|
|
</div>
|
|
@if (contactChanges.mobileChanged) {
|
|
<div class="contact-verify-panel__field-group">
|
|
<div class="contact-verify-panel__field-title">
|
|
<mat-icon>phone_iphone</mat-icon>
|
|
<span>Mobile Number</span>
|
|
</div>
|
|
<div class="contact-verify-panel__exception-row" style="margin-bottom: 12px;">
|
|
<mat-checkbox
|
|
[checked]="oldMobileNotAccessible"
|
|
(change)="onOldMobileNotAccessibleToggle($event.checked)"
|
|
color="primary"
|
|
>
|
|
Old mobile number not accessible (lost / deactivated SIM)
|
|
</mat-checkbox>
|
|
</div>
|
|
<div class="contact-verify-panel__grid">
|
|
@if (!oldMobileNotAccessible) {
|
|
<mifosx-client-contact-otp-block
|
|
[clientId]="clientId"
|
|
channel="MOBILE"
|
|
[destination]="contactChanges.oldMobile"
|
|
label="Old Mobile Number"
|
|
(stateChange)="onOldMobileOtpState($event)"
|
|
></mifosx-client-contact-otp-block>
|
|
} @else {
|
|
<div class="fir-upload-box" style="padding: 12px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc;">
|
|
<div style="font-weight: 500; font-size: 13px; margin-bottom: 6px; color: #475569;">
|
|
Upload Police Complaint / FIR Copy for Lost Mobile
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<input type="file" (change)="onFirFileSelected($event)" accept=".pdf,.jpg,.jpeg,.png" #firFileInput hidden />
|
|
<button mat-stroked-button type="button" (click)="firFileInput.click()" [disabled]="uploadingFir">
|
|
<mat-icon>upload_file</mat-icon>
|
|
{{ firFileName ? firFileName : 'Select FIR Document' }}
|
|
</button>
|
|
@if (uploadingFir) {
|
|
<mat-progress-spinner mode="indeterminate" diameter="20"></mat-progress-spinner>
|
|
}
|
|
@if (firDocumentId && !uploadingFir) {
|
|
<span style="color: #16a34a; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 4px;">
|
|
<mat-icon style="font-size: 16px; width: 16px; height: 16px;">check_circle</mat-icon> FIR Uploaded Successfully
|
|
</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
<mifosx-client-contact-otp-block
|
|
[clientId]="clientId"
|
|
channel="MOBILE"
|
|
[destination]="contactChanges.newMobile"
|
|
label="New Mobile Number"
|
|
(stateChange)="onNewMobileOtpState($event)"
|
|
></mifosx-client-contact-otp-block>
|
|
</div>
|
|
</div>
|
|
}
|
|
@if (contactChanges.emailChanged) {
|
|
<div class="contact-verify-panel__field-group">
|
|
<div class="contact-verify-panel__field-title">
|
|
<mat-icon>email</mat-icon>
|
|
<span>Email Address</span>
|
|
</div>
|
|
<div class="contact-verify-panel__grid">
|
|
<mifosx-client-contact-otp-block
|
|
[clientId]="clientId"
|
|
channel="EMAIL"
|
|
[destination]="contactChanges.oldEmail"
|
|
label="Old Email Address"
|
|
(stateChange)="onOldEmailOtpState($event)"
|
|
></mifosx-client-contact-otp-block>
|
|
<mifosx-client-contact-otp-block
|
|
[clientId]="clientId"
|
|
channel="EMAIL"
|
|
[destination]="contactChanges.newEmail"
|
|
label="New Email Address"
|
|
(stateChange)="onNewEmailOtpState($event)"
|
|
></mifosx-client-contact-otp-block>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</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 & 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"
|
|
[isMinor]="clientGeneralStep?.isMinor || false"
|
|
[clientId]="clientId"
|
|
[readOnly]="isTabReadOnly(1)"
|
|
[calculatedRisk]="clientGeneralStep?.calculatedRisk"
|
|
></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 & 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"
|
|
[isMinor]="clientGeneralStep?.isMinor || false"
|
|
[isNonIndividual]="legalFormType === 2"
|
|
[readOnly]="isTabReadOnly(addressTabIdx)"
|
|
></mifosx-client-india-address-step>
|
|
</div>
|
|
</mat-tab>
|
|
|
|
<!-- Tab: Family / Nominees — hidden for entity clients that aren't proprietorships -->
|
|
@if (showFamilyTab) {
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<fa-icon icon="users" class="tab-icon"></fa-icon>
|
|
{{ familyTabNomineeOnly ? 'NOMINEES' : '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)"
|
|
[nomineeOnly]="familyTabNomineeOnly"
|
|
></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 || []"
|
|
[constitutionLabel]="constitutionLabel"
|
|
[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]="!currentStepValid"
|
|
[matTooltip]="currentStepBlockerMessage"
|
|
[matTooltipDisabled]="currentStepValid"
|
|
matTooltipPosition="above"
|
|
>
|
|
@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 & 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>
|