feat(credit-bureau): CIC enquiry-alert dashboard and generic API Management hub (static UI)
Replace CIBIL fetch screens with a dashboard of our customers' loan enquiries at other lenders (no lender name), CIC whitelist/API mapping, and a Vendor -> Work -> API set management UI (IN/OUT, SMS, WhatsApp, CIC) with full HTTP detail and JSON/cURL/Postman/HAR import. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5.5
@@ -0,0 +1,172 @@
|
||||
<!--
|
||||
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="cic-page">
|
||||
<div class="cic-head">
|
||||
<div>
|
||||
<h1>API Management</h1>
|
||||
<p>
|
||||
Connect any API service to the CBS the same way: <b>Vendor → Work → API set</b>. <b>IN</b> = data comes into the
|
||||
CBS from the vendor (CIC alerts, delivery reports, replies). <b>OUT</b> = the CBS calls the vendor (send an SMS
|
||||
or WhatsApp message).
|
||||
</p>
|
||||
</div>
|
||||
<div class="cic-actions">
|
||||
<a class="cic-btn" routerLink="/api-management/logs">API call logs</a>
|
||||
<button class="cic-btn primary" (click)="startAdd()">+ Add vendor</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (error && !adding) {
|
||||
<div class="cic-alert error">{{ error }}</div>
|
||||
}
|
||||
@if (info) {
|
||||
<div class="cic-alert success">{{ info }}</div>
|
||||
}
|
||||
|
||||
<div class="cic-grid cols-4" style="margin-bottom: 16px">
|
||||
<div class="cic-stat">
|
||||
<div class="k">Vendors</div>
|
||||
<div class="v">{{ vendors.length }}</div>
|
||||
<div class="s">{{ activeVendors }} active</div>
|
||||
</div>
|
||||
<div class="cic-stat">
|
||||
<div class="k">APIs</div>
|
||||
<div class="v">{{ totalIn + totalOut }}</div>
|
||||
<div class="s">{{ totalIn }} IN · {{ totalOut }} OUT</div>
|
||||
</div>
|
||||
<div class="cic-stat">
|
||||
<div class="k">Calls in 24 hours</div>
|
||||
<div class="v">{{ summary.callsToday }}</div>
|
||||
<div class="s">both directions</div>
|
||||
</div>
|
||||
<div class="cic-stat">
|
||||
<div class="k">Failed in 24 hours</div>
|
||||
<div class="v" [class.tone-bad]="summary.failedToday > 0">{{ summary.failedToday }}</div>
|
||||
<div class="s">see the call logs</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cic-card">
|
||||
<h2>Vendors</h2>
|
||||
@if (loading && !vendors.length) {
|
||||
<div class="cic-empty">Loading…</div>
|
||||
} @else {
|
||||
<div class="cic-table-wrap">
|
||||
<table class="cic-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vendor</th>
|
||||
<th>Work</th>
|
||||
<th>APIs</th>
|
||||
<th>Environment</th>
|
||||
<th>24 h calls</th>
|
||||
<th>Last call</th>
|
||||
<th>Active</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (v of vendors; track v.id) {
|
||||
<tr>
|
||||
<td>
|
||||
<b>{{ v.name }}</b>
|
||||
<div class="muted cic-mono" style="font-size: 11px">{{ v.code }}</div>
|
||||
</td>
|
||||
<td style="max-width: 340px; white-space: normal">{{ v.work }}</td>
|
||||
<td>
|
||||
@if (count(v, 'IN')) {
|
||||
<span class="cic-badge brand">IN × {{ count(v, 'IN') }}</span>
|
||||
}
|
||||
@if (count(v, 'OUT')) {
|
||||
<span class="cic-badge ok">OUT × {{ count(v, 'OUT') }}</span>
|
||||
}
|
||||
@if (!v.apis.length) {
|
||||
<span class="muted">none yet</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
class="cic-badge"
|
||||
[class.warn]="v.environment === 'SIMULATOR'"
|
||||
[class.good]="v.environment === 'PRODUCTION'"
|
||||
>{{ v.environment }}</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
{{ calls(v).calls }}
|
||||
@if (calls(v).failed) {
|
||||
<span class="tone-bad" style="font-size: 12px"> · {{ calls(v).failed }} failed</span>
|
||||
}
|
||||
</td>
|
||||
<td>{{ v.lastCallOn ? (v.lastCallOn | slice: 0 : 16) : '—' }}</td>
|
||||
<td>
|
||||
<span class="cic-switch">
|
||||
<input type="checkbox" [checked]="v.active" (change)="toggle(v, $event)" />
|
||||
<span></span>
|
||||
</span>
|
||||
</td>
|
||||
<td style="white-space: nowrap">
|
||||
<a class="cic-btn sm primary" [routerLink]="['/api-management/vendors', v.id]">Set up</a>
|
||||
</td>
|
||||
</tr>
|
||||
@if (v.links.length) {
|
||||
<tr>
|
||||
<td colspan="8" style="background: var(--cic-soft); padding: 6px 12px">
|
||||
<span class="muted" style="font-size: 12px">{{ v.code }} also has:</span>
|
||||
@for (l of v.links; track l.route) {
|
||||
<a class="cic-btn sm" style="margin-left: 6px" [routerLink]="l.route">{{ l.label }}</a>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (adding) {
|
||||
<div class="cic-modal-backdrop" (click)="adding = false">
|
||||
<div class="cic-modal" (click)="$event.stopPropagation()">
|
||||
<h3>Add an API vendor</h3>
|
||||
@if (error) {
|
||||
<div class="cic-alert error">{{ error }}</div>
|
||||
}
|
||||
<div class="cic-grid cols-1" style="gap: 12px">
|
||||
<div class="cic-field">
|
||||
<label>Vendor name</label>
|
||||
<input [(ngModel)]="form.name" placeholder="e.g. Aadhaar eKYC, Payment gateway, E-mail" />
|
||||
</div>
|
||||
<div class="cic-field">
|
||||
<label>Work — what is this vendor used for?</label>
|
||||
<textarea rows="3" [(ngModel)]="form.work" placeholder="e.g. Verify customer Aadhaar during KYC"></textarea>
|
||||
</div>
|
||||
<div class="cic-field">
|
||||
<label>Environment</label>
|
||||
<select [(ngModel)]="form.environment">
|
||||
<option value="SIMULATOR">SIMULATOR — no network call</option>
|
||||
<option value="UAT">UAT — vendor's test environment</option>
|
||||
<option value="PRODUCTION">PRODUCTION — live</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p class="muted" style="font-size: 12px; margin: 12px 0 0">
|
||||
Next you set up the connection and add its APIs, each marked IN or OUT.
|
||||
</p>
|
||||
<div class="foot">
|
||||
<button class="cic-btn" (click)="adding = false">Cancel</button>
|
||||
<button class="cic-btn primary" (click)="saveNew()" [disabled]="saving">
|
||||
{{ saving ? 'Adding…' : 'Add and set up' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* 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 { CommonModule } from '@angular/common';
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
|
||||
import { ApiManagementService, ApiVendor } from '../api-management.service';
|
||||
|
||||
/** Every outside API service the CBS uses: vendor, its work, its APIs (IN / OUT) and whether it is switched on. */
|
||||
@Component({
|
||||
selector: 'mifosx-api-vendors',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
RouterModule
|
||||
],
|
||||
templateUrl: './api-vendors.component.html',
|
||||
styleUrls: ['../../credit-bureau/cic-shared.scss']
|
||||
})
|
||||
export class ApiVendorsComponent implements OnInit {
|
||||
private service = inject(ApiManagementService);
|
||||
private router = inject(Router);
|
||||
|
||||
vendors: ApiVendor[] = [];
|
||||
summary: { callsToday: number; failedToday: number; perVendor: Record<number, { calls: number; failed: number }> } = {
|
||||
callsToday: 0,
|
||||
failedToday: 0,
|
||||
perVendor: {}
|
||||
};
|
||||
loading = false;
|
||||
error: string | null = null;
|
||||
info: string | null = null;
|
||||
|
||||
adding = false;
|
||||
saving = false;
|
||||
form: { name: string; work: string; environment: ApiVendor['environment'] } = this.blankForm();
|
||||
|
||||
ngOnInit(): void {
|
||||
this.load();
|
||||
}
|
||||
|
||||
private blankForm() {
|
||||
return { name: '', work: '', environment: 'SIMULATOR' as ApiVendor['environment'] };
|
||||
}
|
||||
|
||||
load(): void {
|
||||
this.loading = true;
|
||||
this.service.vendors().subscribe((v) => {
|
||||
this.vendors = v;
|
||||
this.loading = false;
|
||||
});
|
||||
this.service.summary().subscribe((s) => (this.summary = s));
|
||||
}
|
||||
|
||||
count(v: ApiVendor, direction: 'IN' | 'OUT'): number {
|
||||
return v.apis.filter((a) => a.direction === direction).length;
|
||||
}
|
||||
|
||||
get totalIn(): number {
|
||||
return this.vendors.reduce((s, v) => s + this.count(v, 'IN'), 0);
|
||||
}
|
||||
|
||||
get totalOut(): number {
|
||||
return this.vendors.reduce((s, v) => s + this.count(v, 'OUT'), 0);
|
||||
}
|
||||
|
||||
get activeVendors(): number {
|
||||
return this.vendors.filter((v) => v.active).length;
|
||||
}
|
||||
|
||||
calls(v: ApiVendor): { calls: number; failed: number } {
|
||||
return this.summary.perVendor[v.id] ?? { calls: 0, failed: 0 };
|
||||
}
|
||||
|
||||
toggle(v: ApiVendor, event: Event): void {
|
||||
const want = (event.target as HTMLInputElement).checked;
|
||||
(event.target as HTMLInputElement).checked = v.active;
|
||||
this.error = null;
|
||||
this.info = null;
|
||||
this.service.saveVendor(v.id, { active: want }).subscribe({
|
||||
next: (u) => {
|
||||
v.active = u.active;
|
||||
this.info = `${u.name} is now ${u.active ? 'active' : 'switched off'}.`;
|
||||
},
|
||||
error: (e) => (this.error = e?.error?.defaultUserMessage ?? 'Could not change the vendor.')
|
||||
});
|
||||
}
|
||||
|
||||
startAdd(): void {
|
||||
this.adding = true;
|
||||
this.form = this.blankForm();
|
||||
this.error = null;
|
||||
}
|
||||
|
||||
saveNew(): void {
|
||||
this.saving = true;
|
||||
this.error = null;
|
||||
this.service.addVendor(this.form).subscribe({
|
||||
next: (v) => {
|
||||
this.saving = false;
|
||||
this.adding = false;
|
||||
this.router.navigate([
|
||||
'/api-management/vendors',
|
||||
v.id
|
||||
]);
|
||||
},
|
||||
error: (e) => {
|
||||
this.saving = false;
|
||||
this.error = e?.error?.defaultUserMessage ?? 'Could not add the vendor.';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user