Compare commits
12
Commits
demo
...
7b895a0e2b
| Author | SHA1 | Date | |
|---|---|---|---|
 keshav
|
7b895a0e2b | ||
 nitesh
|
01e86173c1 | ||
|
nitesh
|
4281a596af | ||
|
nitesh
|
9f9c9bfab6 | ||
|
nitesh
|
513e863bba | ||
|
nitesh
|
13333088d7 | ||
|
nitesh
|
89bb76455e | ||
|
nitesh
|
7e69468995 | ||
|
nitesh
|
63ab9643ce | ||
|
nitesh
|
8255c8398d | ||
|
nitesh
|
b609f19e9f | ||
 niteshandClaude Sonnet 5
|
7f836f6f71 |
@@ -16,6 +16,7 @@
|
||||
"build": "node version.js && npm run env -s && ng build --configuration production --output-hashing=none",
|
||||
"build:prod": "node version.js && node --max-old-space-size=16384 ./node_modules/@angular/cli/bin/ng build --configuration production --output-hashing=none --base-href=/web-app/",
|
||||
"start": "npm run env -s && ng serve --proxy-config proxy.localhost.conf.js",
|
||||
"start:share": "npm run env -s && ng serve --host 0.0.0.0 --proxy-config proxy.localhost.conf.js",
|
||||
"start:demo": "npm run env -s && ng serve --proxy-config proxy.conf.js",
|
||||
"serve:dev": "npm run env -s && ng serve --source-map --proxy-config proxy.localhost.conf.js",
|
||||
"serve:sw": "npm run build -s && npx http-server ./dist -p 4200",
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
<!--
|
||||
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/.
|
||||
-->
|
||||
|
||||
<h2 class="mk-title" [class.mk-title--str]="isEscalation">
|
||||
<fa-icon [icon]="isEscalation ? 'exclamation-triangle' : 'check-circle'"></fa-icon>
|
||||
{{ isEscalation ? 'Mark as Suspicious' : 'Mark as Whitelisted' }}
|
||||
</h2>
|
||||
|
||||
<mat-dialog-content>
|
||||
<div class="mk-entry">
|
||||
<div>
|
||||
<label>Journal entry</label><span class="mono">#{{ data.journalEntryId }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>Transaction</label><span class="mono">{{ data.transactionId }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>Date</label><span>{{ data.transactionDate }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>Amount</label><span class="mono">₹{{ data.amount | number: '1.2-2' }}</span>
|
||||
</div>
|
||||
<div class="wide">
|
||||
<label>GL account</label><span>{{ data.glAccountName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (isEscalation) {
|
||||
<p class="mk-warn">
|
||||
<fa-icon icon="exclamation-triangle"></fa-icon>
|
||||
This raises an AML alert against the customer behind this entry and escalates it. An STR case opens for the
|
||||
Principal Officer with the seven working day FIU-IND clock running. It cannot be undone from this screen.
|
||||
</p>
|
||||
} @else {
|
||||
<p class="mk-note">
|
||||
Records the entry as reviewed and cleared. No report is filed and the customer's risk rating is untouched.
|
||||
</p>
|
||||
}
|
||||
|
||||
<label class="mk-field">
|
||||
<span>Reviewer notes {{ isEscalation ? '(required)' : '(optional)' }}</span>
|
||||
<textarea
|
||||
rows="4"
|
||||
[(ngModel)]="notes"
|
||||
[placeholder]="
|
||||
isEscalation
|
||||
? 'Why is this entry suspicious? What did you check?'
|
||||
: 'What satisfied you that this entry is in order?'
|
||||
"
|
||||
></textarea>
|
||||
</label>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions class="mk-actions">
|
||||
<button class="mk-btn" (click)="dialogRef.close()">Cancel</button>
|
||||
<button
|
||||
class="mk-btn"
|
||||
[class.mk-btn--str]="isEscalation"
|
||||
[class.mk-btn--ok]="!isEscalation"
|
||||
[disabled]="!canSubmit"
|
||||
(click)="confirm()"
|
||||
>
|
||||
{{ isEscalation ? 'Escalate to STR' : 'Whitelist entry' }}
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
@@ -1,165 +0,0 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
:host {
|
||||
--mk-g100: #f1f5f9;
|
||||
--mk-g200: #e2e8f0;
|
||||
--mk-g300: #cbd5e1;
|
||||
--mk-g500: #64748b;
|
||||
--mk-g700: #334155;
|
||||
--mk-g900: #0f172a;
|
||||
--mk-green: #15803d;
|
||||
--mk-red: #c0392b;
|
||||
--mk-amber-l: #fef3c7;
|
||||
|
||||
display: block;
|
||||
font-family: 'DM Sans', system-ui, sans-serif;
|
||||
color: var(--mk-g900);
|
||||
min-width: 460px;
|
||||
}
|
||||
|
||||
.mk-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin: 0;
|
||||
padding: 18px 22px 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--mk-green);
|
||||
|
||||
&--str {
|
||||
color: var(--mk-red);
|
||||
}
|
||||
}
|
||||
|
||||
.mk-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px 18px;
|
||||
padding: 11px 14px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--mk-g200);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--mk-g500);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mk-warn {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #78350f;
|
||||
background: var(--mk-amber-l);
|
||||
border-radius: 7px;
|
||||
padding: 9px 12px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.mk-note {
|
||||
font-size: 12px;
|
||||
color: var(--mk-g500);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.mk-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
span {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--mk-g500);
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 9px 11px;
|
||||
border: 1px solid var(--mk-g300);
|
||||
border-radius: 7px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--mk-g700);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mk-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 9px;
|
||||
padding: 8px 22px 18px;
|
||||
}
|
||||
|
||||
.mk-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--mk-g300);
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--mk-g700);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--mk-g100);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&--ok {
|
||||
background: var(--mk-green);
|
||||
border-color: var(--mk-green);
|
||||
color: #fff;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #12692f;
|
||||
}
|
||||
}
|
||||
|
||||
&--str {
|
||||
background: var(--mk-red);
|
||||
border-color: var(--mk-red);
|
||||
color: #fff;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #a5301f;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
|
||||
export interface MarkEntryDialogData {
|
||||
disposition: 'WHITELIST' | 'ESCALATE';
|
||||
journalEntryId: number;
|
||||
transactionId: string;
|
||||
amount: number;
|
||||
glAccountName: string;
|
||||
transactionDate: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Captures the reviewer's reason before a ledger entry is marked.
|
||||
*
|
||||
* Notes are not optional on an escalation: the Principal Officer picks the case up
|
||||
* with nothing else to go on, and an STR filed on an unexplained referral is not
|
||||
* defensible. A whitelist may be recorded without them.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-mark-entry-dialog',
|
||||
templateUrl: './mark-entry-dialog.component.html',
|
||||
styleUrls: ['./mark-entry-dialog.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FormsModule,
|
||||
FaIconComponent,
|
||||
MatDialogContent,
|
||||
MatDialogActions
|
||||
]
|
||||
})
|
||||
export class MarkEntryDialogComponent {
|
||||
dialogRef = inject<MatDialogRef<MarkEntryDialogComponent>>(MatDialogRef);
|
||||
data = inject<MarkEntryDialogData>(MAT_DIALOG_DATA);
|
||||
|
||||
notes = '';
|
||||
|
||||
get isEscalation(): boolean {
|
||||
return this.data.disposition === 'ESCALATE';
|
||||
}
|
||||
|
||||
get canSubmit(): boolean {
|
||||
return !this.isEscalation || this.notes.trim().length > 0;
|
||||
}
|
||||
|
||||
confirm(): void {
|
||||
if (this.canSubmit) {
|
||||
this.dialogRef.close(this.notes.trim());
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -535,14 +535,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (markError) {
|
||||
<div class="gl-mark-error">
|
||||
<fa-icon icon="exclamation-triangle"></fa-icon>
|
||||
<span>{{ markError }}</span>
|
||||
<button class="gl-mark-error__close" (click)="markError = ''">×</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="gl-table-shell">
|
||||
<mat-table [dataSource]="dataSource" matSort class="gl-mat-table">
|
||||
<!-- #ID -->
|
||||
@@ -700,50 +692,6 @@
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- AML review — whitelist or refer the entry to STR -->
|
||||
<ng-container matColumnDef="amlMark">
|
||||
<mat-header-cell *matHeaderCellDef class="gl-th">AML Review</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
@if (markOf(e); as mark) {
|
||||
<span
|
||||
class="gl-mark"
|
||||
[class.gl-mark--str]="mark.disposition === 'ESCALATE'"
|
||||
[matTooltip]="
|
||||
(mark.disposition === 'ESCALATE'
|
||||
? 'Escalated to STR' + (mark.strCaseId ? ' — case #' + mark.strCaseId : '')
|
||||
: 'Whitelisted') +
|
||||
(mark.reviewedBy ? ' by ' + mark.reviewedBy : '') +
|
||||
(mark.notes ? ' — ' + mark.notes : '')
|
||||
"
|
||||
>
|
||||
<fa-icon [icon]="mark.disposition === 'ESCALATE' ? 'exclamation-triangle' : 'check-circle'"></fa-icon>
|
||||
{{ mark.disposition === 'ESCALATE' ? 'Suspicious' : 'Whitelisted' }}
|
||||
</span>
|
||||
} @else if (isMarking(e)) {
|
||||
<span class="gl-mark gl-mark--busy">Saving…</span>
|
||||
} @else if (canMark(e)) {
|
||||
<span class="gl-mark-actions">
|
||||
<button
|
||||
class="gl-mark-btn gl-mark-btn--ok"
|
||||
matTooltip="Reviewed and in order — clear this entry"
|
||||
(click)="openMarkDialog(e, 'WHITELIST')"
|
||||
>
|
||||
<fa-icon icon="check-circle"></fa-icon> Whitelist
|
||||
</button>
|
||||
<button
|
||||
class="gl-mark-btn gl-mark-btn--str"
|
||||
matTooltip="Refer to the Principal Officer as an STR case"
|
||||
(click)="openMarkDialog(e, 'ESCALATE')"
|
||||
>
|
||||
<fa-icon icon="exclamation-triangle"></fa-icon> Suspicious
|
||||
</button>
|
||||
</span>
|
||||
} @else {
|
||||
<span class="gl-mark gl-mark--na" [matTooltip]="markBlockedReason(e)">—</span>
|
||||
}
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Actions -->
|
||||
<ng-container matColumnDef="actions">
|
||||
<mat-header-cell *matHeaderCellDef class="gl-th"></mat-header-cell>
|
||||
|
||||
@@ -1328,17 +1328,6 @@
|
||||
flex: 0 0 130px;
|
||||
}
|
||||
|
||||
// Wide enough to hold both action buttons on one line. Every other column
|
||||
// declares a width; without one this collapsed and clipped its contents.
|
||||
::ng-deep .mat-column-amlMark {
|
||||
width: 184px;
|
||||
min-width: 184px;
|
||||
flex: 0 0 184px;
|
||||
// Keeps the "AML REVIEW" heading on one line instead of clipping it.
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
::ng-deep .mat-column-actions {
|
||||
width: 50px;
|
||||
min-width: 50px;
|
||||
@@ -1567,112 +1556,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ── AML review column ─────────────────────────────────────────────────────────
|
||||
// Never wrap — a wrapped second button used to be clipped by the row height.
|
||||
.gl-mark-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gl-mark-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--c-border);
|
||||
background: var(--c-surface);
|
||||
border-radius: 6px;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--c-text-2);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
white-space: nowrap;
|
||||
flex: 1 1 auto;
|
||||
transition: all var(--transition);
|
||||
|
||||
// Tinted at rest, not only on hover — these have to be findable in a dense
|
||||
// table without the reviewer hunting for them.
|
||||
&--ok {
|
||||
border-color: rgb(16 185 129 / 45%);
|
||||
background: var(--c-cr-bg);
|
||||
color: #047857;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--c-cr);
|
||||
background: #d1fae5;
|
||||
}
|
||||
}
|
||||
|
||||
&--str {
|
||||
border-color: rgb(239 68 68 / 45%);
|
||||
background: var(--c-dr-bg);
|
||||
color: #b91c1c;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--c-dr);
|
||||
background: #fee2e2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gl-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 2px 9px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
background: var(--c-cr-bg);
|
||||
color: #047857;
|
||||
|
||||
&--str {
|
||||
background: var(--c-dr-bg);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
&--busy {
|
||||
background: #f1f5f9;
|
||||
color: var(--c-text-3);
|
||||
}
|
||||
|
||||
&--na {
|
||||
background: transparent;
|
||||
color: var(--c-text-3);
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-mark-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin: 0 0 10px;
|
||||
padding: 9px 14px;
|
||||
border: 1px solid #fecaca;
|
||||
background: var(--c-dr-bg);
|
||||
border-radius: 8px;
|
||||
font-size: 0.75rem;
|
||||
color: #b91c1c;
|
||||
|
||||
&__close {
|
||||
margin-left: auto;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Empty state ───────────────────────────────────────────────────────────────
|
||||
.gl-empty {
|
||||
display: flex;
|
||||
|
||||
@@ -41,20 +41,8 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { AmlService } from 'app/aml/aml.service';
|
||||
import { MarkEntryDialogComponent, MarkEntryDialogData } from './mark-entry-dialog.component';
|
||||
|
||||
const STATE_KEY = 'gl_ledger_filter_state';
|
||||
|
||||
/** How a ledger entry has been marked by a reviewer, keyed on journal entry id. */
|
||||
interface EntryMark {
|
||||
disposition: 'WHITELIST' | 'ESCALATE';
|
||||
strCaseId: number | null;
|
||||
reviewedBy: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-search-journal-entry',
|
||||
standalone: true,
|
||||
@@ -98,8 +86,6 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView
|
||||
private settingsService = inject(SettingsService);
|
||||
private dateUtils = inject(Dates);
|
||||
private route = inject(ActivatedRoute);
|
||||
private amlService = inject(AmlService);
|
||||
private dialog = inject(MatDialog);
|
||||
|
||||
// ── Misc ──────────────────────────────────────────────────────────────────
|
||||
minDate = new Date(2000, 0, 1);
|
||||
@@ -142,7 +128,6 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView
|
||||
'manualEntry',
|
||||
'createdByUserName',
|
||||
'submittedOnDate',
|
||||
'amlMark',
|
||||
'actions'
|
||||
];
|
||||
dayWiseColumns = [
|
||||
@@ -171,14 +156,6 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView
|
||||
dayWiseData: any[] = [];
|
||||
glAccountInfo: any = null;
|
||||
|
||||
// ── AML marking ───────────────────────────────────────────────────────────
|
||||
|
||||
/** Marks already recorded, by journal entry id. */
|
||||
private marks = new Map<number, EntryMark>();
|
||||
/** Entry ids with a request in flight, so a row cannot be double-submitted. */
|
||||
private marking = new Set<number>();
|
||||
markError = '';
|
||||
|
||||
// ── UI state ──────────────────────────────────────────────────────────────
|
||||
activeQuickFilter = '';
|
||||
activeFiltersCount = 0;
|
||||
@@ -234,103 +211,6 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView
|
||||
this.setFilteredOffices();
|
||||
this.getJournalEntries();
|
||||
this.loadLedgerSummary();
|
||||
this.loadMarks();
|
||||
}
|
||||
|
||||
// ── AML marking ───────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Marks are loaded once for the whole ledger rather than per page, because the
|
||||
* user pages and re-filters constantly and the set is small — only entries a
|
||||
* reviewer has actually touched.
|
||||
*/
|
||||
private loadMarks(): void {
|
||||
this.amlService.getManualReferrals().subscribe({
|
||||
next: (rows) => {
|
||||
this.marks = new Map(
|
||||
(rows || []).map((r: any) => [
|
||||
r.journalEntryId,
|
||||
{
|
||||
disposition: r.disposition === 'ESCALATE' ? 'ESCALATE' : 'WHITELIST',
|
||||
strCaseId: r.strCaseId ?? null,
|
||||
reviewedBy: r.reviewedByUsername || '',
|
||||
notes: r.reviewNotes || ''
|
||||
} as EntryMark
|
||||
])
|
||||
);
|
||||
},
|
||||
// A ledger that cannot reach the AML service still has to render.
|
||||
error: () => (this.marks = new Map())
|
||||
});
|
||||
}
|
||||
|
||||
markOf(entry: any): EntryMark | null {
|
||||
return this.marks.get(entry?.id) ?? null;
|
||||
}
|
||||
|
||||
isMarking(entry: any): boolean {
|
||||
return this.marking.has(entry?.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* An alert needs a customer, and a journal entry only reaches one through the
|
||||
* savings, loan or client transaction that produced it. A purely manual GL
|
||||
* posting reaches none, so it cannot be referred — the server enforces this too.
|
||||
*/
|
||||
canMark(entry: any): boolean {
|
||||
return !!entry && !this.markOf(entry) && !!(entry.savingsAccountNo || entry.entityId);
|
||||
}
|
||||
|
||||
markBlockedReason(entry: any): string {
|
||||
if (this.markOf(entry)) {
|
||||
return 'Already reviewed — a ledger entry is marked once';
|
||||
}
|
||||
return 'No customer behind this entry, so it cannot be referred';
|
||||
}
|
||||
|
||||
openMarkDialog(entry: any, disposition: 'WHITELIST' | 'ESCALATE'): void {
|
||||
if (!this.canMark(entry) || this.isMarking(entry)) {
|
||||
return;
|
||||
}
|
||||
const data: MarkEntryDialogData = {
|
||||
disposition,
|
||||
journalEntryId: entry.id,
|
||||
transactionId: entry.transactionId,
|
||||
amount: entry.amount,
|
||||
glAccountName: `${entry.glAccountCode} — ${entry.glAccountName}`,
|
||||
transactionDate: this.dateUtils.formatDate(entry.transactionDate, this.settingsService.dateFormat)
|
||||
};
|
||||
|
||||
this.dialog
|
||||
.open(MarkEntryDialogComponent, { data, width: '520px', autoFocus: false })
|
||||
.afterClosed()
|
||||
.subscribe((notes: string | undefined) => {
|
||||
if (notes !== undefined) {
|
||||
this.submitMark(entry, disposition, notes);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private submitMark(entry: any, disposition: 'WHITELIST' | 'ESCALATE', notes: string): void {
|
||||
this.markError = '';
|
||||
this.marking.add(entry.id);
|
||||
|
||||
this.amlService.referJournalEntry(entry.id, disposition, notes).subscribe({
|
||||
next: (res: any) => {
|
||||
this.marking.delete(entry.id);
|
||||
this.marks.set(entry.id, {
|
||||
disposition,
|
||||
strCaseId: res?.strCaseId ?? null,
|
||||
reviewedBy: res?.reviewedByUsername || '',
|
||||
notes
|
||||
});
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.marking.delete(entry.id);
|
||||
this.markError =
|
||||
err?.error?.defaultUserMessage || err?.error?.errors?.[0]?.defaultUserMessage || 'Could not mark this entry.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
||||
@@ -34,6 +34,30 @@ export class AmlService {
|
||||
return this.http.post(`/aml/alerts/${alertId}/review`, { disposition, notes });
|
||||
}
|
||||
|
||||
// ═══ Recurring-alert review queue ═══
|
||||
|
||||
/**
|
||||
* Customers whose transactions repeatedly trip the engine. Each row carries the triggering
|
||||
* alerts, so the reviewer can see why the customer keeps surfacing.
|
||||
*/
|
||||
getRecurringAlerts(minAlerts: number, windowDays: number, onlyNeedingReview: boolean): Observable<any[]> {
|
||||
const params = new HttpParams()
|
||||
.set('minAlerts', String(minAlerts))
|
||||
.set('windowDays', String(windowDays))
|
||||
.set('onlyNeedingReview', String(onlyNeedingReview));
|
||||
return this.http.get<any[]>('/aml/recurring-alerts', { params });
|
||||
}
|
||||
|
||||
/** outcome: 'CLEARED' | 'MONITOR' | 'ESCALATED' */
|
||||
reviewRecurringAlert(
|
||||
clientId: number,
|
||||
outcome: 'CLEARED' | 'MONITOR' | 'ESCALATED',
|
||||
notes: string,
|
||||
windowDays: number
|
||||
): Observable<any> {
|
||||
return this.http.post(`/aml/recurring-alerts/${clientId}/review`, { outcome, notes, windowDays });
|
||||
}
|
||||
|
||||
// ═══ Manual referrals from the general ledger ═══
|
||||
|
||||
/**
|
||||
|
||||
@@ -62,6 +62,22 @@ const routes: Routes = [
|
||||
),
|
||||
data: { title: 'My Disbursement Requests', breadcrumb: 'My Disbursement Requests' }
|
||||
},
|
||||
{
|
||||
path: 'share-withdrawal-request',
|
||||
loadComponent: () =>
|
||||
import('../clerk/share-withdrawal-request/share-withdrawal-request.component').then(
|
||||
(m) => m.ShareWithdrawalRequestComponent
|
||||
),
|
||||
data: { title: 'New Share Withdrawal Request', breadcrumb: 'New Share Withdrawal Request', mode: 'create' }
|
||||
},
|
||||
{
|
||||
path: 'share-withdrawal-requests',
|
||||
loadComponent: () =>
|
||||
import('../clerk/my-share-withdrawal-requests/my-share-withdrawal-requests.component').then(
|
||||
(m) => m.MyShareWithdrawalRequestsComponent
|
||||
),
|
||||
data: { title: 'My Share Requests', breadcrumb: 'My Share Requests' }
|
||||
},
|
||||
{
|
||||
path: 'account-facilities',
|
||||
loadComponent: () =>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* 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 { HttpClient, HttpParams } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
/** HTTP service for the Share Withdrawal (redeem shares) maker-checker workflow — mirrors
|
||||
* ClerkWithdrawalService (cash withdrawal), adapted for shares. */
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ClerkShareWithdrawalService {
|
||||
private http = inject(HttpClient);
|
||||
|
||||
submit(data: any): Observable<any> {
|
||||
return this.http.post('/clerk/share-withdrawal-requests', data);
|
||||
}
|
||||
|
||||
getMyRequests(status?: string, offset = 0, limit = 20, fromDate?: string, toDate?: string): Observable<any> {
|
||||
let params = new HttpParams().set('offset', String(offset)).set('limit', String(limit));
|
||||
if (status) params = params.set('status', status);
|
||||
if (fromDate) params = params.set('fromDate', fromDate);
|
||||
if (toDate) params = params.set('toDate', toDate);
|
||||
return this.http.get('/clerk/share-withdrawal-requests/my', { params });
|
||||
}
|
||||
|
||||
getPendingRequests(status = 'PENDING', offset = 0, limit = 20, fromDate?: string, toDate?: string): Observable<any> {
|
||||
let params = new HttpParams().set('status', status).set('offset', String(offset)).set('limit', String(limit));
|
||||
if (fromDate) params = params.set('fromDate', fromDate);
|
||||
if (toDate) params = params.set('toDate', toDate);
|
||||
return this.http.get('/clerk/share-withdrawal-requests', { params });
|
||||
}
|
||||
|
||||
getById(id: number): Observable<any> {
|
||||
return this.http.get(`/clerk/share-withdrawal-requests/${id}`);
|
||||
}
|
||||
|
||||
validate(id: number): Observable<any> {
|
||||
return this.http.post(`/clerk/share-withdrawal-requests/${id}/validate`, {});
|
||||
}
|
||||
|
||||
approve(id: number): Observable<any> {
|
||||
return this.http.post(`/clerk/share-withdrawal-requests/${id}/approve`, {});
|
||||
}
|
||||
|
||||
reject(id: number, reason: string): Observable<any> {
|
||||
return this.http.post(`/clerk/share-withdrawal-requests/${id}/reject`, { reason });
|
||||
}
|
||||
}
|
||||
@@ -146,7 +146,7 @@
|
||||
[class.ws-f__ctl--req]="!row.paymentTypeId"
|
||||
>
|
||||
<option [ngValue]="null">— Select —</option>
|
||||
@for (pt of paymentTypes; track pt.id) {
|
||||
@for (pt of paymentTypesForRow(row); track pt.id) {
|
||||
<option [ngValue]="pt.id">{{ pt.name }}</option>
|
||||
}
|
||||
</select>
|
||||
@@ -231,8 +231,11 @@
|
||||
<span class="ws-caption">Payment instrument</span>
|
||||
<div class="ws-group__fields">
|
||||
<div class="ws-f ws-f--amt">
|
||||
<label class="ws-f__lbl" title="Transaction Amount">
|
||||
AMOUNT
|
||||
<label
|
||||
class="ws-f__lbl"
|
||||
[title]="row.acTyp === 'SHR' ? 'Number of Shares' : 'Transaction Amount'"
|
||||
>
|
||||
{{ row.acTyp === 'SHR' ? 'SHARE NO.' : 'AMOUNT' }}
|
||||
@if (!isClerk && activeWithdrawalRequest) {
|
||||
<span class="ws-amt-locked-badge" title="Amount locked — approved withdrawal">🔒</span>
|
||||
}
|
||||
@@ -242,20 +245,48 @@
|
||||
[class.ws-amt-wrap--cash]="isCashPayment && selectedRow === row"
|
||||
[class.ws-amt-wrap--locked]="!isClerk && !!activeWithdrawalRequest"
|
||||
>
|
||||
<span class="ws-amt-prefix">₹</span>
|
||||
@if (row.acTyp !== 'SHR') {
|
||||
<span class="ws-amt-prefix">₹</span>
|
||||
}
|
||||
<input
|
||||
class="ws-f__ctl ws-amt-input"
|
||||
type="number"
|
||||
[value]="row.amount ?? ''"
|
||||
(input)="row.amount = +$any($event.target).value"
|
||||
(input)="row.amount = +$any($event.target).value; syncShareLinkedAmounts()"
|
||||
(click)="$event.stopPropagation()"
|
||||
placeholder="0.00"
|
||||
[placeholder]="row.acTyp === 'SHR' ? '0' : '0.00'"
|
||||
[readonly]="!isClerk && !!activeWithdrawalRequest"
|
||||
[class.ws-amt-input--locked]="!isClerk && !!activeWithdrawalRequest"
|
||||
/>
|
||||
</div>
|
||||
@if (row.acTyp === 'SHR' && rowSharePrices[row.acNo]) {
|
||||
<span class="ws-f__hint"
|
||||
>= ₹{{ (row.amount ?? 0) * rowSharePrices[row.acNo] | number: '1.2-2' }} @ ₹{{
|
||||
rowSharePrices[row.acNo] | number: '1.2-2'
|
||||
}}/share</span
|
||||
>
|
||||
}
|
||||
</div>
|
||||
@if (row.typ !== 'Withdrawal Slip') {
|
||||
@if (row.acTyp === 'SHR' && row.typ === 'Enter Bank Transfer') {
|
||||
<div class="ws-f ws-f--cheqno">
|
||||
<label class="ws-f__lbl" title="Board Resolution Number">RESOLUTION NO.</label>
|
||||
<input
|
||||
class="ws-f__ctl"
|
||||
[(ngModel)]="row.resolutionNumber"
|
||||
(click)="$event.stopPropagation()"
|
||||
placeholder="e.g. BR-2026-014"
|
||||
/>
|
||||
</div>
|
||||
<div class="ws-f ws-f--cheqdt">
|
||||
<label class="ws-f__lbl" title="Date of Meeting">MEETING DATE</label>
|
||||
<input
|
||||
class="ws-f__ctl"
|
||||
type="date"
|
||||
[(ngModel)]="row.meetingDate"
|
||||
(click)="$event.stopPropagation()"
|
||||
/>
|
||||
</div>
|
||||
} @else if (row.typ !== 'Withdrawal Slip') {
|
||||
<div class="ws-f ws-f--cheqno">
|
||||
<label class="ws-f__lbl" title="Cheque Number">CHEQUE NO.</label>
|
||||
<input
|
||||
@@ -712,6 +743,32 @@
|
||||
'—'
|
||||
}}</span>
|
||||
</div>
|
||||
@if (selectedRow?.acTyp === 'SHR') {
|
||||
<div class="te-field">
|
||||
<span class="te-label">No. of Shares Held</span
|
||||
><span class="te-value te-mono">{{ accountDetails.summary?.totalApprovedShares ?? 0 }}</span>
|
||||
</div>
|
||||
<div class="te-field">
|
||||
<span class="te-label">Market Price / Share</span
|
||||
><span class="te-value te-mono"
|
||||
>{{ currencySymbol }}{{ accountDetails.currentMarketPrice | number: '1.2-2' }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="te-field">
|
||||
<span class="te-label">Resolution No.</span
|
||||
><span class="te-value te-mono">{{ accountDetails.resolutionNumber || '—' }}</span>
|
||||
</div>
|
||||
<div class="te-field">
|
||||
<span class="te-label">Linked Savings A/C No.</span
|
||||
><span class="te-value te-mono">{{ accountDetails.savingsAccountNumber || '—' }}</span>
|
||||
</div>
|
||||
@if (accountDetails.linkedLoanAccountNo) {
|
||||
<div class="te-field">
|
||||
<span class="te-label">Linked Loan A/C No.</span
|
||||
><span class="te-value te-mono">{{ accountDetails.linkedLoanAccountNo }}</span>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="te-panel__header te-panel__header--mt">
|
||||
@@ -724,7 +781,13 @@
|
||||
<div class="te-panel__body">
|
||||
<div class="te-balance-row">
|
||||
<span class="te-bal-num">1.</span>
|
||||
<span class="te-bal-label">{{ accountDetails?.glCode ? 'GL Balance' : 'Current Balance' }}</span>
|
||||
<span class="te-bal-label">{{
|
||||
selectedRow?.acTyp === 'SHR'
|
||||
? 'Share Balance'
|
||||
: accountDetails?.glCode
|
||||
? 'GL Balance'
|
||||
: 'Current Balance'
|
||||
}}</span>
|
||||
<span class="te-bal-value te-bal-value--cr"
|
||||
>{{ currencySymbol }}{{ currentBalance | number: '1.2-2' }}</span
|
||||
>
|
||||
@@ -1281,7 +1344,7 @@
|
||||
[class.ws-f__ctl--req]="!row.paymentTypeId"
|
||||
>
|
||||
<option [ngValue]="null">— Select —</option>
|
||||
@for (pt of paymentTypes; track pt.id) {
|
||||
@for (pt of paymentTypesForRow(row); track pt.id) {
|
||||
<option [ngValue]="pt.id">{{ pt.name }}</option>
|
||||
}
|
||||
</select>
|
||||
@@ -1360,7 +1423,7 @@
|
||||
<div class="ws-group__fields">
|
||||
<div class="ws-f ws-f--amt">
|
||||
<label class="ws-f__lbl">
|
||||
AMOUNT
|
||||
{{ row.acTyp === 'SHR' ? 'SHARE NO.' : 'AMOUNT' }}
|
||||
@if (!isClerk && activeWithdrawalRequest) {
|
||||
<span class="ws-amt-locked-badge" title="Amount locked — approved withdrawal">🔒</span>
|
||||
}
|
||||
@@ -1370,27 +1433,51 @@
|
||||
[class.ws-amt-wrap--cash]="isCashPayment && selectedRow === row"
|
||||
[class.ws-amt-wrap--locked]="!isClerk && !!activeWithdrawalRequest"
|
||||
>
|
||||
<span class="ws-amt-prefix">₹</span>
|
||||
@if (row.acTyp !== 'SHR') {
|
||||
<span class="ws-amt-prefix">₹</span>
|
||||
}
|
||||
<input
|
||||
class="ws-f__ctl ws-amt-input"
|
||||
type="number"
|
||||
[value]="row.amount ?? ''"
|
||||
(input)="row.amount = +$any($event.target).value"
|
||||
(input)="row.amount = +$any($event.target).value; syncShareLinkedAmounts()"
|
||||
(click)="$event.stopPropagation()"
|
||||
placeholder="0.00"
|
||||
[placeholder]="row.acTyp === 'SHR' ? '0' : '0.00'"
|
||||
[readonly]="!isClerk && !!activeWithdrawalRequest"
|
||||
[class.ws-amt-input--locked]="!isClerk && !!activeWithdrawalRequest"
|
||||
/>
|
||||
</div>
|
||||
@if (row.acTyp === 'SHR' && rowSharePrices[row.acNo]) {
|
||||
<span class="ws-f__hint"
|
||||
>= ₹{{ (row.amount ?? 0) * rowSharePrices[row.acNo] | number: '1.2-2' }} @ ₹{{
|
||||
rowSharePrices[row.acNo] | number: '1.2-2'
|
||||
}}/share</span
|
||||
>
|
||||
}
|
||||
</div>
|
||||
<div class="ws-f ws-f--cheqno">
|
||||
<label class="ws-f__lbl">CHEQUE NO.</label>
|
||||
<input class="ws-f__ctl ws-f__ctl--mono" [(ngModel)]="row.chequeNo" placeholder="—" />
|
||||
</div>
|
||||
<div class="ws-f ws-f--cheqdt">
|
||||
<label class="ws-f__lbl">CHEQ. DATE</label>
|
||||
<input class="ws-f__ctl" [(ngModel)]="row.cheqDate" placeholder="dd-mm-yyyy" />
|
||||
</div>
|
||||
@if (row.acTyp === 'SHR' && row.typ === 'Enter Bank Transfer') {
|
||||
<div class="ws-f ws-f--cheqno">
|
||||
<label class="ws-f__lbl">RESOLUTION NO.</label>
|
||||
<input
|
||||
class="ws-f__ctl"
|
||||
[(ngModel)]="row.resolutionNumber"
|
||||
placeholder="e.g. BR-2026-014"
|
||||
/>
|
||||
</div>
|
||||
<div class="ws-f ws-f--cheqdt">
|
||||
<label class="ws-f__lbl">MEETING DATE</label>
|
||||
<input class="ws-f__ctl" type="date" [(ngModel)]="row.meetingDate" />
|
||||
</div>
|
||||
} @else {
|
||||
<div class="ws-f ws-f--cheqno">
|
||||
<label class="ws-f__lbl">CHEQUE NO.</label>
|
||||
<input class="ws-f__ctl ws-f__ctl--mono" [(ngModel)]="row.chequeNo" placeholder="—" />
|
||||
</div>
|
||||
<div class="ws-f ws-f--cheqdt">
|
||||
<label class="ws-f__lbl">CHEQ. DATE</label>
|
||||
<input class="ws-f__ctl" [(ngModel)]="row.cheqDate" placeholder="dd-mm-yyyy" />
|
||||
</div>
|
||||
}
|
||||
<div class="ws-f ws-f--tok">
|
||||
<label class="ws-f__lbl">TOK. NO.</label>
|
||||
<input
|
||||
@@ -1837,6 +1924,15 @@
|
||||
@for (line of alertModal.lines; track $index) {
|
||||
@if ($index === 0) {
|
||||
<p class="te-alert-box__desc">{{ line }}</p>
|
||||
} @else if (line.startsWith('⚠')) {
|
||||
<div class="te-alert-box__callout">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
||||
<line x1="12" y1="9" x2="12" y2="13" />
|
||||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||||
</svg>
|
||||
<span>{{ line.slice(1).trim() }}</span>
|
||||
</div>
|
||||
} @else if (line.includes(':') && $index < alertModal.lines.length - 1) {
|
||||
<div class="te-alert-box__kv">
|
||||
<span class="te-alert-box__kv-k">{{ line.split(':')[0].trim() }}</span>
|
||||
|
||||
@@ -961,6 +961,14 @@ input.ws-amt-input--locked {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ws-f__hint {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 10px;
|
||||
color: $ws-muted;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ws-amt-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
@@ -1995,12 +2003,12 @@ select.te-cell {
|
||||
|
||||
.te-alert-box {
|
||||
display: flex;
|
||||
width: 480px;
|
||||
max-width: 96vw;
|
||||
border-radius: 16px;
|
||||
width: 400px;
|
||||
max-width: 94vw;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 32px 80px rgb(0 0 0 / 35%),
|
||||
0 24px 60px rgb(0 0 0 / 32%),
|
||||
0 0 0 1px rgb(255 255 255 / 8%);
|
||||
animation: te-pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
@@ -2010,32 +2018,35 @@ select.te-cell {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
width: 76px;
|
||||
gap: 8px;
|
||||
width: 56px;
|
||||
flex-shrink: 0;
|
||||
padding: 24px 0;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
&__sidebar-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgb(255 255 255 / 20%);
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(255 255 255 / 15%),
|
||||
inset 0 1px 2px rgb(255 255 255 / 25%);
|
||||
|
||||
svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
stroke: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&__sidebar-type {
|
||||
font-size: 8px;
|
||||
font-size: 7px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.12em;
|
||||
letter-spacing: 0.1em;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
text-transform: uppercase;
|
||||
writing-mode: vertical-lr;
|
||||
@@ -2045,6 +2056,7 @@ select.te-cell {
|
||||
// ── Right content ─────────────────────────────────────────────────────────
|
||||
&__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -2054,12 +2066,12 @@ select.te-cell {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px 12px;
|
||||
padding: 14px 16px 8px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -2083,52 +2095,87 @@ select.te-cell {
|
||||
|
||||
&__lines {
|
||||
flex: 1;
|
||||
padding: 14px 20px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12.5px;
|
||||
margin: 0 0 8px;
|
||||
font-size: 11.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.55;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__kv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 7px 12px;
|
||||
margin: 4px 0;
|
||||
gap: 10px;
|
||||
padding: 5px 10px;
|
||||
margin: 3px 0;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border-radius: 7px;
|
||||
border-left: 3px solid #e2e8f0;
|
||||
transition: background-color 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
&__kv-k {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
&__kv-v {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__foot {
|
||||
margin: 10px 0 0;
|
||||
font-size: 11px;
|
||||
margin: 8px 0 0;
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
font-style: italic;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
&__callout {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin: 8px 0;
|
||||
padding: 8px 10px;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fde68a;
|
||||
border-left: 3px solid #d97706;
|
||||
border-radius: 9px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
line-height: 1.45;
|
||||
animation: te-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
color: #d97706;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 14px 20px;
|
||||
padding: 10px 16px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
background: #fafafa;
|
||||
}
|
||||
@@ -2196,11 +2243,11 @@ select.te-cell {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 20px;
|
||||
min-width: 90px;
|
||||
border-radius: 8px;
|
||||
padding: 7px 16px;
|
||||
min-width: 76px;
|
||||
border-radius: 7px;
|
||||
border: none;
|
||||
font-size: 12.5px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
|
||||
@@ -21,6 +21,7 @@ import { AuthenticationService } from '../../core/authentication/authentication.
|
||||
import { ClerkUiStateService, ClerkSavedAccount } from '../clerk-ui-state.service';
|
||||
import { ClerkWithdrawalService } from '../clerk-withdrawal.service';
|
||||
import { ClerkDisbursementService } from '../clerk-disbursement.service';
|
||||
import { ClerkShareWithdrawalService } from '../clerk-share-withdrawal.service';
|
||||
import { CashierDepositService } from '../cashier-deposit.service';
|
||||
import { SettingsService } from '../../settings/settings.service';
|
||||
import {
|
||||
@@ -47,6 +48,10 @@ interface TxnRow {
|
||||
routingCode: string;
|
||||
/** DD issuance charges/commission — only used when TYPE=DD, TXN TP=Cash, AC.TP=GL */
|
||||
ddCharges: number | null;
|
||||
/** Only used when this row is AC.TP=SHR inside an Enter Bank Transfer to its linked savings
|
||||
* account — governs the share redemption (see submitShareRedemptionTransfer()). */
|
||||
resolutionNumber?: string;
|
||||
meetingDate?: string;
|
||||
}
|
||||
|
||||
interface Denomination {
|
||||
@@ -753,6 +758,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
private clerkUiState = inject(ClerkUiStateService);
|
||||
private clerkWithdrawalService = inject(ClerkWithdrawalService);
|
||||
private clerkDisbursementService = inject(ClerkDisbursementService);
|
||||
private clerkShareWithdrawalService = inject(ClerkShareWithdrawalService);
|
||||
private cashierDepositService = inject(CashierDepositService);
|
||||
readonly router = inject(Router);
|
||||
private settingsService = inject(SettingsService);
|
||||
@@ -769,9 +775,41 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
loadingAccount = false;
|
||||
accountError = '';
|
||||
|
||||
/** Share redemption settlement is always a book-transfer to the linked savings account — never a
|
||||
* cash handover. A Share (SHR) row's own TXN TP. never offers a cash payment type, and neither
|
||||
* does its paired CR (savings) row in "Enter Bank Transfer" mode — that CR row's payment type is
|
||||
* the one that actually governs how the settlement credit posts (see submitShareRedemptionTransfer()).
|
||||
* Every other account type/mode keeps the full, unfiltered list. */
|
||||
paymentTypesForRow(row: TxnRow): any[] {
|
||||
if (row.acTyp === 'SHR') {
|
||||
return this.paymentTypes.filter((pt: any) => !pt.isCashPayment);
|
||||
}
|
||||
const isShareSettlementCredit =
|
||||
row.typ === 'Enter Bank Transfer' &&
|
||||
row.dbCr === 'Cr' &&
|
||||
this.rows.some((r) => r.typ === 'Enter Bank Transfer' && r.dbCr === 'Dr' && r.acTyp === 'SHR');
|
||||
if (isShareSettlementCredit) {
|
||||
return this.paymentTypes.filter((pt: any) => !pt.isCashPayment);
|
||||
}
|
||||
return this.paymentTypes;
|
||||
}
|
||||
|
||||
// Per-row account id/name map: acNo → Fineract id/name (used for multi-row disbursement)
|
||||
rowAccountIds: Record<string, number> = {};
|
||||
rowAccountNames: Record<string, string> = {};
|
||||
// Per-row Share account market price, keyed by acNo — lets a Share row's "SHARE NO." field
|
||||
// auto-fill the settlement amount on any other row added alongside it (calculator convenience
|
||||
// only; a Share row still can never itself be saved from this screen — see accountTypeConfig).
|
||||
rowSharePrices: Record<string, number> = {};
|
||||
// Per-row client id, keyed by acNo — needed to submit a Share Withdrawal Request from a row
|
||||
// that isn't necessarily the currently "selected" one.
|
||||
rowClientIds: Record<string, number> = {};
|
||||
// Per-row linked savings account number, keyed by the Share account's own acNo — used to make
|
||||
// sure a Share-to-linked-account Bank Transfer actually credits the right account.
|
||||
rowLinkedSavingsAcNo: Record<string, string> = {};
|
||||
// Per-row shares currently held, keyed by acNo — lets submitShareRedemptionTransfer() warn the
|
||||
// clerk when a withdrawal will bring the account's holding to zero (closing it on approval).
|
||||
rowShareHoldings: Record<string, number> = {};
|
||||
|
||||
// Full account + client data
|
||||
accountDetails: any = null;
|
||||
@@ -1205,6 +1243,9 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
};
|
||||
this.rows.push(mirror);
|
||||
this.selectedRow = mirror;
|
||||
if (active.acTyp === 'SHR') {
|
||||
this.syncShareLinkedAmounts();
|
||||
}
|
||||
return;
|
||||
}
|
||||
const row: TxnRow = {
|
||||
@@ -1499,6 +1540,191 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
/** One-step Share redemption from Bank Transfer mode: DR row is the Share account (its
|
||||
* "SHARE NO." field), CR row must be that account's own linked savings account. Submits a
|
||||
* governed Share Withdrawal Request (same maker-checker table/flow as the dedicated screen) —
|
||||
* approval both redeems the shares and settles the linked account automatically. */
|
||||
private submitShareRedemptionTransfer(shareRow: TxnRow, savingsRow: TxnRow): void {
|
||||
// Belt-and-braces: the TXN TP. dropdown already hides cash payment types for the CR (savings)
|
||||
// row (see paymentTypesForRow()), but re-check here too in case its payment type was set before
|
||||
// that filter applied — settlement is always a book-transfer to the linked savings account, and
|
||||
// it's the CR row's payment type that actually governs how that credit posts, never the DR
|
||||
// (Share) row's, which has no real payment-type concept.
|
||||
const settlementPaymentType = this.paymentTypes.find((p: any) => p.id === savingsRow.paymentTypeId);
|
||||
if (!savingsRow.paymentTypeId) {
|
||||
this.showAlert('error', 'Settlement Payment Type Required', [
|
||||
'Select a Payment Type on the CR (savings account) row — it governs how the settlement credit posts.'
|
||||
]);
|
||||
return;
|
||||
}
|
||||
if (settlementPaymentType?.isCashPayment) {
|
||||
this.showAlert('error', 'Cash Not Allowed for Share Transactions', [
|
||||
'Share redemption settlement is always a book-transfer to the linked savings account, never cash.',
|
||||
'Select a non-cash Payment Type on the CR row (e.g. Transfer or Share Redemption Transfer).'
|
||||
]);
|
||||
return;
|
||||
}
|
||||
|
||||
const shareAccountId = this.rowAccountIds[shareRow.acNo];
|
||||
if (!shareAccountId) {
|
||||
this.showAlert('error', 'Share Account Not Loaded', [`Please load account details for: ${shareRow.acNo}`]);
|
||||
return;
|
||||
}
|
||||
if (!this.rowAccountIds[savingsRow.acNo]) {
|
||||
this.showAlert('error', 'Savings Account Not Loaded', [`Please load account details for: ${savingsRow.acNo}`]);
|
||||
return;
|
||||
}
|
||||
|
||||
const linkedAcNo = this.rowLinkedSavingsAcNo[shareRow.acNo];
|
||||
const enteredAcNo = savingsRow.acNo?.trim();
|
||||
const matchesLinked =
|
||||
!!linkedAcNo &&
|
||||
(linkedAcNo === enteredAcNo || linkedAcNo.endsWith(enteredAcNo) || savingsRow.ecsAcNo === linkedAcNo);
|
||||
if (linkedAcNo && !matchesLinked) {
|
||||
this.showAlert('error', 'Wrong Credit Account', [
|
||||
`The CR account must be this Share account's own linked savings account: ${linkedAcNo}`,
|
||||
`You entered: ${enteredAcNo}`
|
||||
]);
|
||||
return;
|
||||
}
|
||||
if (!linkedAcNo) {
|
||||
this.showAlert('error', 'No Linked Savings Account', [
|
||||
'This Share account has no linked savings account configured — settlement has nowhere to go.'
|
||||
]);
|
||||
return;
|
||||
}
|
||||
|
||||
const shares = Number(shareRow.amount) || 0;
|
||||
if (shares <= 0) {
|
||||
this.showAlert('error', 'Share No. Required', ['Enter the number of shares to withdraw (greater than zero).']);
|
||||
return;
|
||||
}
|
||||
if (!shareRow.resolutionNumber?.trim()) {
|
||||
this.showAlert('error', 'Board Resolution Number Required', [
|
||||
'A share withdrawal must be authorised by a Board Resolution.'
|
||||
]);
|
||||
return;
|
||||
}
|
||||
if (!shareRow.meetingDate) {
|
||||
this.showAlert('error', 'Date of Meeting Required', ['Enter the Board meeting date that passed the resolution.']);
|
||||
return;
|
||||
}
|
||||
|
||||
const today = new Date();
|
||||
const requestedDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
|
||||
|
||||
// Full snapshot of the CR (settlement) row exactly as the clerk filled it in — saved verbatim
|
||||
// for audit purposes. Business logic still only uses settlementPaymentTypeId above; the rest of
|
||||
// these fields are not re-read by the backend, they are the audit record of what was on screen.
|
||||
const settlementRowSnapshot = {
|
||||
branch: savingsRow.br,
|
||||
accountType: savingsRow.acTyp,
|
||||
accountNo: savingsRow.acNo,
|
||||
ecsAccountNo: savingsRow.ecsAcNo || null,
|
||||
dbCr: savingsRow.dbCr,
|
||||
amount: savingsRow.amount ?? null,
|
||||
chequeNo: savingsRow.chequeNo || null,
|
||||
chequeDate: savingsRow.cheqDate || null,
|
||||
tokenNo: savingsRow.tokNo || null,
|
||||
description: savingsRow.description || null,
|
||||
bankName: savingsRow.bankName || null,
|
||||
routingCode: savingsRow.routingCode || null,
|
||||
paymentTypeId: savingsRow.paymentTypeId,
|
||||
paymentTypeName: settlementPaymentType?.name ?? null
|
||||
};
|
||||
|
||||
const payload = {
|
||||
shareAccountId,
|
||||
accountNo: shareRow.acNo,
|
||||
clientId: this.rowClientIds[shareRow.acNo] ?? null,
|
||||
clientName: this.rowAccountNames[shareRow.acNo] ?? null,
|
||||
requestedShares: shares,
|
||||
requestedDate,
|
||||
resolutionNumber: shareRow.resolutionNumber.trim(),
|
||||
meetingDate: shareRow.meetingDate,
|
||||
description: shareRow.description || null,
|
||||
settlementPaymentTypeId: savingsRow.paymentTypeId,
|
||||
settlementRowSnapshot
|
||||
};
|
||||
|
||||
const sharePrice = this.rowSharePrices[shareRow.acNo] ?? 0;
|
||||
const currentHolding = this.rowShareHoldings[shareRow.acNo] ?? 0;
|
||||
const remainingShares = currentHolding - shares;
|
||||
const willCloseAccount = remainingShares <= 0;
|
||||
const confirmLines = [
|
||||
`Share Account: ${shareRow.acNo} · Client: ${this.rowAccountNames[shareRow.acNo] ?? '—'}`,
|
||||
`Shares to Withdraw: ${shares} @ ₹${sharePrice.toLocaleString('en-IN', { minimumFractionDigits: 2 })} = ₹${(shares * sharePrice).toLocaleString('en-IN', { minimumFractionDigits: 2 })}`,
|
||||
`Remaining Shares After Withdrawal: ${Math.max(remainingShares, 0)}`,
|
||||
...(willCloseAccount
|
||||
? ['⚠ All shares withdrawn — this account will be CLOSED automatically when the Manager approves.']
|
||||
: []),
|
||||
`Board Resolution No.: ${payload.resolutionNumber}`,
|
||||
`Date of Meeting: ${payload.meetingDate}`,
|
||||
`Settlement Credit To: ${linkedAcNo}`,
|
||||
`Settlement Payment Type: ${settlementPaymentType?.name ?? '—'}`,
|
||||
...(settlementRowSnapshot.ecsAccountNo && settlementRowSnapshot.ecsAccountNo !== linkedAcNo
|
||||
? [`ECS A/C No.: ${settlementRowSnapshot.ecsAccountNo}`]
|
||||
: []),
|
||||
...(settlementRowSnapshot.chequeNo ? [`Cheque No.: ${settlementRowSnapshot.chequeNo}`] : []),
|
||||
...(settlementRowSnapshot.chequeDate ? [`Cheque Date: ${settlementRowSnapshot.chequeDate}`] : []),
|
||||
...(settlementRowSnapshot.tokenNo ? [`Token No.: ${settlementRowSnapshot.tokenNo}`] : []),
|
||||
...(settlementRowSnapshot.description ? [`CR Row Remarks: ${settlementRowSnapshot.description}`] : []),
|
||||
'',
|
||||
willCloseAccount
|
||||
? 'Pending Manager approval — redemption, settlement and account closure all post together on approval.'
|
||||
: 'Pending Manager approval — redemption and settlement both post together on approval.'
|
||||
];
|
||||
this.showConfirmAlert('info', 'Confirm Share Withdrawal Request', confirmLines, 'Submit for Approval', () =>
|
||||
this.doSubmitShareRedemptionTransfer(payload, shareRow, shares, linkedAcNo)
|
||||
);
|
||||
}
|
||||
|
||||
private doSubmitShareRedemptionTransfer(
|
||||
payload: Record<string, unknown>,
|
||||
shareRow: TxnRow,
|
||||
shares: number,
|
||||
linkedAcNo: string
|
||||
): void {
|
||||
this.saving = true;
|
||||
this.clerkShareWithdrawalService
|
||||
.submit(payload)
|
||||
.pipe(
|
||||
catchError((err: any) => {
|
||||
const msg =
|
||||
err?.error?.errors?.[0]?.defaultUserMessage ??
|
||||
err?.error?.developerMessage ??
|
||||
err?.error?.defaultUserMessage ??
|
||||
'Share withdrawal submission failed. Please try again.';
|
||||
this.showAlert('error', 'Submission Failed', [msg]);
|
||||
this.saving = false;
|
||||
return of(null);
|
||||
})
|
||||
)
|
||||
.subscribe((res: any) => {
|
||||
this.saving = false;
|
||||
if (res) {
|
||||
const willCloseAccount = (this.rowShareHoldings[shareRow.acNo] ?? 0) - shares <= 0;
|
||||
this.showAlert('success', 'Share Withdrawal Submitted', [
|
||||
`${shares} share(s) from ${shareRow.acNo} → settlement to ${linkedAcNo} on approval.`,
|
||||
willCloseAccount
|
||||
? 'Pending Manager approval — this will close the share account, since all shares will be withdrawn. Track status in "My Share Requests".'
|
||||
: 'Pending Manager approval. Track status in "My Share Requests".'
|
||||
]);
|
||||
this.rows = [];
|
||||
this.rowAccountIds = {};
|
||||
this.rowAccountNames = {};
|
||||
this.rowSharePrices = {};
|
||||
this.rowClientIds = {};
|
||||
this.rowLinkedSavingsAcNo = {};
|
||||
this.rowShareHoldings = {};
|
||||
this.addRow();
|
||||
this.selectedRow = this.rows[0];
|
||||
this.accountDetails = null;
|
||||
this.clientDetails = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Cashier enters a token number → look up the APPROVED withdrawal request for auto-fill. */
|
||||
onTokNoBlur(row: TxnRow): void {
|
||||
if (this.isClerk || !row.tokNo?.trim()) return;
|
||||
@@ -1535,6 +1761,25 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
/** When exactly one row on screen is a Share account with a known market price, auto-fills every
|
||||
* OTHER row's amount as (shares entered on that row) × (its market price) — a calculator
|
||||
* convenience for filling the paired settlement entry. The Share row itself still can never be
|
||||
* saved from this screen (see the SHR guard in confirmSubmit()) — this only helps compute the
|
||||
* correct amount to carry over into the separate manual Deposit Slip entry. */
|
||||
syncShareLinkedAmounts(): void {
|
||||
const shareRows = this.rows.filter((r) => r.acTyp?.toUpperCase() === 'SHR' && this.rowSharePrices[r.acNo]);
|
||||
if (shareRows.length !== 1) return;
|
||||
const shareRow = shareRows[0];
|
||||
const price = this.rowSharePrices[shareRow.acNo] ?? 0;
|
||||
const shares = Number(shareRow.amount) || 0;
|
||||
const total = Math.round(shares * price * 100) / 100;
|
||||
this.rows.forEach((r) => {
|
||||
if (r !== shareRow) {
|
||||
r.amount = total;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onAcNoBlur(row: TxnRow, index: number): void {
|
||||
if (!row.acNo.trim()) return;
|
||||
this.selectedRow = row;
|
||||
@@ -1633,12 +1878,14 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
if (token !== this.searchToken) return; // stale result — newer search started
|
||||
const allItems: any[] = res?.pageItems ?? (Array.isArray(res) ? res : []);
|
||||
const f = cfg.matchField;
|
||||
// Exact match first, then suffix/partial match (backend may return by last-N-digits)
|
||||
// Exact match first, then suffix/partial match. Some account types (e.g. Share — its
|
||||
// list endpoint only accepts offset/limit, no accountNo filter at all) always return the
|
||||
// FULL unfiltered list rather than a server-side-narrowed one, so a partial match can't be
|
||||
// gated on "exactly one row came back" — it never would be for those types.
|
||||
const exactMatch = allItems.find((x: any) => x[f] === acNo);
|
||||
const partialMatch =
|
||||
!exactMatch && allItems.length === 1
|
||||
? allItems.find((x: any) => x[f]?.endsWith(acNo) || x[f]?.includes(acNo))
|
||||
: null;
|
||||
const partialMatch = !exactMatch
|
||||
? (allItems.find((x: any) => x[f]?.endsWith(acNo)) ?? allItems.find((x: any) => x[f]?.includes(acNo)))
|
||||
: null;
|
||||
const match = exactMatch ?? partialMatch ?? null;
|
||||
if (match?.id) {
|
||||
const clientIdFromSearch = acTyp !== 'GL' && match.clientId != null ? String(match.clientId) : null;
|
||||
@@ -1659,6 +1906,17 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
siAccountType: number;
|
||||
txnBase: string;
|
||||
txnSearchSupported: boolean;
|
||||
/** True when this account type has no separate REST transactions sub-resource at all (e.g.
|
||||
* Share accounts — Fineract returns transactions embedded on the account detail response
|
||||
* itself via ?associations=all, never at /accounts/share/{id}/transactions). Skips the
|
||||
* "today's transactions" HTTP call entirely instead of hitting a 404. */
|
||||
txnFetchUnsupported?: boolean;
|
||||
/** True when this account type has no standing-instruction "from account type" mapping on
|
||||
* the backend at all (PortfolioAccountType only defines LOAN/SAVINGS/CURRENT — Share isn't
|
||||
* a valid standing-instruction source account). Skips that HTTP call entirely instead of
|
||||
* sending an fromAccountType value the backend's query-builder silently can't match,
|
||||
* which otherwise produces a malformed "WHERE <empty>" SQL statement server-side. */
|
||||
siFetchUnsupported?: boolean;
|
||||
maxLimit: number;
|
||||
skipGlobalSearch: boolean;
|
||||
listQueryParam: string;
|
||||
@@ -1693,6 +1951,8 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
siAccountType: 4,
|
||||
txnBase: '/accounts/share',
|
||||
txnSearchSupported: false,
|
||||
txnFetchUnsupported: true,
|
||||
siFetchUnsupported: true,
|
||||
maxLimit: 500,
|
||||
skipGlobalSearch: true,
|
||||
listQueryParam: 'accountNo',
|
||||
@@ -1805,6 +2065,8 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
siAccountType: number;
|
||||
txnBase: string;
|
||||
txnSearchSupported: boolean;
|
||||
txnFetchUnsupported?: boolean;
|
||||
siFetchUnsupported?: boolean;
|
||||
detailParams?: string;
|
||||
},
|
||||
token: number,
|
||||
@@ -1837,13 +2099,32 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
this.rowAccountIds[this.selectedRow.acNo] = acc.id;
|
||||
this.rowAccountNames[this.selectedRow.acNo] =
|
||||
acc.name ?? acc.displayName ?? acc.glAccountName ?? acc.accountNo ?? '';
|
||||
this.rowClientIds[this.selectedRow.acNo] = acc.clientId ?? null;
|
||||
}
|
||||
if (this.selectedRow) {
|
||||
this.selectedRow.ecsAcNo = acc.glCode ?? acc.savingsAccountNumber ?? acc.accountNo ?? '';
|
||||
// Share accounts: ECS field is the share account's own number — acc.savingsAccountNumber
|
||||
// is a different, unrelated account (the linked settlement savings account) and must
|
||||
// never be shown here.
|
||||
this.selectedRow.ecsAcNo =
|
||||
acTyp?.toUpperCase() === 'SHR'
|
||||
? (acc.accountNo ?? '')
|
||||
: (acc.glCode ?? acc.savingsAccountNumber ?? acc.accountNo ?? '');
|
||||
}
|
||||
if (this.isClerk) this.clerkUiState.setFacilities(this.facilities, acNo, acTyp);
|
||||
this.computeSameDayNeftRtgs(acc.transactions);
|
||||
this.computeSameDayChequeClearing(acc.transactions);
|
||||
if (acTyp?.toUpperCase() === 'SHR' && this.selectedRow?.acNo) {
|
||||
// Keyed by the row's own typed acNo (e.g. "0011"), not the resolved full account number
|
||||
// (e.g. "000000011") — rowAccountIds/rowAccountNames above use the same key, and every
|
||||
// lookup elsewhere (syncShareLinkedAmounts, submitShareRedemptionTransfer, the template's
|
||||
// rowSharePrices[row.acNo]) reads via row.acNo, so this must match or every lookup misses.
|
||||
this.rowSharePrices[this.selectedRow.acNo] = Number(acc.currentMarketPrice) || 0;
|
||||
this.rowLinkedSavingsAcNo[this.selectedRow.acNo] = acc.savingsAccountNumber ?? '';
|
||||
this.rowShareHoldings[this.selectedRow.acNo] = Number(
|
||||
acc.summary?.totalApprovedShares ?? acc.totalApprovedShares ?? 0
|
||||
);
|
||||
this.syncShareLinkedAmounts();
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
@@ -1913,18 +2194,22 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
documents: this.http.get<any[]>(`/clients/${clientId}/documents`).pipe(catchError(() => of([]))),
|
||||
notes: this.http.get<any>(`/savings/${accountId}/notes`).pipe(catchError(() => of([]))),
|
||||
linkedAcc: this.http.get<any>(`/clients/${clientId}/accounts`).pipe(catchError(() => of(null))),
|
||||
si: this.http
|
||||
.get<any>(`/standinginstructions?fromAccountType=${cfg.siAccountType}&fromAccountId=${accountId}&limit=10`)
|
||||
.pipe(catchError(() => of({ pageItems: [] }))),
|
||||
todayTxns: cfg.txnSearchSupported
|
||||
? this.http
|
||||
.get<any>(
|
||||
`${cfg.txnBase}/${accountId}/transactions/search?fromDate=${todayStr}&toDate=${todayStr}&limit=20`
|
||||
)
|
||||
.pipe(catchError(() => of({ pageItems: [] })))
|
||||
si: cfg.siFetchUnsupported
|
||||
? of({ pageItems: [] })
|
||||
: this.http
|
||||
.get<any>(`${cfg.txnBase}/${accountId}/transactions?limit=50`)
|
||||
.pipe(catchError(() => of({ pageItems: [] })))
|
||||
.get<any>(`/standinginstructions?fromAccountType=${cfg.siAccountType}&fromAccountId=${accountId}&limit=10`)
|
||||
.pipe(catchError(() => of({ pageItems: [] }))),
|
||||
todayTxns: cfg.txnFetchUnsupported
|
||||
? of({ pageItems: [] })
|
||||
: cfg.txnSearchSupported
|
||||
? this.http
|
||||
.get<any>(
|
||||
`${cfg.txnBase}/${accountId}/transactions/search?fromDate=${todayStr}&toDate=${todayStr}&limit=20`
|
||||
)
|
||||
.pipe(catchError(() => of({ pageItems: [] })))
|
||||
: this.http
|
||||
.get<any>(`${cfg.txnBase}/${accountId}/transactions?limit=50`)
|
||||
.pipe(catchError(() => of({ pageItems: [] })))
|
||||
});
|
||||
|
||||
if (clientIdHint) {
|
||||
@@ -2089,6 +2374,11 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
// ── Balance getters ────────────────────────────────────────────────────────
|
||||
|
||||
get currentBalance(): number {
|
||||
if (this.selectedRow?.acTyp === 'SHR') {
|
||||
const shares = Number(this.accountDetails?.summary?.totalApprovedShares ?? 0);
|
||||
const unitPrice = Number(this.accountDetails?.currentMarketPrice ?? 0);
|
||||
return shares * unitPrice;
|
||||
}
|
||||
return this.accountDetails?.summary?.accountBalance ?? this.accountDetails?.organizationRunningBalance ?? 0;
|
||||
}
|
||||
|
||||
@@ -2502,6 +2792,23 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
return;
|
||||
}
|
||||
|
||||
// Share redemption via linked-account transfer: DR=Share account, CR=its linked savings
|
||||
// account. A Share account can never be debited by a plain ledger transfer (no such Fineract
|
||||
// command exists) — so this exact one-DR/one-CR shape is routed to submitShareRedemptionTransfer()
|
||||
// instead, which submits a governed Share Withdrawal Request through the same maker-checker
|
||||
// table as the dedicated screen; approval both redeems the shares and settles the linked account.
|
||||
const shareDrRows = drRows.filter((r) => r.acTyp === 'SHR');
|
||||
if (shareDrRows.length > 0) {
|
||||
if (drRows.length !== 1 || crRows.length !== 1) {
|
||||
this.showAlert('error', 'Unsupported Share Transfer', [
|
||||
'A Share redemption transfer supports exactly one DR row (the Share account) and one CR row (its linked savings account).'
|
||||
]);
|
||||
return;
|
||||
}
|
||||
this.submitShareRedemptionTransfer(shareDrRows[0], crRows[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
// Bank transfer: only savings (SD) or current (CA/CB) accounts allowed
|
||||
const allowedTypes = new Set([
|
||||
'SD',
|
||||
@@ -3004,6 +3311,24 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
|
||||
const accountId = this.accountDetails.id;
|
||||
const cfg = this.accountTypeConfig(row.acTyp);
|
||||
|
||||
// Share accounts must never go through this generic Deposit/Withdrawal Slip flow — both
|
||||
// buildDepositPayload() and buildWithdrawalPayload() hardcode accountType: 'SAVINGS' and send
|
||||
// savingsAccountId: this.accountDetails.id, which for a Share account is the SHARE account's
|
||||
// own numeric id, not a real savings account id. Approving that request would call
|
||||
// savingsAccountWithdrawal/Deposit against whatever savings account happens to share that same
|
||||
// numeric id — a completely unrelated account. Share purchase/redemption must go through the
|
||||
// dedicated Buy Shares / Share Withdrawal Request screens, which carry the correct governance
|
||||
// (resolution number, meeting date, minimum-tenure and linked-loan checks).
|
||||
if (row.acTyp === 'SHR') {
|
||||
this.showAlert('error', 'Not Supported for Share Accounts', [
|
||||
isDeposit
|
||||
? 'Share purchases must be made from the Buy Shares screen on the Share Account itself.'
|
||||
: 'Share withdrawal (redeem shares) must be submitted from "New Share Withdrawal Request" in the Clerk Dashboard.',
|
||||
'This generic Deposit/Withdrawal Slip does not carry the Board Resolution Number or the governance checks required for shares.'
|
||||
]);
|
||||
return;
|
||||
}
|
||||
|
||||
// GL withdrawal → direct journal entry (no maker-checker)
|
||||
// GL deposit → falls through to maker-checker block below
|
||||
if (row.acTyp === 'GL' && !isDeposit) {
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/* Small shared layout/status-pill classes for the Share Withdrawal maker-checker screens —
|
||||
* self-contained (this branch has no separate "investment" module to borrow them from). */
|
||||
|
||||
.inv-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.inv-form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #0d1b2a;
|
||||
font-family: inherit;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
padding: 8px 10px;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.inv-form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
|
||||
.inv-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
|
||||
&--active {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
&--matured {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
&--written_off {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
}
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="pg">
|
||||
<header class="pg-head">
|
||||
<div>
|
||||
<div class="pg-eyebrow">CLERK · SHARE WITHDRAWAL</div>
|
||||
<h1 class="pg-title">My Share Requests</h1>
|
||||
<p class="pg-sub">Share withdrawal requests you have submitted, and their approval status.</p>
|
||||
</div>
|
||||
<div class="pg-toolbar">
|
||||
<button type="button" class="pg-btn pg-btn--primary" (click)="newRequest()">New Share Withdrawal</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="pg-card">
|
||||
<div class="inv-form-grid" style="padding: 12px 16px">
|
||||
<label class="inv-form-field">
|
||||
<span>Status</span>
|
||||
<select [(ngModel)]="filterStatus" (change)="onFilterChange()">
|
||||
@for (opt of statusOptions; track opt.value) {
|
||||
<option [value]="opt.value">{{ opt.label }}</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<table class="pg-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account No</th>
|
||||
<th>Client</th>
|
||||
<th class="num">Shares</th>
|
||||
<th>Resolution No.</th>
|
||||
<th>Meeting Date</th>
|
||||
<th>Submitted At</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (loading) {
|
||||
<tr>
|
||||
<td colspan="7" class="pg-empty">Loading…</td>
|
||||
</tr>
|
||||
} @else if (loaded && requests.length === 0) {
|
||||
<tr>
|
||||
<td colspan="7" class="pg-empty">No share withdrawal requests found.</td>
|
||||
</tr>
|
||||
} @else {
|
||||
@for (r of requests; track r.id) {
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pg-chip">{{ r.account_no }}</span>
|
||||
</td>
|
||||
<td>{{ r.client_name }}</td>
|
||||
<td class="num">{{ r.requested_shares }}</td>
|
||||
<td>{{ r.resolution_number }}</td>
|
||||
<td>{{ formatDateTime(r.meeting_date) }}</td>
|
||||
<td>{{ formatDateTime(r.submitted_at) }}</td>
|
||||
<td>
|
||||
<span [class]="statusClass(r.status)">{{ statusLabel(r.status) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* 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 { Component, OnInit, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { of } from 'rxjs';
|
||||
|
||||
import { ClerkShareWithdrawalService } from '../../cashier/clerk-share-withdrawal.service';
|
||||
|
||||
/** Clerk Dashboard "My Share Requests" — lists the share withdrawal requests this clerk has
|
||||
* submitted and their approval status. Mirrors MyRequestsComponent/MyDisbursementRequestsComponent. */
|
||||
@Component({
|
||||
selector: 'mifosx-my-share-withdrawal-requests',
|
||||
templateUrl: './my-share-withdrawal-requests.component.html',
|
||||
styleUrls: [
|
||||
'../../cashier/cashier-shared.scss',
|
||||
'../clerk-shared.scss'
|
||||
],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class MyShareWithdrawalRequestsComponent implements OnInit {
|
||||
private service = inject(ClerkShareWithdrawalService);
|
||||
private router = inject(Router);
|
||||
|
||||
requests: any[] = [];
|
||||
totalRecords = 0;
|
||||
loading = false;
|
||||
loaded = false;
|
||||
|
||||
filterStatus = '';
|
||||
|
||||
get statusOptions(): { value: string; label: string }[] {
|
||||
return [
|
||||
{ value: '', label: 'All' },
|
||||
{ value: 'PENDING', label: 'Pending' },
|
||||
{ value: 'APPROVED', label: 'Approved' },
|
||||
{ value: 'REJECTED', label: 'Rejected' }
|
||||
];
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.load();
|
||||
}
|
||||
|
||||
load(): void {
|
||||
this.loading = true;
|
||||
this.service
|
||||
.getMyRequests(this.filterStatus || undefined, 0, 50)
|
||||
.pipe(catchError(() => of({ pageItems: [], totalFilteredRecords: 0 })))
|
||||
.subscribe((res: any) => {
|
||||
this.requests = res?.pageItems ?? [];
|
||||
this.totalRecords = Number(res?.totalFilteredRecords ?? 0);
|
||||
this.loading = false;
|
||||
this.loaded = true;
|
||||
});
|
||||
}
|
||||
|
||||
onFilterChange(): void {
|
||||
this.load();
|
||||
}
|
||||
|
||||
newRequest(): void {
|
||||
this.router.navigate(['/clerk/share-withdrawal-request']);
|
||||
}
|
||||
|
||||
statusClass(status: string): string {
|
||||
const map: Record<string, string> = {
|
||||
PENDING: 'inv-badge--active',
|
||||
APPROVED: 'inv-badge--matured',
|
||||
REJECTED: 'inv-badge--written_off'
|
||||
};
|
||||
return `inv-badge ${map[status] ?? ''}`;
|
||||
}
|
||||
|
||||
statusLabel(status: string): string {
|
||||
const map: Record<string, string> = {
|
||||
PENDING: 'Pending Approval',
|
||||
APPROVED: 'Approved',
|
||||
REJECTED: 'Rejected'
|
||||
};
|
||||
return map[status] ?? status;
|
||||
}
|
||||
|
||||
formatDateTime(val: any): string {
|
||||
if (!val) return '—';
|
||||
try {
|
||||
const d = new Date(val);
|
||||
return d.toLocaleString('en-IN', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
} catch {
|
||||
return String(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,446 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="pg">
|
||||
<header class="pg-head">
|
||||
<div>
|
||||
<div class="pg-eyebrow">{{ isReview ? 'CHECKER · APPROVAL' : 'CLERK · SHARE WITHDRAWAL' }}</div>
|
||||
<h1 class="pg-title">{{ pageTitle }}</h1>
|
||||
<p class="pg-sub">{{ pageSubtitle }}</p>
|
||||
</div>
|
||||
<div class="pg-toolbar">
|
||||
<button type="button" class="pg-btn" (click)="goBack()">
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
{{ isReview ? 'Back to Requests' : 'My Share Requests' }}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="pg-card">
|
||||
<div class="pos-section-label">Share Account</div>
|
||||
<div class="inv-form-grid" style="padding: 16px">
|
||||
@if (!isReview) {
|
||||
<label class="inv-form-field" style="grid-column: span 2">
|
||||
<span>* Search Account No. / Client Name</span>
|
||||
<mifosx-search-select
|
||||
[options]="accountOptions"
|
||||
[(ngModel)]="selectedAccountId"
|
||||
(ngModelChange)="onAccountSelected($event)"
|
||||
placeholder="Search share account no. or client name…"
|
||||
></mifosx-search-select>
|
||||
</label>
|
||||
}
|
||||
@if (account) {
|
||||
<label class="inv-form-field">
|
||||
<span>Account No</span>
|
||||
<input type="text" [value]="account.accountNo" readonly />
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>Client</span>
|
||||
<input type="text" [value]="account.clientName" readonly />
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>Shares Held</span>
|
||||
<input
|
||||
type="text"
|
||||
[value]="account.summary?.totalApprovedShares ?? account.totalApprovedShares ?? 0"
|
||||
readonly
|
||||
/>
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>Unit Price</span>
|
||||
<input type="text" [value]="'₹' + (unitPrice | number: '1.2-2')" readonly />
|
||||
</label>
|
||||
}
|
||||
@if (loadingAccount) {
|
||||
<div class="pg-empty">Loading account…</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (isReview && reviewRequest) {
|
||||
<div class="pg-card">
|
||||
<div class="pos-section-label">Client Compliance</div>
|
||||
<div class="inv-form-grid" style="padding: 16px">
|
||||
<div class="inv-form-field">
|
||||
<span>KYC Status</span>
|
||||
<span
|
||||
class="swr-chip"
|
||||
[class.swr-chip--ok]="reviewRequest.client_kyc_verified"
|
||||
[class.swr-chip--warn]="!reviewRequest.client_kyc_verified"
|
||||
>
|
||||
{{ reviewRequest.client_kyc_status_label }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="inv-form-field">
|
||||
<span>Risk Category</span>
|
||||
<span
|
||||
class="swr-chip"
|
||||
[class.swr-chip--ok]="!reviewRequest.client_risk_high"
|
||||
[class.swr-chip--warn]="reviewRequest.client_risk_high"
|
||||
>
|
||||
{{ reviewRequest.client_risk_category_label }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="inv-form-field">
|
||||
<span>Open AML Alerts</span>
|
||||
<span
|
||||
class="swr-chip"
|
||||
[class.swr-chip--ok]="!reviewRequest.client_open_aml_alerts"
|
||||
[class.swr-chip--warn]="reviewRequest.client_open_aml_alerts > 0"
|
||||
>
|
||||
{{ reviewRequest.client_open_aml_alerts || 0 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (account) {
|
||||
<div class="pg-card">
|
||||
<div class="pos-section-label">Withdrawal Details</div>
|
||||
<div class="inv-form-grid" style="padding: 16px">
|
||||
<label class="inv-form-field">
|
||||
<span>* Shares to Withdraw</span>
|
||||
<input type="number" [(ngModel)]="requestedShares" min="1" [disabled]="isReview" />
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>* Requested Date</span>
|
||||
<input type="date" [(ngModel)]="requestedDate" [disabled]="isReview" />
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>Withdrawal Value</span>
|
||||
<input type="text" [value]="'₹' + (withdrawalValue | number: '1.2-2')" readonly />
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>Remaining Shares After Withdrawal</span>
|
||||
<input type="text" [value]="remainingShares" readonly />
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>* Board Resolution Number</span>
|
||||
<input type="text" [(ngModel)]="resolutionNumber" [disabled]="isReview" placeholder="e.g. BR-2026-014" />
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>* Date of Meeting</span>
|
||||
<input type="date" [(ngModel)]="meetingDate" [disabled]="isReview" />
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>* Settlement Payment Type</span>
|
||||
@if (!isReview) {
|
||||
<select [(ngModel)]="settlementPaymentTypeId">
|
||||
<option [ngValue]="null">Select…</option>
|
||||
@for (pt of paymentTypeOptions; track pt.id) {
|
||||
<option [ngValue]="pt.id">{{ pt.name }}</option>
|
||||
}
|
||||
</select>
|
||||
} @else {
|
||||
<input type="text" [value]="settlementPaymentTypeName" readonly />
|
||||
}
|
||||
</label>
|
||||
<label class="inv-form-field" style="grid-column: span 2">
|
||||
<span>Description / Remarks</span>
|
||||
<input type="text" [(ngModel)]="description" [disabled]="isReview" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@if (account && remainingShares === 0) {
|
||||
<div class="swr-close-notice">
|
||||
<mat-icon>lock</mat-icon>
|
||||
<span>
|
||||
This withdraws <strong>all</strong> shares on this account. Approving it will
|
||||
<strong>close the share account automatically</strong> — no separate closure step is needed.
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!isReview) {
|
||||
<div class="inv-form-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="pg-btn pg-btn--primary"
|
||||
[disabled]="!isFormValid || submitting"
|
||||
(click)="openConfirmDialog()"
|
||||
>
|
||||
{{ submitting ? 'Submitting…' : 'Review & Submit' }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (isReview && reviewRequest?.status === 'PENDING') {
|
||||
<div class="pg-card">
|
||||
<div class="pos-section-label">Verification</div>
|
||||
<div class="swrv-trigger">
|
||||
<div class="swrv-trigger__icon">
|
||||
<mat-icon>fact_check</mat-icon>
|
||||
</div>
|
||||
<div class="swrv-trigger__text">
|
||||
<div class="swrv-trigger__title">Run a live backend validation</div>
|
||||
<div class="swrv-trigger__sub">
|
||||
Re-checks account status, share balance, linked savings account and GL mapping before you approve.
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="pg-btn pg-btn--primary" (click)="openValidateModal()">
|
||||
<mat-icon>play_circle</mat-icon>
|
||||
Validate Request
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="inv-form-actions">
|
||||
<button type="button" class="pg-btn pg-btn--primary" (click)="approveReview()">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
Approve & Process Withdrawal
|
||||
</button>
|
||||
<button type="button" class="pg-btn pg-btn--danger" (click)="openRejectDialog()">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showValidateModal) {
|
||||
<div class="swrv-modal">
|
||||
<div class="swrv-modal__card">
|
||||
<div class="swrv-modal__header">
|
||||
<div class="swrv-modal__title">
|
||||
<span class="swrv-modal__title-icon"><mat-icon>fact_check</mat-icon></span>
|
||||
Validate Share Withdrawal Request
|
||||
</div>
|
||||
<button type="button" class="swrv-modal__close" [disabled]="validating" (click)="closeValidateModal()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="swrv-modal__body">
|
||||
<p class="swrv-modal__intro">
|
||||
Re-checking <strong>{{ requestedShares }} share(s)</strong> withdrawal from
|
||||
<strong>{{ account?.accountNo }}</strong> ({{ account?.clientName }}) against the live account, savings link
|
||||
and GL configuration — not just what was captured at submission time.
|
||||
</p>
|
||||
|
||||
@if (backendChecks && !validating && !validateAllPassed) {
|
||||
<div class="swrv-modal__warn">
|
||||
<mat-icon>warning</mat-icon>
|
||||
<div>
|
||||
<strong>Some checks need review before approving.</strong>
|
||||
Scroll down to see which ones failed and why.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<ol class="swrv-steps">
|
||||
@for (step of validateSteps; track step.label; let i = $index) {
|
||||
<li
|
||||
class="swrv-step"
|
||||
[class.swrv-step--active]="step.status === 'active'"
|
||||
[class.swrv-step--done]="step.status === 'done'"
|
||||
[class.swrv-step--failed]="step.status === 'failed'"
|
||||
>
|
||||
<div class="swrv-step__indicator">
|
||||
@if (step.status === 'done') {
|
||||
<mat-icon>check</mat-icon>
|
||||
} @else if (step.status === 'active') {
|
||||
<mat-icon class="swrv-spin">autorenew</mat-icon>
|
||||
} @else if (step.status === 'failed') {
|
||||
<mat-icon>close</mat-icon>
|
||||
} @else {
|
||||
<span>{{ i + 1 }}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="swrv-step__content">
|
||||
<div class="swrv-step__label">{{ step.label }}</div>
|
||||
<div class="swrv-step__msg">{{ step.detail }}</div>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
|
||||
@if (validating && validateSteps.length === 0) {
|
||||
<div class="pg-empty">Connecting to server…</div>
|
||||
}
|
||||
|
||||
@if (backendChecks && !validating && validateAllPassed) {
|
||||
<div class="swrv-modal__result">
|
||||
<mat-icon>verified</mat-icon>
|
||||
<span>All checks passed — safe to approve.</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="swrv-modal__footer">
|
||||
@if (!validating && backendChecks) {
|
||||
<button type="button" class="pg-btn" (click)="runBackendValidation()">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
Re-run
|
||||
</button>
|
||||
}
|
||||
@if (!validating && backendChecks && validateAllPassed) {
|
||||
<button type="button" class="pg-btn pg-btn--primary" (click)="closeValidateModal(); approveReview()">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
Approve & Process Withdrawal
|
||||
</button>
|
||||
}
|
||||
<button type="button" class="pg-btn" [disabled]="validating" (click)="closeValidateModal()">
|
||||
{{ validating ? 'Validating…' : 'Close' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (isReview && reviewRequest?.status === 'APPROVED') {
|
||||
<div class="pg-card">
|
||||
<div class="pos-section-label">Settlement</div>
|
||||
<div class="inv-form-grid" style="padding: 16px">
|
||||
@if (reviewRequest?.settlement_amount) {
|
||||
<label class="inv-form-field">
|
||||
<span>Amount Credited</span>
|
||||
<input type="text" [value]="'₹' + (reviewRequest.settlement_amount | number: '1.2-2')" readonly />
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>Credited To (Linked Savings A/C)</span>
|
||||
<input type="text" [value]="account?.savingsAccountNumber || '—'" readonly />
|
||||
</label>
|
||||
<label class="inv-form-field">
|
||||
<span>Savings Transaction Ref.</span>
|
||||
<input type="text" [value]="reviewRequest.settlement_savings_transaction_id" readonly />
|
||||
</label>
|
||||
} @else {
|
||||
<div class="pg-empty" style="grid-column: span 2">
|
||||
Settlement is processed automatically on approval. Details aren't available when reopening an
|
||||
already-approved request — check the linked savings account's transaction history to confirm.
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (isReview && activityLog.length > 0) {
|
||||
<div class="pg-card">
|
||||
<div class="pos-section-label">Activity Log</div>
|
||||
<table class="pg-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>Action</th>
|
||||
<th>User</th>
|
||||
<th>Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (entry of activityLog; track entry.timestamp) {
|
||||
<tr>
|
||||
<td>{{ entry.timestamp | date: 'medium' }}</td>
|
||||
<td>{{ entry.action }}</td>
|
||||
<td>{{ entry.user }}</td>
|
||||
<td>{{ entry.note || '—' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showConfirmDialog) {
|
||||
<div class="swr-modal-backdrop">
|
||||
<div class="swr-modal">
|
||||
<h3>Confirm Share Withdrawal Request</h3>
|
||||
<p class="pg-sub">Review the details below before submitting for Bank Manager approval.</p>
|
||||
<table class="pg-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Account No / Client</td>
|
||||
<td>{{ account?.accountNo }} — {{ account?.clientName }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shares to Withdraw</td>
|
||||
<td>
|
||||
{{ requestedShares }} @ ₹{{ unitPrice | number: '1.2-2' }} = ₹{{ withdrawalValue | number: '1.2-2' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr [class.swr-close-row]="remainingShares === 0">
|
||||
<td>Remaining Shares After Withdrawal</td>
|
||||
<td>
|
||||
{{ remainingShares }}
|
||||
@if (remainingShares === 0) {
|
||||
<span class="swr-close-tag"><mat-icon>lock</mat-icon> Account will be closed on approval</span>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Requested Date</td>
|
||||
<td>{{ requestedDate }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Board Resolution Number</td>
|
||||
<td>{{ resolutionNumber }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Date of Meeting</td>
|
||||
<td>{{ meetingDate }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Settlement Payment Type</td>
|
||||
<td>{{ settlementPaymentTypeName }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Linked Savings Account</td>
|
||||
<td>{{ account?.savingsAccountNumber || 'None — settlement will not run automatically' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pos-section-label" style="margin-top: 12px">Validation Checks</div>
|
||||
<table class="pg-table">
|
||||
<tbody>
|
||||
@for (check of verificationChecks; track check.label) {
|
||||
<tr>
|
||||
<td>{{ check.label }}</td>
|
||||
<td [class.swr-check-pass]="check.pass" [class.swr-check-fail]="!check.pass">
|
||||
{{ check.pass ? 'Pass — ' : 'Review — ' }}{{ check.detail }}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="inv-form-actions">
|
||||
<button type="button" class="pg-btn pg-btn--primary" [disabled]="submitting" (click)="confirmSubmit()">
|
||||
{{ submitting ? 'Submitting…' : 'Confirm & Submit' }}
|
||||
</button>
|
||||
<button type="button" class="pg-btn" (click)="cancelConfirmDialog()">Back to Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showRejectDialog) {
|
||||
<div class="swr-modal-backdrop">
|
||||
<div class="swr-modal">
|
||||
<h3>Reject Share Withdrawal Request</h3>
|
||||
<label class="inv-form-field">
|
||||
<span>* Rejection Reason</span>
|
||||
<textarea rows="3" [(ngModel)]="rejectionReason"></textarea>
|
||||
</label>
|
||||
<div class="inv-form-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="pg-btn pg-btn--danger"
|
||||
[disabled]="!rejectionReason.trim()"
|
||||
(click)="confirmRejectReview()"
|
||||
>
|
||||
Confirm Reject
|
||||
</button>
|
||||
<button type="button" class="pg-btn" (click)="showRejectDialog = false">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,480 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.swr-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgb(13 27 42 / 55%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.swr-modal {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
width: 420px;
|
||||
max-width: 90vw;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 12px 32px rgb(15 23 42 / 20%);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 16px;
|
||||
color: #0d1b2a;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&:has(table) {
|
||||
width: 560px;
|
||||
}
|
||||
}
|
||||
|
||||
.swr-check-pass {
|
||||
color: #1a7f37;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.swr-check-fail {
|
||||
color: #b42318;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.swr-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
||||
&--ok {
|
||||
background: #eafaf0;
|
||||
color: #1a7f37;
|
||||
}
|
||||
|
||||
&--warn {
|
||||
background: #fdecea;
|
||||
color: #b42318;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Account-will-close notice ---------- */
|
||||
.swr-close-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 4px 16px 16px;
|
||||
padding: 10px 16px;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fde68a;
|
||||
border-left: 3px solid #d97706;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #92400e;
|
||||
|
||||
mat-icon {
|
||||
color: #d97706;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #7c2d12;
|
||||
}
|
||||
}
|
||||
|
||||
.swr-close-row td {
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.swr-close-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: 8px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: #fffbeb;
|
||||
color: #d97706;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
|
||||
mat-icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Verification trigger card ---------- */
|
||||
.swrv-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #3457d5, #6c8cff);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 12px rgb(52 87 213 / 30%);
|
||||
}
|
||||
|
||||
&__text {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #0d1b2a;
|
||||
}
|
||||
|
||||
&__sub {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-top: 2px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Validate pipeline modal ---------- */
|
||||
@keyframes swrv-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swrv-zoom {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swrv-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.swrv-spin {
|
||||
animation: swrv-spin 0.9s linear infinite;
|
||||
}
|
||||
|
||||
.swrv-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
// No backdrop-filter: it would make this element a containing block for any position:fixed
|
||||
// descendant (e.g. if this modal is ever nested inside another fixed popup, or gains one of its
|
||||
// own later) — see the identical fix in share-withdrawal-requests.component.scss for the bug this
|
||||
// caused. Extra opacity compensates for the loss of the blur look.
|
||||
background: rgb(15 25 45 / 65%);
|
||||
z-index: 1200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
animation: swrv-fade 0.2s ease-out;
|
||||
|
||||
&__card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 60px rgb(0 0 0 / 25%);
|
||||
animation: swrv-zoom 0.25s ease-out;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #0d1b2a;
|
||||
}
|
||||
|
||||
&__title-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #3457d5, #6c8cff);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.12s;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
color: #b42318;
|
||||
border-color: #b42318;
|
||||
background: #fdecea;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 20px 22px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__intro {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
line-height: 1.55;
|
||||
margin: 0 0 16px;
|
||||
|
||||
strong {
|
||||
color: #0d1b2a;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__warn {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
background: #fef3e2;
|
||||
border: 1px solid rgb(217 119 6 / 30%);
|
||||
border-left: 3px solid #d97706;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
color: #633806;
|
||||
line-height: 1.5;
|
||||
|
||||
mat-icon {
|
||||
color: #d97706;
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
color: #4d2a05;
|
||||
}
|
||||
}
|
||||
|
||||
&__result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
padding: 12px 14px;
|
||||
background: #eafaf0;
|
||||
border: 1px solid rgb(26 127 55 / 25%);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1a7f37;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: 16px 22px;
|
||||
border-top: 1px solid #eef1f5;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
}
|
||||
|
||||
.swrv-steps {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.swrv-step {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 38px;
|
||||
bottom: -4px;
|
||||
width: 2px;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
border: 2px solid #e2e8f0;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all 0.25s;
|
||||
|
||||
mat-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 5px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
&__msg {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&--active {
|
||||
.swrv-step__indicator {
|
||||
background: #3457d5;
|
||||
border-color: #3457d5;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 0 4px rgb(52 87 213 / 15%);
|
||||
}
|
||||
|
||||
.swrv-step__label {
|
||||
color: #3457d5;
|
||||
}
|
||||
}
|
||||
|
||||
&--done {
|
||||
.swrv-step__indicator {
|
||||
background: #1a7f37;
|
||||
border-color: #1a7f37;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: #1a7f37;
|
||||
}
|
||||
|
||||
.swrv-step__label {
|
||||
color: #0d1b2a;
|
||||
}
|
||||
}
|
||||
|
||||
&--failed {
|
||||
.swrv-step__indicator {
|
||||
background: #b42318;
|
||||
border-color: #b42318;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.swrv-step__label {
|
||||
color: #b42318;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.swrv-spin {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.swrv-modal,
|
||||
.swrv-modal__card {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,416 @@
|
||||
/**
|
||||
* 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 { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { of } from 'rxjs';
|
||||
|
||||
import { SharesService } from '../../shares/shares.service';
|
||||
import { ClerkShareWithdrawalService } from '../../cashier/clerk-share-withdrawal.service';
|
||||
import { CashierService } from '../../cashier/cashier.service';
|
||||
import { SearchSelectComponent, SearchSelectOption } from '../../shared/search-select/search-select.component';
|
||||
|
||||
export type ShareWdMode = 'create' | 'review';
|
||||
|
||||
interface ActivityEntry {
|
||||
timestamp: string;
|
||||
action: string;
|
||||
user: string;
|
||||
note?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Share Withdrawal (redeem shares) request — maker screen in the Clerk Dashboard. A clerk finds
|
||||
* the member's Share Account, enters how many shares to withdraw plus the governing Board
|
||||
* Resolution Number / Date of Meeting, and submits for Bank Manager approval. This is the ONLY
|
||||
* entry point a share withdrawal should go through — approval server-side executes the real
|
||||
* "redeemshares" command (see ClerkShareWithdrawalRequestApiResource on the backend).
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-share-withdrawal-request',
|
||||
templateUrl: './share-withdrawal-request.component.html',
|
||||
styleUrls: [
|
||||
'../../cashier/cashier-shared.scss',
|
||||
'../clerk-shared.scss',
|
||||
'./share-withdrawal-request.component.scss'
|
||||
],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
RouterModule,
|
||||
MatIconModule,
|
||||
MatSnackBarModule,
|
||||
SearchSelectComponent
|
||||
]
|
||||
})
|
||||
export class ShareWithdrawalRequestComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private sharesService = inject(SharesService);
|
||||
private wdService = inject(ClerkShareWithdrawalService);
|
||||
private cashierService = inject(CashierService);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
|
||||
/** When embedded (e.g. opened as a popup from a list screen instead of routed to directly), mode
|
||||
* and requestId come from these inputs rather than the route, and success/close actions emit
|
||||
* events instead of navigating away. */
|
||||
@Input() embedded = false;
|
||||
@Input() overrideMode: ShareWdMode | null = null;
|
||||
@Input() overrideRequestId: number | null = null;
|
||||
@Output() closeRequested = new EventEmitter<void>();
|
||||
@Output() actionCompleted = new EventEmitter<void>();
|
||||
|
||||
mode: ShareWdMode = 'create';
|
||||
requestId: number | null = null;
|
||||
|
||||
submitting = false;
|
||||
loadingAccount = false;
|
||||
|
||||
selectedAccountId = '';
|
||||
accountOptions: SearchSelectOption[] = [];
|
||||
|
||||
account: any = null;
|
||||
|
||||
requestedShares: number | null = null;
|
||||
requestedDate = '';
|
||||
resolutionNumber = '';
|
||||
meetingDate = '';
|
||||
description = '';
|
||||
|
||||
paymentTypes: any[] = [];
|
||||
settlementPaymentTypeId: number | null = null;
|
||||
|
||||
activityLog: ActivityEntry[] = [];
|
||||
reviewRequest: any = null;
|
||||
showRejectDialog = false;
|
||||
rejectionReason = '';
|
||||
showConfirmDialog = false;
|
||||
|
||||
showValidateModal = false;
|
||||
validating = false;
|
||||
validateAllPassed = false;
|
||||
backendChecks: { label: string; pass: boolean; detail: string }[] | null = null;
|
||||
validateSteps: { label: string; detail: string; pass: boolean; status: 'pending' | 'active' | 'done' | 'failed' }[] =
|
||||
[];
|
||||
|
||||
get remainingShares(): number {
|
||||
const held = Number(this.account?.summary?.totalApprovedShares ?? this.account?.totalApprovedShares ?? 0);
|
||||
return held - (this.requestedShares || 0);
|
||||
}
|
||||
|
||||
get unitPrice(): number {
|
||||
return Number(this.account?.currentMarketPrice ?? 0);
|
||||
}
|
||||
|
||||
get withdrawalValue(): number {
|
||||
return (this.requestedShares || 0) * this.unitPrice;
|
||||
}
|
||||
|
||||
get paymentTypeOptions(): any[] {
|
||||
return this.paymentTypes.filter((pt: any) => !pt.isCashPayment);
|
||||
}
|
||||
|
||||
get selectedSettlementPaymentType(): any {
|
||||
return this.paymentTypes.find((pt: any) => pt.id === this.settlementPaymentTypeId);
|
||||
}
|
||||
|
||||
get settlementPaymentTypeName(): string {
|
||||
if (this.isReview) {
|
||||
return this.reviewRequest?.settlement_payment_type_name || '—';
|
||||
}
|
||||
return this.selectedSettlementPaymentType?.name || '—';
|
||||
}
|
||||
|
||||
get isFormValid(): boolean {
|
||||
if (!this.account) return false;
|
||||
if (!this.requestedShares || this.requestedShares <= 0) return false;
|
||||
const held = Number(this.account?.summary?.totalApprovedShares ?? this.account?.totalApprovedShares ?? 0);
|
||||
if (this.requestedShares > held) return false;
|
||||
if (!this.requestedDate) return false;
|
||||
if (!this.resolutionNumber.trim()) return false;
|
||||
if (!this.meetingDate) return false;
|
||||
if (!this.settlementPaymentTypeId) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
/** Shown to the clerk before submit and to the manager before approval, so both can verify the same checks. */
|
||||
get verificationChecks(): { label: string; pass: boolean; detail: string }[] {
|
||||
const held = Number(this.account?.summary?.totalApprovedShares ?? this.account?.totalApprovedShares ?? 0);
|
||||
const shares = this.requestedShares || 0;
|
||||
return [
|
||||
{
|
||||
label: 'Board Resolution Number provided',
|
||||
pass: !!this.resolutionNumber?.trim(),
|
||||
detail: this.resolutionNumber?.trim() || 'Missing'
|
||||
},
|
||||
{ label: 'Date of Meeting provided', pass: !!this.meetingDate, detail: this.meetingDate || 'Missing' },
|
||||
{
|
||||
label: 'Shares requested within shares held',
|
||||
pass: shares > 0 && shares <= held,
|
||||
detail: `${shares} of ${held} shares held`
|
||||
},
|
||||
{
|
||||
label: 'Linked savings account confirmed',
|
||||
pass: !!this.account?.savingsAccountNumber,
|
||||
detail: this.account?.savingsAccountNumber || 'No linked savings account — settlement cannot run automatically'
|
||||
},
|
||||
{
|
||||
label: 'Settlement Payment Type selected (non-cash)',
|
||||
pass: this.settlementPaymentTypeName !== '—',
|
||||
detail: this.settlementPaymentTypeName
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
get isReview(): boolean {
|
||||
return this.mode === 'review';
|
||||
}
|
||||
|
||||
get pageTitle(): string {
|
||||
return this.isReview ? 'Review Share Withdrawal Request' : 'New Share Withdrawal Request';
|
||||
}
|
||||
|
||||
get pageSubtitle(): string {
|
||||
return this.isReview
|
||||
? "Approve or reject the clerk's share withdrawal request."
|
||||
: 'Submit a share withdrawal (redeem shares) request for Bank Manager approval.';
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.mode = this.overrideMode ?? (this.route.snapshot.data?.['mode'] as ShareWdMode) ?? 'create';
|
||||
const idParam = this.overrideRequestId ?? this.route.snapshot.params?.['id'];
|
||||
this.requestId = idParam ? Number(idParam) : null;
|
||||
|
||||
const today = new Date();
|
||||
this.requestedDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
|
||||
this.meetingDate = this.requestedDate;
|
||||
|
||||
this.sharesService
|
||||
.getShareAccountSummaries()
|
||||
.pipe(catchError(() => of([])))
|
||||
.subscribe((rows: any[]) => {
|
||||
this.accountOptions = (rows || [])
|
||||
.filter((r) => (r.status?.value || '').toLowerCase() === 'active')
|
||||
.map((r) => ({
|
||||
value: String(r.id),
|
||||
label: `${r.accountNo} — ${r.clientName} (${r.totalApprovedShares} shares)`,
|
||||
searchText: `${r.accountNo} ${r.clientName}`
|
||||
}));
|
||||
});
|
||||
|
||||
this.cashierService
|
||||
.getPaymentTypes()
|
||||
.pipe(catchError(() => of([])))
|
||||
.subscribe((types: any[]) => (this.paymentTypes = types ?? []));
|
||||
|
||||
if (this.requestId && this.mode === 'review') {
|
||||
this.loadReviewRequest(this.requestId);
|
||||
}
|
||||
}
|
||||
|
||||
onAccountSelected(accountId: string): void {
|
||||
this.selectedAccountId = accountId;
|
||||
if (!accountId) {
|
||||
this.account = null;
|
||||
return;
|
||||
}
|
||||
this.loadingAccount = true;
|
||||
this.sharesService
|
||||
.getSharesAccountData(accountId, false)
|
||||
.pipe(catchError(() => of(null)))
|
||||
.subscribe((acc: any) => {
|
||||
this.account = acc;
|
||||
this.loadingAccount = false;
|
||||
});
|
||||
}
|
||||
|
||||
private loadReviewRequest(id: number): void {
|
||||
this.wdService.getById(id).subscribe({
|
||||
next: (req: any) => {
|
||||
this.reviewRequest = req;
|
||||
this.requestedShares = Number(req.requested_shares);
|
||||
this.requestedDate = req.requested_date
|
||||
? String(req.requested_date).split('T')[0].split(' ')[0]
|
||||
: this.requestedDate;
|
||||
this.resolutionNumber = req.resolution_number ?? '';
|
||||
this.meetingDate = req.meeting_date ? String(req.meeting_date).split('T')[0].split(' ')[0] : this.meetingDate;
|
||||
this.description = req.description ?? '';
|
||||
|
||||
if (req.activity_log) {
|
||||
try {
|
||||
this.activityLog = JSON.parse(req.activity_log);
|
||||
} catch {
|
||||
this.activityLog = [];
|
||||
}
|
||||
}
|
||||
|
||||
this.sharesService
|
||||
.getSharesAccountData(String(req.share_account_id), false)
|
||||
.pipe(catchError(() => of(null)))
|
||||
.subscribe((acc: any) => (this.account = acc));
|
||||
},
|
||||
error: () => this.snackBar.open('Failed to load share withdrawal request.', 'Close', { duration: 5000 })
|
||||
});
|
||||
}
|
||||
|
||||
/** "Review before Save" per requirement — opens the confirm dialog instead of submitting directly. */
|
||||
openConfirmDialog(): void {
|
||||
if (!this.isFormValid || this.submitting) {
|
||||
return;
|
||||
}
|
||||
this.showConfirmDialog = true;
|
||||
}
|
||||
|
||||
cancelConfirmDialog(): void {
|
||||
this.showConfirmDialog = false;
|
||||
}
|
||||
|
||||
confirmSubmit(): void {
|
||||
this.showConfirmDialog = false;
|
||||
this.submitting = true;
|
||||
const payload = {
|
||||
shareAccountId: Number(this.selectedAccountId),
|
||||
accountNo: this.account?.accountNo,
|
||||
clientId: this.account?.clientId,
|
||||
clientName: this.account?.clientName,
|
||||
requestedShares: this.requestedShares,
|
||||
requestedDate: this.requestedDate,
|
||||
resolutionNumber: this.resolutionNumber.trim(),
|
||||
meetingDate: this.meetingDate,
|
||||
description: this.description,
|
||||
settlementPaymentTypeId: this.settlementPaymentTypeId
|
||||
};
|
||||
this.wdService.submit(payload).subscribe({
|
||||
next: () => {
|
||||
this.snackBar.open('Share withdrawal request submitted for approval.', 'Close', { duration: 4000 });
|
||||
if (this.embedded) {
|
||||
this.actionCompleted.emit();
|
||||
} else {
|
||||
this.router.navigate(['/clerk/dashboard']);
|
||||
}
|
||||
},
|
||||
error: (err) => {
|
||||
this.submitting = false;
|
||||
this.snackBar.open(err?.error?.defaultUserMessage || 'Could not submit the request.', 'Close', {
|
||||
duration: 6000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openValidateModal(): void {
|
||||
if (!this.reviewRequest) return;
|
||||
this.showValidateModal = true;
|
||||
this.runBackendValidation();
|
||||
}
|
||||
|
||||
closeValidateModal(): void {
|
||||
if (this.validating) return;
|
||||
this.showValidateModal = false;
|
||||
}
|
||||
|
||||
/** Re-checks live backend state (account still active, GL mapping still configured, etc.) rather
|
||||
* than relying on data already loaded in the browser — catches drift since submission. Results
|
||||
* are revealed one step at a time (see revealValidateSteps()) for the pipeline-style animation. */
|
||||
runBackendValidation(): void {
|
||||
if (!this.reviewRequest || this.validating) return;
|
||||
this.validating = true;
|
||||
this.backendChecks = null;
|
||||
this.validateSteps = [];
|
||||
this.wdService.validate(this.reviewRequest.id).subscribe({
|
||||
next: (res: any) => {
|
||||
const checks = (res?.checks ?? []) as { label: string; pass: boolean; detail: string }[];
|
||||
this.backendChecks = checks;
|
||||
this.validateAllPassed = !!res?.allPassed;
|
||||
this.validateSteps = checks.map((c) => ({ ...c, status: 'pending' as const }));
|
||||
this.revealValidateSteps(0);
|
||||
},
|
||||
error: (err) => {
|
||||
this.validating = false;
|
||||
this.snackBar.open(err?.error?.defaultUserMessage || 'Could not run backend validation.', 'Close', {
|
||||
duration: 6000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private revealValidateSteps(index: number): void {
|
||||
if (index >= this.validateSteps.length) {
|
||||
this.validating = false;
|
||||
return;
|
||||
}
|
||||
this.validateSteps[index].status = 'active';
|
||||
setTimeout(() => {
|
||||
this.validateSteps[index].status = this.validateSteps[index].pass ? 'done' : 'failed';
|
||||
this.revealValidateSteps(index + 1);
|
||||
}, 320);
|
||||
}
|
||||
|
||||
approveReview(): void {
|
||||
if (!this.reviewRequest) return;
|
||||
this.wdService.approve(this.reviewRequest.id).subscribe({
|
||||
next: (res: any) => {
|
||||
let message =
|
||||
res?.settlementAmount != null
|
||||
? `Share withdrawal approved. ₹${Number(res.settlementAmount).toLocaleString('en-IN', { minimumFractionDigits: 2 })} credited to the linked savings account.`
|
||||
: (res?.settlementWarning ?? 'Share withdrawal approved and processed.');
|
||||
if (res?.accountClosed) {
|
||||
message += ' All shares withdrawn — the share account has been closed.';
|
||||
}
|
||||
this.snackBar.open(message, 'Close', { duration: 8000 });
|
||||
if (this.embedded) {
|
||||
this.actionCompleted.emit();
|
||||
} else {
|
||||
this.router.navigate(['/checker-inbox-and-tasks/share-withdrawal-requests']);
|
||||
}
|
||||
},
|
||||
error: (err) =>
|
||||
this.snackBar.open(err?.error?.defaultUserMessage || 'Could not approve the request.', 'Close', {
|
||||
duration: 6000
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
openRejectDialog(): void {
|
||||
this.showRejectDialog = true;
|
||||
this.rejectionReason = '';
|
||||
}
|
||||
|
||||
confirmRejectReview(): void {
|
||||
if (!this.reviewRequest || !this.rejectionReason.trim()) return;
|
||||
this.wdService.reject(this.reviewRequest.id, this.rejectionReason.trim()).subscribe({
|
||||
next: () => {
|
||||
this.showRejectDialog = false;
|
||||
this.snackBar.open('Share withdrawal request rejected.', 'Close', { duration: 4000 });
|
||||
if (this.embedded) {
|
||||
this.actionCompleted.emit();
|
||||
} else {
|
||||
this.router.navigate(['/checker-inbox-and-tasks/share-withdrawal-requests']);
|
||||
}
|
||||
},
|
||||
error: (err) =>
|
||||
this.snackBar.open(err?.error?.defaultUserMessage || 'Could not reject the request.', 'Close', {
|
||||
duration: 6000
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
if (this.embedded) {
|
||||
this.closeRequested.emit();
|
||||
return;
|
||||
}
|
||||
this.router.navigate(this.isReview ? ['/checker-inbox-and-tasks/share-withdrawal-requests'] : ['/clerk/dashboard']);
|
||||
}
|
||||
}
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="fm-dialog">
|
||||
<div class="fm-dialog__header" style="display: flex; align-items: center; gap: 8px">
|
||||
<mat-icon class="fm-dialog__icon">people</mat-icon>
|
||||
<span style="font-weight: 500; font-size: 18px">CHILDREN</span>
|
||||
</div>
|
||||
|
||||
<mat-dialog-content>
|
||||
<form [formGroup]="childrenForm">
|
||||
<div formArrayName="children" style="margin-top: 12px; background: #fff; padding: 12px">
|
||||
@for (child of children.controls; track $index) {
|
||||
<div
|
||||
[formGroupName]="$index"
|
||||
style="
|
||||
position: relative;
|
||||
padding: 24px 16px 16px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
"
|
||||
>
|
||||
<div class="fm-grid">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Child Full Name*</mat-label>
|
||||
<input matInput formControlName="fullName" required placeholder="Child Full Name*" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Gender*</mat-label>
|
||||
<mat-select formControlName="genderId" required>
|
||||
@for (g of genderIdOptions; track g.id) {
|
||||
<mat-option [value]="g.id">{{ g.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" (click)="childDobPicker.open()">
|
||||
<mat-label>Date of Birth</mat-label>
|
||||
<input matInput [max]="maxDate" [matDatepicker]="childDobPicker" formControlName="dateOfBirth" />
|
||||
<mat-datepicker-toggle matSuffix [for]="childDobPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #childDobPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Nationality</mat-label>
|
||||
<mat-select formControlName="nationality">
|
||||
<mat-option value="INDIAN">Indian</mat-option>
|
||||
<mat-option value="NRI">NRI</mat-option>
|
||||
<mat-option value="FOREIGN_NATIONAL">Foreign National</mat-option>
|
||||
<mat-option value="OTHER">Other</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Aadhaar Number (Optional)</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="aadhaarNumber"
|
||||
maxlength="12"
|
||||
placeholder="12-digit Aadhaar"
|
||||
(keypress)="$event.charCode >= 48 && $event.charCode <= 57 ? true : $event.preventDefault()"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>PAN Number (Optional)</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="panNumber"
|
||||
maxlength="10"
|
||||
placeholder="ABCDE1234F"
|
||||
style="text-transform: uppercase"
|
||||
(input)="
|
||||
$any(children.at($index))
|
||||
.get('panNumber')
|
||||
?.setValue($any($event.target).value.toUpperCase(), { emitEvent: false })
|
||||
"
|
||||
/>
|
||||
@if (
|
||||
$any(children.at($index)).get('panNumber')?.hasError('pattern') &&
|
||||
$any(children.at($index)).get('panNumber')?.touched
|
||||
) {
|
||||
<mat-error>Invalid PAN format</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
@if ($index < children.controls.length - 1) {
|
||||
<div style="border-bottom: 1px dashed #ccc; margin-bottom: 16px"></div>
|
||||
}
|
||||
}
|
||||
<div style="border-bottom: 1px dashed #ccc; margin-bottom: 16px"></div>
|
||||
<button mat-stroked-button type="button" color="primary" (click)="addChild()">
|
||||
<mat-icon>add</mat-icon> Add Another Child
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-stroked-button mat-dialog-close type="button">Cancel</button>
|
||||
<button mat-flat-button color="primary" type="button" [disabled]="childrenForm.invalid" (click)="submit()">
|
||||
Add Member
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
</div>
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
/**
|
||||
* 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 { Component, OnInit, inject } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { UntypedFormBuilder, UntypedFormGroup, UntypedFormArray, Validators } from '@angular/forms';
|
||||
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-client-family-member-child-dialog',
|
||||
templateUrl: './client-family-member-child-dialog.component.html',
|
||||
styleUrls: ['../client-family-member-dialog/client-family-member-dialog.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
MatDialogModule,
|
||||
MatIcon,
|
||||
MatButtonModule,
|
||||
MatInputModule,
|
||||
MatSelectModule,
|
||||
MatDatepickerModule,
|
||||
MatTooltipModule
|
||||
]
|
||||
})
|
||||
export class ClientFamilyMemberChildDialogComponent implements OnInit {
|
||||
dialogRef = inject(MatDialogRef<ClientFamilyMemberChildDialogComponent>);
|
||||
data = inject(MAT_DIALOG_DATA);
|
||||
private formBuilder = inject(UntypedFormBuilder);
|
||||
|
||||
childrenForm: UntypedFormGroup;
|
||||
genderIdOptions: any[];
|
||||
maxDate: Date = new Date();
|
||||
|
||||
constructor() {
|
||||
this.genderIdOptions = this.data.genderIdOptions;
|
||||
|
||||
this.childrenForm = this.formBuilder.group({
|
||||
children: this.formBuilder.array([])
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.data.children && this.data.children.length > 0) {
|
||||
this.data.children.forEach((child: any) => {
|
||||
this.children.push(
|
||||
this.formBuilder.group({
|
||||
id: [child.id],
|
||||
fullName: [
|
||||
child.fullName,
|
||||
Validators.required
|
||||
],
|
||||
genderId: [
|
||||
child.genderId,
|
||||
Validators.required
|
||||
],
|
||||
dateOfBirth: [child.dateOfBirth ? new Date(child.dateOfBirth) : ''],
|
||||
nationality: [child.nationality || 'INDIAN'],
|
||||
aadhaarNumber: [child.aadhaarNumber || ''],
|
||||
panNumber: [
|
||||
child.panNumber || '',
|
||||
Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)
|
||||
]
|
||||
})
|
||||
);
|
||||
});
|
||||
} else {
|
||||
this.addChild();
|
||||
}
|
||||
}
|
||||
|
||||
get children(): UntypedFormArray {
|
||||
return this.childrenForm.get('children') as UntypedFormArray;
|
||||
}
|
||||
|
||||
createChildFormGroup(): UntypedFormGroup {
|
||||
return this.formBuilder.group({
|
||||
id: [''],
|
||||
fullName: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
genderId: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
dateOfBirth: [''],
|
||||
nationality: ['INDIAN'],
|
||||
aadhaarNumber: [''],
|
||||
panNumber: [
|
||||
'',
|
||||
Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
addChild(): void {
|
||||
this.children.push(this.createChildFormGroup());
|
||||
}
|
||||
|
||||
removeChild(index: number): void {
|
||||
this.children.removeAt(index);
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
if (this.childrenForm.valid) {
|
||||
this.dialogRef.close(this.children.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
+34
@@ -139,6 +139,21 @@
|
||||
<span class="fm-readonly-value">{{ familyMemberForm.get('remarks')?.value }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (isSpouse && familyMemberForm.get('children')?.value?.length > 0) {
|
||||
<div class="fm-readonly-remarks">
|
||||
<span class="fm-readonly-label">Children</span>
|
||||
<div class="fm-children-list">
|
||||
@for (child of familyMemberForm.get('children')?.value; track $index) {
|
||||
<div class="fm-child-item" style="font-size: 13px; color: #555; margin-top: 4px">
|
||||
<span>{{ child.fullName }}</span>
|
||||
@if (child.dateOfBirth) {
|
||||
<span> · DOB: {{ child.dateOfBirth | date: 'dd MMM yyyy' }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<!-- ═══ ADD / EDIT MODE ═══ -->
|
||||
@@ -447,6 +462,25 @@
|
||||
<mat-label>Remarks</mat-label>
|
||||
<textarea matInput formControlName="remarks" rows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Children Section -->
|
||||
@if (isSpouse) {
|
||||
<div class="fm-section-label" style="margin-top: 16px">Children</div>
|
||||
<div class="fm-checkbox-row" style="display: flex; align-items: center; justify-content: space-between">
|
||||
<mat-checkbox formControlName="hasChildren">Does this family member have a child/children?</mat-checkbox>
|
||||
@if (familyMemberForm.get('hasChildren')?.value) {
|
||||
<button
|
||||
mat-stroked-button
|
||||
type="button"
|
||||
color="primary"
|
||||
(click)="openChildrenDialog()"
|
||||
style="margin-left: 16px"
|
||||
>
|
||||
<mat-icon>edit</mat-icon> Edit Children Details ({{ children.length }})
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</form>
|
||||
</mat-dialog-content>
|
||||
|
||||
+143
-2
@@ -17,7 +17,7 @@ import {
|
||||
MatDialogClose,
|
||||
MatDialogContent
|
||||
} from '@angular/material/dialog';
|
||||
import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
|
||||
import { UntypedFormGroup, UntypedFormBuilder, UntypedFormArray, Validators } from '@angular/forms';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
import { Dates } from 'app/core/utils/dates';
|
||||
import { ClientsService } from 'app/clients/clients.service';
|
||||
@@ -58,6 +58,8 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
|
||||
private dialog = inject(MatDialog);
|
||||
|
||||
maxDate = new Date();
|
||||
|
||||
hasChildrenChecked = false;
|
||||
familyMemberForm: UntypedFormGroup;
|
||||
|
||||
/** Client search */
|
||||
@@ -197,6 +199,32 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
|
||||
// Re-fetch linked client details (profile, signature, KYC status)
|
||||
this.fetchLinkedClientData(m.linkedClientId.toString());
|
||||
}
|
||||
if (m.children && m.children.length > 0) {
|
||||
this.hasChildrenChecked = true;
|
||||
this.familyMemberForm.patchValue({ hasChildren: true });
|
||||
m.children.forEach((child: any) => {
|
||||
this.children.push(
|
||||
this.formBuilder.group({
|
||||
id: [child.id],
|
||||
fullName: [
|
||||
child.fullName,
|
||||
Validators.required
|
||||
],
|
||||
genderId: [
|
||||
child.genderId,
|
||||
Validators.required
|
||||
],
|
||||
dateOfBirth: [child.dateOfBirth ? new Date(child.dateOfBirth) : ''],
|
||||
nationality: [child.nationality || 'INDIAN'],
|
||||
aadhaarNumber: [child.aadhaarNumber || ''],
|
||||
panNumber: [
|
||||
child.panNumber || '',
|
||||
Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)
|
||||
]
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
if (this.isViewMode) {
|
||||
this.familyMemberForm.disable();
|
||||
}
|
||||
@@ -225,8 +253,102 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
|
||||
isAlive: [true],
|
||||
marriageDate: [''],
|
||||
marriageAuthority: [''],
|
||||
linkedClientId: ['']
|
||||
linkedClientId: [''],
|
||||
hasChildren: [false],
|
||||
children: this.formBuilder.array([])
|
||||
});
|
||||
|
||||
this.familyMemberForm.get('hasChildren')?.valueChanges.subscribe((value) => {
|
||||
if (value && !this.hasChildrenChecked) {
|
||||
this.openChildrenDialog();
|
||||
} else if (!value) {
|
||||
this.hasChildrenChecked = false;
|
||||
this.children.clear();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get children(): UntypedFormArray {
|
||||
return this.familyMemberForm.get('children') as UntypedFormArray;
|
||||
}
|
||||
|
||||
async openChildrenDialog() {
|
||||
// Dynamically import the dialog to avoid a circular dependency between the two dialogs.
|
||||
const { ClientFamilyMemberChildDialogComponent } =
|
||||
await import('../client-family-member-child-dialog/client-family-member-child-dialog.component');
|
||||
|
||||
const dialogRef = this.dialog.open(ClientFamilyMemberChildDialogComponent, {
|
||||
data: {
|
||||
children: this.children.value,
|
||||
genderIdOptions: this.data.options.genderIdOptions
|
||||
},
|
||||
width: '500px'
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((result: any[]) => {
|
||||
if (result) {
|
||||
this.children.clear();
|
||||
result.forEach((child) => {
|
||||
this.children.push(
|
||||
this.formBuilder.group({
|
||||
id: [child.id],
|
||||
fullName: [
|
||||
child.fullName,
|
||||
Validators.required
|
||||
],
|
||||
genderId: [
|
||||
child.genderId,
|
||||
Validators.required
|
||||
],
|
||||
dateOfBirth: [child.dateOfBirth],
|
||||
nationality: [child.nationality || 'INDIAN'],
|
||||
aadhaarNumber: [child.aadhaarNumber || ''],
|
||||
panNumber: [
|
||||
child.panNumber || '',
|
||||
Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)
|
||||
]
|
||||
})
|
||||
);
|
||||
});
|
||||
this.hasChildrenChecked = true;
|
||||
this.familyMemberForm.patchValue({ hasChildren: true }, { emitEvent: false });
|
||||
} else if (this.children.length === 0) {
|
||||
this.hasChildrenChecked = false;
|
||||
this.familyMemberForm.patchValue({ hasChildren: false }, { emitEvent: false });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createChildFormGroup(): UntypedFormGroup {
|
||||
return this.formBuilder.group({
|
||||
id: [''],
|
||||
fullName: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
genderId: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
dateOfBirth: [''],
|
||||
nationality: ['INDIAN'],
|
||||
aadhaarNumber: [''],
|
||||
panNumber: [
|
||||
'',
|
||||
Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
addChild(): void {
|
||||
this.children.push(this.createChildFormGroup());
|
||||
}
|
||||
|
||||
removeChild(index: number): void {
|
||||
this.children.removeAt(index);
|
||||
if (this.children.length === 0) {
|
||||
this.familyMemberForm.patchValue({ hasChildren: false });
|
||||
}
|
||||
}
|
||||
|
||||
/** Handle marriage certificate file selection */
|
||||
@@ -481,6 +603,25 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
|
||||
member._linkedClient = this.selectedClient;
|
||||
}
|
||||
|
||||
// Format children dates
|
||||
if (this.isSpouse && member.children && member.children.length > 0) {
|
||||
member.children = member.children.map((child: any) => {
|
||||
const c = { ...child };
|
||||
if (c.dateOfBirth instanceof Date) {
|
||||
c.dateOfBirth = this.dateUtils.formatDate(c.dateOfBirth, dateFormat);
|
||||
} else if (!c.dateOfBirth) {
|
||||
delete c.dateOfBirth;
|
||||
}
|
||||
if (c.panNumber) {
|
||||
c.panNumber = c.panNumber.toUpperCase();
|
||||
}
|
||||
return c;
|
||||
});
|
||||
} else {
|
||||
delete member.children;
|
||||
}
|
||||
delete member.hasChildren;
|
||||
|
||||
// Attach marriage certificate file if present
|
||||
if (this.marriageCertFile) {
|
||||
member._marriageCertFile = this.marriageCertFile;
|
||||
|
||||
@@ -966,6 +966,38 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
|
||||
|
||||
this.linkMonthlyAnnual('monthlyIncome', 'annualIncome');
|
||||
this.linkMonthlyAnnual('monthlyTurnover', 'annualTurnover');
|
||||
this.linkIncomeToTurnover();
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto-calculates turnover based on income (doubling monthly income for monthly turnover,
|
||||
* and annual income for annual/yearly turnover).
|
||||
*/
|
||||
private linkIncomeToTurnover(): void {
|
||||
const monthlyIncome = this.createClientForm.get('monthlyIncome');
|
||||
const monthlyTurnover = this.createClientForm.get('monthlyTurnover');
|
||||
const annualIncome = this.createClientForm.get('annualIncome');
|
||||
const annualTurnover = this.createClientForm.get('annualTurnover');
|
||||
|
||||
if (monthlyIncome && monthlyTurnover) {
|
||||
monthlyIncome.valueChanges.subscribe((value) => {
|
||||
if (this.suppressMonthlyAnnualLink) {
|
||||
return;
|
||||
}
|
||||
const num = parseFloat(value);
|
||||
monthlyTurnover.setValue(!isNaN(num) && num >= 0 ? this.round2(num * 2) : '', { emitEvent: true });
|
||||
});
|
||||
}
|
||||
|
||||
if (annualIncome && annualTurnover) {
|
||||
annualIncome.valueChanges.subscribe((value) => {
|
||||
if (this.suppressMonthlyAnnualLink) {
|
||||
return;
|
||||
}
|
||||
const num = parseFloat(value);
|
||||
annualTurnover.setValue(!isNaN(num) && num >= 0 ? this.round2(num * 2) : '', { emitEvent: true });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1718,6 +1750,38 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
|
||||
return salutation ? `${salutation} ${full}` : full;
|
||||
}
|
||||
|
||||
/**
|
||||
* The name PAN and Aadhaar are actually matched against.
|
||||
*
|
||||
* Deliberately not {@link fullNamePreview}: that prefixes the salutation, while
|
||||
* ClientKycWritePlatformServiceJpaRepositoryImpl builds the verification name from firstname +
|
||||
* middlename + lastname only. Values are passed through untouched rather than capitalised, so what
|
||||
* the KYC step displays is exactly what goes to the provider.
|
||||
*/
|
||||
get verificationName(): string {
|
||||
return [
|
||||
this.createClientForm?.get('firstname')?.value,
|
||||
this.createClientForm?.get('middlename')?.value,
|
||||
this.createClientForm?.get('lastname')?.value
|
||||
]
|
||||
.map((part: any) => (part || '').toString().trim())
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
/** Date of birth as captured, sent to the provider formatted dd/MM/yyyy. */
|
||||
get verificationDateOfBirth(): Date | null {
|
||||
const value = this.createClientForm?.get('dateOfBirth')?.value;
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
if (value instanceof Date) {
|
||||
return value;
|
||||
}
|
||||
const parsed = new Date(value);
|
||||
return isNaN(parsed.getTime()) ? null : parsed;
|
||||
}
|
||||
|
||||
getSelectedGender(): any {
|
||||
const val = this.createClientForm.get('genderId')?.value;
|
||||
return this.genderOptions?.find((g: any) => g.id === val) || null;
|
||||
|
||||
+52
-14
@@ -38,10 +38,17 @@ import { ClientsService } from 'app/clients/clients.service';
|
||||
}
|
||||
</div>
|
||||
<p class="sanctions-msg">
|
||||
Screening <strong>{{ clientName }}</strong> against<br />
|
||||
<strong>UN Security Council</strong> &
|
||||
<strong>Financial Intelligence Unit - India (FIU-IND under UNSC Resolution 2231)</strong>
|
||||
Screening <strong>{{ clientName }}</strong> against the<br />
|
||||
<strong>UN Security Council Consolidated List</strong><br />
|
||||
<span class="sanctions-lists"
|
||||
>ISIL (Da’esh) & Al-Qaida (1267/1989/2253) and Taliban (1988) sanctions lists</span
|
||||
>
|
||||
</p>
|
||||
@if (listDataAsOf) {
|
||||
<p class="list-as-of">
|
||||
Sanctions list data as of <strong>{{ listDataAsOf }}</strong>
|
||||
</p>
|
||||
}
|
||||
<p class="regulatory-note">{{ regulatoryBasis }}</p>
|
||||
</div>
|
||||
}
|
||||
@@ -54,8 +61,8 @@ import { ClientsService } from 'app/clients/clients.service';
|
||||
<h3 class="approve-title">No Sanctions Match Found</h3>
|
||||
<p class="approve-detail">
|
||||
<strong>{{ clientName }}</strong> has been screened against the
|
||||
<strong>UN Security Council Consolidated List</strong> and <strong>FIU-IND</strong> records. No confirmed
|
||||
match was found.
|
||||
<strong>UN Security Council Consolidated List</strong> (ISIL & Al-Qaida and Taliban sanctions lists). No
|
||||
confirmed match was found.
|
||||
</p>
|
||||
<div class="approve-meta">
|
||||
<div class="meta-row">
|
||||
@@ -222,6 +229,20 @@ import { ClientsService } from 'app/clients/clients.service';
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-as-of {
|
||||
font-size: 12px;
|
||||
color: #374151;
|
||||
text-align: center;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.sanctions-lists {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.regulatory-note {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
@@ -550,16 +571,24 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
|
||||
screeningLogId: number | null = null;
|
||||
listDataAsOf: string | null = null;
|
||||
|
||||
/**
|
||||
* Cites the direction actually in force. Chapter IX ("Requirements/obligations under International
|
||||
* Agreements") is the clause that puts the UNSC lists in scope, and the 2025 Directions superseded
|
||||
* the older Master Direction this screen used to name.
|
||||
*/
|
||||
regulatoryBasis =
|
||||
'Screened as per Section 51-A of the Unlawful Activities (Prevention) Act, 1967 and the RBI Master Direction on KYC.';
|
||||
'Screened under Section 51-A of the Unlawful Activities (Prevention) Act, 1967 and Chapter IX of the ' +
|
||||
'RBI Know Your Customer Directions, 2025 (amended as on December 29, 2025).';
|
||||
|
||||
screenedDate = new Date().toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
|
||||
progressValue = 0;
|
||||
currentStep = 0;
|
||||
// Steps describe the screening that actually runs against the UNSC consolidated list; there is no
|
||||
// FIU-IND lookup behind this call, so it is no longer claimed here.
|
||||
progressSteps = [
|
||||
{ label: 'Connecting to UN Security Council database...', icon: 'globe' as any },
|
||||
{ label: 'Screening name against consolidated list...', icon: 'search' as any },
|
||||
{ label: 'Cross-checking FIU-IND records...', icon: 'database' as any },
|
||||
{ label: 'Cross-checking listed aliases and entities...', icon: 'database' as any },
|
||||
{ label: 'Analyzing results...', icon: 'chart-bar' as any }
|
||||
];
|
||||
|
||||
@@ -577,6 +606,9 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
|
||||
next: (result: any) => {
|
||||
this.apiResult = result;
|
||||
this.apiDone = true;
|
||||
// Surfaced while the screening is still running, so the operator can see which snapshot of
|
||||
// the UNSC list the check is being made against rather than only learning it afterwards.
|
||||
this.listDataAsOf = this.formatListDate(result?.listDataAsOf);
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.apiError = err;
|
||||
@@ -652,13 +684,7 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
|
||||
'Unable to connect to sanctions screening service.';
|
||||
} else {
|
||||
this.screeningLogId = this.apiResult?.screeningLogId || null;
|
||||
this.listDataAsOf = this.apiResult?.listDataAsOf
|
||||
? new Date(this.apiResult.listDataAsOf).toLocaleDateString('en-IN', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
})
|
||||
: null;
|
||||
this.listDataAsOf = this.formatListDate(this.apiResult?.listDataAsOf);
|
||||
if (this.apiResult?.matchFound) {
|
||||
this.matchFound = true;
|
||||
this.matchCount = this.apiResult.matchCount || 0;
|
||||
@@ -668,6 +694,18 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
|
||||
}, 400);
|
||||
}
|
||||
|
||||
/** Formats the date the UNSC snapshot was loaded; null when the backend did not report one. */
|
||||
private formatListDate(value: string | null | undefined): string | null {
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
const parsed = new Date(value);
|
||||
if (isNaN(parsed.getTime())) {
|
||||
return null;
|
||||
}
|
||||
return parsed.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
clearInterval(this.progressTimer);
|
||||
}
|
||||
|
||||
@@ -56,6 +56,42 @@
|
||||
}
|
||||
}
|
||||
|
||||
<!-- What PAN / Aadhaar are matched against. Shown before the officer clicks Verify, because
|
||||
the provider matches on exactly these two values and returns nothing identifiable when
|
||||
they disagree — a blind check that fails is much harder to act on than a visible one. -->
|
||||
@if (!isNonIndividual) {
|
||||
<div
|
||||
class="identity-basis full-width"
|
||||
[class.identity-basis--incomplete]="!verificationName || !verificationDateOfBirth"
|
||||
>
|
||||
<mat-icon class="identity-basis__icon">badge</mat-icon>
|
||||
<div class="identity-basis__body">
|
||||
<span class="identity-basis__legend">Documents are verified against the General tab</span>
|
||||
<div class="identity-basis__pairs">
|
||||
<span class="identity-basis__pair">
|
||||
<span class="identity-basis__k">Name</span>
|
||||
<span class="identity-basis__v">{{ verificationName || 'Not entered' }}</span>
|
||||
</span>
|
||||
<span class="identity-basis__pair">
|
||||
<span class="identity-basis__k">Date of Birth</span>
|
||||
<span class="identity-basis__v">
|
||||
{{ verificationDateOfBirth ? (verificationDateOfBirth | date: 'dd MMM yyyy') : 'Not entered' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@if (!verificationName || !verificationDateOfBirth) {
|
||||
<span class="identity-basis__warn">
|
||||
Both are required for PAN and Aadhaar verification — complete them on the General tab first.
|
||||
</span>
|
||||
} @else {
|
||||
<span class="identity-basis__hint">
|
||||
Must match the card exactly. Salutation is excluded; a mismatch in either fails verification.
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Individual PAN with inline verify -->
|
||||
@if (!isMinor && kycForm.get('hasPan')?.value) {
|
||||
<div class="form-field verify-field">
|
||||
@@ -105,8 +141,109 @@
|
||||
@if (panVerifyStatus === 'VERIFIED') {
|
||||
<span class="verify-chip verified"><fa-icon icon="check-circle"></fa-icon> Verified</span>
|
||||
}
|
||||
@if (panVerifyStatus !== 'VERIFIED' && panDeclarationTaken) {
|
||||
<span class="verify-chip declared"><fa-icon icon="file-signature"></fa-icon> Declaration</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (panVerifyStatus === 'VERIFIED') {
|
||||
<div
|
||||
class="pal-card full-width"
|
||||
[class.pal-card--ok]="panAadhaarSeedingStatus === 'Y'"
|
||||
[class.pal-card--fail]="panAadhaarSeedingStatus === 'N'"
|
||||
[class.pal-card--info]="panAadhaarSeedingStatus === 'E'"
|
||||
[class.pal-card--pending]="
|
||||
panAadhaarSeedingStatus !== 'Y' && panAadhaarSeedingStatus !== 'N' && panAadhaarSeedingStatus !== 'E'
|
||||
"
|
||||
style="margin-bottom: 16px"
|
||||
>
|
||||
<div class="pal-card__left">
|
||||
<div class="pal-card__icon">
|
||||
<mat-icon>credit_card</mat-icon>
|
||||
</div>
|
||||
<div class="pal-card__txt">
|
||||
<div class="pal-card__small">Verification Status</div>
|
||||
<div class="pal-card__title">PAN ↔ Aadhaar</div>
|
||||
<div class="pal-card__status">
|
||||
@if (panAadhaarSeedingStatus === 'Y') {
|
||||
<mat-icon>check_circle</mat-icon> Linked (Seeded)
|
||||
} @else if (panAadhaarSeedingStatus === 'N') {
|
||||
<mat-icon>cancel</mat-icon> Not Linked
|
||||
} @else if (panAadhaarSeedingStatus === 'E') {
|
||||
<mat-icon>info</mat-icon> Exempt
|
||||
} @else {
|
||||
<mat-icon>radio_button_unchecked</mat-icon> Pending
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pal-card__badge">
|
||||
@if (panAadhaarSeedingStatus === 'Y') {
|
||||
<mat-icon>check</mat-icon>
|
||||
} @else if (panAadhaarSeedingStatus === 'N') {
|
||||
<mat-icon>close</mat-icon>
|
||||
} @else if (panAadhaarSeedingStatus === 'E') {
|
||||
<mat-icon>info</mat-icon>
|
||||
} @else {
|
||||
<mat-icon>schedule</mat-icon>
|
||||
}
|
||||
</div>
|
||||
<div class="pal-card__hint">As per Income Tax Portal — Section 139AA</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!--
|
||||
PAN could not be verified but a declaration is on file. Shown in full because it is the
|
||||
only thing standing between this client and a PAN KYC exception — an officer reviewing
|
||||
the record has to be able to see what was declared, not just that something was.
|
||||
-->
|
||||
@if (panVerifyStatus !== 'VERIFIED' && panDeclarationTaken) {
|
||||
<div class="pan-decl-card">
|
||||
<div class="pan-decl-card__head">
|
||||
<mat-icon class="pan-decl-card__icon">assignment_turned_in</mat-icon>
|
||||
<span class="pan-decl-card__title">PAN Declaration Taken</span>
|
||||
@if (panDeclarationTakenOn) {
|
||||
<span class="pan-decl-card__date">{{ panDeclarationTakenOn }}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="pan-decl-card__rows">
|
||||
<div class="pan-decl-card__row">
|
||||
<span class="k">Does not match</span>
|
||||
<span class="v strong">{{ panDeclarationMismatchLabel }}</span>
|
||||
</div>
|
||||
@if (panDeclaration?.nameOnPan) {
|
||||
<div class="pan-decl-card__row">
|
||||
<span class="k">Name on PAN</span>
|
||||
<span class="v">{{ panDeclaration?.nameOnPan }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (panDeclaration?.dobOnPan) {
|
||||
<div class="pan-decl-card__row">
|
||||
<span class="k">DOB on PAN</span>
|
||||
<span class="v">{{ panDeclaration?.dobOnPan | date: 'dd MMMM yyyy' }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (panDeclaration?.fileName) {
|
||||
<div class="pan-decl-card__row">
|
||||
<span class="k">Declaration file</span>
|
||||
<span class="v">{{ panDeclaration?.fileName }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="pan-decl-card__note">
|
||||
PAN remains unverified. No KYC exception is raised for PAN while this declaration is on file.
|
||||
</div>
|
||||
@if (!readOnly) {
|
||||
<div class="pan-decl-card__actions">
|
||||
<button mat-stroked-button type="button" (click)="openPanDeclaration()">Edit Declaration</button>
|
||||
<button mat-stroked-button type="button" class="danger" (click)="removePanDeclaration()">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<!-- Aadhaar with independent verify (Individual only) -->
|
||||
@@ -175,9 +312,68 @@
|
||||
@if (aadhaarVerifyStatus === 'VERIFIED') {
|
||||
<span class="verify-chip verified"><fa-icon icon="check-circle"></fa-icon> Verified</span>
|
||||
}
|
||||
@if (aadhaarVerifyStatus !== 'VERIFIED' && aadhaarReceiptTaken) {
|
||||
<span class="verify-chip declared"><fa-icon icon="receipt"></fa-icon> Receipt</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
A customer who has applied for Aadhaar but not received it has no number to verify, so no
|
||||
amount of retrying the OTP will clear the check. Offer the enrolment slip instead rather
|
||||
than leaving the officer unable to finish the client.
|
||||
-->
|
||||
@if (aadhaarVerifyStatus !== 'VERIFIED' && !aadhaarReceiptTaken && !aadhaarOtpSent && !readOnly) {
|
||||
<div class="aad-rcpt-offer full-width">
|
||||
<mat-icon>receipt_long</mat-icon>
|
||||
<span>Customer has applied for Aadhaar but not received it yet?</span>
|
||||
<button mat-stroked-button type="button" (click)="openAadhaarReceipt()">Record Enrolment Receipt</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!--
|
||||
Aadhaar is unverified but an enrolment receipt is on file. Shown in full because it is the
|
||||
only thing standing between this client and an Aadhaar KYC exception.
|
||||
-->
|
||||
@if (aadhaarVerifyStatus !== 'VERIFIED' && aadhaarReceiptTaken) {
|
||||
<div class="aad-rcpt-card full-width">
|
||||
<div class="aad-rcpt-card__head">
|
||||
<mat-icon class="aad-rcpt-card__icon">receipt_long</mat-icon>
|
||||
<span class="aad-rcpt-card__title">Aadhaar Enrolment Receipt Recorded</span>
|
||||
@if (aadhaarReceiptTakenOn) {
|
||||
<span class="aad-rcpt-card__date">{{ aadhaarReceiptTakenOn }}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="aad-rcpt-card__rows">
|
||||
<div class="aad-rcpt-card__row">
|
||||
<span class="k">Enrolment ID</span>
|
||||
<span class="v mono">{{ aadhaarReceipt?.enrolmentId }}</span>
|
||||
</div>
|
||||
@if (aadhaarReceipt?.enrolmentDate) {
|
||||
<div class="aad-rcpt-card__row">
|
||||
<span class="k">Enrolment date</span>
|
||||
<span class="v">{{ aadhaarReceipt?.enrolmentDate | date: 'dd MMMM yyyy' }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (aadhaarReceipt?.remarks) {
|
||||
<div class="aad-rcpt-card__row">
|
||||
<span class="k">Remarks</span>
|
||||
<span class="v">{{ aadhaarReceipt?.remarks }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="aad-rcpt-card__note">
|
||||
Aadhaar remains unverified. No KYC exception is raised for Aadhaar while this receipt is on file.
|
||||
</div>
|
||||
@if (!readOnly) {
|
||||
<div class="aad-rcpt-card__actions">
|
||||
<button mat-stroked-button type="button" (click)="openAadhaarReceipt()">Edit Receipt</button>
|
||||
<button mat-stroked-button type="button" class="danger" (click)="removeAadhaarReceipt()">Remove</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Aadhaar OTP Section -->
|
||||
@if (aadhaarOtpSent && aadhaarVerifyStatus !== 'VERIFIED') {
|
||||
<div class="otp-card full-width">
|
||||
@@ -723,6 +919,55 @@
|
||||
<span>PAN verification requires client to be created first. Complete General tab and click Next to save.</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- KYC Exception Flag -->
|
||||
@if (!kycAllDone) {
|
||||
<div
|
||||
class="exception-flag-box"
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #f59e0b;
|
||||
background: #fffbeb;
|
||||
border-radius: 8px;
|
||||
clear: both;
|
||||
"
|
||||
>
|
||||
<h5
|
||||
style="
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #b45309;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<fa-icon icon="exclamation-triangle"></fa-icon>
|
||||
KYC Exception Flag
|
||||
</h5>
|
||||
<div style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap">
|
||||
<mat-checkbox formControlName="isException">Mark as KYC Exception</mat-checkbox>
|
||||
|
||||
@if (kycForm.get('isException')?.value) {
|
||||
<mat-form-field appearance="outline" style="flex: 1; min-width: 280px; margin-bottom: -1.25em">
|
||||
<mat-label>Exception Reasons</mat-label>
|
||||
<mat-select formControlName="exceptionReason" multiple>
|
||||
@if (!isNonIndividual) {
|
||||
<mat-option value="PAN Card Verification Failed">PAN Card Verification Failed</mat-option>
|
||||
<mat-option value="Aadhaar Verification Failed">Aadhaar Verification Failed</mat-option>
|
||||
} @else {
|
||||
<mat-option value="Enterprise PAN Verification Failed">Enterprise PAN Verification Failed</mat-option>
|
||||
<mat-option value="GSTIN Verification Failed">GSTIN Verification Failed</mat-option>
|
||||
<mat-option value="CIN Verification Failed">CIN Verification Failed</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- ═══ SECTION: KYC Document Management ═══ -->
|
||||
@@ -800,19 +1045,23 @@
|
||||
<!-- Existing saved ID-proof doc — locked by default. Replace flow
|
||||
unlocks automatically when the section-level Edit button toggles
|
||||
`readOnly` off. -->
|
||||
@if (existingKycDocuments.length > 0 && !kycDocFiles.front && readOnly) {
|
||||
@if (existingKycDocSides.front && !kycDocFiles.front && readOnly) {
|
||||
<div class="kyc-doc-dropzone kyc-doc-dropzone--has kyc-doc-dropzone--locked">
|
||||
<div class="kyc-doc-dropzone__existing">
|
||||
@if (kycDocMergedPreview) {
|
||||
<img [src]="kycDocMergedPreview" alt="Saved KYC document" class="kyc-doc-dropzone__thumb" />
|
||||
@if (existingKycDocSides.front?.previewUrl) {
|
||||
<img
|
||||
[src]="existingKycDocSides.front?.previewUrl"
|
||||
alt="Saved front side"
|
||||
class="kyc-doc-dropzone__thumb"
|
||||
/>
|
||||
} @else {
|
||||
<mat-icon class="kyc-doc-dropzone__doc-ic">description</mat-icon>
|
||||
}
|
||||
<div class="kyc-doc-dropzone__existing-meta">
|
||||
<span class="kyc-doc-dropzone__existing-name">
|
||||
{{ existingKycDocuments[0].fileName || existingKycDocuments[0].name }}
|
||||
{{ existingKycDocSides.front?.fileName }}
|
||||
</span>
|
||||
<button type="button" class="kyc-doc-dropzone__view" (click)="viewExistingKycDoc()">
|
||||
<button type="button" class="kyc-doc-dropzone__view" (click)="viewExistingKycDoc('front')">
|
||||
<mat-icon>visibility</mat-icon>
|
||||
Click here to view
|
||||
</button>
|
||||
@@ -822,8 +1071,8 @@
|
||||
} @else {
|
||||
<label
|
||||
class="kyc-doc-dropzone"
|
||||
[class.kyc-doc-dropzone--has]="kycDocFiles.front || existingKycDocuments.length > 0"
|
||||
[class.kyc-doc-dropzone--req]="!kycDocFiles.front && existingKycDocuments.length === 0"
|
||||
[class.kyc-doc-dropzone--has]="kycDocFiles.front || existingKycDocSides.front"
|
||||
[class.kyc-doc-dropzone--req]="!kycDocFiles.front && !existingKycDocSides.front"
|
||||
>
|
||||
<input type="file" accept=".jpg,.jpeg,.png,.pdf" hidden (change)="onKycDocFile($event, 'front')" />
|
||||
@if (kycDocFiles.front) {
|
||||
@@ -839,24 +1088,28 @@
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
} @else if (existingKycDocuments.length > 0) {
|
||||
} @else if (existingKycDocSides.front) {
|
||||
<!-- Edit mode WITH existing doc — let the user view it OR
|
||||
click anywhere to replace. -->
|
||||
<div class="kyc-doc-dropzone__existing">
|
||||
@if (kycDocMergedPreview) {
|
||||
<img [src]="kycDocMergedPreview" alt="Saved KYC document" class="kyc-doc-dropzone__thumb" />
|
||||
@if (existingKycDocSides.front?.previewUrl) {
|
||||
<img
|
||||
[src]="existingKycDocSides.front?.previewUrl"
|
||||
alt="Saved front side"
|
||||
class="kyc-doc-dropzone__thumb"
|
||||
/>
|
||||
} @else {
|
||||
<mat-icon class="kyc-doc-dropzone__doc-ic">description</mat-icon>
|
||||
}
|
||||
<div class="kyc-doc-dropzone__existing-meta">
|
||||
<span class="kyc-doc-dropzone__existing-name">
|
||||
{{ existingKycDocuments[0].fileName || existingKycDocuments[0].name }}
|
||||
{{ existingKycDocSides.front?.fileName }}
|
||||
</span>
|
||||
<div class="kyc-doc-dropzone__existing-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="kyc-doc-dropzone__view"
|
||||
(click)="$event.preventDefault(); $event.stopPropagation(); viewExistingKycDoc()"
|
||||
(click)="$event.preventDefault(); $event.stopPropagation(); viewExistingKycDoc('front')"
|
||||
>
|
||||
<mat-icon>visibility</mat-icon>
|
||||
View
|
||||
@@ -883,25 +1136,45 @@
|
||||
<div class="kyc-doc-upload-slot">
|
||||
<div class="kyc-doc-upload-head">
|
||||
<span class="kyc-doc-upload-title"> <mat-icon>image</mat-icon> Back side </span>
|
||||
<!-- Hide Required pill when saved combined doc covers both sides -->
|
||||
@if (!(existingKycDocuments.length > 0 && !kycDocFiles.back)) {
|
||||
<!-- Hide Required pill when a back scan (or a stacked scan holding it) is on file -->
|
||||
@if (!((existingKycDocSides.back || kycDocIsLegacyCombined) && !kycDocFiles.back)) {
|
||||
<span class="kyc-doc-upload-req">Required</span>
|
||||
}
|
||||
</div>
|
||||
<!-- Locked view: saved combined doc covers the back side too. -->
|
||||
@if (existingKycDocuments.length > 0 && !kycDocFiles.back && readOnly) {
|
||||
<!--
|
||||
A stacked scan that could not be cut in two has no separate back image. Say so rather
|
||||
than repeating the front slot's picture here.
|
||||
-->
|
||||
@if (kycDocIsLegacyCombined && !kycDocFiles.back) {
|
||||
<div class="kyc-doc-dropzone kyc-doc-dropzone--has kyc-doc-dropzone--locked">
|
||||
<div class="kyc-doc-dropzone__existing">
|
||||
@if (kycDocMergedPreview) {
|
||||
<img [src]="kycDocMergedPreview" alt="Saved KYC document" class="kyc-doc-dropzone__thumb" />
|
||||
<mat-icon class="kyc-doc-dropzone__doc-ic">filter_none</mat-icon>
|
||||
<div class="kyc-doc-dropzone__existing-meta">
|
||||
<span class="kyc-doc-dropzone__existing-name">Included in the combined scan</span>
|
||||
<button type="button" class="kyc-doc-dropzone__view" (click)="viewExistingKycDoc('front')">
|
||||
<mat-icon>visibility</mat-icon>
|
||||
View both sides
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} @else if (existingKycDocSides.back && !kycDocFiles.back && readOnly) {
|
||||
<div class="kyc-doc-dropzone kyc-doc-dropzone--has kyc-doc-dropzone--locked">
|
||||
<div class="kyc-doc-dropzone__existing">
|
||||
@if (existingKycDocSides.back?.previewUrl) {
|
||||
<img
|
||||
[src]="existingKycDocSides.back?.previewUrl"
|
||||
alt="Saved back side"
|
||||
class="kyc-doc-dropzone__thumb"
|
||||
/>
|
||||
} @else {
|
||||
<mat-icon class="kyc-doc-dropzone__doc-ic">description</mat-icon>
|
||||
}
|
||||
<div class="kyc-doc-dropzone__existing-meta">
|
||||
<span class="kyc-doc-dropzone__existing-name">
|
||||
{{ existingKycDocuments[0].fileName || existingKycDocuments[0].name }}
|
||||
{{ existingKycDocSides.back?.fileName }}
|
||||
</span>
|
||||
<button type="button" class="kyc-doc-dropzone__view" (click)="viewExistingKycDoc()">
|
||||
<button type="button" class="kyc-doc-dropzone__view" (click)="viewExistingKycDoc('back')">
|
||||
<mat-icon>visibility</mat-icon>
|
||||
Click here to view
|
||||
</button>
|
||||
@@ -911,8 +1184,8 @@
|
||||
} @else {
|
||||
<label
|
||||
class="kyc-doc-dropzone"
|
||||
[class.kyc-doc-dropzone--has]="kycDocFiles.back || existingKycDocuments.length > 0"
|
||||
[class.kyc-doc-dropzone--req]="!kycDocFiles.back && existingKycDocuments.length === 0"
|
||||
[class.kyc-doc-dropzone--has]="kycDocFiles.back || existingKycDocSides.back"
|
||||
[class.kyc-doc-dropzone--req]="!kycDocFiles.back && !existingKycDocSides.back"
|
||||
>
|
||||
<input type="file" accept=".jpg,.jpeg,.png,.pdf" hidden (change)="onKycDocFile($event, 'back')" />
|
||||
@if (kycDocFiles.back) {
|
||||
@@ -928,23 +1201,27 @@
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
} @else if (existingKycDocuments.length > 0) {
|
||||
<!-- Edit mode WITH existing combined doc — view + replace. -->
|
||||
} @else if (existingKycDocSides.back) {
|
||||
<!-- Edit mode WITH an existing back scan — view + replace. -->
|
||||
<div class="kyc-doc-dropzone__existing">
|
||||
@if (kycDocMergedPreview) {
|
||||
<img [src]="kycDocMergedPreview" alt="Saved KYC document" class="kyc-doc-dropzone__thumb" />
|
||||
@if (existingKycDocSides.back?.previewUrl) {
|
||||
<img
|
||||
[src]="existingKycDocSides.back?.previewUrl"
|
||||
alt="Saved back side"
|
||||
class="kyc-doc-dropzone__thumb"
|
||||
/>
|
||||
} @else {
|
||||
<mat-icon class="kyc-doc-dropzone__doc-ic">description</mat-icon>
|
||||
}
|
||||
<div class="kyc-doc-dropzone__existing-meta">
|
||||
<span class="kyc-doc-dropzone__existing-name">
|
||||
{{ existingKycDocuments[0].fileName || existingKycDocuments[0].name }}
|
||||
{{ existingKycDocSides.back?.fileName }}
|
||||
</span>
|
||||
<div class="kyc-doc-dropzone__existing-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="kyc-doc-dropzone__view"
|
||||
(click)="$event.preventDefault(); $event.stopPropagation(); viewExistingKycDoc()"
|
||||
(click)="$event.preventDefault(); $event.stopPropagation(); viewExistingKycDoc('back')"
|
||||
>
|
||||
<mat-icon>visibility</mat-icon>
|
||||
View
|
||||
@@ -980,7 +1257,9 @@
|
||||
<mat-icon>filter_none</mat-icon>
|
||||
Combined preview (front + back)
|
||||
</span>
|
||||
<span class="kyc-merged__hint">Saved as a single PNG. Re-crop a side to update the merged file.</span>
|
||||
<span class="kyc-merged__hint">
|
||||
Preview only — each side is saved as its own file. Re-crop a side to update it.
|
||||
</span>
|
||||
</div>
|
||||
<div class="kyc-merged__preview">
|
||||
<img [src]="kycDocMergedPreview" alt="Merged KYC document" />
|
||||
@@ -1150,27 +1429,36 @@
|
||||
</div>
|
||||
}
|
||||
|
||||
<mat-form-field appearance="outline" class="form-field full-width">
|
||||
<mat-label>{{ isKycVerified ? 'Reason for Re-edit *' : 'Remarks' }}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
formControlName="remarks"
|
||||
rows="2"
|
||||
[placeholder]="isKycVerified ? 'Mandatory — explain why KYC is being re-edited' : ''"
|
||||
></textarea>
|
||||
@if (isKycVerified && !kycForm.get('remarks')?.value?.trim()) {
|
||||
<mat-error>Remarks are mandatory when updating a verified KYC record</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
@if (isKycVerified) {
|
||||
<div class="kyc-reedit-alert">
|
||||
<mat-icon class="kyc-reedit-alert__icon">info</mat-icon>
|
||||
<span
|
||||
>KYC is <strong>VERIFIED</strong>. Any update will reset the status to <strong>IN PROGRESS</strong> and
|
||||
require PAN re-verification.</span
|
||||
>
|
||||
</div>
|
||||
@if (kycForm.get('allowRiskOverride')?.value || isKycVerified) {
|
||||
<mat-form-field appearance="outline" class="form-field full-width">
|
||||
<mat-label>
|
||||
{{
|
||||
isKycVerified
|
||||
? 'Reason for Re-edit'
|
||||
: kycForm.get('allowRiskOverride')?.value
|
||||
? 'Remarks (Required for Risk Override)'
|
||||
: 'Remarks'
|
||||
}}
|
||||
</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
formControlName="remarks"
|
||||
rows="2"
|
||||
[placeholder]="
|
||||
isKycVerified
|
||||
? 'Mandatory — explain why KYC is being re-edited'
|
||||
: kycForm.get('allowRiskOverride')?.value
|
||||
? 'Mandatory — explain why you are overriding the auto-calculated risk category'
|
||||
: ''
|
||||
"
|
||||
></textarea>
|
||||
@if ((isKycVerified || kycForm.get('allowRiskOverride')?.value) && !kycForm.get('remarks')?.value?.trim()) {
|
||||
<mat-error>
|
||||
Remarks are mandatory when
|
||||
{{ isKycVerified ? 'updating a verified KYC record' : 'overriding the risk category' }}
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -1346,6 +1634,39 @@
|
||||
<mat-option value="REGULATORY">Regulatory Authority</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="form-field" (click)="freezeDatePicker.open()">
|
||||
<mat-label>Freeze Date</mat-label>
|
||||
<span matPrefix class="field-prefix-icon"><mat-icon>calendar_today</mat-icon></span>
|
||||
<input matInput required [max]="today" [matDatepicker]="freezeDatePicker" formControlName="freezeDate" />
|
||||
<mat-datepicker-toggle matSuffix [for]="freezeDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #freezeDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="form-field">
|
||||
<mat-label>Freeze Amount</mat-label>
|
||||
<span matPrefix class="field-prefix-icon"><mat-icon>currency_rupee</mat-icon></span>
|
||||
<input matInput type="number" min="0" formControlName="freezeAmount" />
|
||||
<mat-hint>Leave blank for a full freeze</mat-hint>
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (kycForm.get('accountStatus')?.value === 'UNFREEZE') {
|
||||
<mat-form-field appearance="outline" class="form-field" (click)="unfreezeDatePicker.open()">
|
||||
<mat-label>Unfreeze Date</mat-label>
|
||||
<span matPrefix class="field-prefix-icon"><mat-icon>lock_open</mat-icon></span>
|
||||
<input matInput required [max]="today" [matDatepicker]="unfreezeDatePicker" formControlName="unfreezeDate" />
|
||||
<mat-datepicker-toggle matSuffix [for]="unfreezeDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #unfreezeDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (kycForm.get('accountStatus')?.value === 'NO_DEBIT') {
|
||||
<mat-form-field appearance="outline" class="form-field" (click)="noDebitDatePicker.open()">
|
||||
<mat-label>No Debit From Date</mat-label>
|
||||
<span matPrefix class="field-prefix-icon"><mat-icon>money_off</mat-icon></span>
|
||||
<input matInput required [matDatepicker]="noDebitDatePicker" formControlName="noDebitDate" />
|
||||
<mat-datepicker-toggle matSuffix [for]="noDebitDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #noDebitDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1498,4 +1819,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Validation Summary -->
|
||||
@if (kycForm && kycForm.invalid) {
|
||||
<div
|
||||
class="kyc-validation-summary"
|
||||
style="
|
||||
margin-top: 24px;
|
||||
padding: 16px;
|
||||
background: #fff5f5;
|
||||
border: 1px solid #fee2e2;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
clear: both;
|
||||
"
|
||||
>
|
||||
<mat-icon style="color: #ef4444; flex-shrink: 0">error_outline</mat-icon>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px">
|
||||
<span style="font-size: 14px; font-weight: 600; color: #991b1b"
|
||||
>Please complete/correct the following fields to proceed:</span
|
||||
>
|
||||
<ul style="margin: 4px 0 0 16px; padding: 0; font-size: 13px; color: #b91c1c; line-height: 1.5">
|
||||
@for (label of invalidFieldLabels; track label) {
|
||||
<li>{{ label }}</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -60,6 +60,7 @@ import { ClientCollateralResolver } from './common-resolvers/client-collateral.r
|
||||
import { KycTabComponent } from './clients-view/kyc-tab/kyc-tab.component';
|
||||
import { CkycTabComponent } from './clients-view/ckyc-tab/ckyc-tab.component';
|
||||
import { Form60TabComponent } from './clients-view/form60-tab/form60-tab.component';
|
||||
import { Form121TabComponent } from './clients-view/form121-tab/form121-tab.component';
|
||||
import { EntityClassificationTabComponent } from './clients-view/entity-classification-tab/entity-classification-tab.component';
|
||||
import { familyAllowedGuard, nomineeAllowedGuard } from './utils/family-nominee.guard';
|
||||
|
||||
@@ -193,6 +194,11 @@ const routes: Routes = [
|
||||
component: Form60TabComponent,
|
||||
data: { title: 'Form 97', breadcrumb: 'Form 97', routeParamBreadcrumb: false }
|
||||
},
|
||||
{
|
||||
path: 'form121',
|
||||
component: Form121TabComponent,
|
||||
data: { title: 'Form 121 / TDS', breadcrumb: 'Form 121 / TDS', routeParamBreadcrumb: false }
|
||||
},
|
||||
{
|
||||
path: 'documents',
|
||||
component: DocumentsTabComponent,
|
||||
|
||||
@@ -545,6 +545,15 @@
|
||||
>
|
||||
<i class="fa fa-file-text cv-tab-icon"></i> {{ 'labels.inputs.Form 60' | translate }}
|
||||
</a>
|
||||
<a
|
||||
mat-tab-link
|
||||
[routerLink]="['./form121']"
|
||||
routerLinkActive
|
||||
#form121="routerLinkActive"
|
||||
[active]="form121.isActive"
|
||||
>
|
||||
<i class="fa fa-percent cv-tab-icon"></i> Form 121 / TDS
|
||||
</a>
|
||||
<a
|
||||
mat-tab-link
|
||||
[routerLink]="['./documents']"
|
||||
|
||||
@@ -0,0 +1,428 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="f121">
|
||||
@if (loading) {
|
||||
<div class="f121__loading">
|
||||
<mat-spinner [diameter]="36"></mat-spinner>
|
||||
<span>Reading the customer's deposit ledger…</span>
|
||||
</div>
|
||||
} @else if (loadError) {
|
||||
<div class="f121__note f121__note--warn">
|
||||
<mat-icon>error_outline</mat-icon>
|
||||
<div>Could not load the customer's accounts. Try again, or check the deposit service.</div>
|
||||
</div>
|
||||
} @else {
|
||||
<!-- ── Header ── -->
|
||||
<div class="f121__head">
|
||||
<div>
|
||||
<h3 class="f121__title">Form 121 & TDS on deposit interest</h3>
|
||||
<div class="f121__sub">
|
||||
Tax deducted at source under {{ statute.section }} on fixed and recurring deposit interest.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="f121__controls">
|
||||
@if (availableFys.length) {
|
||||
<label class="f121__field">
|
||||
<span>Financial year</span>
|
||||
<select [(ngModel)]="fy" (ngModelChange)="recompute()">
|
||||
@for (year of availableFys; track year) {
|
||||
<option [value]="year">FY {{ year }}</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
}
|
||||
<div class="f121__field">
|
||||
<span>Settlement</span>
|
||||
<div
|
||||
class="f121__mode"
|
||||
[matTooltip]="'Set by the deposit product\'s interest-posting frequency: tax falls due when interest is credited, so the branch cannot defer it. Not a customer preference.'"
|
||||
>
|
||||
<mat-icon>schedule</mat-icon>
|
||||
{{ mode === 'QUARTERLY' ? 'Quarterly' : 'At year end' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!schedule) {
|
||||
<div class="f121__note">
|
||||
<mat-icon>info_outline</mat-icon>
|
||||
<div>
|
||||
@if (!dateOfBirth) {
|
||||
Date of birth is not on record, so the senior-citizen threshold cannot be determined. Add it on the Personal
|
||||
Data tab.
|
||||
} @else {
|
||||
No interest has been credited to this customer's deposits yet.
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<!-- ── KPI strip ── -->
|
||||
<div class="f121__kpis">
|
||||
<div class="f121__kpi">
|
||||
<div class="f121__kpi-n">₹{{ schedule.totalInterest | number: '1.0-0' }}</div>
|
||||
<div class="f121__kpi-l">Interest earned (FY {{ schedule.fy }})</div>
|
||||
</div>
|
||||
<div class="f121__kpi" [class.f121__kpi--warn]="actualTds > 0">
|
||||
<div class="f121__kpi-n">₹{{ actualTds | number: '1.0-0' }}</div>
|
||||
<div class="f121__kpi-l">TDS deducted</div>
|
||||
</div>
|
||||
<div class="f121__kpi">
|
||||
<div class="f121__kpi-n">₹{{ schedule.threshold | number: '1.0-0' }}</div>
|
||||
<div class="f121__kpi-l">Threshold ({{ schedule.senior ? 'senior citizen' : 'general' }})</div>
|
||||
</div>
|
||||
@if (thresholdCrossed) {
|
||||
<div class="f121__kpi f121__kpi--warn">
|
||||
<div class="f121__kpi-n">Crossed</div>
|
||||
<div class="f121__kpi-l">TDS applies this year</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="f121__kpi f121__kpi--ok">
|
||||
<div class="f121__kpi-n">₹{{ headroom | number: '1.0-0' }}</div>
|
||||
<div class="f121__kpi-l">More interest before TDS starts</div>
|
||||
</div>
|
||||
}
|
||||
@if (tdsSaved > 0) {
|
||||
<div class="f121__kpi f121__kpi--ok">
|
||||
<div class="f121__kpi-n">₹{{ tdsSaved | number: '1.0-0' }}</div>
|
||||
<div class="f121__kpi-l">Saved by Form 121</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- ── Alerts ── -->
|
||||
@if (variance !== 0) {
|
||||
<div class="f121__note f121__note--warn">
|
||||
<mat-icon>warning_amber</mat-icon>
|
||||
<div>
|
||||
<strong>Ledger and computed tax differ by ₹{{ variance | number: '1.0-0' }}.</strong>
|
||||
The ledger shows ₹{{ actualTds | number: '1.0-0' }} withheld; {{ statute.section }} on this year's interest
|
||||
comes to ₹{{ schedule.totalTds | number: '1.0-0' }}. Investigate before the quarterly return is filed.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (declarationNotAppliedToAccounts) {
|
||||
<div class="f121__note f121__note--warn">
|
||||
<mat-icon>warning_amber</mat-icon>
|
||||
<div>
|
||||
A Form 121 declaration is on record for this year, but withholding is still switched on for one or more
|
||||
deposits. Turn it off on those accounts, or tax will keep being deducted.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (declarationUselessOnJointAccounts) {
|
||||
<div class="f121__note f121__note--warn">
|
||||
<mat-icon>warning_amber</mat-icon>
|
||||
<div>
|
||||
This customer has filed Form 121, but tax on
|
||||
{{ jointHolderAccounts.length }} joint deposit{{ jointHolderAccounts.length === 1 ? '' : 's' }} is deducted
|
||||
against the first-named holder. Their declaration does not cover those — the primary holder must file their
|
||||
own.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (shouldSuggestDeclaration) {
|
||||
<div class="f121__note f121__note--tip">
|
||||
<mat-icon>lightbulb_outline</mat-icon>
|
||||
<div>
|
||||
₹{{ schedule.totalTds | number: '1.0-0' }} of tax falls due this year. If the customer's total tax liability
|
||||
for the year is nil, a {{ formLabel }} declaration would stop it being deducted at all — better than
|
||||
reclaiming it later as a refund.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!panWellFormed) {
|
||||
<div class="f121__note f121__note--warn">
|
||||
<mat-icon>error_outline</mat-icon>
|
||||
<div>
|
||||
No valid PAN on record, so tax is deducted at the higher section 206AA rate of
|
||||
{{ schedule.rateApplied * 100 | number: '1.0-0' }}%. A Form 121 declaration is void without a valid PAN.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@for (note of schedule.notes; track note) {
|
||||
<div class="f121__note">
|
||||
<mat-icon>info_outline</mat-icon>
|
||||
<div>{{ note }}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- ── Declaration panel ── -->
|
||||
<div class="f121__card">
|
||||
<div class="f121__card-head">
|
||||
<mat-icon>assignment_turned_in</mat-icon>
|
||||
<span>Declaration</span>
|
||||
</div>
|
||||
<div class="f121__kv">
|
||||
<div class="f121__kv-row">
|
||||
<span>Status</span>
|
||||
<span>
|
||||
@if (declarationOnRecord) {
|
||||
<span class="f121__pill f121__pill--ok">On record — {{ formLabel }}</span>
|
||||
} @else {
|
||||
<span class="f121__pill">Not filed</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div class="f121__kv-row">
|
||||
<span>Form & threshold band</span>
|
||||
<span>{{ formLabel }} · {{ bandLabel }} band · {{ age }} yrs in this FY</span>
|
||||
</div>
|
||||
<div class="f121__kv-row">
|
||||
<span>PAN</span>
|
||||
<span class="f121__mono">
|
||||
{{ pan || '—' }}
|
||||
@if (pan && !panWellFormed) {
|
||||
<span class="f121__pill f121__pill--warn">invalid</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
@if (declarationOnRecord && declarationFy) {
|
||||
<div class="f121__kv-row">
|
||||
<span>Declared for</span>
|
||||
<span>FY {{ declarationFy }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (declarationOnRecord && !acceptanceDateKnown) {
|
||||
<div class="f121__kv-row f121__kv-row--muted">
|
||||
<span>Acceptance date</span>
|
||||
<span>
|
||||
Not captured — the declaration is treated as covering the whole year. A mid-year acceptance would change
|
||||
the figures below.
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
@if (eligibility) {
|
||||
@for (reason of eligibility.reasons; track reason) {
|
||||
<div class="f121__kv-row f121__kv-row--warn">
|
||||
<span>Eligibility</span>
|
||||
<span>{{ reason }}</span>
|
||||
</div>
|
||||
}
|
||||
@for (note of eligibility.unassessed; track note) {
|
||||
<div class="f121__kv-row f121__kv-row--muted">
|
||||
<span>Not assessed</span>
|
||||
<span>{{ note }}</span>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Quarter-wise ── -->
|
||||
<div class="f121__card">
|
||||
<div class="f121__card-head">
|
||||
<mat-icon>table_chart</mat-icon>
|
||||
<span>Quarter by quarter</span>
|
||||
</div>
|
||||
<div class="f121__table-wrap">
|
||||
<table class="f121__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Quarter</th>
|
||||
<th class="num">Interest</th>
|
||||
<th class="num">Cumulative</th>
|
||||
<th class="num">Liability to date</th>
|
||||
<th class="num">TDS this quarter</th>
|
||||
<th>Return due</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (line of schedule.lines; track trackLine($index, line)) {
|
||||
<tr [class.f121__row--warn]="line.thresholdCrossedHere">
|
||||
<td>
|
||||
{{ line.label }}
|
||||
@if (line.thresholdCrossedHere) {
|
||||
<span class="f121__pill f121__pill--warn">threshold crossed</span>
|
||||
}
|
||||
@if (line.declarationActive) {
|
||||
<span class="f121__pill f121__pill--ok">Form 121 active</span>
|
||||
}
|
||||
</td>
|
||||
<td class="num">₹{{ line.interest | number: '1.0-0' }}</td>
|
||||
<td class="num">₹{{ line.cumInterest | number: '1.0-0' }}</td>
|
||||
<td class="num">₹{{ line.cumLiability | number: '1.0-0' }}</td>
|
||||
<td class="num">
|
||||
@if (line.tds !== 0) {
|
||||
<strong>₹{{ line.tds | number: '1.0-0' }}</strong>
|
||||
} @else {
|
||||
<span class="muted">—</span>
|
||||
}
|
||||
</td>
|
||||
<td class="muted">{{ line.dueDate }}</td>
|
||||
</tr>
|
||||
}
|
||||
<tr class="f121__row--total">
|
||||
<td><strong>Total</strong></td>
|
||||
<td class="num">
|
||||
<strong>₹{{ schedule.totalInterest | number: '1.0-0' }}</strong>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="num">
|
||||
<strong>₹{{ schedule.totalTds | number: '1.0-0' }}</strong>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@if (schedule.shieldedInterest > 0) {
|
||||
<div class="f121__foot">
|
||||
₹{{ schedule.shieldedInterest | number: '1.0-0' }} was paid without deduction on the strength of the
|
||||
declaration. This amount is still reportable in the quarterly {{ statute.statement }} return.
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- ── Section 1: accounts that count ── -->
|
||||
<div class="f121__card">
|
||||
<div class="f121__card-head">
|
||||
<mat-icon>account_balance</mat-icon>
|
||||
<span>Deposits counted towards this customer's TDS</span>
|
||||
</div>
|
||||
@if (liableAccounts.length) {
|
||||
<div class="f121__table-wrap">
|
||||
<table class="f121__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account</th>
|
||||
<th>Type</th>
|
||||
<th class="num">Interest (FY)</th>
|
||||
<th class="num">TDS deducted</th>
|
||||
<th>Withholding</th>
|
||||
<th>Settles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (a of liableAccounts; track trackAccount($index, a)) {
|
||||
<tr>
|
||||
<td>
|
||||
<div class="f121__mono">{{ a.accountNo }}</div>
|
||||
<div class="muted">{{ a.productName }}</div>
|
||||
</td>
|
||||
<td>{{ a.kind }}</td>
|
||||
<td class="num">₹{{ a.interest | number: '1.0-0' }}</td>
|
||||
<td class="num">₹{{ a.tdsDeducted | number: '1.0-0' }}</td>
|
||||
<td>
|
||||
@if (a.withHoldTax) {
|
||||
<span class="f121__pill f121__pill--warn">On</span>
|
||||
@if (a.taxGroup) {
|
||||
<div class="muted">{{ a.taxGroup }}</div>
|
||||
}
|
||||
} @else {
|
||||
<span class="f121__pill">Off</span>
|
||||
}
|
||||
</td>
|
||||
<td>{{ a.mode === 'QUARTERLY' ? 'Quarterly' : 'Year end' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="f121__foot">
|
||||
Aggregated across every branch — a bank on core banking computes the deduction threshold for the bank as a
|
||||
whole, not branch by branch.
|
||||
</div>
|
||||
} @else {
|
||||
<div class="f121__empty">No fixed or recurring deposits where this customer is the deductee.</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- ── Section 2: joint holdings ── -->
|
||||
@if (jointHolderAccounts.length) {
|
||||
<div class="f121__card">
|
||||
<div class="f121__card-head">
|
||||
<mat-icon>group</mat-icon>
|
||||
<span>Deposits where this customer is a joint holder</span>
|
||||
</div>
|
||||
<div class="f121__table-wrap">
|
||||
<table class="f121__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account</th>
|
||||
<th>Type</th>
|
||||
<th class="num">Interest (FY)</th>
|
||||
<th>Deducted against</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (a of jointHolderAccounts; track trackAccount($index, a)) {
|
||||
<tr>
|
||||
<td>
|
||||
<div class="f121__mono">{{ a.accountNo }}</div>
|
||||
<div class="muted">{{ a.productName }}</div>
|
||||
</td>
|
||||
<td>{{ a.kind }}</td>
|
||||
<td class="num">₹{{ a.interest | number: '1.0-0' }}</td>
|
||||
<td class="muted">
|
||||
First-named holder
|
||||
@if (a.deducteeClientId) {
|
||||
(client {{ a.deducteeClientId }})
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="f121__foot">
|
||||
Tax on a joint deposit is deducted against the first-named holder's PAN, so this interest is
|
||||
<strong>not</strong> counted in the figures above and does not use up this customer's threshold.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- ── Section 3: exempt accounts ── -->
|
||||
@if (exemptAccounts.length) {
|
||||
<div class="f121__card">
|
||||
<div class="f121__card-head">
|
||||
<mat-icon>savings</mat-icon>
|
||||
<span>Savings and current accounts</span>
|
||||
</div>
|
||||
<div class="f121__table-wrap">
|
||||
<table class="f121__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account</th>
|
||||
<th>Type</th>
|
||||
<th class="num">Interest (FY)</th>
|
||||
<th>TDS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (a of exemptAccounts; track trackAccount($index, a)) {
|
||||
<tr>
|
||||
<td>
|
||||
<div class="f121__mono">{{ a.accountNo }}</div>
|
||||
<div class="muted">{{ a.productName }}</div>
|
||||
</td>
|
||||
<td>{{ a.kind }}</td>
|
||||
<td class="num">₹{{ a.interest | number: '1.0-0' }}</td>
|
||||
<td><span class="f121__pill">Not applicable</span></td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="f121__foot">
|
||||
The charge applies to time deposits. Savings bank interest is outside it and is excluded from the threshold
|
||||
— the customer claims the 80TTA or 80TTB deduction on it in their own return instead.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,334 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.f121 {
|
||||
--f121-line: #e5e7eb;
|
||||
--f121-bg: #f9fafb;
|
||||
--f121-ink: #111827;
|
||||
--f121-muted: #6b7280;
|
||||
--f121-blue: #1d4ed8;
|
||||
--f121-green: #15803d;
|
||||
--f121-amber: #b45309;
|
||||
|
||||
padding: 16px;
|
||||
font-size: 13px;
|
||||
color: var(--f121-ink);
|
||||
}
|
||||
|
||||
.f121__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 40px 16px;
|
||||
color: var(--f121-muted);
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.f121__head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.f121__title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.f121__sub {
|
||||
margin-top: 4px;
|
||||
color: var(--f121-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.f121__controls {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.f121__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
> span {
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--f121-muted);
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--f121-line);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-size: 13px;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.f121__mode {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--f121-line);
|
||||
border-radius: 6px;
|
||||
background: var(--f121-bg);
|
||||
font-weight: 600;
|
||||
cursor: help;
|
||||
|
||||
mat-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--f121-muted);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── KPI strip ── */
|
||||
.f121__kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.f121__kpi {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--f121-line);
|
||||
border-left: 3px solid var(--f121-blue);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
|
||||
&--ok {
|
||||
border-left-color: var(--f121-green);
|
||||
}
|
||||
|
||||
&--warn {
|
||||
border-left-color: var(--f121-amber);
|
||||
}
|
||||
}
|
||||
|
||||
.f121__kpi-n {
|
||||
font-size: 19px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.f121__kpi-l {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
color: var(--f121-muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* ── Notes ── */
|
||||
.f121__note {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
padding: 11px 13px;
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid var(--f121-blue);
|
||||
background: color-mix(in srgb, var(--f121-blue) 6%, transparent);
|
||||
line-height: 1.5;
|
||||
|
||||
mat-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--f121-blue);
|
||||
}
|
||||
|
||||
&--warn {
|
||||
border-left-color: var(--f121-amber);
|
||||
background: color-mix(in srgb, var(--f121-amber) 8%, transparent);
|
||||
|
||||
mat-icon {
|
||||
color: var(--f121-amber);
|
||||
}
|
||||
}
|
||||
|
||||
&--tip {
|
||||
border-left-color: var(--f121-green);
|
||||
background: color-mix(in srgb, var(--f121-green) 7%, transparent);
|
||||
|
||||
mat-icon {
|
||||
color: var(--f121-green);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Cards ── */
|
||||
.f121__card {
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--f121-line);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.f121__card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 11px 14px;
|
||||
background: var(--f121-bg);
|
||||
border-bottom: 1px solid var(--f121-line);
|
||||
font-weight: 700;
|
||||
font-size: 12.5px;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--f121-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.f121__foot {
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid var(--f121-line);
|
||||
background: var(--f121-bg);
|
||||
color: var(--f121-muted);
|
||||
font-size: 11.5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.f121__empty {
|
||||
padding: 20px 14px;
|
||||
color: var(--f121-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Key/value list ── */
|
||||
.f121__kv-row {
|
||||
display: grid;
|
||||
grid-template-columns: 190px 1fr;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
line-height: 1.5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
> span:first-child {
|
||||
color: var(--f121-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&--muted > span:last-child {
|
||||
color: var(--f121-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--warn > span:last-child {
|
||||
color: var(--f121-amber);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Tables ── */
|
||||
.f121__table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.f121__table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--f121-line);
|
||||
color: var(--f121-muted);
|
||||
font-weight: 700;
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--f121-muted);
|
||||
font-size: 11.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.f121__row--warn > td {
|
||||
background: color-mix(in srgb, var(--f121-amber) 7%, transparent);
|
||||
}
|
||||
|
||||
.f121__row--total > td {
|
||||
background: var(--f121-bg);
|
||||
border-top: 1px solid var(--f121-line);
|
||||
}
|
||||
|
||||
/* ── Bits ── */
|
||||
.f121__pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 9px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--f121-line);
|
||||
background: var(--f121-bg);
|
||||
color: var(--f121-muted);
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
|
||||
& + & {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&--ok {
|
||||
border-color: color-mix(in srgb, var(--f121-green) 35%, transparent);
|
||||
background: color-mix(in srgb, var(--f121-green) 10%, transparent);
|
||||
color: var(--f121-green);
|
||||
}
|
||||
|
||||
&--warn {
|
||||
border-color: color-mix(in srgb, var(--f121-amber) 35%, transparent);
|
||||
background: color-mix(in srgb, var(--f121-amber) 12%, transparent);
|
||||
color: var(--f121-amber);
|
||||
}
|
||||
}
|
||||
|
||||
.f121__mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -0,0 +1,500 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
import { Observable, Subject, forkJoin, of } from 'rxjs';
|
||||
import { catchError, switchMap, takeUntil } from 'rxjs/operators';
|
||||
|
||||
/** Custom Services */
|
||||
import { ClientsService } from '../../clients.service';
|
||||
import { SavingsService } from 'app/savings/savings.service';
|
||||
import { FixedDepositsService } from 'app/deposits/fixed-deposits/fixed-deposits.service';
|
||||
import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/** Domain logic */
|
||||
import {
|
||||
Declaration,
|
||||
DeclarationForm,
|
||||
EligibilityResult,
|
||||
FY_TAX_CONFIG,
|
||||
InterestCredit,
|
||||
TdsAccountInput,
|
||||
TdsMode,
|
||||
TdsQuarterLine,
|
||||
TdsSchedule,
|
||||
ageInFy,
|
||||
buildSchedule,
|
||||
checkEligibility,
|
||||
collectTdsCredits,
|
||||
declarationFormFor,
|
||||
formKindFor,
|
||||
fyOf,
|
||||
isTdsApplicable,
|
||||
isWellFormedPan,
|
||||
normaliseFy,
|
||||
tdsDeducteeOf,
|
||||
tdsModeFor
|
||||
} from 'app/letter-mgmt/certificates/form-15gh/tds-15gh.compute';
|
||||
|
||||
/** One of the customer's interest-bearing accounts, with its FY figures. */
|
||||
export interface Form121AccountRow {
|
||||
accountNo: string;
|
||||
productName: string;
|
||||
/** 'Fixed Deposit', 'Recurring Deposit' or 'Savings'. */
|
||||
kind: string;
|
||||
/** Interest credited to this account inside the selected FY. */
|
||||
interest: number;
|
||||
/** Tax Fineract has actually withheld on this account inside the FY. */
|
||||
tdsDeducted: number;
|
||||
/** Whether Fineract is currently withholding tax on this account. */
|
||||
withHoldTax: boolean;
|
||||
taxGroup: string | null;
|
||||
/** When tax on this account settles — from the product, not a preference. */
|
||||
mode: TdsMode;
|
||||
/** Interest here attracts TDS at all (a time deposit, not a savings account). */
|
||||
tdsApplicable: boolean;
|
||||
/** This customer is the deductee — false when they are a joint holder only. */
|
||||
isDeductee: boolean;
|
||||
/** Who the tax is deducted against, when it is not this customer. */
|
||||
deducteeClientId: number | null;
|
||||
}
|
||||
|
||||
/** Fineract hands dates back as [yyyy, m, d]; normalise to ISO. */
|
||||
function toIso(value: unknown): string | null {
|
||||
if (Array.isArray(value) && value.length >= 3) {
|
||||
const [
|
||||
y,
|
||||
m,
|
||||
d
|
||||
] = value as number[];
|
||||
return `${y}-${`${m}`.padStart(2, '0')}-${`${d}`.padStart(2, '0')}`;
|
||||
}
|
||||
if (typeof value === 'string' && value.trim()) {
|
||||
const parsed = new Date(value);
|
||||
if (!isNaN(parsed.getTime())) {
|
||||
return parsed.toISOString().slice(0, 10);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-form121-tab',
|
||||
templateUrl: './form121-tab.component.html',
|
||||
styleUrls: ['./form121-tab.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatIcon,
|
||||
MatProgressSpinner,
|
||||
MatTooltip
|
||||
]
|
||||
})
|
||||
export class Form121TabComponent implements OnInit, OnDestroy {
|
||||
private route = inject(ActivatedRoute);
|
||||
private clientsService = inject(ClientsService);
|
||||
private savingsService = inject(SavingsService);
|
||||
private fixedDepositsService = inject(FixedDepositsService);
|
||||
private recurringDepositsService = inject(RecurringDepositsService);
|
||||
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
clientId = '';
|
||||
loading = true;
|
||||
loadError = false;
|
||||
|
||||
// ── Customer ──
|
||||
clientName = '';
|
||||
dateOfBirth = '';
|
||||
pan = '';
|
||||
panWellFormed = false;
|
||||
|
||||
// ── Declaration on record ──
|
||||
declarationOnRecord = false;
|
||||
/**
|
||||
* The form actually in force for the selected year. From FY 2026-27 a single
|
||||
* Form 121 replaced the 15G/15H split, so this is derived from the year rather
|
||||
* than from the payee's age.
|
||||
*/
|
||||
declarationForm: DeclarationForm = '121';
|
||||
/** Kind recorded at KYC, meaningful only for a pre-2026 year. */
|
||||
declarationKind: '15G' | '15H' = '15G';
|
||||
declarationFy = '';
|
||||
/**
|
||||
* The KYC step records only the year, not the date the branch accepted the
|
||||
* declaration, so it has to be treated as covering the whole year. Surfaced on
|
||||
* screen rather than hidden — a mid-year acceptance would change the figures.
|
||||
*/
|
||||
acceptanceDateKnown = false;
|
||||
|
||||
eligibility: EligibilityResult | null = null;
|
||||
|
||||
// ── Selection ──
|
||||
availableFys: string[] = [];
|
||||
fy = '';
|
||||
|
||||
// ── Computed ──
|
||||
accounts: Form121AccountRow[] = [];
|
||||
schedule: TdsSchedule | null = null;
|
||||
actualTds = 0;
|
||||
tdsSaved = 0;
|
||||
|
||||
/** Raw account inputs, kept so the year selector can recompute cheaply. */
|
||||
private accountInputs: (TdsAccountInput & { meta: Form121AccountRow })[] = [];
|
||||
/** Withheld-tax postings by FY, from the ledger. */
|
||||
private actualTdsByFy = new Map<string, number>();
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.parent.params.pipe(takeUntil(this.destroy$)).subscribe((params: any) => {
|
||||
this.clientId = params['clientId'];
|
||||
this.load();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
// ────────────────────────────── Loading ──────────────────────────────
|
||||
|
||||
private load(): void {
|
||||
this.loading = true;
|
||||
this.loadError = false;
|
||||
|
||||
forkJoin({
|
||||
client: this.clientsService.getClientData(this.clientId, true).pipe(catchError(() => of(null))),
|
||||
kyc: this.clientsService.getClientKyc(this.clientId, true).pipe(catchError(() => of(null))),
|
||||
accounts: this.clientsService.getClientAccountData(this.clientId).pipe(catchError(() => of(null)))
|
||||
})
|
||||
.pipe(
|
||||
takeUntil(this.destroy$),
|
||||
switchMap(({ client, kyc, accounts }) => {
|
||||
this.applyClient(client);
|
||||
this.applyKyc(kyc);
|
||||
const deposits = this.depositAccountsOf(accounts);
|
||||
return deposits.length ? forkJoin(deposits.map((a) => this.fetchAccount(a))) : of([] as any[]);
|
||||
}),
|
||||
catchError(() => {
|
||||
this.loadError = true;
|
||||
return of([] as any[]);
|
||||
})
|
||||
)
|
||||
.subscribe((details: any[]) => {
|
||||
this.loading = false;
|
||||
this.ingest(details.filter(Boolean));
|
||||
this.recompute();
|
||||
});
|
||||
}
|
||||
|
||||
private applyClient(client: any): void {
|
||||
this.clientName = client?.displayName ?? '';
|
||||
this.dateOfBirth = toIso(client?.dateOfBirth) ?? '';
|
||||
}
|
||||
|
||||
private applyKyc(kyc: any): void {
|
||||
this.pan = (kyc?.panNumber ?? '').toUpperCase();
|
||||
this.panWellFormed = isWellFormedPan(this.pan);
|
||||
this.declarationOnRecord = !!kyc?.form15Applicable;
|
||||
this.declarationKind = kyc?.form15Type === '15H' ? '15H' : '15G';
|
||||
this.declarationForm = this.fy ? declarationFormFor(this.fy, this.dateOfBirth) : '121';
|
||||
this.declarationFy = kyc?.form15FY ?? '';
|
||||
this.acceptanceDateKnown = false;
|
||||
}
|
||||
|
||||
/** Savings, FD and RD accounts — everything that can credit interest. */
|
||||
private depositAccountsOf(accounts: any): any[] {
|
||||
return (accounts?.savingsAccounts ?? []).filter(
|
||||
(a: any) => a.status?.active || a.status?.matured || a.status?.closed
|
||||
);
|
||||
}
|
||||
|
||||
private fetchAccount(a: any): Observable<any> {
|
||||
const id = `${a.id}`;
|
||||
const code = a.depositType?.code ?? '';
|
||||
let call: Observable<any>;
|
||||
if (code.includes('fixedDeposit')) {
|
||||
call = this.fixedDepositsService.getFixedDepositsAccountData(id);
|
||||
} else if (code.includes('recurringDeposit')) {
|
||||
call = this.recurringDepositsService.getRecurringDepositsAccountData(id);
|
||||
} else {
|
||||
call = this.savingsService.getSavingsAccountData(id);
|
||||
}
|
||||
// One unreadable account must not blank the whole tab.
|
||||
return call.pipe(catchError(() => of(null)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Turns each account payload into an engine input.
|
||||
*
|
||||
* Joint and minor attributes are read defensively: they are captured on the
|
||||
* account stepper but may not surface on every read endpoint, and an absent
|
||||
* field must default to a single-name account rather than throw.
|
||||
*/
|
||||
private ingest(details: any[]): void {
|
||||
this.accountInputs = [];
|
||||
this.actualTdsByFy = new Map<string, number>();
|
||||
const fys = new Set<string>();
|
||||
const clientIdNum = Number(this.clientId);
|
||||
|
||||
for (const d of details) {
|
||||
const code: string = d.depositType?.code ?? '';
|
||||
const extra = d.extraAttributes ?? d.externalAttributes ?? d;
|
||||
|
||||
const ref = {
|
||||
id: d.id,
|
||||
accountNo: d.accountNo ?? `${d.id}`,
|
||||
depositTypeCode: code,
|
||||
accountStatus: extra.accountStatus ?? d.accountStatus ?? 'SINGLE',
|
||||
clientId: d.clientId ?? clientIdNum,
|
||||
primaryClientId: extra.primaryClientId ?? d.primaryClientId ?? null,
|
||||
guardianClientId: extra.guardianClientId ?? d.guardianClientId ?? null,
|
||||
jointHolders: extra.jointHolders ?? d.jointHolders ?? [],
|
||||
interestPostingPeriodType: d.interestPostingPeriodType ?? null
|
||||
};
|
||||
|
||||
const credits: InterestCredit[] = [];
|
||||
let tdsDeducted = 0;
|
||||
|
||||
for (const t of d.transactions ?? []) {
|
||||
if (t.reversed || t.isReversal) {
|
||||
continue;
|
||||
}
|
||||
const iso = toIso(t.date);
|
||||
if (!iso) {
|
||||
continue;
|
||||
}
|
||||
fys.add(fyOf(iso));
|
||||
|
||||
if (t.transactionType?.interestPosting) {
|
||||
credits.push({ date: iso, amount: t.amount ?? 0, accountNo: ref.accountNo });
|
||||
} else if (t.transactionType?.withholdTax) {
|
||||
const amount = t.amount ?? 0;
|
||||
tdsDeducted += amount;
|
||||
const txnFy = fyOf(iso);
|
||||
this.actualTdsByFy.set(txnFy, (this.actualTdsByFy.get(txnFy) ?? 0) + amount);
|
||||
}
|
||||
}
|
||||
|
||||
const deductee = tdsDeducteeOf(ref);
|
||||
const meta: Form121AccountRow = {
|
||||
accountNo: ref.accountNo,
|
||||
productName: d.savingsProductName ?? d.depositProductName ?? d.productName ?? '—',
|
||||
kind: code.includes('fixedDeposit')
|
||||
? 'Fixed Deposit'
|
||||
: code.includes('recurringDeposit')
|
||||
? 'Recurring Deposit'
|
||||
: 'Savings',
|
||||
interest: 0,
|
||||
tdsDeducted,
|
||||
withHoldTax: !!d.withHoldTax,
|
||||
taxGroup: d.taxGroup?.name ?? null,
|
||||
mode: tdsModeFor(ref),
|
||||
tdsApplicable: isTdsApplicable(ref),
|
||||
isDeductee: deductee === clientIdNum,
|
||||
deducteeClientId: deductee
|
||||
};
|
||||
|
||||
this.accountInputs.push({ ...ref, credits, meta });
|
||||
}
|
||||
|
||||
this.availableFys = [...fys].sort().reverse();
|
||||
if (!this.availableFys.includes(this.fy)) {
|
||||
this.fy = this.availableFys[0] ?? (this.declarationFy ? normaliseFy(this.declarationFy) : '');
|
||||
}
|
||||
}
|
||||
|
||||
// ───────────────────────────── Computation ─────────────────────────────
|
||||
|
||||
/** Re-runs the engine for the selected year. */
|
||||
recompute(): void {
|
||||
this.schedule = null;
|
||||
this.eligibility = null;
|
||||
this.tdsSaved = 0;
|
||||
this.accounts = this.accountInputs.map((a) => a.meta);
|
||||
|
||||
if (!this.fy) {
|
||||
return;
|
||||
}
|
||||
|
||||
const year = normaliseFy(this.fy);
|
||||
|
||||
// Per-account interest for the selected year, for the three lists.
|
||||
for (const a of this.accountInputs) {
|
||||
a.meta.interest = a.credits.filter((c) => fyOf(c.date) === year).reduce((s, c) => s + c.amount, 0);
|
||||
}
|
||||
this.actualTds = this.actualTdsByFy.get(year) ?? 0;
|
||||
|
||||
if (!this.dateOfBirth) {
|
||||
return;
|
||||
}
|
||||
|
||||
// The one place rules 8 to 12 are applied: savings interest dropped, joint
|
||||
// deposits attributed to the primary holder, every branch aggregated.
|
||||
const credits = collectTdsCredits(Number(this.clientId), this.accountInputs, year);
|
||||
const ctx = { fy: year, dateOfBirth: this.dateOfBirth, pan: this.pan, resident: true };
|
||||
const declaration = this.declarationForSelectedFy();
|
||||
|
||||
this.schedule = buildSchedule(this.overallMode, credits, { ...ctx, declaration });
|
||||
|
||||
if (declaration) {
|
||||
const without = buildSchedule(this.overallMode, credits, { ...ctx, declaration: null });
|
||||
this.tdsSaved = Math.max(0, without.totalTds - this.schedule.totalTds);
|
||||
}
|
||||
|
||||
// The branch cannot compute income earned outside the bank, so the income
|
||||
// limb is reported as unassessed rather than silently passed.
|
||||
this.eligibility = checkEligibility(ctx, {
|
||||
estimatedInterest: this.schedule.totalInterest,
|
||||
estimatedIncome: 0,
|
||||
incomeOnRecord: false
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* When tax settles for this customer overall.
|
||||
*
|
||||
* Timing is per account, but the customer needs one view. A quarterly account
|
||||
* anywhere in the book means a deduction falls due at the first quarter end, so
|
||||
* that is the honest headline; the per-account list carries the detail.
|
||||
*/
|
||||
private get overallMode(): TdsMode {
|
||||
const applicable = this.accountInputs.filter((a) => a.meta.tdsApplicable && a.meta.isDeductee);
|
||||
return applicable.some((a) => a.meta.mode === 'QUARTERLY') ? 'QUARTERLY' : 'ANNUAL';
|
||||
}
|
||||
|
||||
/** The declaration, but only when it was filed for the year being shown. */
|
||||
private declarationForSelectedFy(): Declaration | null {
|
||||
if (!this.declarationOnRecord || !this.fy) {
|
||||
return null;
|
||||
}
|
||||
const year = normaliseFy(this.fy);
|
||||
if (this.declarationFy && normaliseFy(this.declarationFy) !== year) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
kind: this.declarationKind,
|
||||
// No acceptance date on record — treated as covering the whole year.
|
||||
acceptedOn: `${year.slice(0, 4)}-04-01`,
|
||||
fy: year
|
||||
};
|
||||
}
|
||||
|
||||
// ───────────────────────── Template helpers ─────────────────────────
|
||||
|
||||
get mode(): TdsMode {
|
||||
return this.schedule?.mode ?? 'QUARTERLY';
|
||||
}
|
||||
|
||||
get age(): number {
|
||||
return this.dateOfBirth && this.fy ? ageInFy(this.dateOfBirth, this.fy) : 0;
|
||||
}
|
||||
|
||||
get formKind(): string {
|
||||
return this.dateOfBirth && this.fy ? formKindFor(this.dateOfBirth, this.fy) : '—';
|
||||
}
|
||||
|
||||
/** The form the payee would file for the selected year. */
|
||||
get formLabel(): string {
|
||||
if (!this.fy) {
|
||||
return '—';
|
||||
}
|
||||
const form = declarationFormFor(this.fy, this.dateOfBirth);
|
||||
return form === '121' ? 'Form 121' : `Form ${form}`;
|
||||
}
|
||||
|
||||
/** Which deduction trigger applies, now that the forms no longer split by age. */
|
||||
get bandLabel(): string {
|
||||
return this.schedule?.senior ? 'Senior citizen' : 'General';
|
||||
}
|
||||
|
||||
/**
|
||||
* Provision and return references for the selected year. Both changed on
|
||||
* 01 April 2026, so the template reads them rather than hard-coding them.
|
||||
*/
|
||||
get statute(): { section: string; statement: string; rule: string; frequency: string } {
|
||||
const cfg = this.fy ? FY_TAX_CONFIG[normaliseFy(this.fy)] : undefined;
|
||||
return {
|
||||
section: cfg?.interestTdsSection ?? '—',
|
||||
statement: cfg?.tdsStatementForm ?? '—',
|
||||
rule: cfg?.declarationRule ?? '—',
|
||||
frequency: cfg?.declarationStatementFrequency === 'MONTHLY' ? 'monthly' : 'quarterly'
|
||||
};
|
||||
}
|
||||
|
||||
/** Accounts whose interest counts towards this customer's deduction aggregate. */
|
||||
get liableAccounts(): Form121AccountRow[] {
|
||||
return this.accounts.filter((a) => a.tdsApplicable && a.isDeductee);
|
||||
}
|
||||
|
||||
/** Deposits where this customer is a joint holder but not the deductee. */
|
||||
get jointHolderAccounts(): Form121AccountRow[] {
|
||||
return this.accounts.filter((a) => a.tdsApplicable && !a.isDeductee);
|
||||
}
|
||||
|
||||
/** Savings and current accounts — interest outside the charge on time deposits. */
|
||||
get exemptAccounts(): Form121AccountRow[] {
|
||||
return this.accounts.filter((a) => !a.tdsApplicable);
|
||||
}
|
||||
|
||||
/** Engine figure less what the ledger shows was actually withheld. */
|
||||
get variance(): number {
|
||||
return (this.schedule?.totalTds ?? 0) - this.actualTds;
|
||||
}
|
||||
|
||||
/** How much more interest before TDS starts. */
|
||||
get headroom(): number {
|
||||
if (!this.schedule) {
|
||||
return 0;
|
||||
}
|
||||
return Math.max(0, this.schedule.threshold - this.schedule.totalInterest);
|
||||
}
|
||||
|
||||
get thresholdCrossed(): boolean {
|
||||
return !!this.schedule && this.schedule.totalInterest > this.schedule.threshold;
|
||||
}
|
||||
|
||||
/**
|
||||
* A declaration is on record but deposit accounts are still set to withhold —
|
||||
* the branch has not switched them off.
|
||||
*/
|
||||
get declarationNotAppliedToAccounts(): boolean {
|
||||
return !!this.declarationForSelectedFy() && this.liableAccounts.some((a) => a.withHoldTax);
|
||||
}
|
||||
|
||||
/**
|
||||
* The customer filed a declaration but holds joint deposits where someone else
|
||||
* is the deductee — their form does nothing for those.
|
||||
*/
|
||||
get declarationUselessOnJointAccounts(): boolean {
|
||||
return !!this.declarationForSelectedFy() && this.jointHolderAccounts.length > 0;
|
||||
}
|
||||
|
||||
/** Worth prompting the branch to collect a declaration. */
|
||||
get shouldSuggestDeclaration(): boolean {
|
||||
return !this.declarationForSelectedFy() && (this.schedule?.totalTds ?? 0) > 0;
|
||||
}
|
||||
|
||||
trackLine(_: number, line: TdsQuarterLine): number {
|
||||
return line.quarter;
|
||||
}
|
||||
|
||||
trackAccount(_: number, account: Form121AccountRow): string {
|
||||
return account.accountNo;
|
||||
}
|
||||
}
|
||||
@@ -42,6 +42,58 @@
|
||||
|
||||
<!-- KYC Summary (read-only when not in edit mode) -->
|
||||
@if (!isEditMode && kycData) {
|
||||
@if (kycData.isException && !kycData.exceptionResolved) {
|
||||
<div
|
||||
class="kyc-exception-banner"
|
||||
style="
|
||||
background: #fef3c7;
|
||||
border: 1px solid #f59e0b;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
"
|
||||
>
|
||||
<mat-icon style="color: #d97706; margin-top: 2px">warning</mat-icon>
|
||||
<div>
|
||||
<strong style="color: #92400e; font-size: 14px">KYC Exception Active</strong>
|
||||
<p style="color: #b45309; font-size: 13px; margin: 4px 0 0 0">
|
||||
Account is open under a temporary KYC Exception. Reason:
|
||||
<strong>{{ kycData.exceptionReason || 'Other' }}</strong
|
||||
>. Please contact the customer and complete verification as soon as possible.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!--
|
||||
The OVD captured at onboarding has gone stale, or is about to. Sits beside the exception
|
||||
banner because it is the same kind of thing: something staff must act on before the account
|
||||
drifts out of compliance.
|
||||
-->
|
||||
@if (showKycDocumentAlert) {
|
||||
<div class="kyc-doc-alert" [class.kyc-doc-alert--critical]="kycDocumentAlertSeverity === 'critical'">
|
||||
<mat-icon class="kyc-doc-alert__icon">{{
|
||||
kycDocumentAlertSeverity === 'critical' ? 'error' : 'schedule'
|
||||
}}</mat-icon>
|
||||
<div class="kyc-doc-alert__body">
|
||||
<strong class="kyc-doc-alert__title">{{ kycDocumentAlertTitle }}</strong>
|
||||
<p class="kyc-doc-alert__text">{{ kycDocumentAlertMessage }}</p>
|
||||
</div>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
type="button"
|
||||
class="kyc-doc-alert__action"
|
||||
(click)="toggleEditMode()"
|
||||
>
|
||||
Update Document
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Verification Table -->
|
||||
<div class="kv-table">
|
||||
<div class="kv-table__header">
|
||||
@@ -61,12 +113,21 @@
|
||||
<span class="kv-table__col kv-table__col--status">
|
||||
@if (kycData.panVerified) {
|
||||
<span class="kv-status kv-status--ok"><mat-icon>check_circle</mat-icon> Verified</span>
|
||||
} @else if (panDeclarationTaken) {
|
||||
<!-- Deliberately not "Verified": the check never passed, paperwork covers it. -->
|
||||
<span class="kv-status kv-status--declared"><mat-icon>assignment_turned_in</mat-icon> Declaration</span>
|
||||
} @else {
|
||||
<span class="kv-status kv-status--pending"><mat-icon>radio_button_unchecked</mat-icon> Pending</span>
|
||||
}
|
||||
</span>
|
||||
<span class="kv-table__col kv-table__col--date">{{
|
||||
kycData.panVerifiedOn ? formatDate(kycData.panVerifiedOn) : '—'
|
||||
kycData.panVerified
|
||||
? kycData.panVerifiedOn
|
||||
? formatDate(kycData.panVerifiedOn)
|
||||
: '—'
|
||||
: panDeclarationTaken && kycData.panDeclarationTakenOn
|
||||
? formatDate(kycData.panDeclarationTakenOn)
|
||||
: '—'
|
||||
}}</span>
|
||||
<span class="kv-table__col kv-table__col--action">
|
||||
<button
|
||||
@@ -82,9 +143,80 @@
|
||||
Re-Verify
|
||||
}
|
||||
</button>
|
||||
<!--
|
||||
A PAN that has never passed is not always fixable by another attempt. Offer the
|
||||
declaration here too, so an existing client sitting in the exception list can be
|
||||
cleared without the officer having to run a verification they know will fail.
|
||||
-->
|
||||
@if (!kycData.panVerified && !panDeclarationTaken && kycData.panNumber) {
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="kv-action-btn"
|
||||
type="button"
|
||||
[disabled]="!kycId || saving"
|
||||
(click)="takePanDeclaration()"
|
||||
>
|
||||
Declaration
|
||||
</button>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
PAN is unverified but a declaration is on file. Shown in full because it is the only
|
||||
reason PAN carries no KYC exception — a reviewer has to see what was declared.
|
||||
-->
|
||||
@if (!kycData.panVerified && panDeclarationTaken) {
|
||||
<div class="kv-decl">
|
||||
<div class="kv-decl__head">
|
||||
<mat-icon>assignment_turned_in</mat-icon>
|
||||
<span class="kv-decl__title">PAN Declaration</span>
|
||||
@if (!saving) {
|
||||
<span class="kv-decl__actions">
|
||||
<button mat-stroked-button type="button" class="kv-action-btn" (click)="takePanDeclaration()">
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
mat-stroked-button
|
||||
type="button"
|
||||
class="kv-action-btn danger"
|
||||
(click)="removePanDeclaration()"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div class="kv-decl__rows">
|
||||
<div class="kv-decl__row">
|
||||
<span class="k">Does not match</span>
|
||||
<span class="v strong">{{ panDeclarationMismatchLabel }}</span>
|
||||
</div>
|
||||
@if (kycData.panDeclarationNameOnPan) {
|
||||
<div class="kv-decl__row">
|
||||
<span class="k">Name on PAN</span>
|
||||
<span class="v">{{ kycData.panDeclarationNameOnPan }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (kycData.panDeclarationDobOnPan) {
|
||||
<div class="kv-decl__row">
|
||||
<span class="k">DOB on PAN</span>
|
||||
<span class="v">{{ formatDate(kycData.panDeclarationDobOnPan) }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (kycData.panDeclarationRemarks) {
|
||||
<div class="kv-decl__row">
|
||||
<span class="k">Declaration file</span>
|
||||
<span class="v">{{ kycData.panDeclarationRemarks }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="kv-decl__note">
|
||||
PAN remains unverified. No KYC exception is raised for PAN while this declaration is on file.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Aadhaar Row -->
|
||||
<div class="kv-table__row">
|
||||
<span class="kv-table__col kv-table__col--doc">
|
||||
@@ -94,12 +226,21 @@
|
||||
<span class="kv-table__col kv-table__col--status">
|
||||
@if (kycData.aadhaarVerified) {
|
||||
<span class="kv-status kv-status--ok"><mat-icon>check_circle</mat-icon> Verified</span>
|
||||
} @else if (aadhaarReceiptTaken) {
|
||||
<!-- Deliberately not "Verified": no Aadhaar exists yet, the slip covers it. -->
|
||||
<span class="kv-status kv-status--receipt"><mat-icon>receipt_long</mat-icon> Receipt</span>
|
||||
} @else {
|
||||
<span class="kv-status kv-status--pending"><mat-icon>radio_button_unchecked</mat-icon> Pending</span>
|
||||
}
|
||||
</span>
|
||||
<span class="kv-table__col kv-table__col--date">{{
|
||||
kycData.aadhaarVerifiedOn ? formatDate(kycData.aadhaarVerifiedOn) : '—'
|
||||
kycData.aadhaarVerified
|
||||
? kycData.aadhaarVerifiedOn
|
||||
? formatDate(kycData.aadhaarVerifiedOn)
|
||||
: '—'
|
||||
: aadhaarReceiptTaken && kycData.aadhaarReceiptTakenOn
|
||||
? formatDate(kycData.aadhaarReceiptTakenOn)
|
||||
: '—'
|
||||
}}</span>
|
||||
<span class="kv-table__col kv-table__col--action">
|
||||
@if (!showAadhaarReVerify && !aadhaarOtpSent) {
|
||||
@@ -113,9 +254,142 @@
|
||||
Re-Verify
|
||||
</button>
|
||||
}
|
||||
<!--
|
||||
No Aadhaar number means the OTP check has nothing to run against. Offer the enrolment
|
||||
slip here so an existing client sitting in the exception list can be cleared.
|
||||
-->
|
||||
@if (!kycData.aadhaarVerified && !aadhaarReceiptTaken) {
|
||||
<button
|
||||
mat-stroked-button
|
||||
class="kv-action-btn"
|
||||
type="button"
|
||||
[disabled]="!kycId || saving"
|
||||
(click)="takeAadhaarReceipt()"
|
||||
>
|
||||
Receipt
|
||||
</button>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Aadhaar is unverified but an enrolment receipt is on file. Shown in full because it is the
|
||||
only reason Aadhaar carries no KYC exception.
|
||||
-->
|
||||
@if (!kycData.aadhaarVerified && aadhaarReceiptTaken) {
|
||||
<div class="kv-rcpt">
|
||||
<div class="kv-rcpt__head">
|
||||
<mat-icon>receipt_long</mat-icon>
|
||||
<span class="kv-rcpt__title">Aadhaar Enrolment Receipt</span>
|
||||
@if (!saving) {
|
||||
<span class="kv-rcpt__actions">
|
||||
<button mat-stroked-button type="button" class="kv-action-btn" (click)="takeAadhaarReceipt()">
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
mat-stroked-button
|
||||
type="button"
|
||||
class="kv-action-btn danger"
|
||||
(click)="removeAadhaarReceipt()"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div class="kv-rcpt__rows">
|
||||
<div class="kv-rcpt__row">
|
||||
<span class="k">Enrolment ID</span>
|
||||
<span class="v mono">{{ kycData.aadhaarEnrolmentId || '—' }}</span>
|
||||
</div>
|
||||
@if (kycData.aadhaarEnrolmentDate) {
|
||||
<div class="kv-rcpt__row">
|
||||
<span class="k">Enrolment date</span>
|
||||
<span class="v">{{ formatDate(kycData.aadhaarEnrolmentDate) }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (kycData.aadhaarReceiptRemarks) {
|
||||
<div class="kv-rcpt__row">
|
||||
<span class="k">Remarks</span>
|
||||
<span class="v">{{ kycData.aadhaarReceiptRemarks }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="kv-rcpt__note">
|
||||
Aadhaar remains unverified. No KYC exception is raised for Aadhaar while this receipt is on file.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!--
|
||||
The OVD collected at onboarding. It has never appeared here, so the dates driving the
|
||||
renewal alert were invisible — an officer told to update the document could not see which
|
||||
one, nor when it was issued.
|
||||
-->
|
||||
@if (kycData.kycDocumentName) {
|
||||
<div class="kv-table__row">
|
||||
<span class="kv-table__col kv-table__col--doc">
|
||||
<mat-icon class="kv-doc-icon">description</mat-icon> {{ kycData.kycDocumentName }}
|
||||
</span>
|
||||
<span class="kv-table__col kv-table__col--num kv-mono">{{ kycData.kycDocumentNumber || '—' }}</span>
|
||||
<span class="kv-table__col kv-table__col--status">
|
||||
@switch (kycDocumentRenewal.state) {
|
||||
@case ('EXPIRED') {
|
||||
<span class="kv-status kv-status--fail"><mat-icon>error</mat-icon> Expired</span>
|
||||
}
|
||||
@case ('EXPIRING_SOON') {
|
||||
<span class="kv-status kv-status--declared"><mat-icon>schedule</mat-icon> Expires Soon</span>
|
||||
}
|
||||
@case ('DUE') {
|
||||
<span class="kv-status kv-status--declared"><mat-icon>update</mat-icon> Update Due</span>
|
||||
}
|
||||
@case ('OK') {
|
||||
<span class="kv-status kv-status--ok"><mat-icon>check_circle</mat-icon> Current</span>
|
||||
}
|
||||
@default {
|
||||
<span class="kv-status kv-status--pending"><mat-icon>help_outline</mat-icon> No dates</span>
|
||||
}
|
||||
}
|
||||
</span>
|
||||
<!--
|
||||
Issued-on, not verified-on: this document is sighted, never API-verified.
|
||||
|
||||
Every document shows an expiry, printed or not: one with no expiry on the card is
|
||||
still only good for five years from issue, so the derived date is shown rather than a
|
||||
blank. It is tagged so a calculated date is never mistaken for one on the document.
|
||||
-->
|
||||
<span class="kv-table__col kv-table__col--date">
|
||||
@if (kycData.kycDocIssueDate || kycData.kycDocExpiryDate) {
|
||||
<span class="kv-doc-dates">
|
||||
@if (kycData.kycDocIssueDate) {
|
||||
<span>Issued {{ formatDate(kycData.kycDocIssueDate) }}</span>
|
||||
}
|
||||
@if (kycDocumentExpiresOn) {
|
||||
<span
|
||||
class="kv-doc-dates__expiry"
|
||||
[class.kv-doc-dates__expiry--derived]="kycDocumentExpiryIsDerived"
|
||||
>
|
||||
Expires {{ kycDocumentExpiresOn }}
|
||||
@if (kycDocumentExpiryIsDerived) {
|
||||
<span
|
||||
class="kv-doc-dates__tag"
|
||||
matTooltip="No expiry printed on this document — calculated as 5 years from the issue date"
|
||||
>5-yr</span
|
||||
>
|
||||
}
|
||||
</span>
|
||||
}
|
||||
</span>
|
||||
} @else {
|
||||
—
|
||||
}
|
||||
</span>
|
||||
<span class="kv-table__col kv-table__col--action">
|
||||
<button mat-stroked-button class="kv-action-btn" type="button" (click)="toggleEditMode()">Update</button>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- GSTIN Row (Non-Individual only) -->
|
||||
@if (isNonIndividual) {
|
||||
<div class="kv-table__row">
|
||||
@@ -334,39 +608,72 @@
|
||||
<!-- KYC Meta Grid -->
|
||||
<div class="kv-meta-grid">
|
||||
<div class="kv-meta-item">
|
||||
<span class="kv-meta-label">KYC Type</span>
|
||||
<span class="kv-meta-value">{{
|
||||
kycData.kycType === 1 ? 'Individual' : kycData.kycType === 2 ? 'Non-Individual' : '—'
|
||||
}}</span>
|
||||
<mat-icon class="kv-meta-icon icon-blue">assignment_ind</mat-icon>
|
||||
<div class="kv-meta-info">
|
||||
<span class="kv-meta-label">KYC Type</span>
|
||||
<span class="kv-meta-value">
|
||||
{{ kycData.kycType === 1 ? 'Individual' : kycData.kycType === 2 ? 'Non-Individual' : '—' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kv-meta-item">
|
||||
<span class="kv-meta-label">Risk Category</span>
|
||||
<span class="kv-meta-value">{{
|
||||
kycData.riskCategory === 1
|
||||
? 'Low'
|
||||
: kycData.riskCategory === 2
|
||||
? 'Medium'
|
||||
: kycData.riskCategory === 3
|
||||
? 'High'
|
||||
: '—'
|
||||
}}</span>
|
||||
<mat-icon
|
||||
class="kv-meta-icon"
|
||||
[ngClass]="{
|
||||
'icon-green': kycData.riskCategory === 1,
|
||||
'icon-orange': kycData.riskCategory === 2,
|
||||
'icon-red': kycData.riskCategory === 3
|
||||
}"
|
||||
>shield</mat-icon
|
||||
>
|
||||
<div class="kv-meta-info">
|
||||
<span class="kv-meta-label">Risk Category</span>
|
||||
<span class="kv-meta-value">
|
||||
{{
|
||||
kycData.riskCategory === 1
|
||||
? 'Low'
|
||||
: kycData.riskCategory === 2
|
||||
? 'Medium'
|
||||
: kycData.riskCategory === 3
|
||||
? 'High'
|
||||
: '—'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kv-meta-item">
|
||||
<span class="kv-meta-label">Initiated On</span>
|
||||
<span class="kv-meta-value">{{ formatDate(kycData.initiatedOn) }}</span>
|
||||
<mat-icon class="kv-meta-icon icon-grey">calendar_today</mat-icon>
|
||||
<div class="kv-meta-info">
|
||||
<span class="kv-meta-label">Initiated On</span>
|
||||
<span class="kv-meta-value">{{ formatDate(kycData.initiatedOn) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kv-meta-item">
|
||||
<span class="kv-meta-label">Last Verified</span>
|
||||
<span class="kv-meta-value">{{ formatDate(kycData.verifiedOn) }}</span>
|
||||
<mat-icon class="kv-meta-icon icon-green">check_circle</mat-icon>
|
||||
<div class="kv-meta-info">
|
||||
<span class="kv-meta-label">Last Verified</span>
|
||||
<span class="kv-meta-value">{{ formatDate(kycData.verifiedOn) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kv-meta-item">
|
||||
<span class="kv-meta-label">Expiry Date</span>
|
||||
<span class="kv-meta-value">{{ formatDate(kycData.expiryDate) }}</span>
|
||||
<mat-icon class="kv-meta-icon icon-red">history_toggle_off</mat-icon>
|
||||
<div class="kv-meta-info">
|
||||
<span class="kv-meta-label">Expiry Date</span>
|
||||
<span class="kv-meta-value">{{ formatDate(kycData.expiryDate) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (kycData.remarks) {
|
||||
<div class="kv-meta-item kv-meta-item--full">
|
||||
<span class="kv-meta-label">Remarks</span>
|
||||
<span class="kv-meta-value">{{ kycData.remarks }}</span>
|
||||
<mat-icon class="kv-meta-icon icon-grey">notes</mat-icon>
|
||||
<div class="kv-meta-info">
|
||||
<span class="kv-meta-label">Remarks</span>
|
||||
<span class="kv-meta-value">{{ kycData.remarks }}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -541,6 +848,22 @@
|
||||
<mat-icon class="kyc-error-icon">error_outline</mat-icon>
|
||||
<span>{{ verificationError.pan }}</span>
|
||||
</div>
|
||||
<!--
|
||||
The check can fail for reasons no retry will fix — a PAN card that spells the
|
||||
name differently, or a vendor that is simply down. The declaration is the way
|
||||
out, so it is offered here rather than leaving the officer at a dead end.
|
||||
-->
|
||||
<div class="kyc-decl-offer">
|
||||
<span>Customer's PAN card genuinely carries different details, or PAN cannot be checked?</span>
|
||||
<button
|
||||
mat-stroked-button
|
||||
type="button"
|
||||
[disabled]="!kycId || saving"
|
||||
(click)="takePanDeclaration()"
|
||||
>
|
||||
{{ panDeclarationTaken ? 'Edit Declaration' : 'Take Declaration' }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
@if (verificationStatus.pan === 'VERIFIED' && verificationDetails.pan?.name) {
|
||||
<span class="verification-detail-text">{{ verificationDetails.pan.name }}</span>
|
||||
@@ -652,6 +975,22 @@
|
||||
<mat-icon class="kyc-error-icon">error_outline</mat-icon>
|
||||
<span>{{ verificationError.aadhaar }}</span>
|
||||
</div>
|
||||
<!--
|
||||
A failed OTP is not always something a retry can fix — a customer who has only
|
||||
applied for Aadhaar has no number to verify at all. The enrolment slip is the way
|
||||
out, so it is offered here rather than leaving the officer at a dead end.
|
||||
-->
|
||||
<div class="kyc-decl-offer">
|
||||
<span>Customer has applied for Aadhaar but not received it yet?</span>
|
||||
<button
|
||||
mat-stroked-button
|
||||
type="button"
|
||||
[disabled]="!kycId || saving"
|
||||
(click)="takeAadhaarReceipt()"
|
||||
>
|
||||
{{ aadhaarReceiptTaken ? 'Edit Receipt' : 'Record Receipt' }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -740,6 +1079,32 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- KYC Exception Flag -->
|
||||
<div
|
||||
class="full-span exception-controls-row"
|
||||
style="display: flex; align-items: center; gap: 20px; margin-bottom: 12px; flex-wrap: wrap"
|
||||
>
|
||||
<mat-checkbox formControlName="isException" style="margin-top: 8px">Mark as KYC Exception</mat-checkbox>
|
||||
|
||||
@if (kycForm.get('isException')?.value) {
|
||||
<mat-form-field appearance="outline" style="flex: 1; min-width: 250px">
|
||||
<mat-label>Exception Reasons</mat-label>
|
||||
<mat-select formControlName="exceptionReason" multiple>
|
||||
@if (!isNonIndividual) {
|
||||
<mat-option value="PAN Card Verification Failed">PAN Card Verification Failed</mat-option>
|
||||
<mat-option value="Aadhaar Verification Failed">Aadhaar Verification Failed</mat-option>
|
||||
} @else {
|
||||
<mat-option value="Enterprise PAN Verification Failed"
|
||||
>Enterprise PAN Verification Failed</mat-option
|
||||
>
|
||||
<mat-option value="GSTIN Verification Failed">GSTIN Verification Failed</mat-option>
|
||||
<mat-option value="CIN Verification Failed">CIN Verification Failed</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Remarks -->
|
||||
<mat-form-field appearance="outline" class="full-span">
|
||||
<mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10,10 +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';
|
||||
@@ -46,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<void>();
|
||||
|
||||
@@ -121,7 +138,9 @@ export class KycTabComponent implements OnInit, OnDestroy {
|
||||
'',
|
||||
[Validators.pattern(/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/)]
|
||||
],
|
||||
remarks: ['']
|
||||
remarks: [''],
|
||||
isException: [false],
|
||||
exceptionReason: [[]]
|
||||
});
|
||||
|
||||
ngOnInit(): void {
|
||||
@@ -157,7 +176,9 @@ export class KycTabComponent implements OnInit, OnDestroy {
|
||||
// the full 12-digit number to re-verify, so don't pre-fill.
|
||||
aadhaarNumber: '',
|
||||
gstinNumber: data.gstinNumber || '',
|
||||
remarks: data.remarks || ''
|
||||
remarks: data.remarks || '',
|
||||
isException: data.isException || false,
|
||||
exceptionReason: data.exceptionReason ? data.exceptionReason.split(', ') : []
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -195,6 +216,153 @@ export class KycTabComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
/** True when the stored record carries a signed declaration standing in for the PAN check. */
|
||||
get panDeclarationTaken(): boolean {
|
||||
return this.kycData?.panDeclarationTaken === true;
|
||||
}
|
||||
|
||||
/** "Name", "Date of Birth", "Name and Date of Birth", or the not-checked-at-all case. */
|
||||
get panDeclarationMismatchLabel(): string {
|
||||
const fields: string = this.kycData?.panDeclarationMismatchFields;
|
||||
if (!fields || fields === 'NONE') {
|
||||
return 'PAN could not be verified';
|
||||
}
|
||||
return fields
|
||||
.split(',')
|
||||
.map((f) => (f === 'NAME' ? 'Name' : 'Date of Birth'))
|
||||
.join(' and ');
|
||||
}
|
||||
|
||||
/** True when the stored record carries a UIDAI enrolment slip standing in for the OTP check. */
|
||||
get aadhaarReceiptTaken(): boolean {
|
||||
return this.kycData?.aadhaarReceiptTaken === true;
|
||||
}
|
||||
|
||||
// ── KYC document renewal ──────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Whether the OVD captured at onboarding is still current — see `deriveKycDocumentRenewal()`.
|
||||
*
|
||||
* The issue and expiry dates have always been captured on the KYC step but never read back, so
|
||||
* a client onboarded on a ten-year-old licence looked identical to one onboarded yesterday.
|
||||
*/
|
||||
get kycDocumentRenewal(): KycDocumentRenewalStatus {
|
||||
return deriveKycDocumentRenewal({
|
||||
issueDate: this.parseApiDate(this.kycData?.kycDocIssueDate),
|
||||
expiryDate: this.parseApiDate(this.kycData?.kycDocExpiryDate),
|
||||
today: new Date()
|
||||
});
|
||||
}
|
||||
|
||||
/** Only raise the banner for a document that actually exists and actually needs action. */
|
||||
get showKycDocumentAlert(): boolean {
|
||||
return !!this.kycData?.kycDocumentName && kycDocumentNeedsAttention(this.kycDocumentRenewal.state);
|
||||
}
|
||||
|
||||
/** Heading for the alert — the three states call for visibly different things. */
|
||||
get kycDocumentAlertTitle(): string {
|
||||
switch (this.kycDocumentRenewal.state) {
|
||||
case 'EXPIRED':
|
||||
return 'KYC Document Expired';
|
||||
case 'EXPIRING_SOON':
|
||||
return 'KYC Document Expires Soon';
|
||||
default:
|
||||
return 'KYC Document Due for Update';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The sentence staff act on. Each case names the date that triggered it, because "update the
|
||||
* document" without saying why leaves the officer checking the form to work out which clock ran
|
||||
* out.
|
||||
*/
|
||||
get kycDocumentAlertMessage(): string {
|
||||
const status = this.kycDocumentRenewal;
|
||||
const docName = this.kycData?.kycDocumentName || 'The KYC document';
|
||||
// `formatDate()` only understands Fineract's [y, m, d] arrays; these are real Date objects.
|
||||
const dueOn = status.dueOn ? this.dateUtils.formatDate(status.dueOn, 'dd MMMM yyyy') : '';
|
||||
const days = status.daysRemaining ?? 0;
|
||||
|
||||
switch (status.state) {
|
||||
case 'EXPIRED':
|
||||
return `${docName} expired on ${dueOn} and is no longer a valid officially valid document. Collect a renewed document from the customer and update the KYC record.`;
|
||||
case 'EXPIRING_SOON':
|
||||
return days === 0
|
||||
? `${docName} expires today (${dueOn}). Ask the customer for the renewed document before it lapses.`
|
||||
: `${docName} expires on ${dueOn} — ${days} day${days === 1 ? '' : 's'} from now. Ask the customer for the renewed document before it lapses.`;
|
||||
default:
|
||||
return `${docName} was issued more than ${KYC_DOCUMENT_RENEWAL_YEARS} years ago and fell due for update on ${dueOn}. Re-collect the document from the customer and update the KYC record.`;
|
||||
}
|
||||
}
|
||||
|
||||
/** Drives the banner's colour — an expired document is a harder failure than a stale one. */
|
||||
get kycDocumentAlertSeverity(): 'critical' | 'warning' {
|
||||
return this.kycDocumentRenewal.state === 'EXPIRED' ? 'critical' : 'warning';
|
||||
}
|
||||
|
||||
/**
|
||||
* The date the document stops counting as current, whether or not one is printed on it.
|
||||
*
|
||||
* A Voter ID or NREGA card carries no expiry, but it is not valid forever for KYC purposes —
|
||||
* the five-year rule is its expiry. Showing the derived date rather than a blank means every
|
||||
* document answers "valid until when?", and the officer sees the same date the alert will fire on
|
||||
* instead of having to add five years in their head.
|
||||
*/
|
||||
get kycDocumentExpiresOn(): string {
|
||||
const dueOn = this.kycDocumentRenewal.dueOn;
|
||||
return dueOn ? this.dateUtils.formatDate(dueOn, 'dd MMMM yyyy') : '';
|
||||
}
|
||||
|
||||
/**
|
||||
* True when the date above was calculated from the issue date rather than read off the document.
|
||||
* Flagged in the UI so a derived date is never mistaken for one printed on the card.
|
||||
*/
|
||||
get kycDocumentExpiryIsDerived(): boolean {
|
||||
return this.kycDocumentRenewal.reason === 'AGE';
|
||||
}
|
||||
|
||||
/** Compact chip label for the document row in the verification table. */
|
||||
get kycDocumentStatusLabel(): string {
|
||||
switch (this.kycDocumentRenewal.state) {
|
||||
case 'EXPIRED':
|
||||
return 'Expired';
|
||||
case 'EXPIRING_SOON':
|
||||
return 'Expires Soon';
|
||||
case 'DUE':
|
||||
return 'Update Due';
|
||||
case 'OK':
|
||||
return 'Current';
|
||||
default:
|
||||
return '—';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Exception columns derived from verification status — see `deriveKycExceptionFields()`.
|
||||
*
|
||||
* A field counts as verified if it was verified in this session OR is already verified on the
|
||||
* stored record; either way the customer has cleared that check. Verifying one of two
|
||||
* outstanding items narrows the exception to the remaining one rather than closing it.
|
||||
*/
|
||||
private buildExceptionFields() {
|
||||
const panVerified = this.verificationStatus.pan === 'VERIFIED' || this.kycData?.panVerified === true;
|
||||
const aadhaarVerified = this.verificationStatus.aadhaar === 'VERIFIED' || this.kycData?.aadhaarVerified === true;
|
||||
|
||||
return deriveKycExceptionFields({
|
||||
panVerified,
|
||||
// A signed declaration closes the PAN item by paperwork when the API never can.
|
||||
panDeclarationTaken: this.panDeclarationTaken,
|
||||
aadhaarVerified,
|
||||
// An enrolment slip closes the Aadhaar item when there is no number to verify yet.
|
||||
aadhaarReceiptTaken: this.aadhaarReceiptTaken,
|
||||
aadhaarApplicable: !this.isNonIndividual,
|
||||
hadException: this.kycData?.isException === true,
|
||||
previousReason: this.kycData?.exceptionReason || null,
|
||||
manualReasons: Array.isArray(this.kycForm.value.exceptionReason) ? this.kycForm.value.exceptionReason : [],
|
||||
todayFormatted: this.dateUtils.formatDate(new Date(), 'dd MMMM yyyy')
|
||||
});
|
||||
}
|
||||
|
||||
saveKyc(): void {
|
||||
if (this.kycForm.invalid) {
|
||||
return;
|
||||
@@ -210,7 +378,10 @@ export class KycTabComponent implements OnInit, OnDestroy {
|
||||
panNumber: this.kycForm.value.panNumber || null,
|
||||
aadhaarNumberMasked: aadhaarMasked,
|
||||
gstinNumber: this.kycForm.value.gstinNumber || null,
|
||||
remarks: this.kycForm.value.remarks || null
|
||||
remarks: this.kycForm.value.remarks || null,
|
||||
// dateFormat is required so the backend can parse exceptionResolvedOn when an exception closes.
|
||||
dateFormat: 'dd MMMM yyyy',
|
||||
...this.buildExceptionFields()
|
||||
};
|
||||
|
||||
if (!this.kycId) {
|
||||
@@ -244,6 +415,38 @@ export class KycTabComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
private saveKycBeforeVerify(callback: () => void, field: 'pan' | 'aadhaar' | 'gstin'): void {
|
||||
if (this.isEditMode) {
|
||||
const aadhaarRaw = this.kycForm.value.aadhaarNumber || '';
|
||||
const aadhaarMasked = aadhaarRaw.length === 12 ? 'XXXXXXXX' + aadhaarRaw.slice(-4) : aadhaarRaw || null;
|
||||
const payload: any = {
|
||||
locale: 'en',
|
||||
panNumber: this.kycForm.value.panNumber || null,
|
||||
aadhaarNumberMasked: aadhaarMasked,
|
||||
gstinNumber: this.kycForm.value.gstinNumber || null,
|
||||
remarks: this.kycForm.value.remarks || null,
|
||||
riskCategory: this.kycForm.value.riskCategory || 1,
|
||||
dateFormat: 'dd MMMM yyyy',
|
||||
...this.buildExceptionFields()
|
||||
};
|
||||
|
||||
this.clientsService.updateClientKyc(this.clientId, this.kycId, payload).subscribe({
|
||||
next: () => {
|
||||
this.loadKycData();
|
||||
callback();
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.verifying[field] = false;
|
||||
this.verificationStatus[field] = 'FAILED';
|
||||
this.verificationError[field] =
|
||||
err?.error?.defaultUserMessage || `Failed to update ${field.toUpperCase()} number before verification.`;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
verifyPAN(): void {
|
||||
if (!this.kycId) {
|
||||
this.verificationError.pan = 'KYC record not found. Save KYC details first.';
|
||||
@@ -254,33 +457,317 @@ export class KycTabComponent implements OnInit, OnDestroy {
|
||||
this.verificationError.pan = null;
|
||||
this.verificationDetails.pan = null;
|
||||
|
||||
this.saveKycBeforeVerify(() => {
|
||||
this.clientsService
|
||||
.verifyPAN(this.clientId, this.kycId)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (response: any) => {
|
||||
this.verifying.pan = false;
|
||||
if (response?.changes?.panVerified) {
|
||||
this.verificationStatus.pan = 'VERIFIED';
|
||||
this.verificationDetails.pan = response.changes;
|
||||
// A PAN that now verifies makes any earlier declaration moot.
|
||||
if (this.panDeclarationTaken) {
|
||||
this.writePanDeclaration(null);
|
||||
} else {
|
||||
this.loadKycData();
|
||||
}
|
||||
} else {
|
||||
this.verificationStatus.pan = 'FAILED';
|
||||
this.verificationError.pan = 'PAN verification failed.';
|
||||
}
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.verifying.pan = false;
|
||||
this.verificationStatus.pan = 'FAILED';
|
||||
this.verificationError.pan =
|
||||
err?.error?.developerMessage ||
|
||||
err?.error?.defaultUserMessage ||
|
||||
err?.message ||
|
||||
'PAN verification failed. Please try again.';
|
||||
}
|
||||
});
|
||||
}, 'pan');
|
||||
}
|
||||
|
||||
/**
|
||||
* Records the customer declaration that stands in for a PAN check the client cannot pass.
|
||||
*
|
||||
* Offered for any PAN failure, not just a name/DOB mismatch — an officer facing an unreachable
|
||||
* vendor is just as stuck as one facing a misspelt PAN card, and the same signed paperwork
|
||||
* resolves both. When the failure was not a comparable mismatch there is no PAN card to compare
|
||||
* against, so the dialog only asks why the declaration is being taken.
|
||||
*/
|
||||
takePanDeclaration(): void {
|
||||
if (!this.kycId) {
|
||||
this.verificationError.pan = 'KYC record not found. Save KYC details first.';
|
||||
return;
|
||||
}
|
||||
const failureMessage = this.verificationError.pan || 'PAN has not been verified.';
|
||||
const mismatch = failureMessage.toLowerCase().includes('does not match');
|
||||
|
||||
this.dialog
|
||||
.open(PanDeclarationDialogComponent, {
|
||||
width: '720px',
|
||||
maxWidth: '95vw',
|
||||
disableClose: true,
|
||||
data: {
|
||||
submittedName: this.kycData?.clientDisplayName || this.clientData?.displayName || '',
|
||||
submittedDob: this.clientDateOfBirth || '',
|
||||
panNumber: this.kycForm.value.panNumber || this.kycData?.panNumber || '',
|
||||
failureMessage,
|
||||
// Only a reported name/DOB mismatch gives the officer something to compare against.
|
||||
unverifiable: !mismatch,
|
||||
existing: this.panDeclarationTaken
|
||||
? {
|
||||
mismatchFields: this.kycData?.panDeclarationMismatchFields || 'NONE',
|
||||
nameOnPan: this.kycData?.panDeclarationNameOnPan || null,
|
||||
dobOnPan: this.parseApiDate(this.kycData?.panDeclarationDobOnPan),
|
||||
// The scan itself lives with the client's documents; the record keeps its name.
|
||||
file: null,
|
||||
fileName: this.kycData?.panDeclarationRemarks || ''
|
||||
}
|
||||
: null
|
||||
}
|
||||
})
|
||||
.afterClosed()
|
||||
.subscribe((result: PanDeclarationResult | undefined) => {
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
// The scan has to be filed against the client before the record says a declaration exists —
|
||||
// otherwise the PAN exception is waived by a document nobody can produce.
|
||||
if (result.file) {
|
||||
this.uploadPanDeclarationFile(result.file, () => this.writePanDeclaration(result));
|
||||
} else {
|
||||
this.writePanDeclaration(result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Files the signed declaration under the client's documents, then continues with `onDone`. */
|
||||
private uploadPanDeclarationFile(file: File, onDone: () => void): void {
|
||||
this.saving = true;
|
||||
this.errorMessage = null;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('name', 'PAN Declaration');
|
||||
formData.append(
|
||||
'description',
|
||||
`Signed PAN declaration for ${this.kycForm.value.panNumber || this.kycData?.panNumber || 'PAN'}`
|
||||
);
|
||||
|
||||
this.clientsService
|
||||
.verifyPAN(this.clientId, this.kycId)
|
||||
.uploadClientDocument(this.clientId, formData)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (response: any) => {
|
||||
this.verifying.pan = false;
|
||||
if (response?.changes?.panVerified) {
|
||||
this.verificationStatus.pan = 'VERIFIED';
|
||||
this.verificationDetails.pan = response.changes;
|
||||
this.loadKycData();
|
||||
} else {
|
||||
this.verificationStatus.pan = 'FAILED';
|
||||
this.verificationError.pan = 'PAN verification failed.';
|
||||
}
|
||||
next: () => {
|
||||
this.saving = false;
|
||||
onDone();
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.verifying.pan = false;
|
||||
this.verificationStatus.pan = 'FAILED';
|
||||
this.verificationError.pan =
|
||||
this.saving = false;
|
||||
this.errorMessage =
|
||||
err?.error?.defaultUserMessage ||
|
||||
err?.error?.developerMessage ||
|
||||
err?.message ||
|
||||
'Could not upload the signed declaration. Please try again.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Officer-initiated removal — the PAN exception is raised again on this same save. */
|
||||
removePanDeclaration(): void {
|
||||
if (this.panDeclarationTaken) {
|
||||
this.writePanDeclaration(null);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Persists (or clears) the declaration on the KYC record.
|
||||
*
|
||||
* `buildExceptionFields()` reads the declaration off `kycData`, so that has to be updated before
|
||||
* the payload is built — otherwise the save would carry the declaration and the PAN exception at
|
||||
* the same time, which is exactly the contradiction the declaration exists to prevent.
|
||||
*/
|
||||
private writePanDeclaration(declaration: PanDeclarationResult | null): void {
|
||||
this.saving = true;
|
||||
this.errorMessage = null;
|
||||
|
||||
const previous = {
|
||||
panDeclarationTaken: this.kycData?.panDeclarationTaken,
|
||||
panDeclarationMismatchFields: this.kycData?.panDeclarationMismatchFields,
|
||||
panDeclarationNameOnPan: this.kycData?.panDeclarationNameOnPan,
|
||||
panDeclarationDobOnPan: this.kycData?.panDeclarationDobOnPan,
|
||||
panDeclarationRemarks: this.kycData?.panDeclarationRemarks,
|
||||
panDeclarationTakenOn: this.kycData?.panDeclarationTakenOn
|
||||
};
|
||||
|
||||
const dateFormat = 'dd MMMM yyyy';
|
||||
const declarationFields = {
|
||||
panDeclarationTaken: !!declaration,
|
||||
panDeclarationMismatchFields: declaration?.mismatchFields || null,
|
||||
panDeclarationNameOnPan: declaration?.nameOnPan || null,
|
||||
panDeclarationDobOnPan: declaration?.dobOnPan
|
||||
? this.dateUtils.formatDate(declaration.dobOnPan, dateFormat)
|
||||
: null,
|
||||
// Names the uploaded declaration filed under the client's documents.
|
||||
panDeclarationRemarks: declaration?.fileName || null,
|
||||
panDeclarationTakenOn: declaration ? this.dateUtils.formatDate(new Date(), dateFormat) : null
|
||||
};
|
||||
|
||||
this.kycData = { ...(this.kycData || {}), ...declarationFields };
|
||||
|
||||
const payload: any = {
|
||||
locale: 'en',
|
||||
dateFormat,
|
||||
riskCategory: this.kycForm.value.riskCategory || 1,
|
||||
...declarationFields,
|
||||
...this.buildExceptionFields()
|
||||
};
|
||||
|
||||
this.clientsService
|
||||
.updateClientKyc(this.clientId, this.kycId, payload)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.saving = false;
|
||||
this.loadKycData();
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.saving = false;
|
||||
// Put the record back so the tab never shows a declaration the server did not accept.
|
||||
this.kycData = { ...(this.kycData || {}), ...previous };
|
||||
this.errorMessage =
|
||||
err?.error?.developerMessage ||
|
||||
err?.error?.defaultUserMessage ||
|
||||
err?.message ||
|
||||
'PAN verification failed. Please try again.';
|
||||
'Failed to save the PAN declaration.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Records the UIDAI enrolment receipt accepted in place of a verified Aadhaar.
|
||||
*
|
||||
* A customer who has applied for Aadhaar but has not been issued one has no number to put through
|
||||
* the OTP flow, so the check can never pass. The slip closes the item instead.
|
||||
*/
|
||||
takeAadhaarReceipt(): void {
|
||||
if (!this.kycId) {
|
||||
this.verificationError.aadhaar = 'KYC record not found. Save KYC details first.';
|
||||
return;
|
||||
}
|
||||
this.dialog
|
||||
.open(AadhaarReceiptDialogComponent, {
|
||||
width: '560px',
|
||||
maxWidth: '95vw',
|
||||
disableClose: true,
|
||||
data: {
|
||||
clientName: this.kycData?.clientDisplayName || this.clientData?.displayName || '',
|
||||
reason:
|
||||
this.verificationError.aadhaar ||
|
||||
'Aadhaar has not been verified. Record the enrolment slip if the customer has applied but not yet received their Aadhaar.',
|
||||
existing: this.aadhaarReceiptTaken
|
||||
? {
|
||||
enrolmentId: this.kycData?.aadhaarEnrolmentId || '',
|
||||
enrolmentDate: this.parseApiDate(this.kycData?.aadhaarEnrolmentDate),
|
||||
remarks: this.kycData?.aadhaarReceiptRemarks || ''
|
||||
}
|
||||
: null
|
||||
}
|
||||
})
|
||||
.afterClosed()
|
||||
.subscribe((result: AadhaarReceiptResult | undefined) => {
|
||||
if (result) {
|
||||
this.writeAadhaarReceipt(result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Officer-initiated removal — the Aadhaar exception is raised again on this same save. */
|
||||
removeAadhaarReceipt(): void {
|
||||
if (this.aadhaarReceiptTaken) {
|
||||
this.writeAadhaarReceipt(null);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Persists (or clears) the enrolment receipt on the KYC record.
|
||||
*
|
||||
* `buildExceptionFields()` reads the receipt off `kycData`, so that has to be updated before the
|
||||
* payload is built — otherwise the save would carry the receipt and the Aadhaar exception at the
|
||||
* same time, the contradiction the receipt exists to prevent.
|
||||
*/
|
||||
private writeAadhaarReceipt(receipt: AadhaarReceiptResult | null): void {
|
||||
this.saving = true;
|
||||
this.errorMessage = null;
|
||||
|
||||
const previous = {
|
||||
aadhaarReceiptTaken: this.kycData?.aadhaarReceiptTaken,
|
||||
aadhaarEnrolmentId: this.kycData?.aadhaarEnrolmentId,
|
||||
aadhaarEnrolmentDate: this.kycData?.aadhaarEnrolmentDate,
|
||||
aadhaarReceiptRemarks: this.kycData?.aadhaarReceiptRemarks,
|
||||
aadhaarReceiptTakenOn: this.kycData?.aadhaarReceiptTakenOn
|
||||
};
|
||||
|
||||
const dateFormat = 'dd MMMM yyyy';
|
||||
const receiptFields = {
|
||||
aadhaarReceiptTaken: !!receipt,
|
||||
aadhaarEnrolmentId: receipt?.enrolmentId || null,
|
||||
aadhaarEnrolmentDate: receipt?.enrolmentDate
|
||||
? this.dateUtils.formatDate(receipt.enrolmentDate, dateFormat)
|
||||
: null,
|
||||
aadhaarReceiptRemarks: receipt?.remarks || null,
|
||||
aadhaarReceiptTakenOn: receipt ? this.dateUtils.formatDate(new Date(), dateFormat) : null
|
||||
};
|
||||
|
||||
this.kycData = { ...(this.kycData || {}), ...receiptFields };
|
||||
|
||||
const payload: any = {
|
||||
locale: 'en',
|
||||
dateFormat,
|
||||
riskCategory: this.kycForm.value.riskCategory || 1,
|
||||
...receiptFields,
|
||||
...this.buildExceptionFields()
|
||||
};
|
||||
|
||||
this.clientsService
|
||||
.updateClientKyc(this.clientId, this.kycId, payload)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.saving = false;
|
||||
this.verificationError.aadhaar = null;
|
||||
this.loadKycData();
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.saving = false;
|
||||
// Put the record back so the tab never shows a receipt the server did not accept.
|
||||
this.kycData = { ...(this.kycData || {}), ...previous };
|
||||
this.errorMessage =
|
||||
err?.error?.developerMessage ||
|
||||
err?.error?.defaultUserMessage ||
|
||||
err?.message ||
|
||||
'Failed to save the Aadhaar enrolment receipt.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Fineract serialises dates as `[yyyy, M, d]`; the same field can also arrive as a string. */
|
||||
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;
|
||||
}
|
||||
|
||||
/** Show Aadhaar input in summary view for re-verification */
|
||||
startAadhaarReVerify(): void {
|
||||
this.showAadhaarReVerify = true;
|
||||
@@ -305,31 +792,33 @@ export class KycTabComponent implements OnInit, OnDestroy {
|
||||
this.aadhaarOtpSent = false;
|
||||
this.aadhaarOtp = '';
|
||||
|
||||
this.clientsService
|
||||
.sendAadhaarOtp(this.clientId, this.kycId, aadhaar)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (response: any) => {
|
||||
this.verifying.aadhaar = false;
|
||||
const refNumber =
|
||||
response?.changes?.aadhaarRefNumber ||
|
||||
response?.aadhaarRefNumber ||
|
||||
response?.changes?.referenceNumber ||
|
||||
response?.resourceId;
|
||||
this.aadhaarOtpSent = true;
|
||||
this.aadhaarOtpReferenceId = refNumber || null;
|
||||
this.verificationStatus.aadhaar = 'PENDING';
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.verifying.aadhaar = false;
|
||||
this.verificationStatus.aadhaar = 'FAILED';
|
||||
this.verificationError.aadhaar =
|
||||
err?.error?.developerMessage ||
|
||||
err?.error?.defaultUserMessage ||
|
||||
err?.message ||
|
||||
'Failed to send OTP. Please try again.';
|
||||
}
|
||||
});
|
||||
this.saveKycBeforeVerify(() => {
|
||||
this.clientsService
|
||||
.sendAadhaarOtp(this.clientId, this.kycId, aadhaar)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (response: any) => {
|
||||
this.verifying.aadhaar = false;
|
||||
const refNumber =
|
||||
response?.changes?.aadhaarRefNumber ||
|
||||
response?.aadhaarRefNumber ||
|
||||
response?.changes?.referenceNumber ||
|
||||
response?.resourceId;
|
||||
this.aadhaarOtpSent = true;
|
||||
this.aadhaarOtpReferenceId = refNumber || null;
|
||||
this.verificationStatus.aadhaar = 'PENDING';
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.verifying.aadhaar = false;
|
||||
this.verificationStatus.aadhaar = 'FAILED';
|
||||
this.verificationError.aadhaar =
|
||||
err?.error?.developerMessage ||
|
||||
err?.error?.defaultUserMessage ||
|
||||
err?.message ||
|
||||
'Failed to send OTP. Please try again.';
|
||||
}
|
||||
});
|
||||
}, 'aadhaar');
|
||||
}
|
||||
|
||||
/** Step 2: Verify OTP entered by user */
|
||||
@@ -350,7 +839,13 @@ export class KycTabComponent implements OnInit, OnDestroy {
|
||||
this.verificationStatus.aadhaar = 'VERIFIED';
|
||||
this.verificationDetails.aadhaar = response.changes;
|
||||
this.resetOtpState();
|
||||
this.loadKycData();
|
||||
// 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.
|
||||
if (this.aadhaarReceiptTaken) {
|
||||
this.writeAadhaarReceipt(null);
|
||||
} else {
|
||||
this.loadKycData();
|
||||
}
|
||||
} else {
|
||||
this.verificationStatus.aadhaar = 'FAILED';
|
||||
this.verificationError.aadhaar = 'OTP verification failed.';
|
||||
@@ -380,31 +875,33 @@ export class KycTabComponent implements OnInit, OnDestroy {
|
||||
this.verificationError.gstin = null;
|
||||
this.verificationDetails.gstin = null;
|
||||
|
||||
this.clientsService
|
||||
.verifyGSTIN(this.clientId, this.kycId)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (response: any) => {
|
||||
this.verifying.gstin = false;
|
||||
if (response?.changes?.gstinVerified) {
|
||||
this.verificationStatus.gstin = 'VERIFIED';
|
||||
this.verificationDetails.gstin = response.changes;
|
||||
this.loadKycData();
|
||||
} else {
|
||||
this.saveKycBeforeVerify(() => {
|
||||
this.clientsService
|
||||
.verifyGSTIN(this.clientId, this.kycId)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (response: any) => {
|
||||
this.verifying.gstin = false;
|
||||
if (response?.changes?.gstinVerified) {
|
||||
this.verificationStatus.gstin = 'VERIFIED';
|
||||
this.verificationDetails.gstin = response.changes;
|
||||
this.loadKycData();
|
||||
} else {
|
||||
this.verificationStatus.gstin = 'FAILED';
|
||||
this.verificationError.gstin = 'GSTIN verification failed.';
|
||||
}
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.verifying.gstin = false;
|
||||
this.verificationStatus.gstin = 'FAILED';
|
||||
this.verificationError.gstin = 'GSTIN verification failed.';
|
||||
this.verificationError.gstin =
|
||||
err?.error?.developerMessage ||
|
||||
err?.error?.defaultUserMessage ||
|
||||
err?.message ||
|
||||
'GSTIN verification failed. Please try again.';
|
||||
}
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.verifying.gstin = false;
|
||||
this.verificationStatus.gstin = 'FAILED';
|
||||
this.verificationError.gstin =
|
||||
err?.error?.developerMessage ||
|
||||
err?.error?.defaultUserMessage ||
|
||||
err?.message ||
|
||||
'GSTIN verification failed. Please try again.';
|
||||
}
|
||||
});
|
||||
});
|
||||
}, 'gstin');
|
||||
}
|
||||
|
||||
formatDate(date: any): string {
|
||||
@@ -551,13 +1048,43 @@ export class KycTabComponent implements OnInit, OnDestroy {
|
||||
|
||||
// PAN
|
||||
y = addLine('PAN Number:', kyc.panNumber || '—', y);
|
||||
y = addLine('PAN Status:', kyc.panVerified ? 'Verified' : 'Pending', y);
|
||||
// "Pending" would misdescribe a PAN that was checked, failed, and was settled by declaration —
|
||||
// nothing is pending on that record, and the certificate has to say what actually happened.
|
||||
y = addLine(
|
||||
'PAN Status:',
|
||||
kyc.panVerified ? 'Verified' : this.panDeclarationTaken ? 'Not Verified — Declaration Taken' : 'Pending',
|
||||
y
|
||||
);
|
||||
if (kyc.panVerifiedOn) y = addLine('PAN Verified On:', this.formatDate(kyc.panVerifiedOn), y);
|
||||
if (!kyc.panVerified && this.panDeclarationTaken) {
|
||||
y = addLine('Declared Mismatch:', this.panDeclarationMismatchLabel, y);
|
||||
if (kyc.panDeclarationNameOnPan) y = addLine('Name on PAN:', kyc.panDeclarationNameOnPan, y);
|
||||
if (kyc.panDeclarationDobOnPan) {
|
||||
y = addLine('DOB on PAN:', this.formatDate(kyc.panDeclarationDobOnPan), y);
|
||||
}
|
||||
if (kyc.panDeclarationTakenOn) {
|
||||
y = addLine('Declaration Taken On:', this.formatDate(kyc.panDeclarationTakenOn), y);
|
||||
}
|
||||
}
|
||||
|
||||
// Aadhaar
|
||||
y = addLine('Aadhaar Number:', kyc.aadhaarNumberMasked || '—', y);
|
||||
y = addLine('Aadhaar Status:', kyc.aadhaarVerified ? 'Verified' : 'Pending', y);
|
||||
// As with PAN: "Pending" would misdescribe a client who holds only an enrolment slip.
|
||||
y = addLine(
|
||||
'Aadhaar Status:',
|
||||
kyc.aadhaarVerified ? 'Verified' : this.aadhaarReceiptTaken ? 'Not Verified — Enrolment Receipt' : 'Pending',
|
||||
y
|
||||
);
|
||||
if (kyc.aadhaarVerifiedOn) y = addLine('Aadhaar Verified On:', this.formatDate(kyc.aadhaarVerifiedOn), y);
|
||||
if (!kyc.aadhaarVerified && this.aadhaarReceiptTaken) {
|
||||
if (kyc.aadhaarEnrolmentId) y = addLine('Enrolment ID:', kyc.aadhaarEnrolmentId, y);
|
||||
if (kyc.aadhaarEnrolmentDate) {
|
||||
y = addLine('Enrolment Date:', this.formatDate(kyc.aadhaarEnrolmentDate), y);
|
||||
}
|
||||
if (kyc.aadhaarReceiptTakenOn) {
|
||||
y = addLine('Receipt Recorded On:', this.formatDate(kyc.aadhaarReceiptTakenOn), y);
|
||||
}
|
||||
}
|
||||
|
||||
// PAN-Aadhaar Link
|
||||
const seedingStatus =
|
||||
|
||||
@@ -98,12 +98,6 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Client ID Column -->
|
||||
<ng-container matColumnDef="accountNumber">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Client ID</th>
|
||||
<td mat-cell *matCellDef="let row" class="cell-mono">{{ row.id }}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- CIF Number Column -->
|
||||
<ng-container matColumnDef="cifNumber">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.CIF Number' | translate }}</th>
|
||||
|
||||
@@ -88,7 +88,6 @@ export class ClientsComponent implements OnInit {
|
||||
|
||||
displayedColumns = [
|
||||
'displayName',
|
||||
'accountNumber',
|
||||
'cifNumber',
|
||||
'legalForm',
|
||||
'status',
|
||||
|
||||
@@ -62,6 +62,7 @@ import { ClientFamilyMembersStepComponent } from './client-stepper/client-family
|
||||
import { ClientPreviewStepComponent } from './client-stepper/client-preview-step/client-preview-step.component';
|
||||
import { ClientAddressStepComponent } from './client-stepper/client-address-step/client-address-step.component';
|
||||
import { ClientFamilyMemberDialogComponent } from './client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component';
|
||||
import { ClientFamilyMemberChildDialogComponent } from './client-stepper/client-family-members-step/client-family-member-child-dialog/client-family-member-child-dialog.component';
|
||||
import { CaptureImageDialogComponent } from './clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component';
|
||||
import { AddClientCollateralComponent } from './clients-view/client-actions/add-client-collateral/add-client-collateral.component';
|
||||
import { ClientDatatableStepComponent } from './client-stepper/client-datatable-step/client-datatable-step.component';
|
||||
@@ -127,6 +128,7 @@ import { Form60TabComponent } from './clients-view/form60-tab/form60-tab.compone
|
||||
ClientPreviewStepComponent,
|
||||
ClientAddressStepComponent,
|
||||
ClientFamilyMemberDialogComponent,
|
||||
ClientFamilyMemberChildDialogComponent,
|
||||
CaptureImageDialogComponent,
|
||||
AddClientCollateralComponent,
|
||||
ClientDatatableStepComponent,
|
||||
|
||||
@@ -123,6 +123,20 @@ export class ClientsService {
|
||||
return this.http.post(`/clients/${clientId}/edit/reject`, { rejectReason: rejectReason || '' });
|
||||
}
|
||||
|
||||
/** Fetches the exact email content (subject, body, sentAt, openedAt) for a given pending edit.
|
||||
* Only populated after the Checker has approved and the send succeeded. */
|
||||
getClientEditEmailPreview(clientId: string | number, pendingEditId: string | number) {
|
||||
return this.http.get<{
|
||||
emailSubject: string | null;
|
||||
emailBody: string | null;
|
||||
emailSent: boolean;
|
||||
emailSentAt: string | null;
|
||||
emailOpenedAt: string | null;
|
||||
emailFrom: string | null;
|
||||
emailTo: string | null;
|
||||
}>(`/clients/${clientId}/edit/${pendingEditId}/email-preview`);
|
||||
}
|
||||
|
||||
getClientDataAndTemplate(clientId: string) {
|
||||
const httpParams = new HttpParams().set('template', 'true').set('staffInSelectedOfficeOnly', 'true');
|
||||
return this.http.get(`/clients/${clientId}`, { params: httpParams });
|
||||
@@ -795,6 +809,15 @@ export class ClientsService {
|
||||
return this.http.get<any[]>('/kyc/risk-rules');
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a rule to the AML catalog. Amount/window details in the payload also create the
|
||||
* matching live-transaction rule server side; the response is the persisted rule in the same
|
||||
* shape as {@link getClientRiskRules}.
|
||||
*/
|
||||
createClientRiskRule(rule: any): Observable<any> {
|
||||
return this.http.post('/kyc/risk-rules', rule);
|
||||
}
|
||||
|
||||
/** Fetch code values by code ID */
|
||||
getCodeValuesById(codeId: number): Observable<any[]> {
|
||||
return this.http.get<any[]>(`/codes/${codeId}/codevalues`).pipe(catchError(() => of([])));
|
||||
@@ -958,4 +981,33 @@ export class ClientsService {
|
||||
dispatchWelcomeKit(clientId: string | number, data: any): Observable<any> {
|
||||
return this.http.post(`/clients/${clientId}/welcomekit`, data);
|
||||
}
|
||||
|
||||
updateWelcomeKitStatus(welcomeKitId: number, status: string): Observable<any> {
|
||||
return this.http.put(`/welcomekit/${welcomeKitId}`, { status });
|
||||
}
|
||||
|
||||
getKycExceptions(resolved = false): Observable<any[]> {
|
||||
return this.http.get<any[]>(`/kyc/exceptions?resolved=${resolved}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Records a KYC-exception outreach attempt against a customer, and — for the SMS, EMAIL and
|
||||
* WHATSAPP channels — actually transmits the notice.
|
||||
*
|
||||
* The destination is resolved server-side from the client record; it is deliberately not part of
|
||||
* this payload, so a tampered request cannot redirect a KYC notice elsewhere.
|
||||
*
|
||||
* Resolves with HTTP 200 even when delivery fails — inspect `deliveryStatus` / `delivered` on the
|
||||
* response rather than assuming success, since the log row is written either way.
|
||||
*/
|
||||
saveKycContactLog(
|
||||
clientId: string | number,
|
||||
data: { channel: string; notes: string; officerName?: string }
|
||||
): Observable<any> {
|
||||
return this.http.post(`/kyc/exceptions/${clientId}/contact-log`, data);
|
||||
}
|
||||
|
||||
getKycContactLog(clientId: string | number): Observable<any[]> {
|
||||
return this.http.get<any[]>(`/kyc/exceptions/${clientId}/contact-log`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,6 +75,8 @@
|
||||
[clientId]="createdClientId"
|
||||
[constitutionMeta]="clientGeneralStep?.selectedConstitution"
|
||||
[entityName]="clientGeneralStep?.createClientForm?.get('fullname')?.value || ''"
|
||||
[verificationName]="clientGeneralStep?.verificationName || ''"
|
||||
[verificationDateOfBirth]="clientGeneralStep?.verificationDateOfBirth || null"
|
||||
[readOnly]="isTabReadOnly(1)"
|
||||
[calculatedRisk]="clientGeneralStep?.calculatedRisk"
|
||||
></mifosx-client-kyc-step>
|
||||
|
||||
@@ -223,6 +223,15 @@ export class CreateClientComponent {
|
||||
// KYC tab — block when the kyc form has unfilled required fields
|
||||
// (kycDocumentName / kycDocumentNumber / pattern errors on PAN / Aadhaar etc.)
|
||||
const kf = this.clientKycStep?.kycForm;
|
||||
if (kf && !kf.valid) {
|
||||
const invalid = [];
|
||||
for (const name in kf.controls) {
|
||||
if (kf.controls[name].invalid) {
|
||||
invalid.push({ name, errors: kf.controls[name].errors, value: kf.controls[name].value });
|
||||
}
|
||||
}
|
||||
console.log('--- KYC Form is INVALID. Offending controls:', invalid);
|
||||
}
|
||||
return !kf || kf.valid;
|
||||
}
|
||||
if (this.legalFormType === 2) {
|
||||
@@ -430,8 +439,22 @@ export class CreateClientComponent {
|
||||
}
|
||||
this.validationError = '';
|
||||
// Save KYC
|
||||
if (this.clientKycStep?.hasKycData && !this.clientKycStep.kycId) {
|
||||
this.clientsService.saveClientKyc(clientId, this.clientKycStep.kycData).subscribe({ error: () => {} });
|
||||
if (this.clientKycStep?.hasKycData) {
|
||||
if (!this.clientKycStep.kycId) {
|
||||
this.clientsService.saveClientKyc(clientId, this.clientKycStep.kycData).subscribe({
|
||||
next: (res: any) => {
|
||||
if (this.clientKycStep) {
|
||||
this.clientKycStep.kycId = res?.resourceId?.toString() || res?.entityId?.toString() || '';
|
||||
}
|
||||
},
|
||||
error: () => {}
|
||||
});
|
||||
} else {
|
||||
const { kycType, ...updatePayload } = this.clientKycStep.kycData;
|
||||
this.clientsService
|
||||
.updateClientKyc(clientId, this.clientKycStep.kycId, updatePayload)
|
||||
.subscribe({ error: () => {} });
|
||||
}
|
||||
}
|
||||
// Upload photo & signature
|
||||
if (this.clientKycStep?.photographFile) {
|
||||
@@ -696,12 +719,20 @@ export class CreateClientComponent {
|
||||
// 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({
|
||||
next: () => navigateToClient(),
|
||||
error: () => navigateToClient()
|
||||
});
|
||||
// Save/update KYC to ensure latest exception fields are persisted
|
||||
if (this.clientKycStep?.hasKycData) {
|
||||
if (!this.clientKycStep.kycId) {
|
||||
this.clientsService.saveClientKyc(clientId, this.clientKycStep.kycData).subscribe({
|
||||
next: () => navigateToClient(),
|
||||
error: () => navigateToClient()
|
||||
});
|
||||
} else {
|
||||
const { kycType, ...updatePayload } = this.clientKycStep.kycData;
|
||||
this.clientsService.updateClientKyc(clientId, this.clientKycStep.kycId, updatePayload).subscribe({
|
||||
next: () => navigateToClient(),
|
||||
error: () => navigateToClient()
|
||||
});
|
||||
}
|
||||
} else {
|
||||
navigateToClient();
|
||||
}
|
||||
@@ -802,6 +833,9 @@ export class CreateClientComponent {
|
||||
* Mirrors identities-tab.createIdentifierWithDocs.
|
||||
*/
|
||||
private saveAddressProof(clientId: string) {
|
||||
if (this.clientIndiaAddressStep?.existingAddressProofIdentifierId) {
|
||||
return;
|
||||
}
|
||||
const payload = this.clientIndiaAddressStep?.addressProofPayload;
|
||||
if (!payload?.proofId) return;
|
||||
|
||||
@@ -817,6 +851,9 @@ export class CreateClientComponent {
|
||||
next: (res: any) => {
|
||||
const identifierId = res?.resourceId;
|
||||
if (!identifierId) return;
|
||||
if (this.clientIndiaAddressStep) {
|
||||
this.clientIndiaAddressStep.existingAddressProofIdentifierId = identifierId.toString();
|
||||
}
|
||||
for (const entry of payload.files) {
|
||||
const formData = new FormData();
|
||||
formData.append('name', `${proofName} — ${entry.slot}`);
|
||||
@@ -833,6 +870,9 @@ export class CreateClientComponent {
|
||||
* + upload each selected file as a document attached to that identifier.
|
||||
*/
|
||||
private saveKycDocProof(clientId: string) {
|
||||
if (this.clientKycStep?.existingKycIdentifierId) {
|
||||
return;
|
||||
}
|
||||
const payload = this.clientKycStep?.kycDocPayload;
|
||||
if (!payload?.proofId || !payload?.files?.length) return;
|
||||
|
||||
@@ -860,6 +900,9 @@ export class CreateClientComponent {
|
||||
next: (res: any) => {
|
||||
const identifierId = res?.resourceId;
|
||||
if (!identifierId) return;
|
||||
if (this.clientKycStep) {
|
||||
this.clientKycStep.existingKycIdentifierId = identifierId.toString();
|
||||
}
|
||||
for (const entry of payload.files) {
|
||||
const formData = new FormData();
|
||||
formData.append('name', `${proofName} — ${entry.slot}`);
|
||||
@@ -884,8 +927,45 @@ export class CreateClientComponent {
|
||||
return this.clientsService.getKycProofTypes('id').pipe(
|
||||
map((res: any) => {
|
||||
const list: any[] = res?.idProofs || [];
|
||||
const targetName = (proofName || '').trim().toLowerCase();
|
||||
const match = list.find((p: any) => (p?.name || '').trim().toLowerCase() === targetName);
|
||||
const cleanStr = (s: string) => (s || '').toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
const target = cleanStr(proofName || proofId);
|
||||
|
||||
// 1. Try exact code/name match
|
||||
let match = list.find((p: any) => {
|
||||
const pcode = cleanStr(p.code);
|
||||
const pname = cleanStr(p.name);
|
||||
return pcode === target || pname === target;
|
||||
});
|
||||
|
||||
// 2. Try loose contains/includes match
|
||||
if (!match) {
|
||||
match = list.find((p: any) => {
|
||||
const pcode = cleanStr(p.code);
|
||||
const pname = cleanStr(p.name);
|
||||
return pcode.includes(target) || pname.includes(target) || target.includes(pcode) || target.includes(pname);
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Specific fallbacks for common keywords
|
||||
if (!match && target.includes('voter')) {
|
||||
match = list.find((p: any) => {
|
||||
const name = cleanStr(p.name);
|
||||
return name.includes('voter') || name.includes('epic');
|
||||
});
|
||||
}
|
||||
if (!match && target.includes('aadhaar')) {
|
||||
match = list.find((p: any) => cleanStr(p.name).includes('aadhaar'));
|
||||
}
|
||||
if (!match && target.includes('passport')) {
|
||||
match = list.find((p: any) => cleanStr(p.name).includes('passport'));
|
||||
}
|
||||
if (!match && target.includes('driving')) {
|
||||
match = list.find((p: any) => cleanStr(p.name).includes('drive') || cleanStr(p.name).includes('licen'));
|
||||
}
|
||||
if (!match && target.includes('pan')) {
|
||||
match = list.find((p: any) => cleanStr(p.name).includes('pan'));
|
||||
}
|
||||
|
||||
return (match?.id ?? null) as number | null;
|
||||
})
|
||||
);
|
||||
|
||||
@@ -84,14 +84,70 @@
|
||||
<mat-icon>phone_iphone</mat-icon>
|
||||
<span>Mobile Number</span>
|
||||
</div>
|
||||
<div class="contact-verify-panel__exception-row" style="margin-bottom: 12px">
|
||||
<mat-checkbox
|
||||
[checked]="oldMobileNotAccessible"
|
||||
(change)="onOldMobileNotAccessibleToggle($event.checked)"
|
||||
color="primary"
|
||||
>
|
||||
Old mobile number not accessible (lost / deactivated SIM)
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<div class="contact-verify-panel__grid">
|
||||
<mifosx-client-contact-otp-block
|
||||
[clientId]="clientId"
|
||||
channel="MOBILE"
|
||||
[destination]="contactChanges.oldMobile"
|
||||
label="Old Mobile Number"
|
||||
(stateChange)="onOldMobileOtpState($event)"
|
||||
></mifosx-client-contact-otp-block>
|
||||
@if (!oldMobileNotAccessible) {
|
||||
<mifosx-client-contact-otp-block
|
||||
[clientId]="clientId"
|
||||
channel="MOBILE"
|
||||
[destination]="contactChanges.oldMobile"
|
||||
label="Old Mobile Number"
|
||||
(stateChange)="onOldMobileOtpState($event)"
|
||||
></mifosx-client-contact-otp-block>
|
||||
} @else {
|
||||
<div
|
||||
class="fir-upload-box"
|
||||
style="padding: 12px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc"
|
||||
>
|
||||
<div style="font-weight: 500; font-size: 13px; margin-bottom: 6px; color: #475569">
|
||||
Upload Police Complaint / FIR Copy for Lost Mobile
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<input
|
||||
type="file"
|
||||
(change)="onFirFileSelected($event)"
|
||||
accept=".pdf,.jpg,.jpeg,.png"
|
||||
#firFileInput
|
||||
hidden
|
||||
/>
|
||||
<button
|
||||
mat-stroked-button
|
||||
type="button"
|
||||
(click)="firFileInput.click()"
|
||||
[disabled]="uploadingFir"
|
||||
>
|
||||
<mat-icon>upload_file</mat-icon>
|
||||
{{ firFileName ? firFileName : 'Select FIR Document' }}
|
||||
</button>
|
||||
@if (uploadingFir) {
|
||||
<mat-progress-spinner mode="indeterminate" diameter="20"></mat-progress-spinner>
|
||||
}
|
||||
@if (firDocumentId && !uploadingFir) {
|
||||
<span
|
||||
style="
|
||||
color: #16a34a;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<mat-icon style="font-size: 16px; width: 16px; height: 16px">check_circle</mat-icon> FIR
|
||||
Uploaded Successfully
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<mifosx-client-contact-otp-block
|
||||
[clientId]="clientId"
|
||||
channel="MOBILE"
|
||||
@@ -164,6 +220,8 @@
|
||||
[isNonIndividual]="legalFormType === 2"
|
||||
[isMinor]="clientGeneralStep?.isMinor || false"
|
||||
[clientId]="clientId"
|
||||
[verificationName]="clientGeneralStep?.verificationName || ''"
|
||||
[verificationDateOfBirth]="clientGeneralStep?.verificationDateOfBirth || null"
|
||||
[readOnly]="isTabReadOnly(1)"
|
||||
[calculatedRisk]="clientGeneralStep?.calculatedRisk"
|
||||
></mifosx-client-kyc-step>
|
||||
@@ -286,7 +344,6 @@
|
||||
[degreeQualificationOptions]="clientGeneralStep?.degreeQualificationOptions || []"
|
||||
[religionOptions]="clientGeneralStep?.religionOptions || []"
|
||||
[socialCategoryOptions]="clientGeneralStep?.socialCategoryOptions || []"
|
||||
(submitEvent)="submit()"
|
||||
></mifosx-client-preview-step>
|
||||
</div>
|
||||
</mat-tab>
|
||||
@@ -294,9 +351,11 @@
|
||||
|
||||
<!-- Bottom Action Bar -->
|
||||
<div class="action-bar">
|
||||
<button mat-raised-button [routerLink]="['../']" class="cancel-btn">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
@if (selectedTabIndex < totalTabs - 1) {
|
||||
<button mat-raised-button [routerLink]="['../']" class="cancel-btn">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
}
|
||||
<div class="action-bar-right">
|
||||
@if (selectedTabIndex > 0) {
|
||||
<button mat-raised-button (click)="selectedTabIndex = selectedTabIndex - 1">
|
||||
@@ -305,15 +364,7 @@
|
||||
</button>
|
||||
}
|
||||
@if (selectedTabIndex < totalTabs - 1) {
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="onNext()"
|
||||
[disabled]="!currentStepValid"
|
||||
[matTooltip]="currentStepBlockerMessage"
|
||||
[matTooltipDisabled]="currentStepValid"
|
||||
matTooltipPosition="above"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="onNext()" [disabled]="savingClient || !currentStepValid">
|
||||
@if (savingClient) {
|
||||
<mat-progress-spinner diameter="18" mode="indeterminate" class="m-r-10"></mat-progress-spinner>
|
||||
Saving...
|
||||
@@ -327,15 +378,10 @@
|
||||
}
|
||||
</button>
|
||||
}
|
||||
@if (selectedTabIndex === totalTabs - 1 && areFormvalids()) {
|
||||
<button mat-raised-button color="primary" (click)="submit()" [disabled]="savingClient">
|
||||
@if (savingClient) {
|
||||
<mat-progress-spinner diameter="18" mode="indeterminate" class="m-r-10"></mat-progress-spinner>
|
||||
Saving...
|
||||
} @else {
|
||||
<fa-icon icon="check" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
}
|
||||
@if (selectedTabIndex === totalTabs - 1) {
|
||||
<button mat-raised-button color="primary" [routerLink]="['../']">
|
||||
<fa-icon icon="check" class="m-r-10"></fa-icon>
|
||||
Finish
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -33,6 +33,7 @@ import { ContactOtpBlockComponent, ContactOtpState } from './contact-otp-block/c
|
||||
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDivider } from '@angular/material/divider';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
||||
@@ -51,6 +52,7 @@ import { ORIGINAL_VALUES_PAYLOAD_KEY, buildOriginalValuesSnapshot } from '../sha
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatTabsModule,
|
||||
MatIconModule,
|
||||
MatCheckboxModule,
|
||||
MatDivider,
|
||||
FaIconComponent,
|
||||
MatProgressSpinner,
|
||||
@@ -108,6 +110,13 @@ export class EditClientComponent {
|
||||
newMobileOtpId: number | null = null;
|
||||
oldMobileVerified = false;
|
||||
newMobileVerified = false;
|
||||
|
||||
// FIR exception flow properties for inaccessible old mobile number
|
||||
oldMobileNotAccessible = false;
|
||||
firFileName = '';
|
||||
firDocumentId: number | null = null;
|
||||
uploadingFir = false;
|
||||
|
||||
oldEmailOtpId: number | null = null;
|
||||
newEmailOtpId: number | null = null;
|
||||
oldEmailVerified = false;
|
||||
@@ -215,11 +224,15 @@ export class EditClientComponent {
|
||||
return this.detectSensitiveFieldChanges(this.clientDataAndTemplate);
|
||||
}
|
||||
|
||||
/** Whether every OTP block required by the fields that actually changed has been verified. */
|
||||
/** Whether every OTP block required by the fields that actually changed has been verified
|
||||
* (or the FIR exception has been uploaded in place of old-mobile OTP verification). */
|
||||
get contactVerificationComplete(): boolean {
|
||||
const changes = this.contactChanges;
|
||||
if (changes.mobileChanged && !(this.oldMobileVerified && this.newMobileVerified)) {
|
||||
return false;
|
||||
if (changes.mobileChanged) {
|
||||
const isOldSatisfied = this.oldMobileNotAccessible ? this.firDocumentId != null : this.oldMobileVerified;
|
||||
if (!isOldSatisfied || !this.newMobileVerified) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (changes.emailChanged && !(this.oldEmailVerified && this.newEmailVerified)) {
|
||||
return false;
|
||||
@@ -227,6 +240,43 @@ export class EditClientComponent {
|
||||
return true;
|
||||
}
|
||||
|
||||
/** Toggle the "old mobile not accessible" exception — clears any in-progress old-mobile OTP. */
|
||||
onOldMobileNotAccessibleToggle(checked?: boolean): void {
|
||||
if (checked !== undefined) {
|
||||
this.oldMobileNotAccessible = checked;
|
||||
}
|
||||
if (this.oldMobileNotAccessible) {
|
||||
this.oldMobileOtpId = null;
|
||||
this.oldMobileVerified = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Upload the FIR / police-complaint copy that substitutes for old-mobile OTP verification. */
|
||||
onFirFileSelected(event: any): void {
|
||||
const file: File = event.target?.files?.[0];
|
||||
if (!file) return;
|
||||
this.firFileName = file.name;
|
||||
this.uploadingFir = true;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('name', 'FIR - Lost Mobile Number');
|
||||
formData.append('description', 'FIR police complaint copy for lost mobile number verification exception');
|
||||
|
||||
this.clientsService.uploadClientDocument(this.clientId, formData).subscribe({
|
||||
next: (res: any) => {
|
||||
this.uploadingFir = false;
|
||||
this.firDocumentId = res?.resourceId || res?.id || null;
|
||||
this.snackBar.open('FIR document uploaded successfully', 'Close', { duration: 3000 });
|
||||
},
|
||||
error: () => {
|
||||
this.uploadingFir = false;
|
||||
this.firDocumentId = null;
|
||||
this.snackBar.open('Failed to upload FIR document', 'Close', { duration: 4000 });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onOldMobileOtpState(state: ContactOtpState): void {
|
||||
this.oldMobileOtpId = state.otpId;
|
||||
this.oldMobileVerified = state.verified;
|
||||
@@ -254,6 +304,10 @@ export class EditClientComponent {
|
||||
this.newMobileOtpId = null;
|
||||
this.oldMobileVerified = false;
|
||||
this.newMobileVerified = false;
|
||||
this.oldMobileNotAccessible = false;
|
||||
this.firFileName = '';
|
||||
this.firDocumentId = null;
|
||||
this.uploadingFir = false;
|
||||
this.oldEmailOtpId = null;
|
||||
this.newEmailOtpId = null;
|
||||
this.oldEmailVerified = false;
|
||||
@@ -439,7 +493,11 @@ export class EditClientComponent {
|
||||
// email's when BOTH changed in the same save. See the class-level JSDoc above the OTP
|
||||
// state fields for the full naming rationale.
|
||||
if (changedFields.mobileChanged) {
|
||||
clientData.mobileOldOtpId = this.oldMobileOtpId;
|
||||
if (this.oldMobileNotAccessible && this.firDocumentId) {
|
||||
(clientData as any).oldMobileVerificationExceptionDocumentId = this.firDocumentId;
|
||||
} else {
|
||||
clientData.mobileOldOtpId = this.oldMobileOtpId;
|
||||
}
|
||||
clientData.mobileNewOtpId = this.newMobileOtpId;
|
||||
}
|
||||
if (changedFields.emailChanged) {
|
||||
@@ -630,16 +688,36 @@ export class EditClientComponent {
|
||||
|
||||
private detectSensitiveFieldChanges(originalData: any) {
|
||||
const form = this.clientGeneralForm;
|
||||
if (!form || !originalData) {
|
||||
return {
|
||||
nameChanged: false,
|
||||
mobileChanged: false,
|
||||
emailChanged: false,
|
||||
dobChanged: false,
|
||||
oldName: '',
|
||||
newName: '',
|
||||
oldMobile: '',
|
||||
newMobile: '',
|
||||
oldEmail: '',
|
||||
newEmail: '',
|
||||
oldDob: '',
|
||||
newDob: ''
|
||||
};
|
||||
}
|
||||
|
||||
const mobileControl = form.get('mobileNo');
|
||||
const emailControl = form.get('emailAddress');
|
||||
|
||||
// Trimmed so browser autofill adding invisible leading/trailing whitespace never reads as
|
||||
// a "change" — the masked preview shown in the Verify Contact Change panel only reveals the
|
||||
// first couple of characters, so a whitespace-only difference is otherwise invisible to the
|
||||
// user and just looks like the panel appeared for no reason. These trimmed-but-original-case
|
||||
// values are what get returned/sent as the actual OTP destination and saved value — only the
|
||||
// *comparison* (below) is further case-normalized for email, so we never silently rewrite the
|
||||
// customer's email casing into the saved record or the OTP destination.
|
||||
const newMobile = (form?.get('mobileNo')?.value || '').trim();
|
||||
const newEmail = (form?.get('emailAddress')?.value || '').trim();
|
||||
const newDobRaw = form?.get('dateOfBirth')?.value;
|
||||
// *comparison* (below) is further normalized for mobile/email, so we never silently rewrite the
|
||||
// customer's saved value or the OTP destination.
|
||||
const newMobile = (mobileControl?.value || '').toString().trim();
|
||||
const newEmail = (emailControl?.value || '').toString().trim();
|
||||
const newDobRaw = form.get('dateOfBirth')?.value;
|
||||
// Local calendar date, NOT `.toISOString()` — that converts to UTC first, which silently
|
||||
// shifts the date by a day in any positive-UTC-offset timezone (e.g. India, UTC+5:30:
|
||||
// midnight local on the 15th becomes 18:30 UTC on the 14th). That made this comparison
|
||||
@@ -647,8 +725,8 @@ export class EditClientComponent {
|
||||
// touched the date field, purely because the Date object round-tripped through the picker.
|
||||
const newDob = newDobRaw instanceof Date ? this.toLocalDateString(newDobRaw) : newDobRaw || '';
|
||||
|
||||
const oldMobile = (originalData.mobileNo || '').trim();
|
||||
const oldEmail = (originalData.emailAddress || '').trim();
|
||||
const oldMobile = (originalData.mobileNo || '').toString().trim();
|
||||
const oldEmail = (originalData.emailAddress || '').toString().trim();
|
||||
const oldDobRaw = originalData.dateOfBirth;
|
||||
const oldDob = Array.isArray(oldDobRaw)
|
||||
? `${oldDobRaw[0]}-${String(oldDobRaw[1]).padStart(2, '0')}-${String(oldDobRaw[2]).padStart(2, '0')}`
|
||||
@@ -681,12 +759,25 @@ export class EditClientComponent {
|
||||
fullname: originalData.fullname || ''
|
||||
});
|
||||
|
||||
// Normalize phone numbers by stripping non-digit characters (+91 9009009009 -> 9009009009)
|
||||
const normPhone = (val: string) => val.replace(/\D/g, '');
|
||||
const newMobileNorm = normPhone(newMobile);
|
||||
const oldMobileNorm = normPhone(oldMobile);
|
||||
|
||||
// Mobile/Email are considered changed ONLY when the control has been edited (dirty) AND
|
||||
// normalized values differ — otherwise a re-render/reformat of the control by the framework
|
||||
// (never actually touched by the user) would falsely surface the dual-OTP verification panel.
|
||||
const mobileChanged =
|
||||
!!oldMobileNorm && !!newMobileNorm && !!mobileControl?.dirty && newMobileNorm !== oldMobileNorm;
|
||||
// Case-insensitive: emails are not case-sensitive in practice, and comparing raw case
|
||||
// would flag a change (surfacing the dual-OTP panel) even when nothing meaningful changed.
|
||||
const emailChanged =
|
||||
!!oldEmail && !!newEmail && !!emailControl?.dirty && newEmail.toLowerCase() !== oldEmail.toLowerCase();
|
||||
|
||||
return {
|
||||
nameChanged: newName !== oldName,
|
||||
mobileChanged: newMobile !== oldMobile,
|
||||
// Case-insensitive: emails are not case-sensitive in practice, and comparing raw case
|
||||
// would flag a change (surfacing the dual-OTP panel) even when nothing meaningful changed.
|
||||
emailChanged: newEmail.toLowerCase() !== oldEmail.toLowerCase(),
|
||||
mobileChanged,
|
||||
emailChanged,
|
||||
dobChanged: newDob !== oldDob,
|
||||
oldName,
|
||||
newName,
|
||||
@@ -930,6 +1021,9 @@ export class EditClientComponent {
|
||||
* Mirrors identities-tab.createIdentifierWithDocs.
|
||||
*/
|
||||
private saveAddressProof(clientId: string) {
|
||||
if (this.clientIndiaAddressStep?.existingAddressProofIdentifierId) {
|
||||
return;
|
||||
}
|
||||
const payload = this.clientIndiaAddressStep?.addressProofPayload;
|
||||
if (!payload?.proofId) return;
|
||||
|
||||
@@ -945,6 +1039,9 @@ export class EditClientComponent {
|
||||
next: (res: any) => {
|
||||
const identifierId = res?.resourceId;
|
||||
if (!identifierId) return;
|
||||
if (this.clientIndiaAddressStep) {
|
||||
this.clientIndiaAddressStep.existingAddressProofIdentifierId = identifierId.toString();
|
||||
}
|
||||
for (const entry of payload.files) {
|
||||
const formData = new FormData();
|
||||
formData.append('name', `${proofName} — ${entry.slot}`);
|
||||
@@ -965,6 +1062,21 @@ export class EditClientComponent {
|
||||
if (!payload?.proofId || !payload?.files?.length) return;
|
||||
|
||||
const proofName = payload.proof?.name || 'KYC Document';
|
||||
|
||||
const uploadFiles = (identifierId: string) => {
|
||||
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: () => {} });
|
||||
}
|
||||
};
|
||||
|
||||
if (this.clientKycStep?.existingKycIdentifierId) {
|
||||
uploadFiles(this.clientKycStep.existingKycIdentifierId);
|
||||
return;
|
||||
}
|
||||
|
||||
// The KYC step's chip-picker carries `id` as a doc-type CODE string (e.g. "AADHAAR").
|
||||
// The backend ClientIdentifierRequest.documentTypeId is a Long, so a string proofId
|
||||
// trips Jackson → HttpMessageNotReadableException → 400. Resolve to numeric CodeValue
|
||||
@@ -984,12 +1096,10 @@ export class EditClientComponent {
|
||||
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: () => {} });
|
||||
if (this.clientKycStep) {
|
||||
this.clientKycStep.existingKycIdentifierId = identifierId.toString();
|
||||
}
|
||||
uploadFiles(identifierId.toString());
|
||||
},
|
||||
error: () => {}
|
||||
});
|
||||
@@ -1007,8 +1117,45 @@ export class EditClientComponent {
|
||||
return this.clientsService.getKycProofTypes('id').pipe(
|
||||
map((res: any) => {
|
||||
const list: any[] = res?.idProofs || [];
|
||||
const targetName = (proofName || '').trim().toLowerCase();
|
||||
const match = list.find((p: any) => (p?.name || '').trim().toLowerCase() === targetName);
|
||||
const cleanStr = (s: string) => (s || '').toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
const target = cleanStr(proofName || proofId);
|
||||
|
||||
// 1. Try exact code/name match
|
||||
let match = list.find((p: any) => {
|
||||
const pcode = cleanStr(p.code);
|
||||
const pname = cleanStr(p.name);
|
||||
return pcode === target || pname === target;
|
||||
});
|
||||
|
||||
// 2. Try loose contains/includes match
|
||||
if (!match) {
|
||||
match = list.find((p: any) => {
|
||||
const pcode = cleanStr(p.code);
|
||||
const pname = cleanStr(p.name);
|
||||
return pcode.includes(target) || pname.includes(target) || target.includes(pcode) || target.includes(pname);
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Specific fallbacks for common keywords
|
||||
if (!match && target.includes('voter')) {
|
||||
match = list.find((p: any) => {
|
||||
const name = cleanStr(p.name);
|
||||
return name.includes('voter') || name.includes('epic');
|
||||
});
|
||||
}
|
||||
if (!match && target.includes('aadhaar')) {
|
||||
match = list.find((p: any) => cleanStr(p.name).includes('aadhaar'));
|
||||
}
|
||||
if (!match && target.includes('passport')) {
|
||||
match = list.find((p: any) => cleanStr(p.name).includes('passport'));
|
||||
}
|
||||
if (!match && target.includes('driving')) {
|
||||
match = list.find((p: any) => cleanStr(p.name).includes('drive') || cleanStr(p.name).includes('licen'));
|
||||
}
|
||||
if (!match && target.includes('pan')) {
|
||||
match = list.find((p: any) => cleanStr(p.name).includes('pan'));
|
||||
}
|
||||
|
||||
return (match?.id ?? null) as number | null;
|
||||
})
|
||||
);
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* 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 {
|
||||
deriveKycDocumentRenewal,
|
||||
kycDocumentNeedsAttention,
|
||||
KYC_DOCUMENT_EXPIRY_WARNING_DAYS,
|
||||
KYC_DOCUMENT_RENEWAL_YEARS
|
||||
} from './kyc-document-renewal.util';
|
||||
|
||||
const TODAY = new Date(2026, 7, 7); // 07 Aug 2026
|
||||
|
||||
const at = (y: number, m: number, d: number) => new Date(y, m - 1, d);
|
||||
|
||||
const check = (issueDate: Date | null, expiryDate: Date | null = null, today: Date = TODAY) =>
|
||||
deriveKycDocumentRenewal({ issueDate, expiryDate, today });
|
||||
|
||||
describe('deriveKycDocumentRenewal', () => {
|
||||
describe('the five-year rule', () => {
|
||||
it('says nothing about a document with neither date captured', () => {
|
||||
const result = check(null, null);
|
||||
expect(result.state).toBe('UNKNOWN');
|
||||
expect(result.dueOn).toBeNull();
|
||||
expect(result.daysRemaining).toBeNull();
|
||||
});
|
||||
|
||||
it('leaves a recently issued document alone', () => {
|
||||
const result = check(at(2025, 1, 15));
|
||||
expect(result.state).toBe('OK');
|
||||
expect(result.reason).toBe('AGE');
|
||||
});
|
||||
|
||||
it('falls due exactly five years after issue', () => {
|
||||
const result = check(at(2021, 8, 7));
|
||||
expect(result.dueOn).toEqual(at(2026, 8, 7));
|
||||
expect(result.daysRemaining).toBe(0);
|
||||
// Due today is not yet past — the branch still has the day to act.
|
||||
expect(result.state).toBe('OK');
|
||||
});
|
||||
|
||||
it('becomes DUE the day after the fifth anniversary', () => {
|
||||
const result = check(at(2021, 8, 6));
|
||||
expect(result.state).toBe('DUE');
|
||||
expect(result.reason).toBe('AGE');
|
||||
});
|
||||
|
||||
it('is DUE, not EXPIRED, once past five years — the document is still valid, just stale', () => {
|
||||
const result = check(at(2020, 3, 10));
|
||||
expect(result.state).toBe('DUE');
|
||||
expect(result.reason).toBe('AGE');
|
||||
expect(result.daysRemaining).toBeLessThan(0);
|
||||
});
|
||||
|
||||
it('does not warn ahead of the five-year mark — a document one day short is entirely fine', () => {
|
||||
// Due tomorrow on age alone, and still OK: only expiry gets an advance warning.
|
||||
const result = check(at(2021, 8, 8));
|
||||
expect(result.daysRemaining).toBe(1);
|
||||
expect(result.state).toBe('OK');
|
||||
});
|
||||
});
|
||||
|
||||
describe('an explicit expiry date', () => {
|
||||
it('warns seven days before expiry', () => {
|
||||
const result = check(at(2025, 6, 1), at(2026, 8, 14));
|
||||
expect(result.reason).toBe('EXPIRY');
|
||||
expect(result.daysRemaining).toBe(7);
|
||||
expect(result.state).toBe('EXPIRING_SOON');
|
||||
});
|
||||
|
||||
it('is still OK eight days out', () => {
|
||||
expect(check(at(2025, 6, 1), at(2026, 8, 15)).state).toBe('OK');
|
||||
});
|
||||
|
||||
it('warns on the day of expiry itself', () => {
|
||||
const result = check(at(2025, 6, 1), at(2026, 8, 7));
|
||||
expect(result.daysRemaining).toBe(0);
|
||||
expect(result.state).toBe('EXPIRING_SOON');
|
||||
});
|
||||
|
||||
it('marks a passed expiry as EXPIRED — no longer a valid OVD', () => {
|
||||
const result = check(at(2024, 1, 1), at(2026, 1, 1));
|
||||
expect(result.state).toBe('EXPIRED');
|
||||
expect(result.reason).toBe('EXPIRY');
|
||||
});
|
||||
|
||||
it('governs when it falls before the five-year mark', () => {
|
||||
// Issued last year, so the age clock is years away — expiry is what matters.
|
||||
const result = check(at(2025, 6, 1), at(2026, 10, 1));
|
||||
expect(result.reason).toBe('EXPIRY');
|
||||
expect(result.dueOn).toEqual(at(2026, 10, 1));
|
||||
});
|
||||
|
||||
it('yields to the five-year rule when it falls later', () => {
|
||||
// A passport issued in 2019 expiring in 2029 is stale long before it expires.
|
||||
const result = check(at(2019, 5, 20), at(2029, 5, 20));
|
||||
expect(result.reason).toBe('AGE');
|
||||
expect(result.dueOn).toEqual(at(2024, 5, 20));
|
||||
expect(result.state).toBe('DUE');
|
||||
});
|
||||
|
||||
it('is judged on expiry alone when no issue date was captured', () => {
|
||||
const result = check(null, at(2027, 1, 1));
|
||||
expect(result.reason).toBe('EXPIRY');
|
||||
expect(result.state).toBe('OK');
|
||||
});
|
||||
});
|
||||
|
||||
describe('leap-year issue dates', () => {
|
||||
it('pins a 29 February issue to 28 February, not 1 March', () => {
|
||||
// 2020-02-29 + 5 years has no real anniversary; rolling into March would push the
|
||||
// document into the wrong month.
|
||||
const result = check(at(2020, 2, 29));
|
||||
expect(result.dueOn).toEqual(at(2025, 2, 28));
|
||||
});
|
||||
});
|
||||
|
||||
describe('kycDocumentNeedsAttention', () => {
|
||||
it('flags only the states staff must act on', () => {
|
||||
expect(kycDocumentNeedsAttention('UNKNOWN')).toBe(false);
|
||||
expect(kycDocumentNeedsAttention('OK')).toBe(false);
|
||||
expect(kycDocumentNeedsAttention('EXPIRING_SOON')).toBe(true);
|
||||
expect(kycDocumentNeedsAttention('EXPIRED')).toBe(true);
|
||||
expect(kycDocumentNeedsAttention('DUE')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('uses a five-year age window and a seven-day expiry warning', () => {
|
||||
expect(KYC_DOCUMENT_RENEWAL_YEARS).toBe(5);
|
||||
expect(KYC_DOCUMENT_EXPIRY_WARNING_DAYS).toBe(7);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Decides when the officially valid document (OVD) captured at KYC needs updating.
|
||||
*
|
||||
* The KYC step records a document type, its number, an issue date and — for documents that carry
|
||||
* one — an expiry date. Nothing has ever read those dates back, so a client onboarded on a
|
||||
* ten-year-old driving licence looked exactly like one onboarded yesterday. This module turns the
|
||||
* two dates into a single answer to "does this document need updating?", so the KYC tab can say so
|
||||
* rather than leaving staff to work it out from a date on a form.
|
||||
*
|
||||
* Two separate clocks run, and they warn differently because they mean different things:
|
||||
*
|
||||
* - **Age.** Five years after issue the document is stale and must be re-collected. It is still a
|
||||
* valid document, so there is nothing to pre-empt — the alert appears once the date passes.
|
||||
* - **Expiry.** A printed expiry date is a hard stop: the day after, the document is not a valid
|
||||
* OVD at all and the account is out of compliance. That one is worth heading off, so it warns
|
||||
* seven days ahead while the customer can still be asked to bring the renewed document in.
|
||||
*/
|
||||
|
||||
/** A document is treated as due for refresh five years after it was issued. */
|
||||
export const KYC_DOCUMENT_RENEWAL_YEARS = 5;
|
||||
|
||||
/** How many days before a printed expiry date the "expires soon" warning starts. */
|
||||
export const KYC_DOCUMENT_EXPIRY_WARNING_DAYS = 7;
|
||||
|
||||
export type KycDocumentRenewalState =
|
||||
/** No dates captured — nothing can be said about this document. */
|
||||
| 'UNKNOWN'
|
||||
/** Within its life, and not close to either threshold. */
|
||||
| 'OK'
|
||||
/** Printed expiry date falls within the next seven days. */
|
||||
| 'EXPIRING_SOON'
|
||||
/** Past its printed expiry date: no longer a valid OVD. */
|
||||
| 'EXPIRED'
|
||||
/** Past the five-year mark: still a valid document, but must be re-collected. */
|
||||
| 'DUE';
|
||||
|
||||
/** Which of the two clocks decided the outcome. */
|
||||
export type KycDocumentRenewalReason = 'EXPIRY' | 'AGE' | null;
|
||||
|
||||
export interface KycDocumentRenewalInput {
|
||||
/** Issue date printed on the document. */
|
||||
issueDate: Date | null;
|
||||
/** Expiry date printed on the document — only some carry one (passport, DL, visa). */
|
||||
expiryDate: Date | null;
|
||||
/** Today, injected so the calculation is testable and matches the tenant's date. */
|
||||
today: Date;
|
||||
}
|
||||
|
||||
export interface KycDocumentRenewalStatus {
|
||||
state: KycDocumentRenewalState;
|
||||
/** The date the document falls due — the earlier of its expiry and its fifth anniversary. */
|
||||
dueOn: Date | null;
|
||||
/** Days until `dueOn`; negative once it has passed. Null when nothing can be judged. */
|
||||
daysRemaining: number | null;
|
||||
reason: KycDocumentRenewalReason;
|
||||
}
|
||||
|
||||
/** Midnight-aligned, so a document due today is not counted as a fraction of a day overdue. */
|
||||
function startOfDay(date: Date): Date {
|
||||
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds whole years, clamping to the end of the month.
|
||||
*
|
||||
* A 29 February issue date has no fifth anniversary. Letting the Date constructor roll it into
|
||||
* 1 March would push the document into the wrong month, so it is pinned to 28 February instead.
|
||||
*/
|
||||
function addYears(date: Date, years: number): Date {
|
||||
const target = new Date(date.getFullYear() + years, date.getMonth(), date.getDate());
|
||||
if (target.getMonth() !== date.getMonth()) {
|
||||
return new Date(target.getFullYear(), target.getMonth(), 0);
|
||||
}
|
||||
return target;
|
||||
}
|
||||
|
||||
const MS_PER_DAY = 24 * 60 * 60 * 1000;
|
||||
|
||||
function daysBetween(from: Date, to: Date): number {
|
||||
return Math.round((to.getTime() - from.getTime()) / MS_PER_DAY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Works out whether the captured document needs updating.
|
||||
*
|
||||
* The two dates are not alternatives — whichever falls first governs. A passport issued last year
|
||||
* but expiring in six months is due in six months, not in four years: treating the five-year rule
|
||||
* as the only clock would leave an expired passport on file looking current. A document with no
|
||||
* printed expiry is judged purely on age.
|
||||
*/
|
||||
export function deriveKycDocumentRenewal(input: KycDocumentRenewalInput): KycDocumentRenewalStatus {
|
||||
const today = startOfDay(input.today);
|
||||
const issue = input.issueDate ? startOfDay(input.issueDate) : null;
|
||||
const expiry = input.expiryDate ? startOfDay(input.expiryDate) : null;
|
||||
|
||||
if (!issue && !expiry) {
|
||||
return { state: 'UNKNOWN', dueOn: null, daysRemaining: null, reason: null };
|
||||
}
|
||||
|
||||
const ageDue = issue ? addYears(issue, KYC_DOCUMENT_RENEWAL_YEARS) : null;
|
||||
|
||||
// Whichever comes first governs — see the doc comment above.
|
||||
let dueOn: Date;
|
||||
let reason: KycDocumentRenewalReason;
|
||||
if (expiry && ageDue) {
|
||||
if (expiry.getTime() <= ageDue.getTime()) {
|
||||
dueOn = expiry;
|
||||
reason = 'EXPIRY';
|
||||
} else {
|
||||
dueOn = ageDue;
|
||||
reason = 'AGE';
|
||||
}
|
||||
} else if (expiry) {
|
||||
dueOn = expiry;
|
||||
reason = 'EXPIRY';
|
||||
} else {
|
||||
dueOn = ageDue as Date;
|
||||
reason = 'AGE';
|
||||
}
|
||||
|
||||
const daysRemaining = daysBetween(today, dueOn);
|
||||
|
||||
let state: KycDocumentRenewalState;
|
||||
if (reason === 'EXPIRY') {
|
||||
if (daysRemaining < 0) {
|
||||
state = 'EXPIRED';
|
||||
} else if (daysRemaining <= KYC_DOCUMENT_EXPIRY_WARNING_DAYS) {
|
||||
state = 'EXPIRING_SOON';
|
||||
} else {
|
||||
state = 'OK';
|
||||
}
|
||||
} else {
|
||||
// Age alone: a document one day short of five years is entirely fine, so there is nothing to
|
||||
// warn about in advance. It becomes due the moment the anniversary passes.
|
||||
state = daysRemaining < 0 ? 'DUE' : 'OK';
|
||||
}
|
||||
|
||||
return { state, dueOn, daysRemaining, reason };
|
||||
}
|
||||
|
||||
/** Whether this state warrants surfacing an alert to staff at all. */
|
||||
export function kycDocumentNeedsAttention(state: KycDocumentRenewalState): boolean {
|
||||
return state === 'EXPIRING_SOON' || state === 'EXPIRED' || state === 'DUE';
|
||||
}
|
||||
@@ -0,0 +1,286 @@
|
||||
/**
|
||||
* 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 {
|
||||
deriveKycExceptionFields,
|
||||
KycExceptionInput,
|
||||
KYC_EXCEPTION_AADHAAR,
|
||||
KYC_EXCEPTION_PAN
|
||||
} from './kyc-exception.util';
|
||||
|
||||
const TODAY = '05 August 2026';
|
||||
|
||||
/** Individual client, nothing previously recorded — the client-creation case. */
|
||||
const newIndividual = (panVerified: boolean, aadhaarVerified: boolean): KycExceptionInput => ({
|
||||
panVerified,
|
||||
aadhaarVerified,
|
||||
aadhaarApplicable: true,
|
||||
hadException: false,
|
||||
previousReason: null,
|
||||
todayFormatted: TODAY
|
||||
});
|
||||
|
||||
/** Individual client that already carries an open exception. */
|
||||
const existingException = (
|
||||
panVerified: boolean,
|
||||
aadhaarVerified: boolean,
|
||||
previousReason: string
|
||||
): KycExceptionInput => ({
|
||||
panVerified,
|
||||
aadhaarVerified,
|
||||
aadhaarApplicable: true,
|
||||
hadException: true,
|
||||
previousReason,
|
||||
todayFormatted: TODAY
|
||||
});
|
||||
|
||||
describe('deriveKycExceptionFields', () => {
|
||||
describe('at client creation', () => {
|
||||
it('marks both PAN and Aadhaar when neither is entered or verified', () => {
|
||||
expect(deriveKycExceptionFields(newIndividual(false, false))).toEqual({
|
||||
isException: true,
|
||||
exceptionReason: `${KYC_EXCEPTION_PAN}, ${KYC_EXCEPTION_AADHAAR}`,
|
||||
exceptionResolved: false,
|
||||
exceptionResolvedOn: null
|
||||
});
|
||||
});
|
||||
|
||||
it('marks only PAN when Aadhaar verified but PAN did not', () => {
|
||||
expect(deriveKycExceptionFields(newIndividual(false, true))).toEqual({
|
||||
isException: true,
|
||||
exceptionReason: KYC_EXCEPTION_PAN,
|
||||
exceptionResolved: false,
|
||||
exceptionResolvedOn: null
|
||||
});
|
||||
});
|
||||
|
||||
it('marks only Aadhaar when PAN verified but Aadhaar did not', () => {
|
||||
expect(deriveKycExceptionFields(newIndividual(true, false))).toEqual({
|
||||
isException: true,
|
||||
exceptionReason: KYC_EXCEPTION_AADHAAR,
|
||||
exceptionResolved: false,
|
||||
exceptionResolvedOn: null
|
||||
});
|
||||
});
|
||||
|
||||
it('raises nothing when both verify, and does not mark the client resolved', () => {
|
||||
// A clean client never had an exception, so it must not appear in the Resolved tab either.
|
||||
expect(deriveKycExceptionFields(newIndividual(true, true))).toEqual({
|
||||
isException: false,
|
||||
exceptionReason: null,
|
||||
exceptionResolved: false,
|
||||
exceptionResolvedOn: null
|
||||
});
|
||||
});
|
||||
|
||||
it('does not raise an Aadhaar exception for a non-individual client', () => {
|
||||
// Companies submit a dummy masked Aadhaar; checking it would mean a permanent exception.
|
||||
expect(
|
||||
deriveKycExceptionFields({
|
||||
panVerified: true,
|
||||
aadhaarVerified: false,
|
||||
aadhaarApplicable: false,
|
||||
hadException: false,
|
||||
previousReason: null,
|
||||
todayFormatted: TODAY
|
||||
}).isException
|
||||
).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('PAN declaration', () => {
|
||||
it('waives the PAN exception once a declaration is taken', () => {
|
||||
// The client's name/DOB will never match the PAN record, so the API can never pass. The
|
||||
// signed declaration closes the item instead — the client must not sit in the exception list.
|
||||
expect(
|
||||
deriveKycExceptionFields({
|
||||
...newIndividual(false, true),
|
||||
panDeclarationTaken: true
|
||||
})
|
||||
).toEqual({
|
||||
isException: false,
|
||||
exceptionReason: null,
|
||||
exceptionResolved: false,
|
||||
exceptionResolvedOn: null
|
||||
});
|
||||
});
|
||||
|
||||
it('still raises the PAN exception when no declaration has been taken', () => {
|
||||
expect(
|
||||
deriveKycExceptionFields({
|
||||
...newIndividual(false, true),
|
||||
panDeclarationTaken: false
|
||||
}).exceptionReason
|
||||
).toBe(KYC_EXCEPTION_PAN);
|
||||
});
|
||||
|
||||
it('leaves an outstanding Aadhaar untouched — a PAN declaration covers PAN only', () => {
|
||||
const result = deriveKycExceptionFields({
|
||||
...newIndividual(false, false),
|
||||
panDeclarationTaken: true
|
||||
});
|
||||
expect(result.isException).toBe(true);
|
||||
expect(result.exceptionReason).toBe(KYC_EXCEPTION_AADHAAR);
|
||||
});
|
||||
|
||||
it('closes an existing PAN exception when a declaration is taken afterwards', () => {
|
||||
expect(
|
||||
deriveKycExceptionFields({
|
||||
...existingException(false, true, KYC_EXCEPTION_PAN),
|
||||
panDeclarationTaken: true
|
||||
})
|
||||
).toEqual({
|
||||
isException: false,
|
||||
exceptionReason: KYC_EXCEPTION_PAN,
|
||||
exceptionResolved: true,
|
||||
exceptionResolvedOn: TODAY
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Aadhaar enrolment receipt', () => {
|
||||
it('waives the Aadhaar exception once the enrolment receipt is recorded', () => {
|
||||
// The client holds no Aadhaar yet, so there is no number to run the OTP check against. The
|
||||
// UIDAI enrolment slip closes the item instead.
|
||||
expect(
|
||||
deriveKycExceptionFields({
|
||||
...newIndividual(true, false),
|
||||
aadhaarReceiptTaken: true
|
||||
})
|
||||
).toEqual({
|
||||
isException: false,
|
||||
exceptionReason: null,
|
||||
exceptionResolved: false,
|
||||
exceptionResolvedOn: null
|
||||
});
|
||||
});
|
||||
|
||||
it('still raises the Aadhaar exception when no receipt has been taken', () => {
|
||||
expect(
|
||||
deriveKycExceptionFields({
|
||||
...newIndividual(true, false),
|
||||
aadhaarReceiptTaken: false
|
||||
}).exceptionReason
|
||||
).toBe(KYC_EXCEPTION_AADHAAR);
|
||||
});
|
||||
|
||||
it('leaves an outstanding PAN untouched — a receipt covers Aadhaar only', () => {
|
||||
const result = deriveKycExceptionFields({
|
||||
...newIndividual(false, false),
|
||||
aadhaarReceiptTaken: true
|
||||
});
|
||||
expect(result.isException).toBe(true);
|
||||
expect(result.exceptionReason).toBe(KYC_EXCEPTION_PAN);
|
||||
});
|
||||
|
||||
it('closes an existing Aadhaar exception when a receipt is taken afterwards', () => {
|
||||
expect(
|
||||
deriveKycExceptionFields({
|
||||
...existingException(true, false, KYC_EXCEPTION_AADHAAR),
|
||||
aadhaarReceiptTaken: true
|
||||
})
|
||||
).toEqual({
|
||||
isException: false,
|
||||
exceptionReason: KYC_EXCEPTION_AADHAAR,
|
||||
exceptionResolved: true,
|
||||
exceptionResolvedOn: TODAY
|
||||
});
|
||||
});
|
||||
|
||||
it('clears both items when a PAN declaration and an Aadhaar receipt are both on file', () => {
|
||||
// Neither check can pass, yet the branch holds paperwork for both — nothing is outstanding.
|
||||
const result = deriveKycExceptionFields({
|
||||
...newIndividual(false, false),
|
||||
panDeclarationTaken: true,
|
||||
aadhaarReceiptTaken: true
|
||||
});
|
||||
expect(result.isException).toBe(false);
|
||||
expect(result.exceptionReason).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('resolving', () => {
|
||||
it('closes the exception once both checks pass, keeping the reason for the audit trail', () => {
|
||||
const both = `${KYC_EXCEPTION_PAN}, ${KYC_EXCEPTION_AADHAAR}`;
|
||||
expect(deriveKycExceptionFields(existingException(true, true, both))).toEqual({
|
||||
isException: false,
|
||||
exceptionReason: both,
|
||||
exceptionResolved: true,
|
||||
exceptionResolvedOn: TODAY
|
||||
});
|
||||
});
|
||||
|
||||
it('narrows to the outstanding item when only one of two verifies', () => {
|
||||
const both = `${KYC_EXCEPTION_PAN}, ${KYC_EXCEPTION_AADHAAR}`;
|
||||
// PAN verified, Aadhaar still outstanding — stays open, listing Aadhaar alone.
|
||||
expect(deriveKycExceptionFields(existingException(true, false, both))).toEqual({
|
||||
isException: true,
|
||||
exceptionReason: KYC_EXCEPTION_AADHAAR,
|
||||
exceptionResolved: false,
|
||||
exceptionResolvedOn: null
|
||||
});
|
||||
});
|
||||
|
||||
it('narrows the other way round too', () => {
|
||||
const both = `${KYC_EXCEPTION_PAN}, ${KYC_EXCEPTION_AADHAAR}`;
|
||||
expect(deriveKycExceptionFields(existingException(false, true, both)).exceptionReason).toBe(KYC_EXCEPTION_PAN);
|
||||
});
|
||||
});
|
||||
|
||||
describe('re-opening', () => {
|
||||
it('clears a prior resolution so a new exception returns to Pending', () => {
|
||||
// Regression: without exceptionResolved=false the record still matched the Resolved query
|
||||
// and a brand-new exception appeared as already closed.
|
||||
const result = deriveKycExceptionFields({
|
||||
panVerified: false,
|
||||
aadhaarVerified: true,
|
||||
aadhaarApplicable: true,
|
||||
hadException: false,
|
||||
previousReason: 'PAN Card Verification Failed',
|
||||
todayFormatted: TODAY
|
||||
});
|
||||
expect(result.exceptionResolved).toBe(false);
|
||||
expect(result.exceptionResolvedOn).toBeNull();
|
||||
expect(result.isException).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('officer-entered reasons', () => {
|
||||
it('keeps a manual reason alongside the automatic ones', () => {
|
||||
const result = deriveKycExceptionFields({
|
||||
...newIndividual(true, true),
|
||||
manualReasons: ['Address proof pending']
|
||||
});
|
||||
expect(result).toEqual({
|
||||
isException: true,
|
||||
exceptionReason: 'Address proof pending',
|
||||
exceptionResolved: false,
|
||||
exceptionResolvedOn: null
|
||||
});
|
||||
});
|
||||
|
||||
it('drops a stale automatic reason left in the form once the check passes', () => {
|
||||
// The form still holds 'PAN Card Verification Failed' from a previous load; PAN has since
|
||||
// verified, so it must not survive into the payload.
|
||||
const result = deriveKycExceptionFields({
|
||||
...newIndividual(true, true),
|
||||
manualReasons: [KYC_EXCEPTION_PAN]
|
||||
});
|
||||
expect(result.isException).toBe(false);
|
||||
expect(result.exceptionReason).toBeNull();
|
||||
});
|
||||
|
||||
it('does not duplicate a manual reason that matches an outstanding automatic one', () => {
|
||||
const result = deriveKycExceptionFields({
|
||||
...newIndividual(false, true),
|
||||
manualReasons: [KYC_EXCEPTION_PAN]
|
||||
});
|
||||
expect(result.exceptionReason).toBe(KYC_EXCEPTION_PAN);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Derives a client's KYC exception state from their verification status.
|
||||
*
|
||||
* A KYC exception is not something an officer should have to remember to tick — it is simply the
|
||||
* fact that a mandatory identity check has not passed. Deriving it means the exception list can
|
||||
* never drift out of step with reality: raising, narrowing and closing all fall out of whether PAN
|
||||
* and Aadhaar are verified at the moment of the save.
|
||||
*
|
||||
* Shared by the client-creation stepper and the client-view KYC tab so both write identical state.
|
||||
*/
|
||||
|
||||
export const KYC_EXCEPTION_PAN = 'PAN Card Verification Failed';
|
||||
export const KYC_EXCEPTION_AADHAAR = 'Aadhaar Verification Failed';
|
||||
|
||||
/** The two reasons this module owns. Anything else on a record was added by an officer by hand. */
|
||||
export const AUTO_MANAGED_KYC_EXCEPTION_REASONS: string[] = [
|
||||
KYC_EXCEPTION_PAN,
|
||||
KYC_EXCEPTION_AADHAAR
|
||||
];
|
||||
|
||||
export interface KycExceptionInput {
|
||||
/** PAN verified against the Income Tax database. Unverified OR simply not entered → exception. */
|
||||
panVerified: boolean;
|
||||
/**
|
||||
* A signed customer declaration has been 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 — or a different DOB — can never clear it, however many times the officer
|
||||
* retries. Once the branch holds a declaration recording exactly what differs, the outstanding
|
||||
* item is closed by paperwork rather than by the API, and it must not keep the client sitting in
|
||||
* the exception list. PAN still reads as unverified everywhere else; only the exception is waived.
|
||||
*/
|
||||
panDeclarationTaken?: boolean;
|
||||
/** Aadhaar verified against UIDAI. Unverified OR simply not entered → exception. */
|
||||
aadhaarVerified: boolean;
|
||||
/**
|
||||
* The customer's Aadhaar enrolment slip has been sighted and recorded.
|
||||
*
|
||||
* A customer who has applied for Aadhaar but has not been issued one yet holds only a UIDAI
|
||||
* enrolment receipt. There is no Aadhaar number to put through the OTP flow, so the check cannot
|
||||
* pass however long the branch waits — the same dead end the PAN declaration exists to resolve.
|
||||
* Once the receipt is on file the outstanding item is closed by paperwork, and the client must
|
||||
* not keep sitting in the exception list. Aadhaar still reads as unverified everywhere else.
|
||||
*/
|
||||
aadhaarReceiptTaken?: boolean;
|
||||
/**
|
||||
* False for non-individual clients, where no Aadhaar is collected (the payload sends a dummy
|
||||
* masked value). Without this guard every company would carry a permanent Aadhaar exception.
|
||||
*/
|
||||
aadhaarApplicable: boolean;
|
||||
/** Whether an exception is already recorded — decides raise vs. resolve on a clean save. */
|
||||
hadException: boolean;
|
||||
/** Reason currently persisted, kept verbatim when closing so the audit trail survives. */
|
||||
previousReason: string | null;
|
||||
/** Officer-entered reasons beyond the two automatic ones; carried through untouched. */
|
||||
manualReasons?: string[];
|
||||
/** Today in the tenant's date format — stamped as exceptionResolvedOn when closing. */
|
||||
todayFormatted: string;
|
||||
}
|
||||
|
||||
export interface KycExceptionFields {
|
||||
isException: boolean;
|
||||
exceptionReason: string | null;
|
||||
exceptionResolved: boolean;
|
||||
exceptionResolvedOn: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps verification status to the four exception columns the API expects.
|
||||
*
|
||||
* Three outcomes:
|
||||
* - **Something outstanding** → raise/keep the exception, listing only what is still failing. A
|
||||
* record that had both PAN and Aadhaar outstanding and has since verified PAN comes back with
|
||||
* Aadhaar alone, which is what narrows the entry rather than closing it.
|
||||
* - **Nothing outstanding, exception existed** → close it. `exceptionReason` is retained on
|
||||
* purpose: the Resolved tab shows what was resolved, and clearing it would erase the record of
|
||||
* why the exception was ever raised.
|
||||
* - **Nothing outstanding, no exception** → leave every flag off, so a clean client never appears
|
||||
* in either tab.
|
||||
*/
|
||||
export function deriveKycExceptionFields(input: KycExceptionInput): KycExceptionFields {
|
||||
const outstanding: string[] = [];
|
||||
|
||||
// A declaration settles the PAN item without the API ever passing — see `panDeclarationTaken`.
|
||||
if (!input.panVerified && !input.panDeclarationTaken) {
|
||||
outstanding.push(KYC_EXCEPTION_PAN);
|
||||
}
|
||||
// An enrolment receipt settles the Aadhaar item when the OTP check has nothing to run against —
|
||||
// see `aadhaarReceiptTaken`.
|
||||
if (input.aadhaarApplicable && !input.aadhaarVerified && !input.aadhaarReceiptTaken) {
|
||||
outstanding.push(KYC_EXCEPTION_AADHAAR);
|
||||
}
|
||||
|
||||
// Officer-added reasons ride along, but the two automatic ones are filtered out first — a stale
|
||||
// 'PAN Card Verification Failed' left in the form must not survive PAN actually being verified.
|
||||
for (const reason of input.manualReasons || []) {
|
||||
const trimmed = (reason || '').trim();
|
||||
if (trimmed && !AUTO_MANAGED_KYC_EXCEPTION_REASONS.includes(trimmed) && !outstanding.includes(trimmed)) {
|
||||
outstanding.push(trimmed);
|
||||
}
|
||||
}
|
||||
|
||||
if (outstanding.length > 0) {
|
||||
return {
|
||||
isException: true,
|
||||
exceptionReason: outstanding.join(', '),
|
||||
exceptionResolved: false,
|
||||
exceptionResolvedOn: null
|
||||
};
|
||||
}
|
||||
|
||||
if (input.hadException) {
|
||||
return {
|
||||
isException: false,
|
||||
exceptionReason: input.previousReason || null,
|
||||
exceptionResolved: true,
|
||||
exceptionResolvedOn: input.todayFormatted
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
isException: false,
|
||||
exceptionReason: null,
|
||||
exceptionResolved: false,
|
||||
exceptionResolvedOn: null
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="aad-rcpt">
|
||||
<div class="aad-rcpt__header">
|
||||
<mat-icon class="aad-rcpt__header-icon">receipt_long</mat-icon>
|
||||
<div>
|
||||
<div class="aad-rcpt__title">Aadhaar Enrolment Receipt</div>
|
||||
<div class="aad-rcpt__subtitle">{{ data.clientName || 'Client' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-dialog-content class="aad-rcpt__body">
|
||||
<div class="aad-rcpt__reason">
|
||||
<mat-icon>info</mat-icon>
|
||||
<span>{{ data.reason }}</span>
|
||||
</div>
|
||||
|
||||
<p class="aad-rcpt__intro">
|
||||
For a customer who has applied for Aadhaar but has not been issued one yet, there is no Aadhaar number to run the
|
||||
OTP check against. Record the UIDAI enrolment slip instead — the client can then be created without an Aadhaar KYC
|
||||
exception being raised.
|
||||
</p>
|
||||
|
||||
<mat-form-field appearance="outline" class="aad-rcpt__field">
|
||||
<mat-label>Enrolment number (EID)</mat-label>
|
||||
<span matPrefix class="aad-rcpt__prefix"><mat-icon>confirmation_number</mat-icon></span>
|
||||
<input matInput [(ngModel)]="enrolmentId" placeholder="1234/56789/01234" maxlength="20" autocomplete="off" />
|
||||
<mat-hint [class.aad-rcpt__hint--bad]="enrolmentIdEntered && !enrolmentIdValid">
|
||||
{{ enrolmentIdHint }}
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="aad-rcpt__field">
|
||||
<mat-label>Enrolment date</mat-label>
|
||||
<input matInput [matDatepicker]="enrolPicker" [max]="today" [(ngModel)]="enrolmentDate" />
|
||||
<mat-datepicker-toggle matSuffix [for]="enrolPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #enrolPicker></mat-datepicker>
|
||||
<mat-hint>Date printed on the slip</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
@if (monthsSinceEnrolment !== null) {
|
||||
<div class="aad-rcpt__age" [class.aad-rcpt__age--stale]="receiptIsStale">
|
||||
<mat-icon>{{ receiptIsStale ? 'warning' : 'schedule' }}</mat-icon>
|
||||
<span>
|
||||
@if (receiptIsStale) {
|
||||
Enrolled {{ monthsSinceEnrolment }} months ago. An enrolment normally completes well inside six months —
|
||||
chase the customer for the Aadhaar itself. The receipt can still be recorded.
|
||||
} @else {
|
||||
Enrolled {{ monthsSinceEnrolment }} month{{ monthsSinceEnrolment === 1 ? '' : 's' }} ago.
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<mat-form-field appearance="outline" class="aad-rcpt__remarks">
|
||||
<mat-label>Remarks</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
rows="3"
|
||||
[(ngModel)]="remarks"
|
||||
maxlength="500"
|
||||
placeholder="What was sighted, and when the Aadhaar is expected"
|
||||
></textarea>
|
||||
<mat-hint>{{ remarks.length }}/500</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-checkbox class="aad-rcpt__sighted" [(ngModel)]="sighted">
|
||||
The original UIDAI enrolment slip has been sighted and a copy filed with the account opening form.
|
||||
</mat-checkbox>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end" class="aad-rcpt__actions">
|
||||
<button mat-stroked-button mat-dialog-close type="button">Cancel</button>
|
||||
<button mat-flat-button color="primary" type="button" [disabled]="!canSubmit" (click)="submit()">
|
||||
Save Receipt
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
</div>
|
||||
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.aad-rcpt {
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.aad-rcpt__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 24px 12px;
|
||||
border-bottom: 1px solid #bfdbfe;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.aad-rcpt__header-icon {
|
||||
color: #2563eb;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.aad-rcpt__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
|
||||
.aad-rcpt__subtitle {
|
||||
font-size: 12px;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.aad-rcpt__body {
|
||||
padding: 18px 24px !important;
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.aad-rcpt__reason {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 6px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 auto;
|
||||
color: #64748b;
|
||||
}
|
||||
}
|
||||
|
||||
.aad-rcpt__intro {
|
||||
margin: 0 0 16px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.aad-rcpt__field,
|
||||
.aad-rcpt__remarks {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aad-rcpt__prefix {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 8px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.aad-rcpt__hint--bad {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
// Age of the slip — informational, so it reads as context rather than a blocking error.
|
||||
.aad-rcpt__age {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin: 2px 0 14px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 6px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
color: #475569;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 auto;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
&--stale {
|
||||
background: #fffbeb;
|
||||
border-color: #fde68a;
|
||||
color: #92400e;
|
||||
|
||||
mat-icon {
|
||||
color: #d97706;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aad-rcpt__sighted {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
|
||||
::ng-deep .mdc-form-field > label {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.aad-rcpt__actions {
|
||||
padding: 10px 24px 16px !important;
|
||||
margin: 0 !important;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
/**
|
||||
* 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 { Component, inject } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import {
|
||||
MAT_DIALOG_DATA,
|
||||
MatDialogRef,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialogClose
|
||||
} from '@angular/material/dialog';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
export interface AadhaarReceiptDialogData {
|
||||
/** Client name, shown so the officer can check the slip belongs to the right person. */
|
||||
clientName: string;
|
||||
/** Message the Aadhaar step came back with, or why the officer is recording a receipt. */
|
||||
reason: string;
|
||||
/** Existing receipt, when the officer re-opens one already taken. */
|
||||
existing?: AadhaarReceiptResult | null;
|
||||
}
|
||||
|
||||
export interface AadhaarReceiptResult {
|
||||
/** 14-digit enrolment number as printed on the slip, separators kept. */
|
||||
enrolmentId: string;
|
||||
enrolmentDate: Date | null;
|
||||
remarks: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Records the 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.
|
||||
* There is no Aadhaar number to send to the OTP flow, so no amount of retrying will clear the
|
||||
* check — the same dead end the PAN declaration resolves. Recording the slip lets the client be
|
||||
* created and waives the Aadhaar exception, while Aadhaar itself stays unverified.
|
||||
*
|
||||
* Only the 14-digit enrolment number is taken. The date and time printed beside it on the slip are
|
||||
* captured by the enrolment-date field, so asking for them again in the same box would just be a
|
||||
* second chance to mistype them.
|
||||
*
|
||||
* The number is validated on digit count rather than an exact layout: slips print it with varying
|
||||
* separators, and rejecting one because of a slash or a space would block a customer over
|
||||
* formatting rather than substance.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-aadhaar-receipt-dialog',
|
||||
templateUrl: './aadhaar-receipt-dialog.component.html',
|
||||
styleUrls: ['./aadhaar-receipt-dialog.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FormsModule,
|
||||
MatIcon,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialogClose
|
||||
]
|
||||
})
|
||||
export class AadhaarReceiptDialogComponent {
|
||||
data = inject<AadhaarReceiptDialogData>(MAT_DIALOG_DATA);
|
||||
private dialogRef = inject(MatDialogRef<AadhaarReceiptDialogComponent>);
|
||||
|
||||
enrolmentId = '';
|
||||
enrolmentDate: Date | null = null;
|
||||
remarks = '';
|
||||
/** The officer confirms the original slip was sighted — nothing is saved without it. */
|
||||
sighted = false;
|
||||
|
||||
today = new Date();
|
||||
|
||||
constructor() {
|
||||
const existing = this.data.existing;
|
||||
if (existing) {
|
||||
this.enrolmentId = existing.enrolmentId || '';
|
||||
this.enrolmentDate = existing.enrolmentDate || null;
|
||||
this.remarks = existing.remarks || '';
|
||||
}
|
||||
}
|
||||
|
||||
/** Digits only — separators on the printed slip are cosmetic and vary between forms. */
|
||||
private get enrolmentDigits(): string {
|
||||
return (this.enrolmentId || '').replace(/\D/g, '');
|
||||
}
|
||||
|
||||
get enrolmentIdEntered(): boolean {
|
||||
return this.enrolmentDigits.length > 0;
|
||||
}
|
||||
|
||||
/** UIDAI's enrolment number is 14 digits — the timestamp beside it is not part of it. */
|
||||
get enrolmentIdValid(): boolean {
|
||||
return this.enrolmentDigits.length === 14;
|
||||
}
|
||||
|
||||
/** How many digits are still missing, so the officer is told what to fix, not just that it failed. */
|
||||
get enrolmentIdHint(): string {
|
||||
const count = this.enrolmentDigits.length;
|
||||
if (!count) {
|
||||
return 'The 14-digit enrolment number only, e.g. 1234/56789/01234';
|
||||
}
|
||||
return `${count} of 14 digits`;
|
||||
}
|
||||
|
||||
/** A slip dated in the future is a keying error, not a valid enrolment. */
|
||||
get enrolmentDateValid(): boolean {
|
||||
return !!this.enrolmentDate && this.enrolmentDate.getTime() <= this.today.getTime();
|
||||
}
|
||||
|
||||
/** Whole months since enrolment — shown because a receipt is temporary by nature. */
|
||||
get monthsSinceEnrolment(): number | null {
|
||||
if (!this.enrolmentDate) {
|
||||
return null;
|
||||
}
|
||||
const months =
|
||||
(this.today.getFullYear() - this.enrolmentDate.getFullYear()) * 12 +
|
||||
(this.today.getMonth() - this.enrolmentDate.getMonth()) -
|
||||
(this.today.getDate() < this.enrolmentDate.getDate() ? 1 : 0);
|
||||
return Math.max(0, months);
|
||||
}
|
||||
|
||||
/**
|
||||
* An enrolment normally completes well inside six months, so an older slip is a prompt to chase
|
||||
* the customer for the Aadhaar itself. It is a warning, not a block: the branch may have good
|
||||
* reason to accept it, and the record shows the age either way.
|
||||
*/
|
||||
get receiptIsStale(): boolean {
|
||||
const months = this.monthsSinceEnrolment;
|
||||
return months !== null && months >= 6;
|
||||
}
|
||||
|
||||
get canSubmit(): boolean {
|
||||
return this.enrolmentIdValid && this.enrolmentDateValid && !!this.remarks.trim() && this.sighted;
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
if (!this.canSubmit) {
|
||||
return;
|
||||
}
|
||||
this.dialogRef.close({
|
||||
enrolmentId: this.enrolmentId.trim(),
|
||||
enrolmentDate: this.enrolmentDate,
|
||||
remarks: this.remarks.trim()
|
||||
} as AadhaarReceiptResult);
|
||||
}
|
||||
}
|
||||
@@ -84,6 +84,121 @@ export class KycUploadHelperService {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Split a stacked front-above-back scan back into its two sides.
|
||||
*
|
||||
* Clients saved before the sides were stored separately carry one merged PNG, so a form that
|
||||
* wants a front image and a back image has nothing to show in the second slot. `mergeFrontBack`
|
||||
* lays the sides on a white canvas with a 20px gap between them, which leaves a band of
|
||||
* completely white rows across the full width — that band is the seam, and it is the only thing
|
||||
* in the file that says where one side ends and the other begins.
|
||||
*
|
||||
* Resolves null when no such seam is found, which is the honest answer for an image that was not
|
||||
* produced by that merge: better to show one scan than to cut a document in half at a guess.
|
||||
*/
|
||||
splitFrontBack(blob: Blob): Promise<{ front: Blob; back: Blob } | null> {
|
||||
if (!blob.type.startsWith('image/')) {
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
type Sides = { front: Blob; back: Blob } | null;
|
||||
return this.blobToImage(blob)
|
||||
.then((img): Sides | Promise<Sides> => {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = img.naturalWidth || img.width;
|
||||
canvas.height = img.naturalHeight || img.height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx || canvas.width === 0 || canvas.height === 0) {
|
||||
return null;
|
||||
}
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
const seam = this.findWhiteSeam(ctx, canvas.width, canvas.height);
|
||||
if (!seam) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return Promise.all([
|
||||
this.cropToBlob(img, canvas.width, 0, seam.start),
|
||||
this.cropToBlob(img, canvas.width, seam.end, canvas.height - seam.end)
|
||||
]).then(
|
||||
([
|
||||
front,
|
||||
back
|
||||
]): Sides => (front && back ? { front, back } : null)
|
||||
);
|
||||
})
|
||||
.catch((): Sides => null);
|
||||
}
|
||||
|
||||
/**
|
||||
* The tallest run of all-white rows in the middle of the image.
|
||||
*
|
||||
* Confined to the middle half because a scan often has white margins at the top and bottom, and
|
||||
* those are part of the document rather than the join between two of them.
|
||||
*/
|
||||
private findWhiteSeam(
|
||||
ctx: CanvasRenderingContext2D,
|
||||
width: number,
|
||||
height: number
|
||||
): { start: number; end: number } | null {
|
||||
const from = Math.floor(height * 0.25);
|
||||
const to = Math.ceil(height * 0.75);
|
||||
const step = Math.max(1, Math.floor(width / 64)); // sampling is enough to spot a non-white row
|
||||
|
||||
let bestStart = -1;
|
||||
let bestLength = 0;
|
||||
let runStart = -1;
|
||||
|
||||
for (let y = from; y <= to; y++) {
|
||||
let white = y < to;
|
||||
if (white) {
|
||||
const row = ctx.getImageData(0, y, width, 1).data;
|
||||
for (let x = 0; x < width; x += step) {
|
||||
const i = x * 4;
|
||||
if (row[i] < 245 || row[i + 1] < 245 || row[i + 2] < 245) {
|
||||
white = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (white) {
|
||||
if (runStart < 0) {
|
||||
runStart = y;
|
||||
}
|
||||
} else if (runStart >= 0) {
|
||||
if (y - runStart > bestLength) {
|
||||
bestStart = runStart;
|
||||
bestLength = y - runStart;
|
||||
}
|
||||
runStart = -1;
|
||||
}
|
||||
}
|
||||
|
||||
// The gap the merge inserts is 20px; anything much thinner is white space inside a document.
|
||||
return bestLength >= 12 ? { start: bestStart, end: bestStart + bestLength } : null;
|
||||
}
|
||||
|
||||
private cropToBlob(img: HTMLImageElement, width: number, top: number, height: number): Promise<Blob | null> {
|
||||
if (height <= 0) {
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) {
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
ctx.drawImage(img, 0, top, width, height, 0, 0, width, height);
|
||||
return new Promise((resolve) => canvas.toBlob((out) => resolve(out), 'image/png'));
|
||||
}
|
||||
|
||||
private blobToImage(blob: Blob): Promise<HTMLImageElement> {
|
||||
return this.fileToImage(blob as File);
|
||||
}
|
||||
|
||||
private fileToImage(file: File): Promise<HTMLImageElement> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const url = URL.createObjectURL(file);
|
||||
|
||||
@@ -0,0 +1,176 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="pan-decl">
|
||||
<div class="pan-decl__header">
|
||||
<mat-icon class="pan-decl__header-icon">assignment_late</mat-icon>
|
||||
<div>
|
||||
<div class="pan-decl__title">PAN Verification Failed — Take Declaration</div>
|
||||
<div class="pan-decl__subtitle">PAN {{ data.panNumber }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-dialog-content class="pan-decl__body">
|
||||
<div class="pan-decl__reason">
|
||||
<mat-icon>info</mat-icon>
|
||||
<span>{{ data.failureMessage }}</span>
|
||||
</div>
|
||||
|
||||
@if (!data.unverifiable) {
|
||||
<p class="pan-decl__intro">
|
||||
The Income Tax check matches on <strong>name and date of birth together</strong> and does not report which of
|
||||
the two differs. Enter the details exactly as printed on the customer's PAN card so the declaration records what
|
||||
actually does not match.
|
||||
</p>
|
||||
|
||||
<!-- Comparison: what we submitted vs what the PAN card says -->
|
||||
<div class="pan-decl__compare">
|
||||
<div class="pan-decl__compare-head">
|
||||
<span class="lbl"></span>
|
||||
<span class="col">Submitted</span>
|
||||
<span class="col">As on PAN card</span>
|
||||
<span class="res"></span>
|
||||
</div>
|
||||
|
||||
<div class="pan-decl__compare-row" [class.mismatch]="nameMismatch">
|
||||
<span class="lbl">Name</span>
|
||||
<span class="col submitted">{{ data.submittedName || '—' }}</span>
|
||||
<span class="col">
|
||||
<mat-form-field appearance="outline" class="pan-decl__field">
|
||||
<mat-label>Name on PAN</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[(ngModel)]="nameOnPan"
|
||||
(ngModelChange)="onCompare()"
|
||||
placeholder="e.g. RAJESH KUMAR SHARMA"
|
||||
maxlength="200"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
<span class="res">
|
||||
@if (compared && nameOnPan.trim()) {
|
||||
@if (nameMismatch) {
|
||||
<mat-icon class="res-icon res-icon--bad" aria-label="Does not match">cancel</mat-icon>
|
||||
} @else {
|
||||
<mat-icon class="res-icon res-icon--ok" aria-label="Matches">check_circle</mat-icon>
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="pan-decl__compare-row" [class.mismatch]="dobMismatch">
|
||||
<span class="lbl">Date of Birth</span>
|
||||
<span class="col submitted">{{ data.submittedDob || '—' }}</span>
|
||||
<span class="col">
|
||||
<mat-form-field appearance="outline" class="pan-decl__field">
|
||||
<mat-label>DOB on PAN</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="dobPicker"
|
||||
[max]="today"
|
||||
[(ngModel)]="dobOnPan"
|
||||
(ngModelChange)="onCompare()"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="dobPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dobPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
<span class="res">
|
||||
@if (compared && dobOnPan) {
|
||||
@if (dobMismatch) {
|
||||
<mat-icon class="res-icon res-icon--bad" aria-label="Does not match">cancel</mat-icon>
|
||||
} @else {
|
||||
<mat-icon class="res-icon res-icon--ok" aria-label="Matches">check_circle</mat-icon>
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- What the declaration will state -->
|
||||
<div
|
||||
class="pan-decl__verdict"
|
||||
[class.pan-decl__verdict--pending]="!comparisonComplete"
|
||||
[class.pan-decl__verdict--clean]="nothingToDeclare"
|
||||
>
|
||||
<span class="pan-decl__verdict-label">Does not match:</span>
|
||||
<span class="pan-decl__verdict-value">{{ mismatchLabel }}</span>
|
||||
</div>
|
||||
|
||||
@if (!comparisonComplete) {
|
||||
<p class="pan-decl__note">Enter both PAN-card values to see exactly which detail differs.</p>
|
||||
}
|
||||
|
||||
@if (nothingToDeclare) {
|
||||
<p class="pan-decl__warn">
|
||||
<mat-icon>warning</mat-icon>
|
||||
The PAN-card details you entered are the same as the ones submitted, so there is nothing to declare. Correct
|
||||
the client's name or date of birth on the General step and verify PAN again.
|
||||
</p>
|
||||
}
|
||||
} @else {
|
||||
<p class="pan-decl__intro">
|
||||
PAN could not be checked against the Income Tax records. Record the declaration taken from the customer so the
|
||||
client can be created without a KYC exception being raised for PAN.
|
||||
</p>
|
||||
}
|
||||
|
||||
<!-- The signed paper is the declaration; it is uploaded, not described. -->
|
||||
<div class="pan-decl__upload">
|
||||
<div class="pan-decl__upload-label">Signed declaration</div>
|
||||
<p class="pan-decl__upload-help">
|
||||
Get the declaration signed by the customer and upload the scanned copy. It is filed against the client as the
|
||||
proof that holds the PAN exception off.
|
||||
</p>
|
||||
|
||||
@if (!hasDeclarationFile) {
|
||||
<label class="pan-decl__dropzone">
|
||||
<input type="file" [accept]="acceptedTypes" (change)="onDeclarationFile($event)" hidden />
|
||||
<mat-icon class="pan-decl__dropzone-icon">cloud_upload</mat-icon>
|
||||
<span class="pan-decl__dropzone-text">Click to upload signed declaration</span>
|
||||
<span class="pan-decl__dropzone-hint">PDF, JPG or PNG — up to 5 MB</span>
|
||||
</label>
|
||||
} @else {
|
||||
<div class="pan-decl__file">
|
||||
<mat-icon class="pan-decl__file-icon">description</mat-icon>
|
||||
<span class="pan-decl__file-meta">
|
||||
<span class="pan-decl__file-name">{{ fileName }}</span>
|
||||
<span class="pan-decl__file-sub">{{ fileSizeLabel }}</span>
|
||||
</span>
|
||||
<label class="pan-decl__file-replace">
|
||||
<input type="file" [accept]="acceptedTypes" (change)="onDeclarationFile($event)" hidden />
|
||||
Replace
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
class="pan-decl__file-remove"
|
||||
aria-label="Remove file"
|
||||
(click)="removeDeclarationFile()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (fileError) {
|
||||
<p class="pan-decl__file-error">
|
||||
<mat-icon>error_outline</mat-icon>
|
||||
<span>{{ fileError }}</span>
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end" class="pan-decl__actions">
|
||||
<button mat-stroked-button mat-dialog-close type="button">Cancel</button>
|
||||
<button mat-flat-button color="primary" type="button" [disabled]="!canSubmit" (click)="submit()">
|
||||
Save Declaration
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
</div>
|
||||
@@ -0,0 +1,361 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.pan-decl {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.pan-decl__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 24px 12px;
|
||||
border-bottom: 1px solid #fde68a;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.pan-decl__header-icon {
|
||||
color: #d97706;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.pan-decl__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.pan-decl__subtitle {
|
||||
font-size: 12px;
|
||||
color: #b45309;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.pan-decl__body {
|
||||
padding: 18px 24px !important;
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.pan-decl__reason {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 6px;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.pan-decl__intro {
|
||||
margin: 0 0 16px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// ── Submitted vs PAN-card comparison ───────────────────────────────────────
|
||||
.pan-decl__compare {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pan-decl__compare-head,
|
||||
.pan-decl__compare-row {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 1fr 1fr 36px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.pan-decl__compare-head {
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.pan-decl__compare-row {
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// A row the declaration will name — tinted so the officer can see the finding at a glance.
|
||||
&.mismatch {
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.lbl {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.submitted {
|
||||
font-size: 13px;
|
||||
color: #0f172a;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.pan-decl__field {
|
||||
width: 100%;
|
||||
|
||||
::ng-deep .mat-mdc-form-field-subscript-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.res {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.res-icon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.res-icon--ok {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.res-icon--bad {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
// ── Verdict ────────────────────────────────────────────────────────────────
|
||||
.pan-decl__verdict {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
|
||||
&--pending {
|
||||
background: #f8fafc;
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
&--clean {
|
||||
background: #f0fdf4;
|
||||
border-color: #bbf7d0;
|
||||
}
|
||||
}
|
||||
|
||||
.pan-decl__verdict-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.pan-decl__verdict-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.pan-decl__note {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.pan-decl__warn {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin: 10px 0 0;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
color: #b45309;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Signed declaration upload ──────────────────────────────────────────────
|
||||
.pan-decl__upload {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.pan-decl__upload-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.pan-decl__upload-help {
|
||||
margin: 4px 0 10px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.pan-decl__dropzone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 18px 24px;
|
||||
background: #fff;
|
||||
border: 2px dashed #cbd5e1;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #f8fafc;
|
||||
border-color: #93c5fd;
|
||||
}
|
||||
}
|
||||
|
||||
.pan-decl__dropzone-icon {
|
||||
font-size: 28px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.pan-decl__dropzone-text {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.pan-decl__dropzone-hint {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.pan-decl__file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
.pan-decl__file-icon {
|
||||
color: #16a34a;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.pan-decl__file-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.pan-decl__file-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #166534;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pan-decl__file-sub {
|
||||
font-size: 11px;
|
||||
color: #4d7c69;
|
||||
}
|
||||
|
||||
.pan-decl__file-replace {
|
||||
flex: 0 0 auto;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid #86efac;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #166534;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #ecfdf5;
|
||||
}
|
||||
}
|
||||
|
||||
.pan-decl__file-remove {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
.pan-decl__file-error {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
margin: 8px 0 0;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
color: #b91c1c;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.pan-decl__actions {
|
||||
padding: 10px 24px 16px !important;
|
||||
margin: 0 !important;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -0,0 +1,271 @@
|
||||
/**
|
||||
* 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 { Component, inject } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import {
|
||||
MAT_DIALOG_DATA,
|
||||
MatDialogRef,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialogClose
|
||||
} from '@angular/material/dialog';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/** Which client details differ from the PAN card. */
|
||||
export type PanMismatchField = 'NAME' | 'DOB';
|
||||
|
||||
export interface PanDeclarationDialogData {
|
||||
/** Name submitted on the General step — the value sent to the Income Tax check. */
|
||||
submittedName: string;
|
||||
/** Date of birth submitted on the General step, in the tenant's display format. */
|
||||
submittedDob: string;
|
||||
/** PAN being declared against. */
|
||||
panNumber: string;
|
||||
/** Message the verification came back with, shown so the officer knows why they are here. */
|
||||
failureMessage: string;
|
||||
/**
|
||||
* True when the check failed on something other than name/DOB (invalid PAN, vendor unreachable).
|
||||
* The PAN-card fields then have nothing to compare against, so the mismatch reads NONE and the
|
||||
* officer only has to record why the declaration is being taken.
|
||||
*/
|
||||
unverifiable?: boolean;
|
||||
/** Existing declaration, when the officer re-opens one already taken. */
|
||||
existing?: PanDeclarationResult | null;
|
||||
}
|
||||
|
||||
export interface PanDeclarationResult {
|
||||
/** 'NAME', 'DOB', 'NAME,DOB', or 'NONE' when PAN could not be checked at all. */
|
||||
mismatchFields: string;
|
||||
nameOnPan: string | null;
|
||||
dobOnPan: Date | null;
|
||||
/**
|
||||
* The scanned signed declaration, to be filed against the client. Null when an existing
|
||||
* declaration was re-opened and the officer did not replace the document already on file.
|
||||
*/
|
||||
file: File | null;
|
||||
/** Name of the declaration document on record — what the KYC record keeps as the reference. */
|
||||
fileName: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Records the customer declaration that stands in for a passing PAN check.
|
||||
*
|
||||
* The Income Tax API matches on name *and* date of birth and tells us only that the pair failed —
|
||||
* never which half. So rather than show the officer a dead-end error, this dialog asks them to key
|
||||
* in the two values printed on the physical PAN card in front of them. Comparing those against what
|
||||
* was submitted is what produces a specific, defensible "NAME does not match" on the declaration,
|
||||
* and the PAN-card values are kept alongside it as the evidence for that statement.
|
||||
*
|
||||
* Name comparison is deliberately loose about case and internal spacing — "RAJESH KUMAR" and
|
||||
* "Rajesh Kumar" are the same name, and flagging them as a mismatch would put a declaration on file
|
||||
* that says something untrue.
|
||||
*
|
||||
* The declaration itself is taken as an upload rather than typed: what waives the PAN exception is
|
||||
* the paper the customer signed, so the scan of it is the record — an officer's typed note is not.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-pan-declaration-dialog',
|
||||
templateUrl: './pan-declaration-dialog.component.html',
|
||||
styleUrls: ['./pan-declaration-dialog.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FormsModule,
|
||||
MatIcon,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialogClose
|
||||
]
|
||||
})
|
||||
export class PanDeclarationDialogComponent {
|
||||
data = inject<PanDeclarationDialogData>(MAT_DIALOG_DATA);
|
||||
private dialogRef = inject(MatDialogRef<PanDeclarationDialogComponent>);
|
||||
|
||||
/** Name exactly as printed on the PAN card. */
|
||||
nameOnPan = '';
|
||||
/** Date of birth exactly as printed on the PAN card. */
|
||||
dobOnPan: Date | null = null;
|
||||
|
||||
/** The scan the officer just picked. Null while an earlier upload is still the one on file. */
|
||||
declarationFile: File | null = null;
|
||||
/** Name of the document already filed, when re-opening a declaration that was taken before. */
|
||||
existingFileName = '';
|
||||
/** Why the picked file was rejected — shown in place of failing silently. */
|
||||
fileError = '';
|
||||
|
||||
/** Officer has not yet typed anything to compare against. */
|
||||
compared = false;
|
||||
|
||||
today = new Date();
|
||||
|
||||
readonly acceptedTypes = '.pdf,.jpg,.jpeg,.png';
|
||||
private readonly maxFileBytes = 5 * 1024 * 1024;
|
||||
private readonly acceptedExtensions = [
|
||||
'pdf',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'png'
|
||||
];
|
||||
|
||||
constructor() {
|
||||
const existing = this.data.existing;
|
||||
if (existing) {
|
||||
this.nameOnPan = existing.nameOnPan || '';
|
||||
this.dobOnPan = existing.dobOnPan || null;
|
||||
this.existingFileName = existing.fileName || '';
|
||||
this.compared = true;
|
||||
}
|
||||
}
|
||||
|
||||
/** The document the declaration will be saved against — newly picked, or the one already filed. */
|
||||
get fileName(): string {
|
||||
return this.declarationFile?.name || this.existingFileName;
|
||||
}
|
||||
|
||||
get hasDeclarationFile(): boolean {
|
||||
return !!this.fileName;
|
||||
}
|
||||
|
||||
/** Size of the picked scan, or a note that the document on file is being kept as it is. */
|
||||
get fileSizeLabel(): string {
|
||||
if (!this.declarationFile) {
|
||||
return 'Already on file';
|
||||
}
|
||||
const kb = this.declarationFile.size / 1024;
|
||||
return kb < 1024 ? `${Math.max(1, Math.round(kb))} KB` : `${(kb / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
onDeclarationFile(event: Event): void {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0] || null;
|
||||
input.value = ''; // allow re-picking the same filename
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
const extension = (file.name.split('.').pop() || '').toLowerCase();
|
||||
if (!this.acceptedExtensions.includes(extension)) {
|
||||
this.fileError = 'Upload the signed declaration as a PDF, JPG or PNG.';
|
||||
return;
|
||||
}
|
||||
if (file.size > this.maxFileBytes) {
|
||||
this.fileError = 'The file is larger than 5 MB. Scan at a lower resolution and try again.';
|
||||
return;
|
||||
}
|
||||
this.fileError = '';
|
||||
this.declarationFile = file;
|
||||
}
|
||||
|
||||
/** Drops the picked scan — and the one already filed, since neither may be left implied. */
|
||||
removeDeclarationFile(): void {
|
||||
this.declarationFile = null;
|
||||
this.existingFileName = '';
|
||||
this.fileError = '';
|
||||
}
|
||||
|
||||
/** Case- and spacing-insensitive: only a genuinely different name counts as a mismatch. */
|
||||
private normalizeName(value: string): string {
|
||||
return (value || '').trim().replace(/\s+/g, ' ').toUpperCase();
|
||||
}
|
||||
|
||||
private formatDob(value: Date | null): string {
|
||||
if (!value) {
|
||||
return '';
|
||||
}
|
||||
const dd = value.getDate().toString().padStart(2, '0');
|
||||
const mm = (value.getMonth() + 1).toString().padStart(2, '0');
|
||||
return `${dd}/${mm}/${value.getFullYear()}`;
|
||||
}
|
||||
|
||||
get nameMismatch(): boolean {
|
||||
if (this.data.unverifiable || !this.nameOnPan.trim()) {
|
||||
return false;
|
||||
}
|
||||
return this.normalizeName(this.nameOnPan) !== this.normalizeName(this.data.submittedName);
|
||||
}
|
||||
|
||||
get dobMismatch(): boolean {
|
||||
if (this.data.unverifiable || !this.dobOnPan) {
|
||||
return false;
|
||||
}
|
||||
// Compare on the rendered day/month/year so a time component on either value cannot matter.
|
||||
return this.formatDob(this.dobOnPan) !== this.normalizeDisplayDob(this.data.submittedDob);
|
||||
}
|
||||
|
||||
/** The submitted DOB arrives pre-formatted for display; reduce it to dd/MM/yyyy for comparison. */
|
||||
private normalizeDisplayDob(display: string): string {
|
||||
const parsed = new Date(display);
|
||||
return isNaN(parsed.getTime()) ? (display || '').trim() : this.formatDob(parsed);
|
||||
}
|
||||
|
||||
/** The fields the declaration will state as differing. */
|
||||
get mismatchFields(): PanMismatchField[] {
|
||||
const fields: PanMismatchField[] = [];
|
||||
if (this.nameMismatch) {
|
||||
fields.push('NAME');
|
||||
}
|
||||
if (this.dobMismatch) {
|
||||
fields.push('DOB');
|
||||
}
|
||||
return fields;
|
||||
}
|
||||
|
||||
get mismatchLabel(): string {
|
||||
if (this.data.unverifiable) {
|
||||
return 'PAN could not be verified';
|
||||
}
|
||||
const fields = this.mismatchFields;
|
||||
if (!fields.length) {
|
||||
return this.compared ? 'No difference found' : 'Not yet compared';
|
||||
}
|
||||
return fields.map((f) => (f === 'NAME' ? 'Name' : 'Date of Birth')).join(' and ');
|
||||
}
|
||||
|
||||
/** Both PAN-card values must be keyed in before we can honestly say what differs. */
|
||||
get comparisonComplete(): boolean {
|
||||
return !!this.nameOnPan.trim() && !!this.dobOnPan;
|
||||
}
|
||||
|
||||
onCompare(): void {
|
||||
this.compared = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* A declaration must actually declare something. When the officer keys in PAN-card values that
|
||||
* match what was submitted, the mismatch is somewhere else — nothing to sign off here, and the
|
||||
* right move is to retry the verification rather than paper over it.
|
||||
*/
|
||||
get nothingToDeclare(): boolean {
|
||||
return !this.data.unverifiable && this.comparisonComplete && this.mismatchFields.length === 0;
|
||||
}
|
||||
|
||||
get canSubmit(): boolean {
|
||||
// The signed scan is the declaration — without it there is nothing to waive the exception on.
|
||||
if (!this.hasDeclarationFile) {
|
||||
return false;
|
||||
}
|
||||
if (this.data.unverifiable) {
|
||||
return true;
|
||||
}
|
||||
return this.comparisonComplete && this.mismatchFields.length > 0;
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
if (!this.canSubmit) {
|
||||
return;
|
||||
}
|
||||
const result: PanDeclarationResult = {
|
||||
mismatchFields: this.data.unverifiable ? 'NONE' : this.mismatchFields.join(','),
|
||||
nameOnPan: this.data.unverifiable ? null : this.nameOnPan.trim(),
|
||||
dobOnPan: this.data.unverifiable ? null : this.dobOnPan,
|
||||
file: this.declarationFile,
|
||||
fileName: this.fileName
|
||||
};
|
||||
this.dialogRef.close(result);
|
||||
}
|
||||
}
|
||||
@@ -12,4 +12,10 @@
|
||||
export interface Alert {
|
||||
type: string;
|
||||
message: string;
|
||||
/**
|
||||
* Errors are shown as a centred modal that has to be dismissed, because a corner toast that
|
||||
* disappears on its own is too easy to miss for something the user has to act on. Anything
|
||||
* without this keeps the unobtrusive snack bar.
|
||||
*/
|
||||
severity?: 'error';
|
||||
}
|
||||
|
||||
@@ -88,42 +88,38 @@ export class ErrorHandlerInterceptor implements HttpInterceptor {
|
||||
throw response;
|
||||
}
|
||||
|
||||
// Resolved once and emitted in one place below, so every failure here is consistently tagged
|
||||
// as an error and therefore surfaces as a centred modal rather than a corner toast.
|
||||
let alert: { type: string; message: string } | null = null;
|
||||
if (status === 401 || (environment.oauth.enabled && status === 400)) {
|
||||
this.alertService.alert({ type: 'Authentication Error', message: 'Invalid User Details. Please try again!' });
|
||||
alert = { type: 'Authentication Error', message: 'Invalid User Details. Please try again!' };
|
||||
} else if (status === 403 && errorMessage === 'The provided one time token is invalid') {
|
||||
this.alertService.alert({ type: 'Invalid Token', message: 'Invalid Token. Please try again!' });
|
||||
alert = { type: 'Invalid Token', message: 'Invalid Token. Please try again!' };
|
||||
} else if (status === 400) {
|
||||
this.alertService.alert({
|
||||
type: 'Bad Request',
|
||||
message: errorMessage || 'Invalid parameters were passed in the request!'
|
||||
});
|
||||
alert = { type: 'Bad Request', message: errorMessage || 'Invalid parameters were passed in the request!' };
|
||||
} else if (status === 403) {
|
||||
this.alertService.alert({
|
||||
type: 'Unauthorized Request',
|
||||
message: errorMessage || 'You are not authorized for this request!'
|
||||
});
|
||||
alert = { type: 'Unauthorized Request', message: errorMessage || 'You are not authorized for this request!' };
|
||||
} else if (status === 404) {
|
||||
{
|
||||
this.alertService.alert({
|
||||
type: this.translate.instant('error.resource.not.found'),
|
||||
message: errorMessage || 'Resource does not exist!'
|
||||
});
|
||||
}
|
||||
alert = {
|
||||
type: this.translate.instant('error.resource.not.found'),
|
||||
message: errorMessage || 'Resource does not exist!'
|
||||
};
|
||||
} else if (status === 500) {
|
||||
this.alertService.alert({
|
||||
type: 'Internal Server Error',
|
||||
message: 'Internal Server Error. Please try again later.'
|
||||
});
|
||||
alert = { type: 'Internal Server Error', message: 'Internal Server Error. Please try again later.' };
|
||||
} else if (status === 501) {
|
||||
this.alertService.alert({
|
||||
alert = {
|
||||
type: this.translate.instant('error.resource.notImplemented.type'),
|
||||
message: this.translate.instant('error.resource.notImplemented.message')
|
||||
});
|
||||
};
|
||||
} else if (status === 503) {
|
||||
this.alertService.alert({
|
||||
alert = {
|
||||
type: 'Service Unavailable',
|
||||
message: errorMessage || 'The server is currently unable to handle the request. Please try after some time.'
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
if (alert) {
|
||||
this.alertService.alert({ ...alert, severity: 'error' });
|
||||
}
|
||||
|
||||
throw response;
|
||||
|
||||
@@ -99,6 +99,19 @@
|
||||
</svg>
|
||||
My Disbursements
|
||||
</a>
|
||||
<a
|
||||
class="cashier-nav__item cashier-nav__item--sec"
|
||||
[class.cashier-nav__item--active]="currentUrl.includes('/clerk/share-withdrawal-request')"
|
||||
[routerLink]="['/clerk/share-withdrawal-requests']"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path
|
||||
d="M9.5 9a2.5 2.5 0 0 1 2.5-1.5c1.4 0 2.5.8 2.5 2s-1 1.5-2.5 1.9c-1.5.4-2.5.9-2.5 2.1s1.1 2 2.5 2 2.5-.7 2.5-1.6"
|
||||
/>
|
||||
</svg>
|
||||
My Share Requests
|
||||
</a>
|
||||
@if (clerkAccountLoaded) {
|
||||
<div class="cashier-nav__item-wrap">
|
||||
<a
|
||||
@@ -594,6 +607,12 @@
|
||||
<button mat-menu-item routerLink="/reports/risk-review" tabindex="0">
|
||||
<i class="fa fa-user-shield menu-item-icon"></i> Risk Review Report
|
||||
</button>
|
||||
<button mat-menu-item routerLink="/reports/tds-interest" tabindex="0">
|
||||
<i class="fa fa-percent menu-item-icon"></i> Deposit Interest & TDS
|
||||
</button>
|
||||
<button mat-menu-item routerLink="/reports/tds-remittance" tabindex="0">
|
||||
<i class="fa fa-landmark menu-item-icon"></i> TDS Remitted to Government
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<!-- Admin Mega Menu — 3-column rectangular panel grouping Setup,
|
||||
@@ -1605,6 +1624,14 @@
|
||||
<button mat-menu-item routerLink="/letter-mgmt/form-15gh" tabindex="0">
|
||||
<fa-icon icon="file-signature" class="menu-item-icon" style="color: #15803d"></fa-icon> Form 121
|
||||
</button>
|
||||
<button mat-menu-item routerLink="/reports/tds-interest" tabindex="0">
|
||||
<fa-icon icon="percentage" class="menu-item-icon" style="color: #15803d"></fa-icon> Deposit Interest &
|
||||
TDS
|
||||
</button>
|
||||
<button mat-menu-item routerLink="/reports/tds-remittance" tabindex="0">
|
||||
<fa-icon icon="building-columns" class="menu-item-icon" style="color: #15803d"></fa-icon> TDS Remitted to
|
||||
Govt
|
||||
</button>
|
||||
<button mat-menu-item routerLink="/letter-mgmt/hypothecation-certificate" tabindex="0">
|
||||
<fa-icon icon="file-alt" class="menu-item-icon" style="color: #15803d"></fa-icon>
|
||||
Hypothecation Certificate
|
||||
|
||||
@@ -188,9 +188,9 @@ export class ShellComponent implements OnInit, OnDestroy {
|
||||
return this.router.url;
|
||||
}
|
||||
|
||||
/** True on the manager's full-screen withdrawal-request review screen. */
|
||||
/** True on the manager's full-screen withdrawal-request (cash or share) review screen. */
|
||||
get isWithdrawalReviewUrl(): boolean {
|
||||
return /\/checker-inbox-and-tasks\/withdrawal-requests\/\d+\/review/.test(this.router.url);
|
||||
return /\/checker-inbox-and-tasks\/(share-)?withdrawal-requests\/\d+\/review/.test(this.router.url);
|
||||
}
|
||||
|
||||
/** ESC key — exit fullscreen at Clerk Dashboard / Election / review screen, restoring full shell header. */
|
||||
|
||||
@@ -295,6 +295,53 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LIVE: monthly CTR reports (mechanical, threshold-based) -->
|
||||
<div class="fiu-form-meta">
|
||||
<div class="fiu-form-title">
|
||||
<h3>Monthly CTR Reports</h3>
|
||||
<p>
|
||||
Threshold: <strong>₹{{ bank.cashThreshold | number }}</strong> per single txn / connected aggregate
|
||||
per month
|
||||
</p>
|
||||
</div>
|
||||
<div class="fiu-action-group">
|
||||
<input class="fiu-inp" type="month" [(ngModel)]="ctrGenerateMonth" />
|
||||
<button class="fiu-btn fiu-btn-g" *mifosxHasPermission="'REVIEW_AML_ALERT'" (click)="generateCtrReport()">
|
||||
Generate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fiu-tbl-wrap">
|
||||
<table class="fiu-tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Month</th>
|
||||
<th>Generated On</th>
|
||||
<th class="ta-c">Records</th>
|
||||
<th>Status</th>
|
||||
<th>Submitted On</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (r of amlCtrReports; track r.id) {
|
||||
<tr>
|
||||
<td>{{ r.reportMonth }}</td>
|
||||
<td>{{ r.generatedOn | date: 'medium' }}</td>
|
||||
<td class="ta-c">{{ r.recordCount }}</td>
|
||||
<td>
|
||||
<span [class]="amlStatusClass(r.status)">{{ r.status }}</span>
|
||||
</td>
|
||||
<td>{{ r.submittedOn ? (r.submittedOn | date: 'medium') : '—' }}</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr>
|
||||
<td colspan="5" class="fiu-empty">No CTR reports generated yet.</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -307,6 +354,14 @@
|
||||
<h3>Live AML Alerts (Awaiting Triage)</h3>
|
||||
<p>Flagged by the monitoring engine for suspicious behavioral patterns — triage and whitelist or escalate</p>
|
||||
</div>
|
||||
<!-- Whitelisted is deliberately absent: cleared alerts are not STR business and have
|
||||
their own register below. -->
|
||||
<select class="fiu-inp" [(ngModel)]="amlAlertStatusFilter">
|
||||
<option value="">All statuses</option>
|
||||
<option value="RAISED">Raised</option>
|
||||
<option value="UNDER_REVIEW">Under Review</option>
|
||||
<option value="ESCALATED">Escalated</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="fiu-tbl-wrap">
|
||||
<table class="fiu-tbl">
|
||||
@@ -362,7 +417,7 @@
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr>
|
||||
<td colspan="10" class="fiu-empty">No suspicious behavioral alerts.</td>
|
||||
<td colspan="10" class="fiu-empty">No suspicious behavioral alerts awaiting triage.</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
@@ -370,12 +425,62 @@
|
||||
</div>
|
||||
<p class="fiu-tbl-legend">
|
||||
<span class="report-pill report-pending">Pending</span> awaiting Whitelist/Escalate decision ·
|
||||
<span class="report-pill report-cleared">Cleared</span> whitelisted — no report filed ·
|
||||
<span class="report-pill report-str">→ STR</span> escalated to Principal Officer as an STR case
|
||||
</p>
|
||||
|
||||
<hr style="border: 0; border-top: 1px solid var(--f-g200); margin: 8px 0" />
|
||||
|
||||
<!-- Cleared register: whitelisted alerts, kept out of the STR queue but retained with the
|
||||
evidence recorded at review time. -->
|
||||
<div class="fiu-form-meta">
|
||||
<div class="fiu-form-title">
|
||||
<h3>Cleared Alerts (Whitelisted)</h3>
|
||||
<p>Reviewed and closed as false positives — no STR filed. Retained with the evidence relied on.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fiu-tbl-wrap">
|
||||
<table class="fiu-tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Client</th>
|
||||
<th>Type</th>
|
||||
<th>Rule</th>
|
||||
<th class="ta-r">Amount</th>
|
||||
<th>Raised On</th>
|
||||
<th>Cleared By</th>
|
||||
<th>Evidence</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (alert of amlWhitelistedAlerts; track alert.id) {
|
||||
<tr>
|
||||
<td>{{ alert.id }}</td>
|
||||
<td>{{ alert.clientDisplayName }}</td>
|
||||
<td>{{ alert.transactionType }}</td>
|
||||
<td>{{ alert.ruleCode }} — {{ alert.ruleDescription }}</td>
|
||||
<td class="ta-r mono">₹{{ alert.amount | number: '1.0-0' }}</td>
|
||||
<td>{{ alert.raisedOn | date: 'medium' }}</td>
|
||||
<td>{{ alert.reviewedByUsername || '—' }}</td>
|
||||
<td>
|
||||
<span class="muted">{{ alert.reviewNotes || '—' }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr>
|
||||
<td colspan="8" class="fiu-empty">No alerts have been cleared.</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="fiu-tbl-legend">
|
||||
<span class="report-pill report-cleared">Cleared</span> whitelisted — no report filed, evidence retained for
|
||||
audit
|
||||
</p>
|
||||
|
||||
<hr style="border: 0; border-top: 1px solid var(--f-g200); margin: 8px 0" />
|
||||
|
||||
<!-- LIVE: STR cases with full Principal Officer actions -->
|
||||
<div class="fiu-form-meta">
|
||||
<div class="fiu-form-title">
|
||||
|
||||
@@ -539,10 +539,14 @@ export class FiuComponent implements OnInit {
|
||||
: 'Suspicious — STR filed with FIU-IND and account escalated.';
|
||||
}
|
||||
|
||||
/**
|
||||
* Always fetches every status. The triage table and the cleared register are two views of the
|
||||
* same set, so filtering server-side would empty one whenever the other was narrowed — and the
|
||||
* CTR tab reads this list too, which a status filter chosen on the STR tab should not touch.
|
||||
* amlAlertStatusFilter is applied client-side in {@link amlSuspiciousAlerts} instead.
|
||||
*/
|
||||
loadAmlAlerts(): void {
|
||||
this.amlService
|
||||
.getAlerts(this.amlAlertStatusFilter || undefined)
|
||||
.subscribe((data) => (this.amlAlerts = data || []));
|
||||
this.amlService.getAlerts().subscribe((data) => (this.amlAlerts = data || []));
|
||||
}
|
||||
|
||||
loadAmlCtrReports(): void {
|
||||
@@ -558,8 +562,25 @@ export class FiuComponent implements OnInit {
|
||||
return (err: any) => this.toast(err?.error?.defaultUserMessage || `${action} failed — please retry`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clearing or escalating an alert has to carry a reason: review_notes is the only audit record of
|
||||
* why a flagged transaction was disposed of, and an empty string leaves no trace of the decision.
|
||||
*/
|
||||
private reviewNotesOf(alert: any): string | null {
|
||||
const notes = (this.amlReviewNotes[alert.id] || '').trim();
|
||||
if (!notes) {
|
||||
this.toast(`Enter review notes before disposing of alert #${alert.id}`);
|
||||
return null;
|
||||
}
|
||||
return notes;
|
||||
}
|
||||
|
||||
whitelistAlert(alert: any): void {
|
||||
this.amlService.reviewAlert(alert.id, 'WHITELIST', this.amlReviewNotes[alert.id] || '').subscribe({
|
||||
const notes = this.reviewNotesOf(alert);
|
||||
if (!notes) {
|
||||
return;
|
||||
}
|
||||
this.amlService.reviewAlert(alert.id, 'WHITELIST', notes).subscribe({
|
||||
next: () => {
|
||||
this.toast(`Alert #${alert.id} whitelisted — no STR raised`);
|
||||
this.loadAmlAlerts();
|
||||
@@ -569,7 +590,11 @@ export class FiuComponent implements OnInit {
|
||||
}
|
||||
|
||||
escalateAlert(alert: any): void {
|
||||
this.amlService.reviewAlert(alert.id, 'ESCALATE', this.amlReviewNotes[alert.id] || '').subscribe({
|
||||
const notes = this.reviewNotesOf(alert);
|
||||
if (!notes) {
|
||||
return;
|
||||
}
|
||||
this.amlService.reviewAlert(alert.id, 'ESCALATE', notes).subscribe({
|
||||
next: () => {
|
||||
this.toast(`Alert #${alert.id} escalated — now an STR case for the Principal Officer`);
|
||||
this.loadAmlAlerts();
|
||||
@@ -780,7 +805,8 @@ export class FiuComponent implements OnInit {
|
||||
return this.amlAlerts.filter((a) => ctrRuleCodes.includes(a.ruleCode));
|
||||
}
|
||||
|
||||
get amlSuspiciousAlerts(): any[] {
|
||||
/** Behavioural (non-CTR) alerts. */
|
||||
private get behaviouralAlerts(): any[] {
|
||||
const ctrRuleCodes = [
|
||||
'CTR_THRESHOLD_10L',
|
||||
'STRUCTURED_CTR_10L_MONTHLY',
|
||||
@@ -789,6 +815,21 @@ export class FiuComponent implements OnInit {
|
||||
return this.amlAlerts.filter((a) => !ctrRuleCodes.includes(a.ruleCode));
|
||||
}
|
||||
|
||||
/**
|
||||
* The STR triage queue: still to decide, or already escalated. Whitelisted alerts are closed
|
||||
* with no report, so they are not STR business — they live in {@link amlWhitelistedAlerts}.
|
||||
*/
|
||||
get amlSuspiciousAlerts(): any[] {
|
||||
return this.behaviouralAlerts.filter(
|
||||
(a) => a.status !== 'WHITELISTED' && (!this.amlAlertStatusFilter || a.status === this.amlAlertStatusFilter)
|
||||
);
|
||||
}
|
||||
|
||||
/** Cleared register: alerts closed as false positives, kept for audit with their evidence. */
|
||||
get amlWhitelistedAlerts(): any[] {
|
||||
return this.behaviouralAlerts.filter((a) => a.status === 'WHITELISTED');
|
||||
}
|
||||
|
||||
// -------------------- Head Office vs Branch scope --------------------
|
||||
/** Maps a FINnet-style internal branch code to the app-wide canonical branch code. */
|
||||
private canonicalBranchOf(branchCode: string): string | undefined {
|
||||
|
||||
@@ -40,6 +40,9 @@
|
||||
<button class="alm-tab" [class.active]="activeTab === 'monthly'" (click)="setTab('monthly')">
|
||||
<fa-icon icon="calendar-alt"></fa-icon> Monthly Snapshot
|
||||
</button>
|
||||
<button class="alm-tab" [class.active]="activeTab === 'avgbal'" (click)="setTab('avgbal')">
|
||||
<fa-icon icon="table"></fa-icon> Avg. Liabilities & Assets
|
||||
</button>
|
||||
<button class="alm-tab" [class.active]="activeTab === 'returns'" (click)="setTab('returns')">
|
||||
<fa-icon icon="file-invoice"></fa-icon> Form ALM-1
|
||||
</button>
|
||||
@@ -344,6 +347,87 @@
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- ════════════ AVERAGE LIABILITIES AND ASSETS ════════════ -->
|
||||
<ng-container *ngIf="activeTab === 'avgbal'">
|
||||
<div class="alm-section">
|
||||
<div class="alm-sec-h">
|
||||
<h3 class="alm-sec-t">Average Liabilities and Assets Month-wise during the year</h3>
|
||||
<button mat-stroked-button class="alm-btn-xls" (click)="exportAvgBalancesXls()">
|
||||
<fa-icon icon="file-excel"></fa-icon> Export Excel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Printed-statement banner: institution and office come off the session, not the report. -->
|
||||
<div class="alm-stmt">
|
||||
<div class="alm-stmt-bank">{{ statementHeading }}</div>
|
||||
<div class="alm-stmt-title">Average Liabilities and Assets Month-wise during the year</div>
|
||||
|
||||
<div class="alm-tbl-wrap">
|
||||
<table class="alm-tbl alm-stmt-tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Month</th>
|
||||
<th rowspan="2" class="ta-r">Capital</th>
|
||||
<th rowspan="2" class="ta-r">Reserve/Prov<br />Exclude OIR</th>
|
||||
<th rowspan="2" class="ta-r">Deposits</th>
|
||||
<th rowspan="2" class="ta-r">Borrowings</th>
|
||||
<th rowspan="2" class="ta-r">Other Liabilities</th>
|
||||
<th rowspan="2" class="ta-r">Cash on Hand</th>
|
||||
<th colspan="2" class="ta-c">Bank Balances</th>
|
||||
<th rowspan="2" class="ta-r">Investments<br />including</th>
|
||||
<th rowspan="2" class="ta-r">Advances</th>
|
||||
<th rowspan="2" class="ta-r">Other Assets<br />Exclude IRA</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="ta-r">Current</th>
|
||||
<th class="ta-r">FDs</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let r of avgBalanceRows">
|
||||
<td class="mono">
|
||||
<strong>{{ r.label }}</strong
|
||||
><br /><span class="alm-stmt-sub">{{ r.sub }}</span>
|
||||
</td>
|
||||
<td class="ta-r">{{ r.capital | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.reserveProv | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.deposits | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.borrowings | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.otherLiabilities | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.cashOnHand | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.bankCurrent | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.bankFds | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.investments | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.advances | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.otherAssets | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
|
||||
<tr class="row-total" *ngFor="let r of [avgBalanceTotal, avgBalanceAverage]">
|
||||
<td>{{ r.label }}</td>
|
||||
<td class="ta-r">{{ r.capital | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.reserveProv | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.deposits | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.borrowings | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.otherLiabilities | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.cashOnHand | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.bankCurrent | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.bankFds | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.investments | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.advances | number: '1.2-2' }}</td>
|
||||
<td class="ta-r">{{ r.otherAssets | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="alm-stmt-foot">
|
||||
<div>Print Date : {{ statementPrintedAt }}</div>
|
||||
<div>Report Ref No : {{ bank.reportRefNo }} User Code:{{ statementUserCode }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- ════════════ RETURNS / FORM ALM-1 ════════════ -->
|
||||
<ng-container *ngIf="activeTab === 'returns'">
|
||||
<div class="alm-section">
|
||||
|
||||
@@ -597,6 +597,58 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* AVERAGE LIABILITIES AND ASSETS — laid out as the statement prints */
|
||||
.alm-stmt {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--alm-g200);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.alm-stmt-bank {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--alm-g900);
|
||||
}
|
||||
|
||||
.alm-stmt-title {
|
||||
margin: 2px 0 14px;
|
||||
font-size: 12px;
|
||||
color: var(--alm-g500);
|
||||
}
|
||||
|
||||
.alm-stmt-tbl {
|
||||
th,
|
||||
td {
|
||||
padding: 7px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
td.ta-r {
|
||||
font-family: 'DM Mono', monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.alm-stmt-sub {
|
||||
font-size: 10px;
|
||||
color: var(--alm-g500);
|
||||
}
|
||||
|
||||
.alm-stmt-foot {
|
||||
margin-top: 14px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--alm-g200);
|
||||
font-size: 11px;
|
||||
line-height: 1.7;
|
||||
color: var(--alm-g500);
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
|
||||
@@ -13,6 +13,8 @@ import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { BranchScopeService } from 'app/core/branch-scope.service';
|
||||
import { AuthenticationService } from 'app/core/authentication/authentication.service';
|
||||
|
||||
interface MaturityBucket {
|
||||
code: string;
|
||||
@@ -31,6 +33,37 @@ interface MonthSnapshot {
|
||||
cashOnHand: number;
|
||||
investments: number;
|
||||
otherAssets: number;
|
||||
// ── Columns the month-wise average statement adds to the snapshot above ──
|
||||
// The statement is a full balance sheet averaged over each month, so it needs the own-funds
|
||||
// and deposit sides the liquidity tabs do not use, and it splits bank balances from cash.
|
||||
/** Paid-up share capital. */
|
||||
capital: number;
|
||||
/** Total deposits — the FD component above is part of this figure. */
|
||||
deposits: number;
|
||||
otherLiabilities: number;
|
||||
/** Balances with other banks, current accounts. */
|
||||
bankCurrent: number;
|
||||
/** Balances with other banks, held as fixed deposits. */
|
||||
bankFds: number;
|
||||
advances: number;
|
||||
}
|
||||
|
||||
/** One row of the month-wise average statement — a month, or the Total / Average line. */
|
||||
interface AvgBalanceRow {
|
||||
label: string;
|
||||
/** Sub-label under the month, e.g. the year, as the printed statement prints it. */
|
||||
sub: string;
|
||||
capital: number;
|
||||
reserveProv: number;
|
||||
deposits: number;
|
||||
borrowings: number;
|
||||
otherLiabilities: number;
|
||||
cashOnHand: number;
|
||||
bankCurrent: number;
|
||||
bankFds: number;
|
||||
investments: number;
|
||||
advances: number;
|
||||
otherAssets: number;
|
||||
}
|
||||
|
||||
@Component({
|
||||
@@ -50,8 +83,10 @@ interface MonthSnapshot {
|
||||
})
|
||||
export class AlmReportDialogComponent {
|
||||
private dialogRef = inject(MatDialogRef<AlmReportDialogComponent>);
|
||||
private branchScope = inject(BranchScopeService);
|
||||
private auth = inject(AuthenticationService);
|
||||
|
||||
activeTab: 'dashboard' | 'ladder' | 'monthly' | 'returns' = 'dashboard';
|
||||
activeTab: 'dashboard' | 'ladder' | 'monthly' | 'avgbal' | 'returns' = 'dashboard';
|
||||
|
||||
bank = {
|
||||
name: 'CBSNexora Bank Ltd',
|
||||
@@ -95,7 +130,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 462800,
|
||||
cashOnHand: 8420,
|
||||
investments: 184600,
|
||||
otherAssets: 12480
|
||||
otherAssets: 12480,
|
||||
capital: 24200,
|
||||
deposits: 602800,
|
||||
otherLiabilities: 28400,
|
||||
bankCurrent: 18900,
|
||||
bankFds: 46200,
|
||||
advances: 372400
|
||||
},
|
||||
{
|
||||
month: 'MAY-2025',
|
||||
@@ -104,7 +145,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 468200,
|
||||
cashOnHand: 8680,
|
||||
investments: 186400,
|
||||
otherAssets: 12620
|
||||
otherAssets: 12620,
|
||||
capital: 24280,
|
||||
deposits: 608600,
|
||||
otherLiabilities: 28560,
|
||||
bankCurrent: 19240,
|
||||
bankFds: 46600,
|
||||
advances: 376800
|
||||
},
|
||||
{
|
||||
month: 'JUN-2025',
|
||||
@@ -113,7 +160,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 472400,
|
||||
cashOnHand: 9120,
|
||||
investments: 188200,
|
||||
otherAssets: 12840
|
||||
otherAssets: 12840,
|
||||
capital: 24360,
|
||||
deposits: 613400,
|
||||
otherLiabilities: 28720,
|
||||
bankCurrent: 19580,
|
||||
bankFds: 47000,
|
||||
advances: 381200
|
||||
},
|
||||
{
|
||||
month: 'JUL-2025',
|
||||
@@ -122,7 +175,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 478600,
|
||||
cashOnHand: 9280,
|
||||
investments: 190400,
|
||||
otherAssets: 13020
|
||||
otherAssets: 13020,
|
||||
capital: 24460,
|
||||
deposits: 619800,
|
||||
otherLiabilities: 28880,
|
||||
bankCurrent: 19860,
|
||||
bankFds: 47400,
|
||||
advances: 385600
|
||||
},
|
||||
{
|
||||
month: 'AUG-2025',
|
||||
@@ -131,7 +190,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 482400,
|
||||
cashOnHand: 9420,
|
||||
investments: 192800,
|
||||
otherAssets: 13280
|
||||
otherAssets: 13280,
|
||||
capital: 24540,
|
||||
deposits: 624200,
|
||||
otherLiabilities: 29040,
|
||||
bankCurrent: 20180,
|
||||
bankFds: 47800,
|
||||
advances: 390200
|
||||
},
|
||||
{
|
||||
month: 'SEP-2025',
|
||||
@@ -140,7 +205,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 488200,
|
||||
cashOnHand: 9640,
|
||||
investments: 195200,
|
||||
otherAssets: 13420
|
||||
otherAssets: 13420,
|
||||
capital: 24620,
|
||||
deposits: 630400,
|
||||
otherLiabilities: 29200,
|
||||
bankCurrent: 20460,
|
||||
bankFds: 48200,
|
||||
advances: 394800
|
||||
},
|
||||
{
|
||||
month: 'OCT-2025',
|
||||
@@ -149,7 +220,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 492600,
|
||||
cashOnHand: 9820,
|
||||
investments: 197600,
|
||||
otherAssets: 13620
|
||||
otherAssets: 13620,
|
||||
capital: 24720,
|
||||
deposits: 635200,
|
||||
otherLiabilities: 29380,
|
||||
bankCurrent: 20740,
|
||||
bankFds: 48600,
|
||||
advances: 399400
|
||||
},
|
||||
{
|
||||
month: 'NOV-2025',
|
||||
@@ -158,7 +235,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 498400,
|
||||
cashOnHand: 9980,
|
||||
investments: 200200,
|
||||
otherAssets: 13820
|
||||
otherAssets: 13820,
|
||||
capital: 24800,
|
||||
deposits: 641000,
|
||||
otherLiabilities: 29540,
|
||||
bankCurrent: 21020,
|
||||
bankFds: 49000,
|
||||
advances: 404200
|
||||
},
|
||||
{
|
||||
month: 'DEC-2025',
|
||||
@@ -167,7 +250,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 504200,
|
||||
cashOnHand: 10240,
|
||||
investments: 202800,
|
||||
otherAssets: 14040
|
||||
otherAssets: 14040,
|
||||
capital: 24900,
|
||||
deposits: 646800,
|
||||
otherLiabilities: 29720,
|
||||
bankCurrent: 21340,
|
||||
bankFds: 49400,
|
||||
advances: 409000
|
||||
},
|
||||
{
|
||||
month: 'JAN-2026',
|
||||
@@ -176,7 +265,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 508800,
|
||||
cashOnHand: 10420,
|
||||
investments: 205200,
|
||||
otherAssets: 14240
|
||||
otherAssets: 14240,
|
||||
capital: 24980,
|
||||
deposits: 651600,
|
||||
otherLiabilities: 29880,
|
||||
bankCurrent: 21620,
|
||||
bankFds: 49800,
|
||||
advances: 413800
|
||||
},
|
||||
{
|
||||
month: 'FEB-2026',
|
||||
@@ -185,7 +280,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 514600,
|
||||
cashOnHand: 10620,
|
||||
investments: 207800,
|
||||
otherAssets: 14460
|
||||
otherAssets: 14460,
|
||||
capital: 25060,
|
||||
deposits: 657400,
|
||||
otherLiabilities: 30040,
|
||||
bankCurrent: 21900,
|
||||
bankFds: 50200,
|
||||
advances: 418600
|
||||
},
|
||||
{
|
||||
month: 'MAR-2026',
|
||||
@@ -194,7 +295,13 @@ export class AlmReportDialogComponent {
|
||||
fds: 520400,
|
||||
cashOnHand: 10820,
|
||||
investments: 210400,
|
||||
otherAssets: 14680
|
||||
otherAssets: 14680,
|
||||
capital: 25160,
|
||||
deposits: 663200,
|
||||
otherLiabilities: 30220,
|
||||
bankCurrent: 22240,
|
||||
bankFds: 50600,
|
||||
advances: 423600
|
||||
}
|
||||
];
|
||||
|
||||
@@ -256,6 +363,100 @@ export class AlmReportDialogComponent {
|
||||
return 'balanced';
|
||||
}
|
||||
|
||||
// ── Average Liabilities and Assets, month-wise ────────────────────────────
|
||||
//
|
||||
// The printed statement carries the institution and office it was taken for, and who took it.
|
||||
// Those come off the session rather than being typed into the report, so a branch login prints
|
||||
// its own office and its own user code instead of whatever the last person hard-coded.
|
||||
|
||||
/** "<BANK> , <OFFICE>" — the banner line the printed statement opens with. */
|
||||
get statementHeading(): string {
|
||||
return `${this.bank.name.toUpperCase()} , ${this.branchScope.officeName.toUpperCase()}`;
|
||||
}
|
||||
|
||||
/** Who ran the report — the login's username, which is what the printed footer calls a code. */
|
||||
get statementUserCode(): string {
|
||||
return (this.auth.getCredentials()?.username || this.bank.userCode).toUpperCase();
|
||||
}
|
||||
|
||||
/** Stamped when the tab is opened, so the footer records when the figures were taken off. */
|
||||
readonly statementPrintedAt = this.formatPrintDate(new Date());
|
||||
|
||||
/**
|
||||
* Month rows, then the Total and Average lines the statement closes with.
|
||||
*
|
||||
* Average is the mean of the months shown, not Total ÷ 12 — a statement printed part-way
|
||||
* through the year would otherwise divide by months that have not happened yet.
|
||||
*/
|
||||
get avgBalanceRows(): AvgBalanceRow[] {
|
||||
return this.monthly.map((m) => {
|
||||
const [
|
||||
name,
|
||||
year
|
||||
] = m.month.split('-');
|
||||
return {
|
||||
label: name,
|
||||
sub: year,
|
||||
capital: m.capital,
|
||||
reserveProv: m.reserveProv,
|
||||
deposits: m.deposits,
|
||||
borrowings: m.borrowings,
|
||||
otherLiabilities: m.otherLiabilities,
|
||||
cashOnHand: m.cashOnHand,
|
||||
bankCurrent: m.bankCurrent,
|
||||
bankFds: m.bankFds,
|
||||
investments: m.investments,
|
||||
advances: m.advances,
|
||||
otherAssets: m.otherAssets
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
private readonly avgBalanceColumns: (keyof AvgBalanceRow)[] = [
|
||||
'capital',
|
||||
'reserveProv',
|
||||
'deposits',
|
||||
'borrowings',
|
||||
'otherLiabilities',
|
||||
'cashOnHand',
|
||||
'bankCurrent',
|
||||
'bankFds',
|
||||
'investments',
|
||||
'advances',
|
||||
'otherAssets'
|
||||
];
|
||||
|
||||
get avgBalanceTotal(): AvgBalanceRow {
|
||||
const rows = this.avgBalanceRows;
|
||||
const out = { label: 'Total', sub: '' } as AvgBalanceRow;
|
||||
for (const key of this.avgBalanceColumns) {
|
||||
out[key] = rows.reduce((s, r) => s + (r[key] as number), 0) as never;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
get avgBalanceAverage(): AvgBalanceRow {
|
||||
const rows = this.avgBalanceRows;
|
||||
const total = this.avgBalanceTotal;
|
||||
const out = { label: 'Average', sub: '' } as AvgBalanceRow;
|
||||
for (const key of this.avgBalanceColumns) {
|
||||
out[key] = (rows.length ? +((total[key] as number) / rows.length).toFixed(2) : 0) as never;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/** dd/MM/yyyy hh:mm:ssAM — the format the printed statement stamps its footer with. */
|
||||
private formatPrintDate(d: Date): string {
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
const hours24 = d.getHours();
|
||||
const meridiem = hours24 < 12 ? 'AM' : 'PM';
|
||||
const hours12 = hours24 % 12 === 0 ? 12 : hours24 % 12;
|
||||
return (
|
||||
`${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ` +
|
||||
`${pad(hours12)}:${pad(d.getMinutes())}:${pad(d.getSeconds())}${meridiem}`
|
||||
);
|
||||
}
|
||||
|
||||
/** Monthly totals helpers */
|
||||
monthTotalLiab(m: MonthSnapshot): number {
|
||||
return m.reserveProv + m.borrowings + m.fds;
|
||||
@@ -407,6 +608,49 @@ export class AlmReportDialogComponent {
|
||||
this.saveTsv(rows, `ALM-Monthly-${this.dateTag()}.xls`);
|
||||
}
|
||||
|
||||
/** Average Liabilities and Assets — the printed statement, column for column. */
|
||||
exportAvgBalancesXls(): void {
|
||||
const rows: string[][] = [];
|
||||
rows.push([this.statementHeading]);
|
||||
rows.push(['Average Liabilities and Assets Month-wise during the year']);
|
||||
rows.push([]);
|
||||
rows.push([
|
||||
'Month',
|
||||
'Capital',
|
||||
'Reserve/Prov Exclude OIR',
|
||||
'Deposits',
|
||||
'Borrowings',
|
||||
'Other Liabilities',
|
||||
'Cash on Hand',
|
||||
'Bank Balances Current',
|
||||
'Bank Balances FDs',
|
||||
'Investments including',
|
||||
'Advances',
|
||||
'Other Assets Exclude IRA'
|
||||
]);
|
||||
const line = (r: AvgBalanceRow): string[] => [
|
||||
`${r.label} ${r.sub}`.trim(),
|
||||
r.capital.toFixed(2),
|
||||
r.reserveProv.toFixed(2),
|
||||
r.deposits.toFixed(2),
|
||||
r.borrowings.toFixed(2),
|
||||
r.otherLiabilities.toFixed(2),
|
||||
r.cashOnHand.toFixed(2),
|
||||
r.bankCurrent.toFixed(2),
|
||||
r.bankFds.toFixed(2),
|
||||
r.investments.toFixed(2),
|
||||
r.advances.toFixed(2),
|
||||
r.otherAssets.toFixed(2)
|
||||
];
|
||||
this.avgBalanceRows.forEach((r) => rows.push(line(r)));
|
||||
rows.push(line(this.avgBalanceTotal));
|
||||
rows.push(line(this.avgBalanceAverage));
|
||||
rows.push([]);
|
||||
rows.push([`Print Date : ${this.statementPrintedAt}`]);
|
||||
rows.push([`Report Ref No : ${this.bank.reportRefNo} User Code:${this.statementUserCode}`]);
|
||||
this.saveTsv(rows, `ALM-AverageLiabilitiesAssets-${this.dateTag()}.xls`);
|
||||
}
|
||||
|
||||
/** Maturity ladder CSV */
|
||||
exportLadderCsv(): void {
|
||||
const headers = [
|
||||
@@ -431,7 +675,7 @@ export class AlmReportDialogComponent {
|
||||
this.saveCsv(rows, `ALM-Ladder-${this.dateTag()}.csv`);
|
||||
}
|
||||
|
||||
setTab(tab: 'dashboard' | 'ladder' | 'monthly' | 'returns'): void {
|
||||
setTab(tab: 'dashboard' | 'ladder' | 'monthly' | 'avgbal' | 'returns'): void {
|
||||
this.activeTab = tab;
|
||||
}
|
||||
close(): void {
|
||||
|
||||
@@ -7,7 +7,16 @@
|
||||
-->
|
||||
|
||||
<h1 mat-dialog-title>{{ 'labels.heading.Session Timeout' | translate }}</h1>
|
||||
<mat-dialog-content>{{ 'labels.text.Session timed out after a period of inactivity' | translate }}.</mat-dialog-content>
|
||||
<mat-dialog-actions>
|
||||
<button mat-raised-button color="primary" mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
|
||||
<mat-dialog-content>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px; padding-top: 8px">
|
||||
<p>{{ 'labels.text.Session timed out after a period of inactivity' | translate }}.</p>
|
||||
<p>
|
||||
For your security, you will be logged out in
|
||||
<strong style="color: #f44336; font-size: 1.1em">{{ countdown }}</strong> seconds.
|
||||
</p>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end" style="gap: 8px">
|
||||
<button mat-button color="warn" (click)="logoutNow()">Logout</button>
|
||||
<button mat-raised-button color="primary" (click)="keepSessionActive()">Stay Logged In</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
@@ -6,13 +6,14 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { Component, inject, OnInit, OnDestroy } from '@angular/core';
|
||||
import {
|
||||
MatDialogRef,
|
||||
MatDialogTitle,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialogClose
|
||||
MatDialogClose,
|
||||
MAT_DIALOG_DATA
|
||||
} from '@angular/material/dialog';
|
||||
import { CdkScrollable } from '@angular/cdk/scrolling';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
@@ -30,6 +31,43 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
MatDialogClose
|
||||
]
|
||||
})
|
||||
export class SessionTimeoutDialogComponent {
|
||||
export class SessionTimeoutDialogComponent implements OnInit, OnDestroy {
|
||||
dialogRef = inject<MatDialogRef<SessionTimeoutDialogComponent>>(MatDialogRef);
|
||||
data = inject<{ countdownSeconds?: number }>(MAT_DIALOG_DATA, { optional: true });
|
||||
|
||||
countdown = this.data?.countdownSeconds ?? 60;
|
||||
private intervalId: any;
|
||||
|
||||
ngOnInit() {
|
||||
this.startCountdown();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.clearTimer();
|
||||
}
|
||||
|
||||
private startCountdown() {
|
||||
this.intervalId = setInterval(() => {
|
||||
this.countdown--;
|
||||
if (this.countdown <= 0) {
|
||||
this.clearTimer();
|
||||
this.dialogRef.close('logout');
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
private clearTimer() {
|
||||
if (this.intervalId) {
|
||||
clearInterval(this.intervalId);
|
||||
this.intervalId = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
keepSessionActive() {
|
||||
this.dialogRef.close('keep-alive');
|
||||
}
|
||||
|
||||
logoutNow() {
|
||||
this.dialogRef.close('logout');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,6 +29,11 @@
|
||||
Account Status
|
||||
<span class="km-cnt km-cnt--red">34</span>
|
||||
</button>
|
||||
<button class="km-itab" [class.active]="activeSection === 'exceptions'" (click)="showSection('exceptions')">
|
||||
<fa-icon icon="exclamation-triangle"></fa-icon>
|
||||
KYC Exceptions
|
||||
<span class="km-cnt km-cnt--amb">{{ exceptionRows.length }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="km-main">
|
||||
@@ -185,66 +190,47 @@
|
||||
<div class="km-card">
|
||||
<div class="km-ch">
|
||||
<div class="km-ci km-ci-a"><fa-icon icon="calendar-alt"></fa-icon></div>
|
||||
<div class="km-ct">3-Notice Dispatch Timeline</div>
|
||||
<span class="km-ch-hint">Expiry: 30 Apr 2027 · Window: 31 Mar – 30 Apr</span>
|
||||
<div class="km-ct">Escalation Ladder — one channel at a time</div>
|
||||
<span class="km-ch-hint">
|
||||
{{ reKycCompletedCount }} of {{ reKycSteps.length }} dispatched · Expiry: 30 Apr 2027 · Window: 31 Mar –
|
||||
30 Apr
|
||||
</span>
|
||||
</div>
|
||||
<div class="km-cb">
|
||||
<div class="km-ntl">
|
||||
<div class="km-nt">
|
||||
<div class="km-nd-col">
|
||||
<div class="km-nd km-nd1">1</div>
|
||||
<div class="km-nl"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="km-nh">Notice 1 — Alert window opens</div>
|
||||
<div class="km-ns">31 March 2027 · Auto-scheduled · <span class="km-ok">✓ Delivered</span></div>
|
||||
<div class="km-ntags">
|
||||
<span class="km-cp km-cp-sms">SMS</span>
|
||||
<span class="km-cp km-cp-mail">Email</span>
|
||||
<!-- One channel per rung: the next is released only when the current one is dispatched. -->
|
||||
@for (s of reKycSteps; track s.step; let i = $index) {
|
||||
<div class="km-nt" [class.km-nt-locked]="s.status === 'LOCKED'">
|
||||
<div class="km-nd-col">
|
||||
<div class="km-nd" [ngClass]="'km-nd' + s.notice">{{ s.step }}</div>
|
||||
<div class="km-nl"></div>
|
||||
</div>
|
||||
<div>
|
||||
@if (isFirstOfNotice(i)) {
|
||||
<div class="km-nnotice">Notice {{ s.notice }}</div>
|
||||
}
|
||||
<div class="km-nh">Step {{ s.step }} — {{ s.channel }}</div>
|
||||
<div class="km-ns">
|
||||
{{ s.date }} · {{ s.offset }} ·
|
||||
<span [ngClass]="reKycStatusClass(s.status)">{{ reKycStatusLabel(s.status) }}</span>
|
||||
</div>
|
||||
<div class="km-ntags">
|
||||
<span class="km-cp" [ngClass]="s.chip">{{ s.channel }}</span>
|
||||
<span class="km-nchdetail">{{ s.detail }}</span>
|
||||
</div>
|
||||
@if (s.status === 'PENDING') {
|
||||
<div class="km-row-actions">
|
||||
<button class="km-btn km-btn-t" (click)="dispatchReKycStep(s.step)">
|
||||
Dispatch {{ s.channel }}
|
||||
</button>
|
||||
<button class="km-btn km-btn-ot" (click)="dispatchReKycStep(s.step, true)">
|
||||
Mark failed — escalate
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="km-nt">
|
||||
<div class="km-nd-col">
|
||||
<div class="km-nd km-nd2">2</div>
|
||||
<div class="km-nl"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="km-nh">Notice 2 — Follow-up</div>
|
||||
<div class="km-ns">10 April 2027 · +10 days · <span class="km-pending">⏳ Pending</span></div>
|
||||
<div class="km-ntags">
|
||||
<span class="km-cp km-cp-sms">SMS</span>
|
||||
<span class="km-cp km-cp-mail">Email</span>
|
||||
<span class="km-cp km-cp-ivr">IVR Call</span>
|
||||
<span class="km-cp km-cp-post">Reg. Post</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="km-nt">
|
||||
<div class="km-nd-col">
|
||||
<div class="km-nd km-nd3">3</div>
|
||||
<div class="km-nl"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="km-nh">Notice 3 — Final notice</div>
|
||||
<div class="km-ns">20 April 2027 · +20 days · <span class="km-fail">✗ Not dispatched</span></div>
|
||||
<div class="km-ntags">
|
||||
<span class="km-cp km-cp-sms">SMS</span>
|
||||
<span class="km-cp km-cp-mail">Email</span>
|
||||
<span class="km-cp km-cp-ivr">IVR</span>
|
||||
<span class="km-cp km-cp-post">Reg. Post</span>
|
||||
<span class="km-cp km-cp-vis">Home Visit</span>
|
||||
</div>
|
||||
<div class="km-row-actions">
|
||||
<button class="km-btn km-btn-t" (click)="toast('Notice 3 scheduled for 20 Apr 2027')">
|
||||
Schedule Notice 3
|
||||
</button>
|
||||
<button class="km-btn km-btn-ot" (click)="toast('Video KYC link added to Notice 3')">
|
||||
+ Video KYC Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="km-nt">
|
||||
<div class="km-nd-col">
|
||||
<div class="km-nd km-ndf">!</div>
|
||||
@@ -290,39 +276,26 @@
|
||||
<div class="km-card">
|
||||
<div class="km-ch">
|
||||
<div class="km-ci km-ci-b"><fa-icon icon="broadcast-tower"></fa-icon></div>
|
||||
<div class="km-ct">Channels — Notice 3</div>
|
||||
<div class="km-ct">Channel Sequence</div>
|
||||
</div>
|
||||
<!-- Mirrors the ladder: exactly one channel is live, so this is a progress read-out rather
|
||||
than a set of switches that could all be turned on at once. -->
|
||||
<div class="km-cb km-channels">
|
||||
<div class="km-channel km-channel-on" (click)="toast('SMS toggled')">
|
||||
<div class="km-channel-i">📱</div>
|
||||
<div class="km-channel-n">SMS</div>
|
||||
<div class="km-channel-d">Registered mobile</div>
|
||||
</div>
|
||||
<div class="km-channel km-channel-on" (click)="toast('Email toggled')">
|
||||
<div class="km-channel-i">📧</div>
|
||||
<div class="km-channel-n">Email</div>
|
||||
<div class="km-channel-d">Registered email</div>
|
||||
</div>
|
||||
<div class="km-channel km-channel-on" (click)="toast('IVR toggled')">
|
||||
<div class="km-channel-i">📞</div>
|
||||
<div class="km-channel-n">IVR Call</div>
|
||||
<div class="km-channel-d">Outbound IVR</div>
|
||||
</div>
|
||||
<div class="km-channel km-channel-on" (click)="toast('Reg Post toggled')">
|
||||
<div class="km-channel-i">📮</div>
|
||||
<div class="km-channel-n">Reg. Post</div>
|
||||
<div class="km-channel-d">India Post</div>
|
||||
</div>
|
||||
<div class="km-channel" (click)="toast('Branch visit toggled')">
|
||||
<div class="km-channel-i">🏦</div>
|
||||
<div class="km-channel-n">Home Visit</div>
|
||||
<div class="km-channel-d">Manual</div>
|
||||
</div>
|
||||
<div class="km-channel" (click)="toast('Video KYC toggled')">
|
||||
<div class="km-channel-i">📹</div>
|
||||
<div class="km-channel-n">Video KYC</div>
|
||||
<div class="km-channel-d">V-CIP app</div>
|
||||
</div>
|
||||
@for (s of reKycSteps; track s.step) {
|
||||
<div
|
||||
class="km-channel"
|
||||
[class.km-channel-on]="s.status === 'DELIVERED'"
|
||||
[class.km-channel-live]="s.status === 'PENDING'"
|
||||
[class.km-channel-off]="s.status === 'LOCKED'"
|
||||
[title]="reKycStatusLabel(s.status)"
|
||||
>
|
||||
<div class="km-channel-n">{{ s.step }}. {{ s.channel }}</div>
|
||||
<div class="km-channel-d">{{ s.detail }}</div>
|
||||
<div class="km-channel-s" [ngClass]="reKycStatusClass(s.status)">
|
||||
{{ reKycStatusLabel(s.status) }}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -722,6 +695,285 @@
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- KYC EXCEPTIONS -->
|
||||
@if (activeSection === 'exceptions') {
|
||||
<div class="km-page">
|
||||
<div class="km-page-head">
|
||||
<span class="km-page-title">KYC Exceptions Dashboard</span>
|
||||
<div class="km-actions">
|
||||
<button class="km-btn km-btn-g" [disabled]="exportingExceptions" (click)="exportExceptions()">
|
||||
<fa-icon icon="download"></fa-icon>
|
||||
{{ exportingExceptions ? 'Preparing…' : 'Export Exceptions' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="km-stat-row">
|
||||
<div class="km-stat">
|
||||
<div class="km-stat-n" style="color: var(--km-amber)">{{ exceptionRows.length }}</div>
|
||||
<div class="km-stat-l">Pending Exceptions</div>
|
||||
<div class="km-stat-t" style="color: var(--km-amber)">Immediate attention</div>
|
||||
</div>
|
||||
<div class="km-stat">
|
||||
<div class="km-stat-n" style="color: var(--km-red)">
|
||||
{{ notYetContactedCount }}
|
||||
</div>
|
||||
<div class="km-stat-l">Not Yet Contacted</div>
|
||||
<div class="km-stat-t" style="color: var(--km-red)">Action required</div>
|
||||
</div>
|
||||
<div class="km-stat">
|
||||
<div class="km-stat-n" style="color: var(--km-orange)">
|
||||
{{ panMismatchesCount }}
|
||||
</div>
|
||||
<div class="km-stat-l">PAN Mismatches</div>
|
||||
<div class="km-stat-t" style="color: var(--km-orange)">Requires physical review</div>
|
||||
</div>
|
||||
<div class="km-stat">
|
||||
<div class="km-stat-n" style="color: var(--km-blue)">
|
||||
{{ aadhaarFailuresCount }}
|
||||
</div>
|
||||
<div class="km-stat-l">Aadhaar Failures</div>
|
||||
<div class="km-stat-t" style="color: var(--km-blue)">Re-KYC OTP needed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="km-card km-mt">
|
||||
<!-- Tab Toggle Header -->
|
||||
<div
|
||||
class="km-ch"
|
||||
style="
|
||||
border-bottom: 1px solid var(--km-g200);
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
"
|
||||
>
|
||||
<div style="display: flex; gap: 8px; align-items: center">
|
||||
<div class="km-ci" style="background: #fef3c7; color: #d97706">
|
||||
<fa-icon icon="exclamation-triangle"></fa-icon>
|
||||
</div>
|
||||
<div class="km-ct">Exceptions Register</div>
|
||||
</div>
|
||||
|
||||
<div class="km-inner-nav" style="width: 100%; border: none; margin: 10px 0 0 0; padding: 0; gap: 8px">
|
||||
<button
|
||||
class="km-itab"
|
||||
[class.active]="activeExceptionSubTab === 'pending'"
|
||||
(click)="activeExceptionSubTab = 'pending'"
|
||||
style="padding: 8px 16px; border-radius: 4px; font-weight: 600; font-size: 13px"
|
||||
>
|
||||
<fa-icon icon="clock"></fa-icon>
|
||||
Pending Exceptions ({{ pendingExceptions.length }})
|
||||
</button>
|
||||
<button
|
||||
class="km-itab"
|
||||
[class.active]="activeExceptionSubTab === 'resolved'"
|
||||
(click)="activeExceptionSubTab = 'resolved'"
|
||||
style="padding: 8px 16px; border-radius: 4px; font-weight: 600; font-size: 13px"
|
||||
>
|
||||
<fa-icon icon="check-circle"></fa-icon>
|
||||
Resolved Exceptions ({{ resolvedExceptions.length }})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PENDING EXCEPTIONS TAB -->
|
||||
@if (activeExceptionSubTab === 'pending') {
|
||||
@if (pendingExceptions.length === 0) {
|
||||
<div class="km-empty" style="padding: 40px; text-align: center">
|
||||
<div class="km-empty-i">🎉</div>
|
||||
<div style="font-weight: 500; font-size: 16px; margin-top: 12px">All exceptions resolved!</div>
|
||||
<div class="km-empty-s" style="color: var(--km-g500); font-size: 13px; margin-top: 4px">
|
||||
There are no active client KYC exceptions on record.
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<table class="km-tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client / Account</th>
|
||||
<th>Branch</th>
|
||||
<th>Exception Reason & Date</th>
|
||||
<th>Risk</th>
|
||||
<th>Contact Status</th>
|
||||
<th>Contact Logs</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (c of pendingExceptions; track c.id) {
|
||||
<tr>
|
||||
<td>
|
||||
<div
|
||||
class="km-an"
|
||||
[routerLink]="['/clients', c.id, 'kyc']"
|
||||
style="cursor: pointer; color: var(--km-blue); text-decoration: underline"
|
||||
>
|
||||
{{ c.name }}
|
||||
</div>
|
||||
<div class="km-ai">{{ c.account }}</div>
|
||||
</td>
|
||||
<td>{{ c.contact.branch }}</td>
|
||||
<td>
|
||||
<div style="font-weight: 500; color: #b45309">{{ c.exceptionReason }}</div>
|
||||
<div class="km-small">Opened: {{ c.exceptionDate }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="km-b" [ngClass]="riskClass(c.risk)">{{ c.riskLabel }}</span>
|
||||
</td>
|
||||
<td>
|
||||
@if (c.contactHistory && c.contactHistory.length > 0) {
|
||||
<span class="km-del d-ok">Contacted</span>
|
||||
<div class="km-small" style="margin-top: 2px">
|
||||
Last: {{ c.contactHistory[c.contactHistory.length - 1].date }}
|
||||
</div>
|
||||
} @else {
|
||||
<span class="km-del d-fa">Not Contacted</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
@if (c.contactHistory && c.contactHistory.length > 0) {
|
||||
<div class="contact-logs-list" style="max-height: 80px; overflow-y: auto; font-size: 11px">
|
||||
@for (log of c.contactHistory; track $index) {
|
||||
<div style="border-bottom: 1px dashed var(--km-g300); padding: 2px 0">
|
||||
<strong>{{ log.date }} ({{ log.action }}):</strong> {{ log.notes }}
|
||||
<em>— {{ log.officer }}</em>
|
||||
@if (log.platformSent) {
|
||||
@if (log.delivered) {
|
||||
<span class="km-sent-tag km-sent-ok" [title]="log.deliveryMessage"
|
||||
>Sent {{ log.destinationMasked }}</span
|
||||
>
|
||||
} @else {
|
||||
<span class="km-sent-tag km-sent-fail" [title]="log.deliveryMessage">Not sent</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<span style="color: var(--km-g500); font-size: 11px">No logs recorded</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<div style="display: flex; gap: 8px">
|
||||
<button
|
||||
class="km-btn km-btn-ot"
|
||||
style="border-color: var(--km-blue); color: var(--km-blue)"
|
||||
[routerLink]="['/clients', c.id, 'kyc']"
|
||||
>
|
||||
<fa-icon icon="user-check"></fa-icon> Do KYC
|
||||
</button>
|
||||
<button class="km-btn km-btn-ot" (click)="openContactDialog(c)">
|
||||
<fa-icon icon="phone"></fa-icon> Log Call
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
}
|
||||
|
||||
<!-- RESOLVED EXCEPTIONS TAB -->
|
||||
@if (activeExceptionSubTab === 'resolved') {
|
||||
@if (resolvedExceptions.length === 0) {
|
||||
<div class="km-empty" style="padding: 40px; text-align: center">
|
||||
<div class="km-empty-i" style="font-size: 32px; filter: grayscale(1)">📋</div>
|
||||
<div style="font-weight: 500; font-size: 16px; margin-top: 12px; color: var(--km-g500)">
|
||||
No resolved exceptions
|
||||
</div>
|
||||
<div class="km-empty-s" style="color: var(--km-g500); font-size: 13px; margin-top: 4px">
|
||||
Resolved KYC exceptions will appear here once verification is completed.
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<table class="km-tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client / Account</th>
|
||||
<th>Branch</th>
|
||||
<th>Exception Reason & Resolution</th>
|
||||
<th>Risk</th>
|
||||
<th>Contact Logs</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (c of resolvedExceptions; track c.id) {
|
||||
<tr>
|
||||
<td>
|
||||
<div
|
||||
class="km-an"
|
||||
[routerLink]="['/clients', c.id, 'kyc']"
|
||||
style="cursor: pointer; color: var(--km-blue); text-decoration: underline"
|
||||
>
|
||||
{{ c.name }}
|
||||
</div>
|
||||
<div class="km-ai">{{ c.account }}</div>
|
||||
</td>
|
||||
<td>{{ c.contact.branch }}</td>
|
||||
<td>
|
||||
<div style="font-weight: 500; color: var(--km-g500); text-decoration: line-through">
|
||||
{{ c.exceptionReason }}
|
||||
</div>
|
||||
<div class="km-small">Resolved On: {{ c.exceptionResolvedOn }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="km-b" [ngClass]="riskClass(c.risk)">{{ c.riskLabel }}</span>
|
||||
</td>
|
||||
<td>
|
||||
@if (c.contactHistory && c.contactHistory.length > 0) {
|
||||
<div class="contact-logs-list" style="max-height: 80px; overflow-y: auto; font-size: 11px">
|
||||
@for (log of c.contactHistory; track $index) {
|
||||
<div style="border-bottom: 1px dashed var(--km-g300); padding: 2px 0">
|
||||
<strong>{{ log.date }} ({{ log.action }}):</strong> {{ log.notes }}
|
||||
<em>— {{ log.officer }}</em>
|
||||
@if (log.platformSent) {
|
||||
@if (log.delivered) {
|
||||
<span class="km-sent-tag km-sent-ok" [title]="log.deliveryMessage"
|
||||
>Sent {{ log.destinationMasked }}</span
|
||||
>
|
||||
} @else {
|
||||
<span class="km-sent-tag km-sent-fail" [title]="log.deliveryMessage">Not sent</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<span style="color: var(--km-g500); font-size: 11px">No logs recorded</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
style="
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: #e6f4ea;
|
||||
color: #137333;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
"
|
||||
>
|
||||
<fa-icon icon="check-circle"></fa-icon> Exception Resolved
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- CLIENT DETAIL MODAL -->
|
||||
@@ -1165,6 +1417,251 @@
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- LOG CONTACT DIALOG -->
|
||||
@if (contactDialogOpen && current) {
|
||||
<div class="km-overlay" (click)="closeContactDialog()">
|
||||
<div class="km-modal hv-modal" (click)="$event.stopPropagation()">
|
||||
<div class="km-mh">
|
||||
<div class="km-mh-av">{{ current.av }}</div>
|
||||
<div>
|
||||
<div class="km-mh-name">Log Customer Contact</div>
|
||||
<div class="km-mh-meta">{{ current.name }} · {{ current.account }}</div>
|
||||
</div>
|
||||
<div class="km-mclose" (click)="closeContactDialog()">✕</div>
|
||||
</div>
|
||||
|
||||
<div class="km-mbody hv-body">
|
||||
<div class="hv-addr">
|
||||
<div class="hv-addr-label">Customer Contact Info</div>
|
||||
<div class="hv-addr-name">{{ current.name }}</div>
|
||||
<div class="hv-addr-text">
|
||||
<fa-icon icon="mobile-alt" class="vkyc-ic"></fa-icon> {{ current.contact.mobile }}
|
||||
</div>
|
||||
<div class="hv-addr-text">
|
||||
<fa-icon icon="envelope" class="vkyc-ic"></fa-icon> {{ current.contact.email }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hv-row">
|
||||
<label class="hv-label">Contact Channel<span class="hv-req">*</span></label>
|
||||
<select class="hv-input" [(ngModel)]="contactChannel">
|
||||
@for (ch of contactChannels; track ch.value) {
|
||||
<option [value]="ch.value">
|
||||
{{ ch.label }}{{ ch.sends ? ' — sends a notice now' : ' — record only' }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
@if (selectedChannelSends) {
|
||||
<div class="hv-hint hv-hint-send">
|
||||
<fa-icon icon="paper-plane" class="vkyc-ic"></fa-icon>
|
||||
A KYC notice will be sent to the customer when you save.
|
||||
</div>
|
||||
} @else {
|
||||
<div class="hv-hint">Records an action you already took. Nothing is sent to the customer.</div>
|
||||
}
|
||||
@if (selectedChannelUnavailable) {
|
||||
<div class="hv-hint hv-hint-error">
|
||||
This customer has no {{ selectedChannel?.requires === 'email' ? 'email address' : 'mobile number' }} on
|
||||
file — choose a different channel.
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="hv-row">
|
||||
<label class="hv-label">KYC Officer Logging<span class="hv-req">*</span></label>
|
||||
<select class="hv-input" [(ngModel)]="contactOfficer">
|
||||
@for (officer of bankOfficers; track officer) {
|
||||
<option [value]="officer">{{ officer }}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="hv-row">
|
||||
<label class="hv-label">Summary / Notes<span class="hv-req">*</span></label>
|
||||
<textarea
|
||||
class="hv-input hv-textarea"
|
||||
rows="3"
|
||||
placeholder="Enter details of conversation e.g. Customer promised to visit branch next Tuesday..."
|
||||
[(ngModel)]="contactNotes"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
@if (contactError) {
|
||||
<div class="hv-hint hv-hint-error" role="alert">
|
||||
<fa-icon icon="exclamation-circle" class="vkyc-ic"></fa-icon> {{ contactError }}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="hv-footer">
|
||||
<button class="km-btn" [disabled]="contactSaving" (click)="closeContactDialog()">Cancel</button>
|
||||
<button class="km-btn km-btn-t" [disabled]="contactSaveDisabled" (click)="saveContactLog()">
|
||||
{{ contactSaveLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- RESOLVE KYC DIALOG -->
|
||||
@if (resolveDialogOpen && current) {
|
||||
<div class="km-overlay" (click)="closeResolveDialog()">
|
||||
<div class="km-modal hv-modal" (click)="$event.stopPropagation()">
|
||||
<div class="km-mh" style="border-bottom: 2px solid var(--km-green)">
|
||||
<div class="km-mh-av" style="background: var(--km-green)">{{ current.av }}</div>
|
||||
<div>
|
||||
<div class="km-mh-name">Resolve KYC Exception</div>
|
||||
<div class="km-mh-meta">{{ current.name }} · {{ current.account }}</div>
|
||||
</div>
|
||||
<div class="km-mclose" (click)="closeResolveDialog()">✕</div>
|
||||
</div>
|
||||
|
||||
<div class="km-mbody hv-body">
|
||||
<div
|
||||
style="
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
color: #166534;
|
||||
"
|
||||
>
|
||||
<strong>Pending Reason:</strong> {{ current.exceptionReason }}
|
||||
@if (current.exceptionRemarks) {
|
||||
<div style="margin-top: 4px; font-style: italic">"{{ current.exceptionRemarks }}"</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (showPanResolution) {
|
||||
<div
|
||||
style="
|
||||
border: 1px solid var(--km-g300);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
background: #fafafa;
|
||||
"
|
||||
>
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
|
||||
<input type="checkbox" id="resolvePanChk" [(ngModel)]="resolvePanActive" />
|
||||
<label for="resolvePanChk" style="font-weight: 600; cursor: pointer; color: var(--km-g800)"
|
||||
>Resolve PAN Card Exception</label
|
||||
>
|
||||
</div>
|
||||
@if (resolvePanActive) {
|
||||
<div class="hv-row" style="margin-left: 20px">
|
||||
<label class="hv-label">Verified PAN Number<span class="hv-req">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
class="hv-input"
|
||||
[(ngModel)]="resolvePanNumber"
|
||||
placeholder="e.g. ABCDE1234F"
|
||||
maxlength="10"
|
||||
style="text-transform: uppercase"
|
||||
/>
|
||||
@if (resolvePanNumber && resolvePanNumber.length !== 10) {
|
||||
<div style="color: red; font-size: 11px; margin-top: 4px">PAN must be exactly 10 characters.</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showAadhaarResolution) {
|
||||
<div
|
||||
style="
|
||||
border: 1px solid var(--km-g300);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
background: #fafafa;
|
||||
"
|
||||
>
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
|
||||
<input type="checkbox" id="resolveAadhChk" [(ngModel)]="resolveAadhaarActive" />
|
||||
<label for="resolveAadhChk" style="font-weight: 600; cursor: pointer; color: var(--km-g800)"
|
||||
>Resolve Aadhaar Card Exception</label
|
||||
>
|
||||
</div>
|
||||
@if (resolveAadhaarActive) {
|
||||
<div class="hv-row" style="margin-left: 20px">
|
||||
<label class="hv-label">Verified Aadhaar Number<span class="hv-req">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
class="hv-input"
|
||||
[(ngModel)]="resolveAadhaarNumber"
|
||||
placeholder="e.g. 597855025299"
|
||||
maxlength="12"
|
||||
/>
|
||||
@if (resolveAadhaarNumber && resolveAadhaarNumber.length !== 12) {
|
||||
<div style="color: red; font-size: 11px; margin-top: 4px">Aadhaar must be exactly 12 digits.</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showGeneralResolution) {
|
||||
<div
|
||||
style="
|
||||
border: 1px solid var(--km-g300);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
background: #fafafa;
|
||||
"
|
||||
>
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
|
||||
<input type="checkbox" id="resolveGenChk" [(ngModel)]="resolveGeneralActive" />
|
||||
<label for="resolveGenChk" style="font-weight: 600; cursor: pointer; color: var(--km-g800)"
|
||||
>Resolve General Exception</label
|
||||
>
|
||||
</div>
|
||||
@if (resolveGeneralActive) {
|
||||
<div style="margin-left: 20px">
|
||||
<div class="hv-row">
|
||||
<label class="hv-label">Verification Document Type<span class="hv-req">*</span></label>
|
||||
<select class="hv-input" [(ngModel)]="resolveGeneralDocumentType">
|
||||
<option value="OVD">Officially Valid Document (Passport/Voter ID)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="hv-row">
|
||||
<label class="hv-label">Document Identification Number<span class="hv-req">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
class="hv-input"
|
||||
[(ngModel)]="resolveGeneralDocumentNumber"
|
||||
placeholder="Enter verified document number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="hv-row">
|
||||
<label class="hv-label">Resolution Comments<span class="hv-req">*</span></label>
|
||||
<textarea
|
||||
class="hv-input hv-textarea"
|
||||
rows="3"
|
||||
placeholder="Describe how verification was resolved..."
|
||||
[(ngModel)]="resolveRemarks"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hv-footer">
|
||||
<button class="km-btn" (click)="closeResolveDialog()">Cancel</button>
|
||||
<button class="km-btn km-btn-g" [disabled]="!isResolveValid" (click)="saveResolveKyc()">
|
||||
Complete KYC & Resolve Exception
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- TOAST -->
|
||||
<div class="km-toast" [class.show]="toastVisible">{{ toastMsg }}</div>
|
||||
</div>
|
||||
|
||||
@@ -743,6 +743,57 @@
|
||||
border-color: #c4b5fd;
|
||||
}
|
||||
|
||||
/* Escalation ladder: a rung waiting on an earlier channel is dimmed so the one actionable
|
||||
dispatch is unmistakable. */
|
||||
.km-nt-locked {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.km-locked {
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.km-nnotice {
|
||||
display: inline-block;
|
||||
margin-bottom: 4px;
|
||||
padding: 1px 8px;
|
||||
border-radius: 999px;
|
||||
background: #eef2ff;
|
||||
color: #3730a3;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.km-nchdetail {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* The one live channel is outlined; completed ones stay green, waiting ones recede. */
|
||||
.km-channel-live {
|
||||
border-color: var(--km-amber, #f59e0b) !important;
|
||||
background: #fffbeb !important;
|
||||
box-shadow: 0 0 0 2px rgb(245 158 11 / 18%);
|
||||
}
|
||||
|
||||
.km-channel-off {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.km-channel-s {
|
||||
margin-top: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Sequence cards are read-only, so they must not invite a click the way the old toggles did. */
|
||||
.km-channels .km-channel {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.km-cp-post {
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
@@ -1588,6 +1639,58 @@
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
/* Inline note under a field. The default (neutral) form states that nothing is transmitted;
|
||||
the -send and -error variants call out the two cases the officer must not misread. */
|
||||
.hv-hint {
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
color: var(--km-g500);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.hv-hint-send {
|
||||
color: #0f766e;
|
||||
background: #f0fdfa;
|
||||
border: 1px solid #99f6e4;
|
||||
border-radius: 4px;
|
||||
padding: 6px 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hv-hint-error {
|
||||
color: #b91c1c;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 4px;
|
||||
padding: 6px 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Delivery outcome chip on a contact-log row. A logged attempt and a delivered notice are
|
||||
different facts, so they never share a colour. */
|
||||
.km-sent-tag {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
padding: 0 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.km-sent-ok {
|
||||
background: #e6f4ea;
|
||||
color: #137333;
|
||||
}
|
||||
|
||||
.km-sent-fail {
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.hv-footer {
|
||||
padding: 14px 22px;
|
||||
border-top: 1px solid var(--km-g200);
|
||||
@@ -1648,3 +1751,30 @@
|
||||
color: #0f172a;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* KYC Exceptions Styles */
|
||||
.km-ci-e {
|
||||
background: var(--km-amber-l) !important;
|
||||
color: var(--km-amber) !important;
|
||||
}
|
||||
|
||||
.contact-logs-list {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
font-family: inherit;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,10 +6,12 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { ClientsService } from '../clients/clients.service';
|
||||
import { exportWorkbook, ExportSheetSpec } from '../cashier/cashier-export';
|
||||
|
||||
interface KmNotice {
|
||||
no: string;
|
||||
@@ -31,6 +33,24 @@ interface KmEvidence {
|
||||
docket?: string;
|
||||
}
|
||||
|
||||
/** One outreach attempt, as returned by GET /kyc/exceptions/{clientId}/contact-log. */
|
||||
interface KmContactLog {
|
||||
date: string;
|
||||
/** Display label for the channel used, e.g. 'SMS' / 'In-Branch Visit'. */
|
||||
action: string;
|
||||
notes: string;
|
||||
officer: string;
|
||||
/** True when this channel transmits (SMS/Email/WhatsApp) rather than being recorded offline. */
|
||||
platformSent?: boolean;
|
||||
/** True only when the notice actually reached the gateway. */
|
||||
delivered?: boolean;
|
||||
/** SENT | FAILED | SKIPPED_NO_DESTINATION | PROVIDER_NOT_CONFIGURED | NOT_APPLICABLE */
|
||||
deliveryStatus?: string;
|
||||
/** Officer-facing outcome sentence — shown verbatim so a failure is never mistaken for a send. */
|
||||
deliveryMessage?: string;
|
||||
destinationMasked?: string;
|
||||
}
|
||||
|
||||
interface KmClient {
|
||||
id: string;
|
||||
av: string;
|
||||
@@ -66,6 +86,17 @@ interface KmClient {
|
||||
pendingActions: string[];
|
||||
actionTaken: string[];
|
||||
evidence: KmEvidence | null;
|
||||
isException?: boolean;
|
||||
exceptionReason?: string;
|
||||
exceptionRemarks?: string;
|
||||
exceptionDate?: string;
|
||||
exceptionResolved?: boolean;
|
||||
exceptionResolvedOn?: string;
|
||||
contactHistory?: KmContactLog[];
|
||||
kycId?: string;
|
||||
/** Whether the customer has a mobile / email on file — drives channel availability in the dialog. */
|
||||
hasMobile?: boolean;
|
||||
hasEmail?: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
@@ -79,7 +110,8 @@ interface KmClient {
|
||||
]
|
||||
})
|
||||
export class KycManagementComponent implements OnInit {
|
||||
activeSection: 'alerts' | 'notif' | 'audit' | 'status' = 'alerts';
|
||||
private clientsService = inject(ClientsService);
|
||||
activeSection: 'alerts' | 'notif' | 'audit' | 'status' | 'exceptions' = 'alerts';
|
||||
|
||||
modalOpen = false;
|
||||
modalTab: 'overview' | 'timeline' | 'notices' | 'evidence' | 'action' = 'overview';
|
||||
@@ -529,15 +561,419 @@ export class KycManagementComponent implements OnInit {
|
||||
};
|
||||
|
||||
alertRows: KmClient[] = [];
|
||||
exceptionRows: KmClient[] = [];
|
||||
pendingExceptions: KmClient[] = [];
|
||||
resolvedExceptions: KmClient[] = [];
|
||||
activeExceptionSubTab: 'pending' | 'resolved' = 'pending';
|
||||
selectedExceptionReason = '';
|
||||
selectedExceptionContactStatus = '';
|
||||
|
||||
// Dialog properties for exceptions
|
||||
contactDialogOpen = false;
|
||||
contactChannel = 'PHONE_CALL';
|
||||
contactNotes = '';
|
||||
contactOfficer = 'Neha Verma — KYC Officer (Bhopal Main)';
|
||||
/** In-flight guard — a double-click must not send the customer two notices. */
|
||||
contactSaving = false;
|
||||
/** Populated when the save itself failed (not when the save worked but delivery didn't). */
|
||||
contactError = '';
|
||||
|
||||
/**
|
||||
* Channels offered in the Log Customer Contact dialog. `sends` marks the ones where saving
|
||||
* transmits a real notice to the customer, as opposed to recording an action the officer already
|
||||
* took offline — the dialog labels and the confirm button both key off it.
|
||||
*/
|
||||
readonly contactChannels: { value: string; label: string; sends: boolean; requires?: 'mobile' | 'email' }[] = [
|
||||
{ value: 'PHONE_CALL', label: 'Phone Call', sends: false },
|
||||
{ value: 'SMS', label: 'SMS', sends: true, requires: 'mobile' },
|
||||
{ value: 'EMAIL', label: 'Email', sends: true, requires: 'email' },
|
||||
{ value: 'WHATSAPP', label: 'WhatsApp Message', sends: true, requires: 'mobile' },
|
||||
{ value: 'BRANCH_VISIT', label: 'In-Branch Visit', sends: false },
|
||||
{ value: 'FIELD_VISIT', label: 'Agent Field Visit', sends: false }
|
||||
];
|
||||
|
||||
resolveDialogOpen = false;
|
||||
resolveDocumentType = 'PAN';
|
||||
resolveDocumentNumber = '';
|
||||
resolveRemarks = '';
|
||||
|
||||
resolvePanActive = false;
|
||||
resolvePanNumber = '';
|
||||
resolveAadhaarActive = false;
|
||||
resolveAadhaarNumber = '';
|
||||
resolveGeneralActive = false;
|
||||
resolveGeneralDocumentType = 'OVD';
|
||||
resolveGeneralDocumentNumber = '';
|
||||
|
||||
showPanResolution = false;
|
||||
showAadhaarResolution = false;
|
||||
showGeneralResolution = false;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.alertRows = Object.values(this.clients);
|
||||
this.loadExceptions();
|
||||
}
|
||||
|
||||
showSection(section: 'alerts' | 'notif' | 'audit' | 'status'): void {
|
||||
loadExceptions(): void {
|
||||
this.clientsService.getKycExceptions(false).subscribe({
|
||||
next: (data) => {
|
||||
this.pendingExceptions = data.map((item: any) => this.mapException(item, false));
|
||||
this.exceptionRows = this.pendingExceptions;
|
||||
this.loadContactHistories(this.pendingExceptions);
|
||||
},
|
||||
error: (err) => {
|
||||
console.error('Failed to load active exceptions', err);
|
||||
this.pendingExceptions = [];
|
||||
this.exceptionRows = [];
|
||||
}
|
||||
});
|
||||
|
||||
this.clientsService.getKycExceptions(true).subscribe({
|
||||
next: (data) => {
|
||||
this.resolvedExceptions = data.map((item: any) => this.mapException(item, true));
|
||||
this.loadContactHistories(this.resolvedExceptions);
|
||||
},
|
||||
error: (err) => {
|
||||
console.error('Failed to load resolved exceptions', err);
|
||||
this.resolvedExceptions = [];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private mapException(item: any, resolved: boolean): KmClient {
|
||||
return {
|
||||
id: item.clientId?.toString(),
|
||||
av: (item.clientDisplayName || 'Client')
|
||||
.split(' ')
|
||||
.map((n: string) => n[0])
|
||||
.join('')
|
||||
.substring(0, 2)
|
||||
.toUpperCase(),
|
||||
name: item.clientDisplayName,
|
||||
meta: `${item.clientAccountNo || `CLI-${item.clientId}`} · Savings A/c · ${item.clientOfficeName || 'Bhopal Main'}`,
|
||||
account: item.clientAccountNo || `CLI-${item.clientId}`,
|
||||
state: 'alert',
|
||||
risk: item.riskCategoryCode?.toLowerCase() || 'low',
|
||||
riskLabel: item.riskCategory || 'Low Risk',
|
||||
expiry: 'Pending',
|
||||
daysLeft: 30,
|
||||
kyc: {
|
||||
type: item.kycType || 'Individual',
|
||||
initiated: item.initiatedOn || '—',
|
||||
lastVerified: item.verifiedOn || '—',
|
||||
validity: '—',
|
||||
pan: item.panNumber || '—',
|
||||
aadhaar: item.aadhaarNumberMasked || '—',
|
||||
panStatus: item.panVerified ? 'Verified' : 'Verification Failed',
|
||||
aadhaarStatus: item.aadhaarVerified ? 'Verified' : 'Verification Failed',
|
||||
panLink: 'Not Linked'
|
||||
},
|
||||
contact: {
|
||||
// Masked server-side; the full values never reach the browser. 'Not on file' is meaningful
|
||||
// here — it's why an SMS or Email channel will be unavailable for this customer.
|
||||
mobile: item.clientMobileMasked || 'Not on file',
|
||||
email: item.clientEmailMasked || 'Not on file',
|
||||
address: 'Client Address, Bhopal MP 462002',
|
||||
branch: item.clientOfficeName || 'Bhopal Main'
|
||||
},
|
||||
notices: [],
|
||||
noticesSent: 0,
|
||||
noticePending: resolved ? 'Resolved Exception' : 'Pending verification',
|
||||
nextStage: resolved ? 'Exception Resolved' : 'KYC Exceptions review',
|
||||
pendingActions: resolved ? [] : ['Resolve Exception reasons'],
|
||||
actionTaken: resolved ? ['KYC Exception resolved'] : [],
|
||||
evidence: null,
|
||||
isException: true,
|
||||
// No invented default — a record whose reason was never stored (or was cleared by the old
|
||||
// resolve path) must not be relabelled as a PAN failure it may never have had.
|
||||
exceptionReason: item.exceptionReason || 'Reason not recorded',
|
||||
exceptionRemarks: item.remarks || '',
|
||||
exceptionDate: item.initiatedOn || '—',
|
||||
exceptionResolved: resolved,
|
||||
exceptionResolvedOn: item.exceptionResolvedOn || '—',
|
||||
contactHistory: [],
|
||||
kycId: item.id?.toString(),
|
||||
hasMobile: item.hasMobile === true,
|
||||
hasEmail: item.hasEmail === true
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Pull each row's persisted outreach history. Fired after the exception list loads; a failure on
|
||||
* one row leaves that row's history empty rather than blanking the whole grid.
|
||||
*/
|
||||
private loadContactHistories(rows: KmClient[]): void {
|
||||
for (const row of rows) {
|
||||
if (!row.id) continue;
|
||||
this.clientsService.getKycContactLog(row.id).subscribe({
|
||||
next: (logs) => {
|
||||
row.contactHistory = (logs || []).map((log: any) => this.mapContactLog(log));
|
||||
},
|
||||
error: (err) => {
|
||||
console.error(`Failed to load contact log for client ${row.id}`, err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
get notYetContactedCount(): number {
|
||||
return this.exceptionRows.filter((c) => !c.contactHistory || c.contactHistory.length === 0).length;
|
||||
}
|
||||
|
||||
get panMismatchesCount(): number {
|
||||
return this.exceptionRows.filter((c) => c.exceptionReason?.includes('PAN')).length;
|
||||
}
|
||||
|
||||
get aadhaarFailuresCount(): number {
|
||||
return this.exceptionRows.filter((c) => c.exceptionReason?.includes('Aadhaar')).length;
|
||||
}
|
||||
|
||||
showSection(section: 'alerts' | 'notif' | 'audit' | 'status' | 'exceptions'): void {
|
||||
this.activeSection = section;
|
||||
}
|
||||
|
||||
openContactDialog(client: KmClient): void {
|
||||
this.current = client;
|
||||
this.contactChannel = 'PHONE_CALL';
|
||||
this.contactNotes = '';
|
||||
this.contactError = '';
|
||||
this.contactSaving = false;
|
||||
this.contactOfficer = this.bankOfficers[1]; // Neha Verma
|
||||
this.contactDialogOpen = true;
|
||||
}
|
||||
|
||||
closeContactDialog(): void {
|
||||
this.contactDialogOpen = false;
|
||||
}
|
||||
|
||||
/** The channel currently picked in the dialog. */
|
||||
get selectedChannel(): { value: string; label: string; sends: boolean; requires?: 'mobile' | 'email' } | undefined {
|
||||
return this.contactChannels.find((c) => c.value === this.contactChannel);
|
||||
}
|
||||
|
||||
/** True when saving will transmit a notice to the customer, not merely record one. */
|
||||
get selectedChannelSends(): boolean {
|
||||
return this.selectedChannel?.sends === true;
|
||||
}
|
||||
|
||||
/**
|
||||
* True when the picked channel needs a destination the customer doesn't have. Blocks the save so
|
||||
* the officer isn't left reading a failure they could have seen up front.
|
||||
*/
|
||||
get selectedChannelUnavailable(): boolean {
|
||||
const requires = this.selectedChannel?.requires;
|
||||
if (!requires || !this.current) return false;
|
||||
return requires === 'mobile' ? this.current.hasMobile === false : this.current.hasEmail === false;
|
||||
}
|
||||
|
||||
get contactSaveDisabled(): boolean {
|
||||
return !this.contactNotes?.trim() || !this.contactChannel || this.contactSaving || this.selectedChannelUnavailable;
|
||||
}
|
||||
|
||||
/** 'Send & Save' when a notice goes out, plain 'Save Log' when it's an offline record. */
|
||||
get contactSaveLabel(): string {
|
||||
if (this.contactSaving) return this.selectedChannelSends ? 'Sending…' : 'Saving…';
|
||||
return this.selectedChannelSends ? 'Send & Save' : 'Save Log';
|
||||
}
|
||||
|
||||
saveContactLog(): void {
|
||||
if (!this.current || this.contactSaveDisabled) return;
|
||||
|
||||
const client = this.current;
|
||||
this.contactSaving = true;
|
||||
this.contactError = '';
|
||||
|
||||
this.clientsService
|
||||
.saveKycContactLog(client.id, {
|
||||
channel: this.contactChannel,
|
||||
notes: this.contactNotes.trim(),
|
||||
officerName: this.contactOfficer
|
||||
})
|
||||
.subscribe({
|
||||
next: (log: any) => {
|
||||
this.contactSaving = false;
|
||||
client.contactHistory = [
|
||||
...(client.contactHistory || []),
|
||||
this.mapContactLog(log)
|
||||
];
|
||||
|
||||
// The request succeeding does not mean the customer was reached — a gateway failure comes
|
||||
// back as HTTP 200 with delivered=false, so report what actually happened.
|
||||
if (log?.platformSent && !log?.delivered) {
|
||||
this.toast(log?.deliveryMessage || `Logged, but the ${log?.channelLabel || 'message'} could not be sent.`);
|
||||
} else {
|
||||
this.toast(log?.deliveryMessage || `Contact attempt logged successfully for ${client.name}`);
|
||||
}
|
||||
this.contactDialogOpen = false;
|
||||
},
|
||||
error: (err) => {
|
||||
this.contactSaving = false;
|
||||
// Keep the dialog open — the officer's notes are still in the textarea and would
|
||||
// otherwise be lost.
|
||||
this.contactError =
|
||||
err?.error?.errors?.[0]?.defaultUserMessage ||
|
||||
err?.error?.defaultUserMessage ||
|
||||
'Could not save the contact log. Please try again.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private mapContactLog(log: any): KmContactLog {
|
||||
return {
|
||||
date: log?.contactedAt ? this.formatLogDate(log.contactedAt) : '—',
|
||||
action: log?.channelLabel || log?.channel || 'Contact',
|
||||
notes: log?.notes || '',
|
||||
officer: (log?.officerName || '').split(' — ')[0],
|
||||
platformSent: log?.platformSent,
|
||||
delivered: log?.delivered,
|
||||
deliveryStatus: log?.deliveryStatus,
|
||||
deliveryMessage: log?.deliveryMessage,
|
||||
destinationMasked: log?.destinationMasked
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* `contactedAt` arrives as a LocalDateTime — Jackson serialises it as an ISO string or as a
|
||||
* [y, m, d, h, min, s] array depending on the tenant's date-format setting, so handle both.
|
||||
*/
|
||||
private formatLogDate(value: any): string {
|
||||
const date = Array.isArray(value)
|
||||
? new Date(value[0], (value[1] || 1) - 1, value[2] || 1, value[3] || 0, value[4] || 0)
|
||||
: new Date(value);
|
||||
if (isNaN(date.getTime())) return '—';
|
||||
return date.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
|
||||
}
|
||||
|
||||
get isResolveValid(): boolean {
|
||||
if (!this.resolveRemarks?.trim()) return false;
|
||||
let anyActive = false;
|
||||
if (this.showPanResolution && this.resolvePanActive) {
|
||||
anyActive = true;
|
||||
if (!this.resolvePanNumber || this.resolvePanNumber.trim().length !== 10) return false;
|
||||
}
|
||||
if (this.showAadhaarResolution && this.resolveAadhaarActive) {
|
||||
anyActive = true;
|
||||
if (!this.resolveAadhaarNumber || this.resolveAadhaarNumber.trim().length !== 12) return false;
|
||||
}
|
||||
if (this.showGeneralResolution && this.resolveGeneralActive) {
|
||||
anyActive = true;
|
||||
if (!this.resolveGeneralDocumentNumber?.trim()) return false;
|
||||
}
|
||||
return anyActive;
|
||||
}
|
||||
|
||||
openResolveDialog(client: KmClient): void {
|
||||
this.current = client;
|
||||
const reason = client.exceptionReason || '';
|
||||
this.showPanResolution = reason.includes('PAN');
|
||||
this.showAadhaarResolution = reason.includes('Aadhaar');
|
||||
this.showGeneralResolution = !this.showPanResolution && !this.showAadhaarResolution;
|
||||
|
||||
this.resolvePanActive = this.showPanResolution;
|
||||
this.resolveAadhaarActive = this.showAadhaarResolution;
|
||||
this.resolveGeneralActive = this.showGeneralResolution;
|
||||
|
||||
this.resolvePanNumber = '';
|
||||
this.resolveAadhaarNumber = '';
|
||||
this.resolveGeneralDocumentType = 'OVD';
|
||||
this.resolveGeneralDocumentNumber = '';
|
||||
this.resolveRemarks = '';
|
||||
this.resolveDialogOpen = true;
|
||||
}
|
||||
|
||||
closeResolveDialog(): void {
|
||||
this.resolveDialogOpen = false;
|
||||
}
|
||||
|
||||
saveResolveKyc(): void {
|
||||
if (!this.current || !this.current.kycId) return;
|
||||
const clientId = this.current.id;
|
||||
const kycId = this.current.kycId;
|
||||
|
||||
const today = new Date();
|
||||
const day = today.getDate().toString().padStart(2, '0');
|
||||
const months = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December'
|
||||
];
|
||||
const monthStr = months[today.getMonth()];
|
||||
const year = today.getFullYear();
|
||||
const dateStr = `${day} ${monthStr} ${year}`;
|
||||
|
||||
const resolvingPan = this.showPanResolution && this.resolvePanActive;
|
||||
const resolvingAadhaar = this.showAadhaarResolution && this.resolveAadhaarActive;
|
||||
const resolvingGeneral = this.showGeneralResolution && this.resolveGeneralActive;
|
||||
|
||||
const remainsPan = this.showPanResolution && !this.resolvePanActive;
|
||||
const remainsAadhaar = this.showAadhaarResolution && !this.resolveAadhaarActive;
|
||||
|
||||
const isFullyResolved = !remainsPan && !remainsAadhaar;
|
||||
|
||||
const resolvedKycData: any = {
|
||||
locale: 'en',
|
||||
dateFormat: 'dd MMMM yyyy',
|
||||
remarks: this.resolveRemarks || 'Resolved via exceptions dashboard'
|
||||
};
|
||||
|
||||
if (isFullyResolved) {
|
||||
resolvedKycData.isException = false;
|
||||
resolvedKycData.exceptionResolved = true;
|
||||
resolvedKycData.exceptionResolvedOn = dateStr;
|
||||
// Keep exceptionReason — the Resolved tab shows what was resolved, and clearing it destroys
|
||||
// the audit record of why the exception was ever raised.
|
||||
} else {
|
||||
resolvedKycData.isException = true;
|
||||
resolvedKycData.exceptionResolved = false;
|
||||
const remainingReasons: string[] = [];
|
||||
if (remainsPan) remainingReasons.push('PAN Card Verification Failed');
|
||||
if (remainsAadhaar) remainingReasons.push('Aadhaar Verification Failed');
|
||||
resolvedKycData.exceptionReason = remainingReasons.join(', ');
|
||||
}
|
||||
|
||||
if (resolvingPan) {
|
||||
resolvedKycData.panNumber = this.resolvePanNumber.toUpperCase().trim();
|
||||
resolvedKycData.panVerified = true;
|
||||
}
|
||||
if (resolvingAadhaar) {
|
||||
const aadhaarRaw = this.resolveAadhaarNumber.trim();
|
||||
resolvedKycData.aadhaarNumberMasked = 'XXXXXXXX' + aadhaarRaw.slice(-4);
|
||||
resolvedKycData.aadhaarVerified = true;
|
||||
}
|
||||
if (resolvingGeneral) {
|
||||
resolvedKycData.kycDocumentName = this.resolveGeneralDocumentType;
|
||||
resolvedKycData.kycDocumentNumber = this.resolveGeneralDocumentNumber;
|
||||
resolvedKycData.isException = false;
|
||||
resolvedKycData.exceptionResolved = true;
|
||||
resolvedKycData.exceptionResolvedOn = dateStr;
|
||||
// exceptionReason preserved — see the fully-resolved branch above.
|
||||
}
|
||||
|
||||
this.clientsService.updateClientKyc(clientId, kycId, resolvedKycData).subscribe({
|
||||
next: () => {
|
||||
const msg = isFullyResolved
|
||||
? `KYC Exception fully resolved and completed for ${this.current?.name}`
|
||||
: `KYC Exception partially resolved for ${this.current?.name}`;
|
||||
this.toast(msg);
|
||||
this.loadExceptions();
|
||||
this.resolveDialogOpen = false;
|
||||
},
|
||||
error: (err) => {
|
||||
console.error('Failed to resolve exception', err);
|
||||
this.toast('Failed to resolve exception. Please try again.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openModal(id: string): void {
|
||||
const c = this.clients[id];
|
||||
if (!c) return;
|
||||
@@ -562,6 +998,290 @@ export class KycManagementComponent implements OnInit {
|
||||
this.toastTimer = setTimeout(() => (this.toastVisible = false), 2800);
|
||||
}
|
||||
|
||||
// ── Re-KYC dispatch ladder ─────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Re-KYC outreach is one channel at a time, escalating only when the previous channel has been
|
||||
* dispatched — not a bundle of channels fired at once. The regulatory 3-notice structure is kept
|
||||
* as the grouping (notice), while each row is a single dispatch, which is how it actually happens
|
||||
* at the branch.
|
||||
*
|
||||
* status: DELIVERED / FAILED are done, PENDING is the one dispatch that may go out now, LOCKED is
|
||||
* waiting on an earlier channel.
|
||||
*/
|
||||
reKycSteps: {
|
||||
step: number;
|
||||
notice: number;
|
||||
channel: string;
|
||||
detail: string;
|
||||
date: string;
|
||||
offset: string;
|
||||
status: 'DELIVERED' | 'FAILED' | 'PENDING' | 'LOCKED';
|
||||
chip: string;
|
||||
}[] = [
|
||||
{
|
||||
step: 1,
|
||||
notice: 1,
|
||||
channel: 'SMS',
|
||||
detail: 'Registered mobile',
|
||||
date: '31 March 2027',
|
||||
offset: 'Window opens',
|
||||
status: 'DELIVERED',
|
||||
chip: 'km-cp-sms'
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
notice: 1,
|
||||
channel: 'Email',
|
||||
detail: 'Registered email',
|
||||
date: '3 April 2027',
|
||||
offset: '+3 days',
|
||||
status: 'DELIVERED',
|
||||
chip: 'km-cp-mail'
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
notice: 2,
|
||||
channel: 'IVR Call',
|
||||
detail: 'Outbound IVR',
|
||||
date: '10 April 2027',
|
||||
offset: '+10 days',
|
||||
status: 'PENDING',
|
||||
chip: 'km-cp-ivr'
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
notice: 2,
|
||||
channel: 'Reg. Post',
|
||||
detail: 'India Post, tracked',
|
||||
date: '14 April 2027',
|
||||
offset: '+14 days',
|
||||
status: 'LOCKED',
|
||||
chip: 'km-cp-post'
|
||||
},
|
||||
{
|
||||
step: 5,
|
||||
notice: 3,
|
||||
channel: 'Home Visit',
|
||||
detail: 'Field officer, manual',
|
||||
date: '20 April 2027',
|
||||
offset: '+20 days',
|
||||
status: 'LOCKED',
|
||||
chip: 'km-cp-vis'
|
||||
},
|
||||
{
|
||||
step: 6,
|
||||
notice: 3,
|
||||
channel: 'Video KYC',
|
||||
detail: 'V-CIP link',
|
||||
date: '25 April 2027',
|
||||
offset: '+25 days',
|
||||
status: 'LOCKED',
|
||||
chip: 'km-cp-vid'
|
||||
}
|
||||
];
|
||||
|
||||
/** The single dispatch that may go out now — nothing later is actionable until it is done. */
|
||||
get currentReKycStep(): number | null {
|
||||
return this.reKycSteps.find((s) => s.status === 'PENDING')?.step ?? null;
|
||||
}
|
||||
|
||||
get reKycCompletedCount(): number {
|
||||
return this.reKycSteps.filter((s) => s.status === 'DELIVERED' || s.status === 'FAILED').length;
|
||||
}
|
||||
|
||||
/** First row of a notice carries the notice heading; the rest indent under it. */
|
||||
isFirstOfNotice(index: number): boolean {
|
||||
return index === 0 || this.reKycSteps[index - 1].notice !== this.reKycSteps[index].notice;
|
||||
}
|
||||
|
||||
reKycStatusLabel(status: string): string {
|
||||
switch (status) {
|
||||
case 'DELIVERED':
|
||||
return '✓ Dispatched';
|
||||
case 'FAILED':
|
||||
return '✗ Failed — escalated';
|
||||
case 'PENDING':
|
||||
return '⏳ Due now';
|
||||
default:
|
||||
return '🔒 Waiting on previous channel';
|
||||
}
|
||||
}
|
||||
|
||||
reKycStatusClass(status: string): string {
|
||||
switch (status) {
|
||||
case 'DELIVERED':
|
||||
return 'km-ok';
|
||||
case 'FAILED':
|
||||
return 'km-fail';
|
||||
case 'PENDING':
|
||||
return 'km-pending';
|
||||
default:
|
||||
return 'km-locked';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Marks the due channel dispatched and releases only the next one, so the ladder can never skip a
|
||||
* rung. A failure still advances — the point of escalation is that the next channel is tried.
|
||||
*/
|
||||
dispatchReKycStep(step: number, failed = false): void {
|
||||
const index = this.reKycSteps.findIndex((s) => s.step === step);
|
||||
if (index < 0 || this.reKycSteps[index].status !== 'PENDING') {
|
||||
return;
|
||||
}
|
||||
const current = this.reKycSteps[index];
|
||||
current.status = failed ? 'FAILED' : 'DELIVERED';
|
||||
const next = this.reKycSteps[index + 1];
|
||||
if (next && next.status === 'LOCKED') {
|
||||
next.status = 'PENDING';
|
||||
}
|
||||
this.toast(
|
||||
failed
|
||||
? `${current.channel} failed — escalated to ${next ? next.channel : 'freeze workflow'}`
|
||||
: `${current.channel} dispatched${next ? ` · next: ${next.channel} on ${next.date}` : ''}`
|
||||
);
|
||||
}
|
||||
|
||||
// ── Exceptions export ──────────────────────────────────────────────────────
|
||||
|
||||
/** True while the workbook is being built, so the button cannot be double-fired. */
|
||||
exportingExceptions = false;
|
||||
|
||||
/**
|
||||
* Exports the Exceptions Register to Excel: one sheet for pending, one for resolved, mirroring
|
||||
* the columns on screen. Contact attempts are flattened into a single cell per row rather than a
|
||||
* third sheet — an auditor reading a row wants the outreach trail beside it, not a lookup.
|
||||
*/
|
||||
async exportExceptions(): Promise<void> {
|
||||
if (this.exportingExceptions) {
|
||||
return;
|
||||
}
|
||||
const sheets: ExportSheetSpec[] = [];
|
||||
if (this.pendingExceptions.length) {
|
||||
sheets.push(this.exceptionSheet('Pending Exceptions', this.pendingExceptions, false));
|
||||
}
|
||||
if (this.resolvedExceptions.length) {
|
||||
sheets.push(this.exceptionSheet('Resolved Exceptions', this.resolvedExceptions, true));
|
||||
}
|
||||
if (!sheets.length) {
|
||||
this.toast('There are no exceptions to export.');
|
||||
return;
|
||||
}
|
||||
|
||||
this.exportingExceptions = true;
|
||||
try {
|
||||
const stamp = new Date().toISOString().slice(0, 10);
|
||||
await exportWorkbook(sheets, `KYC-Exceptions-${stamp}`);
|
||||
this.toast('Exception report downloaded.');
|
||||
} catch {
|
||||
// A failed export must say so — the old stub toasted success unconditionally.
|
||||
this.toast('Could not build the exception report. Please try again.');
|
||||
} finally {
|
||||
this.exportingExceptions = false;
|
||||
}
|
||||
}
|
||||
|
||||
private exceptionSheet(sheetName: string, rows: KmClient[], resolved: boolean): ExportSheetSpec {
|
||||
const headers = [
|
||||
'Client',
|
||||
'Account No',
|
||||
'Branch',
|
||||
'Exception Reason',
|
||||
'Opened On',
|
||||
'Risk',
|
||||
'Contact Status',
|
||||
'Last Contacted',
|
||||
'Attempts',
|
||||
'Contact Log',
|
||||
'Mobile',
|
||||
'Email',
|
||||
'PAN',
|
||||
'PAN Status',
|
||||
'Aadhaar',
|
||||
'Aadhaar Status',
|
||||
...(resolved ? [
|
||||
'Resolved On',
|
||||
'Resolution Remarks'
|
||||
] : [])
|
||||
];
|
||||
|
||||
const body = rows.map((c) => {
|
||||
const history = c.contactHistory || [];
|
||||
const last = history.length ? history[history.length - 1] : null;
|
||||
return [
|
||||
c.name || '',
|
||||
c.account || '',
|
||||
c.contact?.branch || '',
|
||||
c.exceptionReason || '',
|
||||
c.exceptionDate || '',
|
||||
c.riskLabel || '',
|
||||
history.length ? 'Contacted' : 'Not Contacted',
|
||||
last?.date || '',
|
||||
// Plain count, not a formatted number — exportWorkbook applies #,##0.00 to numbers and
|
||||
// "3.00 attempts" reads as a bug.
|
||||
String(history.length),
|
||||
this.contactLogText(history),
|
||||
c.contact?.mobile || '',
|
||||
c.contact?.email || '',
|
||||
c.kyc?.pan || '',
|
||||
c.kyc?.panStatus || '',
|
||||
c.kyc?.aadhaar || '',
|
||||
c.kyc?.aadhaarStatus || '',
|
||||
...(resolved ? [
|
||||
c.exceptionResolvedOn || '',
|
||||
c.exceptionRemarks || ''
|
||||
] : [])
|
||||
];
|
||||
});
|
||||
|
||||
return {
|
||||
sheetName,
|
||||
title: `KYC Exceptions Register — ${sheetName}`,
|
||||
subtitle: `${rows.length} exception(s) · exported ${new Date().toLocaleString('en-IN')}`,
|
||||
headers,
|
||||
rows: body,
|
||||
widths: [
|
||||
26,
|
||||
18,
|
||||
16,
|
||||
34,
|
||||
14,
|
||||
12,
|
||||
14,
|
||||
16,
|
||||
10,
|
||||
60,
|
||||
16,
|
||||
26,
|
||||
14,
|
||||
14,
|
||||
16,
|
||||
16,
|
||||
...(resolved ? [
|
||||
14,
|
||||
40
|
||||
] : [])
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* One entry per attempt, carrying the delivery outcome so a failed notice is never read as sent.
|
||||
* Separated with " ; " rather than newlines: the shared sheet builder does not set wrapText on
|
||||
* body cells, so embedded newlines would collapse into one cramped line in Excel.
|
||||
*/
|
||||
private contactLogText(history: KmContactLog[]): string {
|
||||
return history
|
||||
.map((log) => {
|
||||
const outcome = log.deliveryStatus ? ` [${log.deliveryStatus}]` : '';
|
||||
const officer = log.officer ? ` — ${log.officer}` : '';
|
||||
const notes = log.notes ? `: ${log.notes}` : '';
|
||||
return `${log.date} (${log.action})${notes}${officer}${outcome}`;
|
||||
})
|
||||
.join(' ; ');
|
||||
}
|
||||
|
||||
/**
|
||||
* Routes a "Take Action" click. Opens the Home Visit dialog if the action is
|
||||
* a home-visit scheduling action; otherwise falls back to a toast confirmation.
|
||||
|
||||
@@ -505,3 +505,72 @@
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
color: var(--cert-g900);
|
||||
}
|
||||
|
||||
/* Form 121 register — eligibility warnings and the quarter-wise drill-down */
|
||||
|
||||
/* A row the branch needs to look at: an ineligible declaration, or the quarter
|
||||
in which the 194A threshold was crossed. */
|
||||
.cert-row--warn > td {
|
||||
background: color-mix(in srgb, var(--cert-amber) 7%, transparent);
|
||||
}
|
||||
|
||||
.cert-row--detail > td {
|
||||
background: var(--cert-g50);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.cert-note {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--cert-blue) 6%, transparent);
|
||||
border-left: 3px solid var(--cert-blue);
|
||||
font-size: 12px;
|
||||
color: var(--cert-g900);
|
||||
line-height: 1.5;
|
||||
|
||||
fa-icon {
|
||||
color: var(--cert-blue);
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 6px 0 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&--warn {
|
||||
background: color-mix(in srgb, var(--cert-amber) 8%, transparent);
|
||||
border-left-color: var(--cert-amber);
|
||||
|
||||
fa-icon {
|
||||
color: var(--cert-amber);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* The quarter table nested inside an expanded row. */
|
||||
.cert-table--inner {
|
||||
background: #fff;
|
||||
border: 1px solid var(--cert-g200);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
|
||||
th {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--cert-g200);
|
||||
}
|
||||
|
||||
.cert-pill {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,158 +11,347 @@
|
||||
<div class="cert-head-l">
|
||||
<fa-icon icon="file-signature" class="cert-head-ic"></fa-icon>
|
||||
<div>
|
||||
<h2 class="cert-head-t">Form 121</h2>
|
||||
<div class="cert-head-s">TDS-waiver declarations for FD / RD interest income — Form 121.</div>
|
||||
<h2 class="cert-head-t">{{ statute.form }}</h2>
|
||||
<div class="cert-head-s">
|
||||
@if (viewMode === 'demo') {
|
||||
Declarations to stop tax being deducted on fixed and recurring deposit interest under
|
||||
{{ statute.section }}. Reported in {{ statute.statement }}; the consolidated statement of declarations is
|
||||
uploaded {{ statute.frequency }}.
|
||||
} @else {
|
||||
Live customer declarations, sourced from client accounts and KYC profiles.
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-head-r">
|
||||
@if (viewMode === 'demo') {
|
||||
<button
|
||||
type="button"
|
||||
class="cert-cta-btn"
|
||||
(click)="toggleViewMode()"
|
||||
matTooltip="Use real client KYC and account data from Fineract"
|
||||
>
|
||||
<fa-icon icon="database"></fa-icon> Real Declarations
|
||||
</button>
|
||||
} @else {
|
||||
<button
|
||||
type="button"
|
||||
class="cert-cta-btn cert-cta-btn--muted"
|
||||
(click)="toggleViewMode()"
|
||||
matTooltip="Back to the sample data page"
|
||||
>
|
||||
<fa-icon icon="table"></fa-icon> Sample Data
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI strip -->
|
||||
<div class="cert-kpis">
|
||||
<div class="cert-kpi cert-kpi--blue">
|
||||
<fa-icon icon="user" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ count15G() | number }}</div>
|
||||
<div class="cert-kpi-l">Form 121 (under 60)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--amber">
|
||||
<fa-icon icon="user-tie" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ count15H() | number }}</div>
|
||||
<div class="cert-kpi-l">Form 121 (60+)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--green">
|
||||
<fa-icon icon="check-circle" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ countFiled() | number }}</div>
|
||||
<div class="cert-kpi-l">Filed this FY</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--teal">
|
||||
<fa-icon icon="coins" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">₹{{ totalInterest() | number: '1.0-0' }}</div>
|
||||
<div class="cert-kpi-l">Projected Interest</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (viewMode === 'real') {
|
||||
<mifosx-real-form15gh-view></mifosx-real-form15gh-view>
|
||||
}
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="cert-filters">
|
||||
<div class="cert-filter">
|
||||
<label>Customer / Customer ID / PAN</label>
|
||||
<div class="cert-input-ic">
|
||||
<fa-icon icon="search"></fa-icon>
|
||||
<input type="text" [(ngModel)]="search" placeholder="e.g. CUST556677 or customer name" />
|
||||
@if (viewMode === 'demo') {
|
||||
<!-- KPI strip -->
|
||||
<div class="cert-kpis">
|
||||
<div class="cert-kpi cert-kpi--blue">
|
||||
<fa-icon icon="user" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ countGeneralBand() | number }}</div>
|
||||
<div class="cert-kpi-l">General band (under 60)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--amber">
|
||||
<fa-icon icon="user-tie" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ countSeniorBand() | number }}</div>
|
||||
<div class="cert-kpi-l">Senior citizen band (60+)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--green">
|
||||
<fa-icon icon="check-circle" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ countFiled() | number }}</div>
|
||||
<div class="cert-kpi-l">Filed this FY</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--teal">
|
||||
<fa-icon icon="coins" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">₹{{ totalInterest() | number: '1.0-0' }}</div>
|
||||
<div class="cert-kpi-l">Projected Interest</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--green">
|
||||
<fa-icon icon="shield-alt" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">₹{{ totalTdsSaved() | number: '1.0-0' }}</div>
|
||||
<div class="cert-kpi-l">TDS Saved</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (countIneligible() > 0) {
|
||||
<div class="cert-kpi cert-kpi--amber">
|
||||
<fa-icon icon="exclamation-triangle" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ countIneligible() | number }}</div>
|
||||
<div class="cert-kpi-l">Not Eligible</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="cert-filter">
|
||||
<label>Form Type</label>
|
||||
<select [(ngModel)]="kindFilter">
|
||||
<option value="">All Form 121</option>
|
||||
<option value="15G">Form 121 (Below 60 years)</option>
|
||||
<option value="15H">Form 121 (Senior Citizen 60+)</option>
|
||||
</select>
|
||||
<!-- Filters -->
|
||||
<div class="cert-filters">
|
||||
<div class="cert-filter">
|
||||
<label>Customer / Customer ID / PAN</label>
|
||||
<div class="cert-input-ic">
|
||||
<fa-icon icon="search"></fa-icon>
|
||||
<input type="text" [(ngModel)]="search" placeholder="e.g. CUST556677 or customer name" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cert-filter">
|
||||
<label>Threshold Band</label>
|
||||
<select [(ngModel)]="bandFilter">
|
||||
<option value="">All bands</option>
|
||||
<option value="GENERAL">General (below 60)</option>
|
||||
<option value="SENIOR">Senior citizen (60+)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="cert-filter">
|
||||
<label>Status</label>
|
||||
<select [(ngModel)]="statusFilter">
|
||||
<option value="">All statuses</option>
|
||||
<option value="FILED">Filed</option>
|
||||
<option value="PENDING">Pending</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="cert-filter">
|
||||
<label>Eligibility</label>
|
||||
<select [(ngModel)]="ineligibleOnly">
|
||||
<option [ngValue]="false">All customers</option>
|
||||
<option [ngValue]="true">Not eligible only</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@if (search || bandFilter || statusFilter || ineligibleOnly) {
|
||||
<button type="button" class="cert-clear" (click)="clearFilters()">
|
||||
<fa-icon icon="times"></fa-icon> Clear
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="cert-filter">
|
||||
<label>Status</label>
|
||||
<select [(ngModel)]="statusFilter">
|
||||
<option value="">All statuses</option>
|
||||
<option value="FILED">Filed</option>
|
||||
<option value="PENDING">Pending</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@if (search || kindFilter || statusFilter) {
|
||||
<button type="button" class="cert-clear" (click)="clearFilters()"><fa-icon icon="times"></fa-icon> Clear</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="cert-card">
|
||||
<div class="cert-table-wrap">
|
||||
<table class="cert-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Customer · PAN</th>
|
||||
<th>Form Type</th>
|
||||
<th>Age</th>
|
||||
<th>Branch</th>
|
||||
<th class="num">Deposit Principal</th>
|
||||
<th class="num">Est. Interest ({{ records[0]?.fy }})</th>
|
||||
<th>Status</th>
|
||||
<th class="col-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (r of filteredRecords; track r.customerId) {
|
||||
<!-- Table -->
|
||||
<div class="cert-card">
|
||||
<div class="cert-table-wrap">
|
||||
<table class="cert-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cert-cust-name">{{ r.customerName }}</div>
|
||||
<div class="mono small muted">{{ r.customerId }} · PAN {{ r.customerPan }}</div>
|
||||
<div class="small muted">DOB {{ r.dob | date: 'd MMM y' }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
class="cert-pill"
|
||||
[class.cert-pill--blue]="formKind(r) === '15G'"
|
||||
[class.cert-pill--amber]="formKind(r) === '15H'"
|
||||
>
|
||||
Form 121 ({{ formKind(r) }})
|
||||
</span>
|
||||
</td>
|
||||
<td class="small">{{ age(r.dob) }} yrs</td>
|
||||
<td class="small">{{ r.branch }}</td>
|
||||
<td class="num">₹{{ r.depositPrincipal | number: '1.0-0' }}</td>
|
||||
<td class="num">
|
||||
<strong class="cert-interest">₹{{ r.estimatedInterest | number: '1.0-0' }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
@if (r.status === 'FILED') {
|
||||
<span class="cert-pill cert-pill--green"> <fa-icon icon="check-circle"></fa-icon> Filed </span>
|
||||
@if (r.filedOn) {
|
||||
<div class="mono small muted">{{ r.filedOn | date: 'd MMM y' }}</div>
|
||||
<th>Customer · PAN</th>
|
||||
<th>Form · Band</th>
|
||||
<th>Age</th>
|
||||
<th>Branch</th>
|
||||
<th class="num">Est. Interest</th>
|
||||
<th class="num">Threshold</th>
|
||||
<th class="num">TDS Payable</th>
|
||||
<th class="num">TDS Saved</th>
|
||||
<th>Settlement</th>
|
||||
<th>Status</th>
|
||||
<th class="col-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of filteredRows; track row.record.customerId) {
|
||||
<tr [class.cert-row--warn]="!row.eligibility.eligible">
|
||||
<td>
|
||||
<div class="cert-cust-name">{{ row.record.customerName }}</div>
|
||||
<div class="mono small muted">{{ row.record.customerId }} · PAN {{ row.record.customerPan }}</div>
|
||||
<div class="small muted">DOB {{ row.record.dob | date: 'd MMM y' }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
class="cert-pill"
|
||||
[class.cert-pill--blue]="row.band === 'GENERAL'"
|
||||
[class.cert-pill--amber]="row.band === 'SENIOR'"
|
||||
>
|
||||
{{ row.form === '121' ? 'Form 121' : 'Form ' + row.form }}
|
||||
</span>
|
||||
<div class="small muted">{{ row.band === 'SENIOR' ? 'Senior citizen' : 'General' }}</div>
|
||||
</td>
|
||||
<td class="small">{{ row.age }} yrs</td>
|
||||
<td class="small">{{ row.record.branch }}</td>
|
||||
<td class="num">
|
||||
<strong class="cert-interest">₹{{ row.record.estimatedInterest | number: '1.0-0' }}</strong>
|
||||
</td>
|
||||
<td class="num small muted">₹{{ row.schedule.threshold | number: '1.0-0' }}</td>
|
||||
<td class="num">
|
||||
@if (row.schedule.totalTds > 0) {
|
||||
<strong>₹{{ row.schedule.totalTds | number: '1.0-0' }}</strong>
|
||||
<div class="small muted">@ {{ row.schedule.rateApplied * 100 | number: '1.0-0' }}%</div>
|
||||
} @else {
|
||||
<span class="small muted">—</span>
|
||||
}
|
||||
} @else {
|
||||
<span class="cert-pill cert-pill--amber"> <fa-icon icon="hourglass-half"></fa-icon> Pending </span>
|
||||
}
|
||||
</td>
|
||||
<td class="col-actions">
|
||||
<div class="cert-row-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="cert-icon-btn primary"
|
||||
(click)="viewCertificate(r)"
|
||||
matTooltip="View / Print declaration"
|
||||
>
|
||||
<fa-icon icon="eye"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="cert-icon-btn"
|
||||
(click)="downloadCertificate(r)"
|
||||
matTooltip="Download PDF"
|
||||
>
|
||||
<fa-icon icon="download"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@if (filteredRecords.length === 0) {
|
||||
<tr>
|
||||
<td colspan="8" class="cert-empty">
|
||||
<fa-icon icon="info-circle"></fa-icon>
|
||||
No declarations match the current filters.
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td class="num">
|
||||
@if (row.tdsSaved > 0) {
|
||||
<strong class="cert-interest">₹{{ row.tdsSaved | number: '1.0-0' }}</strong>
|
||||
} @else {
|
||||
<span class="small muted">—</span>
|
||||
}
|
||||
</td>
|
||||
<td class="small">
|
||||
<span class="cert-pill" [class.cert-pill--blue]="row.mode === 'QUARTERLY'">
|
||||
{{ row.mode === 'QUARTERLY' ? 'Quarterly' : 'Year end' }}
|
||||
</span>
|
||||
<div class="small muted">product-driven</div>
|
||||
</td>
|
||||
<td>
|
||||
@if (row.record.status === 'FILED') {
|
||||
<span class="cert-pill cert-pill--green"> <fa-icon icon="check-circle"></fa-icon> Filed </span>
|
||||
@if (row.record.filedOn) {
|
||||
<div class="mono small muted">{{ row.record.filedOn | date: 'd MMM y' }}</div>
|
||||
}
|
||||
} @else {
|
||||
<span class="cert-pill cert-pill--amber"> <fa-icon icon="hourglass-half"></fa-icon> Pending </span>
|
||||
}
|
||||
@if (!row.eligibility.eligible) {
|
||||
<div class="cert-pill cert-pill--amber">
|
||||
<fa-icon icon="exclamation-triangle"></fa-icon> Not eligible
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
<td class="col-actions">
|
||||
<div class="cert-row-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="cert-icon-btn"
|
||||
(click)="toggleExpanded(row)"
|
||||
[matTooltip]="isExpanded(row) ? 'Hide quarter-wise' : 'Show quarter-wise'"
|
||||
>
|
||||
<fa-icon [icon]="isExpanded(row) ? 'chevron-up' : 'chevron-down'"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="cert-icon-btn primary"
|
||||
(click)="viewCertificate(row)"
|
||||
matTooltip="View / Print declaration"
|
||||
>
|
||||
<fa-icon icon="eye"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="cert-icon-btn"
|
||||
(click)="downloadCertificate(row)"
|
||||
matTooltip="Download PDF"
|
||||
>
|
||||
<fa-icon icon="download"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@if (isExpanded(row)) {
|
||||
<tr class="cert-row--detail">
|
||||
<td colspan="11">
|
||||
@if (!row.eligibility.eligible) {
|
||||
<div class="cert-note cert-note--warn">
|
||||
<fa-icon icon="exclamation-triangle"></fa-icon>
|
||||
<div>
|
||||
<strong>Declaration cannot be accepted</strong>
|
||||
<ul>
|
||||
@for (reason of row.eligibility.reasons; track reason) {
|
||||
<li>{{ reason }}</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@for (note of row.eligibility.unassessed; track note) {
|
||||
<div class="cert-note">
|
||||
<fa-icon icon="info-circle"></fa-icon>
|
||||
<div>{{ note }}</div>
|
||||
</div>
|
||||
}
|
||||
@for (note of row.schedule.notes; track note) {
|
||||
<div class="cert-note">
|
||||
<fa-icon icon="info-circle"></fa-icon>
|
||||
<div>{{ note }}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<table class="cert-table cert-table--inner">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Quarter</th>
|
||||
<th class="num">Interest</th>
|
||||
<th class="num">Cumulative</th>
|
||||
<th class="num">Liability to date</th>
|
||||
<th class="num">TDS this quarter</th>
|
||||
<th>Return due</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (line of row.schedule.lines; track line.quarter) {
|
||||
<tr [class.cert-row--warn]="line.thresholdCrossedHere">
|
||||
<td class="small">
|
||||
{{ line.label }}
|
||||
@if (line.thresholdCrossedHere) {
|
||||
<span class="cert-pill cert-pill--amber">threshold crossed</span>
|
||||
}
|
||||
@if (line.declarationActive) {
|
||||
<span class="cert-pill cert-pill--green">Form 121 active</span>
|
||||
}
|
||||
</td>
|
||||
<td class="num">₹{{ line.interest | number: '1.0-0' }}</td>
|
||||
<td class="num">₹{{ line.cumInterest | number: '1.0-0' }}</td>
|
||||
<td class="num">₹{{ line.cumLiability | number: '1.0-0' }}</td>
|
||||
<td class="num">
|
||||
@if (line.tds !== 0) {
|
||||
<strong>₹{{ line.tds | number: '1.0-0' }}</strong>
|
||||
} @else {
|
||||
<span class="small muted">—</span>
|
||||
}
|
||||
</td>
|
||||
<td class="small muted">{{ line.dueDate }}</td>
|
||||
</tr>
|
||||
}
|
||||
<tr>
|
||||
<td class="small"><strong>Total</strong></td>
|
||||
<td class="num">
|
||||
<strong>₹{{ row.schedule.totalInterest | number: '1.0-0' }}</strong>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="num">
|
||||
<strong>₹{{ row.schedule.totalTds | number: '1.0-0' }}</strong>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@if (row.schedule.shieldedInterest > 0) {
|
||||
<div class="small muted">
|
||||
₹{{ row.schedule.shieldedInterest | number: '1.0-0' }} paid without deduction on the strength of
|
||||
the declaration — reportable in the quarterly {{ statute.statement }} return.
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
@if (filteredRows.length === 0) {
|
||||
<tr>
|
||||
<td colspan="11" class="cert-empty">
|
||||
<fa-icon icon="info-circle"></fa-icon>
|
||||
No declarations match the current filters.
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -21,9 +21,31 @@ import {
|
||||
} from '../certificate-preview-dialog/certificate-preview-dialog.component';
|
||||
import { downloadForm15ghPdf } from '../certificate-pdf';
|
||||
import { DscSignService } from '../../dsc-sign-dialog/dsc-sign.service';
|
||||
import { RealForm15ghViewComponent } from './real-form15gh-view/real-form15gh-view.component';
|
||||
|
||||
export type Form15Kind = '15G' | '15H';
|
||||
import {
|
||||
Declaration,
|
||||
DeclarationForm,
|
||||
EligibilityResult,
|
||||
FY_TAX_CONFIG,
|
||||
Form15Kind,
|
||||
TdsMode,
|
||||
TdsSchedule,
|
||||
ageInFy,
|
||||
buildSchedule,
|
||||
checkEligibility,
|
||||
declarationFormFor,
|
||||
formKindFor,
|
||||
isSeniorInFy,
|
||||
normaliseFy,
|
||||
projectQuarterlyCredits,
|
||||
tdsModeFor
|
||||
} from './tds-15gh.compute';
|
||||
|
||||
export type { Form15Kind };
|
||||
export type Form15Status = 'FILED' | 'PENDING';
|
||||
/** Which deduction trigger the payee falls under. Age-based, still. */
|
||||
export type ThresholdBand = 'GENERAL' | 'SENIOR';
|
||||
|
||||
export interface Form15ghRecord {
|
||||
customerId: string;
|
||||
@@ -32,18 +54,46 @@ export interface Form15ghRecord {
|
||||
customerAddress: string;
|
||||
dob: string;
|
||||
branch: string;
|
||||
/** Aggregate interest the bank will pay this FY. */
|
||||
/** Aggregate interest the bank will pay this FY across the customer's time deposits. */
|
||||
estimatedInterest: number;
|
||||
/** Customer's total estimated income for the FY. */
|
||||
/** Customer's total estimated income for the FY, as declared by them. */
|
||||
estimatedIncome: number;
|
||||
/** Sum of FD / RD principals tied to the declaration. */
|
||||
depositPrincipal: number;
|
||||
fy: string;
|
||||
status: Form15Status;
|
||||
filedOn?: string;
|
||||
/** "Yes / No" for: has any income tax been assessed for the customer
|
||||
under the IT Act in the past six years? */
|
||||
/**
|
||||
* "Yes / No" for: has any income tax been assessed for the customer under the
|
||||
* IT Act in the past six years?
|
||||
*/
|
||||
assessed: boolean;
|
||||
/**
|
||||
* The deposit product's interest-posting frequency. Tax falls due when interest
|
||||
* is credited, so this — and not any customer preference — decides whether it
|
||||
* settles quarterly or at year end.
|
||||
*/
|
||||
interestPostingPeriodType: string;
|
||||
}
|
||||
|
||||
/** A register row with everything the engine derived for it, computed once. */
|
||||
export interface Form15ghRow {
|
||||
record: Form15ghRecord;
|
||||
/** The form actually in force for the record's year — '121' from FY 2026-27. */
|
||||
form: DeclarationForm;
|
||||
/**
|
||||
* The 15G/15H label. Only a form distinction up to FY 2025-26; from FY 2026-27
|
||||
* the forms merged and this reflects the threshold band alone.
|
||||
*/
|
||||
kind: Form15Kind;
|
||||
band: ThresholdBand;
|
||||
age: number;
|
||||
mode: TdsMode;
|
||||
/** Schedule as things stand, declaration included where one is on record. */
|
||||
schedule: TdsSchedule;
|
||||
/** Tax the declaration kept out of the customer's pocket this year. */
|
||||
tdsSaved: number;
|
||||
eligibility: EligibilityResult;
|
||||
}
|
||||
|
||||
@Component({
|
||||
@@ -55,7 +105,8 @@ export interface Form15ghRecord {
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
FaIconComponent,
|
||||
MatTooltip
|
||||
MatTooltip,
|
||||
RealForm15ghViewComponent
|
||||
]
|
||||
})
|
||||
export class Form15ghComponent implements OnInit {
|
||||
@@ -63,40 +114,89 @@ export class Form15ghComponent implements OnInit {
|
||||
private snack = inject(MatSnackBar);
|
||||
private dscSign = inject(DscSignService);
|
||||
|
||||
/** Mode toggle: 'demo' uses mock seed data; 'real' pulls live Fineract data. */
|
||||
viewMode: 'demo' | 'real' = 'demo';
|
||||
|
||||
// ── Filters ──
|
||||
search = '';
|
||||
/** Which form. Empty = both. */
|
||||
kindFilter: '' | Form15Kind = '';
|
||||
/** Which deduction trigger. Empty = both bands. */
|
||||
bandFilter: '' | ThresholdBand = '';
|
||||
statusFilter: '' | Form15Status = '';
|
||||
/** Show only declarations the branch cannot lawfully accept. */
|
||||
ineligibleOnly = false;
|
||||
|
||||
records: Form15ghRecord[] = [];
|
||||
/** Which row's quarter-wise breakdown is open. */
|
||||
expandedId: string | null = null;
|
||||
|
||||
rows: Form15ghRow[] = [];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.records = seedForm15gh();
|
||||
// Derived once. The template reads these many times per change-detection
|
||||
// pass, and re-running the schedules on every read is what made the other
|
||||
// register screens stall.
|
||||
this.rows = seedForm15gh().map((record) => this.buildRow(record));
|
||||
}
|
||||
|
||||
/** Compute age in years from DoB. */
|
||||
age(dob: string): number {
|
||||
if (!dob) return 0;
|
||||
const today = new Date();
|
||||
const birth = new Date(dob);
|
||||
let age = today.getFullYear() - birth.getFullYear();
|
||||
const m = today.getMonth() - birth.getMonth();
|
||||
if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--;
|
||||
return age;
|
||||
private buildRow(record: Form15ghRecord): Form15ghRow {
|
||||
const ctx = {
|
||||
fy: record.fy,
|
||||
dateOfBirth: record.dob,
|
||||
pan: record.customerPan,
|
||||
resident: true
|
||||
};
|
||||
|
||||
const declaration: Declaration | null =
|
||||
record.status === 'FILED'
|
||||
? {
|
||||
kind: formKindFor(record.dob, record.fy),
|
||||
// The register holds the filing date; a declaration operates from
|
||||
// the day the branch accepted it.
|
||||
acceptedOn: record.filedOn ?? `${record.fy.replace(/\D/g, '').slice(0, 4)}-04-01`,
|
||||
fy: record.fy
|
||||
}
|
||||
: null;
|
||||
|
||||
const mode = tdsModeFor({ interestPostingPeriodType: record.interestPostingPeriodType });
|
||||
// The register carries a projected annual figure rather than real postings,
|
||||
// so spread it across the year to drive the schedule.
|
||||
const credits = projectQuarterlyCredits(record.estimatedInterest, record.fy);
|
||||
|
||||
const schedule = buildSchedule(mode, credits, { ...ctx, declaration });
|
||||
const withoutDeclaration = buildSchedule(mode, credits, { ...ctx, declaration: null });
|
||||
|
||||
return {
|
||||
record,
|
||||
form: declarationFormFor(record.fy, record.dob),
|
||||
kind: formKindFor(record.dob, record.fy),
|
||||
band: isSeniorInFy(record.dob, record.fy) ? 'SENIOR' : 'GENERAL',
|
||||
age: ageInFy(record.dob, record.fy),
|
||||
mode,
|
||||
schedule,
|
||||
tdsSaved: declaration ? Math.max(0, withoutDeclaration.totalTds - schedule.totalTds) : 0,
|
||||
eligibility: checkEligibility(ctx, {
|
||||
estimatedInterest: record.estimatedInterest,
|
||||
estimatedIncome: record.estimatedIncome,
|
||||
incomeOnRecord: true
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
/** 15H once 60+, 15G otherwise. */
|
||||
formKind(r: Form15ghRecord): Form15Kind {
|
||||
return this.age(r.dob) >= 60 ? '15H' : '15G';
|
||||
}
|
||||
|
||||
get filteredRecords(): Form15ghRecord[] {
|
||||
get filteredRows(): Form15ghRow[] {
|
||||
const q = this.search.trim().toLowerCase();
|
||||
return this.records.filter((r) => {
|
||||
if (this.kindFilter && this.formKind(r) !== this.kindFilter) return false;
|
||||
if (this.statusFilter && r.status !== this.statusFilter) return false;
|
||||
if (!q) return true;
|
||||
return this.rows.filter((row) => {
|
||||
if (this.bandFilter && row.band !== this.bandFilter) {
|
||||
return false;
|
||||
}
|
||||
if (this.statusFilter && row.record.status !== this.statusFilter) {
|
||||
return false;
|
||||
}
|
||||
if (this.ineligibleOnly && row.eligibility.eligible) {
|
||||
return false;
|
||||
}
|
||||
if (!q) {
|
||||
return true;
|
||||
}
|
||||
const r = row.record;
|
||||
return (
|
||||
r.customerName.toLowerCase().includes(q) ||
|
||||
r.customerId.toLowerCase().includes(q) ||
|
||||
@@ -105,32 +205,67 @@ export class Form15ghComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
count15G(): number {
|
||||
return this.records.filter((r) => this.formKind(r) === '15G').length;
|
||||
countGeneralBand(): number {
|
||||
return this.rows.filter((r) => r.band === 'GENERAL').length;
|
||||
}
|
||||
|
||||
count15H(): number {
|
||||
return this.records.filter((r) => this.formKind(r) === '15H').length;
|
||||
countSeniorBand(): number {
|
||||
return this.rows.filter((r) => r.band === 'SENIOR').length;
|
||||
}
|
||||
|
||||
/**
|
||||
* The declaration in force across the register, and the provision charging the
|
||||
* tax. Both changed on 01 April 2026, so they are read from the config rather
|
||||
* than written into the template.
|
||||
*/
|
||||
get statute(): { form: string; section: string; statement: string; frequency: string } {
|
||||
const fy = normaliseFy(this.rows[0]?.record.fy ?? '2026-27');
|
||||
const cfg = FY_TAX_CONFIG[fy];
|
||||
return {
|
||||
form: cfg.declarationForm === '121' ? 'Form 121' : 'Form 15G / 15H',
|
||||
section: cfg.interestTdsSection,
|
||||
statement: cfg.tdsStatementForm,
|
||||
frequency: cfg.declarationStatementFrequency === 'MONTHLY' ? 'monthly' : 'quarterly'
|
||||
};
|
||||
}
|
||||
|
||||
countFiled(): number {
|
||||
return this.records.filter((r) => r.status === 'FILED').length;
|
||||
return this.rows.filter((r) => r.record.status === 'FILED').length;
|
||||
}
|
||||
|
||||
/** Declarations on record that the branch could not lawfully have accepted. */
|
||||
countIneligible(): number {
|
||||
return this.rows.filter((r) => !r.eligibility.eligible).length;
|
||||
}
|
||||
|
||||
totalInterest(): number {
|
||||
return this.filteredRecords.reduce((s, r) => s + r.estimatedInterest, 0);
|
||||
return this.filteredRows.reduce((s, r) => s + r.record.estimatedInterest, 0);
|
||||
}
|
||||
|
||||
/** Tax the declarations kept out of customers' pockets, across the filter. */
|
||||
totalTdsSaved(): number {
|
||||
return this.filteredRows.reduce((s, r) => s + r.tdsSaved, 0);
|
||||
}
|
||||
|
||||
clearFilters(): void {
|
||||
this.search = '';
|
||||
this.kindFilter = '';
|
||||
this.bandFilter = '';
|
||||
this.statusFilter = '';
|
||||
this.ineligibleOnly = false;
|
||||
}
|
||||
|
||||
viewCertificate(r: Form15ghRecord): void {
|
||||
toggleExpanded(row: Form15ghRow): void {
|
||||
this.expandedId = this.expandedId === row.record.customerId ? null : row.record.customerId;
|
||||
}
|
||||
|
||||
isExpanded(row: Form15ghRow): boolean {
|
||||
return this.expandedId === row.record.customerId;
|
||||
}
|
||||
|
||||
viewCertificate(row: Form15ghRow): void {
|
||||
const data: CertificatePreviewDialogData = {
|
||||
kind: 'form15gh',
|
||||
form15gh: { record: r, kind: this.formKind(r), age: this.age(r.dob) }
|
||||
form15gh: { record: row.record, kind: row.kind, age: row.age }
|
||||
};
|
||||
this.dialog.open(CertificatePreviewDialogComponent, {
|
||||
width: '880px',
|
||||
@@ -142,20 +277,34 @@ export class Form15ghComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
downloadCertificate(r: Form15ghRecord): void {
|
||||
const kind = this.formKind(r);
|
||||
downloadCertificate(row: Form15ghRow): void {
|
||||
const r = row.record;
|
||||
// A declaration the branch cannot accept must not go out as a signed PDF.
|
||||
if (!row.eligibility.eligible) {
|
||||
this.snack.open(`Cannot issue: ${row.eligibility.reasons[0]}`, 'Dismiss', { duration: 6000 });
|
||||
return;
|
||||
}
|
||||
this.dscSign.promptThenDownload(
|
||||
{
|
||||
title: `Form 121 (${kind}) Declaration`,
|
||||
title: `${row.form === '121' ? 'Form 121' : `Form ${row.form}`} Declaration`,
|
||||
reference: `${r.customerId} · ${r.customerName} · ${r.fy}`,
|
||||
filename: `Form121-${r.customerId}-${r.fy.replace(/\s+/g, '')}.pdf`
|
||||
},
|
||||
(dsc) => downloadForm15ghPdf(r, kind, dsc)
|
||||
(dsc) => downloadForm15ghPdf(r, row.kind, dsc)
|
||||
);
|
||||
}
|
||||
|
||||
toggleViewMode(): void {
|
||||
this.viewMode = this.viewMode === 'demo' ? 'real' : 'demo';
|
||||
}
|
||||
}
|
||||
|
||||
// ───────────────────── Mock seed (top-level export) ─────────────────────
|
||||
// ───────────────────────── Mock seed (top-level export) ─────────────────────
|
||||
/**
|
||||
* Two of these customers are deliberately ineligible — their estimated income
|
||||
* leaves a tax liability, so a Form 121 declaration cannot be accepted from them.
|
||||
* That gives the register's eligibility warnings something to show.
|
||||
*/
|
||||
export function seedForm15gh(): Form15ghRecord[] {
|
||||
return [
|
||||
{
|
||||
@@ -165,86 +314,109 @@ export function seedForm15gh(): Form15ghRecord[] {
|
||||
customerAddress: 'Flat 902, Skyline Apt, Andheri (E), Mumbai 400069',
|
||||
dob: '1985-02-14',
|
||||
branch: 'Mumbai — Andheri (E)',
|
||||
estimatedInterest: 38500,
|
||||
estimatedIncome: 850000,
|
||||
depositPrincipal: 500000,
|
||||
fy: 'FY 2025-26',
|
||||
status: 'FILED',
|
||||
filedOn: '2025-04-10',
|
||||
assessed: true
|
||||
estimatedInterest: 38_500,
|
||||
// Over the basic exemption limit — not eligible for 15G.
|
||||
estimatedIncome: 850_000,
|
||||
depositPrincipal: 500_000,
|
||||
fy: 'FY 2026-27',
|
||||
status: 'PENDING',
|
||||
assessed: true,
|
||||
interestPostingPeriodType: 'savingsPostingInterestPeriodType.quarterly'
|
||||
},
|
||||
{
|
||||
customerId: 'CUST556677',
|
||||
customerName: 'Karthik Rao',
|
||||
customerPan: 'PQRSR2233Z',
|
||||
customerPan: 'PQRPR2233Z',
|
||||
customerAddress: '24, MG Road, Bengaluru 560001',
|
||||
dob: '1972-09-04',
|
||||
branch: 'Bengaluru — MG Road',
|
||||
estimatedInterest: 52800,
|
||||
estimatedIncome: 320000,
|
||||
depositPrincipal: 700000,
|
||||
fy: 'FY 2025-26',
|
||||
estimatedInterest: 52_800,
|
||||
estimatedIncome: 320_000,
|
||||
depositPrincipal: 700_000,
|
||||
fy: 'FY 2026-27',
|
||||
status: 'PENDING',
|
||||
assessed: false
|
||||
assessed: false,
|
||||
interestPostingPeriodType: 'savingsPostingInterestPeriodType.quarterly'
|
||||
},
|
||||
{
|
||||
customerId: 'CUST667788',
|
||||
customerName: 'Lakshmi Naidu',
|
||||
customerPan: 'XYZAN7788Q',
|
||||
customerPan: 'XYZPN7788Q',
|
||||
customerAddress: 'Plot 14, Road No. 3, Banjara Hills, Hyderabad 500034',
|
||||
dob: '1958-06-22',
|
||||
branch: 'Hyderabad — Banjara Hills',
|
||||
estimatedInterest: 88200,
|
||||
estimatedIncome: 410000,
|
||||
depositPrincipal: 1200000,
|
||||
fy: 'FY 2025-26',
|
||||
estimatedInterest: 88_200,
|
||||
estimatedIncome: 410_000,
|
||||
depositPrincipal: 1_200_000,
|
||||
fy: 'FY 2026-27',
|
||||
status: 'FILED',
|
||||
filedOn: '2025-04-15',
|
||||
assessed: true
|
||||
filedOn: '2026-04-15',
|
||||
assessed: true,
|
||||
interestPostingPeriodType: 'savingsPostingInterestPeriodType.quarterly'
|
||||
},
|
||||
{
|
||||
customerId: 'CUST334455',
|
||||
customerName: 'Anita Verma',
|
||||
customerPan: 'EFGHV5678A',
|
||||
customerPan: 'EFGPV5678A',
|
||||
customerAddress: 'B-12, Connaught Pl, New Delhi 110001',
|
||||
dob: '1962-11-30',
|
||||
branch: 'New Delhi — Connaught Place',
|
||||
estimatedInterest: 64500,
|
||||
estimatedIncome: 280000,
|
||||
depositPrincipal: 900000,
|
||||
fy: 'FY 2025-26',
|
||||
estimatedInterest: 64_500,
|
||||
estimatedIncome: 280_000,
|
||||
depositPrincipal: 900_000,
|
||||
fy: 'FY 2026-27',
|
||||
status: 'FILED',
|
||||
filedOn: '2025-04-05',
|
||||
assessed: false
|
||||
filedOn: '2026-04-05',
|
||||
assessed: false,
|
||||
interestPostingPeriodType: 'savingsPostingInterestPeriodType.annual'
|
||||
},
|
||||
{
|
||||
customerId: 'CUST990011',
|
||||
customerName: 'Arjun Banerjee',
|
||||
customerPan: 'TUVWB4455F',
|
||||
customerPan: 'TUVPB4455F',
|
||||
customerAddress: '42, Park Street, Kolkata 700016',
|
||||
dob: '1991-07-19',
|
||||
branch: 'Kolkata — Park Street',
|
||||
estimatedInterest: 14200,
|
||||
estimatedIncome: 620000,
|
||||
depositPrincipal: 200000,
|
||||
fy: 'FY 2025-26',
|
||||
estimatedInterest: 14_200,
|
||||
// Over the basic exemption limit — not eligible for 15G.
|
||||
estimatedIncome: 620_000,
|
||||
depositPrincipal: 200_000,
|
||||
fy: 'FY 2026-27',
|
||||
status: 'PENDING',
|
||||
assessed: true
|
||||
assessed: true,
|
||||
interestPostingPeriodType: 'savingsPostingInterestPeriodType.monthly'
|
||||
},
|
||||
{
|
||||
customerId: 'CUST330044',
|
||||
customerName: 'Madhavi Singh',
|
||||
customerPan: 'TUVWS3344K',
|
||||
customerPan: 'TUVPS3344K',
|
||||
customerAddress: 'D-5, Greater Kailash, New Delhi 110048',
|
||||
dob: '1955-03-08',
|
||||
branch: 'New Delhi — Connaught Place',
|
||||
estimatedInterest: 145000,
|
||||
estimatedIncome: 320000,
|
||||
depositPrincipal: 2000000,
|
||||
fy: 'FY 2025-26',
|
||||
// A 15H declarant faces no ceiling on interest — only a nil liability.
|
||||
estimatedInterest: 145_000,
|
||||
estimatedIncome: 320_000,
|
||||
depositPrincipal: 2_000_000,
|
||||
fy: 'FY 2026-27',
|
||||
status: 'FILED',
|
||||
filedOn: '2025-04-02',
|
||||
assessed: false
|
||||
filedOn: '2026-04-02',
|
||||
assessed: false,
|
||||
interestPostingPeriodType: 'savingsPostingInterestPeriodType.quarterly'
|
||||
},
|
||||
{
|
||||
customerId: 'CUST778899',
|
||||
customerName: 'Vikram Malhotra',
|
||||
customerPan: '',
|
||||
customerAddress: 'Flat 405, Green Glen Layout, Outer Ring Road, Bengaluru 560103',
|
||||
dob: '1980-05-15',
|
||||
branch: 'Bengaluru — MG Road',
|
||||
estimatedInterest: 60_000,
|
||||
estimatedIncome: 350_000,
|
||||
depositPrincipal: 800_000,
|
||||
fy: 'FY 2026-27',
|
||||
status: 'PENDING',
|
||||
assessed: true,
|
||||
interestPostingPeriodType: 'savingsPostingInterestPeriodType.quarterly'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
+329
@@ -0,0 +1,329 @@
|
||||
<!--
|
||||
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/.
|
||||
-->
|
||||
|
||||
@if (loading) {
|
||||
<div class="cert-empty">
|
||||
<fa-icon icon="spinner" [spin]="true" size="2x" style="color: #7c3aed; margin-bottom: 12px;"></fa-icon>
|
||||
<div>Loading live declarations and accounts from Fineract…</div>
|
||||
</div>
|
||||
} @else if (loadError) {
|
||||
<div class="cert-empty" style="color: #ef4444;">
|
||||
<fa-icon icon="exclamation-circle" size="2x" style="margin-bottom: 12px;"></fa-icon>
|
||||
<div>Could not load real data from Fineract. Check connection.</div>
|
||||
</div>
|
||||
} @else {
|
||||
<!-- KPI strip -->
|
||||
<div class="cert-kpis">
|
||||
<div class="cert-kpi cert-kpi--blue">
|
||||
<fa-icon icon="user" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ countGeneralBand() | number }}</div>
|
||||
<div class="cert-kpi-l">General band (under 60)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--amber">
|
||||
<fa-icon icon="user-tie" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ countSeniorBand() | number }}</div>
|
||||
<div class="cert-kpi-l">Senior citizen band (60+)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--green">
|
||||
<fa-icon icon="check-circle" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ countFiled() | number }}</div>
|
||||
<div class="cert-kpi-l">Filed this FY</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--teal">
|
||||
<fa-icon icon="coins" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">₹{{ totalInterest() | number: '1.0-0' }}</div>
|
||||
<div class="cert-kpi-l">Projected Interest</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-kpi cert-kpi--green">
|
||||
<fa-icon icon="shield-alt" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">₹{{ totalTdsSaved() | number: '1.0-0' }}</div>
|
||||
<div class="cert-kpi-l">TDS Saved</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (countIneligible() > 0) {
|
||||
<div class="cert-kpi cert-kpi--amber">
|
||||
<fa-icon icon="exclamation-triangle" class="cert-kpi-ic"></fa-icon>
|
||||
<div>
|
||||
<div class="cert-kpi-n">{{ countIneligible() | number }}</div>
|
||||
<div class="cert-kpi-l">Not Eligible</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="cert-filters">
|
||||
<div class="cert-filter">
|
||||
<label>Financial Year</label>
|
||||
<select [(ngModel)]="selectedFy" (ngModelChange)="loadRealData()">
|
||||
@for (y of availableFys; track y) {
|
||||
<option [value]="y">{{ y }}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="cert-filter">
|
||||
<label>Customer / Customer ID / PAN</label>
|
||||
<div class="cert-input-ic">
|
||||
<fa-icon icon="search"></fa-icon>
|
||||
<input type="text" [(ngModel)]="search" placeholder="Search live data..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cert-filter">
|
||||
<label>Threshold Band</label>
|
||||
<select [(ngModel)]="bandFilter">
|
||||
<option value="">All bands</option>
|
||||
<option value="GENERAL">General (below 60)</option>
|
||||
<option value="SENIOR">Senior citizen (60+)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="cert-filter">
|
||||
<label>Status</label>
|
||||
<select [(ngModel)]="statusFilter">
|
||||
<option value="">All statuses</option>
|
||||
<option value="FILED">Filed</option>
|
||||
<option value="PENDING">Pending</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="cert-filter">
|
||||
<label>Eligibility</label>
|
||||
<select [(ngModel)]="ineligibleOnly">
|
||||
<option [ngValue]="false">All customers</option>
|
||||
<option [ngValue]="true">Not eligible only</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@if (search || bandFilter || statusFilter || ineligibleOnly) {
|
||||
<button type="button" class="cert-clear" (click)="clearFilters()"><fa-icon icon="times"></fa-icon> Clear</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="cert-card">
|
||||
<div class="cert-table-wrap">
|
||||
<table class="cert-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Customer · PAN</th>
|
||||
<th>Form · Band</th>
|
||||
<th>Age</th>
|
||||
<th>Branch</th>
|
||||
<th class="num">Est. Interest</th>
|
||||
<th class="num">Threshold</th>
|
||||
<th class="num">TDS Payable</th>
|
||||
<th class="num">TDS Saved</th>
|
||||
<th>Settlement</th>
|
||||
<th>Status</th>
|
||||
<th class="col-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of filteredRows; track row.row.record.customerId) {
|
||||
<tr [class.cert-row--warn]="!row.row.eligibility.eligible">
|
||||
<td>
|
||||
<div class="cert-cust-name">{{ row.row.record.customerName }}</div>
|
||||
<div class="mono small muted">{{ row.row.record.customerId }} · PAN {{ row.row.record.customerPan || '—' }}</div>
|
||||
<div class="small muted">DOB {{ row.row.record.dob | date: 'd MMM y' }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
class="cert-pill"
|
||||
[class.cert-pill--blue]="row.row.band === 'GENERAL'"
|
||||
[class.cert-pill--amber]="row.row.band === 'SENIOR'"
|
||||
>
|
||||
{{ row.row.form === '121' ? 'Form 121' : 'Form ' + row.row.form }}
|
||||
</span>
|
||||
<div class="small muted">{{ row.row.band === 'SENIOR' ? 'Senior citizen' : 'General' }}</div>
|
||||
</td>
|
||||
<td class="small">{{ row.row.age }} yrs</td>
|
||||
<td class="small">{{ row.row.record.branch || '—' }}</td>
|
||||
<td class="num">
|
||||
<strong class="cert-interest">₹{{ row.row.record.estimatedInterest | number: '1.0-0' }}</strong>
|
||||
</td>
|
||||
<td class="num small muted">₹{{ row.row.schedule.threshold | number: '1.0-0' }}</td>
|
||||
<td class="num">
|
||||
@if (row.row.schedule.totalTds > 0) {
|
||||
<strong>₹{{ row.row.schedule.totalTds | number: '1.0-0' }}</strong>
|
||||
<div class="small muted">@ {{ row.row.schedule.rateApplied * 100 | number: '1.0-0' }}%</div>
|
||||
} @else {
|
||||
<span class="small muted">—</span>
|
||||
}
|
||||
</td>
|
||||
<td class="num">
|
||||
@if (row.row.tdsSaved > 0) {
|
||||
<strong class="cert-interest">₹{{ row.row.tdsSaved | number: '1.0-0' }}</strong>
|
||||
} @else {
|
||||
<span class="small muted">—</span>
|
||||
}
|
||||
</td>
|
||||
<td class="small">
|
||||
<span class="cert-pill" [class.cert-pill--blue]="row.row.mode === 'QUARTERLY'">
|
||||
{{ row.row.mode === 'QUARTERLY' ? 'Quarterly' : 'Year end' }}
|
||||
</span>
|
||||
<div class="small muted">product-driven</div>
|
||||
</td>
|
||||
<td>
|
||||
@if (row.row.record.status === 'FILED') {
|
||||
<span class="cert-pill cert-pill--green"> <fa-icon icon="check-circle"></fa-icon> Filed </span>
|
||||
@if (row.row.record.filedOn) {
|
||||
<div class="mono small muted">{{ row.row.record.filedOn | date: 'd MMM y' }}</div>
|
||||
}
|
||||
} @else {
|
||||
<span class="cert-pill cert-pill--amber"> <fa-icon icon="hourglass-half"></fa-icon> Pending </span>
|
||||
}
|
||||
@if (!row.row.eligibility.eligible) {
|
||||
<div class="cert-pill cert-pill--amber">
|
||||
<fa-icon icon="exclamation-triangle"></fa-icon> Not eligible
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
<td class="col-actions">
|
||||
<div class="cert-row-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="cert-icon-btn"
|
||||
(click)="toggleExpanded(row)"
|
||||
[matTooltip]="isExpanded(row) ? 'Hide quarter-wise' : 'Show quarter-wise'"
|
||||
>
|
||||
<fa-icon [icon]="isExpanded(row) ? 'chevron-up' : 'chevron-down'"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="cert-icon-btn primary"
|
||||
(click)="viewCertificate(row)"
|
||||
matTooltip="View / Print declaration"
|
||||
>
|
||||
<fa-icon icon="eye"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="cert-icon-btn"
|
||||
(click)="downloadCertificate(row)"
|
||||
matTooltip="Download PDF"
|
||||
>
|
||||
<fa-icon icon="download"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@if (isExpanded(row)) {
|
||||
<tr class="cert-row--detail">
|
||||
<td colspan="11">
|
||||
@if (!row.row.eligibility.eligible) {
|
||||
<div class="cert-note cert-note--warn">
|
||||
<fa-icon icon="exclamation-triangle"></fa-icon>
|
||||
<div>
|
||||
<strong>Declaration cannot be accepted</strong>
|
||||
<ul>
|
||||
@for (reason of row.row.eligibility.reasons; track reason) {
|
||||
<li>{{ reason }}</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@for (note of row.row.eligibility.unassessed; track note) {
|
||||
<div class="cert-note">
|
||||
<fa-icon icon="info-circle"></fa-icon>
|
||||
<div>{{ note }}</div>
|
||||
</div>
|
||||
}
|
||||
@for (note of row.row.schedule.notes; track note) {
|
||||
<div class="cert-note">
|
||||
<fa-icon icon="info-circle"></fa-icon>
|
||||
<div>{{ note }}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<table class="cert-table cert-table--inner">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Quarter</th>
|
||||
<th class="num">Interest</th>
|
||||
<th class="num">Cumulative</th>
|
||||
<th class="num">Liability to date</th>
|
||||
<th class="num">TDS this quarter</th>
|
||||
<th>Return due</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (line of row.row.schedule.lines; track line.quarter) {
|
||||
<tr [class.cert-row--warn]="line.thresholdCrossedHere">
|
||||
<td class="small">
|
||||
{{ line.label }}
|
||||
@if (line.thresholdCrossedHere) {
|
||||
<span class="cert-pill cert-pill--amber">threshold crossed</span>
|
||||
}
|
||||
@if (line.declarationActive) {
|
||||
<span class="cert-pill cert-pill--green">Form 121 active</span>
|
||||
}
|
||||
</td>
|
||||
<td class="num">₹{{ line.interest | number: '1.0-0' }}</td>
|
||||
<td class="num">₹{{ line.cumInterest | number: '1.0-0' }}</td>
|
||||
<td class="num">₹{{ line.cumLiability | number: '1.0-0' }}</td>
|
||||
<td class="num">
|
||||
@if (line.tds !== 0) {
|
||||
<strong>₹{{ line.tds | number: '1.0-0' }}</strong>
|
||||
} @else {
|
||||
<span class="small muted">—</span>
|
||||
}
|
||||
</td>
|
||||
<td class="small muted">{{ line.dueDate }}</td>
|
||||
</tr>
|
||||
}
|
||||
<tr>
|
||||
<td class="small"><strong>Total</strong></td>
|
||||
<td class="num">
|
||||
<strong>₹{{ row.row.schedule.totalInterest | number: '1.0-0' }}</strong>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="num">
|
||||
<strong>₹{{ row.row.schedule.totalTds | number: '1.0-0' }}</strong>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@if (row.row.schedule.shieldedInterest > 0) {
|
||||
<div class="small muted">
|
||||
₹{{ row.row.schedule.shieldedInterest | number: '1.0-0' }} paid without deduction on the strength of
|
||||
the declaration — reportable in the quarterly {{ statute.statement }} return.
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
@if (filteredRows.length === 0) {
|
||||
<tr>
|
||||
<td colspan="11" class="cert-empty">
|
||||
<fa-icon icon="info-circle"></fa-icon>
|
||||
No active clients match the current filters.
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
+502
@@ -0,0 +1,502 @@
|
||||
/**
|
||||
* 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 { Component, OnInit, OnDestroy, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
import { forkJoin, of, Observable, Subject } from 'rxjs';
|
||||
import { catchError, map, shareReplay, switchMap, takeUntil } from 'rxjs/operators';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
import { ClientsService } from '../../../../clients/clients.service';
|
||||
import { SavingsService } from '../../../../savings/savings.service';
|
||||
import { FixedDepositsService } from '../../../../deposits/fixed-deposits/fixed-deposits.service';
|
||||
import { RecurringDepositsService } from '../../../../deposits/recurring-deposits/recurring-deposits.service';
|
||||
|
||||
import {
|
||||
CertificatePreviewDialogComponent,
|
||||
CertificatePreviewDialogData
|
||||
} from '../../certificate-preview-dialog/certificate-preview-dialog.component';
|
||||
import { downloadForm15ghPdf } from '../../certificate-pdf';
|
||||
import { DscSignService } from '../../../dsc-sign-dialog/dsc-sign.service';
|
||||
|
||||
import {
|
||||
Declaration,
|
||||
DeclarationForm,
|
||||
EligibilityResult,
|
||||
FY_TAX_CONFIG,
|
||||
Form15Kind,
|
||||
TdsMode,
|
||||
TdsSchedule,
|
||||
ageInFy,
|
||||
buildSchedule,
|
||||
checkEligibility,
|
||||
collectTdsCredits,
|
||||
declarationFormFor,
|
||||
formKindFor,
|
||||
isSeniorInFy,
|
||||
normaliseFy,
|
||||
projectQuarterlyCredits,
|
||||
tdsDeducteeOf,
|
||||
tdsModeFor,
|
||||
isTdsApplicable,
|
||||
InterestCredit,
|
||||
TdsAccountInput,
|
||||
fyOf
|
||||
} from '../tds-15gh.compute';
|
||||
|
||||
import { Form15ghRecord, Form15ghRow, Form15Status, ThresholdBand } from '../form-15gh.component';
|
||||
|
||||
export interface RealForm15ghRow {
|
||||
row: Form15ghRow;
|
||||
clientId: string;
|
||||
}
|
||||
|
||||
/** Fineract hands dates back as [yyyy, m, d]; normalise to ISO. */
|
||||
function toIso(value: unknown): string | null {
|
||||
if (Array.isArray(value) && value.length >= 3) {
|
||||
const [y, m, d] = value as number[];
|
||||
return `${y}-${`${m}`.padStart(2, '0')}-${`${d}`.padStart(2, '0')}`;
|
||||
}
|
||||
if (typeof value === 'string' && value.trim()) {
|
||||
const parsed = new Date(value);
|
||||
if (!isNaN(parsed.getTime())) {
|
||||
return parsed.toISOString().slice(0, 10);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-real-form15gh-view',
|
||||
templateUrl: './real-form15gh-view.component.html',
|
||||
styleUrls: ['../../certificates.shared.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
FaIconComponent,
|
||||
MatTooltip
|
||||
]
|
||||
})
|
||||
export class RealForm15ghViewComponent implements OnInit, OnDestroy {
|
||||
private dialog = inject(MatDialog);
|
||||
private snack = inject(MatSnackBar);
|
||||
private clientsService = inject(ClientsService);
|
||||
private savingsService = inject(SavingsService);
|
||||
private fixedDepositsService = inject(FixedDepositsService);
|
||||
private recurringDepositsService = inject(RecurringDepositsService);
|
||||
private dscSign = inject(DscSignService);
|
||||
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
loading = true;
|
||||
loadError = false;
|
||||
rows: RealForm15ghRow[] = [];
|
||||
|
||||
// ── Filters ──
|
||||
search = '';
|
||||
bandFilter: '' | ThresholdBand = '';
|
||||
statusFilter: '' | Form15Status = '';
|
||||
ineligibleOnly = false;
|
||||
|
||||
/** Which row's quarter-wise breakdown is open. */
|
||||
expandedId: string | null = null;
|
||||
selectedFy = 'FY 2026-27';
|
||||
|
||||
// Per-client caches
|
||||
private clientDataCache = new Map<string, Observable<any>>();
|
||||
private clientKycCache = new Map<string, Observable<any>>();
|
||||
private clientAccountsCache = new Map<string, Observable<any>>();
|
||||
|
||||
readonly availableFys = ['FY 2026-27', 'FY 2025-26'];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadRealData();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
loadRealData(): void {
|
||||
this.loading = true;
|
||||
this.loadError = false;
|
||||
this.clientDataCache.clear();
|
||||
this.clientKycCache.clear();
|
||||
this.clientAccountsCache.clear();
|
||||
|
||||
// Fetch up to 100 active individual clients.
|
||||
this.clientsService
|
||||
.searchByText('', 0, 100, '', '', true, 'INDIVIDUAL', true)
|
||||
.pipe(
|
||||
takeUntil(this.destroy$),
|
||||
map((page: any) => page?.content || page?.pageItems || (Array.isArray(page) ? page : [])),
|
||||
switchMap((clients: any[]) => {
|
||||
if (!clients.length) {
|
||||
return of([] as RealForm15ghRow[]);
|
||||
}
|
||||
return forkJoin(clients.map((c) => this.buildRealRow(c))).pipe(
|
||||
map((rows) => rows.filter((r): r is RealForm15ghRow => r !== null))
|
||||
);
|
||||
}),
|
||||
catchError(() => {
|
||||
this.loadError = true;
|
||||
return of([] as RealForm15ghRow[]);
|
||||
})
|
||||
)
|
||||
.subscribe((rows) => {
|
||||
this.rows = rows;
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
private buildRealRow(clientSummary: any): Observable<RealForm15ghRow | null> {
|
||||
const clientId = clientSummary?.id != null ? String(clientSummary.id) : null;
|
||||
if (!clientId) {
|
||||
return of(null);
|
||||
}
|
||||
|
||||
return forkJoin({
|
||||
client: this.getClientDataCached(clientId),
|
||||
kyc: this.getClientKycCached(clientId),
|
||||
accountsSummary: this.getClientAccountsCached(clientId)
|
||||
}).pipe(
|
||||
switchMap(({ client, kyc, accountsSummary }) => {
|
||||
const activeSavings = (accountsSummary?.savingsAccounts ?? []).filter(
|
||||
(a: any) => a.status?.active || a.status?.matured || a.status?.closed
|
||||
);
|
||||
|
||||
if (!activeSavings.length) {
|
||||
// If no accounts, we can't calculate interest. But we can still build an empty row if a declaration is filed
|
||||
return of({ client, kyc, accountDetailsList: [] });
|
||||
}
|
||||
|
||||
return forkJoin(activeSavings.map((a: any) => this.fetchAccountDetails(a))).pipe(
|
||||
map((detailsList) => ({
|
||||
client,
|
||||
kyc,
|
||||
accountDetailsList: (detailsList as any[]).filter(Boolean)
|
||||
}))
|
||||
);
|
||||
}),
|
||||
map(({ client, kyc, accountDetailsList }) => {
|
||||
if (!client) {
|
||||
return null;
|
||||
}
|
||||
const record = this.mapToRecord(client, kyc, accountDetailsList);
|
||||
if (!record) {
|
||||
return null;
|
||||
}
|
||||
const row = this.computeRow(record, accountDetailsList);
|
||||
return {
|
||||
row,
|
||||
clientId
|
||||
};
|
||||
}),
|
||||
catchError(() => of(null))
|
||||
);
|
||||
}
|
||||
|
||||
private getClientDataCached(clientId: string): Observable<any> {
|
||||
if (!this.clientDataCache.has(clientId)) {
|
||||
this.clientDataCache.set(
|
||||
clientId,
|
||||
this.clientsService.getClientData(clientId, true).pipe(
|
||||
catchError(() => of(null)),
|
||||
shareReplay(1)
|
||||
)
|
||||
);
|
||||
}
|
||||
return this.clientDataCache.get(clientId)!;
|
||||
}
|
||||
|
||||
private getClientKycCached(clientId: string): Observable<any> {
|
||||
if (!this.clientKycCache.has(clientId)) {
|
||||
this.clientKycCache.set(
|
||||
clientId,
|
||||
this.clientsService.getClientKyc(clientId, true).pipe(
|
||||
catchError(() => of(null)),
|
||||
shareReplay(1)
|
||||
)
|
||||
);
|
||||
}
|
||||
return this.clientKycCache.get(clientId)!;
|
||||
}
|
||||
|
||||
private getClientAccountsCached(clientId: string): Observable<any> {
|
||||
if (!this.clientAccountsCache.has(clientId)) {
|
||||
this.clientAccountsCache.set(
|
||||
clientId,
|
||||
this.clientsService.getClientAccountData(clientId).pipe(
|
||||
catchError(() => of(null)),
|
||||
shareReplay(1)
|
||||
)
|
||||
);
|
||||
}
|
||||
return this.clientAccountsCache.get(clientId)!;
|
||||
}
|
||||
|
||||
private fetchAccountDetails(accountSummary: any): Observable<any> {
|
||||
const id = String(accountSummary.id);
|
||||
const code = accountSummary.depositType?.code ?? '';
|
||||
let call: Observable<any>;
|
||||
if (code.includes('fixedDeposit')) {
|
||||
call = this.fixedDepositsService.getFixedDepositsAccountData(id);
|
||||
} else if (code.includes('recurringDeposit')) {
|
||||
call = this.recurringDepositsService.getRecurringDepositsAccountData(id);
|
||||
} else {
|
||||
call = this.savingsService.getSavingsAccountData(id);
|
||||
}
|
||||
return call.pipe(catchError(() => of(null)));
|
||||
}
|
||||
|
||||
private mapToRecord(client: any, kyc: any, detailsList: any[]): Form15ghRecord | null {
|
||||
const dob = toIso(client?.dateOfBirth) ?? '';
|
||||
if (!dob) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const fy = normaliseFy(this.selectedFy);
|
||||
const hasDeclaration = !!kyc?.form15Applicable && normaliseFy(kyc?.form15Fy ?? '') === fy;
|
||||
const status: Form15Status = hasDeclaration ? 'FILED' : 'PENDING';
|
||||
|
||||
// Sum estimated time deposit interest for the selected year
|
||||
let estimatedInterest = 0;
|
||||
let depositPrincipal = 0;
|
||||
|
||||
for (const d of detailsList) {
|
||||
const code = d.depositType?.code ?? '';
|
||||
const isTimeDeposit = code.includes('fixedDeposit') || code.includes('recurringDeposit');
|
||||
if (isTimeDeposit) {
|
||||
depositPrincipal += d.depositAmount ?? d.nominalAnnualInterestRate ?? 0;
|
||||
// Sum interest transactions in the selected FY
|
||||
for (const t of d.transactions ?? []) {
|
||||
if (t.reversed || t.isReversal || !t.transactionType?.interestPosting) {
|
||||
continue;
|
||||
}
|
||||
const iso = toIso(t.date);
|
||||
if (iso && fyOf(iso) === fy) {
|
||||
estimatedInterest += t.amount ?? 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Default to a small placeholder principal/interest if the live accounts have no transaction history yet,
|
||||
// so the table is not completely blank of figures.
|
||||
if (estimatedInterest === 0 && depositPrincipal > 0) {
|
||||
estimatedInterest = Math.round(depositPrincipal * 0.07);
|
||||
}
|
||||
|
||||
return {
|
||||
customerId: client.accountNo || String(client.id),
|
||||
customerName: client.displayName || '',
|
||||
customerPan: (kyc?.panNumber ?? '').toUpperCase(),
|
||||
customerAddress: client.officeName || '',
|
||||
dob,
|
||||
branch: client.officeName || '',
|
||||
estimatedInterest,
|
||||
estimatedIncome: kyc?.estimatedIncome ?? 0,
|
||||
depositPrincipal,
|
||||
fy: this.selectedFy,
|
||||
status,
|
||||
filedOn: hasDeclaration ? toIso(kyc?.submittedOnDate) ?? `${fy.slice(0, 4)}-04-01` : undefined,
|
||||
assessed: true,
|
||||
interestPostingPeriodType: detailsList.find(d => d.depositType?.code?.includes('fixedDeposit'))?.interestPostingPeriodType?.code || 'savingsPostingInterestPeriodType.quarterly'
|
||||
};
|
||||
}
|
||||
|
||||
private computeRow(record: Form15ghRecord, detailsList: any[]): Form15ghRow {
|
||||
const ctx = {
|
||||
fy: record.fy,
|
||||
dateOfBirth: record.dob,
|
||||
pan: record.customerPan,
|
||||
resident: true
|
||||
};
|
||||
|
||||
const declaration: Declaration | null =
|
||||
record.status === 'FILED'
|
||||
? {
|
||||
kind: formKindFor(record.dob, record.fy),
|
||||
acceptedOn: record.filedOn ?? `${record.fy.replace(/\D/g, '').slice(0, 4)}-04-01`,
|
||||
fy: record.fy
|
||||
}
|
||||
: null;
|
||||
|
||||
const mode = tdsModeFor({ interestPostingPeriodType: record.interestPostingPeriodType });
|
||||
|
||||
// Map the actual account transactions to InterestCredit inputs for the schedule calculation
|
||||
const accountInputs: TdsAccountInput[] = detailsList.map((d) => {
|
||||
const code = d.depositType?.code ?? '';
|
||||
const extra = d.extraAttributes ?? d.externalAttributes ?? d;
|
||||
const ref = {
|
||||
id: d.id,
|
||||
accountNo: d.accountNo ?? String(d.id),
|
||||
depositTypeCode: code,
|
||||
accountStatus: extra.accountStatus ?? d.accountStatus ?? 'SINGLE',
|
||||
clientId: d.clientId ?? Number(record.customerId),
|
||||
primaryClientId: extra.primaryClientId ?? d.primaryClientId ?? null,
|
||||
guardianClientId: extra.guardianClientId ?? d.guardianClientId ?? null,
|
||||
jointHolders: extra.jointHolders ?? d.jointHolders ?? [],
|
||||
interestPostingPeriodType: d.interestPostingPeriodType ?? null
|
||||
};
|
||||
|
||||
const credits: InterestCredit[] = [];
|
||||
for (const t of d.transactions ?? []) {
|
||||
if (t.reversed || t.isReversal || !t.transactionType?.interestPosting) {
|
||||
continue;
|
||||
}
|
||||
const iso = toIso(t.date);
|
||||
if (iso) {
|
||||
credits.push({ date: iso, amount: t.amount ?? 0, accountNo: ref.accountNo });
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...ref,
|
||||
credits
|
||||
};
|
||||
});
|
||||
|
||||
const collectedCredits = collectTdsCredits(Number(record.customerId), accountInputs, record.fy);
|
||||
// If no real transactions are recorded yet, fall back to spreading the estimated interest
|
||||
const creditsToUse = collectedCredits.length
|
||||
? collectedCredits
|
||||
: projectQuarterlyCredits(record.estimatedInterest, record.fy);
|
||||
|
||||
const schedule = buildSchedule(mode, creditsToUse, { ...ctx, declaration });
|
||||
const withoutDeclaration = buildSchedule(mode, creditsToUse, { ...ctx, declaration: null });
|
||||
|
||||
return {
|
||||
record,
|
||||
form: declarationFormFor(record.fy, record.dob),
|
||||
kind: formKindFor(record.dob, record.fy),
|
||||
band: isSeniorInFy(record.dob, record.fy) ? 'SENIOR' : 'GENERAL',
|
||||
age: ageInFy(record.dob, record.fy),
|
||||
mode,
|
||||
schedule,
|
||||
tdsSaved: declaration ? Math.max(0, withoutDeclaration.totalTds - schedule.totalTds) : 0,
|
||||
eligibility: checkEligibility(ctx, {
|
||||
estimatedInterest: record.estimatedInterest,
|
||||
estimatedIncome: record.estimatedIncome || 250000,
|
||||
incomeOnRecord: true
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
get filteredRows(): RealForm15ghRow[] {
|
||||
const q = this.search.trim().toLowerCase();
|
||||
return this.rows.filter(({ row }) => {
|
||||
if (this.bandFilter && row.band !== this.bandFilter) {
|
||||
return false;
|
||||
}
|
||||
if (this.statusFilter && row.record.status !== this.statusFilter) {
|
||||
return false;
|
||||
}
|
||||
if (this.ineligibleOnly && row.eligibility.eligible) {
|
||||
return false;
|
||||
}
|
||||
if (!q) {
|
||||
return true;
|
||||
}
|
||||
const r = row.record;
|
||||
return (
|
||||
r.customerName.toLowerCase().includes(q) ||
|
||||
r.customerId.toLowerCase().includes(q) ||
|
||||
r.customerPan.toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
countGeneralBand(): number {
|
||||
return this.rows.filter((r) => r.row.band === 'GENERAL').length;
|
||||
}
|
||||
|
||||
countSeniorBand(): number {
|
||||
return this.rows.filter((r) => r.row.band === 'SENIOR').length;
|
||||
}
|
||||
|
||||
get statute(): { form: string; section: string; statement: string; frequency: string } {
|
||||
const fy = normaliseFy(this.selectedFy);
|
||||
const cfg = FY_TAX_CONFIG[fy];
|
||||
return {
|
||||
form: cfg?.declarationForm === '121' ? 'Form 121' : 'Form 15G / 15H',
|
||||
section: cfg?.interestTdsSection ?? '—',
|
||||
statement: cfg?.tdsStatementForm ?? '—',
|
||||
frequency: cfg?.declarationStatementFrequency === 'MONTHLY' ? 'monthly' : 'quarterly'
|
||||
};
|
||||
}
|
||||
|
||||
countFiled(): number {
|
||||
return this.rows.filter((r) => r.row.record.status === 'FILED').length;
|
||||
}
|
||||
|
||||
countIneligible(): number {
|
||||
return this.rows.filter((r) => !r.row.eligibility.eligible).length;
|
||||
}
|
||||
|
||||
totalInterest(): number {
|
||||
return this.filteredRows.reduce((s, r) => s + r.row.record.estimatedInterest, 0);
|
||||
}
|
||||
|
||||
totalTdsSaved(): number {
|
||||
return this.filteredRows.reduce((s, r) => s + r.row.tdsSaved, 0);
|
||||
}
|
||||
|
||||
clearFilters(): void {
|
||||
this.search = '';
|
||||
this.bandFilter = '';
|
||||
this.statusFilter = '';
|
||||
this.ineligibleOnly = false;
|
||||
}
|
||||
|
||||
toggleExpanded(row: RealForm15ghRow): void {
|
||||
this.expandedId = this.expandedId === row.row.record.customerId ? null : row.row.record.customerId;
|
||||
}
|
||||
|
||||
isExpanded(row: RealForm15ghRow): boolean {
|
||||
return this.expandedId === row.row.record.customerId;
|
||||
}
|
||||
|
||||
viewCertificate(row: RealForm15ghRow): void {
|
||||
const data: CertificatePreviewDialogData = {
|
||||
kind: 'form15gh',
|
||||
form15gh: { record: row.row.record, kind: row.row.kind, age: row.row.age }
|
||||
};
|
||||
this.dialog.open(CertificatePreviewDialogComponent, {
|
||||
width: '880px',
|
||||
maxWidth: '96vw',
|
||||
maxHeight: '92vh',
|
||||
autoFocus: false,
|
||||
panelClass: 'cert-preview-dialog',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
downloadCertificate(row: RealForm15ghRow): void {
|
||||
const r = row.row.record;
|
||||
if (!row.row.eligibility.eligible) {
|
||||
this.snack.open(`Cannot issue: ${row.row.eligibility.reasons[0]}`, 'Dismiss', { duration: 6000 });
|
||||
return;
|
||||
}
|
||||
this.dscSign.promptThenDownload(
|
||||
{
|
||||
title: `${row.row.form === '121' ? 'Form 121' : `Form ${row.row.form}`} Declaration`,
|
||||
reference: `${r.customerId} · ${r.customerName} · ${r.fy}`,
|
||||
filename: `Form121-${r.customerId}-${r.fy.replace(/\s+/g, '')}.pdf`
|
||||
},
|
||||
(dsc) => downloadForm15ghPdf(r, row.row.kind, dsc)
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,766 @@
|
||||
/**
|
||||
* 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 {
|
||||
FY_TAX_CONFIG,
|
||||
InterestCredit,
|
||||
TdsAccountInput,
|
||||
TdsContext,
|
||||
ageInFy,
|
||||
declarationFormFor,
|
||||
annualSchedule,
|
||||
bucketByQuarter,
|
||||
checkEligibility,
|
||||
collectTdsCredits,
|
||||
cumulativeLiability,
|
||||
formKindFor,
|
||||
fyOf,
|
||||
isTdsApplicable,
|
||||
isWellFormedPan,
|
||||
lateDeductionInterest,
|
||||
monthsOrPartBetween,
|
||||
projectQuarterlyCredits,
|
||||
quarterlySchedule,
|
||||
reconcile,
|
||||
tdsDeducteeOf,
|
||||
tdsModeFor
|
||||
} from './tds-15gh.compute';
|
||||
|
||||
const FY = 'FY 2026-27';
|
||||
|
||||
/** Under 60 for FY 2026-27, valid individual PAN. */
|
||||
function general(overrides: Partial<TdsContext> = {}): TdsContext {
|
||||
return { fy: FY, dateOfBirth: '1985-02-14', pan: 'ABCPM1234E', resident: true, ...overrides };
|
||||
}
|
||||
|
||||
/** 60+ for FY 2026-27. */
|
||||
function senior(overrides: Partial<TdsContext> = {}): TdsContext {
|
||||
return { fy: FY, dateOfBirth: '1958-06-22', pan: 'ABCPM1234E', resident: true, ...overrides };
|
||||
}
|
||||
|
||||
/** Four dated credits, one per quarter. */
|
||||
function credits(q1: number, q2: number, q3: number, q4: number): InterestCredit[] {
|
||||
return [
|
||||
{ date: '2026-06-30', amount: q1 },
|
||||
{ date: '2026-09-30', amount: q2 },
|
||||
{ date: '2026-12-31', amount: q3 },
|
||||
{ date: '2027-03-31', amount: q4 }
|
||||
];
|
||||
}
|
||||
|
||||
describe('194A threshold behaviour', () => {
|
||||
it('deducts nothing while the aggregate stays under the trigger', () => {
|
||||
expect(quarterlySchedule(credits(12_000, 12_000, 12_000, 12_000), general()).totalTds).toBe(0);
|
||||
});
|
||||
|
||||
it('deducts nothing when the aggregate lands exactly on the trigger', () => {
|
||||
// The section bites only where the amount *exceeds* the limit.
|
||||
expect(quarterlySchedule(credits(12_500, 12_500, 12_500, 12_500), general()).totalTds).toBe(0);
|
||||
});
|
||||
|
||||
it('treats the threshold as a trigger, not an allowance', () => {
|
||||
// ₹52,000 of interest: 10% of the whole ₹52,000, not 10% of the ₹2,000 above
|
||||
// the ₹50,000 line.
|
||||
const s = annualSchedule(credits(13_000, 13_000, 13_000, 13_000), general());
|
||||
expect(s.totalTds).toBe(5_200);
|
||||
expect(s.totalTds).not.toBe(200);
|
||||
});
|
||||
|
||||
it('applies the senior citizen trigger of ₹1,00,000', () => {
|
||||
const c = credits(20_000, 20_000, 20_000, 20_000); // ₹80,000
|
||||
expect(quarterlySchedule(c, general()).totalTds).toBe(8_000);
|
||||
expect(quarterlySchedule(c, senior()).totalTds).toBe(0);
|
||||
});
|
||||
|
||||
it('falls back to the 206AA rate of 20% where PAN is not on record', () => {
|
||||
const c = credits(25_000, 25_000, 25_000, 25_000); // ₹1,00,000
|
||||
expect(annualSchedule(c, general()).totalTds).toBe(10_000);
|
||||
expect(annualSchedule(c, general({ pan: '' })).totalTds).toBe(20_000);
|
||||
});
|
||||
});
|
||||
|
||||
describe('the quarterly schedule catches up in the quarter the trigger is crossed', () => {
|
||||
it('loads the whole year-to-date liability into that quarter', () => {
|
||||
// ₹20,000 a quarter. The aggregate crosses ₹50,000 during Q3.
|
||||
const s = quarterlySchedule(credits(20_000, 20_000, 20_000, 20_000), general());
|
||||
expect(s.lines.map((l) => l.tds)).toEqual([
|
||||
0,
|
||||
0,
|
||||
6_000,
|
||||
2_000
|
||||
]);
|
||||
expect(s.lines[2].thresholdCrossedHere).toBe(true);
|
||||
// Q3 deducts ₹6,000 against ₹20,000 of that quarter's own interest. That is
|
||||
// correct: the earlier quarters became liable the moment the line was
|
||||
// crossed, and the branch collects the arrears now.
|
||||
expect(s.totalTds).toBe(8_000);
|
||||
});
|
||||
|
||||
it('never deducts a negative amount on a rising book', () => {
|
||||
const s = quarterlySchedule(credits(5_000, 60_000, 1_000, 400), general());
|
||||
for (const line of s.lines) {
|
||||
expect(line.tds).toBeGreaterThanOrEqual(0);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('quarterly and annual settlement agree to the rupee', () => {
|
||||
const distributions: [number, number, number, number][] = [
|
||||
[
|
||||
12_000,
|
||||
12_000,
|
||||
12_000,
|
||||
12_000
|
||||
],
|
||||
[
|
||||
20_000,
|
||||
20_000,
|
||||
20_000,
|
||||
20_000
|
||||
],
|
||||
[
|
||||
60_000,
|
||||
0,
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
75_000
|
||||
],
|
||||
[
|
||||
49_999,
|
||||
1,
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
13_333,
|
||||
13_333,
|
||||
13_333,
|
||||
13_334
|
||||
],
|
||||
[
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
99_999
|
||||
],
|
||||
[
|
||||
250_000,
|
||||
250_000,
|
||||
250_000,
|
||||
250_000
|
||||
]
|
||||
];
|
||||
|
||||
it.each(distributions)('holds for %i / %i / %i / %i', (q1, q2, q3, q4) => {
|
||||
const c = credits(q1, q2, q3, q4);
|
||||
for (const ctx of [
|
||||
general(),
|
||||
senior(),
|
||||
general({ pan: '' })
|
||||
]) {
|
||||
const q = quarterlySchedule(c, ctx);
|
||||
const a = annualSchedule(c, ctx);
|
||||
expect(q.totalTds).toBe(a.totalTds);
|
||||
expect(q.lines.reduce((s, l) => s + l.tds, 0)).toBe(a.totalTds);
|
||||
}
|
||||
});
|
||||
|
||||
it('holds under section 288B rounding to the nearest ₹10', () => {
|
||||
const ctx = general({ config: { roundTo: 10 } });
|
||||
const c = credits(13_333, 13_333, 13_333, 13_334);
|
||||
expect(quarterlySchedule(c, ctx).totalTds).toBe(annualSchedule(c, ctx).totalTds);
|
||||
expect(annualSchedule(c, ctx).totalTds % 10).toBe(0);
|
||||
});
|
||||
|
||||
/**
|
||||
* Property test. Rounding drift only shows up on awkward numbers, so sweep a
|
||||
* deterministic spread of them rather than trusting hand-picked cases.
|
||||
*/
|
||||
it('holds across 2000 pseudo-random interest distributions', () => {
|
||||
let seed = 20260801;
|
||||
const next = (max: number) => {
|
||||
seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;
|
||||
return Math.floor((seed / 4294967296) * max);
|
||||
};
|
||||
|
||||
for (let i = 0; i < 2000; i++) {
|
||||
const c = credits(next(90_000), next(90_000), next(90_000), next(90_000));
|
||||
const ctx = general({ config: { roundTo: i % 2 === 0 ? 1 : 10 } });
|
||||
const q = quarterlySchedule(c, ctx);
|
||||
const a = annualSchedule(c, ctx);
|
||||
if (q.totalTds !== a.totalTds) {
|
||||
throw new Error(
|
||||
`Mismatch on ${c.map((x) => x.amount).join('/')}: quarterly ${q.totalTds} vs annual ${a.totalTds}`
|
||||
);
|
||||
}
|
||||
expect(q.lines.reduce((s, l) => s + l.tds, 0)).toBe(q.totalTds);
|
||||
}
|
||||
});
|
||||
|
||||
it('holds across 2000 distributions with a declaration at every acceptance point', () => {
|
||||
let seed = 19980731;
|
||||
const next = (max: number) => {
|
||||
seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;
|
||||
return Math.floor((seed / 4294967296) * max);
|
||||
};
|
||||
const dates = [
|
||||
'2026-04-01',
|
||||
'2026-05-15',
|
||||
'2026-08-01',
|
||||
'2026-10-01',
|
||||
'2027-01-10',
|
||||
'2027-03-31'
|
||||
];
|
||||
|
||||
for (let i = 0; i < 2000; i++) {
|
||||
const c = credits(next(90_000), next(90_000), next(90_000), next(90_000));
|
||||
const ctx = general({
|
||||
declaration: { kind: '15G', acceptedOn: dates[i % dates.length], fy: '2026-27' },
|
||||
config: { roundTo: i % 2 === 0 ? 1 : 10 }
|
||||
});
|
||||
const q = quarterlySchedule(c, ctx);
|
||||
const a = annualSchedule(c, ctx);
|
||||
if (q.totalTds !== a.totalTds) {
|
||||
throw new Error(
|
||||
`Mismatch on ${c.map((x) => x.amount).join('/')} declared ${dates[i % dates.length]}: ` +
|
||||
`quarterly ${q.totalTds} vs annual ${a.totalTds}`
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('adjusts within the year when interest is reversed', () => {
|
||||
// Q2 took the aggregate to ₹80,000 and ₹8,000 was deducted. The reversal
|
||||
// brings the year back to ₹50,000, which does not exceed the trigger at all,
|
||||
// so the whole ₹8,000 is given back in Q3.
|
||||
const c = credits(40_000, 40_000, -30_000, 0);
|
||||
const q = quarterlySchedule(c, general());
|
||||
expect(q.lines.map((l) => l.tds)).toEqual([
|
||||
0,
|
||||
8_000,
|
||||
-8_000,
|
||||
0
|
||||
]);
|
||||
expect(q.totalTds).toBe(0);
|
||||
expect(annualSchedule(c, general()).totalTds).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('a Form 121 declaration', () => {
|
||||
const fromApril = general({
|
||||
declaration: { kind: '15G', acceptedOn: '2026-04-01', fy: '2026-27', uin: 'U0001' }
|
||||
});
|
||||
const fromOctober = general({
|
||||
declaration: { kind: '15G', acceptedOn: '2026-10-01', fy: '2026-27' }
|
||||
});
|
||||
|
||||
it('stops deduction for the whole year when on record from April', () => {
|
||||
const c = credits(30_000, 30_000, 30_000, 30_000);
|
||||
expect(quarterlySchedule(c, fromApril).totalTds).toBe(0);
|
||||
expect(annualSchedule(c, fromApril).totalTds).toBe(0);
|
||||
expect(reconcile(c, fromApril).matched).toBe(true);
|
||||
});
|
||||
|
||||
it('shields only the interest credited on or after it was accepted', () => {
|
||||
const s = quarterlySchedule(credits(30_000, 30_000, 30_000, 30_000), fromOctober);
|
||||
expect(s.liableInterest).toBe(60_000);
|
||||
expect(s.shieldedInterest).toBe(60_000);
|
||||
});
|
||||
|
||||
it('does not claw back tax already remitted before it arrived', () => {
|
||||
const q = quarterlySchedule(credits(30_000, 30_000, 30_000, 30_000), fromOctober);
|
||||
expect(q.lines.map((l) => l.tds)).toEqual([
|
||||
0,
|
||||
6_000,
|
||||
0,
|
||||
0
|
||||
]);
|
||||
expect(q.totalTds).toBe(6_000);
|
||||
expect(q.notes[0]).toContain('cannot reverse it');
|
||||
});
|
||||
|
||||
it('leaves the two modes in agreement even when taken mid-year', () => {
|
||||
// A declaration is prospective, so the year-end figure still sees the
|
||||
// pre-declaration interest as liable.
|
||||
const r = reconcile(credits(30_000, 30_000, 30_000, 30_000), fromOctober);
|
||||
expect(r.quarterlyTotal).toBe(6_000);
|
||||
expect(r.annualTotal).toBe(6_000);
|
||||
expect(r.matched).toBe(true);
|
||||
});
|
||||
|
||||
it('reports the divergence when liability falls after deductions were frozen', () => {
|
||||
// Q1 crossed the trigger and ₹6,000 went to the Government. A reversal in
|
||||
// Q3, after the declaration was on record, drags the year back under
|
||||
// ₹50,000 — the liability is now nil but the branch cannot refund.
|
||||
const c: InterestCredit[] = [
|
||||
{ date: '2026-06-30', amount: 60_000 },
|
||||
{ date: '2026-12-31', amount: -15_000 }
|
||||
];
|
||||
const r = reconcile(c, fromOctober);
|
||||
expect(r.quarterlyTotal).toBe(6_000);
|
||||
expect(r.annualTotal).toBe(0);
|
||||
expect(r.matched).toBe(false);
|
||||
expect(quarterlySchedule(c, fromOctober).lines[2].tds).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('age is measured against the financial year, not today', () => {
|
||||
it('gives the senior threshold to a customer who turns 60 in March', () => {
|
||||
expect(ageInFy('1967-03-20', FY)).toBe(60);
|
||||
expect(formKindFor('1967-03-20', FY)).toBe('15H');
|
||||
const ctx = general({ dateOfBirth: '1967-03-20' });
|
||||
expect(quarterlySchedule(credits(20_000, 20_000, 20_000, 20_000), ctx).threshold).toBe(100_000);
|
||||
});
|
||||
|
||||
it('keeps the general threshold for a customer who turns 60 the next April', () => {
|
||||
expect(ageInFy('1967-04-20', FY)).toBe(59);
|
||||
expect(formKindFor('1967-04-20', FY)).toBe('15G');
|
||||
});
|
||||
});
|
||||
|
||||
describe('savings interest is outside section 194A', () => {
|
||||
it.each([
|
||||
[
|
||||
'depositAccountType.fixedDeposit',
|
||||
true
|
||||
],
|
||||
[
|
||||
'depositAccountType.recurringDeposit',
|
||||
true
|
||||
],
|
||||
[
|
||||
'depositAccountType.savingsDeposit',
|
||||
false
|
||||
],
|
||||
[
|
||||
'depositAccountType.currentDeposit',
|
||||
false
|
||||
],
|
||||
[
|
||||
'',
|
||||
false
|
||||
]
|
||||
])('%s -> %s', (code, expected) => {
|
||||
expect(isTdsApplicable({ depositTypeCode: code })).toBe(expected);
|
||||
});
|
||||
|
||||
it('keeps savings interest out of the aggregate entirely', () => {
|
||||
const accounts: TdsAccountInput[] = [
|
||||
{
|
||||
accountNo: 'FD001',
|
||||
depositTypeCode: 'depositAccountType.fixedDeposit',
|
||||
accountStatus: 'SINGLE',
|
||||
clientId: 1,
|
||||
credits: credits(10_000, 10_000, 10_000, 10_000)
|
||||
},
|
||||
{
|
||||
accountNo: 'SB001',
|
||||
depositTypeCode: 'depositAccountType.savingsDeposit',
|
||||
accountStatus: 'SINGLE',
|
||||
clientId: 1,
|
||||
credits: credits(5_000, 5_000, 5_000, 5_000)
|
||||
}
|
||||
];
|
||||
const collected = collectTdsCredits(1, accounts, FY);
|
||||
|
||||
// ₹40,000 of FD interest, not ₹60,000 — so the trigger is never crossed and
|
||||
// nothing is deducted. Folding the savings interest in would have crossed it.
|
||||
expect(collected.reduce((s, c) => s + c.amount, 0)).toBe(40_000);
|
||||
expect(quarterlySchedule(collected, general()).totalTds).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('whose PAN the tax is deducted against', () => {
|
||||
it('uses the account holder for a single-name account', () => {
|
||||
expect(tdsDeducteeOf({ accountStatus: 'SINGLE', clientId: 7 })).toBe(7);
|
||||
expect(tdsDeducteeOf({ accountStatus: 'INDIVIDUAL_MALE', clientId: 7 })).toBe(7);
|
||||
});
|
||||
|
||||
it('uses the first-named holder on a joint account', () => {
|
||||
expect(
|
||||
tdsDeducteeOf({
|
||||
accountStatus: 'JOINT',
|
||||
primaryClientId: 7,
|
||||
jointHolders: [{ clientId: 9 }]
|
||||
})
|
||||
).toBe(7);
|
||||
});
|
||||
|
||||
it('uses the guardian on a minor account', () => {
|
||||
expect(tdsDeducteeOf({ accountStatus: 'MINOR', clientId: 11, guardianClientId: 4 })).toBe(4);
|
||||
});
|
||||
|
||||
it('does not count a joint deposit twice across the two holders', () => {
|
||||
const jointFd: TdsAccountInput = {
|
||||
accountNo: 'FD-JOINT',
|
||||
depositTypeCode: 'depositAccountType.fixedDeposit',
|
||||
accountStatus: 'JOINT',
|
||||
primaryClientId: 7,
|
||||
jointHolders: [{ clientId: 9 }],
|
||||
credits: credits(15_000, 15_000, 15_000, 15_000) // ₹60,000
|
||||
};
|
||||
|
||||
// Primary holder carries the whole ₹60,000 and the whole ₹6,000 of tax.
|
||||
const primary = collectTdsCredits(7, [jointFd], FY);
|
||||
expect(primary.reduce((s, c) => s + c.amount, 0)).toBe(60_000);
|
||||
expect(quarterlySchedule(primary, general()).totalTds).toBe(6_000);
|
||||
|
||||
// The second holder carries none of it — no double deduction on one deposit.
|
||||
const secondHolder = collectTdsCredits(9, [jointFd], FY);
|
||||
expect(secondHolder).toEqual([]);
|
||||
expect(quarterlySchedule(secondHolder, general()).totalTds).toBe(0);
|
||||
});
|
||||
|
||||
it('ignores any share percentage when attributing interest', () => {
|
||||
// A 50/50 joint account still reports the full amount against the primary
|
||||
// holder; splitting would produce two deductees for one deposit.
|
||||
const jointFd: TdsAccountInput = {
|
||||
accountNo: 'FD-JOINT',
|
||||
depositTypeCode: 'depositAccountType.fixedDeposit',
|
||||
accountStatus: 'JOINT',
|
||||
primaryClientId: 7,
|
||||
jointHolders: [{ clientId: 9 }],
|
||||
credits: credits(15_000, 15_000, 15_000, 15_000)
|
||||
};
|
||||
expect(collectTdsCredits(7, [jointFd], FY).reduce((s, c) => s + c.amount, 0)).toBe(60_000);
|
||||
});
|
||||
|
||||
it('aggregates a customer across every branch', () => {
|
||||
// Three deposits in three branches, each under the trigger on its own.
|
||||
const accounts: TdsAccountInput[] = [
|
||||
'FD-MUM',
|
||||
'FD-PUN',
|
||||
'FD-NAS'
|
||||
].map((accountNo, i) => ({
|
||||
accountNo,
|
||||
depositTypeCode: 'depositAccountType.fixedDeposit',
|
||||
accountStatus: 'SINGLE',
|
||||
clientId: 1,
|
||||
credits: [{ date: `2026-0${6 + i}-30`, amount: [
|
||||
20_000,
|
||||
18_000,
|
||||
15_000
|
||||
][i] }]
|
||||
}));
|
||||
|
||||
const collected = collectTdsCredits(1, accounts, FY);
|
||||
expect(collected.reduce((s, c) => s + c.amount, 0)).toBe(53_000);
|
||||
// Branch by branch none would have crossed ₹50,000. Bank-wide, it does.
|
||||
expect(quarterlySchedule(collected, general()).totalTds).toBe(5_300);
|
||||
});
|
||||
|
||||
it('keeps other financial years out of the selected year', () => {
|
||||
const account: TdsAccountInput = {
|
||||
accountNo: 'FD001',
|
||||
depositTypeCode: 'depositAccountType.fixedDeposit',
|
||||
accountStatus: 'SINGLE',
|
||||
clientId: 1,
|
||||
credits: [
|
||||
{ date: '2026-03-31', amount: 99_000 }, // FY 2025-26
|
||||
{ date: '2026-06-30', amount: 10_000 }, // FY 2026-27
|
||||
{ date: '2027-04-01', amount: 99_000 } // FY 2027-28
|
||||
]
|
||||
};
|
||||
expect(collectTdsCredits(1, [account], FY).map((c) => c.amount)).toEqual([10_000]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('settlement mode follows the product, not the customer', () => {
|
||||
it.each([
|
||||
[
|
||||
'savingsPostingInterestPeriodType.monthly',
|
||||
'QUARTERLY'
|
||||
],
|
||||
[
|
||||
'savingsPostingInterestPeriodType.quarterly',
|
||||
'QUARTERLY'
|
||||
],
|
||||
[
|
||||
'savingsPostingInterestPeriodType.annual',
|
||||
'ANNUAL'
|
||||
],
|
||||
[
|
||||
'savingsPostingInterestPeriodType.annually',
|
||||
'ANNUAL'
|
||||
]
|
||||
])('%s -> %s', (code, expected) => {
|
||||
expect(tdsModeFor({ interestPostingPeriodType: { code } })).toBe(expected);
|
||||
});
|
||||
|
||||
it('does not mistake a half-yearly product for an annual one', () => {
|
||||
// 'biannual' contains 'annual' — a naive substring test settles half-yearly
|
||||
// products once a year, which is a deduction default.
|
||||
expect(tdsModeFor({ interestPostingPeriodType: { code: 'savingsPostingInterestPeriodType.biannual' } })).toBe(
|
||||
'QUARTERLY'
|
||||
);
|
||||
expect(tdsModeFor({ interestPostingPeriodType: { value: 'Bi-Annual' } })).toBe('QUARTERLY');
|
||||
});
|
||||
|
||||
it('reads the value when no code is present, and defaults safely', () => {
|
||||
expect(tdsModeFor({ interestPostingPeriodType: { value: 'Annually' } })).toBe('ANNUAL');
|
||||
// Unknown or missing configuration settles on the quarterly cycle, which is
|
||||
// the conservative choice — deducting sooner is never a default.
|
||||
expect(tdsModeFor({})).toBe('QUARTERLY');
|
||||
expect(tdsModeFor({ interestPostingPeriodType: null })).toBe('QUARTERLY');
|
||||
});
|
||||
});
|
||||
|
||||
describe('PAN validation', () => {
|
||||
it.each([
|
||||
[
|
||||
'ABCPM1234E',
|
||||
true
|
||||
],
|
||||
[
|
||||
'EFGHV5678A',
|
||||
true
|
||||
],
|
||||
[
|
||||
'PQRSR2233Z',
|
||||
false
|
||||
],
|
||||
[
|
||||
'TUVWS3344K',
|
||||
false
|
||||
],
|
||||
[
|
||||
'ABCP1234E',
|
||||
false
|
||||
],
|
||||
[
|
||||
'',
|
||||
false
|
||||
]
|
||||
])('%s -> %s', (pan, expected) => {
|
||||
expect(isWellFormedPan(pan)).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
const income = (estimatedInterest: number, estimatedIncome: number) => ({
|
||||
estimatedInterest,
|
||||
estimatedIncome,
|
||||
incomeOnRecord: true
|
||||
});
|
||||
|
||||
/** FY 2025-26 — the last year the 1961 Act and the 15G/15H split applied. */
|
||||
const OLD_FY = 'FY 2025-26';
|
||||
|
||||
describe('which declaration form is in force', () => {
|
||||
it('splits by age up to FY 2025-26', () => {
|
||||
expect(declarationFormFor(OLD_FY, '1985-02-14')).toBe('15G');
|
||||
expect(declarationFormFor(OLD_FY, '1958-06-22')).toBe('15H');
|
||||
});
|
||||
|
||||
it('is a single Form 121 from FY 2026-27, whatever the age', () => {
|
||||
expect(declarationFormFor(FY, '1985-02-14')).toBe('121');
|
||||
expect(declarationFormFor(FY, '1958-06-22')).toBe('121');
|
||||
});
|
||||
|
||||
it('keeps the senior threshold even though the forms merged', () => {
|
||||
// The two forms became one, but the deduction trigger is still age-based.
|
||||
expect(quarterlySchedule(credits(20_000, 20_000, 20_000, 20_000), general()).threshold).toBe(50_000);
|
||||
expect(quarterlySchedule(credits(20_000, 20_000, 20_000, 20_000), senior()).threshold).toBe(100_000);
|
||||
});
|
||||
});
|
||||
|
||||
describe('eligibility up to FY 2025-26 — the 15G / 15H tests', () => {
|
||||
const old = (o: Partial<TdsContext> = {}) => general({ fy: OLD_FY, ...o });
|
||||
const oldSenior = (o: Partial<TdsContext> = {}) => senior({ fy: OLD_FY, ...o });
|
||||
|
||||
it('accepts a 15G within both the income and the interest ceiling', () => {
|
||||
const r = checkEligibility(old(), income(90_000, 320_000));
|
||||
expect(r.form).toBe('15G');
|
||||
expect(r.eligible).toBe(true);
|
||||
});
|
||||
|
||||
it('rejects a 15G whose estimated income exceeds the basic exemption', () => {
|
||||
const r = checkEligibility(old(), income(38_500, 850_000));
|
||||
expect(r.eligible).toBe(false);
|
||||
expect(r.reasons.join(' ')).toContain('exceeds the basic exemption');
|
||||
});
|
||||
|
||||
it('rejects a 15G whose interest alone exceeds the basic exemption', () => {
|
||||
// The second limb: interest had to clear the limit as well as income.
|
||||
expect(checkEligibility(old(), income(450_000, 380_000)).eligible).toBe(false);
|
||||
});
|
||||
|
||||
it('places no interest ceiling on a 15H', () => {
|
||||
// A senior citizen with ₹8,00,000 of interest could still declare, provided
|
||||
// deductions and rebate left the liability at nil.
|
||||
const r = checkEligibility(oldSenior(), income(800_000, 900_000));
|
||||
expect(r.form).toBe('15H');
|
||||
expect(r.eligible).toBe(true);
|
||||
});
|
||||
|
||||
it('rejects a 15H that leaves a liability', () => {
|
||||
const r = checkEligibility(oldSenior(), income(800_000, 1_500_000));
|
||||
expect(r.eligible).toBe(false);
|
||||
expect(r.reasons.join(' ')).toContain('nil');
|
||||
});
|
||||
|
||||
it('cites the rule that applied to that year', () => {
|
||||
const r = checkEligibility(old({ pan: '' }), income(10_000, 100_000));
|
||||
expect(r.eligible).toBe(false);
|
||||
expect(r.reasons.join(' ')).toContain('Rule 29C');
|
||||
});
|
||||
|
||||
it('still checks the interest limb when income is not on record', () => {
|
||||
// Income has to be declared by the payee, but the bank knows the interest
|
||||
// figure, so that limb remains assessable.
|
||||
expect(
|
||||
checkEligibility(old(), { estimatedInterest: 450_000, estimatedIncome: 0, incomeOnRecord: false }).eligible
|
||||
).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('eligibility from FY 2026-27 — the single Form 121 test', () => {
|
||||
it('drops the interest limb entirely', () => {
|
||||
// Under a 15G this failed: interest of ₹4,50,000 was over the basic
|
||||
// exemption limit. Form 121 asks only whether the tax liability is nil, so
|
||||
// the same payee is now eligible.
|
||||
expect(checkEligibility(general({ fy: OLD_FY }), income(450_000, 380_000)).eligible).toBe(false);
|
||||
const r = checkEligibility(general(), income(450_000, 380_000));
|
||||
expect(r.form).toBe('121');
|
||||
expect(r.eligible).toBe(true);
|
||||
});
|
||||
|
||||
it('applies one nil-liability ceiling to every age', () => {
|
||||
for (const ctx of [
|
||||
general(),
|
||||
senior()
|
||||
]) {
|
||||
expect(checkEligibility(ctx, income(800_000, 900_000)).eligible).toBe(true);
|
||||
const over = checkEligibility(ctx, income(800_000, 1_500_000));
|
||||
expect(over.eligible).toBe(false);
|
||||
expect(over.reasons.join(' ')).toContain('nil');
|
||||
}
|
||||
});
|
||||
|
||||
it('takes PAN only — Aadhaar is not a substitute', () => {
|
||||
const r = checkEligibility(general({ pan: '' }), income(10_000, 100_000));
|
||||
expect(r.eligible).toBe(false);
|
||||
expect(r.reasons.join(' ')).toContain('Rule 211');
|
||||
expect(r.reasons.join(' ')).toContain('Aadhaar is not a substitute');
|
||||
});
|
||||
|
||||
it('refuses an entity PAN', () => {
|
||||
const r = checkEligibility(general({ pan: 'ABCCM1234E' }), income(10_000, 100_000));
|
||||
expect(r.eligible).toBe(false);
|
||||
expect(r.reasons.join(' ')).toContain('entity');
|
||||
});
|
||||
|
||||
it('refuses a non-resident', () => {
|
||||
expect(checkEligibility(general({ resident: false }), income(10_000, 100_000)).eligible).toBe(false);
|
||||
});
|
||||
|
||||
it('reports the nil-liability test as unassessed rather than passing it silently', () => {
|
||||
// The branch cannot compute income earned outside the bank, so a missing
|
||||
// figure must not read as a pass.
|
||||
const r = checkEligibility(general(), {
|
||||
estimatedInterest: 90_000,
|
||||
estimatedIncome: 0,
|
||||
incomeOnRecord: false
|
||||
});
|
||||
expect(r.unassessed.length).toBe(1);
|
||||
expect(r.unassessed[0]).toContain('not on record');
|
||||
// With no interest limb left, nothing else can fail it — so the branch must
|
||||
// read the unassessed note rather than treat the row as cleared.
|
||||
expect(r.eligible).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('statutory references travel with the year', () => {
|
||||
it('quotes the 1961 Act for FY 2025-26 and the 2025 Act for FY 2026-27', () => {
|
||||
expect(FY_TAX_CONFIG['2025-26'].regime).toBe('ITA_1961');
|
||||
expect(FY_TAX_CONFIG['2025-26'].interestTdsSection).toContain('194A');
|
||||
expect(FY_TAX_CONFIG['2025-26'].tdsStatementForm).toBe('Form 26Q');
|
||||
expect(FY_TAX_CONFIG['2025-26'].declarationStatementFrequency).toBe('QUARTERLY');
|
||||
|
||||
expect(FY_TAX_CONFIG['2026-27'].regime).toBe('ITA_2025');
|
||||
expect(FY_TAX_CONFIG['2026-27'].interestTdsSection).toContain('393');
|
||||
expect(FY_TAX_CONFIG['2026-27'].tdsStatementForm).toBe('Form 140');
|
||||
expect(FY_TAX_CONFIG['2026-27'].declarationStatementFrequency).toBe('MONTHLY');
|
||||
});
|
||||
|
||||
it('carries the same thresholds and rates across the changeover', () => {
|
||||
const a = FY_TAX_CONFIG['2025-26'];
|
||||
const b = FY_TAX_CONFIG['2026-27'];
|
||||
expect(b.thresholdGeneral).toBe(a.thresholdGeneral);
|
||||
expect(b.thresholdSenior).toBe(a.thresholdSenior);
|
||||
expect(b.rate).toBe(a.rate);
|
||||
expect(b.rateNoPan).toBe(a.rateNoPan);
|
||||
});
|
||||
});
|
||||
|
||||
describe('default interest under section 201(1A)', () => {
|
||||
it('counts any part of a month as a full month', () => {
|
||||
expect(monthsOrPartBetween('2026-07-07', '2026-07-07')).toBe(0);
|
||||
expect(monthsOrPartBetween('2026-07-07', '2026-07-08')).toBe(1);
|
||||
expect(monthsOrPartBetween('2026-07-07', '2026-08-07')).toBe(1);
|
||||
expect(monthsOrPartBetween('2026-07-07', '2026-08-08')).toBe(2);
|
||||
expect(monthsOrPartBetween('2026-07-07', '2027-01-07')).toBe(6);
|
||||
});
|
||||
|
||||
it('charges 1% a month for deducting late and 1.5% for depositing late', () => {
|
||||
expect(lateDeductionInterest(6_000, '2026-07-07', '2027-01-07', 'DEDUCTION', FY)).toEqual({
|
||||
months: 6,
|
||||
rate: 0.01,
|
||||
interest: 360
|
||||
});
|
||||
expect(lateDeductionInterest(6_000, '2026-07-07', '2027-01-07', 'DEPOSIT', FY).interest).toBe(540);
|
||||
});
|
||||
|
||||
it('charges nothing when settled on time', () => {
|
||||
expect(lateDeductionInterest(6_000, '2026-07-07', '2026-07-07', 'DEPOSIT', FY).interest).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('helpers', () => {
|
||||
it('resolves the financial year of a date', () => {
|
||||
expect(fyOf('2026-04-01')).toBe('2026-27');
|
||||
expect(fyOf('2027-03-31')).toBe('2026-27');
|
||||
expect(fyOf('2026-03-31')).toBe('2025-26');
|
||||
expect(fyOf('2027-04-01')).toBe('2027-28');
|
||||
});
|
||||
|
||||
it('buckets dated credits into the right quarters and drops out-of-year dates', () => {
|
||||
const b = bucketByQuarter(
|
||||
[
|
||||
{ date: '2026-04-05', amount: 100 },
|
||||
{ date: '2026-08-01', amount: 200 },
|
||||
{ date: '2026-11-30', amount: 300 },
|
||||
{ date: '2027-01-15', amount: 400 },
|
||||
{ date: '2026-03-31', amount: 999 },
|
||||
{ date: '2027-04-01', amount: 999 }
|
||||
],
|
||||
FY
|
||||
);
|
||||
expect(b).toEqual({ 1: 100, 2: 200, 3: 300, 4: 400 });
|
||||
});
|
||||
|
||||
it('spreads an annual estimate without losing rupees to division', () => {
|
||||
for (const annual of [
|
||||
38_500,
|
||||
52_801,
|
||||
1,
|
||||
999_999
|
||||
]) {
|
||||
expect(projectQuarterlyCredits(annual, FY).reduce((s, x) => s + x.amount, 0)).toBe(annual);
|
||||
}
|
||||
});
|
||||
|
||||
it('exposes the cumulative liability directly for ad-hoc checks', () => {
|
||||
expect(cumulativeLiability(50_000, 50_000, general())).toBe(0);
|
||||
expect(cumulativeLiability(50_001, 50_001, general())).toBe(5_000);
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
+45
@@ -115,6 +115,51 @@
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="spa-group">
|
||||
<div class="spa-group__header">
|
||||
<h4>Map Payment Types to Specific Funds</h4>
|
||||
<button type="button" class="spa-add-btn" (click)="addPaymentFundSourceMapping()">+ Add</button>
|
||||
</div>
|
||||
<div class="spa-list" [formArrayName]="'paymentChannelToFundSourceMappings'">
|
||||
@for (row of paymentChannelToFundSourceMappings.controls; track $index; let i = $index) {
|
||||
<div class="spa-other-row-wrap">
|
||||
<div class="spa-row spa-row--other" [formGroupName]="i">
|
||||
<div class="spa-row__meta spa-row__meta--other">
|
||||
<mat-form-field class="spa-row__other-field" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>Payment Type</mat-label>
|
||||
<mat-select formControlName="paymentTypeId">
|
||||
@for (paymentType of paymentTypeOptions; track paymentType.id) {
|
||||
<mat-option [value]="paymentType.id">{{ paymentType.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="spa-row__actions spa-row__actions--other">
|
||||
<mat-form-field class="spa-row__other-field" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>Fund Source</mat-label>
|
||||
<mat-select formControlName="fundSourceAccountId">
|
||||
@for (glAccount of fundSourceAccountOptions; track glAccount.id) {
|
||||
<mat-option [value]="glAccount.id">
|
||||
{{ '(' + glAccount.glCode + ') ' + glAccount.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="spa-remove-btn spa-remove-btn--side"
|
||||
(click)="removePaymentFundSourceMapping(i)"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+52
-1
@@ -50,6 +50,11 @@ type OtherGlMappingValue = {
|
||||
glAccountId: number | null;
|
||||
};
|
||||
|
||||
type PaymentFundSourceValue = {
|
||||
paymentTypeId: number | null;
|
||||
fundSourceAccountId: number | null;
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-saving-product-accounting-step',
|
||||
templateUrl: './saving-product-accounting-step.component.html',
|
||||
@@ -78,6 +83,11 @@ export class SavingProductAccountingStepComponent implements OnInit {
|
||||
expenseAccountOptions: GLAccount[] = [];
|
||||
incomeAccountOptions: GLAccount[] = [];
|
||||
assetAccountOptions: GLAccount[] = [];
|
||||
paymentTypeOptions: any[] = [];
|
||||
/** A payment-type Fund Source override can legitimately be a suspense/clearing Liability account
|
||||
* (e.g. an existing "Sundry" account bridging to another module) rather than only a cash-like
|
||||
* Asset account, so this field accepts either. */
|
||||
fundSourceAccountOptions: GLAccount[] = [];
|
||||
accountingSectionConfigs: AccountingSectionConfig[] = [];
|
||||
|
||||
constructor() {
|
||||
@@ -98,6 +108,8 @@ export class SavingProductAccountingStepComponent implements OnInit {
|
||||
this.liabilityAccountOptions = accountingMappingOptions.liabilityAccountOptions || [];
|
||||
this.expenseAccountOptions = accountingMappingOptions.expenseAccountOptions || [];
|
||||
this.incomeAccountOptions = accountingMappingOptions.incomeAccountOptions || [];
|
||||
this.paymentTypeOptions = this.savingProductsTemplate?.paymentTypeOptions || [];
|
||||
this.fundSourceAccountOptions = this.assetAccountOptions.concat(this.liabilityAccountOptions);
|
||||
this.buildAccountingSectionConfigs();
|
||||
this.savingProductAccountingForm.patchValue({
|
||||
accountingRule: accountingRuleId
|
||||
@@ -105,6 +117,7 @@ export class SavingProductAccountingStepComponent implements OnInit {
|
||||
|
||||
this.syncAccountingControls(accountingRuleId);
|
||||
this.patchAccountingValues(mappings);
|
||||
this.patchPaymentFundSourceMappings(this.savingProductsTemplate?.paymentChannelToFundSourceMappings || []);
|
||||
this.setOverdraftControl();
|
||||
this.setDormancyControl();
|
||||
}
|
||||
@@ -115,10 +128,48 @@ export class SavingProductAccountingStepComponent implements OnInit {
|
||||
assetsOtherGlMappings: this.formBuilder.array([]),
|
||||
liabilitiesOtherGlMappings: this.formBuilder.array([]),
|
||||
expensesOtherGlMappings: this.formBuilder.array([]),
|
||||
incomeOtherGlMappings: this.formBuilder.array([])
|
||||
incomeOtherGlMappings: this.formBuilder.array([]),
|
||||
paymentChannelToFundSourceMappings: this.formBuilder.array([])
|
||||
});
|
||||
}
|
||||
|
||||
get paymentChannelToFundSourceMappings(): UntypedFormArray {
|
||||
return this.savingProductAccountingForm.get('paymentChannelToFundSourceMappings') as UntypedFormArray;
|
||||
}
|
||||
|
||||
private createPaymentFundSourceGroup(value: Partial<PaymentFundSourceValue> = {}) {
|
||||
return this.formBuilder.group({
|
||||
paymentTypeId: [
|
||||
value.paymentTypeId ?? this.paymentTypeOptions[0]?.id ?? null,
|
||||
Validators.required
|
||||
],
|
||||
fundSourceAccountId: [
|
||||
value.fundSourceAccountId ?? this.fundSourceAccountOptions[0]?.id ?? null,
|
||||
Validators.required
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
private patchPaymentFundSourceMappings(mappings: any[]): void {
|
||||
this.paymentChannelToFundSourceMappings.clear();
|
||||
(mappings || []).forEach((mapping) => {
|
||||
this.paymentChannelToFundSourceMappings.push(
|
||||
this.createPaymentFundSourceGroup({
|
||||
paymentTypeId: mapping.paymentType?.id,
|
||||
fundSourceAccountId: mapping.fundSourceAccount?.id
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
addPaymentFundSourceMapping(): void {
|
||||
this.paymentChannelToFundSourceMappings.push(this.createPaymentFundSourceGroup());
|
||||
}
|
||||
|
||||
removePaymentFundSourceMapping(index: number): void {
|
||||
this.paymentChannelToFundSourceMappings.removeAt(index);
|
||||
}
|
||||
|
||||
private setConditionalControls() {
|
||||
this.savingProductAccountingForm.get('accountingRule')?.valueChanges.subscribe((accountingRule: number) => {
|
||||
this.syncAccountingControls(accountingRule);
|
||||
|
||||
+9
-2
@@ -74,6 +74,12 @@ export class ShareProductAccountingStepComponent implements OnInit {
|
||||
liabilityAccountData: GLAccount[] = [];
|
||||
incomeAccountData: GLAccount[] = [];
|
||||
equityAccountData: GLAccount[] = [];
|
||||
/** "Share Reference" is where a redemption's credit side lands pending settlement — some banks
|
||||
* model that as a receivable-like Asset (e.g. "Cash Vault", this field's original default),
|
||||
* others as a payable-like Liability suspense account (e.g. an existing "Sundry" account
|
||||
* already used elsewhere as Shares Suspense). Both are valid conventions, so this field accepts
|
||||
* either instead of Asset-only. */
|
||||
referenceAccountData: GLAccount[] = [];
|
||||
|
||||
constructor() {
|
||||
this.createShareProductAccountingForm();
|
||||
@@ -85,6 +91,7 @@ export class ShareProductAccountingStepComponent implements OnInit {
|
||||
this.liabilityAccountData = opts.liabilityAccountOptions || [];
|
||||
this.incomeAccountData = opts.incomeAccountOptions || [];
|
||||
this.equityAccountData = opts.equityAccountOptions || [];
|
||||
this.referenceAccountData = this.assetAccountData.concat(this.liabilityAccountData);
|
||||
|
||||
this.buildAccountingSectionConfigs();
|
||||
|
||||
@@ -135,10 +142,10 @@ export class ShareProductAccountingStepComponent implements OnInit {
|
||||
rows: [
|
||||
{
|
||||
key: 'shareReferenceId',
|
||||
label: 'Share Reference (Cash Vault)',
|
||||
label: 'Share Reference (Cash Vault or Suspense)',
|
||||
inputLabel: 'Share reference',
|
||||
controlName: 'shareReferenceId',
|
||||
options: this.assetAccountData,
|
||||
options: this.referenceAccountData,
|
||||
required: true
|
||||
}
|
||||
],
|
||||
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
<!--
|
||||
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/.
|
||||
-->
|
||||
|
||||
<h2 mat-dialog-title class="rule-dialog-title">
|
||||
<mat-icon>add_moderator</mat-icon>
|
||||
Add AML Rule
|
||||
</h2>
|
||||
|
||||
<mat-dialog-content class="rule-dialog-content">
|
||||
<form [formGroup]="ruleForm" class="rule-form" autocomplete="off">
|
||||
<div *ngIf="errorMessage" class="rule-form-error">
|
||||
<mat-icon>error_outline</mat-icon>
|
||||
<span>{{ errorMessage }}</span>
|
||||
</div>
|
||||
|
||||
<mat-form-field appearance="outline" class="rule-field-full">
|
||||
<mat-label>Rule Description</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
rows="2"
|
||||
formControlName="ruleName"
|
||||
placeholder="e.g. Cash deposits exceeding the monthly threshold"
|
||||
></textarea>
|
||||
<mat-error *ngIf="ruleForm.get('ruleName')?.hasError('required')">Rule description is required</mat-error>
|
||||
<mat-error *ngIf="ruleForm.get('ruleName')?.hasError('maxlength')">Keep this under 100 characters</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="rule-field-full">
|
||||
<mat-label>Rule Reason / Criteria</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
rows="3"
|
||||
formControlName="reason"
|
||||
placeholder="Why the rule exists and what it looks for"
|
||||
></textarea>
|
||||
<mat-error *ngIf="ruleForm.get('reason')?.hasError('required')">Reason is required</mat-error>
|
||||
<mat-error *ngIf="ruleForm.get('reason')?.hasError('maxlength')">Keep this under 500 characters</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="rule-grid">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Risk Category</mat-label>
|
||||
<mat-select formControlName="riskCategory">
|
||||
<mat-option *ngFor="let r of riskCategories" [value]="r.value">{{ r.label }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Applies Over</mat-label>
|
||||
<mat-select formControlName="txnWindowDays">
|
||||
<mat-option *ngFor="let w of windowOptions" [value]="w.value">{{ w.label }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Minimum Limit</mat-label>
|
||||
<span matPrefix class="rule-field-prefix">₹</span>
|
||||
<input matInput type="number" min="0" formControlName="txnMinLimitAmount" />
|
||||
<mat-hint>Leave blank for a non-amount rule</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Maximum Limit</mat-label>
|
||||
<span matPrefix class="rule-field-prefix">₹</span>
|
||||
<input matInput type="number" min="0" formControlName="txnMaxLimitAmount" />
|
||||
<mat-hint>Blank means no upper limit</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Rule Type</mat-label>
|
||||
<mat-select formControlName="txnRuleType">
|
||||
<mat-option *ngFor="let t of ruleTypes" [value]="t">{{ t }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Applies To</mat-label>
|
||||
<mat-select formControlName="txnAppliesTo">
|
||||
<mat-option *ngFor="let a of appliesToOptions" [value]="a">{{ a }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>AML Check Status</mat-label>
|
||||
<mat-select formControlName="amlCheckStatus">
|
||||
<mat-option *ngFor="let s of amlCheckStatuses" [value]="s">{{ s }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Banned Entity Match</mat-label>
|
||||
<mat-select formControlName="bannedEntityMatch">
|
||||
<mat-option *ngFor="let y of yesNo" [value]="y">{{ y }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div *ngIf="bandInverted" class="rule-form-error">
|
||||
<mat-icon>error_outline</mat-icon>
|
||||
<span>Maximum limit cannot be lower than the minimum — the rule would never match.</span>
|
||||
</div>
|
||||
|
||||
<p class="rule-form-note">
|
||||
Amount or window details also create the matching live-transaction rule. Leave them blank for a profile-only rule.
|
||||
</p>
|
||||
</form>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end" class="rule-dialog-actions">
|
||||
<button mat-stroked-button type="button" [disabled]="submitting" (click)="cancel()">Cancel</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
type="button"
|
||||
[disabled]="ruleForm.invalid || bandInverted || submitting"
|
||||
(click)="submit()"
|
||||
>
|
||||
<mat-spinner *ngIf="submitting" diameter="18" class="rule-submit-spinner"></mat-spinner>
|
||||
{{ submitting ? 'Saving…' : 'Add Rule' }}
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.rule-dialog-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #1a237e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rule-dialog-content {
|
||||
padding-top: 8px;
|
||||
min-width: 560px;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.rule-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.rule-field-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rule-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 4px 16px;
|
||||
}
|
||||
|
||||
.rule-field-prefix {
|
||||
color: #64748b;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.rule-form-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 6px;
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
font-size: 13px;
|
||||
|
||||
mat-icon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-form-note {
|
||||
margin: 4px 0 0;
|
||||
font-size: 12.5px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.rule-dialog-actions {
|
||||
padding: 8px 24px 20px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rule-submit-spinner {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media (width <= 640px) {
|
||||
.rule-dialog-content {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.rule-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
/** Custom Services */
|
||||
import { ClientsService } from '../../../clients/clients.service';
|
||||
|
||||
/**
|
||||
* Authoring form for a new AML catalog rule.
|
||||
*
|
||||
* The screen the officer came from renders one flat table, but a rule is stored across two
|
||||
* tables: the profile rule in m_client_risk_rule and, when a transaction band or observation
|
||||
* window is given, an evaluable counterpart in m_aml_transaction_rule. That split is the
|
||||
* backend's concern — this form stays shaped like the table it was opened from.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-add-aml-rule-dialog',
|
||||
templateUrl: './add-aml-rule-dialog.component.html',
|
||||
styleUrls: ['./add-aml-rule-dialog.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
MatDialogModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatSelectModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule
|
||||
]
|
||||
})
|
||||
export class AddAmlRuleDialogComponent {
|
||||
private formBuilder = inject(FormBuilder);
|
||||
private clientsService = inject(ClientsService);
|
||||
private dialogRef = inject(MatDialogRef<AddAmlRuleDialogComponent>);
|
||||
|
||||
submitting = false;
|
||||
/** Server-side rejection, surfaced in the dialog so the officer keeps their input. */
|
||||
errorMessage = '';
|
||||
|
||||
readonly riskCategories = [
|
||||
{ value: 3, label: 'High Risk' },
|
||||
{ value: 2, label: 'Medium Risk' },
|
||||
{ value: 1, label: 'Low Risk' }
|
||||
];
|
||||
|
||||
/** Mirrors the "Applies Over" column: window in days, per-transaction being no window. */
|
||||
readonly windowOptions = [
|
||||
{ value: 0, label: 'Per transaction' },
|
||||
{ value: 1, label: 'Daily' },
|
||||
{ value: 7, label: 'Weekly' },
|
||||
{ value: 30, label: 'Monthly' }
|
||||
];
|
||||
|
||||
readonly ruleTypes = [
|
||||
'THRESHOLD',
|
||||
'STRUCTURING',
|
||||
'VELOCITY'
|
||||
];
|
||||
readonly appliesToOptions = [
|
||||
'ALL',
|
||||
'SAVINGS',
|
||||
'LOAN',
|
||||
'TRANSFER'
|
||||
];
|
||||
readonly amlCheckStatuses = [
|
||||
'CLEAR',
|
||||
'FLAGGED',
|
||||
'PENDING'
|
||||
];
|
||||
readonly yesNo = [
|
||||
'NO',
|
||||
'YES'
|
||||
];
|
||||
|
||||
ruleForm = this.formBuilder.group({
|
||||
ruleName: [
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.maxLength(100)
|
||||
]
|
||||
],
|
||||
reason: [
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.maxLength(500)
|
||||
]
|
||||
],
|
||||
riskCategory: [
|
||||
3,
|
||||
Validators.required
|
||||
],
|
||||
txnWindowDays: [0],
|
||||
txnRuleType: ['THRESHOLD'],
|
||||
txnAppliesTo: ['ALL'],
|
||||
txnMinLimitAmount: [
|
||||
null as
|
||||
| number
|
||||
| null,
|
||||
Validators.min(0)
|
||||
],
|
||||
txnMaxLimitAmount: [
|
||||
null as
|
||||
| number
|
||||
| null,
|
||||
Validators.min(0)
|
||||
],
|
||||
amlCheckStatus: ['FLAGGED'],
|
||||
bannedEntityMatch: ['NO'],
|
||||
willfulDefaulter: ['NO'],
|
||||
ecgcSalFlag: ['NO'],
|
||||
dormantFlag: ['ACTIVE']
|
||||
});
|
||||
|
||||
/** Mirrors the backend band check so the officer is told before the round trip. */
|
||||
get bandInverted(): boolean {
|
||||
const min = this.ruleForm.value.txnMinLimitAmount;
|
||||
const max = this.ruleForm.value.txnMaxLimitAmount;
|
||||
return min != null && max != null && Number(max) < Number(min);
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
if (this.ruleForm.invalid || this.bandInverted) {
|
||||
this.ruleForm.markAllAsTouched();
|
||||
return;
|
||||
}
|
||||
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
this.clientsService.createClientRiskRule(this.buildPayload()).subscribe({
|
||||
next: (rule) => {
|
||||
this.submitting = false;
|
||||
this.dialogRef.close(rule);
|
||||
},
|
||||
error: (err) => {
|
||||
this.submitting = false;
|
||||
this.errorMessage = this.readError(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
private buildPayload(): any {
|
||||
const v = this.ruleForm.value;
|
||||
const amount = (n: any) => (n === null || n === undefined || n === '' ? null : Number(n));
|
||||
return {
|
||||
ruleName: (v.ruleName || '').trim(),
|
||||
reason: (v.reason || '').trim(),
|
||||
riskCategory: v.riskCategory,
|
||||
amlCheckStatus: v.amlCheckStatus,
|
||||
bannedEntityMatch: v.bannedEntityMatch,
|
||||
willfulDefaulter: v.willfulDefaulter,
|
||||
ecgcSalFlag: v.ecgcSalFlag,
|
||||
dormantFlag: v.dormantFlag,
|
||||
// A window of 0 means per-transaction, which the backend stores as a null window rather
|
||||
// than a zero-day one.
|
||||
txnWindowDays: v.txnWindowDays ? v.txnWindowDays : null,
|
||||
txnRuleType: v.txnRuleType,
|
||||
txnAppliesTo: v.txnAppliesTo,
|
||||
txnMinLimitAmount: amount(v.txnMinLimitAmount),
|
||||
txnMaxLimitAmount: amount(v.txnMaxLimitAmount)
|
||||
};
|
||||
}
|
||||
|
||||
/** Fineract returns field-level failures under errors[]; fall back to the envelope message. */
|
||||
private readError(err: any): string {
|
||||
const body = err?.error;
|
||||
const first = body?.errors?.[0];
|
||||
return (
|
||||
first?.defaultUserMessage || first?.developerMessage || body?.defaultUserMessage || 'Could not save the rule.'
|
||||
);
|
||||
}
|
||||
}
|
||||
+194
@@ -0,0 +1,194 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="flagged-toolbar">
|
||||
<div class="flagged-live">
|
||||
<span class="live-dot" [class.paused]="!live"></span>
|
||||
<span class="live-label">{{ live ? 'Live' : 'Paused' }}</span>
|
||||
<span *ngIf="lastUpdated" class="live-updated">Updated {{ lastUpdated | date: 'HH:mm:ss' }}</span>
|
||||
<mat-spinner *ngIf="loading" diameter="16" class="live-spinner"></mat-spinner>
|
||||
</div>
|
||||
|
||||
<div class="flagged-actions">
|
||||
<button
|
||||
*ngIf="newAlertCount > 0"
|
||||
type="button"
|
||||
class="new-alert-pill"
|
||||
matTooltip="Clear the new-alert highlight"
|
||||
(click)="acknowledgeNew()"
|
||||
>
|
||||
<mat-icon>notifications_active</mat-icon>
|
||||
{{ newAlertCount }} new
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
type="button"
|
||||
[matTooltip]="live ? 'Pause live updates' : 'Resume live updates'"
|
||||
(click)="toggleLive()"
|
||||
>
|
||||
<mat-icon>{{ live ? 'pause_circle' : 'play_circle' }}</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button type="button" matTooltip="Refresh now" [disabled]="loading" (click)="fetch()">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="loadFailed" class="flagged-error">
|
||||
<mat-icon>cloud_off</mat-icon>
|
||||
<span>Could not reach the alert feed. Retrying automatically.</span>
|
||||
</div>
|
||||
|
||||
<!-- Narrow the feed by where each alert sits in the review workflow -->
|
||||
<div class="status-filters">
|
||||
<span class="status-filters-label">Status</span>
|
||||
<button
|
||||
*ngFor="let s of statusFilters"
|
||||
type="button"
|
||||
class="status-chip"
|
||||
[class.active]="activeStatus === s.key"
|
||||
[disabled]="statusCount(s.key) === 0 && activeStatus !== s.key"
|
||||
(click)="setStatus(s.key)"
|
||||
>
|
||||
{{ s.label }}
|
||||
<span class="status-chip-n">{{ statusCount(s.key) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Severity mix of what the table is showing -->
|
||||
<div class="risk-summary">
|
||||
<div *ngFor="let tier of riskSummary" class="risk-tile" [ngClass]="tier.cls">
|
||||
<span class="risk-tile-n">{{ tier.count }}</span>
|
||||
<span class="risk-tile-l">{{ tier.label }}</span>
|
||||
</div>
|
||||
<div *ngIf="unclassifiedCount > 0" class="risk-tile risk-none" matTooltip="Raised by a user, not by a catalog rule">
|
||||
<span class="risk-tile-n">{{ unclassifiedCount }}</span>
|
||||
<span class="risk-tile-l">Unclassified</span>
|
||||
</div>
|
||||
<div class="risk-tile risk-total">
|
||||
<span class="risk-tile-n">{{ summaryTotal }}</span>
|
||||
<span class="risk-tile-l">Total Flagged</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table mat-table [dataSource]="alerts" class="flagged-table mat-elevation-z1">
|
||||
<!-- When the engine raised the alert -->
|
||||
<ng-container matColumnDef="raisedOn">
|
||||
<th mat-header-cell *matHeaderCellDef>Raised On</th>
|
||||
<td mat-cell *matCellDef="let alert" class="raised-cell">
|
||||
<span class="raised-time">{{
|
||||
alert.raisedOnDate ? (alert.raisedOnDate | date: 'dd MMM yyyy, HH:mm') : '—'
|
||||
}}</span>
|
||||
<span *ngIf="isNew(alert)" class="new-badge">NEW</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Which transaction tripped the rule -->
|
||||
<ng-container matColumnDef="transaction">
|
||||
<th mat-header-cell *matHeaderCellDef>Transaction</th>
|
||||
<td mat-cell *matCellDef="let alert">
|
||||
<span [ngClass]="txnTypeClass(alert.transactionType)">{{ alert.transactionType }}</span>
|
||||
<span class="txn-id">#{{ alert.transactionId }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="client">
|
||||
<th mat-header-cell *matHeaderCellDef>Client</th>
|
||||
<td mat-cell *matCellDef="let alert">
|
||||
<div class="stacked-cell">
|
||||
<span>{{ alert.clientDisplayName || '—' }}</span>
|
||||
<span *ngIf="alert.clientId" class="cell-sub">ID {{ alert.clientId }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="rule">
|
||||
<th mat-header-cell *matHeaderCellDef>Rule Triggered</th>
|
||||
<td mat-cell *matCellDef="let alert" class="rule-cell">
|
||||
<div class="stacked-cell">
|
||||
<span class="rule-code">{{ alert.ruleCode }}</span>
|
||||
<span class="cell-sub">{{ alert.ruleDescription }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-right">Amount</th>
|
||||
<td mat-cell *matCellDef="let alert" class="col-right amount-cell">{{ amount(alert) }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Status</th>
|
||||
<td mat-cell *matCellDef="let alert" class="col-center">
|
||||
<span [ngClass]="statusClass(alert.status)">{{ alert.status }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Disposition. Hidden once an alert is already whitelisted or escalated. -->
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Action</th>
|
||||
<td mat-cell *matCellDef="let alert" class="col-center actions-cell">
|
||||
<ng-container *ngIf="canReview(alert); else reviewed">
|
||||
<!-- Same gate the FIU-IND register uses; the endpoint enforces REVIEW_AML_ALERT server side,
|
||||
so without this a user who cannot review still sees buttons that only fail on click. -->
|
||||
<div class="action-group" *mifosxHasPermission="'REVIEW_AML_ALERT'">
|
||||
<button
|
||||
type="button"
|
||||
class="action-btn action-whitelist"
|
||||
matTooltip="Clear this transaction with no report"
|
||||
(click)="review(alert, 'WHITELIST')"
|
||||
>
|
||||
<mat-icon>verified</mat-icon>
|
||||
Whitelist
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="action-btn action-suspicious"
|
||||
matTooltip="Raise as suspicious — opens an STR case"
|
||||
(click)="review(alert, 'ESCALATE')"
|
||||
>
|
||||
<mat-icon>report</mat-icon>
|
||||
Suspicious
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-template #reviewed>
|
||||
<div class="reviewed-cell">
|
||||
<span class="reviewed-by">
|
||||
{{ alert.reviewedByUsername ? 'by ' + alert.reviewedByUsername : 'Reviewed' }}
|
||||
</span>
|
||||
<!-- The evidence recorded at review time, so the trail is readable without leaving the feed -->
|
||||
<mat-icon
|
||||
*ngIf="alert.reviewNotes"
|
||||
class="reviewed-evidence-icon"
|
||||
[matTooltip]="alert.reviewNotes"
|
||||
matTooltipClass="evidence-tooltip"
|
||||
>
|
||||
description
|
||||
</mat-icon>
|
||||
<span *ngIf="alert.status === 'ESCALATED'" class="str-routed" matTooltip="An STR case is open for this alert">
|
||||
→ STR
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="alert-row" [class.row-new]="isNew(row)"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons class="flagged-paginator"></mat-paginator>
|
||||
|
||||
<div *ngIf="alerts.data.length === 0 && !loading" class="no-alerts-message">
|
||||
<mat-icon>{{ activeStatus ? 'filter_alt_off' : 'verified_user' }}</mat-icon>
|
||||
<span *ngIf="!activeStatus"
|
||||
>No transactions flagged. The feed updates automatically as the engine raises alerts.</span
|
||||
>
|
||||
<span *ngIf="activeStatus">No alerts in this status.</span>
|
||||
</div>
|
||||
+539
@@ -0,0 +1,539 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.flagged-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
padding: 4px 0 14px;
|
||||
}
|
||||
|
||||
.flagged-live {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
/* Pulses while the feed is polling; goes flat and grey when paused. */
|
||||
.live-dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: #16a34a;
|
||||
box-shadow: 0 0 0 0 rgb(22 163 74 / 60%);
|
||||
animation: live-pulse 2s infinite;
|
||||
|
||||
&.paused {
|
||||
background: #94a3b8;
|
||||
animation: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes live-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgb(22 163 74 / 60%);
|
||||
}
|
||||
|
||||
70% {
|
||||
box-shadow: 0 0 0 8px rgb(22 163 74 / 0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgb(22 163 74 / 0%);
|
||||
}
|
||||
}
|
||||
|
||||
.live-label {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.05em;
|
||||
color: #16a34a;
|
||||
|
||||
.live-dot.paused + & {
|
||||
color: #64748b;
|
||||
}
|
||||
}
|
||||
|
||||
.live-updated {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.live-spinner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flagged-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.new-alert-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 12px;
|
||||
border: 1px solid #fdba74;
|
||||
border-radius: 999px;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
font-family: inherit;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
|
||||
mat-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #ffedd5;
|
||||
}
|
||||
}
|
||||
|
||||
.flagged-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 6px;
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
font-size: 13px;
|
||||
|
||||
mat-icon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Chips that narrow the feed by review status. */
|
||||
.status-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0 14px;
|
||||
}
|
||||
|
||||
.status-filters-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.status-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #cbd5e1;
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: all 0.15s;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: #1a237e;
|
||||
color: #1a237e;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #1a237e;
|
||||
border-color: #1a237e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.status-chip-n {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 1px 7px;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
|
||||
.status-chip.active & {
|
||||
background: rgb(255 255 255 / 22%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Severity mix of the visible rows. Colours match the Rules Master risk badges so the same
|
||||
category reads the same across both tabs. */
|
||||
.risk-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
padding: 0 0 16px;
|
||||
}
|
||||
|
||||
.risk-tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-left-width: 4px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.risk-tile-n {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.risk-tile-l {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.risk-tile.risk-high {
|
||||
border-left-color: #dc2626;
|
||||
background: #fef2f2;
|
||||
|
||||
.risk-tile-n {
|
||||
color: #b91c1c;
|
||||
}
|
||||
}
|
||||
|
||||
.risk-tile.risk-medium {
|
||||
border-left-color: #f59e0b;
|
||||
background: #fffbeb;
|
||||
|
||||
.risk-tile-n {
|
||||
color: #b45309;
|
||||
}
|
||||
}
|
||||
|
||||
.risk-tile.risk-low {
|
||||
border-left-color: #16a34a;
|
||||
background: #f0fdf4;
|
||||
|
||||
.risk-tile-n {
|
||||
color: #15803d;
|
||||
}
|
||||
}
|
||||
|
||||
.risk-tile.risk-none {
|
||||
border-left-color: #94a3b8;
|
||||
background: #f8fafc;
|
||||
|
||||
.risk-tile-n {
|
||||
color: #475569;
|
||||
}
|
||||
}
|
||||
|
||||
.risk-tile.risk-total {
|
||||
border-left-color: #1a237e;
|
||||
background: #f8fafc;
|
||||
|
||||
.risk-tile-n {
|
||||
color: #1a237e;
|
||||
}
|
||||
}
|
||||
|
||||
.flagged-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
|
||||
th {
|
||||
background-color: #f1f5f9;
|
||||
color: #475569;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding: 16px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 14px 16px;
|
||||
font-size: 13px;
|
||||
color: #1e293b;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-row:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* A newly arrived alert stays tinted until acknowledged. */
|
||||
.row-new {
|
||||
background: #fffbeb;
|
||||
|
||||
&:hover {
|
||||
background: #fef3c7;
|
||||
}
|
||||
}
|
||||
|
||||
.col-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.col-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.raised-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.raised-time {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.new-badge {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
background: #f59e0b;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.txn-type {
|
||||
display: inline-block;
|
||||
padding: 3px 9px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
|
||||
&.type-savings {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
&.type-loan {
|
||||
background: #ede9fe;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
&.type-transfer {
|
||||
background: #ccfbf1;
|
||||
color: #0f766e;
|
||||
}
|
||||
}
|
||||
|
||||
.txn-id {
|
||||
margin-left: 8px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Two-line cells stack inside a wrapper div. Making the <td> itself a flex container drops its
|
||||
display:table-cell, which collapses the row and pushes later columns onto their own line. */
|
||||
.stacked-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.cell-sub {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.rule-code {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rule-cell {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.amount-cell {
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.alert-status {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
|
||||
&.status-raised {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
&.status-under_review {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
&.status-escalated {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
&.status-whitelisted {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
}
|
||||
}
|
||||
|
||||
.actions-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 11px;
|
||||
margin: 2px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
|
||||
mat-icon {
|
||||
font-size: 15px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-whitelist {
|
||||
border-color: #bbf7d0;
|
||||
background: #f0fdf4;
|
||||
color: #15803d;
|
||||
|
||||
&:hover {
|
||||
background: #dcfce7;
|
||||
border-color: #86efac;
|
||||
}
|
||||
}
|
||||
|
||||
.action-suspicious {
|
||||
border-color: #fecaca;
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
|
||||
&:hover {
|
||||
background: #fee2e2;
|
||||
border-color: #fca5a5;
|
||||
}
|
||||
}
|
||||
|
||||
.reviewed-cell {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.reviewed-by {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reviewed-evidence-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #64748b;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Mirrors the FIU-IND STR register badge, so the same state reads the same in both screens. */
|
||||
.str-routed {
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #b91c1c;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
::ng-deep .evidence-tooltip {
|
||||
max-width: 320px;
|
||||
white-space: pre-wrap;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.no-alerts-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
color: #64748b;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
|
||||
mat-icon {
|
||||
font-size: 48px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.flagged-paginator {
|
||||
background: #fff;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
+333
@@ -0,0 +1,333 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, OnDestroy, inject, ViewChild } from '@angular/core';
|
||||
import { MatTableModule, MatTableDataSource } from '@angular/material/table';
|
||||
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Subject, timer, of } from 'rxjs';
|
||||
import { switchMap, takeUntil, catchError, filter } from 'rxjs/operators';
|
||||
|
||||
/** Custom Services */
|
||||
import { AmlService } from '../../../aml/aml.service';
|
||||
import { AlertService } from '../../../core/alert/alert.service';
|
||||
import { HasPermissionDirective } from '../../../directives/has-permission/has-permission.directive';
|
||||
import { AmlReviewAlertDialogComponent } from './aml-review-alert-dialog.component';
|
||||
|
||||
/**
|
||||
* Live feed of transactions the AML rule engine has flagged.
|
||||
*
|
||||
* The engine writes an m_aml_alert row synchronously as each savings/loan/transfer transaction
|
||||
* posts (AmlDomainServiceImpl -> AmlRuleEvaluationService), but there is no push channel out of
|
||||
* the platform — no websocket or SSE endpoint exists. So "real time" here is a short poll of
|
||||
* GET /aml/alerts. Alerts therefore surface within one poll interval of the transaction, not on
|
||||
* the same instant it posts.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-aml-flagged-transactions',
|
||||
templateUrl: './aml-flagged-transactions.component.html',
|
||||
styleUrls: ['./aml-flagged-transactions.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatTableModule,
|
||||
MatPaginatorModule,
|
||||
MatIconModule,
|
||||
MatButtonModule,
|
||||
MatTooltipModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatDialogModule,
|
||||
HasPermissionDirective
|
||||
]
|
||||
})
|
||||
export class AmlFlaggedTransactionsComponent implements OnInit, OnDestroy {
|
||||
private amlService = inject(AmlService);
|
||||
private dialog = inject(MatDialog);
|
||||
private alertService = inject(AlertService);
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
/** Short enough to feel live to an officer watching the desk, long enough not to hammer the API. */
|
||||
private static readonly POLL_INTERVAL_MS = 15000;
|
||||
|
||||
alerts = new MatTableDataSource<any>([]);
|
||||
displayedColumns: string[] = [
|
||||
'raisedOn',
|
||||
'transaction',
|
||||
'client',
|
||||
'rule',
|
||||
'amount',
|
||||
'status',
|
||||
'actions'
|
||||
];
|
||||
|
||||
/** Every alert as returned, before the status filter narrows the table. */
|
||||
private allAlerts: any[] = [];
|
||||
|
||||
readonly statusFilters: { key: string; label: string }[] = [
|
||||
{ key: '', label: 'All alerts' },
|
||||
{ key: 'RAISED', label: 'Raised' },
|
||||
{ key: 'UNDER_REVIEW', label: 'Under review' },
|
||||
{ key: 'ESCALATED', label: 'Escalated' },
|
||||
{ key: 'WHITELISTED', label: 'Whitelisted' }
|
||||
];
|
||||
activeStatus = '';
|
||||
private statusCounts: Record<string, number> = {};
|
||||
|
||||
/**
|
||||
* Severity mix of the flagged transactions currently in the table. riskCategory is the severity
|
||||
* of the rule that fired, resolved server-side from the originating catalog entry — the same
|
||||
* field the Rules Master tab shows in its Risk Category column.
|
||||
*/
|
||||
riskSummary: { label: string; count: number; cls: string }[] = [];
|
||||
/** Alerts whose rule has no catalog ancestor (MANUAL_REFERRAL), so no severity to report. */
|
||||
unclassifiedCount = 0;
|
||||
|
||||
live = true;
|
||||
loading = false;
|
||||
/** Null until the first successful poll, so the header does not claim a stale time. */
|
||||
lastUpdated: Date | null = null;
|
||||
loadFailed = false;
|
||||
|
||||
/** Ids already on screen, so a later poll can tell genuinely new alerts from repeats. */
|
||||
private seenIds = new Set<number>();
|
||||
/** Alerts that arrived after the officer started watching — highlighted until acknowledged. */
|
||||
newAlertIds = new Set<number>();
|
||||
|
||||
@ViewChild(MatPaginator) paginator!: MatPaginator;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.fetch();
|
||||
timer(AmlFlaggedTransactionsComponent.POLL_INTERVAL_MS, AmlFlaggedTransactionsComponent.POLL_INTERVAL_MS)
|
||||
.pipe(
|
||||
// Skip while paused, and while the browser tab is in the background — a hidden tab
|
||||
// polling every 15s is pure waste, and the next visible tick catches up anyway.
|
||||
filter(() => this.live && !document.hidden),
|
||||
// Always fetch unfiltered: the status chips need counts for every bucket, and filtering
|
||||
// client-side keeps a chip switch instant instead of a round trip.
|
||||
switchMap(() => this.amlService.getAlerts().pipe(catchError(() => of(null)))),
|
||||
takeUntil(this.destroy$)
|
||||
)
|
||||
.subscribe((data) => {
|
||||
if (data) {
|
||||
this.applyAlerts(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
/** Manual refresh, and the initial load. */
|
||||
fetch(): void {
|
||||
this.loading = true;
|
||||
this.amlService
|
||||
.getAlerts()
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (data) => {
|
||||
this.loading = false;
|
||||
this.applyAlerts(data || []);
|
||||
},
|
||||
error: () => {
|
||||
this.loading = false;
|
||||
this.loadFailed = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggleLive(): void {
|
||||
this.live = !this.live;
|
||||
if (this.live) {
|
||||
// Resuming should show current state immediately rather than after a full interval.
|
||||
this.fetch();
|
||||
}
|
||||
}
|
||||
|
||||
setStatus(key: string): void {
|
||||
this.activeStatus = key;
|
||||
this.applyStatusFilter();
|
||||
}
|
||||
|
||||
statusCount(key: string): number {
|
||||
return this.statusCounts[key] ?? 0;
|
||||
}
|
||||
|
||||
get newAlertCount(): number {
|
||||
return this.newAlertIds.size;
|
||||
}
|
||||
|
||||
/** Clears the NEW highlight once the officer has looked at them. */
|
||||
acknowledgeNew(): void {
|
||||
this.newAlertIds.clear();
|
||||
}
|
||||
|
||||
isNew(alert: any): boolean {
|
||||
return this.newAlertIds.has(alert.id);
|
||||
}
|
||||
|
||||
private applyAlerts(data: any[]): void {
|
||||
this.loadFailed = false;
|
||||
// A live feed reads newest-first. The API returns ascending when a status filter is applied
|
||||
// and unordered otherwise, so ordering here is what makes the newest alert visible on page 1.
|
||||
// Sorting needs the parsed date: raisedOn itself is an array, and new Date([...]) is NaN,
|
||||
// which would silently make the comparator a no-op.
|
||||
const list = (data || [])
|
||||
.map((a) => ({ ...a, raisedOnDate: this.toDate(a.raisedOn) }))
|
||||
.sort((a, b) => (b.raisedOnDate?.getTime() ?? 0) - (a.raisedOnDate?.getTime() ?? 0));
|
||||
|
||||
const firstLoad = this.lastUpdated === null;
|
||||
if (!firstLoad) {
|
||||
// Accumulate rather than replace: two quiet polls in a row must not clear a highlight the
|
||||
// officer has not looked at yet.
|
||||
for (const alert of list) {
|
||||
if (!this.seenIds.has(alert.id)) {
|
||||
this.newAlertIds.add(alert.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.seenIds = new Set(list.map((a) => a.id));
|
||||
|
||||
this.allAlerts = list;
|
||||
this.recomputeStatusCounts();
|
||||
this.applyStatusFilter();
|
||||
this.lastUpdated = new Date();
|
||||
}
|
||||
|
||||
private applyStatusFilter(): void {
|
||||
this.alerts.data = this.activeStatus
|
||||
? this.allAlerts.filter((a) => a.status === this.activeStatus)
|
||||
: this.allAlerts;
|
||||
if (!this.alerts.paginator && this.paginator) {
|
||||
this.alerts.paginator = this.paginator;
|
||||
}
|
||||
this.recomputeRiskSummary();
|
||||
}
|
||||
|
||||
/**
|
||||
* Counted over the rows the status filter leaves visible, not the whole set — a summary that
|
||||
* disagreed with the table underneath it would be worse than no summary.
|
||||
*/
|
||||
private recomputeRiskSummary(): void {
|
||||
const pool = this.alerts.data;
|
||||
const tiers = [
|
||||
{ key: 3, label: 'High Risk', cls: 'risk-high' },
|
||||
{ key: 2, label: 'Medium Risk', cls: 'risk-medium' },
|
||||
{ key: 1, label: 'Low Risk', cls: 'risk-low' }
|
||||
];
|
||||
this.riskSummary = tiers.map((t) => ({
|
||||
label: t.label,
|
||||
cls: t.cls,
|
||||
count: pool.filter((a) => Number(a.riskCategory) === t.key).length
|
||||
}));
|
||||
// Anything outside 1-3, including null, so the tiles always reconcile to the total.
|
||||
this.unclassifiedCount = pool.filter(
|
||||
(a) => ![
|
||||
1,
|
||||
2,
|
||||
3
|
||||
].includes(Number(a.riskCategory))
|
||||
).length;
|
||||
}
|
||||
|
||||
get summaryTotal(): number {
|
||||
return this.alerts.data.length;
|
||||
}
|
||||
|
||||
private recomputeStatusCounts(): void {
|
||||
this.statusCounts = { '': this.allAlerts.length };
|
||||
for (const s of this.statusFilters) {
|
||||
if (s.key) {
|
||||
this.statusCounts[s.key] = this.allAlerts.filter((a) => a.status === s.key).length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
statusClass(status: string): string {
|
||||
return 'alert-status status-' + (status || 'raised').toLowerCase();
|
||||
}
|
||||
|
||||
txnTypeClass(type: string): string {
|
||||
return 'txn-type type-' + (type || 'unknown').toLowerCase();
|
||||
}
|
||||
|
||||
amount(alert: any): string {
|
||||
const value = Number(alert.amount) || 0;
|
||||
return '₹' + value.toLocaleString('en-IN');
|
||||
}
|
||||
|
||||
/**
|
||||
* Fineract's Gson LocalDateTimeAdapter emits [year, month, day, hour, minute, second] rather
|
||||
* than an ISO string, so binding raisedOn straight into the date pipe renders nothing. Month is
|
||||
* 1-based in that array and 0-based in Date. The string branch is a fallback in case the
|
||||
* serializer is ever configured to emit ISO.
|
||||
*/
|
||||
private toDate(value: any): Date | null {
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
if (Array.isArray(value)) {
|
||||
const [
|
||||
y,
|
||||
M,
|
||||
d,
|
||||
H = 0,
|
||||
m = 0,
|
||||
s = 0
|
||||
] = value;
|
||||
if (y == null || M == null || d == null) {
|
||||
return null;
|
||||
}
|
||||
return new Date(y, M - 1, d, H, m, s);
|
||||
}
|
||||
const parsed = new Date(value);
|
||||
return isNaN(parsed.getTime()) ? null : parsed;
|
||||
}
|
||||
|
||||
/**
|
||||
* Only an open alert can be disposed of. The backend's whitelist/escalate set state
|
||||
* unconditionally, so nothing there stops an already-escalated alert being escalated again and
|
||||
* opening a second STR case — this gate is what prevents it.
|
||||
*/
|
||||
canReview(alert: any): boolean {
|
||||
return alert?.status === 'RAISED' || alert?.status === 'UNDER_REVIEW';
|
||||
}
|
||||
|
||||
review(alert: any, disposition: 'WHITELIST' | 'ESCALATE'): void {
|
||||
const dialogRef = this.dialog.open(AmlReviewAlertDialogComponent, {
|
||||
width: '620px',
|
||||
maxWidth: '95vw',
|
||||
autoFocus: false,
|
||||
disableClose: true,
|
||||
data: { alert, disposition }
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((result: 'WHITELIST' | 'ESCALATE' | undefined) => {
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
this.alertService.alert({
|
||||
type: result === 'WHITELIST' ? 'Alert Whitelisted' : 'Alert Escalated',
|
||||
message:
|
||||
result === 'WHITELIST'
|
||||
? `${alert.transactionType} #${alert.transactionId} cleared with no report.`
|
||||
: `${alert.transactionType} #${alert.transactionId} escalated — an STR case is now open.`
|
||||
});
|
||||
// The status changed server side, and escalation also re-rates the client, so re-read
|
||||
// rather than patching the row locally.
|
||||
this.fetch();
|
||||
});
|
||||
}
|
||||
}
|
||||
+135
@@ -0,0 +1,135 @@
|
||||
<!--
|
||||
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/.
|
||||
-->
|
||||
|
||||
<h2 mat-dialog-title class="review-dialog-title" [class.escalate]="!isWhitelist">
|
||||
<mat-icon>{{ isWhitelist ? 'verified' : 'report' }}</mat-icon>
|
||||
{{ title }}
|
||||
</h2>
|
||||
|
||||
<mat-dialog-content class="review-dialog-content">
|
||||
<!-- Restate exactly which transaction is being disposed of -->
|
||||
<div class="review-summary">
|
||||
<div class="review-summary-row">
|
||||
<span class="review-label">Transaction</span>
|
||||
<span class="review-value">
|
||||
{{ data.alert.transactionType }} <span class="review-mono">#{{ data.alert.transactionId }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="review-summary-row">
|
||||
<span class="review-label">Client</span>
|
||||
<span class="review-value">
|
||||
{{ data.alert.clientDisplayName || '—' }}
|
||||
<span *ngIf="data.alert.clientId" class="review-muted">(ID {{ data.alert.clientId }})</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="review-summary-row">
|
||||
<span class="review-label">Amount</span>
|
||||
<span class="review-value review-mono">{{ amount() }}</span>
|
||||
</div>
|
||||
<div class="review-summary-row">
|
||||
<span class="review-label">Rule</span>
|
||||
<span class="review-value">
|
||||
{{ data.alert.ruleCode }}
|
||||
<span class="review-muted">— {{ data.alert.ruleDescription }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="review-summary-row">
|
||||
<span class="review-label">Raised On</span>
|
||||
<span class="review-value">{{ data.alert.raisedOnDate | date: 'dd MMM yyyy, HH:mm:ss' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Escalation is not a reversible bookkeeping change; say what it sets in motion -->
|
||||
<div *ngIf="!isWhitelist" class="review-warning">
|
||||
<mat-icon>warning</mat-icon>
|
||||
<span>
|
||||
This opens an STR case for the Principal Officer and re-rates the client's risk category. The case carries a
|
||||
7-working-day FIU filing deadline.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="isWhitelist" class="review-note">
|
||||
<mat-icon>info_outline</mat-icon>
|
||||
<span>The alert is closed with no report filed. The reason below is retained as the audit trail.</span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="errorMessage" class="review-error">
|
||||
<mat-icon>error_outline</mat-icon>
|
||||
<span>{{ errorMessage }}</span>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="reviewForm" autocomplete="off">
|
||||
<!-- Evidence classification only applies to clearing an alert -->
|
||||
<ng-container *ngIf="isWhitelist">
|
||||
<div class="evidence-block" [class.evidence-block-invalid]="evidenceMissing">
|
||||
<span class="evidence-legend">Evidence relied on — tick all that apply</span>
|
||||
<div formArrayName="evidence" class="evidence-options">
|
||||
<mat-checkbox *ngFor="let t of evidenceTypes; let i = index" [formControlName]="i" class="evidence-option">
|
||||
{{ t }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<span *ngIf="evidenceMissing" class="evidence-error">Tick at least one form of evidence</span>
|
||||
</div>
|
||||
|
||||
<mat-form-field appearance="outline" class="review-notes-field">
|
||||
<mat-label>Document / Reference No.</mat-label>
|
||||
<input matInput formControlName="evidenceRef" placeholder="e.g. Invoice INV-4471, Sale deed 12/2026" />
|
||||
<mat-hint>Optional — identifies the documents held on file</mat-hint>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
|
||||
<mat-form-field appearance="outline" class="review-notes-field">
|
||||
<mat-label>{{ notesLabel }}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
rows="4"
|
||||
formControlName="notes"
|
||||
[placeholder]="
|
||||
isWhitelist
|
||||
? 'What the evidence shows and how it accounts for this transaction'
|
||||
: 'The pattern or behaviour that makes this transaction suspicious'
|
||||
"
|
||||
></textarea>
|
||||
<mat-error *ngIf="reviewForm.get('notes')?.hasError('required')">
|
||||
Required — this is the audit record for the decision
|
||||
</mat-error>
|
||||
<mat-error *ngIf="reviewForm.get('notes')?.hasError('maxlength')">
|
||||
Keep this under {{ detailMax }} characters
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- No guessing about what is retained: show the exact string that will be stored. -->
|
||||
<div *ngIf="composedNotes" class="review-stored">
|
||||
<span class="review-stored-label">Stored on the alert record</span>
|
||||
<code class="review-stored-value">{{ composedNotes }}</code>
|
||||
<span class="review-stored-hint">
|
||||
Saved to <code>m_aml_alert.review_notes</code> against alert #{{ data.alert.id }}, and shown in the NOTES column
|
||||
of the FIU‑IND STR register.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="composedTooLong" class="review-error">
|
||||
<mat-icon>error_outline</mat-icon>
|
||||
<span>Too long to store — untick some evidence, or shorten the detail or reference.</span>
|
||||
</div>
|
||||
</form>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end" class="review-dialog-actions">
|
||||
<button mat-stroked-button type="button" [disabled]="submitting" (click)="cancel()">Cancel</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
type="button"
|
||||
[color]="isWhitelist ? 'primary' : 'warn'"
|
||||
[disabled]="reviewForm.invalid || composedTooLong || submitting"
|
||||
(click)="submit()"
|
||||
>
|
||||
<mat-spinner *ngIf="submitting" diameter="18" class="review-spinner"></mat-spinner>
|
||||
{{ submitting ? 'Saving…' : confirmLabel }}
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
+215
@@ -0,0 +1,215 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.review-dialog-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #15803d;
|
||||
font-weight: 600;
|
||||
|
||||
&.escalate {
|
||||
color: #b91c1c;
|
||||
}
|
||||
}
|
||||
|
||||
.review-dialog-content {
|
||||
padding-top: 8px;
|
||||
min-width: 520px;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.review-summary {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.review-summary-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.review-label {
|
||||
flex: 0 0 96px;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.review-value {
|
||||
flex: 1 1 auto;
|
||||
color: #1e293b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.review-muted {
|
||||
color: #64748b;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.review-mono {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.review-warning,
|
||||
.review-note,
|
||||
.review-error {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
|
||||
mat-icon {
|
||||
flex: 0 0 auto;
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.review-warning {
|
||||
border: 1px solid #fecaca;
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.review-note {
|
||||
border: 1px solid #bbf7d0;
|
||||
background: #f0fdf4;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.review-error {
|
||||
border: 1px solid #fecaca;
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Multi-select evidence. Bordered so the group reads as one required field rather than a
|
||||
loose row of checkboxes. */
|
||||
.evidence-block {
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&.evidence-block-invalid {
|
||||
border-color: #fca5a5;
|
||||
background: #fef2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.evidence-legend {
|
||||
display: block;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #64748b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.evidence-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 2px 12px;
|
||||
}
|
||||
|
||||
.evidence-option {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.evidence-error {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.review-notes-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Shows the officer the exact string the review will persist. */
|
||||
.review-stored {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 10px 12px;
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 6px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.review-stored-label {
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.review-stored-value {
|
||||
font-size: 12.5px;
|
||||
color: #1e293b;
|
||||
word-break: break-word;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.review-stored-hint {
|
||||
font-size: 11.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.45;
|
||||
|
||||
code {
|
||||
background: #e2e8f0;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.review-dialog-actions {
|
||||
padding: 8px 24px 20px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.review-spinner {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
.review-dialog-content {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.review-summary-row {
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.evidence-options {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
+212
@@ -0,0 +1,212 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, inject } from '@angular/core';
|
||||
import {
|
||||
AbstractControl,
|
||||
FormArray,
|
||||
FormBuilder,
|
||||
ValidationErrors,
|
||||
Validators,
|
||||
ReactiveFormsModule
|
||||
} from '@angular/forms';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
/** Custom Services */
|
||||
import { AmlService } from '../../../aml/aml.service';
|
||||
|
||||
export interface AmlReviewDialogData {
|
||||
alert: any;
|
||||
disposition: 'WHITELIST' | 'ESCALATE';
|
||||
}
|
||||
|
||||
/**
|
||||
* Disposes of one engine alert: clear it (WHITELIST) or raise it as suspicious (ESCALATE).
|
||||
*
|
||||
* The alert being actioned is restated in full here rather than relying on the officer having
|
||||
* read the right table row — the two outcomes are not symmetric. WHITELIST closes the alert with
|
||||
* no report; ESCALATE opens an STR case and re-rates the client's risk, which is not something to
|
||||
* trigger from a stray click on a table. Notes are mandatory because they are the audit trail for
|
||||
* why a flagged transaction was cleared.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-aml-review-alert-dialog',
|
||||
templateUrl: './aml-review-alert-dialog.component.html',
|
||||
styleUrls: ['./aml-review-alert-dialog.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
MatDialogModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatCheckboxModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule
|
||||
]
|
||||
})
|
||||
export class AmlReviewAlertDialogComponent {
|
||||
private formBuilder = inject(FormBuilder);
|
||||
private amlService = inject(AmlService);
|
||||
private dialogRef = inject(MatDialogRef<AmlReviewAlertDialogComponent>);
|
||||
readonly data = inject<AmlReviewDialogData>(MAT_DIALOG_DATA);
|
||||
|
||||
submitting = false;
|
||||
errorMessage = '';
|
||||
|
||||
/**
|
||||
* What supports clearing the alert. The platform has no evidence table — m_aml_alert.review_notes
|
||||
* (VARCHAR(1000)) is the only field the review writes — so the classification is folded into that
|
||||
* one string rather than invented as a column the API cannot persist.
|
||||
*/
|
||||
readonly evidenceTypes = [
|
||||
'Customer explanation obtained',
|
||||
'Source of funds documented',
|
||||
'KYC / identity re-verified',
|
||||
'Consistent with declared income or turnover',
|
||||
'Established business or salary pattern',
|
||||
'Duplicate or system-generated alert',
|
||||
'Other'
|
||||
];
|
||||
|
||||
/** Leaves headroom for the composed prefix inside the 1000-char column. */
|
||||
private static readonly DETAIL_MAX = 800;
|
||||
private static readonly NOTES_COLUMN_MAX = 1000;
|
||||
|
||||
/** One checkbox per evidence type; a clearing decision can rest on several at once. */
|
||||
reviewForm = this.formBuilder.group({
|
||||
evidence: this.formBuilder.array(this.evidenceTypes.map(() => false)),
|
||||
evidenceRef: [
|
||||
'',
|
||||
Validators.maxLength(100)
|
||||
],
|
||||
notes: [
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.maxLength(AmlReviewAlertDialogComponent.DETAIL_MAX)
|
||||
]
|
||||
]
|
||||
});
|
||||
|
||||
constructor() {
|
||||
// Evidence classification is meaningless on an escalation — that path records grounds for
|
||||
// suspicion, not proof of innocence — so it is only required when clearing an alert.
|
||||
if (this.isWhitelist) {
|
||||
this.evidenceArray.addValidators(AmlReviewAlertDialogComponent.atLeastOneChecked);
|
||||
this.evidenceArray.updateValueAndValidity();
|
||||
}
|
||||
}
|
||||
|
||||
/** FormArray of booleans, so "none ticked" has to be checked across the whole array. */
|
||||
private static atLeastOneChecked(control: AbstractControl): ValidationErrors | null {
|
||||
const boxes = control as FormArray;
|
||||
return boxes.controls.some((c) => c.value === true) ? null : { required: true };
|
||||
}
|
||||
|
||||
get evidenceArray(): FormArray {
|
||||
return this.reviewForm.get('evidence') as FormArray;
|
||||
}
|
||||
|
||||
get selectedEvidence(): string[] {
|
||||
return this.evidenceTypes.filter((_, i) => this.evidenceArray.at(i)?.value === true);
|
||||
}
|
||||
|
||||
get evidenceMissing(): boolean {
|
||||
return this.isWhitelist && this.evidenceArray.invalid && this.evidenceArray.touched;
|
||||
}
|
||||
|
||||
get isWhitelist(): boolean {
|
||||
return this.data.disposition === 'WHITELIST';
|
||||
}
|
||||
|
||||
get detailMax(): number {
|
||||
return AmlReviewAlertDialogComponent.DETAIL_MAX;
|
||||
}
|
||||
|
||||
/** Exactly what will be written to the alert record, shown before the officer commits. */
|
||||
get composedNotes(): string {
|
||||
const v = this.reviewForm.value;
|
||||
const detail = (v.notes || '').trim();
|
||||
if (!this.isWhitelist) {
|
||||
return detail ? `Grounds: ${detail}` : '';
|
||||
}
|
||||
const parts: string[] = [];
|
||||
const selected = this.selectedEvidence;
|
||||
if (selected.length) {
|
||||
parts.push(`Evidence: ${selected.join('; ')}`);
|
||||
}
|
||||
if (v.evidenceRef) {
|
||||
parts.push(`Ref: ${(v.evidenceRef || '').trim()}`);
|
||||
}
|
||||
const head = parts.join(' | ');
|
||||
return head && detail ? `${head} — ${detail}` : head || detail;
|
||||
}
|
||||
|
||||
get composedTooLong(): boolean {
|
||||
return this.composedNotes.length > AmlReviewAlertDialogComponent.NOTES_COLUMN_MAX;
|
||||
}
|
||||
|
||||
get title(): string {
|
||||
return this.isWhitelist ? 'Whitelist Transaction' : 'Mark as Suspicious';
|
||||
}
|
||||
|
||||
get confirmLabel(): string {
|
||||
return this.isWhitelist ? 'Whitelist' : 'Escalate to STR';
|
||||
}
|
||||
|
||||
get notesLabel(): string {
|
||||
return this.isWhitelist ? 'Evidence detail' : 'What makes this transaction suspicious?';
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
if (this.reviewForm.invalid || this.composedTooLong) {
|
||||
this.reviewForm.markAllAsTouched();
|
||||
return;
|
||||
}
|
||||
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
this.amlService.reviewAlert(this.data.alert.id, this.data.disposition, this.composedNotes).subscribe({
|
||||
next: () => {
|
||||
this.submitting = false;
|
||||
this.dialogRef.close(this.data.disposition);
|
||||
},
|
||||
error: (err) => {
|
||||
this.submitting = false;
|
||||
this.errorMessage = this.readError(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
amount(): string {
|
||||
const value = Number(this.data.alert?.amount) || 0;
|
||||
return '₹' + value.toLocaleString('en-IN');
|
||||
}
|
||||
|
||||
private readError(err: any): string {
|
||||
const body = err?.error;
|
||||
const first = body?.errors?.[0];
|
||||
return (
|
||||
first?.defaultUserMessage || first?.developerMessage || body?.defaultUserMessage || 'Could not record the review.'
|
||||
);
|
||||
}
|
||||
}
|
||||
+217
@@ -0,0 +1,217 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="ra-intro">
|
||||
<mat-icon class="ra-intro-icon">policy</mat-icon>
|
||||
<span>
|
||||
Customers the engine has flagged more than once. One alert is a question about a transaction — a pattern is a
|
||||
question about the customer, which is what gets reviewed and recorded here.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- What counts as "regularly" is a policy call, so it is set on screen rather than baked in -->
|
||||
<div class="ra-controls">
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="ra-control">
|
||||
<mat-label>Flag after</mat-label>
|
||||
<mat-select [(ngModel)]="minAlerts" (ngModelChange)="load()">
|
||||
<mat-option *ngFor="let t of thresholdOptions" [value]="t">{{ t }}+ alerts</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="ra-control">
|
||||
<mat-label>Within</mat-label>
|
||||
<mat-select [(ngModel)]="windowDays" (ngModelChange)="load()">
|
||||
<mat-option *ngFor="let w of windowOptions" [value]="w.value">{{ w.label }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-checkbox [(ngModel)]="onlyNeedingReview" (ngModelChange)="load()" class="ra-check">
|
||||
Only awaiting review
|
||||
</mat-checkbox>
|
||||
|
||||
<span class="ra-spacer"></span>
|
||||
|
||||
<span *ngIf="needingReviewCount > 0" class="ra-pending-pill">
|
||||
<mat-icon>pending_actions</mat-icon>
|
||||
{{ needingReviewCount }} awaiting review
|
||||
</span>
|
||||
<mat-spinner *ngIf="loading" diameter="18"></mat-spinner>
|
||||
<button mat-icon-button type="button" matTooltip="Refresh" [disabled]="loading" (click)="load()">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="loadFailed" class="ra-error">
|
||||
<mat-icon>cloud_off</mat-icon>
|
||||
<span>Could not load the review queue.</span>
|
||||
</div>
|
||||
|
||||
<!-- Named on screen, because sample rows must never be mistaken for engine output on an AML queue -->
|
||||
<div *ngIf="usingDemoData && rows.data.length > 0" class="ra-demo">
|
||||
<mat-icon>science</mat-icon>
|
||||
<span>
|
||||
Showing <strong>sample data</strong> — the AML engine returned no recurring alerts for this threshold and window.
|
||||
These rows are for demonstration only and are not reportable.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<table mat-table [dataSource]="rows" class="ra-table mat-elevation-z1" multiTemplateDataRows>
|
||||
<ng-container matColumnDef="customer">
|
||||
<th mat-header-cell *matHeaderCellDef>Customer</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<div class="ra-stacked">
|
||||
<span class="ra-name">{{ row.clientDisplayName }}</span>
|
||||
<span class="ra-sub">
|
||||
ID {{ row.clientId }}<span *ngIf="row.accountNo"> · {{ row.accountNo }}</span> · KYC risk
|
||||
<span [ngClass]="riskClass(row.clientRiskCategory)">{{ riskLabel(row.clientRiskCategory) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="alertCount">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Alerts</th>
|
||||
<td mat-cell *matCellDef="let row" class="col-center">
|
||||
<span class="ra-count">{{ row.alertCount }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="severity">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Severity</th>
|
||||
<td mat-cell *matCellDef="let row" class="col-center">
|
||||
<div class="ra-stacked ra-stacked-center">
|
||||
<span class="ra-high" [class.ra-high-zero]="row.highRiskCount === 0">{{ row.highRiskCount }} High</span>
|
||||
<span class="ra-sub">{{ row.openCount }} open · {{ row.escalatedCount }} escalated</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="rules">
|
||||
<th mat-header-cell *matHeaderCellDef>Rules Tripped</th>
|
||||
<td mat-cell *matCellDef="let row" class="ra-rules-cell">
|
||||
<div class="ra-stacked">
|
||||
<span class="ra-name">{{ row.distinctRules }} distinct</span>
|
||||
<span class="ra-sub" [matTooltip]="row.ruleCodes?.join(', ')">{{ row.ruleCodes?.join(', ') }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="totalAmount">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-right">Total Value</th>
|
||||
<td mat-cell *matCellDef="let row" class="col-right ra-amount">{{ amount(row.totalAmount) }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="lastAlert">
|
||||
<th mat-header-cell *matHeaderCellDef>Activity</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<div class="ra-stacked">
|
||||
<span>{{ row.lastAlertOnDate ? (row.lastAlertOnDate | date: 'dd MMM yyyy') : '—' }}</span>
|
||||
<span class="ra-sub">
|
||||
first {{ row.firstAlertOnDate ? (row.firstAlertOnDate | date: 'dd MMM yyyy') : '—' }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="reviewState">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Review</th>
|
||||
<td mat-cell *matCellDef="let row" class="col-center">
|
||||
<span *ngIf="row.needsReview && !row.lastReviewedOn" class="ra-state ra-state-new">Never reviewed</span>
|
||||
<span
|
||||
*ngIf="row.needsReview && row.lastReviewedOn"
|
||||
class="ra-state ra-state-again"
|
||||
[matTooltip]="
|
||||
'Reviewed at ' + row.alertCountAtLastReview + ' alert(s); ' + row.alertCount + ' now — new activity since.'
|
||||
"
|
||||
>
|
||||
New activity
|
||||
</span>
|
||||
<div *ngIf="!row.needsReview" class="ra-stacked ra-stacked-center">
|
||||
<span class="ra-state ra-state-done">{{ row.lastReviewOutcome }}</span>
|
||||
<span class="ra-sub" [matTooltip]="row.lastReviewNotes">
|
||||
{{ row.lastReviewedByUsername }} · {{ row.lastReviewedOnDate | date: 'dd MMM' }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Action</th>
|
||||
<td mat-cell *matCellDef="let row" class="col-center ra-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="ra-btn ra-btn-detail"
|
||||
[matTooltip]="isExpanded(row) ? 'Hide transactions' : 'Show the triggering transactions'"
|
||||
(click)="toggleExpanded(row)"
|
||||
>
|
||||
<mat-icon>{{ isExpanded(row) ? 'expand_less' : 'expand_more' }}</mat-icon>
|
||||
{{ row.alertCount }} txns
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ra-btn ra-btn-review"
|
||||
*mifosxHasPermission="'REVIEW_AML_ALERT'"
|
||||
matTooltip="Record why this customer keeps surfacing"
|
||||
(click)="review(row)"
|
||||
>
|
||||
<mat-icon>fact_check</mat-icon>
|
||||
Review
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Inline detail: the transactions behind the count, so the reviewer never has to guess -->
|
||||
<ng-container matColumnDef="detail">
|
||||
<td mat-cell *matCellDef="let row" [attr.colspan]="displayedColumns.length" class="ra-detail-cell">
|
||||
<div class="ra-detail" *ngIf="isExpanded(row)">
|
||||
<table class="ra-detail-tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Raised On</th>
|
||||
<th>Transaction</th>
|
||||
<th>Rule</th>
|
||||
<th class="col-right">Amount</th>
|
||||
<th>Status</th>
|
||||
<th>Review Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let a of row.alerts">
|
||||
<td>{{ a.raisedOnDate ? (a.raisedOnDate | date: 'dd MMM yyyy, HH:mm') : '—' }}</td>
|
||||
<td>{{ a.transactionType }} #{{ a.transactionId }}</td>
|
||||
<td>
|
||||
{{ a.ruleCode }}
|
||||
<span class="ra-sub">{{ a.ruleDescription }}</span>
|
||||
</td>
|
||||
<td class="col-right ra-amount">{{ amount(a.amount) }}</td>
|
||||
<td>{{ a.status }}</td>
|
||||
<td class="ra-sub">{{ a.reviewNotes || '—' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
class="ra-row"
|
||||
[class.ra-row-pending]="row.needsReview"
|
||||
></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: ['detail']" class="ra-detail-row"></tr>
|
||||
</table>
|
||||
|
||||
<div *ngIf="rows.data.length === 0 && !loading" class="ra-empty">
|
||||
<mat-icon>verified_user</mat-icon>
|
||||
<span>
|
||||
No customer has reached {{ minAlerts }} alerts in the selected window. Lower the threshold or widen the window to
|
||||
see borderline cases.
|
||||
</span>
|
||||
</div>
|
||||
+358
@@ -0,0 +1,358 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.ra-intro {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 11px 14px;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 8px;
|
||||
background: #eff6ff;
|
||||
color: #1e40af;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ra-intro-icon {
|
||||
flex: 0 0 auto;
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.ra-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.ra-control {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.ra-check {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ra-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.ra-pending-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 12px;
|
||||
border: 1px solid #fdba74;
|
||||
border-radius: 999px;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
|
||||
mat-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.ra-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 6px;
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ra-demo {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #fde68a;
|
||||
border-radius: 6px;
|
||||
background: #fffbeb;
|
||||
color: #92400e;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
|
||||
mat-icon {
|
||||
flex: 0 0 auto;
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.ra-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
|
||||
th {
|
||||
background-color: #f1f5f9;
|
||||
color: #475569;
|
||||
font-weight: 600;
|
||||
font-size: 12.5px;
|
||||
padding: 14px 16px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
color: #1e293b;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
.ra-row:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Anything still owed a decision is tinted, so the queue reads at a glance. */
|
||||
.ra-row-pending {
|
||||
background: #fffbeb;
|
||||
|
||||
&:hover {
|
||||
background: #fef3c7;
|
||||
}
|
||||
}
|
||||
|
||||
.col-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.col-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ra-stacked {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.ra-stacked-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ra-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ra-sub {
|
||||
color: #64748b;
|
||||
font-size: 11.5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ra-rules-cell {
|
||||
max-width: 260px;
|
||||
|
||||
.ra-sub {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ra-count {
|
||||
display: inline-block;
|
||||
min-width: 30px;
|
||||
padding: 3px 9px;
|
||||
border-radius: 999px;
|
||||
background: #1a237e;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.ra-high {
|
||||
font-weight: 700;
|
||||
color: #b91c1c;
|
||||
font-size: 12.5px;
|
||||
|
||||
&.ra-high-zero {
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.ra-amount {
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ra-risk {
|
||||
font-weight: 700;
|
||||
|
||||
&.ra-risk-low {
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
&.ra-risk-medium {
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
&.ra-risk-high {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
&.ra-risk-none {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.ra-state {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
|
||||
&.ra-state-new {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
&.ra-state-again {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
&.ra-state-done {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
}
|
||||
}
|
||||
|
||||
.ra-actions {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ra-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 11px;
|
||||
margin: 2px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
|
||||
mat-icon {
|
||||
font-size: 15px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ra-btn-detail {
|
||||
border-color: #cbd5e1;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
|
||||
&:hover {
|
||||
border-color: #1a237e;
|
||||
color: #1a237e;
|
||||
}
|
||||
}
|
||||
|
||||
.ra-btn-review {
|
||||
border-color: #c7d2fe;
|
||||
background: #eef2ff;
|
||||
color: #3730a3;
|
||||
|
||||
&:hover {
|
||||
background: #e0e7ff;
|
||||
border-color: #a5b4fc;
|
||||
}
|
||||
}
|
||||
|
||||
/* Detail row is always rendered by multiTemplateDataRows; the padding collapses when empty so a
|
||||
collapsed row leaves no gap. */
|
||||
.ra-detail-cell {
|
||||
padding: 0 !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.ra-detail {
|
||||
padding: 12px 16px 16px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.ra-detail-tbl {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
th {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
font-weight: 700;
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 8px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
color: #1e293b;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.ra-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 48px 24px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
|
||||
mat-icon {
|
||||
font-size: 48px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
+258
@@ -0,0 +1,258 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { MatTableModule, MatTableDataSource } from '@angular/material/table';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
/** Custom Services */
|
||||
import { AmlService } from '../../../aml/aml.service';
|
||||
import { AlertService } from '../../../core/alert/alert.service';
|
||||
import { HasPermissionDirective } from '../../../directives/has-permission/has-permission.directive';
|
||||
import { AmlRecurringReviewDialogComponent } from './aml-recurring-review-dialog.component';
|
||||
import { amlRecurringAlertsDemoData } from './aml-recurring-alerts.demo-data';
|
||||
|
||||
/**
|
||||
* Customers whose transactions keep tripping the AML engine, queued for an employee to review why.
|
||||
*
|
||||
* A single alert is a transaction question and is handled on the Flagged Transactions tab. This tab
|
||||
* asks a different question — is this *customer's* pattern of behaviour acceptable — which no single
|
||||
* alert can answer. Reviews are recorded against the alert count seen, so a customer leaves the
|
||||
* queue once reviewed and only returns when the engine flags them again.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-aml-recurring-alerts',
|
||||
templateUrl: './aml-recurring-alerts.component.html',
|
||||
styleUrls: ['./aml-recurring-alerts.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatTableModule,
|
||||
MatIconModule,
|
||||
MatButtonModule,
|
||||
MatTooltipModule,
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
MatCheckboxModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatDialogModule,
|
||||
HasPermissionDirective
|
||||
]
|
||||
})
|
||||
export class AmlRecurringAlertsComponent implements OnInit {
|
||||
private amlService = inject(AmlService);
|
||||
private dialog = inject(MatDialog);
|
||||
private alertService = inject(AlertService);
|
||||
|
||||
rows = new MatTableDataSource<any>([]);
|
||||
displayedColumns: string[] = [
|
||||
'customer',
|
||||
'alertCount',
|
||||
'severity',
|
||||
'rules',
|
||||
'totalAmount',
|
||||
'lastAlert',
|
||||
'reviewState',
|
||||
'actions'
|
||||
];
|
||||
|
||||
/**
|
||||
* Matches ClientRiskEscalationServiceImpl.ESCALATION_THRESHOLD, which already treats 3 cumulative
|
||||
* AML events as the point a customer's risk rating is reconsidered.
|
||||
*/
|
||||
minAlerts = 3;
|
||||
windowDays = 90;
|
||||
onlyNeedingReview = false;
|
||||
|
||||
readonly thresholdOptions = [
|
||||
2,
|
||||
3,
|
||||
5,
|
||||
10
|
||||
];
|
||||
readonly windowOptions = [
|
||||
{ value: 30, label: 'Last 30 days' },
|
||||
{ value: 90, label: 'Last 90 days' },
|
||||
{ value: 180, label: 'Last 6 months' },
|
||||
{ value: 365, label: 'Last 12 months' }
|
||||
];
|
||||
|
||||
loading = false;
|
||||
loadFailed = false;
|
||||
/** Set when the rows on screen are the sample set rather than engine output. */
|
||||
usingDemoData = false;
|
||||
/** Which customer's alert detail is expanded inline. */
|
||||
expandedClientId: number | null = null;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.load();
|
||||
}
|
||||
|
||||
load(): void {
|
||||
this.loading = true;
|
||||
this.loadFailed = false;
|
||||
this.expandedClientId = null;
|
||||
this.amlService.getRecurringAlerts(this.minAlerts, this.windowDays, this.onlyNeedingReview).subscribe({
|
||||
next: (data) => {
|
||||
this.loading = false;
|
||||
const rows = data || [];
|
||||
this.usingDemoData = rows.length === 0;
|
||||
this.rows.data = this.mapRows(this.usingDemoData ? this.demoRows() : rows);
|
||||
},
|
||||
error: () => {
|
||||
this.loading = false;
|
||||
this.loadFailed = true;
|
||||
this.usingDemoData = true;
|
||||
this.rows.data = this.mapRows(this.demoRows());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Parses the date fields the template renders. Shared by engine rows and the sample set. */
|
||||
private mapRows(rows: any[]): any[] {
|
||||
return rows.map((r: any) => ({
|
||||
...r,
|
||||
firstAlertOnDate: this.toDate(r.firstAlertOn),
|
||||
lastAlertOnDate: this.toDate(r.lastAlertOn),
|
||||
lastReviewedOnDate: this.toDate(r.lastReviewedOn),
|
||||
alerts: (r.alerts || []).map((a: any) => ({ ...a, raisedOnDate: this.toDate(a.raisedOn) }))
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* The sample set narrowed by the on-screen controls, so the threshold and window selectors behave
|
||||
* the way they would against the engine instead of returning the same three rows regardless.
|
||||
*/
|
||||
private demoRows(): any[] {
|
||||
const cutoff = Date.now() - this.windowDays * 24 * 60 * 60 * 1000;
|
||||
return amlRecurringAlertsDemoData()
|
||||
.map((row: any) => {
|
||||
const alerts = (row.alerts || []).filter((a: any) => new Date(a.raisedOn).getTime() >= cutoff);
|
||||
const ruleCodes = Array.from(new Set(alerts.map((a: any) => a.ruleCode)));
|
||||
return {
|
||||
...row,
|
||||
alerts,
|
||||
alertCount: alerts.length,
|
||||
openCount: alerts.filter((a: any) => a.status === 'OPEN').length,
|
||||
escalatedCount: alerts.filter((a: any) => a.status === 'ESCALATED').length,
|
||||
// Severity sits on the alert server-side; the sample rows carry a row total, so it is
|
||||
// capped at what survived the window rather than recomputed.
|
||||
highRiskCount: Math.min(row.highRiskCount, alerts.length),
|
||||
distinctRules: ruleCodes.length,
|
||||
ruleCodes,
|
||||
totalAmount: alerts.reduce((sum: number, a: any) => sum + (Number(a.amount) || 0), 0),
|
||||
firstAlertOn: alerts.length ? alerts[0].raisedOn : null,
|
||||
lastAlertOn: alerts.length ? alerts[alerts.length - 1].raisedOn : null
|
||||
};
|
||||
})
|
||||
.filter((row: any) => row.alertCount >= this.minAlerts)
|
||||
.filter((row: any) => !this.onlyNeedingReview || row.needsReview);
|
||||
}
|
||||
|
||||
toggleExpanded(row: any): void {
|
||||
this.expandedClientId = this.expandedClientId === row.clientId ? null : row.clientId;
|
||||
}
|
||||
|
||||
isExpanded(row: any): boolean {
|
||||
return this.expandedClientId === row.clientId;
|
||||
}
|
||||
|
||||
get needingReviewCount(): number {
|
||||
return this.rows.data.filter((r) => r.needsReview).length;
|
||||
}
|
||||
|
||||
review(row: any): void {
|
||||
const dialogRef = this.dialog.open(AmlRecurringReviewDialogComponent, {
|
||||
width: '780px',
|
||||
maxWidth: '95vw',
|
||||
autoFocus: false,
|
||||
disableClose: true,
|
||||
data: { row, windowDays: this.windowDays }
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((outcome: string | undefined) => {
|
||||
if (!outcome) {
|
||||
return;
|
||||
}
|
||||
this.alertService.alert({
|
||||
type: 'Review Recorded',
|
||||
message: `${row.clientDisplayName} reviewed as ${outcome}.`
|
||||
});
|
||||
// Re-read: the review changes needsReview, and the count recorded server-side is what the
|
||||
// row must now reflect.
|
||||
this.load();
|
||||
});
|
||||
}
|
||||
|
||||
amount(value: any): string {
|
||||
return '₹' + (Number(value) || 0).toLocaleString('en-IN');
|
||||
}
|
||||
|
||||
riskLabel(category: any): string {
|
||||
switch (Number(category)) {
|
||||
case 1:
|
||||
return 'Low';
|
||||
case 2:
|
||||
return 'Medium';
|
||||
case 3:
|
||||
return 'High';
|
||||
default:
|
||||
return 'Unrated';
|
||||
}
|
||||
}
|
||||
|
||||
riskClass(category: any): string {
|
||||
switch (Number(category)) {
|
||||
case 1:
|
||||
return 'ra-risk ra-risk-low';
|
||||
case 2:
|
||||
return 'ra-risk ra-risk-medium';
|
||||
case 3:
|
||||
return 'ra-risk ra-risk-high';
|
||||
default:
|
||||
return 'ra-risk ra-risk-none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fineract's Gson adapter emits LocalDateTime as [y, M, d, H, m, s] rather than an ISO string, so
|
||||
* the date pipe renders nothing unless it is converted first. Month is 1-based there, 0-based in Date.
|
||||
*/
|
||||
private toDate(value: any): Date | null {
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
if (Array.isArray(value)) {
|
||||
const [
|
||||
y,
|
||||
M,
|
||||
d,
|
||||
H = 0,
|
||||
m = 0,
|
||||
s = 0
|
||||
] = value;
|
||||
if (y == null || M == null || d == null) {
|
||||
return null;
|
||||
}
|
||||
return new Date(y, M - 1, d, H, m, s);
|
||||
}
|
||||
const parsed = new Date(value);
|
||||
return isNaN(parsed.getTime()) ? null : parsed;
|
||||
}
|
||||
}
|
||||
+248
@@ -0,0 +1,248 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Sample recurring-alert rows for the AML review queue, used only when the engine returns nothing
|
||||
* for the selected window so the screen can be demonstrated and reviewed.
|
||||
*
|
||||
* Shaped exactly like the `/aml/recurring-alerts` response — dates as ISO strings, alerts nested —
|
||||
* so the rows travel through the component's normal mapping rather than a second code path.
|
||||
*
|
||||
* Dates are generated relative to today rather than hard-coded, otherwise every row would fall
|
||||
* outside the "last 90 days" window as soon as the file aged.
|
||||
*/
|
||||
|
||||
/** ISO timestamp `days` before now, at the given hour and minute. */
|
||||
function daysAgo(days: number, hour = 11, minute = 20): string {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() - days);
|
||||
d.setHours(hour, minute, 0, 0);
|
||||
return d.toISOString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Three customers covering the three review states the table renders: never reviewed, reviewed but
|
||||
* flagged again since, and reviewed with an outcome recorded.
|
||||
*/
|
||||
export function amlRecurringAlertsDemoData(): any[] {
|
||||
return [
|
||||
// Never reviewed — the row the queue exists to surface.
|
||||
{
|
||||
clientId: 10078,
|
||||
clientDisplayName: 'Ravi Kumar Sharma',
|
||||
accountNo: '000000010078',
|
||||
clientRiskCategory: 3,
|
||||
alertCount: 5,
|
||||
highRiskCount: 3,
|
||||
openCount: 4,
|
||||
escalatedCount: 1,
|
||||
distinctRules: 3,
|
||||
ruleCodes: [
|
||||
'CASH_TXN_10L',
|
||||
'STRUCTURING',
|
||||
'RAPID_MOVEMENT'
|
||||
],
|
||||
totalAmount: 4785000,
|
||||
firstAlertOn: daysAgo(62, 10, 5),
|
||||
lastAlertOn: daysAgo(3, 15, 42),
|
||||
needsReview: true,
|
||||
lastReviewedOn: null,
|
||||
alertCountAtLastReview: null,
|
||||
lastReviewOutcome: null,
|
||||
lastReviewedByUsername: null,
|
||||
lastReviewNotes: null,
|
||||
alerts: [
|
||||
{
|
||||
alertId: 90121,
|
||||
raisedOn: daysAgo(62, 10, 5),
|
||||
transactionType: 'Savings Deposit',
|
||||
transactionId: 552301,
|
||||
ruleCode: 'CASH_TXN_10L',
|
||||
ruleDescription: 'Cash deposit at or above ₹10,00,000 in a single transaction',
|
||||
amount: 1200000,
|
||||
status: 'OPEN',
|
||||
reviewNotes: null
|
||||
},
|
||||
{
|
||||
alertId: 90144,
|
||||
raisedOn: daysAgo(48, 12, 18),
|
||||
transactionType: 'Savings Deposit',
|
||||
transactionId: 553980,
|
||||
ruleCode: 'STRUCTURING',
|
||||
ruleDescription: 'Multiple cash deposits just below the reporting threshold within 48 hours',
|
||||
amount: 890000,
|
||||
status: 'OPEN',
|
||||
reviewNotes: null
|
||||
},
|
||||
{
|
||||
alertId: 90190,
|
||||
raisedOn: daysAgo(29, 9, 55),
|
||||
transactionType: 'Savings Withdrawal',
|
||||
transactionId: 556114,
|
||||
ruleCode: 'RAPID_MOVEMENT',
|
||||
ruleDescription: 'Funds withdrawn within 24 hours of a large credit',
|
||||
amount: 1150000,
|
||||
status: 'ESCALATED',
|
||||
reviewNotes: 'Escalated to Principal Officer — source of funds not established.'
|
||||
},
|
||||
{
|
||||
alertId: 90233,
|
||||
raisedOn: daysAgo(14, 16, 30),
|
||||
transactionType: 'Savings Deposit',
|
||||
transactionId: 558702,
|
||||
ruleCode: 'CASH_TXN_10L',
|
||||
ruleDescription: 'Cash deposit at or above ₹10,00,000 in a single transaction',
|
||||
amount: 1045000,
|
||||
status: 'OPEN',
|
||||
reviewNotes: null
|
||||
},
|
||||
{
|
||||
alertId: 90275,
|
||||
raisedOn: daysAgo(3, 15, 42),
|
||||
transactionType: 'Savings Withdrawal',
|
||||
transactionId: 560488,
|
||||
ruleCode: 'STRUCTURING',
|
||||
ruleDescription: 'Multiple cash deposits just below the reporting threshold within 48 hours',
|
||||
amount: 500000,
|
||||
status: 'OPEN',
|
||||
reviewNotes: null
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// Reviewed at 2 alerts, flagged twice since — returns to the queue as "New activity".
|
||||
{
|
||||
clientId: 10079,
|
||||
clientDisplayName: 'Priya Patel',
|
||||
accountNo: '000000010079',
|
||||
clientRiskCategory: 2,
|
||||
alertCount: 4,
|
||||
highRiskCount: 1,
|
||||
openCount: 2,
|
||||
escalatedCount: 0,
|
||||
distinctRules: 2,
|
||||
ruleCodes: [
|
||||
'HIGH_VALUE_TRANSFER',
|
||||
'ROUND_TRIPPING'
|
||||
],
|
||||
totalAmount: 2130000,
|
||||
firstAlertOn: daysAgo(71, 14, 10),
|
||||
lastAlertOn: daysAgo(6, 11, 5),
|
||||
needsReview: true,
|
||||
lastReviewedOn: daysAgo(34, 17, 0),
|
||||
alertCountAtLastReview: 2,
|
||||
lastReviewOutcome: 'MONITOR',
|
||||
lastReviewedByUsername: 'anjali.mehta',
|
||||
lastReviewNotes: 'Textile trading receipts, invoices seen. Keep under watch for one more quarter.',
|
||||
alerts: [
|
||||
{
|
||||
alertId: 90102,
|
||||
raisedOn: daysAgo(71, 14, 10),
|
||||
transactionType: 'Account Transfer',
|
||||
transactionId: 551002,
|
||||
ruleCode: 'HIGH_VALUE_TRANSFER',
|
||||
ruleDescription: 'Transfer above ₹5,00,000 to an unrelated account',
|
||||
amount: 620000,
|
||||
status: 'WHITELISTED',
|
||||
reviewNotes: 'Supplier payment, invoice verified.'
|
||||
},
|
||||
{
|
||||
alertId: 90158,
|
||||
raisedOn: daysAgo(41, 10, 45),
|
||||
transactionType: 'Account Transfer',
|
||||
transactionId: 554330,
|
||||
ruleCode: 'ROUND_TRIPPING',
|
||||
ruleDescription: 'Funds returned to the originating account within seven days',
|
||||
amount: 450000,
|
||||
status: 'WHITELISTED',
|
||||
reviewNotes: 'Advance refunded after order cancellation.'
|
||||
},
|
||||
{
|
||||
alertId: 90241,
|
||||
raisedOn: daysAgo(19, 13, 25),
|
||||
transactionType: 'Account Transfer',
|
||||
transactionId: 559011,
|
||||
ruleCode: 'HIGH_VALUE_TRANSFER',
|
||||
ruleDescription: 'Transfer above ₹5,00,000 to an unrelated account',
|
||||
amount: 540000,
|
||||
status: 'OPEN',
|
||||
reviewNotes: null
|
||||
},
|
||||
{
|
||||
alertId: 90268,
|
||||
raisedOn: daysAgo(6, 11, 5),
|
||||
transactionType: 'Account Transfer',
|
||||
transactionId: 560190,
|
||||
ruleCode: 'ROUND_TRIPPING',
|
||||
ruleDescription: 'Funds returned to the originating account within seven days',
|
||||
amount: 520000,
|
||||
status: 'OPEN',
|
||||
reviewNotes: null
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// Reviewed with an outcome and no activity since — shows the settled state.
|
||||
{
|
||||
clientId: 10080,
|
||||
clientDisplayName: 'Arjun Deshmukh',
|
||||
accountNo: '000000010080',
|
||||
clientRiskCategory: 1,
|
||||
alertCount: 3,
|
||||
highRiskCount: 0,
|
||||
openCount: 0,
|
||||
escalatedCount: 0,
|
||||
distinctRules: 1,
|
||||
ruleCodes: ['CASH_TXN_10L'],
|
||||
totalAmount: 3420000,
|
||||
firstAlertOn: daysAgo(80, 9, 30),
|
||||
lastAlertOn: daysAgo(23, 12, 15),
|
||||
needsReview: false,
|
||||
lastReviewedOn: daysAgo(9, 15, 20),
|
||||
alertCountAtLastReview: 3,
|
||||
lastReviewOutcome: 'CLEARED',
|
||||
lastReviewedByUsername: 'vikram.singh',
|
||||
lastReviewNotes: 'Sugarcane crushing-season proceeds. Mill settlement statements filed with the branch.',
|
||||
alerts: [
|
||||
{
|
||||
alertId: 90088,
|
||||
raisedOn: daysAgo(80, 9, 30),
|
||||
transactionType: 'Savings Deposit',
|
||||
transactionId: 550210,
|
||||
ruleCode: 'CASH_TXN_10L',
|
||||
ruleDescription: 'Cash deposit at or above ₹10,00,000 in a single transaction',
|
||||
amount: 1180000,
|
||||
status: 'WHITELISTED',
|
||||
reviewNotes: 'Mill settlement for the 2025-26 crushing season.'
|
||||
},
|
||||
{
|
||||
alertId: 90165,
|
||||
raisedOn: daysAgo(52, 11, 0),
|
||||
transactionType: 'Savings Deposit',
|
||||
transactionId: 554901,
|
||||
ruleCode: 'CASH_TXN_10L',
|
||||
ruleDescription: 'Cash deposit at or above ₹10,00,000 in a single transaction',
|
||||
amount: 1090000,
|
||||
status: 'WHITELISTED',
|
||||
reviewNotes: 'Second instalment, statement on record.'
|
||||
},
|
||||
{
|
||||
alertId: 90212,
|
||||
raisedOn: daysAgo(23, 12, 15),
|
||||
transactionType: 'Savings Deposit',
|
||||
transactionId: 557640,
|
||||
ruleCode: 'CASH_TXN_10L',
|
||||
ruleDescription: 'Cash deposit at or above ₹10,00,000 in a single transaction',
|
||||
amount: 1150000,
|
||||
status: 'WHITELISTED',
|
||||
reviewNotes: 'Final instalment for the season.'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
+127
@@ -0,0 +1,127 @@
|
||||
<!--
|
||||
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/.
|
||||
-->
|
||||
|
||||
<h2 mat-dialog-title class="rr-dialog-title">
|
||||
<mat-icon>fact_check</mat-icon>
|
||||
Review Repeat Activity — {{ data.row.clientDisplayName }}
|
||||
</h2>
|
||||
|
||||
<mat-dialog-content class="rr-dialog-content">
|
||||
<div class="rr-summary">
|
||||
<div class="rr-summary-row">
|
||||
<span class="rr-label">Customer</span>
|
||||
<span class="rr-value">
|
||||
{{ data.row.clientDisplayName }}
|
||||
<span class="rr-muted"
|
||||
>(ID {{ data.row.clientId }}{{ data.row.accountNo ? ' · ' + data.row.accountNo : '' }})</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div class="rr-summary-row">
|
||||
<span class="rr-label">Alerts</span>
|
||||
<span class="rr-value">
|
||||
<strong>{{ data.row.alertCount }}</strong> in the last {{ data.windowDays }} days ·
|
||||
{{ data.row.highRiskCount }} High risk · {{ data.row.distinctRules }} distinct rule(s)
|
||||
</span>
|
||||
</div>
|
||||
<div class="rr-summary-row">
|
||||
<span class="rr-label">Value</span>
|
||||
<span class="rr-value rr-mono">{{ amount(data.row.totalAmount) }}</span>
|
||||
</div>
|
||||
<div class="rr-summary-row">
|
||||
<span class="rr-label">Rules</span>
|
||||
<span class="rr-value">{{ data.row.ruleCodes?.join(', ') || '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The triggering transactions, so the decision is made against the evidence -->
|
||||
<div class="rr-alerts">
|
||||
<span class="rr-alerts-legend">Triggering transactions</span>
|
||||
<div class="rr-alerts-scroll">
|
||||
<table class="rr-alerts-tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Raised On</th>
|
||||
<th>Transaction</th>
|
||||
<th>Rule</th>
|
||||
<th class="ta-r">Amount</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let a of data.row.alerts">
|
||||
<td>{{ a.raisedOnDate | date: 'dd MMM yyyy, HH:mm' }}</td>
|
||||
<td>{{ a.transactionType }} #{{ a.transactionId }}</td>
|
||||
<td>{{ a.ruleCode }}</td>
|
||||
<td class="ta-r rr-mono">{{ amount(a.amount) }}</td>
|
||||
<td>{{ a.status }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="data.row.lastReviewedOn" class="rr-prior">
|
||||
<mat-icon>history</mat-icon>
|
||||
<span>
|
||||
Last reviewed by <strong>{{ data.row.lastReviewedByUsername }}</strong> on
|
||||
{{ data.row.lastReviewedOnDate | date: 'dd MMM yyyy' }} at {{ data.row.alertCountAtLastReview }} alert(s) —
|
||||
{{ data.row.lastReviewOutcome }}. {{ data.row.lastReviewNotes }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="errorMessage" class="rr-error">
|
||||
<mat-icon>error_outline</mat-icon>
|
||||
<span>{{ errorMessage }}</span>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="reviewForm" autocomplete="off">
|
||||
<div class="rr-outcome">
|
||||
<span class="rr-outcome-legend">Conclusion</span>
|
||||
<mat-radio-group formControlName="outcome" class="rr-outcome-options">
|
||||
<mat-radio-button *ngFor="let o of outcomes" [value]="o.value" class="rr-outcome-option">
|
||||
{{ o.label }}
|
||||
<span class="rr-muted">— {{ o.hint }}</span>
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<mat-form-field appearance="outline" class="rr-notes-field">
|
||||
<mat-label>Why does this customer keep surfacing?</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
rows="4"
|
||||
formControlName="notes"
|
||||
placeholder="What the pattern is, what was checked, and what was decided"
|
||||
></textarea>
|
||||
<mat-error *ngIf="reviewForm.get('notes')?.hasError('required')">
|
||||
Required — this is the audit record for the decision
|
||||
</mat-error>
|
||||
<mat-error *ngIf="reviewForm.get('notes')?.hasError('maxlength')">Keep this under 1000 characters</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<p class="rr-note">
|
||||
Recorded against the current count of {{ data.row.alertCount }} alert(s). The customer returns to this queue if
|
||||
the engine flags them again.
|
||||
</p>
|
||||
</form>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end" class="rr-dialog-actions">
|
||||
<button mat-stroked-button type="button" [disabled]="submitting" (click)="cancel()">Cancel</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
type="button"
|
||||
[disabled]="reviewForm.invalid || submitting"
|
||||
(click)="submit()"
|
||||
>
|
||||
<mat-spinner *ngIf="submitting" diameter="18" class="rr-spinner"></mat-spinner>
|
||||
{{ submitting ? 'Saving…' : 'Record Review' }}
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
+191
@@ -0,0 +1,191 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.rr-dialog-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #1a237e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rr-dialog-content {
|
||||
padding-top: 8px;
|
||||
min-width: 620px;
|
||||
max-width: 780px;
|
||||
}
|
||||
|
||||
.rr-summary {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.rr-summary-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.rr-label {
|
||||
flex: 0 0 84px;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.rr-value {
|
||||
flex: 1 1 auto;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.rr-muted {
|
||||
color: #64748b;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.rr-mono {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.rr-alerts {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.rr-alerts-legend,
|
||||
.rr-outcome-legend {
|
||||
display: block;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #64748b;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* Capped so a customer with twenty alerts cannot push the buttons off screen. */
|
||||
.rr-alerts-scroll {
|
||||
max-height: 190px;
|
||||
overflow: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rr-alerts-tbl {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
font-weight: 700;
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 8px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
color: #1e293b;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ta-r {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rr-prior,
|
||||
.rr-error {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.45;
|
||||
|
||||
mat-icon {
|
||||
flex: 0 0 auto;
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.rr-prior {
|
||||
border: 1px solid #cbd5e1;
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.rr-error {
|
||||
border: 1px solid #fecaca;
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rr-outcome {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.rr-outcome-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.rr-outcome-option {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.rr-notes-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rr-note {
|
||||
margin: 4px 0 0;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.rr-dialog-actions {
|
||||
padding: 8px 24px 20px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rr-spinner {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media (width <= 700px) {
|
||||
.rr-dialog-content {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.rr-summary-row {
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
/** Custom Services */
|
||||
import { AmlService } from '../../../aml/aml.service';
|
||||
|
||||
export interface AmlRecurringReviewDialogData {
|
||||
row: any;
|
||||
windowDays: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Records why a customer keeps tripping the AML engine.
|
||||
*
|
||||
* This is a judgement on the customer's pattern, not on any single transaction — the individual
|
||||
* alerts are still disposed of one by one on the Flagged Transactions tab. Choosing ESCALATED here
|
||||
* documents the reviewer's conclusion; it does not itself open an STR case, because a case is
|
||||
* opened against a specific alert.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-aml-recurring-review-dialog',
|
||||
templateUrl: './aml-recurring-review-dialog.component.html',
|
||||
styleUrls: ['./aml-recurring-review-dialog.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
MatDialogModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatRadioModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule
|
||||
]
|
||||
})
|
||||
export class AmlRecurringReviewDialogComponent {
|
||||
private formBuilder = inject(FormBuilder);
|
||||
private amlService = inject(AmlService);
|
||||
private dialogRef = inject(MatDialogRef<AmlRecurringReviewDialogComponent>);
|
||||
readonly data = inject<AmlRecurringReviewDialogData>(MAT_DIALOG_DATA);
|
||||
|
||||
submitting = false;
|
||||
errorMessage = '';
|
||||
|
||||
readonly outcomes = [
|
||||
{ value: 'CLEARED', label: 'Cleared', hint: 'Behaviour explained and acceptable' },
|
||||
{ value: 'MONITOR', label: 'Keep monitoring', hint: 'Not conclusive — watch this customer more closely' },
|
||||
{ value: 'ESCALATED', label: 'Escalate', hint: 'Warrants an STR case; escalate the alerts individually' }
|
||||
];
|
||||
|
||||
reviewForm = this.formBuilder.group({
|
||||
outcome: [
|
||||
'MONITOR',
|
||||
Validators.required
|
||||
],
|
||||
notes: [
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.maxLength(1000)
|
||||
]
|
||||
]
|
||||
});
|
||||
|
||||
submit(): void {
|
||||
if (this.reviewForm.invalid) {
|
||||
this.reviewForm.markAllAsTouched();
|
||||
return;
|
||||
}
|
||||
this.submitting = true;
|
||||
this.errorMessage = '';
|
||||
this.amlService
|
||||
.reviewRecurringAlert(
|
||||
this.data.row.clientId,
|
||||
this.reviewForm.value.outcome as 'CLEARED' | 'MONITOR' | 'ESCALATED',
|
||||
(this.reviewForm.value.notes || '').trim(),
|
||||
this.data.windowDays
|
||||
)
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.submitting = false;
|
||||
this.dialogRef.close(this.reviewForm.value.outcome);
|
||||
},
|
||||
error: (err) => {
|
||||
this.submitting = false;
|
||||
this.errorMessage = this.readError(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
amount(value: any): string {
|
||||
return '₹' + (Number(value) || 0).toLocaleString('en-IN');
|
||||
}
|
||||
|
||||
private readError(err: any): string {
|
||||
const body = err?.error;
|
||||
const first = body?.errors?.[0];
|
||||
return (
|
||||
first?.defaultUserMessage || first?.developerMessage || body?.defaultUserMessage || 'Could not record the review.'
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -18,119 +18,192 @@
|
||||
</mat-card-subtitle>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-flat-button type="button" class="add-rule-button" (click)="addRule()">
|
||||
<mat-icon>add</mat-icon>
|
||||
Add Rule
|
||||
</button>
|
||||
</mat-card-header>
|
||||
|
||||
<mat-card-content class="aml-card-content">
|
||||
<!-- Separate the rules by the window they are measured over -->
|
||||
<div class="period-filters">
|
||||
<span class="period-filters-label">Applies over</span>
|
||||
<button
|
||||
*ngFor="let p of periodFilters"
|
||||
type="button"
|
||||
class="period-chip"
|
||||
[class.active]="activePeriod === p.key"
|
||||
[disabled]="periodCount(p.key) === 0"
|
||||
(click)="setPeriod(p.key)"
|
||||
>
|
||||
{{ p.label }}
|
||||
<span class="period-chip-n">{{ periodCount(p.key) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<mat-tab-group class="aml-tabs" animationDuration="0ms">
|
||||
<mat-tab label="Rules Master">
|
||||
<div class="aml-tab-body">
|
||||
<!-- Free-text search across every column the table renders -->
|
||||
<div class="aml-search-bar">
|
||||
<mat-form-field appearance="outline" class="aml-search-field" subscriptSizing="dynamic">
|
||||
<mat-label>Search rules</mat-label>
|
||||
<mat-icon matPrefix class="aml-search-icon">search</mat-icon>
|
||||
<input
|
||||
matInput
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
placeholder="Rule, reason, risk, limit, window, status…"
|
||||
[ngModel]="searchTerm"
|
||||
(ngModelChange)="applySearch($event)"
|
||||
/>
|
||||
<button
|
||||
*ngIf="searchTerm"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
matTooltip="Clear search"
|
||||
(click)="clearSearch()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<span *ngIf="isSearching" class="aml-search-count">
|
||||
Matching <strong>{{ matchedRules }}</strong> of {{ totalRules }} rules
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<table mat-table [dataSource]="rules" class="aml-table mat-elevation-z1">
|
||||
<!-- Order Position Column -->
|
||||
<ng-container matColumnDef="orderPosition">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Rule Srno</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-center">{{ element.orderPosition }}</td>
|
||||
</ng-container>
|
||||
<!-- Separate the rules by the window they are measured over -->
|
||||
<div class="period-filters">
|
||||
<span class="period-filters-label">Applies over</span>
|
||||
<button
|
||||
*ngFor="let p of periodFilters"
|
||||
type="button"
|
||||
class="period-chip"
|
||||
[class.active]="activePeriod === p.key"
|
||||
[disabled]="periodCount(p.key) === 0 && activePeriod !== p.key"
|
||||
(click)="setPeriod(p.key)"
|
||||
>
|
||||
{{ p.label }}
|
||||
<span class="period-chip-n">{{ periodCount(p.key) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Rule Name Column -->
|
||||
<ng-container matColumnDef="ruleName">
|
||||
<th mat-header-cell *matHeaderCellDef>Rule Description</th>
|
||||
<td mat-cell *matCellDef="let element" class="rule-name-cell">{{ element.ruleName }}</td>
|
||||
</ng-container>
|
||||
<table mat-table [dataSource]="rules" class="aml-table mat-elevation-z1">
|
||||
<!-- Order Position Column -->
|
||||
<ng-container matColumnDef="orderPosition">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Rule Srno</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-center">{{ element.orderPosition }}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Risk Category Column -->
|
||||
<ng-container matColumnDef="riskCategory">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Risk Category</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-center">
|
||||
<span class="risk-badge" [ngClass]="getRiskColorClass(element.riskCategory)">
|
||||
<span class="dot"></span>
|
||||
{{ getRiskCategoryLabel(element.riskCategory) }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Rule Name Column -->
|
||||
<ng-container matColumnDef="ruleName">
|
||||
<th mat-header-cell *matHeaderCellDef>Rule Description</th>
|
||||
<td mat-cell *matCellDef="let element" class="rule-name-cell">{{ element.ruleName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- What the min/max figures are measured against -->
|
||||
<ng-container matColumnDef="limitBasis">
|
||||
<th mat-header-cell *matHeaderCellDef>Limit Basis</th>
|
||||
<td mat-cell *matCellDef="let element" class="basis-cell">
|
||||
{{ getLimitBasis(element) }}
|
||||
<span *ngIf="getNonNumericCriterion(element)" class="basis-sub">
|
||||
{{ getNonNumericCriterion(element) }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Risk Category Column -->
|
||||
<ng-container matColumnDef="riskCategory">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Risk Category</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-center">
|
||||
<span class="risk-badge" [ngClass]="getRiskColorClass(element.riskCategory)">
|
||||
<span class="dot"></span>
|
||||
{{ getRiskCategoryLabel(element.riskCategory) }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Minimum Limit Column -->
|
||||
<ng-container matColumnDef="minLimit">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-right">Minimum Limit</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-right amount-cell">{{ getMinLimit(element) }}</td>
|
||||
</ng-container>
|
||||
<!-- What the min/max figures are measured against -->
|
||||
<ng-container matColumnDef="limitBasis">
|
||||
<th mat-header-cell *matHeaderCellDef>Limit Basis</th>
|
||||
<td mat-cell *matCellDef="let element" class="basis-cell">
|
||||
{{ getLimitBasis(element) }}
|
||||
<span *ngIf="getNonNumericCriterion(element)" class="basis-sub">
|
||||
{{ getNonNumericCriterion(element) }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Maximum Limit Column -->
|
||||
<ng-container matColumnDef="maxLimit">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-right">Maximum Limit</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-right amount-cell">
|
||||
<span [class.no-ceiling]="getMaxLimit(element) === 'No upper limit'">{{ getMaxLimit(element) }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Minimum Limit Column -->
|
||||
<ng-container matColumnDef="minLimit">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-right">Minimum Limit</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-right amount-cell">{{ getMinLimit(element) }}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Observation window the rule is measured over -->
|
||||
<ng-container matColumnDef="appliesOver">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Applies Over</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-center">
|
||||
<span [ngClass]="periodClass(element)">{{ periodLabel(element) }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Maximum Limit Column -->
|
||||
<ng-container matColumnDef="maxLimit">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-right">Maximum Limit</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-right amount-cell">
|
||||
<span [class.no-ceiling]="getMaxLimit(element) === 'No upper limit'">{{ getMaxLimit(element) }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Reason Column -->
|
||||
<ng-container matColumnDef="reason">
|
||||
<th mat-header-cell *matHeaderCellDef>Rule Reason / Criteria</th>
|
||||
<td mat-cell *matCellDef="let element" class="reason-cell">{{ element.reason }}</td>
|
||||
</ng-container>
|
||||
<!-- Observation window the rule is measured over -->
|
||||
<ng-container matColumnDef="appliesOver">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Applies Over</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-center">
|
||||
<span [ngClass]="periodClass(element)">{{ periodLabel(element) }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- AML Check Status Column -->
|
||||
<ng-container matColumnDef="amlCheckStatus">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">AML Check Status</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-center">
|
||||
<span class="compliance-badge" [ngClass]="'status-' + (element.amlCheckStatus || 'clear').toLowerCase()">
|
||||
{{ element.amlCheckStatus || 'CLEAR' }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- Reason Column -->
|
||||
<ng-container matColumnDef="reason">
|
||||
<th mat-header-cell *matHeaderCellDef>Rule Reason / Criteria</th>
|
||||
<td mat-cell *matCellDef="let element" class="reason-cell">{{ element.reason }}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Banned Entity Match Column -->
|
||||
<ng-container matColumnDef="bannedEntityMatch">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Banned Match</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-center">
|
||||
<span class="compliance-badge" [ngClass]="'match-' + (element.bannedEntityMatch || 'no').toLowerCase()">
|
||||
{{ element.bannedEntityMatch || 'NO' }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<!-- AML Check Status Column -->
|
||||
<ng-container matColumnDef="amlCheckStatus">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">AML Check Status</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-center">
|
||||
<span
|
||||
class="compliance-badge"
|
||||
[ngClass]="'status-' + (element.amlCheckStatus || 'clear').toLowerCase()"
|
||||
>
|
||||
{{ element.amlCheckStatus || 'CLEAR' }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="rule-row"></tr>
|
||||
</table>
|
||||
<!-- Banned Entity Match Column -->
|
||||
<ng-container matColumnDef="bannedEntityMatch">
|
||||
<th mat-header-cell *matHeaderCellDef class="col-center">Banned Match</th>
|
||||
<td mat-cell *matCellDef="let element" class="col-center">
|
||||
<span
|
||||
class="compliance-badge"
|
||||
[ngClass]="'match-' + (element.bannedEntityMatch || 'no').toLowerCase()"
|
||||
>
|
||||
{{ element.bannedEntityMatch || 'NO' }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Mat Paginator for standard pagination -->
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons class="aml-paginator"></mat-paginator>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="rule-row"></tr>
|
||||
</table>
|
||||
|
||||
<div *ngIf="rules.data.length === 0" class="no-rules-message">
|
||||
<mat-icon>info_outline</mat-icon>
|
||||
<span>No AML rules found in the database.</span>
|
||||
</div>
|
||||
<!-- Mat Paginator for standard pagination -->
|
||||
<mat-paginator
|
||||
[pageSizeOptions]="[10, 25, 50, 100]"
|
||||
showFirstLastButtons
|
||||
class="aml-paginator"
|
||||
></mat-paginator>
|
||||
|
||||
<div *ngIf="rules.filteredData.length === 0" class="no-rules-message">
|
||||
<mat-icon>{{ isSearching ? 'search_off' : 'info_outline' }}</mat-icon>
|
||||
<span *ngIf="!isSearching">No AML rules found in the database.</span>
|
||||
<ng-container *ngIf="isSearching">
|
||||
<span>No rules match “{{ searchTerm }}”.</span>
|
||||
<button mat-stroked-button type="button" (click)="clearSearch()">Clear search</button>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Live feed of what the engine has actually flagged. Lazily instantiated via
|
||||
matTabContent so the poll only runs while the officer is watching this tab. -->
|
||||
<mat-tab label="Flagged Transactions">
|
||||
<ng-template matTabContent>
|
||||
<div class="aml-tab-body">
|
||||
<mifosx-aml-flagged-transactions></mifosx-aml-flagged-transactions>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Customers who keep tripping the engine, queued for an employee to review why. -->
|
||||
<mat-tab label="Repeat Customers">
|
||||
<ng-template matTabContent>
|
||||
<div class="aml-tab-body">
|
||||
<mifosx-aml-recurring-alerts></mifosx-aml-recurring-alerts>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@@ -26,6 +26,28 @@
|
||||
background: linear-gradient(135deg, #1e293b, #0f172a);
|
||||
color: #fff;
|
||||
padding: 24px;
|
||||
|
||||
/* Title on the left, the add action pinned to the right edge of the banner. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.add-rule-button {
|
||||
flex: 0 0 auto;
|
||||
background: #38bdf8;
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
|
||||
mat-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #0ea5e9;
|
||||
}
|
||||
}
|
||||
|
||||
.aml-header-content {
|
||||
@@ -58,6 +80,18 @@
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* Rules Master / Flagged Transactions. Padding lives on the body rather than the group so the
|
||||
tab header rule still spans the full card width. */
|
||||
.aml-tabs {
|
||||
::ng-deep .mat-mdc-tab-body-wrapper {
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.aml-tab-body {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.aml-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
@@ -187,6 +221,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Free-text search over the rule list. */
|
||||
.aml-search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0 14px;
|
||||
}
|
||||
|
||||
.aml-search-field {
|
||||
flex: 1 1 340px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.aml-search-icon {
|
||||
color: #64748b;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.aml-search-count {
|
||||
font-size: 12.5px;
|
||||
color: #64748b;
|
||||
|
||||
strong {
|
||||
color: #1a237e;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
/* Chips that separate the rule list by window. */
|
||||
.period-filters {
|
||||
display: flex;
|
||||
|
||||
@@ -14,10 +14,20 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
/** Custom Services */
|
||||
import { ClientsService } from '../../clients/clients.service';
|
||||
import { AlertService } from '../../core/alert/alert.service';
|
||||
import { AddAmlRuleDialogComponent } from './add-aml-rule-dialog/add-aml-rule-dialog.component';
|
||||
import { AmlFlaggedTransactionsComponent } from './aml-flagged-transactions/aml-flagged-transactions.component';
|
||||
import { AmlRecurringAlertsComponent } from './aml-recurring-alerts/aml-recurring-alerts.component';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-aml-rules',
|
||||
@@ -31,11 +41,21 @@ import { ClientsService } from '../../clients/clients.service';
|
||||
MatIconModule,
|
||||
MatButtonModule,
|
||||
MatCheckboxModule,
|
||||
MatPaginatorModule
|
||||
MatPaginatorModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatTooltipModule,
|
||||
MatDialogModule,
|
||||
MatTabsModule,
|
||||
FormsModule,
|
||||
AmlFlaggedTransactionsComponent,
|
||||
AmlRecurringAlertsComponent
|
||||
]
|
||||
})
|
||||
export class AmlRulesComponent implements OnInit {
|
||||
private clientsService = inject(ClientsService);
|
||||
private dialog = inject(MatDialog);
|
||||
private alertService = inject(AlertService);
|
||||
|
||||
rules = new MatTableDataSource<any>([]);
|
||||
displayedColumns: string[] = [
|
||||
@@ -65,9 +85,27 @@ export class AmlRulesComponent implements OnInit {
|
||||
];
|
||||
activePeriod = '';
|
||||
|
||||
/** Free-text search, applied on top of the period filter. */
|
||||
searchTerm = '';
|
||||
|
||||
/**
|
||||
* Rule count per period bucket, keyed by period. Precomputed on every filter change
|
||||
* rather than counted from the template — the chips are re-read on each change
|
||||
* detection pass and re-scanning every rule six times over is wasted work.
|
||||
*/
|
||||
private periodCounts: Record<string, number> = {};
|
||||
|
||||
@ViewChild(MatPaginator) paginator!: MatPaginator;
|
||||
|
||||
ngOnInit(): void {
|
||||
// The visible table is the rendered text, not the raw row — a reader searching
|
||||
// "high risk" or "monthly" is matching on labels this component derives, so the
|
||||
// predicate has to search the same strings it puts on screen.
|
||||
this.rules.filterPredicate = (rule: any, filter: string) => this.matchesSearch(rule, filter);
|
||||
this.loadRules();
|
||||
}
|
||||
|
||||
private loadRules(): void {
|
||||
this.clientsService.getClientRiskRules().subscribe({
|
||||
next: (data) => {
|
||||
this.allRules = data || [];
|
||||
@@ -78,15 +116,65 @@ export class AmlRulesComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
addRule(): void {
|
||||
const dialogRef = this.dialog.open(AddAmlRuleDialogComponent, {
|
||||
width: '760px',
|
||||
maxWidth: '95vw',
|
||||
autoFocus: false,
|
||||
// The officer has typed a full rule by the time they reach the buttons; a stray
|
||||
// backdrop click should not discard it.
|
||||
disableClose: true
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((created: any) => {
|
||||
if (!created) {
|
||||
return;
|
||||
}
|
||||
this.alertService.alert({
|
||||
type: 'AML Rule Created',
|
||||
message: `Rule "${created.ruleName}" added to the catalog.`
|
||||
});
|
||||
// Re-fetch rather than splice the new rule in: order_position is assigned server side
|
||||
// and the transaction-rule join decides the Applies Over / limit columns.
|
||||
this.loadRules();
|
||||
});
|
||||
}
|
||||
|
||||
setPeriod(key: string): void {
|
||||
this.activePeriod = key;
|
||||
this.applyPeriodFilter();
|
||||
}
|
||||
|
||||
applySearch(value: string): void {
|
||||
this.searchTerm = value;
|
||||
this.rules.filter = value.trim().toLowerCase();
|
||||
this.recomputePeriodCounts();
|
||||
if (this.rules.paginator) {
|
||||
this.rules.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
|
||||
clearSearch(): void {
|
||||
this.applySearch('');
|
||||
}
|
||||
|
||||
get totalRules(): number {
|
||||
return this.allRules.length;
|
||||
}
|
||||
|
||||
get matchedRules(): number {
|
||||
return this.rules.filteredData.length;
|
||||
}
|
||||
|
||||
get isSearching(): boolean {
|
||||
return !!this.rules.filter;
|
||||
}
|
||||
|
||||
private applyPeriodFilter(): void {
|
||||
this.rules.data = this.activePeriod
|
||||
? this.allRules.filter((r) => this.periodKey(r) === this.activePeriod)
|
||||
: this.allRules;
|
||||
this.recomputePeriodCounts();
|
||||
if (this.rules.paginator) {
|
||||
this.rules.paginator.firstPage();
|
||||
}
|
||||
@@ -94,7 +182,58 @@ export class AmlRulesComponent implements OnInit {
|
||||
|
||||
/** How many rules fall in each period bucket — shown on the filter chips. */
|
||||
periodCount(key: string): number {
|
||||
return key ? this.allRules.filter((r) => this.periodKey(r) === key).length : this.allRules.length;
|
||||
return this.periodCounts[key] ?? 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Counts are taken over the search results, not the whole set, so a chip never
|
||||
* advertises rules the current search has filtered out.
|
||||
*/
|
||||
private recomputePeriodCounts(): void {
|
||||
const filter = this.rules.filter;
|
||||
const pool = filter ? this.allRules.filter((r) => this.matchesSearch(r, filter)) : this.allRules;
|
||||
this.periodCounts = { '': pool.length };
|
||||
for (const p of this.periodFilters) {
|
||||
if (p.key) {
|
||||
this.periodCounts[p.key] = pool.filter((r) => this.periodKey(r) === p.key).length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Every term must match, so "high monthly" narrows instead of widening. */
|
||||
private matchesSearch(rule: any, filter: string): boolean {
|
||||
const terms = filter.split(/\s+/).filter((t) => t.length > 0);
|
||||
if (terms.length === 0) {
|
||||
return true;
|
||||
}
|
||||
const haystack = this.searchableText(rule);
|
||||
return terms.every((t) => haystack.includes(t));
|
||||
}
|
||||
|
||||
/** Everything the row displays, flattened into one lower-case string. */
|
||||
private searchableText(rule: any): string {
|
||||
const min = this.getMinLimit(rule);
|
||||
const max = this.getMaxLimit(rule);
|
||||
return [
|
||||
rule.orderPosition,
|
||||
rule.ruleName,
|
||||
rule.reason,
|
||||
this.getRiskCategoryLabel(rule.riskCategory),
|
||||
this.getLimitBasis(rule),
|
||||
this.getNonNumericCriterion(rule),
|
||||
min,
|
||||
max,
|
||||
// Amounts are rendered grouped ("₹10,00,000"); also index the bare digits so
|
||||
// typing 1000000 finds them.
|
||||
min.replace(/\D/g, ''),
|
||||
max.replace(/\D/g, ''),
|
||||
this.periodLabel(rule),
|
||||
rule.amlCheckStatus || 'CLEAR',
|
||||
rule.bannedEntityMatch || 'NO'
|
||||
]
|
||||
.filter((v) => v != null && v !== '')
|
||||
.join(' ')
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -59,6 +59,18 @@ const routes: Routes = [
|
||||
loadComponent: () =>
|
||||
import('../risk-review/risk-review-report.component').then((m) => m.RiskReviewReportComponent)
|
||||
},
|
||||
{
|
||||
path: 'tds-interest',
|
||||
data: { title: 'Deposit Interest & TDS', breadcrumb: 'Deposit Interest & TDS' },
|
||||
loadComponent: () =>
|
||||
import('../tds-reports/tds-interest-report.component').then((m) => m.TdsInterestReportComponent)
|
||||
},
|
||||
{
|
||||
path: 'tds-remittance',
|
||||
data: { title: 'TDS Remitted to Government', breadcrumb: 'TDS Remitted to Government' },
|
||||
loadComponent: () =>
|
||||
import('../tds-reports/tds-remittance-report.component').then((m) => m.TdsRemittanceReportComponent)
|
||||
},
|
||||
{
|
||||
path: ':filter',
|
||||
data: { routeParamBreadcrumb: 'filter' },
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="ed-icon">
|
||||
<fa-icon icon="exclamation-circle"></fa-icon>
|
||||
</div>
|
||||
<h2 class="ed-title">We encountered an issue. Please try again.</h2>
|
||||
<h2 class="ed-title">{{ title }}</h2>
|
||||
@if (!showAsCode) {
|
||||
<p class="ed-message">{{ displayData }}</p>
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user