CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add CKYC management tab, checker inbox views, and maker-checker diff utilities

Browse Source
This commit is contained in:
anshul
2026-09-16 15:17:51 +05:30
parent 42424dff8b
commit d132bbe716
10 changed files with 1470 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tasks/view-checker-inbox/view-checker-inbox.component.html
+57 -6
View File
@@ -39,9 +39,6 @@
<button type="button" class="vci-btn vci-btn--approve" (click)="approveChecker()">
<fa-icon icon="check"></fa-icon><span>{{ 'labels.buttons.Approve' | translate }}</span>
</button>
<button type="button" class="vci-btn vci-btn--delete" (click)="deleteChecker()">
<fa-icon icon="trash"></fa-icon><span>{{ 'labels.buttons.Delete' | translate }}</span>
</button>
<button type="button" class="vci-btn vci-btn--reject" (click)="rejectChecker()">
<fa-icon icon="times"></fa-icon><span>{{ 'labels.buttons.Reject' | translate }}</span>
</button>
@@ -74,7 +71,9 @@
</dd>
</div>
<div class="vci-kv">
<dt>{{ 'labels.inputs.Entity' | translate }}</dt>
<!-- Not `labels.inputs.Entity`: this project maps that key to "Non-Individual" for the client
legal-form screens, which reads as nonsense against a value like GLACCOUNT. -->
<dt>{{ 'labels.inputs.Entity Type' | translate }}</dt>
<dd>{{ checkerInboxDetail.entityName }}</dd>
</div>
@if (checkerInboxDetail.resourceId) {
@@ -108,9 +107,61 @@
</dl>
</div>
@if (displayJSONData) {
@if (comparing) {
<div class="vci-loading">
<fa-icon icon="spinner" class="vci-loading__ic"></fa-icon>
<span>Comparing against current values…</span>
</div>
}
<!-- UPDATE: only the fields this command actually moves, as OLD -> NEW. -->
@if (showChanges) {
<div class="vci-section">
<div class="vci-section__title">{{ 'labels.heading.Command' | translate }}</div>
<div class="vci-section__title">Changes Requested ({{ changes.length }})</div>
@if (changes.length === 0) {
<p class="vci-nochange">This request does not change any value.</p>
} @else {
<div class="vci-changes">
@for (change of changes; track $index) {
<div class="vci-change">
<div class="vci-change__head">
<span class="vci-change__label">{{ change.label }}</span>
<span class="vci-change__kind vci-change__kind--{{ change.kind.toLowerCase() }}">{{
change.kind
}}</span>
</div>
<div class="vci-change__values">
<span class="vci-change__old">{{ change.oldValue }}</span>
<fa-icon icon="arrow-right" class="vci-change__arrow"></fa-icon>
<span class="vci-change__new">{{ change.newValue }}</span>
</div>
</div>
}
</div>
}
</div>
}
<!-- CREATE: submitted data grouped into readable sections. -->
@if (!showChanges && createSections.length > 0) {
@for (section of createSections; track section.title) {
<div class="vci-section">
<div class="vci-section__title">{{ section.title }}</div>
<dl class="vci-grid">
@for (field of section.fields; track $index) {
<ng-container *ngTemplateOutlet="commandField; context: { $implicit: field }"></ng-container>
}
</dl>
</div>
}
}
<!-- DELETE summary, role-permission changes, and the fallback payload all render here. -->
@if (!showChanges && createSections.length === 0 && displayJSONData) {
<div class="vci-section">
<div class="vci-section__title">
{{ deletingEntity ? 'Record To Be Deleted' : ('labels.heading.Command' | translate) }}
</div>
<dl class="vci-grid">
@for (field of commandFields; track $index) {
<ng-container *ngTemplateOutlet="commandField; context: { $implicit: field }"></ng-container>
src/app/tasks/view-checker-inbox/view-checker-inbox.component.scss
+91
View File
@@ -304,6 +304,97 @@ $bg-page: #f8fafc;
color: $text-soft;
}
/* ── UPDATE review: one row per field that actually moved ──────────────────── */
.vci-changes {
display: flex;
flex-direction: column;
gap: 1px;
background: $border;
}
.vci-change {
background: #fff;
padding: 11px 16px;
&__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 5px;
}
&__label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: $text-soft;
}
&__kind {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.07em;
padding: 1px 7px;
border-radius: 2px;
&--modified {
background: #e0f2fe;
color: #0369a1;
}
&--added {
background: #dcfce7;
color: #15803d;
}
&--removed {
background: #fee2e2;
color: #991b1b;
}
/* Not a change: the entity has no such field, so there was no before-value to compare. */
&--submitted {
background: #eef1f4;
color: #5b6673;
}
}
&__values {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 14px;
min-width: 0;
}
&__old {
color: $text-soft;
text-decoration: line-through;
overflow-wrap: anywhere;
}
&__arrow {
color: $text-soft;
font-size: 11px;
flex: none;
}
&__new {
color: $text-dark;
font-weight: 600;
overflow-wrap: anywhere;
}
}
.vci-nochange {
margin: 0;
padding: 16px;
font-size: 13.5px;
color: $text-soft;
}
.vci-tag {
display: inline-flex;
align-items: center;
src/app/tasks/view-checker-inbox/view-checker-inbox.component.ts
+296 -22
View File
@@ -14,6 +14,7 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial
/** Custom Services */
import { TasksService } from '../tasks.service';
import { SystemService } from 'app/system/system.service';
/** Dialog Components */
import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
@@ -23,6 +24,23 @@ import { NgTemplateOutlet } from '@angular/common';
import { DateFormatPipe } from '../../pipes/date-format.pipe';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
import { isTempTableProductEdit } from '../product-entities';
import {
CommandChange,
diffCommandAgainstEntity,
displayScalar,
groupCreateFields,
humanizeKey
} from '../command-diff.util';
import { deleteSummaryKeys, EntityFetchServices, fetchCurrentEntity } from '../maker-checker-entity-fetch';
/** Services the entity lookup table needs; assembled once and handed to the shared fetcher. */
import { ProductsService } from 'app/products/products.service';
import { ClientsService } from 'app/clients/clients.service';
import { SavingsService } from 'app/savings/savings.service';
import { AccountingService } from 'app/accounting/accounting.service';
import { UsersService } from 'app/users/users.service';
import { FixedDepositsService } from 'app/deposits/fixed-deposits/fixed-deposits.service';
import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
/**
* One row of the rendered Command payload. The dialog turns the parsed command JSON into a tree of
@@ -35,6 +53,17 @@ export type CommandField =
| { label: string; kind: 'object'; fields: CommandField[] }
| { label: string; kind: 'list'; items: CommandField[] };
/**
* Transport-level fields every Fineract command carries. They describe how the request was encoded,
* not what the maker actually changed, so they are dropped before the payload is shown - present in
* roughly three quarters of all stored commands, and pure noise to a checker.
*/
const NOISE_KEYS = new Set([
'locale',
'dateFormat',
'monthDayFormat'
]);
/**
* Segments that read as initialisms in this domain, so `upiFacility` becomes "UPI Facility" rather
* than "Upi Facility". Anything not listed just gets title-cased, so an unknown key still renders
@@ -76,6 +105,24 @@ const LABEL_ACRONYMS = new Set([
'nef'
]);
/**
* Fields that identify one element of an array, tried in order. Keeping this as a list of names rather
* than per-entity rules means an unfamiliar collection still gets a readable heading if it happens to
* carry any of them.
*/
const ENTRY_LABEL_KEYS = [
'limitType',
'name',
'displayName',
'chargeName',
'title',
'label',
'type',
'description',
'code',
'value'
];
@Component({
selector: 'mifosx-view-checker-inbox',
templateUrl: './view-checker-inbox.component.html',
@@ -93,6 +140,28 @@ export class ViewCheckerInboxComponent {
private router = inject(Router);
private translateService = inject(TranslateService);
private tasksService = inject(TasksService);
private systemService = inject(SystemService);
private productsService = inject(ProductsService);
private clientsService = inject(ClientsService);
private savingsService = inject(SavingsService);
private accountingService = inject(AccountingService);
private usersService = inject(UsersService);
private fixedDepositsService = inject(FixedDepositsService);
private recurringDepositsService = inject(RecurringDepositsService);
/** Bundle handed to the shared entity lookup, so that table stays free of Angular injection. */
private get entityFetchServices(): EntityFetchServices {
return {
products: this.productsService,
clients: this.clientsService,
savings: this.savingsService,
system: this.systemService,
accounting: this.accountingService,
users: this.usersService,
fixedDeposits: this.fixedDepositsService,
recurringDeposits: this.recurringDepositsService
};
}
/** Present only when opened as a popup from the Checker Inbox list; absent when reached by direct
* route (a bookmarked or shared link). Both entry points stay supported — this only changes where
* the detail comes from and how "done" is signalled: closing the dialog vs. navigating back. */
@@ -122,6 +191,17 @@ export class ViewCheckerInboxComponent {
*/
commandFields: CommandField[] = [];
/** UPDATE review: the fields this command actually moves, as OLD -> NEW. */
changes: CommandChange[] = [];
/** True once the current entity was read and a real comparison is on screen. */
showChanges = false;
/** True while the current entity is being fetched for comparison. */
comparing = false;
/** True when the screen is describing a record that is about to be deleted. */
deletingEntity = false;
/** CREATE review: submitted data bucketed into readable sections. */
createSections: { title: string; fields: CommandField[] }[] = [];
/** camelCase / snake_case key -> readable label, e.g. `upiFacility` -> "UPI Facility". */
private labelFor(key: string): string {
const spaced = String(key ?? '')
@@ -156,6 +236,27 @@ export class ViewCheckerInboxComponent {
* Recursively turns one key/value pair into a render node. Nothing is dropped or summarised - every
* key in the payload produces a node, so the checker still sees the complete request.
*/
/**
* Names one element of an array of objects.
*
* Numbering them "Account Facility Limits 1 ... 10" tells a checker nothing - the position in a JSON
* array is not a fact about the record. Most entries carry a field that identifies them (`limitType`,
* a charge's `name`, a chart's `description`), so that value is used as the heading and the ordinal
* is only a fallback for entries that have nothing identifying at all.
*/
private entryLabel(item: Record<string, any>, listLabel: string, index: number): string {
for (const key of ENTRY_LABEL_KEYS) {
const candidate = item?.[key];
if (typeof candidate === 'string' && candidate.trim() !== '') {
return candidate.trim();
}
if (typeof candidate === 'number') {
return String(candidate);
}
}
return `${listLabel} ${index + 1}`;
}
private toField(label: string, value: any): CommandField {
if (Array.isArray(value)) {
return {
@@ -163,7 +264,7 @@ export class ViewCheckerInboxComponent {
kind: 'list',
items: value.map((item, index) =>
item !== null && typeof item === 'object'
? this.toField(`${label} ${index + 1}`, item)
? this.toField(this.entryLabel(item, label, index), item)
: { label: '', kind: 'scalar' as const, text: this.scalarText(item) }
)
};
@@ -172,7 +273,9 @@ export class ViewCheckerInboxComponent {
return {
label,
kind: 'object',
fields: Object.keys(value).map((key) => this.toField(this.labelFor(key), value[key]))
fields: Object.keys(value)
.filter((key) => !NOISE_KEYS.has(key))
.map((key) => this.toField(this.labelFor(key), value[key]))
};
}
return { label, kind: 'scalar', text: this.scalarText(value) };
@@ -182,7 +285,9 @@ export class ViewCheckerInboxComponent {
if (!payload || typeof payload !== 'object' || Array.isArray(payload)) {
return [];
}
return Object.keys(payload).map((key) => this.toField(this.labelFor(key), payload[key]));
return Object.keys(payload)
.filter((key) => !NOISE_KEYS.has(key))
.map((key) => this.toField(this.labelFor(key), payload[key]));
}
/** Checker Inbox Details Data */
@@ -238,6 +343,14 @@ export class ViewCheckerInboxComponent {
private applyDetail(detail: any): void {
this.checkerInboxDetail = detail;
// Angular reuses this component when only the route's id changes, so the previous request's review
// state has to be cleared explicitly — otherwise a DELETE opened after an UPDATE keeps showing the
// UPDATE's changes.
this.changes = [];
this.showChanges = false;
this.comparing = false;
this.deletingEntity = false;
this.createSections = [];
// commandAsJson is absent on some entries (a DELETE carries no payload), and JSON.parse(undefined)
// throws — which as a route only broke the page, but in a dialog would leave an empty shell open.
try {
@@ -247,6 +360,186 @@ export class ViewCheckerInboxComponent {
}
this.displayJSONData = !_.isEmpty(this.jsondata);
this.commandFields = this.buildCommandFields(this.jsondata);
// Role permissions get their own treatment: the payload is the role's whole permission map, so a
// field-by-field diff would be 1,100 rows rather than the handful that moved.
if (this.isRolePermissionsCommand(detail)) {
this.loadRolePermissionChanges(detail.resourceId, this.jsondata.permissions);
return;
}
const action = (detail?.actionName ?? '').toUpperCase();
if (action === 'UPDATE') {
this.loadUpdateChanges(detail);
} else if (action === 'DELETE') {
this.loadDeleteSummary(detail);
} else if (action === 'CREATE') {
this.createSections = this.buildCreateSections(this.jsondata);
}
}
/**
* UPDATE: read the entity as it stands today and show only what the command actually moves.
*
* Several screens submit their entire form regardless of what the maker touched - a fixed deposit
* account update posts 28 fields every time - so without this the checker cannot tell which one
* changed. If the entity cannot be read the submitted payload stays on screen, which is what every
* entity showed before.
*/
private loadUpdateChanges(detail: any): void {
const request$ = fetchCurrentEntity(detail?.entityName, detail?.resourceId, this.entityFetchServices);
if (!request$) {
return;
}
this.comparing = true;
request$.subscribe({
next: (current: any) => {
// A slow response for a record the user has already navigated away from must not overwrite the
// record now on screen.
if (!this.isCurrent(detail)) {
return;
}
this.comparing = false;
this.changes = diffCommandAgainstEntity(this.jsondata ?? {}, current ?? {});
this.showChanges = true;
},
error: () => {
this.comparing = false;
}
});
}
/**
* DELETE: the payload is empty for every entity, so the command alone tells the checker nothing.
* Reads the record instead and shows the few fields that identify it.
*/
private loadDeleteSummary(detail: any): void {
const request$ = fetchCurrentEntity(detail?.entityName, detail?.resourceId, this.entityFetchServices);
if (!request$) {
return;
}
this.comparing = true;
request$.subscribe({
next: (current: any) => {
if (!this.isCurrent(detail)) {
return;
}
this.comparing = false;
const keys = deleteSummaryKeys(detail?.entityName);
const fields = keys
.filter((key) => current?.[key] !== undefined && current?.[key] !== null && current?.[key] !== '')
.map((key) => ({
label: humanizeKey(key),
kind: 'scalar' as const,
text: displayScalar(current[key])
}));
if (fields.length > 0) {
this.commandFields = fields;
this.displayJSONData = true;
this.deletingEntity = true;
}
},
error: () => {
this.comparing = false;
}
});
}
/** Whether `detail` is still the request on screen, i.e. an in-flight lookup is not stale. */
private isCurrent(detail: any): boolean {
return this.checkerInboxDetail?.id === detail?.id;
}
/** CREATE: nothing to compare against, so the submitted data is grouped rather than diffed. */
private buildCreateSections(payload: any): { title: string; fields: CommandField[] }[] {
if (!payload || typeof payload !== 'object' || Array.isArray(payload)) {
return [];
}
return groupCreateFields(payload).map((section) => ({
title: section.title,
fields: section.keys.map((key) => this.toField(this.labelFor(key), payload[key]))
}));
}
/**
* A role permission update posts the role's *entire* permission map - over 1,100 entries, of which
* a handful are actually being changed. Rendering that as-is buries the change completely, so this
* screen fetches the role's current permissions and shows only the difference.
*/
private isRolePermissionsCommand(detail: any): boolean {
return (
(detail?.entityName ?? '').toUpperCase() === 'ROLE' &&
(detail?.actionName ?? '').toUpperCase() === 'PERMISSIONS' &&
detail?.resourceId != null &&
!!this.jsondata?.permissions
);
}
/**
* Replaces the flat permission dump with Granted / Revoked lists, by comparing the submitted map
* against what the role holds today. Anything the maker left untouched is summarised as a count
* rather than listed.
*
* If the role lookup fails the original payload stays on screen - a degraded but complete view is
* better than showing the checker nothing.
*/
private loadRolePermissionChanges(roleId: string | number, submitted: Record<string, boolean>): void {
this.systemService.getRole(roleId).subscribe({
next: (role: any) => {
const current = new Map<string, boolean>(
(role?.permissionUsageData ?? []).map((p: any): [string, boolean] => [
p.code,
!!p.selected
])
);
const granted: string[] = [];
const revoked: string[] = [];
let unchanged = 0;
Object.keys(submitted).forEach((code) => {
const now = !!submitted[code];
const before = current.get(code);
// A code missing from the role lookup has no "before" to compare against, so treat it as
// changed only when it is being switched on.
if (before === undefined) {
if (now) {
granted.push(code);
}
return;
}
if (now === before) {
unchanged++;
} else if (now) {
granted.push(code);
} else {
revoked.push(code);
}
});
this.commandFields = this.buildPermissionChangeFields(granted, revoked, unchanged);
},
error: () => undefined
});
}
private buildPermissionChangeFields(granted: string[], revoked: string[], unchanged: number): CommandField[] {
const fields: CommandField[] = [];
const asList = (label: string, codes: string[]): CommandField => ({
label,
kind: 'list',
items: codes.sort().map((code) => ({ label: '', kind: 'scalar' as const, text: this.labelFor(code) }))
});
fields.push(asList(`Permissions Granted (${granted.length})`, granted));
fields.push(asList(`Permissions Revoked (${revoked.length})`, revoked));
if (granted.length === 0 && revoked.length === 0) {
fields.push({ label: 'Result', kind: 'scalar', text: 'No permission changes in this request.' });
}
fields.push({ label: 'Unchanged Permissions', kind: 'scalar', text: `${unchanged} left as they were` });
return fields;
}
/** "Done" for this screen — closes the popup (telling the list to refresh) when opened as a
@@ -304,23 +597,4 @@ export class ViewCheckerInboxComponent {
}
});
}
/**
* Delete Checker
*/
deleteChecker() {
const deleteCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
data: {
heading: this.translateService.instant('labels.heading.Delete Checker'),
dialogContext: this.translateService.instant('labels.dialogContext.Are you sure you want to delete checker')
}
});
deleteCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
if (response.confirm) {
this.tasksService.deleteMakerChecker(this.checkerInboxDetail.id).subscribe((res: any) => {
this.finish();
});
}
});
}
}