-
- }
-
- Screening {{ clientName }} against
- UN Security Council &
- Financial Intelligence Unit - India (FIU-IND under UNSC Resolution 2231)
+ Screening {{ clientName }} against the
+ UN Security Council Consolidated List
+ ISIL (Da’esh) & Al-Qaida (1267/1989/2253) and Taliban (1988) sanctions lists
+ Sanctions list data as of {{ listDataAsOf }} +
+ }{{ regulatoryBasis }}
} @@ -54,8 +61,8 @@ import { ClientsService } from 'app/clients/clients.service';No Sanctions Match Found
{{ clientName }} has been screened against the - UN Security Council Consolidated List and FIU-IND records. No confirmed - match was found. + UN Security Council Consolidated List (ISIL & Al-Qaida and Taliban sanctions lists). No + confirmed match was found.
+ + @if (aadhaarVerifyStatus !== 'VERIFIED' && !aadhaarReceiptTaken && !aadhaarOtpSent && !readOnly) { +
+ receipt_long
+ Customer has applied for Aadhaar but not received it yet?
+
+
+ }
+
+
+ @if (aadhaarVerifyStatus !== 'VERIFIED' && aadhaarReceiptTaken) {
+
+
+ }
+
@if (aadhaarOtpSent && aadhaarVerifyStatus !== 'VERIFIED') {
+ receipt_long
+ Aadhaar Enrolment Receipt Recorded
+ @if (aadhaarReceiptTakenOn) {
+ {{ aadhaarReceiptTakenOn }}
+ }
+
+
+
+
+ Enrolment ID
+ {{ aadhaarReceipt?.enrolmentId }}
+
+ @if (aadhaarReceipt?.enrolmentDate) {
+
+ Enrolment date
+ {{ aadhaarReceipt?.enrolmentDate | date: 'dd MMMM yyyy' }}
+
+ }
+ @if (aadhaarReceipt?.remarks) {
+
+ Remarks
+ {{ aadhaarReceipt?.remarks }}
+
+ }
+
+ Aadhaar remains unverified. No KYC exception is raised for Aadhaar while this receipt is on file.
+
+ @if (!readOnly) {
+
+
+
+
+ }
+
@@ -725,51 +921,53 @@
}
-
@@ -847,19 +1045,23 @@
- @if (existingKycDocuments.length > 0 && !kycDocFiles.front && readOnly) {
+ @if (existingKycDocSides.front && !kycDocFiles.front && readOnly) {
-
-
-
+ }
-
-
- Mark as KYC Exception
+
+
+
-
+
+
+ Mark as KYC Exception
- @if (kycForm.get('isException')?.value) {
-
- Exception Reasons
-
- @if (!isNonIndividual) {
- PAN Card Verification Failed
- Aadhaar Verification Failed
- } @else {
- Enterprise PAN Verification Failed
- GSTIN Verification Failed
- CIN Verification Failed
- }
-
-
- }
+ @if (kycForm.get('isException')?.value) {
+
+ Exception Reasons
+
+ @if (!isNonIndividual) {
+ PAN Card Verification Failed
+ Aadhaar Verification Failed
+ } @else {
+ Enterprise PAN Verification Failed
+ GSTIN Verification Failed
+ CIN Verification Failed
+ }
+
+
+ }
+
- @if (kycDocMergedPreview) {
- ![Saved KYC document]()
+ @if (existingKycDocSides.front?.previewUrl) {
+ ![Saved front side]()
} @else {
description
}
- } @else if (existingKycDocuments.length > 0) {
+ } @else if (existingKycDocSides.front) {
-
+ @if (data.offerDeclaration) {
+
+
+ } @else {
+
+ }
`,
@@ -1963,9 +2547,17 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
line-height: 1.6;
color: #475569;
}
+ .pan-err-hint {
+ margin: 12px 0 0;
+ padding-top: 12px;
+ border-top: 1px solid #e2e8f0;
+ font-size: 13px;
+ color: #64748b;
+ }
.pan-err-actions {
padding: 10px 24px 16px !important;
margin: 0 !important;
+ gap: 8px;
}
`
],
@@ -1978,5 +2570,10 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
]
})
export class PanErrorDialogComponent {
- data = inject<{ message: string }>(MAT_DIALOG_DATA);
+ /**
+ * `offerDeclaration` turns the dead-end error into a fork: retry, or record the customer
+ * declaration that stands in for a check the client can never pass. Closes with `true` when the
+ * officer chooses the declaration.
+ */
+ data = inject<{ message: string; offerDeclaration?: boolean }>(MAT_DIALOG_DATA);
}
diff --git a/src/app/clients/clients-view/kyc-tab/kyc-tab.component.html b/src/app/clients/clients-view/kyc-tab/kyc-tab.component.html
index 80a1e1c13..d379b4baf 100644
--- a/src/app/clients/clients-view/kyc-tab/kyc-tab.component.html
+++ b/src/app/clients/clients-view/kyc-tab/kyc-tab.component.html
@@ -68,6 +68,32 @@
- @if (kycDocMergedPreview) {
- ![Saved KYC document]()
+ @if (existingKycDocSides.front?.previewUrl) {
+ ![Saved front side]()
} @else {
description
}
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 2b9231705..a9555ea7e 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
@@ -304,6 +304,206 @@
color: #059669;
border: 1px solid #a7f3d0;
}
+
+ // Not verified, but covered by a declaration — deliberately amber rather than green so it never
+ // reads as a passing check.
+ &.declared {
+ background: #fffbeb;
+ color: #b45309;
+ border: 1px solid #fcd34d;
+ }
+}
+
+// ── PAN declaration summary ────────────────────────────────────────────────
+.pan-decl-card {
+ margin: -4px 0 16px;
+ padding: 12px 14px;
+ border: 1px solid #fcd34d;
+ border-radius: 8px;
+ background: #fffbeb;
+}
+
+.pan-decl-card__head {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 10px;
+}
+
+.pan-decl-card__icon {
+ color: #b45309;
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+}
+
+.pan-decl-card__title {
+ font-size: 13px;
+ font-weight: 600;
+ color: #92400e;
+}
+
+.pan-decl-card__date {
+ margin-left: auto;
+ font-size: 11px;
+ color: #b45309;
+}
+
+.pan-decl-card__rows {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.pan-decl-card__row {
+ display: grid;
+ grid-template-columns: 130px 1fr;
+ gap: 10px;
+ font-size: 12.5px;
+
+ .k {
+ color: #92400e;
+ font-weight: 500;
+ }
+
+ .v {
+ color: #451a03;
+ word-break: break-word;
+
+ &.strong {
+ font-weight: 600;
+ }
+ }
+}
+
+.pan-decl-card__note {
+ margin-top: 10px;
+ padding-top: 8px;
+ border-top: 1px solid #fde68a;
+ font-size: 11.5px;
+ line-height: 1.5;
+ color: #b45309;
+}
+
+.pan-decl-card__actions {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px;
+
+ .danger {
+ color: #b91c1c;
+ }
+}
+
+// ── Aadhaar enrolment receipt ──────────────────────────────────────────────
+// Blue rather than the declaration's amber: nothing has failed here, the customer simply does not
+// hold the document yet.
+.aad-rcpt-offer {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ flex-wrap: wrap;
+ margin: -4px 0 16px;
+ padding: 10px 14px;
+ border: 1px solid #bfdbfe;
+ border-radius: 8px;
+ background: #eff6ff;
+ font-size: 12.5px;
+ color: #1e40af;
+
+ mat-icon {
+ color: #2563eb;
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ }
+
+ button {
+ margin-left: auto;
+ color: #1d4ed8 !important;
+ border-color: #bfdbfe !important;
+ }
+}
+
+.aad-rcpt-card {
+ margin: -4px 0 16px;
+ padding: 12px 14px;
+ border: 1px solid #bfdbfe;
+ border-radius: 8px;
+ background: #eff6ff;
+}
+
+.aad-rcpt-card__head {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 10px;
+}
+
+.aad-rcpt-card__icon {
+ color: #2563eb;
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+}
+
+.aad-rcpt-card__title {
+ font-size: 13px;
+ font-weight: 600;
+ color: #1e3a8a;
+}
+
+.aad-rcpt-card__date {
+ margin-left: auto;
+ font-size: 11px;
+ color: #2563eb;
+}
+
+.aad-rcpt-card__rows {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.aad-rcpt-card__row {
+ display: grid;
+ grid-template-columns: 130px 1fr;
+ gap: 10px;
+ font-size: 12.5px;
+
+ .k {
+ color: #1e40af;
+ font-weight: 500;
+ }
+
+ .v {
+ color: #0f172a;
+ word-break: break-word;
+
+ &.mono {
+ font-family: monospace;
+ letter-spacing: 0.02em;
+ }
+ }
+}
+
+.aad-rcpt-card__note {
+ margin-top: 10px;
+ padding-top: 8px;
+ border-top: 1px solid #bfdbfe;
+ font-size: 11.5px;
+ line-height: 1.5;
+ color: #2563eb;
+}
+
+.aad-rcpt-card__actions {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px;
+
+ .danger {
+ color: #b91c1c;
+ }
}
.verify-icon-ok {
@@ -2431,3 +2631,358 @@
}
}
}
+
+/* The name and DOB that PAN / Aadhaar are matched against, surfaced from the General tab so a
+ mismatch is visible before the check runs rather than only after it fails. */
+.identity-basis {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ padding: 11px 14px;
+ margin-bottom: 4px;
+ border: 1px solid #bfdbfe;
+ border-radius: 8px;
+ background: #eff6ff;
+}
+
+.identity-basis--incomplete {
+ border-color: #fdba74;
+ background: #fff7ed;
+}
+
+.identity-basis__icon {
+ flex: 0 0 auto;
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ color: #1d4ed8;
+
+ .identity-basis--incomplete & {
+ color: #c2410c;
+ }
+}
+
+.identity-basis__body {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ min-width: 0;
+}
+
+.identity-basis__legend {
+ font-size: 10.5px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: #64748b;
+}
+
+.identity-basis__pairs {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px 24px;
+}
+
+.identity-basis__pair {
+ display: flex;
+ align-items: baseline;
+ gap: 7px;
+}
+
+.identity-basis__k {
+ font-size: 11px;
+ font-weight: 600;
+ color: #64748b;
+}
+
+.identity-basis__v {
+ font-size: 13.5px;
+ font-weight: 600;
+ color: #1e293b;
+}
+
+.identity-basis__hint {
+ font-size: 11.5px;
+ color: #64748b;
+ line-height: 1.45;
+}
+
+.identity-basis__warn {
+ font-size: 11.5px;
+ font-weight: 600;
+ color: #c2410c;
+ line-height: 1.45;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+ PAN ↔ Aadhaar premium status card
+ ─── Replaces the legacy table-row treatment. Dark gradient with
+ offset glow circles, large gradient icon, and a state-driven
+ accent (green / red / blue / amber).
+ ═══════════════════════════════════════════════════════════════ */
+.pal-card {
+ margin-top: 16px;
+ width: 100%;
+ min-height: 88px;
+ padding: 14px 18px 30px;
+ border-radius: 18px;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: linear-gradient(135deg, #111827, #0f172a);
+ border: 1px solid rgb(255 255 255 / 8%);
+ box-shadow:
+ 0 12px 32px rgb(0 0 0 / 35%),
+ inset 0 1px 1px rgb(255 255 255 / 5%);
+ font-family: Inter, 'Segoe UI', Roboto, sans-serif;
+
+ /* Decorative glows — colors swap with the state variant */
+ &::before {
+ content: '';
+ position: absolute;
+ width: 180px;
+ height: 180px;
+ background: #2563eb;
+ border-radius: 50%;
+ top: -110px;
+ right: -70px;
+ opacity: 0.18;
+ pointer-events: none;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ width: 120px;
+ height: 120px;
+ background: #22c55e;
+ border-radius: 50%;
+ bottom: -70px;
+ left: -50px;
+ opacity: 0.12;
+ pointer-events: none;
+ }
+
+ &__left {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ z-index: 2;
+ }
+
+ &__icon {
+ width: 54px;
+ height: 54px;
+ border-radius: 16px;
+ background: linear-gradient(145deg, #2563eb, #06b6d4);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ font-size: 22px;
+ position: relative;
+ box-shadow: 0 10px 20px rgb(37 99 235 / 35%);
+ flex-shrink: 0;
+
+ mat-icon {
+ font-size: 26px;
+ width: 26px;
+ height: 26px;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: 16px;
+ border: 1px solid rgb(255 255 255 / 20%);
+ }
+ }
+
+ &__txt {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ &__small {
+ font-size: 10.5px;
+ color: #94a3b8;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ font-weight: 700;
+ }
+
+ &__title {
+ color: #fff;
+ font-size: 17px;
+ font-weight: 700;
+ line-height: 1.1;
+ }
+
+ &__status {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ margin-top: 4px;
+ padding: 4px 11px;
+ border-radius: 50px;
+ background: rgb(34 197 94 / 12%);
+ border: 1px solid rgb(74 222 128 / 25%);
+ color: #4ade80;
+ font-size: 11.5px;
+ font-weight: 600;
+ backdrop-filter: blur(5px);
+ width: fit-content;
+
+ mat-icon {
+ font-size: 13px;
+ width: 13px;
+ height: 13px;
+ }
+ }
+
+ &__badge {
+ z-index: 2;
+ width: 42px;
+ height: 42px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #22c55e, #16a34a);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ box-shadow: 0 0 18px rgb(34 197 94 / 45%);
+ flex-shrink: 0;
+
+ mat-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ &__hint {
+ position: absolute;
+ bottom: 8px;
+ right: 16px;
+ font-size: 10px;
+ color: rgb(255 255 255 / 35%);
+ font-style: italic;
+ letter-spacing: 0.02em;
+ z-index: 1;
+ }
+
+ /* ─── State variants ─── */
+ &--ok {
+ &::before {
+ background: #2563eb;
+ }
+
+ &::after {
+ background: #22c55e;
+ }
+ }
+
+ &--fail {
+ border-color: rgb(239 68 68 / 22%);
+
+ &::before {
+ background: #ef4444;
+ opacity: 0.22;
+ }
+
+ &::after {
+ background: #f87171;
+ opacity: 0.16;
+ }
+
+ .pal-card__status {
+ background: rgb(239 68 68 / 14%);
+ border-color: rgb(248 113 113 / 32%);
+ color: #fca5a5;
+ }
+
+ .pal-card__badge {
+ background: linear-gradient(135deg, #ef4444, #b91c1c);
+ box-shadow: 0 0 18px rgb(239 68 68 / 45%);
+ }
+
+ .pal-card__icon {
+ background: linear-gradient(145deg, #ef4444, #f97316);
+ box-shadow: 0 10px 20px rgb(239 68 68 / 35%);
+ }
+ }
+
+ &--info {
+ border-color: rgb(59 130 246 / 22%);
+
+ &::before {
+ background: #3b82f6;
+ opacity: 0.22;
+ }
+
+ &::after {
+ background: #60a5fa;
+ opacity: 0.14;
+ }
+
+ .pal-card__status {
+ background: rgb(59 130 246 / 14%);
+ border-color: rgb(96 165 250 / 32%);
+ color: #93c5fd;
+ }
+
+ .pal-card__badge {
+ background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+ box-shadow: 0 0 18px rgb(59 130 246 / 45%);
+ }
+ }
+
+ &--pending {
+ border-color: rgb(245 158 11 / 22%);
+
+ &::before {
+ background: #f59e0b;
+ opacity: 0.22;
+ }
+
+ &::after {
+ background: #fbbf24;
+ opacity: 0.14;
+ }
+
+ .pal-card__status {
+ background: rgb(245 158 11 / 14%);
+ border-color: rgb(251 191 36 / 32%);
+ color: #fbbf24;
+ }
+
+ .pal-card__badge {
+ background: linear-gradient(135deg, #f59e0b, #b45309);
+ box-shadow: 0 0 18px rgb(245 158 11 / 45%);
+ }
+
+ .pal-card__icon {
+ background: linear-gradient(145deg, #f59e0b, #d97706);
+ box-shadow: 0 10px 20px rgb(245 158 11 / 35%);
+ }
+ }
+}
+
+@media (width <= 540px) {
+ .pal-card {
+ flex-wrap: wrap;
+ gap: 10px;
+ padding-bottom: 36px;
+
+ &__hint {
+ position: static;
+ width: 100%;
+ text-align: right;
+ margin-top: 4px;
+ }
+ }
+}
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 d708f7135..29d2f22f2 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
@@ -35,6 +35,26 @@ import { CaptureImageDialogComponent } from '../../clients-view/custom-dialogs/c
import { DrawSignatureDialogComponent } from '../../clients-view/custom-dialogs/draw-signature-dialog/draw-signature-dialog.component';
import { dataUrlToFile } from 'app/shared/utils/data-url.util';
import { DocumentPreviewDialogComponent } from '../../shared/document-preview-dialog/document-preview-dialog.component';
+import {
+ PanDeclarationDialogComponent,
+ PanDeclarationResult
+} from '../../shared/pan-declaration-dialog/pan-declaration-dialog.component';
+import {
+ AadhaarReceiptDialogComponent,
+ AadhaarReceiptResult
+} from '../../shared/aadhaar-receipt-dialog/aadhaar-receipt-dialog.component';
+
+/** One side of the saved ID proof, as shown in its upload slot. */
+interface KycDocSide {
+ /** Id of the stored document this side came from. */
+ id: string;
+ fileName: string;
+ previewUrl: string | null;
+ /** The image this slot shows — a half, when it was cut out of a stacked scan. */
+ blob: Blob | null;
+ /** True when this side came from a single file holding both sides. */
+ combined: boolean;
+}
@Component({
selector: 'mifosx-client-kyc-step',
@@ -70,6 +90,13 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
@Input() constitutionMeta: any = null;
/** Entity full name (non-individual) — used for enterprise PAN verification */
@Input() entityName: string = '';
+ /**
+ * Name and date of birth captured on the General step. PAN and Aadhaar are matched against exactly
+ * these two values by the provider, so they are shown here: an officer should be able to see what
+ * the check will compare before running it, rather than discovering a mismatch only on failure.
+ */
+ @Input() verificationName: string = '';
+ @Input() verificationDateOfBirth: Date | null = null;
/** Read-only mode — disables form editing until user clicks edit icon */
@Input() readOnly = false;
@Input() calculatedRisk: {
@@ -102,8 +129,10 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
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;
+ /**
+ * Front and back stacked into one image, purely so the officer can eyeball both sides together.
+ * The sides are uploaded as separate files — this render is never saved.
+ */
kycDocMergedPreview: string | null = null;
/**
@@ -123,6 +152,25 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
previewUrl: string | null;
}[] = [];
+ /**
+ * The saved proof mapped onto the two upload slots, so each side shows the side it holds.
+ *
+ * Sides are uploaded as separate files named " — Front" / " — Back", which is what
+ * this matches on. Clients saved before that carry one stacked "…-combined.png" holding both
+ * sides; that image is cut back into halves so the two slots still show a front and a back rather
+ * than the same picture twice. `blob` is whichever image the slot ends up showing — the half for
+ * a split scan, so View opens that side alone.
+ */
+ existingKycDocSides: {
+ front: KycDocSide | null;
+ back: KycDocSide | null;
+ } = { front: null, back: null };
+
+ /** A stacked scan that could not be cut in two — the back slot has no image of its own to show. */
+ get kycDocIsLegacyCombined(): boolean {
+ return !!this.existingKycDocSides.front?.combined && !this.existingKycDocSides.back;
+ }
+
/** Set true after a save attempt so we can highlight missing photo/signature boxes */
photoSigTouched = false;
@@ -170,6 +218,26 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
.filter((key) => this.kycForm.get(key)?.invalid)
.map((key) => ClientKycStepComponent.REQUIRED_FIELD_LABELS[key] || key);
}
+
+ get kycAllDone(): boolean {
+ if (this.isNonIndividual) {
+ const needsGstin = !!this.kycForm?.get('gstinNumber')?.value;
+ const needsCin = !!this.kycForm?.get('cinNumber')?.value;
+ const panOk = this.entPanVerifyStatus === 'VERIFIED';
+ const gstinOk = !needsGstin || this.gstinVerifyStatus === 'VERIFIED';
+ const cinOk = !needsCin || this.cinVerifyStatus === 'VERIFIED';
+ return panOk && gstinOk && cinOk;
+ } else {
+ const needsPan = !this.isMinor && this.kycForm?.get('hasPan')?.value;
+ // A declaration settles PAN when the check cannot pass — otherwise a client whose PAN card
+ // spells their name differently could never be created at all.
+ const panOk = !needsPan || this.panVerifyStatus === 'VERIFIED' || this.panDeclarationTaken;
+ // Likewise for Aadhaar: a client who has only an enrolment slip has no number to verify, so
+ // requiring a passing OTP check would make them impossible to onboard.
+ const aadhaarOk = this.aadhaarVerifyStatus === 'VERIFIED' || this.aadhaarReceiptTaken;
+ return panOk && aadhaarOk;
+ }
+ }
/** Fallback document types when template API is unavailable */
private defaultDocumentTypes = [
{ name: 'Aadhaar Card', code: 'AADHAAR' },
@@ -291,6 +359,38 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
panVerifyName: string = '';
panVerifiedOn: string = '';
+ /**
+ * Declaration accepted in place of a passing PAN check.
+ *
+ * The Income Tax check matches on name *and* date of birth, so a client whose PAN card carries a
+ * different spelling can never clear it however many times the officer retries. Holding a signed
+ * declaration that records what differs is what lets the client be created and what waives the
+ * PAN KYC exception — PAN itself stays unverified, which is the honest state.
+ */
+ panDeclaration: PanDeclarationResult | null = null;
+ /** Date the declaration was accepted, in the tenant's display format. */
+ panDeclarationTakenOn = '';
+ /** Message from the failed verification — carried into the declaration dialog as its reason. */
+ private panDeclarationFailureMessage = '';
+ /** True when the failure was not a name/DOB mismatch (invalid PAN, vendor unreachable). */
+ private panDeclarationUnverifiable = false;
+
+ get panDeclarationTaken(): boolean {
+ return !!this.panDeclaration;
+ }
+
+ /** "Name", "Date of Birth", "Name and Date of Birth", or the not-checked-at-all case. */
+ get panDeclarationMismatchLabel(): string {
+ const fields = this.panDeclaration?.mismatchFields;
+ if (!fields || fields === 'NONE') {
+ return 'PAN could not be verified';
+ }
+ return fields
+ .split(',')
+ .map((f) => (f === 'NAME' ? 'Name' : 'Date of Birth'))
+ .join(' and ');
+ }
+
/** Aadhaar verification */
aadhaarVerifyStatus: 'NONE' | 'VERIFIED' | 'FAILED' = 'NONE';
aadhaarVerifying = false;
@@ -302,6 +402,21 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
aadhaarOtpVerifying = false;
aadhaarOtpReferenceId = '';
+ /**
+ * UIDAI enrolment receipt accepted in place of a verified Aadhaar.
+ *
+ * A customer who has applied for Aadhaar but has not been issued one holds only an enrolment
+ * slip. With no Aadhaar number there is nothing to send to the OTP flow, so the check can never
+ * pass — recording the slip is what lets the client be created and waives the Aadhaar exception.
+ */
+ aadhaarReceipt: AadhaarReceiptResult | null = null;
+ /** Date the receipt was accepted, in the tenant's display format. */
+ aadhaarReceiptTakenOn = '';
+
+ get aadhaarReceiptTaken(): boolean {
+ return !!this.aadhaarReceipt;
+ }
+
/** OTP digit boxes */
otpDigits: string[] = [
'',
@@ -494,6 +609,10 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
accountStatus: ['ACTIVE'],
freezeReason: [''],
freezeAuthority: [''],
+ freezeDate: [''],
+ freezeAmount: [''],
+ unfreezeDate: [''],
+ noDebitDate: [''],
form60Type: ['FORM_60'],
form60Date: [''],
form15Applicable: [false],
@@ -548,12 +667,17 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
if (!this.readOnly) {
riskControl?.enable();
}
+ this.kycForm.get('remarks')?.setValidators(Validators.required);
} else {
riskControl?.disable();
if (this.calculatedRisk) {
riskControl?.setValue(this.calculatedRisk.category);
}
+ if (!this.isKycVerified) {
+ this.kycForm.get('remarks')?.clearValidators();
+ }
}
+ this.kycForm.get('remarks')?.updateValueAndValidity();
});
this.kycForm.get('allowAmlOverride')?.valueChanges.subscribe((allowed: boolean) => {
@@ -636,22 +760,28 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
this.kycDocumentTypes = [];
this.selectedKycDoc = null;
this.kycDocFiles = { front: null, back: null };
- this.kycDocMergedFile = null;
this.kycDocMergedPreview = null;
this.existingKycIdentifierId = null;
this.riskCalculationReason = '';
this.showRiskRulesTable = false;
this.existingKycDocuments = [];
+ this.existingKycDocSides = { front: null, back: null };
this.photoSigTouched = false;
this.panVerifyStatus = 'NONE';
this.panVerifying = false;
this.panVerifyError = '';
this.panVerifyName = '';
this.panVerifiedOn = '';
+ this.panDeclaration = null;
+ this.panDeclarationTakenOn = '';
+ this.panDeclarationFailureMessage = '';
+ this.panDeclarationUnverifiable = false;
this.aadhaarVerifyStatus = 'NONE';
this.aadhaarVerifying = false;
this.aadhaarVerifyError = '';
this.aadhaarVerifyName = '';
+ this.aadhaarReceipt = null;
+ this.aadhaarReceiptTakenOn = '';
this.aadhaarVisible = false;
this.aadhaarOtpSent = false;
this.resetOtpDigits();
@@ -788,7 +918,13 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
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;
+ if (currentName) {
+ const cleanStr = (s: string) => (s || '').toLowerCase().replace(/[^a-z0-9]/g, '');
+ const targetName = cleanStr(currentName);
+ this.selectedKycDoc = this.kycDocProofs.find((p) => cleanStr(p.name) === targetName) || null;
+ } else {
+ this.selectedKycDoc = null;
+ }
}
selectKycDoc(proof: ProofType): void {
@@ -796,7 +932,6 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
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;
}
@@ -828,31 +963,40 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
removeKycDocFile(slot: 'front' | 'back'): void {
this.kycDocFiles[slot] = null;
- this.kycDocMergedFile = null;
this.kycDocMergedPreview = null;
}
- /** Open the saved KYC ID-proof document in an in-app preview dialog. */
- viewExistingKycDoc(): void {
- if (!this.existingKycIdentifierId || this.existingKycDocuments.length === 0) {
+ /** Open the saved file for one side of the KYC ID proof in an in-app preview dialog. */
+ viewExistingKycDoc(slot: 'front' | 'back' = 'front'): void {
+ const side = this.existingKycDocSides[slot];
+ if (!side) {
return;
}
- const doc = this.existingKycDocuments[0];
- this.clientsService.downloadClientIdentificationDocument(this.existingKycIdentifierId, doc.id).subscribe({
- next: (blob: Blob) =>
- this.dialog.open(DocumentPreviewDialogComponent, {
- data: { blob, title: doc.fileName || doc.name, fileName: doc.fileName || doc.name }
- }),
+ const show = (blob: Blob) =>
+ this.dialog.open(DocumentPreviewDialogComponent, {
+ data: { blob, title: side.fileName, fileName: side.fileName }
+ });
+ // A side cut out of a stacked scan is only held here, so show that half rather than
+ // re-downloading the file with both sides on it.
+ if (side.blob) {
+ show(side.blob);
+ return;
+ }
+ if (!this.existingKycIdentifierId) {
+ return;
+ }
+ this.clientsService.downloadClientIdentificationDocument(this.existingKycIdentifierId, side.id).subscribe({
+ next: show,
error: () => {
/* silent — UI still shows the saved filename */
}
});
}
+ /** Builds the both-sides-at-once preview. The merged image is shown, never uploaded. */
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;
}
@@ -861,19 +1005,15 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
this.kycDocFiles.back,
proof.name || 'kyc-document'
);
- if (merged) {
- this.kycDocMergedFile = merged.file;
- this.kycDocMergedPreview = merged.preview;
- } else {
- this.kycDocMergedFile = null;
- this.kycDocMergedPreview = null;
- }
+ this.kycDocMergedPreview = merged ? merged.preview : 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.
+ *
+ * Each side is sent as its own file, named by slot. They used to be stacked into a single
+ * combined PNG, which left one image standing for two slots — so re-opening the client showed
+ * the same front-and-back picture under both "Front side" and "Back side".
*/
get kycDocPayload(): {
proof: ProofType | null;
@@ -882,13 +1022,9 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
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 });
- }
+ 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,
@@ -953,6 +1089,10 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
accountStatus: data.accountStatus || 'ACTIVE',
freezeReason: data.freezeReason || '',
freezeAuthority: data.freezeAuthority || '',
+ freezeDate: parseDate(data.freezeDate),
+ freezeAmount: data.freezeAmount ?? '',
+ unfreezeDate: parseDate(data.unfreezeDate),
+ noDebitDate: parseDate(data.noDebitDate),
// Form 60 / Form 15
form60Type: data.form60Type || 'FORM_60',
form60Date: parseDate(data.form60Date),
@@ -972,11 +1112,17 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
this.persistedExceptionReason = data.exceptionReason || null;
// Sync chip-picker selection with the prefilled document name
if (data.kycDocumentName) {
- this.selectedKycDoc = this.kycDocProofs.find((p) => p.name === data.kycDocumentName) || null;
+ const cleanStr = (s: string) => (s || '').toLowerCase().replace(/[^a-z0-9]/g, '');
+ const targetName = cleanStr(data.kycDocumentName);
+ this.selectedKycDoc = this.kycDocProofs.find((p) => cleanStr(p.name) === targetName) || null;
}
// Set verification statuses from existing data
if (data.panVerified) {
- this.panVerifyStatus = 'VERIFIED';
+ if (this.isNonIndividual) {
+ this.entPanVerifyStatus = 'VERIFIED';
+ } else {
+ this.panVerifyStatus = 'VERIFIED';
+ }
this.panVerifyName = data.panFullName || data.panHolderName || '';
const rawDate = data.panVerifiedOn;
if (Array.isArray(rawDate) && rawDate.length >= 3) {
@@ -985,9 +1131,33 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
this.panVerifiedOn = rawDate;
}
}
+ // A PAN that verified needs no declaration; one that did not may already carry one, and
+ // the officer has to see it — it is the only reason PAN shows no exception.
+ if (!data.panVerified && data.panDeclarationTaken === true) {
+ this.panVerifyStatus = 'FAILED';
+ this.panDeclaration = {
+ mismatchFields: data.panDeclarationMismatchFields || 'NONE',
+ nameOnPan: data.panDeclarationNameOnPan || null,
+ dobOnPan: this.parseApiDate(data.panDeclarationDobOnPan),
+ // The scan itself lives with the client's documents; the record keeps its name.
+ file: null,
+ fileName: data.panDeclarationRemarks || ''
+ };
+ this.panDeclarationTakenOn = this.formatApiDate(data.panDeclarationTakenOn);
+ this.panDeclarationUnverifiable = this.panDeclaration.mismatchFields === 'NONE';
+ }
if (data.aadhaarVerified) {
this.aadhaarVerifyStatus = 'VERIFIED';
this.aadhaarVerifyName = data.aadhaarHolderName || 'Aadhaar Verified';
+ } else if (data.aadhaarReceiptTaken === true) {
+ // Aadhaar is unverified but an enrolment slip is on file — the officer has to see it,
+ // since it is the only reason Aadhaar carries no exception.
+ this.aadhaarReceipt = {
+ enrolmentId: data.aadhaarEnrolmentId || '',
+ enrolmentDate: this.parseApiDate(data.aadhaarEnrolmentDate),
+ remarks: data.aadhaarReceiptRemarks || ''
+ };
+ this.aadhaarReceiptTakenOn = this.formatApiDate(data.aadhaarReceiptTakenOn);
}
if (data.panAadhaarSeedingStatus) {
this.panAadhaarSeedingStatus = data.panAadhaarSeedingStatus;
@@ -1003,6 +1173,15 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
this.gstinVerifiedOn = rawGstinDate;
}
}
+ if (data.cinVerified) {
+ this.cinVerifyStatus = 'VERIFIED';
+ const rawCinDate = data.cinVerifiedOn;
+ if (Array.isArray(rawCinDate) && rawCinDate.length >= 3) {
+ this.cinVerifiedOn = `${rawCinDate[2]?.toString().padStart(2, '0')}/${rawCinDate[1]?.toString().padStart(2, '0')}/${rawCinDate[0]}`;
+ } else if (rawCinDate) {
+ this.cinVerifiedOn = rawCinDate;
+ }
+ }
}
// Load existing photo & signature
this.loadExistingPhoto();
@@ -1032,9 +1211,16 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
this.clientsService.getClientIdentifiers(this.clientId).subscribe({
next: (identifiers: any[]) => {
if (!identifiers || identifiers.length === 0) return;
+ const cleanStr = (s: string) => (s || '').toLowerCase().replace(/[^a-z0-9]/g, '');
const isKycType = (i: any) => {
- const n = i?.documentType?.name?.toLowerCase();
- return !!n && this.kycDocProofs.some((p) => p.name?.toLowerCase() === n);
+ const n = cleanStr(i?.documentType?.name);
+ return (
+ !!n &&
+ this.kycDocProofs.some((p) => {
+ const pname = cleanStr(p.name);
+ return pname === n || n.includes(pname) || pname.includes(n);
+ })
+ );
};
// Re-uploading a KYC document creates a new identifier row rather than updating the
// old one in place (same pattern as OVD identifiers), so sort newest-first before
@@ -1044,7 +1230,11 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
// Pick by document-type name match first; otherwise the first identifier whose
// type lives in the KYC proof list (avoid bleeding the address proof in here).
const match = kycDocumentName
- ? sorted.find((i: any) => i?.documentType?.name?.toLowerCase() === kycDocumentName.toLowerCase())
+ ? sorted.find((i: any) => {
+ const name = cleanStr(i?.documentType?.name);
+ const kName = cleanStr(kycDocumentName);
+ return name === kName || name.includes(kName) || kName.includes(name);
+ })
: null;
const identifier = match || sorted.find(isKycType);
if (!identifier?.id) return;
@@ -1071,30 +1261,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
size: d.size || 0,
previewUrl: null as string | null
}));
- // Build a preview for the first image-typed document so the UI can show
- // exactly what the user uploaded last time.
- const firstImage = this.existingKycDocuments.find((d) => (d.type || '').toLowerCase().startsWith('image/'));
- if (firstImage) {
- this.clientsService
- .downloadClientIdentificationDocument(this.existingKycIdentifierId!, firstImage.id)
- .subscribe({
- next: async (blob: any) => {
- const buffer = await blob.arrayBuffer();
- const bytes = new Uint8Array(buffer);
- let binary = '';
- for (let i = 0; i < bytes.length; i++) {
- binary += String.fromCharCode(bytes[i]);
- }
- firstImage.previewUrl = 'data:' + blob.type + ';base64,' + btoa(binary);
- // Mirror onto the merged-preview slot so the existing chip-picker
- // visualisation lights up without template changes.
- if (!this.kycDocMergedPreview) {
- this.kycDocMergedPreview = firstImage.previewUrl;
- }
- },
- error: () => {}
- });
- }
+ this.mapExistingKycDocsToSides();
},
error: () => {}
});
@@ -1103,6 +1270,137 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
});
}
+ /**
+ * Works out which saved file belongs to which side, then fetches a thumbnail for each.
+ *
+ * Uploads are named " — Front" / " — Back", so the side is read off the document
+ * name and only falls back to upload order when the name says nothing. A file that announces
+ * itself as combined is handed to the splitter, since it holds both sides in one image.
+ */
+ private mapExistingKycDocsToSides(): void {
+ const sideOf = (doc: { name: string; fileName: string }): 'front' | 'back' | 'combined' | null => {
+ const text = `${doc.name || ''} ${doc.fileName || ''}`.toLowerCase();
+ if (text.includes('combined')) return 'combined';
+ if (text.includes('back')) return 'back';
+ if (text.includes('front')) return 'front';
+ return null;
+ };
+
+ const entry = (doc: { id: string; name: string; fileName: string }, combined: boolean): KycDocSide => ({
+ id: doc.id,
+ fileName: doc.fileName || doc.name,
+ previewUrl: null,
+ blob: null,
+ combined
+ });
+
+ const sides: { front: KycDocSide | null; back: KycDocSide | null } = { front: null, back: null };
+ const unlabelled: typeof this.existingKycDocuments = [];
+
+ for (const doc of this.existingKycDocuments) {
+ const side = sideOf(doc);
+ if (side === 'combined') {
+ sides.front = sides.front || entry(doc, true);
+ } else if (side === 'front') {
+ sides.front = entry(doc, false);
+ } else if (side === 'back') {
+ sides.back = entry(doc, false);
+ } else {
+ unlabelled.push(doc);
+ }
+ }
+
+ // Nothing in the names to go on — fall back to upload order, front first.
+ for (const doc of unlabelled) {
+ if (!sides.front) {
+ sides.front = entry(doc, false);
+ } else if (!sides.back) {
+ sides.back = entry(doc, false);
+ }
+ }
+
+ this.existingKycDocSides = sides;
+
+ if (sides.front?.combined && !sides.back) {
+ this.splitCombinedKycDoc(sides.front);
+ return;
+ }
+
+ for (const key of [
+ 'front',
+ 'back'
+ ] as const) {
+ const side = sides[key];
+ if (side && this.isImageKycDoc(side.id)) {
+ this.loadKycSidePreview(side);
+ }
+ }
+ }
+
+ private isImageKycDoc(id: string): boolean {
+ const doc = this.existingKycDocuments.find((d) => d.id === id);
+ if (!doc) {
+ return false;
+ }
+ const mime = (doc.type || '').toLowerCase();
+ const name = (doc.fileName || '').toLowerCase();
+ return mime.startsWith('image/') || name.endsWith('.jpg') || name.endsWith('.jpeg') || name.endsWith('.png');
+ }
+
+ private loadKycSidePreview(side: KycDocSide): void {
+ this.clientsService.downloadClientIdentificationDocument(this.existingKycIdentifierId!, side.id).subscribe({
+ next: (blob: Blob) => {
+ side.blob = blob;
+ side.previewUrl = URL.createObjectURL(blob);
+ const doc = this.existingKycDocuments.find((d) => d.id === side.id);
+ if (doc) {
+ doc.previewUrl = side.previewUrl;
+ }
+ },
+ error: () => {}
+ });
+ }
+
+ /**
+ * Cuts a saved front-above-back scan back into the two sides it was made from.
+ *
+ * Clients saved before the sides were stored separately have one stacked image and no back file,
+ * which is why both slots used to show the same picture. The seam left by the merge is what makes
+ * the split possible; when it cannot be found the front slot keeps the whole scan and the back
+ * slot says where its side is, rather than repeating the image and implying a back scan exists.
+ */
+ private splitCombinedKycDoc(front: KycDocSide): void {
+ if (!this.isImageKycDoc(front.id)) {
+ return;
+ }
+ const base = front.fileName;
+ this.clientsService.downloadClientIdentificationDocument(this.existingKycIdentifierId!, front.id).subscribe({
+ next: (blob: Blob) => {
+ this.kycUpload.splitFrontBack(blob).then((split) => {
+ if (!split) {
+ front.blob = blob;
+ front.previewUrl = URL.createObjectURL(blob);
+ return;
+ }
+ front.fileName = `${base} (front)`;
+ front.blob = split.front;
+ front.previewUrl = URL.createObjectURL(split.front);
+ this.existingKycDocSides = {
+ front,
+ back: {
+ id: front.id,
+ fileName: `${base} (back)`,
+ previewUrl: URL.createObjectURL(split.back),
+ blob: split.back,
+ combined: true
+ }
+ };
+ });
+ },
+ error: () => {}
+ });
+ }
+
/** Fetch existing client profile photo */
private loadExistingPhoto(): void {
if (!this.clientId) return;
@@ -1213,6 +1511,11 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
)
});
} else {
+ if (this.kycForm.get('allowRiskOverride')?.value && !this.kycForm.get('remarks')?.value?.trim()) {
+ onError('Remarks are mandatory when overriding the risk category.');
+ this.kycForm.get('remarks')?.markAsTouched();
+ return;
+ }
// Normal update for non-verified records
this.clientsService.updateClientKyc(this.clientId, this.kycId, updatePayload).subscribe({
next: () => callback(),
@@ -1220,6 +1523,11 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
});
}
} else {
+ if (this.kycForm.get('allowRiskOverride')?.value && !this.kycForm.get('remarks')?.value?.trim()) {
+ onError('Remarks are mandatory when overriding the risk category.');
+ this.kycForm.get('remarks')?.markAsTouched();
+ return;
+ }
// First time — use POST to create
this.clientsService.saveClientKyc(this.clientId, payload).subscribe({
next: (res: any) => {
@@ -1291,13 +1599,17 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
// If name is empty, the client name/DOB didn't match PAN holder
if (!resolvedName || !resolvedName.trim()) {
this.panVerifyStatus = 'FAILED';
- this.showPanErrorAlert(
- "PAN verification failed: Client name or date of birth does not match the PAN card holder. Please ensure the client's name and date of birth exactly match the PAN card details."
+ this.handlePanFailure(
+ "Client name or date of birth does not match the PAN card holder. Please ensure the client's name and date of birth exactly match the PAN card details.",
+ false
);
return;
}
this.panVerifyStatus = 'VERIFIED';
+ // A PAN that now verifies makes any earlier declaration moot — drop it so the record
+ // does not keep claiming a mismatch that no longer exists.
+ this.clearPanDeclaration();
this.panVerifyName = resolvedName;
// Date — could be string or array [y,m,d]
const rawDate = res.changes?.panVerifiedOn;
@@ -1315,7 +1627,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
}
} else {
this.panVerifyStatus = 'FAILED';
- this.showPanErrorAlert(res?.changes?.panVerificationMessage || 'PAN verification failed.');
+ this.handlePanFailure(res?.changes?.panVerificationMessage || 'PAN verification failed.', true);
}
},
error: (err: any) => {
@@ -1325,7 +1637,9 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
err?.error?.errors?.[0]?.defaultUserMessage ||
err?.error?.defaultUserMessage ||
'PAN verification failed.';
- this.showPanErrorAlert(msg);
+ // The backend reports a name/DOB mismatch through a dedicated error, so a message
+ // naming it is treated as the comparable case even though it arrives on the error path.
+ this.handlePanFailure(msg, !this.isNameOrDobMismatchMessage(msg));
}
});
},
@@ -1336,6 +1650,165 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
);
}
+ /** Does this failure message describe a name/DOB mismatch, as opposed to any other failure? */
+ private isNameOrDobMismatchMessage(message: string): boolean {
+ const lower = (message || '').toLowerCase();
+ return lower.includes('does not match') || lower.includes('name.mismatch') || lower.includes('name mismatch');
+ }
+
+ /**
+ * Shows why PAN verification failed and offers the declaration route out of it.
+ *
+ * Every PAN failure is offered a declaration, not only the mismatch case: an officer facing an
+ * unreachable vendor is just as stuck as one facing a misspelt PAN card, and both are resolved by
+ * the same signed paperwork. `unverifiable` only changes what the dialog asks for — there is no
+ * point comparing against a PAN card when the check never reached the Income Tax records.
+ */
+ private handlePanFailure(message: string, unverifiable: boolean): void {
+ this.panDeclarationFailureMessage = message;
+ this.panDeclarationUnverifiable = unverifiable;
+ this.panVerifyError = '';
+ this.dialog
+ .open(PanErrorDialogComponent, {
+ width: '480px',
+ data: { message, offerDeclaration: true }
+ })
+ .afterClosed()
+ .subscribe((takeDeclaration: boolean) => {
+ if (takeDeclaration) {
+ this.openPanDeclaration();
+ }
+ });
+ }
+
+ /**
+ * Opens the declaration dialog and, on save, persists it with the KYC record.
+ *
+ * The declaration is written straight through rather than held until the next Save & Next: it is
+ * what suppresses the PAN exception, and an officer who takes a declaration and then navigates
+ * away must not find the client sitting in the exception list.
+ */
+ openPanDeclaration(): void {
+ if (!this.clientId) {
+ this.showPanErrorAlert('Client must be created first. Complete General tab and click Next.');
+ return;
+ }
+ const dateFormat = this.settingsService.dateFormat;
+ this.dialog
+ .open(PanDeclarationDialogComponent, {
+ width: '720px',
+ maxWidth: '95vw',
+ disableClose: true,
+ data: {
+ submittedName: this.verificationName,
+ submittedDob: this.verificationDateOfBirth
+ ? this.dateUtils.formatDate(this.verificationDateOfBirth, dateFormat)
+ : '',
+ panNumber: (this.kycForm.value.panNumber || '').toUpperCase().trim(),
+ failureMessage: this.panDeclarationFailureMessage || 'PAN verification failed.',
+ unverifiable: this.panDeclarationUnverifiable,
+ existing: this.panDeclaration
+ }
+ })
+ .afterClosed()
+ .subscribe((result: PanDeclarationResult | undefined) => {
+ if (!result) {
+ return;
+ }
+ // The scan has to reach the client's documents before the KYC record claims a declaration
+ // is on file — otherwise the exception is waived by a document nobody can produce.
+ if (result.file) {
+ this.uploadPanDeclarationFile(
+ result.file,
+ (msg) => this.showPanErrorAlert(msg),
+ () => this.storePanDeclaration(result, dateFormat)
+ );
+ } else {
+ this.storePanDeclaration(result, dateFormat);
+ }
+ });
+ }
+
+ /** Files the signed declaration against the client, so the waiver has its proof attached. */
+ private uploadPanDeclarationFile(file: File, onError: (msg: string) => void, onDone: () => void): void {
+ const formData = new FormData();
+ formData.append('file', file);
+ formData.append('name', 'PAN Declaration');
+ formData.append(
+ 'description',
+ `Signed PAN declaration for ${(this.kycForm.value.panNumber || '').toUpperCase().trim() || 'PAN'}`
+ );
+ this.clientsService.uploadClientDocument(this.clientId, formData).subscribe({
+ next: () => onDone(),
+ error: (err: any) =>
+ onError(
+ err?.error?.defaultUserMessage ||
+ err?.error?.developerMessage ||
+ 'Could not upload the signed declaration. Please try again.'
+ )
+ });
+ }
+
+ private storePanDeclaration(result: PanDeclarationResult, dateFormat: string): void {
+ this.panDeclaration = result;
+ this.panDeclarationTakenOn = this.dateUtils.formatDate(new Date(), dateFormat);
+ this.saveKycAndDo(
+ this.kycData,
+ () => {
+ /* stored — the KYC record now carries the declaration and no PAN exception */
+ },
+ (msg) => {
+ // Roll the declaration back so the UI never shows one the server did not accept.
+ this.clearPanDeclaration();
+ this.showPanErrorAlert(msg);
+ }
+ );
+ }
+
+ /**
+ * Fineract serialises dates as `[yyyy, M, d]`, but the same field comes back as a formatted
+ * string from the command-response path — both shapes have to be accepted.
+ */
+ private parseApiDate(raw: any): Date | null {
+ if (!raw) {
+ return null;
+ }
+ if (Array.isArray(raw) && raw.length >= 3) {
+ return new Date(raw[0], raw[1] - 1, raw[2]);
+ }
+ const parsed = new Date(raw);
+ return isNaN(parsed.getTime()) ? null : parsed;
+ }
+
+ /** The same value rendered for display in the tenant's date format. */
+ private formatApiDate(raw: any): string {
+ const parsed = this.parseApiDate(raw);
+ return parsed ? this.dateUtils.formatDate(parsed, this.settingsService.dateFormat) : '';
+ }
+
+ /** Drops the declaration, both in the UI and from the next payload written to the server. */
+ private clearPanDeclaration(): void {
+ this.panDeclaration = null;
+ this.panDeclarationTakenOn = '';
+ }
+
+ /** Officer-initiated removal — e.g. the declaration was taken against the wrong PAN. */
+ removePanDeclaration(): void {
+ if (!this.panDeclaration) {
+ return;
+ }
+ this.clearPanDeclaration();
+ if (this.clientId && this.kycId) {
+ this.saveKycAndDo(
+ this.kycData,
+ () => {
+ /* removed — the PAN exception is raised again on this same save */
+ },
+ (msg) => this.showPanErrorAlert(msg)
+ );
+ }
+ }
+
/**
* Verify Enterprise PAN (non-individual) — same flow as individual PAN verification.
* Maps: Company PAN → panNumber, Company Name → client name, Date of Incorporation → DOB
@@ -1631,6 +2104,9 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
this.aadhaarVerifyStatus = 'VERIFIED';
this.aadhaarVerifyName = res.changes?.aadhaarHolderName || 'Aadhaar Verified';
this.aadhaarOtpSent = false;
+ // Aadhaar has been issued and verified, so the enrolment slip has served its purpose —
+ // drop it rather than leave the record claiming the customer is still waiting.
+ this.clearAadhaarReceipt();
if (res.changes?.panAadhaarSeedingStatus) {
this.panAadhaarSeedingStatus = res.changes.panAadhaarSeedingStatus;
}
@@ -1645,6 +2121,79 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
});
}
+ /**
+ * Opens the enrolment-receipt dialog and, on save, persists it with the KYC record.
+ *
+ * Written straight through rather than held until the next Save & Next: the receipt is what
+ * suppresses the Aadhaar exception, and an officer who records one and then navigates away must
+ * not find the client sitting in the exception list.
+ */
+ openAadhaarReceipt(): void {
+ if (!this.clientId) {
+ this.aadhaarVerifyError = 'Client must be created first. Complete General tab and click Next.';
+ return;
+ }
+ const dateFormat = this.settingsService.dateFormat;
+ this.dialog
+ .open(AadhaarReceiptDialogComponent, {
+ width: '560px',
+ maxWidth: '95vw',
+ disableClose: true,
+ data: {
+ clientName: this.verificationName,
+ reason:
+ this.aadhaarVerifyError ||
+ 'Aadhaar has not been verified. Record the enrolment slip if the customer has applied but not yet received their Aadhaar.',
+ existing: this.aadhaarReceipt
+ }
+ })
+ .afterClosed()
+ .subscribe((result: AadhaarReceiptResult | undefined) => {
+ if (!result) {
+ return;
+ }
+ this.aadhaarReceipt = result;
+ this.aadhaarReceiptTakenOn = this.dateUtils.formatDate(new Date(), dateFormat);
+ this.aadhaarVerifyError = '';
+ this.saveKycAndDo(
+ this.kycData,
+ () => {
+ /* stored — the KYC record now carries the receipt and no Aadhaar exception */
+ },
+ (msg) => {
+ // Roll back so the UI never shows a receipt the server did not accept.
+ this.clearAadhaarReceipt();
+ this.aadhaarVerifyError = msg;
+ }
+ );
+ });
+ }
+
+ /** Drops the receipt, both in the UI and from the next payload written to the server. */
+ private clearAadhaarReceipt(): void {
+ this.aadhaarReceipt = null;
+ this.aadhaarReceiptTakenOn = '';
+ }
+
+ /** Officer-initiated removal — the Aadhaar exception is raised again on this same save. */
+ removeAadhaarReceipt(): void {
+ if (!this.aadhaarReceipt) {
+ return;
+ }
+ this.clearAadhaarReceipt();
+ if (this.clientId && this.kycId) {
+ this.saveKycAndDo(
+ this.kycData,
+ () => {
+ /* removed */
+ },
+ (msg) => {
+ this.aadhaarVerifyError = msg;
+ }
+ );
+ }
+ }
+
private showPanErrorAlert(message: string) {
this.panVerifyError = '';
this.dialog.open(PanErrorDialogComponent, {
@@ -1844,6 +2393,21 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
panNumber: this.isNonIndividual ? enterprisePanNorm : v.hasPan ? panNorm : null,
aadhaarNumberMasked: this.isNonIndividual ? 'XXXXXXXX0000' : aadhaarMasked,
panAadhaarSeedingStatus: this.panAadhaarSeedingStatus || null,
+ // PAN declaration — stored so the waived exception can be justified later, and so a reload
+ // does not silently drop the paperwork that is holding the exception off.
+ panDeclarationTaken: this.panDeclarationTaken,
+ panDeclarationMismatchFields: this.panDeclaration?.mismatchFields || null,
+ panDeclarationNameOnPan: this.panDeclaration?.nameOnPan || null,
+ panDeclarationDobOnPan: formatDate(this.panDeclaration?.dobOnPan || null),
+ // Names the uploaded declaration filed under the client's documents.
+ panDeclarationRemarks: this.panDeclaration?.fileName || null,
+ panDeclarationTakenOn: this.panDeclarationTakenOn || null,
+ // Aadhaar enrolment receipt — same reasoning as the PAN declaration above.
+ aadhaarReceiptTaken: this.aadhaarReceiptTaken,
+ aadhaarEnrolmentId: this.aadhaarReceipt?.enrolmentId || null,
+ aadhaarEnrolmentDate: formatDate(this.aadhaarReceipt?.enrolmentDate || null),
+ aadhaarReceiptRemarks: this.aadhaarReceipt?.remarks || null,
+ aadhaarReceiptTakenOn: this.aadhaarReceiptTakenOn || null,
gstinNumber: gstinNorm,
enterprisePan: enterprisePanNorm,
cinNumber: cinNorm,
@@ -1863,6 +2427,11 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
accountStatus: v.accountStatus || null,
freezeReason: v.freezeReason || null,
freezeAuthority: v.freezeAuthority || null,
+ freezeDate: formatDate(v.freezeDate),
+ freezeAmount:
+ v.freezeAmount === '' || v.freezeAmount === null || v.freezeAmount === undefined ? null : v.freezeAmount,
+ unfreezeDate: formatDate(v.unfreezeDate),
+ noDebitDate: formatDate(v.noDebitDate),
// Form 60 / Form 15
form60Type: v.form60Type || null,
form60Date: formatDate(v.form60Date),
@@ -1877,7 +2446,11 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
panVerified: this.isNonIndividual
? this.entPanVerifyStatus === 'VERIFIED'
: this.panVerifyStatus === 'VERIFIED',
+ // A signed declaration closes the PAN item by paperwork when the API never can.
+ panDeclarationTaken: this.panDeclarationTaken,
aadhaarVerified: this.aadhaarVerifyStatus === 'VERIFIED',
+ // An enrolment slip closes the Aadhaar item when there is no number to verify yet.
+ aadhaarReceiptTaken: this.aadhaarReceiptTaken,
// Non-individual clients submit a dummy masked Aadhaar, so checking it would saddle every
// company with a permanent exception.
aadhaarApplicable: !this.isNonIndividual,
@@ -1932,9 +2505,20 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
{{ data.message }}
+ @if (data.offerDeclaration) { ++ If the customer's PAN card genuinely carries different details, take a declaration from them instead. The + declaration records what does not match and lets the client be created without a PAN KYC exception. +
+ }
+ {{
+ kycDocumentAlertSeverity === 'critical' ? 'error' : 'schedule'
+ }}
+
+ }
+
+ {{ kycDocumentAlertTitle }}
+
+
+ {{ kycDocumentAlertMessage }}
+
@@ -87,12 +113,21 @@
@if (kycData.panVerified) {
check_circle Verified
+ } @else if (panDeclarationTaken) {
+
+ assignment_turned_in Declaration
} @else {
radio_button_unchecked Pending
}
{{
- kycData.panVerifiedOn ? formatDate(kycData.panVerifiedOn) : '—'
+ kycData.panVerified
+ ? kycData.panVerifiedOn
+ ? formatDate(kycData.panVerifiedOn)
+ : '—'
+ : panDeclarationTaken && kycData.panDeclarationTakenOn
+ ? formatDate(kycData.panDeclarationTakenOn)
+ : '—'
}}
+
+ @if (!kycData.panVerified && panDeclarationTaken) {
+
+
+ }
+
+ assignment_turned_in
+ PAN Declaration
+ @if (!saving) {
+
+
+
+
+ }
+
+
+
+
+ Does not match
+ {{ panDeclarationMismatchLabel }}
+
+ @if (kycData.panDeclarationNameOnPan) {
+
+ Name on PAN
+ {{ kycData.panDeclarationNameOnPan }}
+
+ }
+ @if (kycData.panDeclarationDobOnPan) {
+
+ DOB on PAN
+ {{ formatDate(kycData.panDeclarationDobOnPan) }}
+
+ }
+ @if (kycData.panDeclarationRemarks) {
+
+ Declaration file
+ {{ kycData.panDeclarationRemarks }}
+
+ }
+
+ PAN remains unverified. No KYC exception is raised for PAN while this declaration is on file.
+
+
@@ -120,12 +226,21 @@
@if (kycData.aadhaarVerified) {
check_circle Verified
+ } @else if (aadhaarReceiptTaken) {
+
+ receipt_long Receipt
} @else {
radio_button_unchecked Pending
}
{{
- kycData.aadhaarVerifiedOn ? formatDate(kycData.aadhaarVerifiedOn) : '—'
+ kycData.aadhaarVerified
+ ? kycData.aadhaarVerifiedOn
+ ? formatDate(kycData.aadhaarVerifiedOn)
+ : '—'
+ : aadhaarReceiptTaken && kycData.aadhaarReceiptTakenOn
+ ? formatDate(kycData.aadhaarReceiptTakenOn)
+ : '—'
}}
@if (!showAadhaarReVerify && !aadhaarOtpSent) {
@@ -139,9 +254,142 @@
Re-Verify
}
+
+ @if (!kycData.aadhaarVerified && !aadhaarReceiptTaken) {
+
+ }
+
+ @if (!kycData.aadhaarVerified && aadhaarReceiptTaken) {
+
+
+ }
+
+
+ @if (kycData.kycDocumentName) {
+
+ receipt_long
+ Aadhaar Enrolment Receipt
+ @if (!saving) {
+
+
+
+
+ }
+
+
+
+
+ Enrolment ID
+ {{ kycData.aadhaarEnrolmentId || '—' }}
+
+ @if (kycData.aadhaarEnrolmentDate) {
+
+ Enrolment date
+ {{ formatDate(kycData.aadhaarEnrolmentDate) }}
+
+ }
+ @if (kycData.aadhaarReceiptRemarks) {
+
+ Remarks
+ {{ kycData.aadhaarReceiptRemarks }}
+
+ }
+
+ Aadhaar remains unverified. No KYC exception is raised for Aadhaar while this receipt is on file.
+
+
+
+ description {{ kycData.kycDocumentName }}
+
+ {{ kycData.kycDocumentNumber || '—' }}
+
+ @switch (kycDocumentRenewal.state) {
+ @case ('EXPIRED') {
+ error Expired
+ }
+ @case ('EXPIRING_SOON') {
+ schedule Expires Soon
+ }
+ @case ('DUE') {
+ update Update Due
+ }
+ @case ('OK') {
+ check_circle Current
+ }
+ @default {
+ help_outline No dates
+ }
+ }
+
+
+
+ @if (kycData.kycDocIssueDate || kycData.kycDocExpiryDate) {
+
+ @if (kycData.kycDocIssueDate) {
+ Issued {{ formatDate(kycData.kycDocIssueDate) }}
+ }
+ @if (kycDocumentExpiresOn) {
+
+ Expires {{ kycDocumentExpiresOn }}
+ @if (kycDocumentExpiryIsDerived) {
+ 5-yr
+ }
+
+ }
+
+ } @else {
+ —
+ }
+
+
+
+
+
+ }
+
@if (isNonIndividual) {
@@ -360,39 +608,72 @@
@@ -567,6 +848,22 @@
error_outline
{{ verificationError.pan }}
+
+
+ Customer's PAN card genuinely carries different details, or PAN cannot be checked?
+
+
}
@if (verificationStatus.pan === 'VERIFIED' && verificationDetails.pan?.name) {
{{ verificationDetails.pan.name }}
@@ -678,6 +975,22 @@
+ Customer has applied for Aadhaar but not received it yet?
+
+
}
diff --git a/src/app/clients/clients-view/kyc-tab/kyc-tab.component.scss b/src/app/clients/clients-view/kyc-tab/kyc-tab.component.scss
index c1c8ee91f..99885a877 100644
--- a/src/app/clients/clients-view/kyc-tab/kyc-tab.component.scss
+++ b/src/app/clients/clients-view/kyc-tab/kyc-tab.component.scss
@@ -559,6 +559,19 @@
background: #eff6ff;
color: #2563eb;
}
+
+ // Unverified, covered by a declaration — amber, never green, so it cannot read as a pass.
+ &--declared {
+ background: #fffbeb;
+ color: #b45309;
+ }
+
+ // Covered by an enrolment slip. Blue rather than amber: nothing failed, the customer simply
+ // does not hold the document yet.
+ &--receipt {
+ background: #eff6ff;
+ color: #2563eb;
+ }
}
.kv-action-btn {
@@ -570,6 +583,265 @@
font-weight: 600 !important;
color: #1074b9 !important;
border-color: #1074b9 !important;
+
+ &.danger {
+ color: #b91c1c !important;
+ border-color: #fca5a5 !important;
+ }
+}
+
+/* PAN declaration detail, shown under the PAN row when the check did not pass */
+.kv-decl {
+ margin: 4px 0 8px;
+ padding: 12px 14px;
+ border: 1px solid #fcd34d;
+ border-radius: 8px;
+ background: #fffbeb;
+}
+
+.kv-decl__head {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 10px;
+
+ mat-icon {
+ color: #b45309;
+ font-size: 18px !important;
+ width: 18px !important;
+ height: 18px !important;
+ }
+}
+
+.kv-decl__title {
+ font-size: 13px;
+ font-weight: 600;
+ color: #92400e;
+}
+
+.kv-decl__actions {
+ margin-left: auto;
+ display: flex;
+ gap: 8px;
+}
+
+.kv-decl__rows {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.kv-decl__row {
+ display: grid;
+ grid-template-columns: 140px 1fr;
+ gap: 10px;
+ font-size: 12.5px;
+
+ .k {
+ color: #92400e;
+ font-weight: 500;
+ }
+
+ .v {
+ color: #451a03;
+ word-break: break-word;
+
+ &.strong {
+ font-weight: 600;
+ }
+ }
+}
+
+.kv-decl__note {
+ margin-top: 10px;
+ padding-top: 8px;
+ border-top: 1px solid #fde68a;
+ font-size: 11.5px;
+ line-height: 1.5;
+ color: #b45309;
+}
+
+/* KYC document renewal alert — amber for a stale document, red once it has actually expired */
+.kyc-doc-alert {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ padding: 16px;
+ margin-bottom: 20px;
+ border: 1px solid #f59e0b;
+ border-radius: 8px;
+ background: #fef3c7;
+
+ &--critical {
+ border-color: #ef4444;
+ background: #fee2e2;
+ }
+}
+
+.kyc-doc-alert__icon {
+ flex: 0 0 auto;
+ margin-top: 2px;
+ color: #d97706;
+
+ .kyc-doc-alert--critical & {
+ color: #dc2626;
+ }
+}
+
+.kyc-doc-alert__body {
+ flex: 1 1 auto;
+ min-width: 0;
+}
+
+.kyc-doc-alert__title {
+ font-size: 14px;
+ color: #92400e;
+
+ .kyc-doc-alert--critical & {
+ color: #991b1b;
+ }
+}
+
+.kyc-doc-alert__text {
+ margin: 4px 0 0;
+ font-size: 13px;
+ line-height: 1.5;
+ color: #b45309;
+
+ .kyc-doc-alert--critical & {
+ color: #b91c1c;
+ }
+}
+
+.kyc-doc-alert__action {
+ flex: 0 0 auto;
+ align-self: center;
+}
+
+/* Issue / expiry pair in the document row */
+.kv-doc-dates {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ font-size: 12px;
+}
+
+.kv-doc-dates__expiry {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: #64748b;
+
+ /* Calculated from the issue date rather than printed on the document. */
+ &--derived {
+ color: #94a3b8;
+ }
+}
+
+.kv-doc-dates__tag {
+ padding: 0 5px;
+ border: 1px solid #e2e8f0;
+ border-radius: 4px;
+ background: #f8fafc;
+ font-size: 9.5px;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: #94a3b8;
+ cursor: default;
+}
+
+/* Aadhaar enrolment receipt detail, shown under the Aadhaar row when the check did not pass */
+.kv-rcpt {
+ margin: 4px 0 8px;
+ padding: 12px 14px;
+ border: 1px solid #bfdbfe;
+ border-radius: 8px;
+ background: #eff6ff;
+}
+
+.kv-rcpt__head {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 10px;
+
+ mat-icon {
+ color: #2563eb;
+ font-size: 18px !important;
+ width: 18px !important;
+ height: 18px !important;
+ }
+}
+
+.kv-rcpt__title {
+ font-size: 13px;
+ font-weight: 600;
+ color: #1e3a8a;
+}
+
+.kv-rcpt__actions {
+ margin-left: auto;
+ display: flex;
+ gap: 8px;
+}
+
+.kv-rcpt__rows {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.kv-rcpt__row {
+ display: grid;
+ grid-template-columns: 140px 1fr;
+ gap: 10px;
+ font-size: 12.5px;
+
+ .k {
+ color: #1e40af;
+ font-weight: 500;
+ }
+
+ .v {
+ color: #0f172a;
+ word-break: break-word;
+
+ &.mono {
+ font-family: monospace;
+ letter-spacing: 0.02em;
+ }
+ }
+}
+
+.kv-rcpt__note {
+ margin-top: 10px;
+ padding-top: 8px;
+ border-top: 1px solid #bfdbfe;
+ font-size: 11.5px;
+ line-height: 1.5;
+ color: #2563eb;
+}
+
+/* Offer shown beneath a failed PAN verification in edit mode */
+.kyc-decl-offer {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex-wrap: wrap;
+ margin-top: 8px;
+ padding: 10px 12px;
+ border: 1px solid #fde68a;
+ border-radius: 6px;
+ background: #fffbeb;
+ font-size: 12.5px;
+ color: #92400e;
+
+ button {
+ margin-left: auto;
+ color: #b45309 !important;
+ border-color: #fcd34d !important;
+ }
}
/* OTP Bar (below table) */
@@ -622,27 +894,76 @@
.kv-meta-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
+ background: #fff;
border: 1px solid #e2e8f0;
- border-radius: 10px;
- overflow: hidden;
- margin-top: 16px;
+ border-radius: 12px;
+ padding: 16px 20px;
+ gap: 20px;
+ margin-top: 20px;
+ box-shadow:
+ 0 1px 3px rgb(0 0 0 / 2%),
+ 0 4px 6px -1px rgb(0 0 0 / 5%);
}
.kv-meta-item {
display: flex;
- flex-direction: column;
- gap: 3px;
- padding: 12px 14px;
- border-right: 1px solid #f1f5f9;
- border-bottom: 1px solid #f1f5f9;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 12px;
+ border-radius: 8px;
+ transition: all 0.2s ease;
- &:nth-child(5n) {
- border-right: none;
+ &:hover {
+ background: #f8fafc;
}
&--full {
grid-column: 1 / -1;
- border-right: none;
+ border-top: 1px solid #f1f5f9;
+ padding-top: 16px;
+ margin-top: 4px;
+ border-radius: 0;
+ align-items: flex-start;
+
+ &:hover {
+ background: transparent;
+ }
+ }
+}
+
+.kv-meta-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.kv-meta-icon {
+ font-size: 24px !important;
+ width: 24px !important;
+ height: 24px !important;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+
+ &.icon-blue {
+ color: #3b82f6;
+ }
+
+ &.icon-green {
+ color: #10b981;
+ }
+
+ &.icon-orange {
+ color: #f59e0b;
+ }
+
+ &.icon-red {
+ color: #ef4444;
+ }
+
+ &.icon-grey {
+ color: #64748b;
}
}
@@ -656,7 +977,7 @@
.kv-meta-value {
font-size: 13px;
- font-weight: 500;
+ font-weight: 600;
color: #1e293b;
}
@@ -677,14 +998,7 @@
.kv-meta-grid {
grid-template-columns: repeat(3, 1fr);
- }
-
- .kv-meta-item:nth-child(5n) {
- border-right: 1px solid #f1f5f9;
- }
-
- .kv-meta-item:nth-child(3n) {
- border-right: none;
+ gap: 16px;
}
}
diff --git a/src/app/clients/clients-view/kyc-tab/kyc-tab.component.ts b/src/app/clients/clients-view/kyc-tab/kyc-tab.component.ts
index 4ad0cee36..baa19c44b 100644
--- a/src/app/clients/clients-view/kyc-tab/kyc-tab.component.ts
+++ b/src/app/clients/clients-view/kyc-tab/kyc-tab.component.ts
@@ -10,11 +10,26 @@
import { Component, OnInit, OnDestroy, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
import { catchError, of, Subject, takeUntil } from 'rxjs';
/** Custom Services */
import { ClientsService } from '../../clients.service';
import { deriveKycExceptionFields } from '../../kyc-exception.util';
+import {
+ deriveKycDocumentRenewal,
+ kycDocumentNeedsAttention,
+ KycDocumentRenewalStatus,
+ KYC_DOCUMENT_RENEWAL_YEARS
+} from '../../kyc-document-renewal.util';
+import {
+ PanDeclarationDialogComponent,
+ PanDeclarationResult
+} from '../../shared/pan-declaration-dialog/pan-declaration-dialog.component';
+import {
+ AadhaarReceiptDialogComponent,
+ AadhaarReceiptResult
+} from '../../shared/aadhaar-receipt-dialog/aadhaar-receipt-dialog.component';
import { Dates } from 'app/core/utils/dates';
import { jsPDF } from 'jspdf';
import { MatIcon } from '@angular/material/icon';
@@ -47,6 +62,7 @@ export class KycTabComponent implements OnInit, OnDestroy {
private clientsService = inject(ClientsService);
private formBuilder = inject(UntypedFormBuilder);
private dateUtils = inject(Dates);
+ private dialog = inject(MatDialog);
private destroy$ = new Subject