@@ -180,7 +180,7 @@
{{ 'labels.text.Current Status' | translate }}:
-
}
diff --git a/src/app/cfcfrms/escalate/escalate.component.ts b/src/app/cfcfrms/escalate/escalate.component.ts
index 16dc103c3..3f39b1298 100644
--- a/src/app/cfcfrms/escalate/escalate.component.ts
+++ b/src/app/cfcfrms/escalate/escalate.component.ts
@@ -26,7 +26,7 @@ import { ConfirmDialogComponent } from '../components/confirm-dialog/confirm-dia
import { Complaint, EscalationResponse } from '../models/cfcfrms.models';
@Component({
- selector: 'cfcfrms-escalate',
+ selector: 'mifosx-cfcfrms-escalate',
standalone: true,
imports: [
CommonModule,
diff --git a/src/app/cfcfrms/fmr-submission/fmr-submission.component.ts b/src/app/cfcfrms/fmr-submission/fmr-submission.component.ts
index f38aa7ca0..79addfef2 100644
--- a/src/app/cfcfrms/fmr-submission/fmr-submission.component.ts
+++ b/src/app/cfcfrms/fmr-submission/fmr-submission.component.ts
@@ -25,7 +25,7 @@ import { CfcfrmsService } from '../cfcfrms.service';
import { ConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
@Component({
- selector: 'cfcfrms-fmr-submission',
+ selector: 'mifosx-cfcfrms-fmr-submission',
standalone: true,
templateUrl: './fmr-submission.component.html',
styleUrls: ['./fmr-submission.component.scss'],
diff --git a/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.ts b/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.ts
index 6f9dc6d79..8bf3c40e0 100644
--- a/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.ts
+++ b/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.ts
@@ -24,7 +24,7 @@ import { CfcfrmsService } from '../cfcfrms.service';
import { ConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
@Component({
- selector: 'cfcfrms-report-fraud-txn',
+ selector: 'mifosx-cfcfrms-report-fraud-txn',
standalone: true,
templateUrl: './report-fraud-txn.component.html',
styleUrls: ['./report-fraud-txn.component.scss'],
diff --git a/src/app/cfcfrms/report-mule/report-mule.component.ts b/src/app/cfcfrms/report-mule/report-mule.component.ts
index 48d18aeaa..e1434f9c3 100644
--- a/src/app/cfcfrms/report-mule/report-mule.component.ts
+++ b/src/app/cfcfrms/report-mule/report-mule.component.ts
@@ -23,7 +23,7 @@ import { CfcfrmsService } from '../cfcfrms.service';
import { ConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
@Component({
- selector: 'cfcfrms-report-mule',
+ selector: 'mifosx-cfcfrms-report-mule',
standalone: true,
templateUrl: './report-mule.component.html',
styleUrls: ['./report-mule.component.scss'],
diff --git a/src/app/cfcfrms/report-suspect/report-suspect.component.ts b/src/app/cfcfrms/report-suspect/report-suspect.component.ts
index c7435c1d7..b8f8ee18a 100644
--- a/src/app/cfcfrms/report-suspect/report-suspect.component.ts
+++ b/src/app/cfcfrms/report-suspect/report-suspect.component.ts
@@ -24,7 +24,7 @@ import { CfcfrmsService } from '../cfcfrms.service';
import { ConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
@Component({
- selector: 'cfcfrms-report-suspect',
+ selector: 'mifosx-cfcfrms-report-suspect',
standalone: true,
templateUrl: './report-suspect.component.html',
styleUrls: ['./report-suspect.component.scss'],
diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts b/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts
index bc326ad04..06dee441f 100644
--- a/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts
+++ b/src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts
@@ -216,7 +216,7 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
}
this.searching = true;
this.searchTimer = setTimeout(() => {
- this.clientsService.searchByText(text, 0, 8).subscribe({
+ this.clientsService.searchByText(text, 0, 8, '', '', true).subscribe({
next: (data: any) => {
this.searchResults = data?.content || [];
this.searching = false;
diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts
index 07132b599..ec60d8867 100644
--- a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts
+++ b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts
@@ -161,8 +161,13 @@ export class ClientFamilyMembersStepComponent implements OnInit {
panelClass: 'fm-dialog-panel'
});
ref.afterClosed().subscribe((response: any) => {
- if (response?.member) {
- this.clientFamilyMembers.splice(index, 1, response.member);
+ if (!response?.member) return;
+ const updated = response.member;
+ this.clientFamilyMembers.splice(index, 1, updated);
+ // Persist to backend if this is an existing (already-saved) member
+ if (member.id && this.clientId) {
+ const { id, _linkedClient, _marriageCertFile, ...payload } = updated;
+ this.clientsService.editFamilyMember(this.clientId, member.id, payload).subscribe({ error: () => {} });
}
});
}
@@ -172,7 +177,15 @@ export class ClientFamilyMembersStepComponent implements OnInit {
data: { deleteContext: `${name}` }
});
ref.afterClosed().subscribe((response: any) => {
- if (response?.delete) {
+ if (!response?.delete) return;
+ const member = this.clientFamilyMembers[index];
+ // Persist deletion to backend for existing members; locally-added ones just drop from the array
+ if (member?.id && this.clientId) {
+ this.clientsService.deleteFamilyMember(this.clientId, member.id.toString()).subscribe({
+ next: () => this.clientFamilyMembers.splice(index, 1),
+ error: () => this.clientFamilyMembers.splice(index, 1)
+ });
+ } else {
this.clientFamilyMembers.splice(index, 1);
}
});
@@ -228,7 +241,7 @@ export class ClientFamilyMembersStepComponent implements OnInit {
}
this.nomineeSearching = true;
this.nomineeSearchTimer = setTimeout(() => {
- this.clientsService.searchByText(text, 0, 10).subscribe({
+ this.clientsService.searchByText(text, 0, 10, '', '', true).subscribe({
next: (data: any) => {
this.nomineeSearchResults = data?.content || [];
this.nomineeSearching = false;
@@ -324,7 +337,7 @@ export class ClientFamilyMembersStepComponent implements OnInit {
}
this.guardianSearching = true;
this.guardianSearchTimer = setTimeout(() => {
- this.clientsService.searchByText(text, 0, 10).subscribe({
+ this.clientsService.searchByText(text, 0, 10, '', '', true).subscribe({
next: (data: any) => {
this.guardianSearchResults = data?.content || [];
this.guardianSearching = false;
diff --git a/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts b/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts
index c19dddb10..bfda03ca4 100644
--- a/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts
+++ b/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts
@@ -27,7 +27,7 @@ import {
UntypedFormControl,
ReactiveFormsModule
} from '@angular/forms';
-import { Subject } from 'rxjs';
+import { Subject, Subscription, merge } from 'rxjs';
import { filter, switchMap, takeUntil } from 'rxjs/operators';
import { ClientsService } from 'app/clients/clients.service';
import { Dates } from 'app/core/utils/dates';
@@ -340,6 +340,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
sanctionsBlocked = false;
/** Screening log ID from sanctions API */
screeningLogId: number | null = null;
+ /** Snapshot of the name that was last verified — used to invalidate verification when name changes */
+ private verifiedName: string = '';
/**
* @param {FormBuilder} formBuilder Form Builder
@@ -500,6 +502,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
}
if (data.nameVerified === true || data.nameVerified === 'true' || data.nameVerified === 1) {
this.sanctionsVerified = true;
+ this.verifiedName = this.currentNameSnapshot();
} else if (data.nameVerified === false || data.nameVerified === 'false' || data.nameVerified === 0) {
this.sanctionsVerified = false;
}
@@ -701,6 +704,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
})
);
}
+ // Re-attach name-change watchers after controls are (re)created
+ setTimeout(() => this.watchNameChangesForReverification());
});
// Initialize legal form — use client's existing value in edit mode, default to PERSON for create
const initialLegalForm = this.clientData?.legalForm?.id || LegalFormId.PERSON;
@@ -901,20 +906,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
* If a match is found, sanctionsBlocked is set to true blocking further steps.
*/
verifySanctions() {
- const firstname = this.createClientForm.get('firstname')?.value || '';
- const middlename = this.createClientForm.get('middlename')?.value || '';
- const lastname = this.createClientForm.get('lastname')?.value || '';
- const fullname = this.createClientForm.get('fullname')?.value || '';
-
- const name =
- fullname ||
- [
- firstname,
- middlename,
- lastname
- ]
- .filter(Boolean)
- .join(' ');
+ const name = this.currentNameSnapshot();
const dialogRef = this.dialog.open(SanctionsVerifyDialogComponent, {
width: '550px',
@@ -927,14 +919,62 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
// CLEAR — no match found
this.sanctionsVerified = true;
this.sanctionsBlocked = false;
+ this.verifiedName = name;
} else if (result.verified === false) {
// FLAGGED — match found, block account opening
this.sanctionsVerified = false;
this.sanctionsBlocked = true;
+ this.verifiedName = '';
}
});
}
+ /** Concatenated current name from the form (handles individual + entity) */
+ private currentNameSnapshot(): string {
+ const firstname = this.createClientForm.get('firstname')?.value || '';
+ const middlename = this.createClientForm.get('middlename')?.value || '';
+ const lastname = this.createClientForm.get('lastname')?.value || '';
+ const fullname = this.createClientForm.get('fullname')?.value || '';
+ return (
+ fullname ||
+ [
+ firstname,
+ middlename,
+ lastname
+ ]
+ .filter(Boolean)
+ .join(' ')
+ ).trim();
+ }
+
+ /**
+ * Watch name fields — once a name has been verified, any edit invalidates the
+ * sanctions verification badge so the user must re-verify before submitting.
+ */
+ private nameWatchSub: Subscription | null = null;
+ private watchNameChangesForReverification() {
+ this.nameWatchSub?.unsubscribe();
+ const fields = [
+ 'firstname',
+ 'middlename',
+ 'lastname',
+ 'fullname'
+ ];
+ const controls = fields.map((f) => this.createClientForm.get(f)).filter((c) => !!c);
+ if (!controls.length) return;
+ this.nameWatchSub = merge(...controls.map((c) => c!.valueChanges))
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => {
+ // Only invalidate if a verification was previously recorded
+ if (!this.sanctionsVerified && !this.sanctionsBlocked) return;
+ if (this.currentNameSnapshot() !== this.verifiedName) {
+ this.sanctionsVerified = false;
+ this.sanctionsBlocked = false;
+ this.screeningLogId = null;
+ }
+ });
+ }
+
/** Search existing clients to select as guardian */
onGuardianSearch(text: string): void {
this.guardianSearchText = text;
@@ -947,7 +987,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
this.guardianSearching = true;
this.guardianSearchTimer = setTimeout(() => {
- this.clientService.searchByText(text, 0, 10).subscribe({
+ this.clientService.searchByText(text, 0, 10, '', '', true).subscribe({
next: (data: any) => {
this.guardianSearchResults = data?.content || [];
this.guardianSearching = false;
@@ -1106,7 +1146,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
}
this.signatorySearching = true;
this.signatorySearchTimer = setTimeout(() => {
- this.clientService.searchByText(text, 0, 10).subscribe({
+ this.clientService.searchByText(text, 0, 10, '', '', true).subscribe({
next: (data: any) => {
this.signatorySearchResults = data?.content || [];
this.signatorySearching = false;
@@ -1623,8 +1663,19 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
const generalDetails = this.readOnly ? this.createClientForm.getRawValue() : this.createClientForm.value;
const dateFormat = this.settingsService.dateFormat;
const locale = this.settingsService.language.code;
+ const isEditMode = !!this.clientData;
for (const key in generalDetails) {
- if (generalDetails[key] === '' || key === 'addSavings') {
+ if (key === 'addSavings') {
+ delete generalDetails[key];
+ continue;
+ }
+ if (generalDetails[key] === '') {
+ // In edit mode, preserve empty strings for fields that previously had a value so the
+ // backend can clear them (Fineract treats a missing field as "no change" but an empty
+ // string as a deliberate clear).
+ if (isEditMode && this.clientData[key] != null && this.clientData[key] !== '') {
+ continue;
+ }
delete generalDetails[key];
}
}
diff --git a/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.html b/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.html
index 879172463..c36618643 100644
--- a/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.html
+++ b/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.html
@@ -114,22 +114,165 @@
Proof of Address
-
-
- Address Proof Type
- verified_user
-
- @for (pt of proofTypes; track pt) {
- {{ pt }}
+ @if (loadingProofs) {
+
diff --git a/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.scss b/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.scss
index b4638207c..6cd3e0c1d 100644
--- a/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.scss
+++ b/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.scss
@@ -217,3 +217,346 @@ $muted: #64748b;
color: #1565c0;
}
}
+
+/* ===================== Address-proof picker ===================== */
+.addr-proof-loading {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 14px;
+ background: #f1f5f9;
+ border: 1px solid #e2e8f0;
+ border-radius: 8px;
+ color: #475569;
+ font-size: 13px;
+ margin-bottom: 14px;
+}
+
+.addr-proof-field {
+ margin: 4px 0 18px;
+}
+
+.addr-proof-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 13px;
+ font-weight: 600;
+ color: #334155;
+ margin-bottom: 10px;
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ color: #64748b;
+ }
+}
+
+.addr-chip-wrap {
+ border: 1px solid #e2e8f0;
+ border-radius: 12px;
+ padding: 14px 16px;
+ background: #f8fafc;
+}
+
+.addr-chip-group-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.6px;
+ text-transform: uppercase;
+ color: #64748b;
+ margin-bottom: 8px;
+
+ mat-icon {
+ font-size: 14px;
+ width: 14px;
+ height: 14px;
+ color: #94a3b8;
+ }
+}
+
+.addr-chip-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.addr-chip-divider {
+ height: 1px;
+ background: #e2e8f0;
+ margin: 14px 0 10px;
+}
+
+.addr-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 7px 14px;
+ border-radius: 999px;
+ background: #fff;
+ border: 1px solid #cbd5e1;
+ font-size: 13px;
+ color: #334155;
+ cursor: pointer;
+ user-select: none;
+ transition:
+ background 0.15s,
+ border-color 0.15s,
+ color 0.15s,
+ box-shadow 0.15s;
+
+ &:hover {
+ border-color: #1976d2;
+ color: #1976d2;
+ }
+
+ &__icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ color: #94a3b8;
+ }
+
+ &--sel {
+ background: #e3f2fd;
+ border-color: #1976d2;
+ color: #0d47a1;
+ font-weight: 600;
+ box-shadow: inset 0 0 0 1px #1976d2;
+
+ .addr-chip__icon {
+ color: #1976d2;
+ }
+ }
+
+ &:focus-visible {
+ outline: 2px solid #1976d2;
+ outline-offset: 2px;
+ }
+}
+
+.addr-proof-banner {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 14px;
+ margin: 12px 0 16px;
+ border-radius: 10px;
+ background: #ecfdf5;
+ border: 1px solid #a7f3d0;
+ color: #065f46;
+ font-size: 13px;
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ color: #059669;
+ flex-shrink: 0;
+ }
+}
+
+.addr-upload-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 12px;
+ margin-top: 6px;
+
+ &--two {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ @media (width <= 720px) {
+ grid-template-columns: 1fr !important;
+ }
+}
+
+.addr-upload-slot {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.addr-upload-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.addr-upload-title {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 13px;
+ font-weight: 600;
+ color: #334155;
+
+ mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ color: #64748b;
+ }
+}
+
+.addr-upload-req {
+ display: inline-flex;
+ align-items: center;
+ padding: 2px 9px;
+ border-radius: 999px;
+ background: #fee2e2;
+ color: #b91c1c;
+ border: 1px solid #fecaca;
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.4px;
+ text-transform: uppercase;
+}
+
+.addr-merged {
+ margin-top: 16px;
+ border: 1px solid #e2e8f0;
+ border-radius: 12px;
+ background: #fff;
+ padding: 14px 16px;
+
+ &__head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 6px 16px;
+ margin-bottom: 10px;
+ }
+
+ &__title {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ font-weight: 700;
+ color: #0f172a;
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ color: #2563eb;
+ }
+ }
+
+ &__hint {
+ font-size: 12px;
+ color: #64748b;
+ }
+
+ &__preview {
+ display: flex;
+ justify-content: center;
+ background: #f8fafc;
+ border: 1px solid #e2e8f0;
+ border-radius: 10px;
+ padding: 12px;
+ overflow: hidden;
+
+ img {
+ max-width: 100%;
+ max-height: 360px;
+ border-radius: 6px;
+ box-shadow: 0 1px 6px rgb(15 23 42 / 8%);
+ }
+ }
+
+ &__actions {
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+ margin-top: 12px;
+ }
+
+ &__btn {
+ mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ margin-right: 4px;
+ vertical-align: middle;
+ }
+ }
+}
+
+.addr-dropzone {
+ display: block;
+ border: 2px dashed #cbd5e1;
+ border-radius: 12px;
+ background: #f8fafc;
+ padding: 18px 14px;
+ cursor: pointer;
+ transition:
+ background 0.15s,
+ border-color 0.15s;
+
+ &:hover {
+ background: #f1f5f9;
+ border-color: #94a3b8;
+ }
+
+ &--req {
+ border-color: #fca5a5;
+ background: #fef2f2;
+ }
+
+ &--has {
+ border-style: solid;
+ border-color: #86efac;
+ background: #f0fdf4;
+ }
+
+ &__hint {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ color: #64748b;
+ font-size: 13px;
+
+ mat-icon {
+ font-size: 22px;
+ width: 22px;
+ height: 22px;
+ color: #94a3b8;
+ }
+ }
+
+ &__file {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 0;
+
+ mat-icon {
+ color: #16a34a;
+ flex-shrink: 0;
+ }
+ }
+
+ &__name {
+ flex: 1;
+ min-width: 0;
+ font-size: 13px;
+ font-weight: 600;
+ color: #0f172a;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__remove {
+ flex-shrink: 0;
+ }
+}
diff --git a/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.ts b/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.ts
index 935ac2b63..0f063d2a5 100644
--- a/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.ts
+++ b/src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.ts
@@ -14,7 +14,10 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { MatCheckbox } from '@angular/material/checkbox';
import { MatTabsModule } from '@angular/material/tabs';
import { MatIcon } from '@angular/material/icon';
+import { MatIconButton, MatButton } from '@angular/material/button';
import { ClientsService } from '../../clients.service';
+import { ProofType, normalizeProofType, groupProofsByCategory } from '../../shared/kyc-proof-types';
+import { KycUploadHelperService } from '../../shared/kyc-upload-helper.service';
@Component({
selector: 'mifosx-client-india-address-step',
@@ -25,13 +28,16 @@ import { ClientsService } from '../../clients.service';
FaIconComponent,
MatCheckbox,
MatTabsModule,
- MatIcon
+ MatIcon,
+ MatIconButton,
+ MatButton
]
})
export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
private fb = inject(UntypedFormBuilder);
private http = inject(HttpClient);
private clientsService = inject(ClientsService);
+ private kycUpload = inject(KycUploadHelperService);
/** Client ID — when set, loads existing addresses for edit mode */
@Input() clientId: string = '';
@@ -66,11 +72,12 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
],
country: [{ value: 'India', disabled: true }],
landmark: [''],
- proofType: [
+ proofId: [
'',
Validators.required
],
- proofDocNumber: ['']
+ documentKey: [''],
+ issueDate: ['']
});
currentForm: UntypedFormGroup = this.fb.group({
@@ -166,14 +173,15 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
correspondence: []
};
- proofTypes = [
- 'Aadhaar Card',
- 'Passport',
- 'Voter ID',
- 'Driving Licence',
- 'Utility Bill (not older than 3 months)',
- 'Bank Statement'
- ];
+ /** KYC address-proof picker state (mirrors identities-tab dialog) */
+ addressProofs: ProofType[] = [];
+ addressGroups: { label: string; items: ProofType[] }[] = [];
+ selectedAddrProof: ProofType | null = null;
+ loadingProofs = false;
+ addrFiles: { front: File | null; back: File | null } = { front: null, back: null };
+ /** Combined front+back PNG (built automatically once both image sides are ready) */
+ addrMergedFile: File | null = null;
+ addrMergedPreview: string | null = null;
residenceTypes = [
'Owned',
@@ -206,11 +214,116 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
private typeToTab: Record
+
+ }
+
+
+
+
+
+ @if (selectedAddrProof?.info) {
+
+ }
+
+ @if (selectedAddrProof) {
+
+ @for (group of addressGroups; track group.label; let last = $last) {
+ folder_open {{ group.label }}
+
- Document Number
- tag
-
-
+ }
+
+ @for (p of group.items; track p.id) {
+
+
+ {{ isAddrProofSelected(p) ? 'check_circle' : 'radio_button_unchecked' }}
+
+ {{ p.name }}
+
+ }
+
+ @if (!last) {
+
}
-
-
-
+
+ {{ selectedAddrProof.documentKeyLabel || 'Document number' }}
+ tag
+
+
+ @if (selectedAddrProof.requiresDate) {
+
+ Issue / bill date
+ event
+
+
+ }
+
+
+
+
+
+ @if (selectedAddrProof.sides === 2 && addrMergedPreview) {
+
+
+
+ @if (selectedAddrProof.sides === 2) {
+
+
+ image
+ {{ selectedAddrProof.sides === 2 ? 'Front side' : selectedAddrProof.name + ' (single copy)' }}
+
+ Required
+
+
+
+
+ }
+
+ image Back side
+ Required
+
+
+
+
+ }
+ }
+
+ filter_none
+ Combined preview (front + back)
+
+ Saved as a single PNG. Re-crop a side to update the merged file.
+
+
+ ![Merged address proof]()
+
+
+
+
+
+
+
+
+ badge
+
+
+
+
+ Identity proof
+Select document type — upload requirements will update automatically
+
+
+
+
+ @if (selectedKycDoc?.info) {
+
+ }
+
+ @if (selectedKycDoc) {
+
+ @for (group of kycDocGroups; track group.label; let last = $last) {
+ folder_open {{ group.label }}
+
+ @if (kycForm.get('kycDocumentName')?.hasError('required') && kycForm.get('kycDocumentName')?.touched) {
+
+ @for (p of group.items; track p.id) {
+
+
+ {{ isKycDocSelected(p) ? 'check_circle' : 'radio_button_unchecked' }}
+
+ {{ p.name }}
+
+ }
+
+ @if (!last) {
+
+ }
+ }
+ KYC Document Type is required
+ }
+
+
+
+ @if (selectedKycDoc.sides === 2 && kycDocMergedPreview) {
+
+
+
+ @if (selectedKycDoc.sides === 2) {
+
+
+ image
+ {{ selectedKycDoc.sides === 2 ? 'Front side' : selectedKycDoc.name + ' (single copy)' }}
+
+ Required
+
+
+
+
+ }
+
+ image Back side
+ Required
+
+
+
+
+ }
+ }
+
+
+ filter_none
+ Combined preview (front + back)
+
+ Saved as a single PNG. Re-crop a side to update the merged file.
+
+
+ ![Merged KYC document]()
+
+
+
+
+
+
-
}
- @if (clientViewData.nameVerified != null) {
+ @if (clientViewData.nameVerified !== null) {
}
- @if (clientViewData.annualTurnover != null && clientViewData.annualTurnover !== '') {
+ @if (clientViewData.annualTurnover !== null && clientViewData.annualTurnover !== '') {
> = {
- PAN: {
- sides: 1,
- documentKeyLabel: 'PAN number',
- documentKeyPlaceholder: 'e.g. ABCDE1234F',
- info: 'PAN card — upload front side only (single copy required).'
- },
- AADHAAR: {
- sides: 2,
- documentKeyLabel: '12-digit Aadhaar number',
- documentKeyPlaceholder: 'XXXX XXXX XXXX',
- category: 'Government-issued ID',
- info: 'Aadhaar — both front and back copies mandatory as per UIDAI guidelines.'
- },
- PASSPORT: {
- sides: 2,
- documentKeyLabel: 'Passport number',
- documentKeyPlaceholder: 'e.g. A1234567',
- category: 'Government-issued ID',
- info: 'Passport — upload front (photo page) and back (last page with address).'
- },
- VOTER_ID: {
- sides: 2,
- documentKeyLabel: 'EPIC number',
- documentKeyPlaceholder: 'Voter ID number',
- category: 'Government-issued ID',
- info: 'Voter ID (EPIC) — both sides required as address appears on the back.'
- },
- DRIVING_LICENSE: {
- sides: 2,
- documentKeyLabel: 'Driving licence number',
- documentKeyPlaceholder: 'DL number',
- category: 'Government-issued ID',
- info: 'Driving licence — both sides required; vehicle class and validity are on the back.'
- },
- NREGA_JOB_CARD: {
- sides: 1,
- documentKeyLabel: 'NREGA job card number',
- documentKeyPlaceholder: 'Job card number',
- info: 'NREGA job card — ensure government authority signature is visible.'
- },
- NPR_LETTER: {
- sides: 1,
- documentKeyLabel: 'Reference / letter number',
- documentKeyPlaceholder: 'NPR reference number',
- info: 'NPR letter — upload full document.'
- },
- UTILITY_BILL: {
- sides: 1,
- category: 'Utility bills',
- requiresDate: true,
- info: 'Utility bill — must not be older than 3 months.'
- },
- ELECTRICITY_BILL: {
- sides: 1,
- category: 'Utility bills',
- requiresDate: true,
- info: 'Electricity bill — must not be older than 3 months.'
- },
- WATER_BILL: {
- sides: 1,
- category: 'Utility bills',
- requiresDate: true,
- info: 'Water bill — must not be older than 3 months.'
- },
- GAS_BILL: {
- sides: 1,
- category: 'Utility bills',
- requiresDate: true,
- info: 'Gas bill — must not be older than 3 months.'
- },
- INTERNET_BILL: {
- sides: 1,
- category: 'Utility bills',
- requiresDate: true,
- info: 'Internet bill — must not be older than 3 months.'
- },
- POSTPAID_MOBILE_BILL: {
- sides: 1,
- category: 'Utility bills',
- requiresDate: true,
- info: 'Postpaid mobile bill — must not be older than 3 months.'
- },
- BANK_STATEMENT: {
- sides: 1,
- category: 'Financial & other',
- requiresDate: true,
- info: 'Bank statement / passbook — not older than 3 months.'
- },
- RENT_AGREEMENT: {
- sides: 1,
- category: 'Financial & other',
- info: 'Registered rent agreement — upload full document. Registration stamp must be visible.'
- },
- PROPERTY_TAX_RECEIPT: {
- sides: 1,
- category: 'Financial & other',
- requiresDate: true,
- info: 'Property tax receipt — latest receipt required.'
- },
- EMPLOYER_LETTER: {
- sides: 1,
- category: 'Financial & other',
- info: 'Employer letter — must be on official letterhead with HR/management signature.'
- },
- PENSION_PAYMENT_ORDER: {
- sides: 1,
- category: 'Financial & other',
- info: 'Pension payment order — upload full document issued by pension authority.'
- }
-};
-
@Component({
selector: 'mifosx-upload-document-dialog',
templateUrl: './upload-document-dialog.component.html',
@@ -245,9 +117,9 @@ export class UploadDocumentDialogComponent implements OnInit {
this.clientsService.getKycProofTypes().subscribe({
next: (res: any) => {
const activeFilter = (p: any) => p?.active !== false;
- this.idProofs = (res?.idProofs || []).filter(activeFilter).map((p: any) => this.normalizeProof(p));
- this.addressProofs = (res?.addressProofs || []).filter(activeFilter).map((p: any) => this.normalizeProof(p));
- this.buildAddressGroups();
+ this.idProofs = (res?.idProofs || []).filter(activeFilter).map(normalizeProofType);
+ this.addressProofs = (res?.addressProofs || []).filter(activeFilter).map(normalizeProofType);
+ this.addressGroups = groupProofsByCategory(this.addressProofs);
this.loadingProofs = false;
},
error: () => {
@@ -256,37 +128,6 @@ export class UploadDocumentDialogComponent implements OnInit {
});
}
- private normalizeProof(p: any): ProofType {
- const code = (p.code || p.description || '').toString().toUpperCase();
- const meta = PROOF_META[code] || {};
- return {
- id: p.id,
- name: p.name,
- code,
- sides: p.sides || meta.sides || 1,
- category: p.category || meta.category || 'Other',
- documentKeyLabel: p.documentKeyLabel || meta.documentKeyLabel || 'Document number',
- documentKeyPlaceholder: p.documentKeyPlaceholder || meta.documentKeyPlaceholder || '',
- requiresDate: p.requiresDate ?? meta.requiresDate ?? false,
- info: p.info || meta.info || ''
- };
- }
-
- private buildAddressGroups(): void {
- const map = new Map();
- this.addressProofs.forEach((p) => {
- const key = p.category || 'Other';
- if (!map.has(key)) map.set(key, []);
- map.get(key).push(p);
- });
- this.addressGroups = Array.from(map.entries()).map(
- ([
- label,
- items
- ]) => ({ label, items })
- );
- }
-
onIdProofChange(proofId: any): void {
this.selectedIdProof = this.idProofs.find((p) => String(p.id) === String(proofId)) || null;
this.idFiles = { front: null, back: null };
diff --git a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
index e0c34b27a..cfbc8c481 100644
--- a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
+++ b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
@@ -79,7 +79,7 @@
}
- @if (member.isDependent != null) {
+ @if (member.isDependent !== null) {
{{ acc.productName }} — {{ acc.accountNo }}
- @if (acc.accountBalance != null) {
+ @if (acc.accountBalance !== null) {
({{ acc.accountBalance | number: '1.2-2' }})
}
diff --git a/src/app/clients/clients-view/nominee-tab/nominee-tab.component.ts b/src/app/clients/clients-view/nominee-tab/nominee-tab.component.ts
index eb6e4a236..99731db5f 100644
--- a/src/app/clients/clients-view/nominee-tab/nominee-tab.component.ts
+++ b/src/app/clients/clients-view/nominee-tab/nominee-tab.component.ts
@@ -294,7 +294,7 @@ export class NomineeTabComponent implements OnInit {
}
this.searching = true;
this.searchTimer = setTimeout(() => {
- this.clientsService.searchByText(text, 0, 8).subscribe({
+ this.clientsService.searchByText(text, 0, 8, '', '', true).subscribe({
next: (data: any) => {
this.searchResults = data?.content || [];
this.searching = false;
@@ -412,7 +412,7 @@ export class NomineeTabComponent implements OnInit {
}
this.guardianSearching = true;
this.guardianSearchTimer = setTimeout(() => {
- this.clientsService.searchByText(text, 0, 8).subscribe({
+ this.clientsService.searchByText(text, 0, 8, '', '', true).subscribe({
next: (data: any) => {
this.guardianSearchResults = data?.content || [];
this.guardianSearching = false;
diff --git a/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.html b/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.html
index 228daa57b..7086ffacb 100644
--- a/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.html
+++ b/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.html
@@ -52,7 +52,7 @@
}
- @if (clientViewData.ageYears != null) {
+ @if (clientViewData.ageYears !== null) {
+ = {
@@ -371,6 +415,16 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
});
ngOnInit(): void {
+ // Seed defaults immediately so the picker has options before clientId is set
+ // (template API requires clientId; user can still pick a type pre-save).
+ if (!this.kycDocumentTypes.length) {
+ this.kycDocumentTypes = this.defaultDocumentTypes.map((d) => ({
+ name: d.name,
+ code: d.code,
+ mandatory: false
+ }));
+ this.rebuildKycDocPicker();
+ }
this.loadExistingKycIfNeeded();
this.loadKycTemplate();
if (this.isNonIndividual && this.constitutionMeta) {
@@ -412,9 +466,111 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
// Reset selected document type since options changed
this.kycForm.get('kycDocumentName')?.setValue('');
this.kycForm.get('kycDocumentName')?.updateValueAndValidity();
+ this.rebuildKycDocPicker();
}
}
+ /** Rebuild chip-group picker model from kycDocumentTypes */
+ private rebuildKycDocPicker(): void {
+ this.kycDocProofs = (this.kycDocumentTypes || []).map((d, i) =>
+ normalizeProofType({ id: d.code || d.name || i, name: d.name, code: d.code, description: d.code || d.name })
+ );
+ this.kycDocGroups = groupProofsByCategory(this.kycDocProofs);
+ // Sync selected proof with current form value (e.g. on edit-mode prefill)
+ const currentName = this.kycForm?.get('kycDocumentName')?.value;
+ this.selectedKycDoc = currentName ? this.kycDocProofs.find((p) => p.name === currentName) || null : null;
+ }
+
+ selectKycDoc(proof: ProofType): void {
+ this.selectedKycDoc = proof;
+ this.kycForm.get('kycDocumentName')?.setValue(proof.name);
+ // Reset uploads + merged preview when document type changes
+ this.kycDocFiles = { front: null, back: null };
+ this.kycDocMergedFile = null;
+ this.kycDocMergedPreview = null;
+ }
+
+ isKycDocSelected(proof: ProofType): boolean {
+ return this.selectedKycDoc?.code === proof.code && this.selectedKycDoc?.name === proof.name;
+ }
+
+ async onKycDocFile(event: Event, slot: 'front' | 'back'): Promise {
+ const input = event.target as HTMLInputElement;
+ const raw = input.files?.[0];
+ input.value = ''; // allow re-picking the same filename
+ if (!raw) return;
+ if (raw.size > 5 * 1024 * 1024) return;
+
+ const cropped = await this.kycUpload.pickWithCrop(raw, `Crop ${slot} side`);
+ if (!cropped) return;
+ this.kycDocFiles[slot] = cropped;
+ await this.refreshKycDocMerged();
+ }
+
+ async reCropKycDocFile(slot: 'front' | 'back'): Promise {
+ const current = this.kycDocFiles[slot];
+ if (!current || !current.type.startsWith('image/')) return;
+ const cropped = await this.kycUpload.pickWithCrop(current, `Re-crop ${slot} side`);
+ if (!cropped) return;
+ this.kycDocFiles[slot] = cropped;
+ await this.refreshKycDocMerged();
+ }
+
+ removeKycDocFile(slot: 'front' | 'back'): void {
+ this.kycDocFiles[slot] = null;
+ this.kycDocMergedFile = null;
+ this.kycDocMergedPreview = null;
+ }
+
+ private async refreshKycDocMerged(): Promise {
+ const proof = this.selectedKycDoc;
+ if (!proof || proof.sides !== 2 || !this.kycDocFiles.front || !this.kycDocFiles.back) {
+ this.kycDocMergedFile = null;
+ this.kycDocMergedPreview = null;
+ return;
+ }
+ const merged = await this.kycUpload.mergeFrontBack(
+ this.kycDocFiles.front,
+ this.kycDocFiles.back,
+ proof.name || 'kyc-document'
+ );
+ if (merged) {
+ this.kycDocMergedFile = merged.file;
+ this.kycDocMergedPreview = merged.preview;
+ } else {
+ this.kycDocMergedFile = null;
+ this.kycDocMergedPreview = null;
+ }
+ }
+
+ /**
+ * Files + proof metadata for the parent to persist as a client identifier.
+ * When both image sides are present they're sent as a single combined PNG;
+ * otherwise the individual files are returned.
+ */
+ get kycDocPayload(): {
+ proof: ProofType | null;
+ proofId: any;
+ documentKey: string;
+ files: { slot: string; file: File }[];
+ } {
+ const files: { slot: string; file: File }[] = [];
+ if (this.selectedKycDoc?.sides === 2 && this.kycDocMergedFile) {
+ files.push({ slot: 'Combined', file: this.kycDocMergedFile });
+ } else {
+ if (this.kycDocFiles.front) files.push({ slot: 'Front', file: this.kycDocFiles.front });
+ if (this.selectedKycDoc?.sides === 2 && this.kycDocFiles.back) {
+ files.push({ slot: 'Back', file: this.kycDocFiles.back });
+ }
+ }
+ return {
+ proof: this.selectedKycDoc,
+ proofId: this.selectedKycDoc?.id ?? '',
+ documentKey: this.kycForm.get('kycDocumentNumber')?.value || '',
+ files
+ };
+ }
+
/** Load existing KYC data if clientId is set (edit mode) */
private loadExistingKycIfNeeded(): void {
if (!this.clientId || this.kycLoaded) return;
@@ -469,6 +625,10 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
form15Type: data.form15Type || '15G',
form15FY: data.form15FY || ''
});
+ // Sync chip-picker selection with the prefilled document name
+ if (data.kycDocumentName) {
+ this.selectedKycDoc = this.kycDocProofs.find((p) => p.name === data.kycDocumentName) || null;
+ }
// Set verification statuses from existing data
if (data.panVerified) {
this.panVerifyStatus = 'VERIFIED';
@@ -568,16 +728,18 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
this.kycForm.get('kycDocumentName')?.setValidators(Validators.required);
}
this.kycForm.get('kycDocumentName')?.updateValueAndValidity();
+ this.rebuildKycDocPicker();
}
},
error: () => {
// Fallback to defaults if template API unavailable
this.kycTemplateLoaded = true;
- this.kycDocumentTypes = this.defaultDocumentTypes.map((name) => ({
- name,
- code: name,
+ this.kycDocumentTypes = this.defaultDocumentTypes.map((d) => ({
+ name: d.name,
+ code: d.code,
mandatory: false
}));
+ this.rebuildKycDocPicker();
}
});
}
@@ -1232,6 +1394,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
MatIcon,
MatDialogContent,
MatDialogActions,
+ MatDialogClose,
STANDALONE_SHARED_IMPORTS
]
})
diff --git a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
index 9b6140c0a..1880295fe 100644
--- a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
+++ b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html
@@ -180,13 +180,13 @@
}}
}
- @if (client?.ageYears != null) {
+ @if (client?.ageYears !== null) {
@if (photographPreview) {
![Photo]()
@@ -1023,15 +1158,25 @@
} @else {
-
+
diff --git a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss
index 058940306..cc38a02a0 100644
--- a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss
+++ b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss
@@ -23,6 +23,19 @@
color: var(--md-sys-color-primary, #1074b9);
font-size: 14px;
}
+
+ .section-required-tag {
+ margin-left: 6px;
+ padding: 2px 9px;
+ border-radius: 999px;
+ background: #fee2e2;
+ color: #b91c1c;
+ border: 1px solid #fecaca;
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.4px;
+ text-transform: uppercase;
+ }
}
.kyc-badge {
@@ -948,12 +961,23 @@
border-radius: 10px;
background: #f9fafb;
text-align: center;
- transition: border-color 0.15s;
+ transition:
+ border-color 0.15s,
+ background 0.15s;
&:hover {
border-color: #1353a0;
}
+ &--missing {
+ border-color: #dc2626;
+ background: #fef2f2;
+
+ &:hover {
+ border-color: #b91c1c;
+ }
+ }
+
&__icon {
width: 44px;
height: 44px;
@@ -972,6 +996,19 @@
color: #0f172a;
}
+ &__req {
+ color: #dc2626;
+ font-weight: 700;
+ margin-left: 2px;
+ }
+
+ &__error {
+ margin-top: 6px;
+ font-size: 12px;
+ font-weight: 600;
+ color: #b91c1c;
+ }
+
&__hint {
font-size: 11px;
color: #94a3b8;
@@ -1214,3 +1251,393 @@
font-weight: 600;
}
}
+
+/* ===================== KYC Document chip-grouped picker ===================== */
+.kyc-doc-pickbox {
+ border: 1px solid #e2e8f0;
+ border-radius: 14px;
+ background: #fff;
+ padding: 16px 18px;
+ margin: 6px 0 14px;
+ box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
+
+ &__head {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #f1f5f9;
+ margin-bottom: 14px;
+ }
+
+ &__icon {
+ color: #2563eb;
+ background: #eff6ff;
+ border-radius: 999px;
+ width: 36px;
+ height: 36px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ flex-shrink: 0;
+ }
+
+ &__titles {
+ min-width: 0;
+ }
+
+ &__title {
+ margin: 0;
+ font-size: 14px;
+ font-weight: 700;
+ color: #0f172a;
+ }
+
+ &__sub {
+ margin: 2px 0 0;
+ font-size: 12px;
+ color: #64748b;
+ }
+}
+
+.kyc-doc-field {
+ margin-bottom: 4px;
+}
+
+.kyc-doc-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 13px;
+ font-weight: 600;
+ color: #334155;
+ margin-bottom: 10px;
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ color: #64748b;
+ }
+}
+
+.kyc-doc-chip-wrap {
+ border: 1px solid #e2e8f0;
+ border-radius: 12px;
+ padding: 14px 16px;
+ background: #f8fafc;
+}
+
+.kyc-doc-chip-group-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.6px;
+ text-transform: uppercase;
+ color: #64748b;
+ margin-bottom: 8px;
+
+ mat-icon {
+ font-size: 14px;
+ width: 14px;
+ height: 14px;
+ color: #94a3b8;
+ }
+}
+
+.kyc-doc-chip-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.kyc-doc-chip-divider {
+ height: 1px;
+ background: #e2e8f0;
+ margin: 14px 0 10px;
+}
+
+.kyc-doc-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 7px 14px;
+ border-radius: 999px;
+ background: #fff;
+ border: 1px solid #cbd5e1;
+ font-size: 13px;
+ color: #334155;
+ cursor: pointer;
+ user-select: none;
+ transition:
+ background 0.15s,
+ border-color 0.15s,
+ color 0.15s,
+ box-shadow 0.15s;
+
+ &:hover {
+ border-color: #1976d2;
+ color: #1976d2;
+ }
+
+ &__icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ color: #94a3b8;
+ }
+
+ &--sel {
+ background: #e3f2fd;
+ border-color: #1976d2;
+ color: #0d47a1;
+ font-weight: 600;
+ box-shadow: inset 0 0 0 1px #1976d2;
+
+ .kyc-doc-chip__icon {
+ color: #1976d2;
+ }
+ }
+
+ &:focus-visible {
+ outline: 2px solid #1976d2;
+ outline-offset: 2px;
+ }
+}
+
+.kyc-doc-banner {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 14px;
+ margin-top: 12px;
+ border-radius: 10px;
+ background: #ecfdf5;
+ border: 1px solid #a7f3d0;
+ color: #065f46;
+ font-size: 13px;
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ color: #059669;
+ flex-shrink: 0;
+ }
+}
+
+.kyc-doc-error {
+ margin-top: 8px;
+ color: #b91c1c;
+ font-size: 12px;
+ padding-left: 4px;
+
+ strong {
+ font-weight: 700;
+ }
+}
+
+/* ===================== KYC Document upload dropzones ===================== */
+.kyc-doc-upload-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 12px;
+ margin-top: 14px;
+
+ &--two {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ @media (width <= 720px) {
+ grid-template-columns: 1fr !important;
+ }
+}
+
+.kyc-doc-upload-slot {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.kyc-doc-upload-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.kyc-doc-upload-title {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 13px;
+ font-weight: 600;
+ color: #334155;
+
+ mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ color: #64748b;
+ }
+}
+
+.kyc-doc-upload-req {
+ display: inline-flex;
+ align-items: center;
+ padding: 2px 9px;
+ border-radius: 999px;
+ background: #fee2e2;
+ color: #b91c1c;
+ border: 1px solid #fecaca;
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.4px;
+ text-transform: uppercase;
+}
+
+.kyc-merged {
+ margin-top: 16px;
+ border: 1px solid #e2e8f0;
+ border-radius: 12px;
+ background: #fff;
+ padding: 14px 16px;
+
+ &__head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 6px 16px;
+ margin-bottom: 10px;
+ }
+
+ &__title {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ font-weight: 700;
+ color: #0f172a;
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ color: #2563eb;
+ }
+ }
+
+ &__hint {
+ font-size: 12px;
+ color: #64748b;
+ }
+
+ &__preview {
+ display: flex;
+ justify-content: center;
+ background: #f8fafc;
+ border: 1px solid #e2e8f0;
+ border-radius: 10px;
+ padding: 12px;
+ overflow: hidden;
+
+ img {
+ max-width: 100%;
+ max-height: 360px;
+ border-radius: 6px;
+ box-shadow: 0 1px 6px rgb(15 23 42 / 8%);
+ }
+ }
+
+ &__actions {
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+ margin-top: 12px;
+ }
+
+ &__btn {
+ mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ margin-right: 4px;
+ vertical-align: middle;
+ }
+ }
+}
+
+.kyc-doc-dropzone {
+ display: block;
+ border: 2px dashed #cbd5e1;
+ border-radius: 12px;
+ background: #f8fafc;
+ padding: 18px 14px;
+ cursor: pointer;
+ transition:
+ background 0.15s,
+ border-color 0.15s;
+
+ &:hover {
+ background: #f1f5f9;
+ border-color: #94a3b8;
+ }
+
+ &--req {
+ border-color: #fca5a5;
+ background: #fef2f2;
+ }
+
+ &--has {
+ border-style: solid;
+ border-color: #86efac;
+ background: #f0fdf4;
+ }
+
+ &__hint {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ color: #64748b;
+ font-size: 13px;
+
+ mat-icon {
+ font-size: 22px;
+ width: 22px;
+ height: 22px;
+ color: #94a3b8;
+ }
+ }
+
+ &__file {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 0;
+
+ mat-icon {
+ color: #16a34a;
+ flex-shrink: 0;
+ }
+ }
+
+ &__name {
+ flex: 1;
+ min-width: 0;
+ font-size: 13px;
+ font-weight: 600;
+ color: #0f172a;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__remove {
+ flex-shrink: 0;
+ }
+}
diff --git a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts
index 288384984..379f15e6f 100644
--- a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts
+++ b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts
@@ -8,19 +8,28 @@
import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, inject } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule } from '@angular/forms';
-import { MatDialog, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import {
+ MatDialog,
+ MAT_DIALOG_DATA,
+ MatDialogContent,
+ MatDialogActions,
+ MatDialogClose
+} from '@angular/material/dialog';
import { Inject } from '@angular/core';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatSelectTrigger } from '@angular/material/select';
import { MatDivider } from '@angular/material/divider';
import { MatIcon } from '@angular/material/icon';
+import { MatIconButton, MatButton } from '@angular/material/button';
import { MatCheckbox } from '@angular/material/checkbox';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
import { ClientsService } from '../../clients.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
+import { ProofType, normalizeProofType, groupProofsByCategory } from '../../shared/kyc-proof-types';
+import { KycUploadHelperService } from '../../shared/kyc-upload-helper.service';
@Component({
selector: 'mifosx-client-kyc-step',
@@ -31,6 +40,8 @@ import { Dates } from 'app/core/utils/dates';
FormsModule,
MatDivider,
MatIcon,
+ MatIconButton,
+ MatButton,
MatCheckbox,
MatProgressSpinner,
FaIconComponent,
@@ -43,6 +54,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
private clientsService = inject(ClientsService);
private settingsService = inject(SettingsService);
private dateUtils = inject(Dates);
+ private kycUpload = inject(KycUploadHelperService);
/** Set by parent after client is created */
@Input() clientId: string = '';
@@ -67,15 +79,47 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
/** KYC Document Types — populated from API template, falls back to defaults */
kycDocumentTypes: { name: string; code: string; mandatory: boolean }[] = [];
+
+ /** Chip-group state for KYC document picker (mirrors identity proof in identifier dialog) */
+ kycDocProofs: ProofType[] = [];
+ kycDocGroups: { label: string; items: ProofType[] }[] = [];
+ selectedKycDoc: ProofType | null = null;
+ /** Front/back files for the chosen KYC document */
+ kycDocFiles: { front: File | null; back: File | null } = { front: null, back: null };
+ /** Combined front+back PNG (built automatically once both image sides are ready) */
+ kycDocMergedFile: File | null = null;
+ kycDocMergedPreview: string | null = null;
+
+ /** Set true after a save attempt so we can highlight missing photo/signature boxes */
+ photoSigTouched = false;
+
+ /** Either an in-memory crop or an image already on the server */
+ get hasPhoto(): boolean {
+ return !!this.photographPreview;
+ }
+
+ get hasSignature(): boolean {
+ return !!this.signaturePreview;
+ }
+
+ /** Photo + signature are mandatory before leaving the KYC tab */
+ get photoSigComplete(): boolean {
+ return this.hasPhoto && this.hasSignature;
+ }
+
+ /** Mark uploads as touched so the UI shows the missing-required state */
+ markPhotoSigTouched(): void {
+ this.photoSigTouched = true;
+ }
/** Fallback document types when template API is unavailable */
private defaultDocumentTypes = [
- 'Aadhaar Card',
- 'Passport',
- 'PAN Card',
- 'Driving Licence',
- 'Voter ID',
- 'NREGA Job Card',
- 'National Population Register Letter'
+ { name: 'Aadhaar Card', code: 'AADHAAR' },
+ { name: 'Passport', code: 'PASSPORT' },
+ { name: 'PAN Card', code: 'PAN' },
+ { name: 'Driving Licence', code: 'DRIVING_LICENSE' },
+ { name: 'Voter ID', code: 'VOTER_ID' },
+ { name: 'NREGA Job Card', code: 'NREGA_JOB_CARD' },
+ { name: 'National Population Register Letter', code: 'NPR_LETTER' }
];
/** Constitution-based KYC document types for non-individual clients */
private constitutionDocTypes: Record
@if (signaturePreview) {
![Signature]()
@@ -1047,12 +1192,18 @@
} @else {
Age
{{ client.ageYears }}y {{ client.ageMonths }}m {{ client.ageDays }}d
}
- @if (client?.isMinor != null) {
+ @if (client?.isMinor !== null) {
Minor
diff --git a/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.html b/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.html
index 8a428867d..6c0cb5670 100644
--- a/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.html
+++ b/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.html
@@ -77,6 +77,74 @@
}
+
+
+
+
+
+
+
+
+ @if (kycComplete) {
+
+
+
+
+
+
+
+
+ @if (panVerified) {
+
+ {{ panNumber || '—' }}
+ @if (panHolderName) {
+ {{ panHolderName }}
+ }
+
+
+
+
+
+ @if (aadhaarVerified) {
+
+ {{ aadhaarMasked || '—' }}
+ @if (aadhaarHolderName) {
+ {{ aadhaarHolderName }}
+ }
+
+
diff --git a/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.scss b/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.scss
index ba29cd983..66d527c48 100644
--- a/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.scss
+++ b/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.scss
@@ -214,6 +214,179 @@
}
}
+/* ===================== KYC Verification status ===================== */
+.kyc-status-card {
+ border: 1px solid #e2e8f0;
+ border-radius: 14px;
+ background: #fff;
+ margin-bottom: 18px;
+ overflow: hidden;
+ box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
+
+ &--complete {
+ border-color: #bbf7d0;
+ background: linear-gradient(180deg, #f0fdf4 0%, #fff 60%);
+ }
+
+ &__head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ padding: 14px 18px;
+ border-bottom: 1px solid #eef2f7;
+ }
+
+ &__title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 14px;
+ font-weight: 700;
+ color: #0f172a;
+ }
+
+ &__icon {
+ color: #2563eb;
+ font-size: 16px;
+ }
+
+ &--complete &__icon {
+ color: #16a34a;
+ }
+
+ &__badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 5px 12px;
+ border-radius: 20px;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.4px;
+ text-transform: uppercase;
+
+ fa-icon {
+ font-size: 11px;
+ }
+
+ &--ok {
+ background: #dcfce7;
+ color: #166534;
+ border: 1px solid #bbf7d0;
+ }
+
+ &--partial {
+ background: #fef3c7;
+ color: #92400e;
+ border: 1px solid #fde68a;
+ }
+
+ &--pending {
+ background: #fee2e2;
+ color: #991b1b;
+ border: 1px solid #fecaca;
+ }
+ }
+
+ &__body {
+ padding: 6px 18px 14px;
+ }
+}
+
+.kyc-status-row {
+ display: grid;
+ grid-template-columns: 140px 1fr auto;
+ align-items: center;
+ gap: 14px;
+ padding: 10px 0;
+ border-bottom: 1px dashed #eef2f7;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &__label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ font-weight: 600;
+ color: #475569;
+
+ fa-icon {
+ color: #64748b;
+ font-size: 13px;
+ }
+ }
+
+ &__value {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+
+ &--missing {
+ color: #94a3b8;
+ font-style: italic;
+ font-size: 13px;
+ }
+ }
+
+ &__id {
+ font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
+ font-size: 13px;
+ font-weight: 600;
+ color: #0f172a;
+ word-break: break-all;
+ }
+
+ &__name {
+ font-size: 12px;
+ color: #64748b;
+ }
+}
+
+.kyc-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 4px 10px;
+ border-radius: 20px;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.3px;
+ white-space: nowrap;
+
+ fa-icon {
+ font-size: 11px;
+ }
+
+ &--ok {
+ background: #dcfce7;
+ color: #166534;
+ border: 1px solid #bbf7d0;
+ }
+
+ &--pending {
+ background: #f1f5f9;
+ color: #64748b;
+ border: 1px solid #e2e8f0;
+ }
+}
+
+@media (width <= 640px) {
+ .kyc-status-row {
+ grid-template-columns: 110px 1fr;
+ grid-template-rows: auto auto;
+
+ .kyc-pill {
+ grid-column: 2 / 3;
+ justify-self: start;
+ }
+ }
+}
+
/* ===================== Client info grid ===================== */
.ckyc-info-grid {
display: grid;
diff --git a/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.ts b/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.ts
index 26a2c6b17..8c7ecca1a 100644
--- a/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.ts
+++ b/src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.ts
@@ -67,6 +67,18 @@ export class CkycTabComponent implements OnInit, OnDestroy {
ckycBatchId = '';
checkingExisting = false;
+ /** KYC verification status (Aadhaar + PAN) — independent of CERSAI sync */
+ panVerified = false;
+ aadhaarVerified = false;
+ panHolderName = '';
+ aadhaarHolderName = '';
+ panNumber = '';
+ aadhaarMasked = '';
+
+ get kycComplete(): boolean {
+ return this.panVerified && this.aadhaarVerified;
+ }
+
/** Pre-existing artefacts detected from client data */
existing: Record<'ADDRESS_PROOF' | 'PHOTO_PROOF' | 'CLIENT_IMAGE' | 'CLIENT_SIGNATURE', ExistingArtefact> = {
ADDRESS_PROOF: { present: false },
@@ -170,6 +182,13 @@ export class CkycTabComponent implements OnInit, OnDestroy {
this.ckycNumber = data?.ckycNumber || '';
this.ckycUploadedOn = this.formatJavaDate(data?.ckycUploadedOn);
this.ckycBatchId = data?.ckycBatchId || '';
+ this.panVerified = data?.panVerified === true || data?.panVerified === 'true' || data?.panVerified === 1;
+ this.aadhaarVerified =
+ data?.aadhaarVerified === true || data?.aadhaarVerified === 'true' || data?.aadhaarVerified === 1;
+ this.panHolderName = data?.panFullName || data?.panHolderName || '';
+ this.aadhaarHolderName = data?.aadhaarHolderName || '';
+ this.panNumber = data?.panNumber || '';
+ this.aadhaarMasked = data?.aadhaarNumberMasked || '';
});
}
diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html
index 969075cf5..4a8e09457 100644
--- a/src/app/clients/clients-view/clients-view.component.html
+++ b/src/app/clients/clients-view/clients-view.component.html
@@ -168,7 +168,7 @@
}
- @if (clientViewData.mobileNo && clientViewData.dipVerified != null) {
+ @if (clientViewData.mobileNo && clientViewData.dipVerified !== null) {
{{ clientViewData.occupation.name }}
DIP Status
@@ -196,7 +196,7 @@
Sanctions Screening
@@ -236,13 +236,13 @@
}
- @if (clientViewData.monthlyIncome != null && clientViewData.monthlyIncome !== '') {
+ @if (clientViewData.monthlyIncome !== null && clientViewData.monthlyIncome !== '') {
{{ clientViewData.maritalStatus.name }}
Monthly Income
₹ {{ clientViewData.monthlyIncome | number }}
Annual Turnover
₹ {{ clientViewData.annualTurnover | number }}
diff --git a/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts b/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts
index e52728d1c..22697da08 100644
--- a/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts
+++ b/src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts
@@ -21,138 +21,10 @@ import { FileUploadComponent } from '../../../../shared/file-upload/file-upload.
import { MatIconButton } from '@angular/material/button';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
import { ClientsService } from '../../../clients.service';
-
-interface ProofType {
- id: string | number;
- name: string;
- code?: string;
- sides?: number;
- category?: string;
- documentKeyLabel?: string;
- documentKeyPlaceholder?: string;
- requiresDate?: boolean;
- info?: string;
-}
+import { ProofType, normalizeProofType, groupProofsByCategory } from '../../../shared/kyc-proof-types';
type SectionKey = 'id' | 'address';
-/**
- * Client-side enrichment for KYC proof types. Backend currently returns
- * only { id, name, description (code), position, active, mandatory } — we
- * derive sides / category / banner text / input labels from the code.
- */
-const PROOF_META: Record{{ member.dateOfBirth | dateFormat }}
Dependent
{{ member.isDependent | yesNo }}
diff --git a/src/app/clients/clients-view/nominee-tab/nominee-tab.component.html b/src/app/clients/clients-view/nominee-tab/nominee-tab.component.html
index c5f4498d7..de5b75ec9 100644
--- a/src/app/clients/clients-view/nominee-tab/nominee-tab.component.html
+++ b/src/app/clients/clients-view/nominee-tab/nominee-tab.component.html
@@ -59,7 +59,7 @@
@for (acc of selectedGroup.accounts; track acc.id) {
{{ clientViewData.dateOfBirth | dateFormat: 'DD-MMMM-YYYY' }}
Age
@@ -96,7 +96,7 @@
}
- @if (clientViewData.isMinor != null) {
+ @if (clientViewData.isMinor !== null) {
{{ clientViewData.socialCategory.name }}
Minor
@@ -366,7 +366,7 @@
Monthly Income
- @if (clientViewData.monthlyIncome != null && clientViewData.monthlyIncome !== '') {
+ @if (clientViewData.monthlyIncome !== null && clientViewData.monthlyIncome !== '') {
₹ {{ clientViewData.monthlyIncome | number }}
} @else {
-
@@ -376,7 +376,7 @@
Annual Turnover (Last FY)
- @if (clientViewData.annualTurnover != null && clientViewData.annualTurnover !== '') {
+ @if (clientViewData.annualTurnover !== null && clientViewData.annualTurnover !== '') {
₹ {{ clientViewData.annualTurnover | number }}
} @else {
-
diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts
index de9b603a2..3b7e201c4 100644
--- a/src/app/clients/clients.service.ts
+++ b/src/app/clients/clients.service.ts
@@ -576,11 +576,20 @@ export class ClientsService {
return this.http.get(`/clients/${clientId}/collaterals/template`);
}
- searchByText(text: string, page: number, pageSize: number, sortAttribute: string = '', sortDirection: string = '') {
+ searchByText(
+ text: string,
+ page: number,
+ pageSize: number,
+ sortAttribute: string = '',
+ sortDirection: string = '',
+ activeOnly: boolean = false
+ ) {
+ const innerRequest: any = { text };
+ if (activeOnly) {
+ innerRequest.activeOnly = true;
+ }
let request: any = {
- request: {
- text
- },
+ request: innerRequest,
page,
size: pageSize
};
diff --git a/src/app/clients/create-client/create-client.component.ts b/src/app/clients/create-client/create-client.component.ts
index 08f539a97..21571913f 100644
--- a/src/app/clients/create-client/create-client.component.ts
+++ b/src/app/clients/create-client/create-client.component.ts
@@ -72,9 +72,9 @@ export class CreateClientComponent {
@ViewChild(ClientGeneralStepComponent) clientGeneralStep: ClientGeneralStepComponent;
@ViewChild('clientAddress') clientAddressStep: ClientAddressStepComponent;
@ViewChild('clientIndiaAddress') clientIndiaAddressStep: ClientIndiaAddressStepComponent;
- @ViewChild('clientEntityKyc') clientEntityKycStep: ClientEntityKycStepComponent;
+ @ViewChild(ClientEntityKycStepComponent) clientEntityKycStep: ClientEntityKycStepComponent;
@ViewChild('clientKyc') clientKycStep: ClientKycStepComponent;
- @ViewChild('clientFamilyMembers') clientFamilyMembersStep: ClientFamilyMembersStepComponent;
+ @ViewChild(ClientFamilyMembersStepComponent) clientFamilyMembersStep: ClientFamilyMembersStepComponent;
@ViewChildren('dtclient') clientDatatables: QueryList;
datatables: any = [];
@@ -250,6 +250,13 @@ export class CreateClientComponent {
// KYC tab
const kycTabIndex = 1;
if (tabIndex === kycTabIndex) {
+ // Photograph + Signature are mandatory before leaving the KYC tab
+ if (this.clientKycStep && !this.clientKycStep.photoSigComplete) {
+ this.clientKycStep.markPhotoSigTouched();
+ this.validationError = 'Photograph and Signature are required before continuing.';
+ return;
+ }
+ this.validationError = '';
// Save KYC
if (this.clientKycStep?.hasKycData && !this.clientKycStep.kycId) {
this.clientsService.saveClientKyc(clientId, this.clientKycStep.kycData).subscribe({ error: () => {} });
@@ -265,6 +272,8 @@ export class CreateClientComponent {
.uploadClientSignatureImage(clientId, this.clientKycStep.signatureFile)
.subscribe({ error: () => {} });
}
+ // Persist the KYC document picker selection + uploaded files as a client identifier
+ this.saveKycDocProof(clientId);
return;
}
@@ -349,6 +358,14 @@ export class CreateClientComponent {
validationError = '';
submit() {
+ // Validate: photograph and signature are mandatory
+ if (this.clientKycStep && !this.clientKycStep.photoSigComplete) {
+ this.clientKycStep.markPhotoSigTouched();
+ this.validationError = 'Photograph and Signature are required before submitting.';
+ // Switch to KYC tab
+ this.selectedTabIndex = 1;
+ return;
+ }
// 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.';
@@ -425,6 +442,9 @@ export class CreateClientComponent {
this.saveClientFamilyMembers(clientId);
}
+ // Persist the KYC document picker selection + uploaded files as a client identifier
+ this.saveKycDocProof(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({
@@ -514,6 +534,72 @@ export class CreateClientComponent {
},
error: () => {}
});
+
+ // Persist the selected proof of address as a client identifier (with attached files)
+ this.saveAddressProof(clientId);
+ }
+
+ /**
+ * Save the address-proof picked on the permanent tab as a client identifier
+ * + upload each selected file as a document attached to that identifier.
+ * Mirrors identities-tab.createIdentifierWithDocs.
+ */
+ private saveAddressProof(clientId: string) {
+ const payload = this.clientIndiaAddressStep?.addressProofPayload;
+ if (!payload?.proofId) return;
+
+ const proofName = payload.proof?.name || 'Address Proof';
+ const identifierData: any = {
+ documentTypeId: payload.proofId,
+ status: 'Active',
+ documentKey: payload.documentKey || `${proofName} - ${clientId}`,
+ description: payload.issueDate ? `Issue date: ${payload.issueDate}` : ''
+ };
+
+ this.clientsService.addClientIdentifier(clientId, identifierData).subscribe({
+ next: (res: any) => {
+ const identifierId = res?.resourceId;
+ if (!identifierId) return;
+ for (const entry of payload.files) {
+ const formData = new FormData();
+ formData.append('name', `${proofName} — ${entry.slot}`);
+ formData.append('file', entry.file);
+ this.clientsService.uploadClientIdentifierDocument(identifierId, formData).subscribe({ error: () => {} });
+ }
+ },
+ error: () => {}
+ });
+ }
+
+ /**
+ * Save the KYC document picked on the KYC tab as a client identifier
+ * + upload each selected file as a document attached to that identifier.
+ */
+ private saveKycDocProof(clientId: string) {
+ const payload = this.clientKycStep?.kycDocPayload;
+ if (!payload?.proofId || !payload?.files?.length) return;
+
+ const proofName = payload.proof?.name || 'KYC Document';
+ const identifierData: any = {
+ documentTypeId: payload.proofId,
+ status: 'Active',
+ documentKey: payload.documentKey || `${proofName} - ${clientId}`,
+ description: 'KYC document'
+ };
+
+ this.clientsService.addClientIdentifier(clientId, identifierData).subscribe({
+ next: (res: any) => {
+ const identifierId = res?.resourceId;
+ if (!identifierId) return;
+ for (const entry of payload.files) {
+ const formData = new FormData();
+ formData.append('name', `${proofName} — ${entry.slot}`);
+ formData.append('file', entry.file);
+ this.clientsService.uploadClientIdentifierDocument(identifierId, formData).subscribe({ error: () => {} });
+ }
+ },
+ error: () => {}
+ });
}
/**
diff --git a/src/app/clients/edit-client/edit-client.component.html b/src/app/clients/edit-client/edit-client.component.html
index 9dcdd46df..c63b1a3cb 100644
--- a/src/app/clients/edit-client/edit-client.component.html
+++ b/src/app/clients/edit-client/edit-client.component.html
@@ -67,8 +67,8 @@
warning
}
@@ -180,6 +180,8 @@
[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 || []"
diff --git a/src/app/clients/edit-client/edit-client.component.ts b/src/app/clients/edit-client/edit-client.component.ts
index 92f579192..c4a09aed4 100644
--- a/src/app/clients/edit-client/edit-client.component.ts
+++ b/src/app/clients/edit-client/edit-client.component.ts
@@ -69,9 +69,9 @@ export class EditClientComponent {
@ViewChild(ClientGeneralStepComponent) clientGeneralStep: ClientGeneralStepComponent;
@ViewChild('clientAddress') clientAddressStep: ClientAddressStepComponent;
@ViewChild('clientIndiaAddress') clientIndiaAddressStep: ClientIndiaAddressStepComponent;
- @ViewChild('clientEntityKyc') clientEntityKycStep: ClientEntityKycStepComponent;
+ @ViewChild(ClientEntityKycStepComponent) clientEntityKycStep: ClientEntityKycStepComponent;
@ViewChild('clientKyc') clientKycStep: ClientKycStepComponent;
- @ViewChild('clientFamilyMembers') clientFamilyMembersStep: ClientFamilyMembersStepComponent;
+ @ViewChild(ClientFamilyMembersStepComponent) clientFamilyMembersStep: ClientFamilyMembersStepComponent;
@ViewChildren('dtclient') clientDatatables: QueryList;
datatables: any = [];
@@ -184,13 +184,13 @@ export class EditClientComponent {
let dialogContext = 'Are you sure you want to save the changes';
let dialogType = 'basic';
- // Check if DOB changed on the General tab — warn about re-KYC
+ // Check if name or DOB changed on the General tab — warn about re-KYC
if (this.selectedTabIndex === 0) {
const changes = this.detectSensitiveFieldChanges(this.clientDataAndTemplate);
- if (changes.dobChanged) {
+ if (changes.nameChanged || changes.dobChanged) {
heading = 'Re-KYC Required';
dialogContext =
- 'Date of birth has been changed. This will require PAN re-verification in the KYC section. A remark will be added automatically. Do you want to proceed';
+ 'Client name or date of birth has been changed. This will require PAN re-verification in the KYC section. A remark will be added automatically. Do you want to proceed';
dialogType = 'warn';
}
}
@@ -232,11 +232,11 @@ export class EditClientComponent {
// Log mobile/email changes as client notes for risk audit
this.logFieldChangeNotes(changedFields);
- // If DOB changed, flag re-KYC requirement and reset PAN verification
- if (changedFields.dobChanged) {
+ // If name or DOB changed, flag re-KYC requirement and reset PAN verification
+ if (changedFields.nameChanged || changedFields.dobChanged) {
this.dobChanged = true;
this.tabEditMode[1] = true; // auto-enable KYC tab for re-verification
- this.flagReKycRequired(changedFields.oldDob, changedFields.newDob);
+ this.flagReKycRequired(changedFields);
}
// Update original data snapshot so subsequent edits compare against latest
@@ -249,6 +249,13 @@ export class EditClientComponent {
if (changedFields.dobChanged) {
originalData.dateOfBirth = changedFields.newDob;
}
+ if (changedFields.nameChanged) {
+ const form = this.clientGeneralForm;
+ originalData.firstname = form?.get('firstname')?.value ?? originalData.firstname;
+ originalData.middlename = form?.get('middlename')?.value ?? originalData.middlename;
+ originalData.lastname = form?.get('lastname')?.value ?? originalData.lastname;
+ originalData.fullname = form?.get('fullname')?.value ?? originalData.fullname;
+ }
this.selectedTabIndex = this.selectedTabIndex + 1;
},
@@ -261,6 +268,11 @@ export class EditClientComponent {
// KYC tab (always index 1)
if (tabIndex === 1) {
+ // Photograph + Signature are mandatory before leaving the KYC tab
+ if (this.clientKycStep && !this.clientKycStep.photoSigComplete) {
+ this.clientKycStep.markPhotoSigTouched();
+ return;
+ }
this.savingClient = true;
// Upload photo if selected
@@ -317,6 +329,8 @@ export class EditClientComponent {
if (!kycId && res?.resourceId) {
this.clientKycStep.kycId = res.resourceId.toString();
}
+ // Persist KYC document picker selection + uploaded files as a client identifier
+ this.saveKycDocProof(this.clientId);
this.selectedTabIndex = this.selectedTabIndex + 1;
},
error: () => {
@@ -363,7 +377,7 @@ export class EditClientComponent {
}
/**
- * Compare current form values with original data to detect changes in DOB, mobile, email.
+ * Compare current form values with original data to detect changes in name, DOB, mobile, email.
*/
private detectSensitiveFieldChanges(originalData: any) {
const form = this.clientGeneralForm;
@@ -381,10 +395,38 @@ export class EditClientComponent {
? oldDobRaw.toISOString().split('T')[0]
: oldDobRaw || '';
+ const buildName = (parts: { firstname?: string; middlename?: string; lastname?: string; fullname?: string }) =>
+ (
+ parts.fullname ||
+ [
+ parts.firstname,
+ parts.middlename,
+ parts.lastname
+ ]
+ .filter((p) => p && p.trim())
+ .join(' ')
+ ).trim();
+
+ const newName = buildName({
+ firstname: form?.get('firstname')?.value || '',
+ middlename: form?.get('middlename')?.value || '',
+ lastname: form?.get('lastname')?.value || '',
+ fullname: form?.get('fullname')?.value || ''
+ });
+ const oldName = buildName({
+ firstname: originalData.firstname || '',
+ middlename: originalData.middlename || '',
+ lastname: originalData.lastname || '',
+ fullname: originalData.fullname || ''
+ });
+
return {
+ nameChanged: newName !== oldName,
mobileChanged: newMobile !== oldMobile,
emailChanged: newEmail !== oldEmail,
dobChanged: newDob !== oldDob,
+ oldName,
+ newName,
oldMobile,
newMobile,
oldEmail,
@@ -412,22 +454,38 @@ export class EditClientComponent {
}
/**
- * When DOB changes, reset PAN verification in KYC step and pre-fill remark for re-KYC.
+ * When name or DOB changes, reset PAN verification in KYC step and pre-fill remark for re-KYC.
*/
- private flagReKycRequired(oldDob: string, newDob: string) {
+ private flagReKycRequired(changes: {
+ nameChanged: boolean;
+ dobChanged: boolean;
+ oldName: string;
+ newName: string;
+ oldDob: string;
+ newDob: string;
+ }) {
+ const reasons: string[] = [];
+ if (changes.nameChanged) {
+ reasons.push(`Client name changed from "${changes.oldName}" to "${changes.newName}"`);
+ }
+ if (changes.dobChanged) {
+ reasons.push(`Date of birth changed from "${changes.oldDob}" to "${changes.newDob}"`);
+ }
+ const reasonText = reasons.join('; ');
+
// Reset PAN verification status so user must re-verify
if (this.clientKycStep) {
this.clientKycStep.panVerifyStatus = 'NONE';
this.clientKycStep.panVerifyName = '';
this.clientKycStep.panVerifiedOn = '';
// Pre-fill remarks with re-KYC note
- const remarkText = `[Re-KYC Required] Date of birth changed from ${oldDob} to ${newDob}. PAN re-verification is mandatory.`;
+ const remarkText = `[Re-KYC Required] ${reasonText}. PAN re-verification is mandatory.`;
this.clientKycStep.kycForm.get('remarks')?.setValue(remarkText);
}
- // Also log DOB change as an audit note
+ // Also log the change as an audit note
const timestamp = new Date().toISOString();
- const note = `[AUDIT] Date of birth changed from "${oldDob}" to "${newDob}" on ${timestamp}. Re-KYC (PAN re-verification) required.`;
+ const note = `[AUDIT] ${reasonText} on ${timestamp}. Re-KYC (PAN re-verification) required.`;
this.clientsService.createClientNote(this.clientId, { note }).subscribe({ error: () => {} });
}
@@ -439,6 +497,13 @@ export class EditClientComponent {
* Submits the edit client form.
*/
submit() {
+ // Photograph + Signature are mandatory before submitting
+ if (this.clientKycStep && !this.clientKycStep.photoSigComplete) {
+ this.clientKycStep.markPhotoSigTouched();
+ this.selectedTabIndex = 1;
+ return;
+ }
+
const locale = this.settingsService.language.code;
const dateFormat = this.settingsService.dateFormat;
const clientData = {
@@ -496,10 +561,14 @@ export class EditClientComponent {
kycObs = this.clientsService.saveClientKyc(this.clientId, kycData);
}
kycObs.subscribe({
- next: () => navigateBack(),
+ next: () => {
+ this.saveKycDocProof(this.clientId);
+ navigateBack();
+ },
error: () => navigateBack()
});
} else {
+ this.saveKycDocProof(this.clientId);
navigateBack();
}
},
@@ -580,6 +649,72 @@ export class EditClientComponent {
},
error: () => {}
});
+
+ // Persist the selected proof of address as a client identifier (with attached files)
+ this.saveAddressProof(clientId);
+ }
+
+ /**
+ * Save the address-proof picked on the permanent tab as a client identifier
+ * + upload each selected file as a document attached to that identifier.
+ * Mirrors identities-tab.createIdentifierWithDocs.
+ */
+ private saveAddressProof(clientId: string) {
+ const payload = this.clientIndiaAddressStep?.addressProofPayload;
+ if (!payload?.proofId) return;
+
+ const proofName = payload.proof?.name || 'Address Proof';
+ const identifierData: any = {
+ documentTypeId: payload.proofId,
+ status: 'Active',
+ documentKey: payload.documentKey || `${proofName} - ${clientId}`,
+ description: payload.issueDate ? `Issue date: ${payload.issueDate}` : ''
+ };
+
+ this.clientsService.addClientIdentifier(clientId, identifierData).subscribe({
+ next: (res: any) => {
+ const identifierId = res?.resourceId;
+ if (!identifierId) return;
+ for (const entry of payload.files) {
+ const formData = new FormData();
+ formData.append('name', `${proofName} — ${entry.slot}`);
+ formData.append('file', entry.file);
+ this.clientsService.uploadClientIdentifierDocument(identifierId, formData).subscribe({ error: () => {} });
+ }
+ },
+ error: () => {}
+ });
+ }
+
+ /**
+ * Save the KYC document picked on the KYC tab as a client identifier
+ * + upload each selected file as a document attached to that identifier.
+ */
+ private saveKycDocProof(clientId: string) {
+ const payload = this.clientKycStep?.kycDocPayload;
+ if (!payload?.proofId || !payload?.files?.length) return;
+
+ const proofName = payload.proof?.name || 'KYC Document';
+ const identifierData: any = {
+ documentTypeId: payload.proofId,
+ status: 'Active',
+ documentKey: payload.documentKey || `${proofName} - ${clientId}`,
+ description: 'KYC document'
+ };
+
+ this.clientsService.addClientIdentifier(clientId, identifierData).subscribe({
+ next: (res: any) => {
+ const identifierId = res?.resourceId;
+ if (!identifierId) return;
+ for (const entry of payload.files) {
+ const formData = new FormData();
+ formData.append('name', `${proofName} — ${entry.slot}`);
+ formData.append('file', entry.file);
+ this.clientsService.uploadClientIdentifierDocument(identifierId, formData).subscribe({ error: () => {} });
+ }
+ },
+ error: () => {}
+ });
}
private saveClientFamilyMembers(clientId: string) {
diff --git a/src/app/clients/shared/kyc-proof-types.ts b/src/app/clients/shared/kyc-proof-types.ts
new file mode 100644
index 000000000..b2351fcbc
--- /dev/null
+++ b/src/app/clients/shared/kyc-proof-types.ts
@@ -0,0 +1,167 @@
+/**
+ * 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/.
+ */
+
+export interface ProofType {
+ id: string | number;
+ name: string;
+ code?: string;
+ sides?: number;
+ category?: string;
+ documentKeyLabel?: string;
+ documentKeyPlaceholder?: string;
+ requiresDate?: boolean;
+ info?: string;
+}
+
+/**
+ * Client-side enrichment for KYC proof types. Backend currently returns
+ * only { id, name, description (code), position, active, mandatory } — we
+ * derive sides / category / banner text / input labels from the code.
+ */
+export const PROOF_META: Record> = {
+ PAN: {
+ sides: 1,
+ documentKeyLabel: 'PAN number',
+ documentKeyPlaceholder: 'e.g. ABCDE1234F',
+ info: 'PAN card — upload front side only (single copy required).'
+ },
+ AADHAAR: {
+ sides: 2,
+ documentKeyLabel: '12-digit Aadhaar number',
+ documentKeyPlaceholder: 'XXXX XXXX XXXX',
+ category: 'Government-issued ID',
+ info: 'Aadhaar — both front and back copies mandatory as per UIDAI guidelines.'
+ },
+ PASSPORT: {
+ sides: 2,
+ documentKeyLabel: 'Passport number',
+ documentKeyPlaceholder: 'e.g. A1234567',
+ category: 'Government-issued ID',
+ info: 'Passport — upload front (photo page) and back (last page with address).'
+ },
+ VOTER_ID: {
+ sides: 2,
+ documentKeyLabel: 'EPIC number',
+ documentKeyPlaceholder: 'Voter ID number',
+ category: 'Government-issued ID',
+ info: 'Voter ID (EPIC) — both sides required as address appears on the back.'
+ },
+ DRIVING_LICENSE: {
+ sides: 2,
+ documentKeyLabel: 'Driving licence number',
+ documentKeyPlaceholder: 'DL number',
+ category: 'Government-issued ID',
+ info: 'Driving licence — both sides required; vehicle class and validity are on the back.'
+ },
+ NREGA_JOB_CARD: {
+ sides: 1,
+ documentKeyLabel: 'NREGA job card number',
+ documentKeyPlaceholder: 'Job card number',
+ info: 'NREGA job card — ensure government authority signature is visible.'
+ },
+ NPR_LETTER: {
+ sides: 1,
+ documentKeyLabel: 'Reference / letter number',
+ documentKeyPlaceholder: 'NPR reference number',
+ info: 'NPR letter — upload full document.'
+ },
+ UTILITY_BILL: {
+ sides: 1,
+ category: 'Utility bills',
+ requiresDate: true,
+ info: 'Utility bill — must not be older than 3 months.'
+ },
+ ELECTRICITY_BILL: {
+ sides: 1,
+ category: 'Utility bills',
+ requiresDate: true,
+ info: 'Electricity bill — must not be older than 3 months.'
+ },
+ WATER_BILL: {
+ sides: 1,
+ category: 'Utility bills',
+ requiresDate: true,
+ info: 'Water bill — must not be older than 3 months.'
+ },
+ GAS_BILL: {
+ sides: 1,
+ category: 'Utility bills',
+ requiresDate: true,
+ info: 'Gas bill — must not be older than 3 months.'
+ },
+ INTERNET_BILL: {
+ sides: 1,
+ category: 'Utility bills',
+ requiresDate: true,
+ info: 'Internet bill — must not be older than 3 months.'
+ },
+ POSTPAID_MOBILE_BILL: {
+ sides: 1,
+ category: 'Utility bills',
+ requiresDate: true,
+ info: 'Postpaid mobile bill — must not be older than 3 months.'
+ },
+ BANK_STATEMENT: {
+ sides: 1,
+ category: 'Financial & other',
+ requiresDate: true,
+ info: 'Bank statement / passbook — not older than 3 months.'
+ },
+ RENT_AGREEMENT: {
+ sides: 1,
+ category: 'Financial & other',
+ info: 'Registered rent agreement — upload full document. Registration stamp must be visible.'
+ },
+ PROPERTY_TAX_RECEIPT: {
+ sides: 1,
+ category: 'Financial & other',
+ requiresDate: true,
+ info: 'Property tax receipt — latest receipt required.'
+ },
+ EMPLOYER_LETTER: {
+ sides: 1,
+ category: 'Financial & other',
+ info: 'Employer letter — must be on official letterhead with HR/management signature.'
+ },
+ PENSION_PAYMENT_ORDER: {
+ sides: 1,
+ category: 'Financial & other',
+ info: 'Pension payment order — upload full document issued by pension authority.'
+ }
+};
+
+export function normalizeProofType(p: any): ProofType {
+ const code = (p.code || p.description || '').toString().toUpperCase();
+ const meta = PROOF_META[code] || {};
+ return {
+ id: p.id,
+ name: p.name,
+ code,
+ sides: p.sides || meta.sides || 1,
+ category: p.category || meta.category || 'Other',
+ documentKeyLabel: p.documentKeyLabel || meta.documentKeyLabel || 'Document number',
+ documentKeyPlaceholder: p.documentKeyPlaceholder || meta.documentKeyPlaceholder || '',
+ requiresDate: p.requiresDate ?? meta.requiresDate ?? false,
+ info: p.info || meta.info || ''
+ };
+}
+
+export function groupProofsByCategory(proofs: ProofType[]): { label: string; items: ProofType[] }[] {
+ const map = new Map();
+ proofs.forEach((p) => {
+ const key = p.category || 'Other';
+ if (!map.has(key)) map.set(key, []);
+ map.get(key)!.push(p);
+ });
+ return Array.from(map.entries()).map(
+ ([
+ label,
+ items
+ ]) => ({ label, items })
+ );
+}
diff --git a/src/app/clients/shared/kyc-upload-helper.service.ts b/src/app/clients/shared/kyc-upload-helper.service.ts
new file mode 100644
index 000000000..235a7e67b
--- /dev/null
+++ b/src/app/clients/shared/kyc-upload-helper.service.ts
@@ -0,0 +1,102 @@
+/**
+ * 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/.
+ */
+
+import { Injectable, inject } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ImageCropperDialogComponent } from '../clients-view/custom-dialogs/image-cropper-dialog/image-cropper-dialog.component';
+
+@Injectable({ providedIn: 'root' })
+export class KycUploadHelperService {
+ private dialog = inject(MatDialog);
+
+ /**
+ * If the picked file is an image, open the cropper dialog and resolve with
+ * the cropped File (or null if cancelled). Non-image files (PDFs) are
+ * passed through unchanged.
+ */
+ pickWithCrop(file: File, title: string): Promise {
+ if (!file.type.startsWith('image/')) {
+ return Promise.resolve(file);
+ }
+ return new Promise((resolve) => {
+ const ref = this.dialog.open(ImageCropperDialogComponent, {
+ width: '720px',
+ maxWidth: '95vw',
+ data: { file, title }
+ });
+ ref.afterClosed().subscribe((cropped: File | null) => resolve(cropped || null));
+ });
+ }
+
+ /**
+ * Stack two images (front above back) into one PNG. Resolves with both
+ * the new File (suitable for upload) and a data-URL preview for the UI.
+ * Returns null if either side is not an image (e.g. one is a PDF).
+ */
+ mergeFrontBack(front: File, back: File, name: string): Promise<{ file: File; preview: string } | null> {
+ if (!front.type.startsWith('image/') || !back.type.startsWith('image/')) {
+ return Promise.resolve(null);
+ }
+ return Promise.all([
+ this.fileToImage(front),
+ this.fileToImage(back)
+ ]).then(
+ ([
+ fImg,
+ bImg
+ ]) => {
+ const targetWidth = Math.max(fImg.width, bImg.width);
+ const fScale = targetWidth / fImg.width;
+ const bScale = targetWidth / bImg.width;
+ const fH = fImg.height * fScale;
+ const bH = bImg.height * bScale;
+ const gap = 20;
+ const totalH = Math.round(fH + bH + gap);
+
+ const canvas = document.createElement('canvas');
+ canvas.width = targetWidth;
+ canvas.height = totalH;
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return null;
+
+ ctx.fillStyle = '#ffffff';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(fImg, 0, 0, targetWidth, fH);
+ ctx.drawImage(bImg, 0, fH + gap, targetWidth, bH);
+
+ return new Promise<{ file: File; preview: string } | null>((resolve) => {
+ canvas.toBlob((blob) => {
+ if (!blob) {
+ resolve(null);
+ return;
+ }
+ const file = new File([blob], `${name}-combined.png`, { type: 'image/png' });
+ const preview = canvas.toDataURL('image/png');
+ resolve({ file, preview });
+ }, 'image/png');
+ });
+ }
+ );
+ }
+
+ private fileToImage(file: File): Promise {
+ return new Promise((resolve, reject) => {
+ const url = URL.createObjectURL(file);
+ const img = new Image();
+ img.onload = () => {
+ URL.revokeObjectURL(url);
+ resolve(img);
+ };
+ img.onerror = () => {
+ URL.revokeObjectURL(url);
+ reject(new Error('image load failed'));
+ };
+ img.src = url;
+ });
+ }
+}
diff --git a/src/app/core/authentication/credentials.model.ts b/src/app/core/authentication/credentials.model.ts
index 597517cac..098729cad 100644
--- a/src/app/core/authentication/credentials.model.ts
+++ b/src/app/core/authentication/credentials.model.ts
@@ -23,6 +23,9 @@ export interface Credentials {
roles: any;
userId: number;
username: string;
+ /** Optional contact details — populated when the auth response includes them. */
+ email?: string;
+ mobileNo?: string;
shouldRenewPassword: boolean;
rememberMe?: boolean;
}
diff --git a/src/app/core/shell/shell.component.html b/src/app/core/shell/shell.component.html
index 72c6c548f..8028aae7a 100644
--- a/src/app/core/shell/shell.component.html
+++ b/src/app/core/shell/shell.component.html
@@ -220,6 +220,9 @@
+
diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html
index 5e59a8253..f73c1f5f5 100644
--- a/src/app/core/shell/toolbar/toolbar.component.html
+++ b/src/app/core/shell/toolbar/toolbar.component.html
@@ -342,6 +342,12 @@
{{ 'labels.menus.Profile' | translate }}
+
- Re-KYC Required: Date of birth was changed. Please re-verify PAN and update the remarks
- below before proceeding.
+ Re-KYC Required: Client name or date of birth was changed. Please re-verify PAN and
+ update the remarks below before proceeding.