feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API
- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview - Hide Financial & Classification section for non-individual entities in personal data and preview - Fix legal form column in clients list — fetch legalForm from client API for correct display - Add person/business icon before client name in list rows - Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API - Add registration number format hint (mat-hint) based on constitution type - Add spacing between verification row and constitution type dropdowns - Reduce table cell padding and prevent action buttons from being clipped - Add missing MPL-2.0 license headers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ab01111424
commit
b890d24bb7
@@ -19,9 +19,23 @@
|
||||
<fa-icon icon="user" class="tab-icon"></fa-icon>
|
||||
{{ 'labels.inputs.GENERAL' | translate }}
|
||||
</ng-template>
|
||||
<div class="tab-content">
|
||||
<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"
|
||||
[readOnly]="isTabReadOnly(0)"
|
||||
(legalFormChangeEvent)="legalFormChange($event)"
|
||||
></mifosx-client-general-step>
|
||||
</div>
|
||||
@@ -31,32 +45,31 @@
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<fa-icon icon="id-card" class="tab-icon"></fa-icon>
|
||||
{{ 'labels.inputs.KYC' | translate }} & {{ 'labels.inputs.Nominee' | translate }}
|
||||
KYC & Documents
|
||||
</ng-template>
|
||||
<div class="tab-content">
|
||||
<div class="tab-section">
|
||||
<mifosx-client-kyc-step #clientKyc></mifosx-client-kyc-step>
|
||||
</div>
|
||||
|
||||
<mat-divider class="section-divider"></mat-divider>
|
||||
|
||||
<div class="tab-section">
|
||||
<mifosx-client-family-members-step
|
||||
#clientFamily
|
||||
[clientTemplate]="clientTemplate"
|
||||
></mifosx-client-family-members-step>
|
||||
</div>
|
||||
|
||||
@if (clientTemplate.isAddressEnabled) {
|
||||
<mat-divider class="section-divider"></mat-divider>
|
||||
<div class="tab-section">
|
||||
<mifosx-client-address-step
|
||||
#clientAddress
|
||||
[clientTemplate]="clientTemplate"
|
||||
[clientAddressFieldConfig]="clientAddressFieldConfig"
|
||||
></mifosx-client-address-step>
|
||||
<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"
|
||||
[clientId]="createdClientId"
|
||||
[constitutionMeta]="clientGeneralStep?.selectedConstitution"
|
||||
[entityName]="clientGeneralStep?.createClientForm?.get('fullname')?.value || ''"
|
||||
[readOnly]="isTabReadOnly(1)"
|
||||
></mifosx-client-kyc-step>
|
||||
</div>
|
||||
|
||||
@for (datatable of datatables; track datatable) {
|
||||
<mat-divider class="section-divider"></mat-divider>
|
||||
@@ -68,11 +81,102 @@
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Tab 3: Preview & Submit -->
|
||||
<!-- 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
|
||||
[readOnly]="isTabReadOnly(addressTabIdx)"
|
||||
></mifosx-client-india-address-step>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Tab: Family Members / Nominees (Individual only) -->
|
||||
@if (legalFormType !== 2) {
|
||||
<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)">
|
||||
@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)"
|
||||
></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>
|
||||
{{ 'labels.inputs.PREVIEW' | translate }}
|
||||
Application Summary
|
||||
</ng-template>
|
||||
<div class="tab-content">
|
||||
<mifosx-client-preview-step
|
||||
@@ -80,12 +184,28 @@
|
||||
[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 || []"
|
||||
[maritalStatusId]="clientGeneralStep?.createClientForm?.get('maritalStatusId')?.value"
|
||||
[maritalStatusOptions]="clientGeneralStep?.maritalStatusOptions || []"
|
||||
(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">
|
||||
@@ -98,13 +218,24 @@
|
||||
{{ 'labels.buttons.Previous' | translate }}
|
||||
</button>
|
||||
}
|
||||
@if (selectedTabIndex < 2) {
|
||||
<button mat-raised-button color="primary" (click)="selectedTabIndex = selectedTabIndex + 1">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
@if (selectedTabIndex < totalTabs - 1) {
|
||||
<div class="save-next-wrapper">
|
||||
<button mat-raised-button color="primary" class="save-next-btn" (click)="onNext()" [disabled]="savingClient || (selectedTabIndex === 0 && clientGeneralStep?.sanctionsBlocked)">
|
||||
@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 === 2 && areFormvalids()) {
|
||||
@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 }}
|
||||
|
||||
@@ -30,6 +30,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.client-id-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
padding: 5px 14px;
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
border: 1px solid #a7f3d0;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.client-tabs {
|
||||
background: var(--md-sys-color-surface, #fff);
|
||||
border-radius: 8px;
|
||||
@@ -106,3 +121,111 @@
|
||||
.cancel-btn {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* ─── Read-only tab state ─── */
|
||||
.tab-content--readonly {
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ─── Tab mode toolbar ─── */
|
||||
.tab-mode-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
|
||||
.tab-mode-btn {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
height: 34px !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0 14px !important;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-mode-btn--edit {
|
||||
background: #1074b9 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.tab-mode-btn--cancel {
|
||||
background: #fff !important;
|
||||
color: #ef4444 !important;
|
||||
border: 1px solid #fca5a5 !important;
|
||||
}
|
||||
|
||||
/* Save & Next button wrapper */
|
||||
.save-next-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.save-next-btn {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
|
||||
.m-r-6 {
|
||||
margin-right: 6px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.save-spinner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.save-progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px !important;
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
::ng-deep .mdc-linear-progress__bar-inner {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
::ng-deep .mdc-linear-progress__buffer-bar {
|
||||
background-color: rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.validation-error-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-left: 4px solid #dc2626;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 13px;
|
||||
color: #991b1b;
|
||||
|
||||
mat-icon {
|
||||
color: #dc2626;
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span { flex: 1; }
|
||||
|
||||
button {
|
||||
flex-shrink: 0;
|
||||
color: #991b1b !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,18 +15,25 @@ import { ClientsService } from '../clients.service';
|
||||
|
||||
/** Custom Components */
|
||||
import { ClientGeneralStepComponent } from '../client-stepper/client-general-step/client-general-step.component';
|
||||
import { ClientFamilyMembersStepComponent } from '../client-stepper/client-family-members-step/client-family-members-step.component';
|
||||
import { ClientAddressStepComponent } from '../client-stepper/client-address-step/client-address-step.component';
|
||||
import { ClientIndiaAddressStepComponent } from '../client-stepper/client-india-address-step/client-india-address-step.component';
|
||||
import { ClientEntityKycStepComponent } from '../client-stepper/client-entity-kyc-step/client-entity-kyc-step.component';
|
||||
import { ClientDatatableStepComponent } from '../client-stepper/client-datatable-step/client-datatable-step.component';
|
||||
import { ClientKycStepComponent } from '../client-stepper/client-kyc-step/client-kyc-step.component';
|
||||
import { ClientPreviewStepComponent } from '../client-stepper/client-preview-step/client-preview-step.component';
|
||||
import { ClientFamilyMembersStepComponent } from '../client-stepper/client-family-members-step/client-family-members-step.component';
|
||||
|
||||
/** Custom Services */
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
||||
import { MatDivider } from '@angular/material/divider';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatDialog, MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
import { Inject } from '@angular/core';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
@@ -42,12 +49,17 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
MatIconModule,
|
||||
MatDivider,
|
||||
FaIconComponent,
|
||||
MatProgressSpinner,
|
||||
ClientGeneralStepComponent,
|
||||
ClientFamilyMembersStepComponent,
|
||||
ClientAddressStepComponent,
|
||||
ClientIndiaAddressStepComponent,
|
||||
ClientEntityKycStepComponent,
|
||||
ClientDatatableStepComponent,
|
||||
ClientKycStepComponent,
|
||||
ClientPreviewStepComponent
|
||||
ClientPreviewStepComponent,
|
||||
ClientFamilyMembersStepComponent,
|
||||
MatProgressBarModule,
|
||||
MatTooltip
|
||||
]
|
||||
})
|
||||
export class CreateClientComponent {
|
||||
@@ -55,16 +67,26 @@ export class CreateClientComponent {
|
||||
private router = inject(Router);
|
||||
private clientsService = inject(ClientsService);
|
||||
private settingsService = inject(SettingsService);
|
||||
private dialog = inject(MatDialog);
|
||||
|
||||
@ViewChild(ClientGeneralStepComponent) clientGeneralStep: ClientGeneralStepComponent;
|
||||
@ViewChild('clientFamily') clientFamilyMembersStep: ClientFamilyMembersStepComponent;
|
||||
@ViewChild('clientAddress') clientAddressStep: ClientAddressStepComponent;
|
||||
@ViewChild('clientIndiaAddress') clientIndiaAddressStep: ClientIndiaAddressStepComponent;
|
||||
@ViewChild('clientEntityKyc') clientEntityKycStep: ClientEntityKycStepComponent;
|
||||
@ViewChild('clientKyc') clientKycStep: ClientKycStepComponent;
|
||||
@ViewChild('clientFamilyMembers') clientFamilyMembersStep: ClientFamilyMembersStepComponent;
|
||||
@ViewChildren('dtclient') clientDatatables: QueryList<ClientDatatableStepComponent>;
|
||||
|
||||
datatables: any = [];
|
||||
legalFormType = 1;
|
||||
selectedTabIndex = 0;
|
||||
createdClientId = '';
|
||||
savingClient = false;
|
||||
|
||||
/** Track which tabs are in edit mode (false/undefined = read-only for completed tabs) */
|
||||
tabEditMode: Record<number, boolean> = {};
|
||||
/** Highest tab index reached — tabs below this show read-only when navigated back */
|
||||
highestTabReached = 0;
|
||||
|
||||
/** Client Template */
|
||||
clientTemplate: any;
|
||||
@@ -86,15 +108,40 @@ export class CreateClientComponent {
|
||||
});
|
||||
}
|
||||
|
||||
/** Check if a tab is in read-only mode (completed tab navigated back to) */
|
||||
isTabReadOnly(tabIndex: number): boolean {
|
||||
// Only tabs that have been passed (below highest reached) AND not explicitly set to edit mode
|
||||
return tabIndex < this.highestTabReached && !this.tabEditMode[tabIndex];
|
||||
}
|
||||
|
||||
/** Enable editing for a specific tab */
|
||||
enableTabEdit(tabIndex: number): void {
|
||||
this.tabEditMode[tabIndex] = true;
|
||||
}
|
||||
|
||||
/** Cancel editing — revert tab back to read-only */
|
||||
cancelTabEdit(tabIndex: number): void {
|
||||
this.tabEditMode[tabIndex] = false;
|
||||
}
|
||||
|
||||
get clientGeneralForm() {
|
||||
return this.clientGeneralStep?.createClientForm;
|
||||
}
|
||||
|
||||
/** Total tab count: Individual has Family tab, Non-Individual has Scheme & Sector tab — both 5 */
|
||||
get totalTabs(): number {
|
||||
return 5;
|
||||
}
|
||||
|
||||
/** Get constitution type from general step for entity KYC */
|
||||
getConstitutionType(): string {
|
||||
return this.clientGeneralStep?.createClientForm?.get('clientNonPersonDetails.constitutionId')?.value || '';
|
||||
}
|
||||
|
||||
get client() {
|
||||
const general = this.clientGeneralStep?.clientGeneralDetails || {};
|
||||
const family = this.clientFamilyMembersStep?.familyMembers || {};
|
||||
const addr = this.clientTemplate.isAddressEnabled && this.clientAddressStep ? this.clientAddressStep.address : {};
|
||||
return { ...general, ...family, ...addr };
|
||||
return { ...general, ...addr };
|
||||
}
|
||||
|
||||
areFormvalids(): boolean {
|
||||
@@ -131,26 +178,111 @@ export class CreateClientComponent {
|
||||
}
|
||||
}
|
||||
|
||||
legalFormChange(eventData: { legalForm: number }) {
|
||||
this.legalFormType = eventData.legalForm;
|
||||
this.setDatatables();
|
||||
/**
|
||||
* Next button handler — saves client on General tab before moving forward.
|
||||
*/
|
||||
/** Save progress percentage for progress bar */
|
||||
saveProgress = 0;
|
||||
|
||||
onNext() {
|
||||
// If on General tab and client not yet created — save first
|
||||
if (this.selectedTabIndex === 0 && !this.createdClientId) {
|
||||
if (!this.clientGeneralForm?.valid) {
|
||||
this.clientGeneralForm?.markAllAsTouched();
|
||||
setTimeout(() => {
|
||||
const firstInvalid = document.querySelector('.mat-mdc-form-field.ng-invalid');
|
||||
if (firstInvalid) {
|
||||
firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show confirmation dialog
|
||||
const dialogRef = this.dialog.open(SaveConfirmDialogComponent, {
|
||||
width: '440px',
|
||||
disableClose: true
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((confirmed: boolean) => {
|
||||
if (!confirmed) return;
|
||||
this.saveAndProceed();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Save current tab data before moving to next
|
||||
if (this.createdClientId) {
|
||||
this.saveCurrentTabData();
|
||||
}
|
||||
|
||||
this.selectedTabIndex = this.selectedTabIndex + 1;
|
||||
if (this.selectedTabIndex > this.highestTabReached) {
|
||||
this.highestTabReached = this.selectedTabIndex;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Submits the create client form.
|
||||
*/
|
||||
submit() {
|
||||
/** Save the current tab's data to the API */
|
||||
private saveCurrentTabData() {
|
||||
const tabIndex = this.selectedTabIndex;
|
||||
const clientId = this.createdClientId;
|
||||
|
||||
// KYC tab
|
||||
const kycTabIndex = 1;
|
||||
if (tabIndex === kycTabIndex) {
|
||||
// Save KYC
|
||||
if (this.clientKycStep?.hasKycData && !this.clientKycStep.kycId) {
|
||||
this.clientsService.saveClientKyc(clientId, this.clientKycStep.kycData).subscribe({ error: () => {} });
|
||||
}
|
||||
// Upload photo & signature
|
||||
if (this.clientKycStep?.photographFile) {
|
||||
this.clientsService.uploadClientProfileImage(clientId, this.clientKycStep.photographFile).subscribe({ error: () => {} });
|
||||
}
|
||||
if (this.clientKycStep?.signatureFile) {
|
||||
this.clientsService.uploadClientSignatureImage(clientId, this.clientKycStep.signatureFile).subscribe({ error: () => {} });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Address tab (index 2 for Individual, 3 for Non-Individual)
|
||||
const addressTabIndex = this.legalFormType === 2 ? 3 : 2;
|
||||
if (tabIndex === addressTabIndex) {
|
||||
if (this.clientIndiaAddressStep?.hasAddressData) {
|
||||
this.saveClientAddresses(clientId);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Family tab (index 3 for Individual, 4 for Non-Individual)
|
||||
const familyTabIndex = this.legalFormType === 2 ? 4 : 3;
|
||||
if (tabIndex === familyTabIndex) {
|
||||
if (this.clientFamilyMembersStep?.hasFamilyMembers) {
|
||||
this.saveClientFamilyMembers(clientId);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/** Executes the save API call with progress animation */
|
||||
private saveAndProceed() {
|
||||
this.savingClient = true;
|
||||
this.saveProgress = 0;
|
||||
|
||||
// Animate progress bar
|
||||
const progressInterval = setInterval(() => {
|
||||
if (this.saveProgress < 90) {
|
||||
this.saveProgress += Math.random() * 15;
|
||||
if (this.saveProgress > 90) this.saveProgress = 90;
|
||||
}
|
||||
}, 200);
|
||||
|
||||
const locale = this.settingsService.language.code;
|
||||
const dateFormat = this.settingsService.dateFormat;
|
||||
const clientData = {
|
||||
...this.client,
|
||||
dateFormat,
|
||||
locale
|
||||
};
|
||||
const clientData = { ...this.client, dateFormat, locale };
|
||||
|
||||
if (this.clientTemplate.datatables && this.clientTemplate.datatables.length > 0) {
|
||||
const datatables: any[] = [];
|
||||
this.clientDatatables.forEach((clientDatatable: ClientDatatableStepComponent) => {
|
||||
this.clientDatatables?.forEach((clientDatatable: ClientDatatableStepComponent) => {
|
||||
datatables.push(clientDatatable.payload);
|
||||
});
|
||||
if (datatables.length > 0) {
|
||||
@@ -158,36 +290,279 @@ export class CreateClientComponent {
|
||||
}
|
||||
}
|
||||
|
||||
this.clientsService.createClient(clientData).subscribe((response: any) => {
|
||||
const clientId = response.resourceId;
|
||||
if (this.clientKycStep?.hasKycData) {
|
||||
this.clientsService.saveClientKyc(clientId, this.clientKycStep.kycData).subscribe({
|
||||
complete: () =>
|
||||
this.router.navigate(
|
||||
[
|
||||
'../',
|
||||
clientId
|
||||
],
|
||||
{ relativeTo: this.route }
|
||||
),
|
||||
error: () =>
|
||||
this.router.navigate(
|
||||
[
|
||||
'../',
|
||||
clientId
|
||||
],
|
||||
{ relativeTo: this.route }
|
||||
)
|
||||
});
|
||||
} else {
|
||||
this.router.navigate(
|
||||
[
|
||||
'../',
|
||||
clientId
|
||||
],
|
||||
{ relativeTo: this.route }
|
||||
);
|
||||
this.clientsService.createClient(clientData).subscribe({
|
||||
next: (response: any) => {
|
||||
clearInterval(progressInterval);
|
||||
this.saveProgress = 100;
|
||||
this.createdClientId = response.resourceId;
|
||||
// Brief delay to show 100% before transitioning
|
||||
setTimeout(() => {
|
||||
this.savingClient = false;
|
||||
this.saveProgress = 0;
|
||||
this.selectedTabIndex = 1;
|
||||
this.highestTabReached = 1;
|
||||
}, 400);
|
||||
},
|
||||
error: () => {
|
||||
clearInterval(progressInterval);
|
||||
this.savingClient = false;
|
||||
this.saveProgress = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
legalFormChange(eventData: { legalForm: number }) {
|
||||
this.legalFormType = eventData.legalForm;
|
||||
this.setDatatables();
|
||||
}
|
||||
|
||||
/**
|
||||
* Submits the create client form.
|
||||
* If the client was already created via onNext(), reuse that client ID
|
||||
* instead of creating a duplicate.
|
||||
*/
|
||||
/** Validation error message for display */
|
||||
validationError = '';
|
||||
|
||||
submit() {
|
||||
// Validate: at least one family member required (Individual clients)
|
||||
if (this.legalFormType === 1 && this.clientFamilyMembersStep && !this.clientFamilyMembersStep.hasFamilyMembers) {
|
||||
this.validationError = 'At least one family member is required. Please add a family member before submitting.';
|
||||
// Switch to Family tab
|
||||
this.selectedTabIndex = 3;
|
||||
return;
|
||||
}
|
||||
this.validationError = '';
|
||||
|
||||
if (this.createdClientId) {
|
||||
// Client already created in onNext() — just finalize (upload files, navigate)
|
||||
this.finalizeClient(this.createdClientId);
|
||||
} else {
|
||||
// Fallback: create client now (shouldn't happen in normal flow)
|
||||
const locale = this.settingsService.language.code;
|
||||
const dateFormat = this.settingsService.dateFormat;
|
||||
const clientData = {
|
||||
...this.client,
|
||||
dateFormat,
|
||||
locale
|
||||
};
|
||||
|
||||
if (this.clientTemplate.datatables && this.clientTemplate.datatables.length > 0) {
|
||||
const datatables: any[] = [];
|
||||
this.clientDatatables.forEach((clientDatatable: ClientDatatableStepComponent) => {
|
||||
datatables.push(clientDatatable.payload);
|
||||
});
|
||||
if (datatables.length > 0) {
|
||||
clientData['datatables'] = datatables;
|
||||
}
|
||||
}
|
||||
|
||||
this.clientsService.createClient(clientData).subscribe((response: any) => {
|
||||
this.createdClientId = response.resourceId;
|
||||
this.finalizeClient(this.createdClientId);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Finalize: upload photo/signature, save KYC, save addresses, then navigate.
|
||||
*/
|
||||
private finalizeClient(clientId: string) {
|
||||
const navigateToClient = () => this.router.navigate(['../', clientId], { relativeTo: this.route });
|
||||
|
||||
// Upload photo if selected
|
||||
if (this.clientKycStep?.photographFile) {
|
||||
this.clientsService.uploadClientProfileImage(clientId, this.clientKycStep.photographFile).subscribe({ error: () => {} });
|
||||
}
|
||||
|
||||
// Upload signature if selected
|
||||
if (this.clientKycStep?.signatureFile) {
|
||||
this.clientsService.uploadClientSignatureImage(clientId, this.clientKycStep.signatureFile).subscribe({ error: () => {} });
|
||||
}
|
||||
|
||||
// Save addresses from India address step
|
||||
if (this.clientIndiaAddressStep?.hasAddressData) {
|
||||
this.saveClientAddresses(clientId);
|
||||
}
|
||||
|
||||
// Save family members
|
||||
if (this.clientFamilyMembersStep?.hasFamilyMembers) {
|
||||
this.saveClientFamilyMembers(clientId);
|
||||
}
|
||||
|
||||
// Save KYC only if it wasn't already created during the KYC step
|
||||
if (this.clientKycStep?.hasKycData && !this.clientKycStep.kycId) {
|
||||
this.clientsService.saveClientKyc(clientId, this.clientKycStep.kycData).subscribe({
|
||||
next: () => navigateToClient(),
|
||||
error: () => navigateToClient()
|
||||
});
|
||||
} else {
|
||||
navigateToClient();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save addresses from the India address step to Fineract address API.
|
||||
* Fetches address template to resolve address type IDs, then POSTs each address.
|
||||
*/
|
||||
private saveClientAddresses(clientId: string) {
|
||||
const addressData = this.clientIndiaAddressStep.addressData;
|
||||
// Map tab names to Fineract address type names (as defined in address template)
|
||||
const typeNameMap: Record<string, string[]> = {
|
||||
permanent: ['Permanent', 'Permanent Address'],
|
||||
current: ['Residential', 'Current', 'Current / Residential', 'Communication'],
|
||||
office: ['Office', 'Office / Work', 'Business', 'Work'],
|
||||
correspondence: ['Correspondence', 'Mailing', 'Postal']
|
||||
};
|
||||
|
||||
this.clientsService.getClientAddressTemplate().subscribe({
|
||||
next: (template: any) => {
|
||||
const typeOptions = template?.addressTypeIdOptions || [];
|
||||
for (const [tab, addr] of Object.entries(addressData)) {
|
||||
if (!addr || !(addr as any).addressLine1) continue;
|
||||
|
||||
// Find matching address type ID
|
||||
const possibleNames = typeNameMap[tab] || [tab];
|
||||
let typeId = typeOptions.find((t: any) =>
|
||||
possibleNames.some((n: string) => t.name?.toLowerCase().includes(n.toLowerCase()))
|
||||
)?.id;
|
||||
|
||||
// Fallback: use first available type if no match
|
||||
if (!typeId && typeOptions.length > 0) {
|
||||
typeId = typeOptions[0].id;
|
||||
}
|
||||
if (!typeId) continue;
|
||||
|
||||
const payload: any = {
|
||||
addressLine1: (addr as any).addressLine1 || '',
|
||||
addressLine2: (addr as any).addressLine2 || '',
|
||||
addressLine3: '',
|
||||
townVillage: (addr as any).locality || '',
|
||||
postalCode: (addr as any).pinCode || '',
|
||||
city: (addr as any).city || '',
|
||||
countyDistrict: (addr as any).district || '',
|
||||
street: (addr as any).landmark || '',
|
||||
addressType: typeId,
|
||||
isActive: tab === 'permanent'
|
||||
};
|
||||
|
||||
// Try to resolve state to stateProvinceId
|
||||
if ((addr as any).state && template?.stateProvinceIdOptions?.length) {
|
||||
const stateMatch = template.stateProvinceIdOptions.find((s: any) =>
|
||||
s.name?.toLowerCase() === (addr as any).state?.toLowerCase()
|
||||
);
|
||||
if (stateMatch) payload.stateProvinceId = stateMatch.id;
|
||||
}
|
||||
|
||||
this.clientsService.createClientAddress(clientId, typeId.toString(), payload).subscribe({ error: () => {} });
|
||||
}
|
||||
},
|
||||
error: () => {}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save family members via POST /clients/{id}/familymembers
|
||||
*/
|
||||
private saveClientFamilyMembers(clientId: string) {
|
||||
const members = this.clientFamilyMembersStep.clientFamilyMembers;
|
||||
for (const member of members) {
|
||||
const marriageCertFile = member._marriageCertFile || null;
|
||||
const payload = { ...member };
|
||||
// Remove internal/transient fields
|
||||
delete payload._linkedClient;
|
||||
delete payload._marriageCertFile;
|
||||
delete payload.dateFormat;
|
||||
delete payload.locale;
|
||||
payload.dateFormat = this.settingsService.dateFormat;
|
||||
payload.locale = this.settingsService.language.code;
|
||||
this.clientsService.addFamilyMember(clientId, payload).subscribe({
|
||||
next: (res: any) => {
|
||||
// Upload marriage certificate if present
|
||||
if (marriageCertFile && res?.resourceId) {
|
||||
this.uploadFamilyMemberDocument(clientId, res.resourceId, marriageCertFile, 'Marriage Certificate');
|
||||
}
|
||||
},
|
||||
error: () => {}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload a document for a family member.
|
||||
*/
|
||||
private uploadFamilyMemberDocument(clientId: string, familyMemberId: string, file: File, docName: string) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('name', docName);
|
||||
formData.append('description', docName);
|
||||
this.clientsService.uploadFamilyMemberDocument(clientId, familyMemberId, formData).subscribe({ error: () => {} });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save & Next Confirmation Dialog
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-save-confirm-dialog',
|
||||
template: `
|
||||
<div class="scd">
|
||||
<div class="scd-header">
|
||||
<div class="scd-header__icon-wrap">
|
||||
<mat-icon class="scd-header__icon">save</mat-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="scd-header__title">Save & Proceed</h3>
|
||||
<p class="scd-header__sub">Client general details will be saved</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scd-body">
|
||||
<p>Are you sure you want to save the client details and proceed to the next step?</p>
|
||||
<div class="scd-info">
|
||||
<mat-icon class="scd-info__icon">info</mat-icon>
|
||||
<span>Once saved, a client record will be created. You can update the details later.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scd-actions">
|
||||
<button mat-stroked-button [mat-dialog-close]="false" class="scd-cancel">
|
||||
<mat-icon>close</mat-icon>
|
||||
Cancel
|
||||
</button>
|
||||
<button mat-flat-button color="primary" [mat-dialog-close]="true" class="scd-confirm">
|
||||
<mat-icon>check</mat-icon>
|
||||
Save & Proceed
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.scd { background: #fff; border-radius: 12px; overflow: hidden; }
|
||||
.scd-header {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
padding: 20px 24px 16px;
|
||||
}
|
||||
.scd-header__icon-wrap {
|
||||
width: 44px; height: 44px; border-radius: 12px;
|
||||
background: #eff6ff; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.scd-header__icon { color: #1074b9; font-size: 24px; width: 24px; height: 24px; }
|
||||
.scd-header__title { margin: 0; font-size: 17px; font-weight: 700; color: #0f172a; }
|
||||
.scd-header__sub { margin: 2px 0 0; font-size: 12px; color: #64748b; }
|
||||
.scd-body { padding: 0 24px 20px; }
|
||||
.scd-body p { margin: 0 0 14px; font-size: 14px; color: #374151; line-height: 1.5; }
|
||||
.scd-info {
|
||||
display: flex; align-items: flex-start; gap: 8px;
|
||||
padding: 10px 14px; background: #f0f9ff; border: 1px solid #bae6fd;
|
||||
border-radius: 8px; font-size: 12px; color: #0c4a6e;
|
||||
}
|
||||
.scd-info__icon { font-size: 16px !important; width: 16px !important; height: 16px !important; color: #0284c7; flex-shrink: 0; margin-top: 1px; }
|
||||
.scd-actions {
|
||||
display: flex; justify-content: flex-end; gap: 10px;
|
||||
padding: 14px 24px; border-top: 1px solid #f1f5f9; background: #f8fafc;
|
||||
}
|
||||
.scd-cancel, .scd-confirm { display: flex !important; align-items: center; gap: 6px; font-size: 13px !important; height: 38px !important; border-radius: 8px !important; }
|
||||
.scd-confirm { font-weight: 600 !important; }
|
||||
`],
|
||||
imports: [MatIcon, MatDialogClose]
|
||||
})
|
||||
export class SaveConfirmDialogComponent {}
|
||||
|
||||
Reference in New Issue
Block a user