287 lines
11 KiB
HTML
287 lines
11 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-plus" class="header-icon"></fa-icon>
|
|
<h2>{{ 'labels.heading.Create 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 (0 < highestTabReached) {
|
|
<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]="clientTemplate"
|
|
[prefillData]="prefillData"
|
|
[readOnly]="isTabReadOnly(0)"
|
|
(legalFormChangeEvent)="legalFormChange($event)"
|
|
></mifosx-client-general-step>
|
|
</div>
|
|
</mat-tab>
|
|
|
|
<!-- Tab 2: KYC & Nominee -->
|
|
<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)">
|
|
@if (1 < highestTabReached) {
|
|
<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>
|
|
}
|
|
<div class="tab-section">
|
|
<mifosx-client-kyc-step
|
|
#clientKyc
|
|
[isNonIndividual]="legalFormType === 2"
|
|
[isMinor]="clientGeneralStep?.isMinor || false"
|
|
[clientId]="createdClientId"
|
|
[constitutionMeta]="clientGeneralStep?.selectedConstitution"
|
|
[entityName]="clientGeneralStep?.createClientForm?.get('fullname')?.value || ''"
|
|
[readOnly]="isTabReadOnly(1)"
|
|
[calculatedRisk]="clientGeneralStep?.calculatedRisk"
|
|
></mifosx-client-kyc-step>
|
|
</div>
|
|
|
|
@for (datatable of datatables; track datatable) {
|
|
<mat-divider class="section-divider"></mat-divider>
|
|
<div class="tab-section">
|
|
<h3>{{ datatable.registeredTableName }}</h3>
|
|
<mifosx-client-datatable-step [datatableData]="datatable" #dtclient></mifosx-client-datatable-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)">
|
|
@if (2 < highestTabReached) {
|
|
<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()"
|
|
[clientId]="createdClientId"
|
|
[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)">
|
|
@if (addressTabIdx < highestTabReached) {
|
|
<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
|
|
[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)">
|
|
@if (familyTabIdx < highestTabReached) {
|
|
<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]="clientTemplate"
|
|
[clientId]="createdClientId"
|
|
[maritalStatusId]="clientGeneralStep?.createClientForm?.get('maritalStatusId')?.value"
|
|
[maritalStatusOptions]="clientGeneralStep?.maritalStatusOptions || []"
|
|
[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]="clientTemplate"
|
|
[clientAddressFieldConfig]="clientAddressFieldConfig"
|
|
[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>
|
|
|
|
<!-- Validation Error Banner -->
|
|
@if (validationError) {
|
|
<div class="validation-error-bar">
|
|
<mat-icon>error</mat-icon>
|
|
<span>{{ validationError }}</span>
|
|
<button mat-icon-button (click)="validationError = ''"><mat-icon>close</mat-icon></button>
|
|
</div>
|
|
}
|
|
|
|
<!-- 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) {
|
|
<div class="save-next-wrapper">
|
|
<button
|
|
mat-raised-button
|
|
color="primary"
|
|
class="save-next-btn"
|
|
(click)="onNext()"
|
|
[disabled]="!currentStepValid"
|
|
[matTooltip]="currentStepBlockerMessage"
|
|
[matTooltipDisabled]="currentStepValid"
|
|
matTooltipPosition="above"
|
|
>
|
|
@if (savingClient) {
|
|
<mat-progress-spinner
|
|
diameter="18"
|
|
mode="indeterminate"
|
|
class="m-r-10 save-spinner"
|
|
></mat-progress-spinner>
|
|
Saving...
|
|
} @else {
|
|
<mat-icon class="m-r-6">save</mat-icon>
|
|
Save & Next
|
|
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
|
}
|
|
</button>
|
|
@if (savingClient) {
|
|
<mat-progress-bar mode="determinate" [value]="saveProgress" class="save-progress-bar"></mat-progress-bar>
|
|
}
|
|
</div>
|
|
}
|
|
@if (selectedTabIndex === totalTabs - 1 && areFormvalids()) {
|
|
<button mat-raised-button color="primary" (click)="submit()">
|
|
<fa-icon icon="check" class="m-r-10"></fa-icon>
|
|
{{ 'labels.buttons.Submit' | translate }}
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|