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
2026-04-04 15:10:51 +05:30
co-authored by Claude Opus 4.6
parent ab01111424
commit b890d24bb7
522 changed files with 51991 additions and 21885 deletions
@@ -7,226 +7,159 @@
*/
/** Angular Imports */
import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { LegalFormId } from 'app/clients/models/legal-form.enum';
import {
UntypedFormBuilder,
UntypedFormGroup,
Validators,
UntypedFormControl,
ReactiveFormsModule
} from '@angular/forms';
import { Component, QueryList, ViewChild, ViewChildren, inject } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
/** Custom Services */
import { ClientsService } from '../clients.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { ExternalNationalIdService } from 'app/clients/services/external-national-id.service';
/** Custom Components */
import { ClientGeneralStepComponent } from '../client-stepper/client-general-step/client-general-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';
import { MatTabsModule } from '@angular/material/tabs';
import { MatIconModule } from '@angular/material/icon';
import { MatDivider } from '@angular/material/divider';
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { MatCheckbox } from '@angular/material/checkbox';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatTooltip } from '@angular/material/tooltip';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
/**
* Edit Client Component
* Edit Client Component — uses the same wizard/stepper layout as Create Client.
*/
@Component({
selector: 'mifosx-edit-client',
templateUrl: './edit-client.component.html',
styleUrls: ['./edit-client.component.scss'],
providers: [ExternalNationalIdService],
imports: [
...STANDALONE_SHARED_IMPORTS,
MatTabsModule,
MatIconModule,
MatDivider,
CdkTextareaAutosize,
MatCheckbox
FaIconComponent,
MatProgressSpinner,
MatTooltip,
ClientGeneralStepComponent,
ClientAddressStepComponent,
ClientIndiaAddressStepComponent,
ClientEntityKycStepComponent,
ClientDatatableStepComponent,
ClientKycStepComponent,
ClientPreviewStepComponent,
ClientFamilyMembersStepComponent
]
})
export class EditClientComponent implements OnInit {
private formBuilder = inject(UntypedFormBuilder);
export class EditClientComponent {
private route = inject(ActivatedRoute);
private router = inject(Router);
private clientsService = inject(ClientsService);
private dateUtils = inject(Dates);
private settingsService = inject(SettingsService);
externalNationalIdService = inject(ExternalNationalIdService);
/** Minimum date allowed. */
minDate = new Date(2000, 0, 1);
/** Maximum date allowed. */
maxDate = new Date();
@ViewChild(ClientGeneralStepComponent) clientGeneralStep: ClientGeneralStepComponent;
@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>;
/** Client Data and Template */
datatables: any = [];
legalFormType = 1;
selectedTabIndex = 0;
savingClient = false;
/** Track which tabs are in edit mode (false = read-only, true = editable) */
tabEditMode: Record<number, boolean> = {};
/** Client data and template (merged object from resolver) */
clientDataAndTemplate: any;
/** Edit Client Form */
editClientForm: UntypedFormGroup;
/** Client ID */
clientId: string;
/** Office Options */
officeOptions: any;
/** Staff Options */
staffOptions: any;
/** Legal Form Options */
legalFormOptions: any;
/** Client Type Options */
clientTypeOptions: any;
/** Client Classification Options */
clientClassificationTypeOptions: any;
/** Business Line Options */
businessLineOptions: any;
/** Constitution Options */
constitutionOptions: any;
/** Gender Options */
genderOptions: any;
legalFormId = LegalFormId.PERSON;
/** Expose enum to template */
readonly LegalFormId = LegalFormId;
/**
* Fetches client template data from `resolve`
* @param {FormBuilder} formBuilder Form Builder
* @param {ActivatedRoute} route ActivatedRoute
* @param {Router} router Router
* @param {ClientsService} clientsService Clients Service
* @param {Dates} dateUtils Date Utils
* @param {SettingsService} settingsService Settings Service
*/
constructor() {
this.route.data.subscribe((data: { clientDataAndTemplate: any }) => {
this.clientDataAndTemplate = data.clientDataAndTemplate;
});
}
ngOnInit() {
this.maxDate = this.settingsService.businessDate;
this.createEditClientForm();
this.setOptions();
this.buildDependencies();
this.legalFormId = LegalFormId.PERSON;
this.editClientForm.patchValue({
officeId: this.clientDataAndTemplate.officeId,
staffId: this.clientDataAndTemplate.staffId,
legalFormId: this.clientDataAndTemplate.legalForm && this.clientDataAndTemplate.legalForm.id,
accountNo: this.clientDataAndTemplate.accountNo,
externalId: this.clientDataAndTemplate.externalId,
genderId: this.clientDataAndTemplate.gender && this.clientDataAndTemplate.gender.id,
isStaff: this.clientDataAndTemplate.isStaff,
active: this.clientDataAndTemplate.active,
mobileNo: this.clientDataAndTemplate.mobileNo,
emailAddress: this.clientDataAndTemplate.emailAddress,
dateOfBirth: this.clientDataAndTemplate.dateOfBirth && new Date(this.clientDataAndTemplate.dateOfBirth),
clientTypeId: this.clientDataAndTemplate.clientType && this.clientDataAndTemplate.clientType.id,
clientClassificationId:
this.clientDataAndTemplate.clientClassification && this.clientDataAndTemplate.clientClassification.id,
submittedOnDate:
this.clientDataAndTemplate.timeline.submittedOnDate &&
new Date(this.clientDataAndTemplate.timeline.submittedOnDate),
activationDate:
this.clientDataAndTemplate.timeline.activatedOnDate &&
new Date(this.clientDataAndTemplate.timeline.activatedOnDate)
});
if (this.clientDataAndTemplate.legalForm) {
this.legalFormId = this.clientDataAndTemplate.legalForm.id;
}
// skipInitialValue=true: avoid re-fetching data for an already-saved external ID
this.externalNationalIdService.watchExternalId(this.editClientForm, this.genderOptions, true);
}
/**
* Creates the edit client form.
*/
createEditClientForm() {
this.editClientForm = this.formBuilder.group({
officeId: [{ value: '', disabled: true }],
staffId: [''],
legalFormId: [{ value: '', disabled: true }],
isStaff: [false],
active: [false],
accountNo: [{ value: '', disabled: true }],
externalId: [''],
genderId: [''],
mobileNo: [''],
emailAddress: [
'',
Validators.email
],
dateOfBirth: [''],
clientTypeId: [''],
clientClassificationId: [''],
submittedOnDate: [
'',
Validators.required
],
activationDate: ['']
});
}
/**
* Sets select dropdown options.
*/
setOptions() {
this.officeOptions = this.clientDataAndTemplate.officeOptions;
this.staffOptions = this.clientDataAndTemplate.staffOptions;
this.legalFormOptions = this.clientDataAndTemplate.clientLegalFormOptions;
this.clientTypeOptions = this.clientDataAndTemplate.clientTypeOptions;
this.clientClassificationTypeOptions = this.clientDataAndTemplate.clientClassificationOptions;
this.businessLineOptions = this.clientDataAndTemplate.clientNonPersonMainBusinessLineOptions;
this.constitutionOptions = this.clientDataAndTemplate.clientNonPersonConstitutionOptions;
this.genderOptions = this.clientDataAndTemplate.genderOptions;
}
/**
* Adds controls conditionally.
*/
buildDependencies() {
this.editClientForm.get('legalFormId').valueChanges.subscribe((legalFormId: any) => {
if (legalFormId === LegalFormId.PERSON) {
this.editClientForm.removeControl('fullname');
this.editClientForm.removeControl('clientNonPersonDetails');
this.editClientForm.addControl(
'firstname',
new UntypedFormControl(this.clientDataAndTemplate.firstname, Validators.required)
);
this.editClientForm.addControl('middlename', new UntypedFormControl(this.clientDataAndTemplate.middlename));
this.editClientForm.addControl(
'lastname',
new UntypedFormControl(this.clientDataAndTemplate.lastname, Validators.required)
);
} else {
this.editClientForm.removeControl('firstname');
this.editClientForm.removeControl('middlename');
this.editClientForm.removeControl('lastname');
this.editClientForm.addControl(
'fullname',
new UntypedFormControl(this.clientDataAndTemplate.fullname, Validators.required)
);
this.editClientForm.addControl(
'clientNonPersonDetails',
this.formBuilder.group({
constitutionId: [
this.clientDataAndTemplate.clientNonPersonDetails.constitution &&
this.clientDataAndTemplate.clientNonPersonDetails.constitution.id,
Validators.required
],
incorpValidityTillDate: [
this.clientDataAndTemplate.clientNonPersonDetails.incorpValidityTillDate &&
new Date(this.clientDataAndTemplate.clientNonPersonDetails.incorpValidityTillDate)
],
incorpNumber: [this.clientDataAndTemplate.clientNonPersonDetails.incorpNumber],
mainBusinessLineId: [
this.clientDataAndTemplate.clientNonPersonDetails.mainBusinessLine &&
this.clientDataAndTemplate.clientNonPersonDetails.mainBusinessLine.id
],
remarks: [this.clientDataAndTemplate.clientNonPersonDetails.remarks]
})
);
this.clientId = this.clientDataAndTemplate.id;
if (this.clientDataAndTemplate.legalForm) {
this.legalFormType = this.clientDataAndTemplate.legalForm.id;
}
});
}
getDateLabel(legalFormId: number, values: string[]): string {
return legalFormId === LegalFormId.PERSON ? values[0] : values[1];
/** Check if a tab is in read-only mode */
isTabReadOnly(tabIndex: number): boolean {
return !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 (+1 for Nominees, +1 for Non-Individual Entity KYC) */
get totalTabs(): number {
return this.legalFormType === 2 ? 6 : 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 || {};
return { ...general };
}
areFormvalids(): boolean {
if (!this.clientGeneralStep || !this.clientGeneralForm) {
return false;
}
let areValids = this.clientGeneralForm.valid;
if (this.clientGeneralStep.sanctionsBlocked) {
return false;
}
return areValids;
}
/**
* Next button handler — just navigates between tabs (client already exists in edit mode).
*/
onNext() {
if (this.selectedTabIndex === 0) {
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;
}
}
this.selectedTabIndex = this.selectedTabIndex + 1;
}
legalFormChange(eventData: { legalForm: number }) {
this.legalFormType = eventData.legalForm;
}
/**
@@ -235,33 +168,144 @@ export class EditClientComponent implements OnInit {
submit() {
const locale = this.settingsService.language.code;
const dateFormat = this.settingsService.dateFormat;
const editClientFormValue: any = this.editClientForm.getRawValue();
const clientData = {
...editClientFormValue,
dateOfBirth:
editClientFormValue.dateOfBirth && this.dateUtils.formatDate(editClientFormValue.dateOfBirth, dateFormat),
submittedOnDate:
editClientFormValue.submittedOnDate &&
this.dateUtils.formatDate(editClientFormValue.submittedOnDate, dateFormat),
activationDate: this.dateUtils.formatDate(editClientFormValue.activationDate, dateFormat),
...this.client,
dateFormat,
locale
};
// Remove fields not accepted by update API
delete clientData.officeId;
if (editClientFormValue.clientNonPersonDetails) {
clientData.clientNonPersonDetails = {
...editClientFormValue.clientNonPersonDetails,
incorpValidityTillDate:
editClientFormValue.clientNonPersonDetails.incorpValidityTillDate &&
this.dateUtils.formatDate(editClientFormValue.clientNonPersonDetails.incorpValidityTillDate, dateFormat),
dateFormat,
locale
};
} else {
clientData.clientNonPersonDetails = {};
}
this.clientsService.updateClient(this.clientDataAndTemplate.id, clientData).subscribe(() => {
this.router.navigate(['../'], { relativeTo: this.route });
this.savingClient = true;
this.clientsService.updateClient(this.clientId, clientData).subscribe({
next: () => {
this.savingClient = false;
const navigateBack = () => this.router.navigate(['../'], { relativeTo: this.route });
// Upload photo if selected
if (this.clientKycStep?.photographFile) {
this.clientsService.uploadClientProfileImage(this.clientId, this.clientKycStep.photographFile).subscribe({ error: () => {} });
}
// Upload signature if selected
if (this.clientKycStep?.signatureFile) {
this.clientsService.uploadClientSignatureImage(this.clientId, this.clientKycStep.signatureFile).subscribe({ error: () => {} });
}
// Save addresses from India address step
if (this.clientIndiaAddressStep?.hasAddressData) {
this.saveClientAddresses(this.clientId);
}
// Save new family members
if (this.clientFamilyMembersStep?.hasFamilyMembers) {
this.saveClientFamilyMembers(this.clientId);
}
// Save/update KYC data if available
if (this.clientKycStep?.hasKycData) {
this.clientsService.saveClientKyc(this.clientId, this.clientKycStep.kycData).subscribe({
next: () => navigateBack(),
error: () => navigateBack()
});
} else {
navigateBack();
}
},
error: () => {
this.savingClient = false;
}
});
}
/**
* Save addresses from the India address step to Fineract address API.
*/
private saveClientAddresses(clientId: string) {
const addressData = this.clientIndiaAddressStep.addressData;
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;
const possibleNames = typeNameMap[tab] || [tab];
let typeId = typeOptions.find((t: any) =>
possibleNames.some((n: string) => t.name?.toLowerCase().includes(n.toLowerCase()))
)?.id;
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'
};
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: () => {}
});
}
private saveClientFamilyMembers(clientId: string) {
const members = this.clientFamilyMembersStep.clientFamilyMembers;
for (const member of members) {
// Skip existing members (already have an id from the API)
if (member.id) continue;
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: () => {} });
}
}