niteshandClaude Opus 5.5
fca550f4c4
New CFCFRMS > I4C Live section backed by /v1/i4c/admin and /v1/i4c/cases (the demo mock interceptor does not match these paths): - Dashboard, complaints from I4C, holds register, approvals, responses and API log, bank code master, intimation settings. - Hold popup: overview, hold transactions, customer intimation (automatic and manual), maker request (full / partial release, freeze, unfreeze), GRM / MRM and documents, request history. - GRM grievances, MRM restorations and MRM balance report pages; shared date range filter (today, yesterday, week, month, custom), server-side paging and filters on every list; document upload / download. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
216 lines
8.7 KiB
HTML
216 lines
8.7 KiB
HTML
<!--
|
|
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="i4c-shell">
|
|
<!-- Modern Navigation Bar with Live Status and Quick Actions -->
|
|
<header class="i4c-navbar">
|
|
<div class="i4c-navbar__brand">
|
|
<div class="i4c-navbar__icon-wrap">
|
|
<fa-icon icon="shield-alt"></fa-icon>
|
|
</div>
|
|
<div>
|
|
<div class="i4c-navbar__title">
|
|
<span>I4C Portal</span>
|
|
<span class="live-pill">
|
|
<span class="live-pill__dot"></span>
|
|
Live MHA Gateway
|
|
</span>
|
|
</div>
|
|
<div class="i4c-navbar__sub">National Cyber Crime Reporting & Account Holds System</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="i4c-navbar__actions">
|
|
<button class="quick-lookup-btn" (click)="openLookup()">
|
|
<fa-icon icon="search"></fa-icon>
|
|
<span>Quick Lookup</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Modern Pill-Style Subnavigation Bar -->
|
|
<nav class="i4c-subnav">
|
|
<div class="i4c-subnav__links">
|
|
@for (link of links; track link.path) {
|
|
<a class="i4c-subnav__link" [routerLink]="['./', link.path]" routerLinkActive="i4c-subnav__link--active">
|
|
<fa-icon [icon]="link.icon" class="link-ic"></fa-icon>
|
|
<span>{{ link.label }}</span>
|
|
@if (link.path === 'approvals' && pendingApprovals > 0) {
|
|
<span class="pill-badge pill-badge--amber">{{ pendingApprovals }}</span>
|
|
}
|
|
@if (link.path === 'holds' && activeHolds > 0) {
|
|
<span class="pill-badge pill-badge--blue">{{ activeHolds }}</span>
|
|
}
|
|
</a>
|
|
}
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Outlet for child views -->
|
|
<main class="i4c-content">
|
|
<router-outlet></router-outlet>
|
|
</main>
|
|
|
|
<!-- ========================================================
|
|
MODERN POPUP WINDOW: QUICK LOOKUP MODAL
|
|
======================================================== -->
|
|
@if (showLookupModal) {
|
|
<div class="i4c-modal-backdrop" (click)="closeLookup()">
|
|
<div class="i4c-modal-window i4c-modal-window--wide" (click)="$event.stopPropagation()">
|
|
<div class="i4c-modal-header">
|
|
<div class="i4c-modal-header__title">
|
|
<fa-icon icon="search"></fa-icon>
|
|
<div>
|
|
<span>Quick Search & Lookup</span>
|
|
<div class="i4c-modal-header__sub">Instant search across I4C Complaints and Account Holds Register</div>
|
|
</div>
|
|
</div>
|
|
<button class="modal-close-btn" (click)="closeLookup()" aria-label="Close">
|
|
<fa-icon icon="times"></fa-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="i4c-modal-body">
|
|
<div class="lookup-search-box">
|
|
<div class="search-input-wrap">
|
|
<fa-icon icon="search" class="search-icon"></fa-icon>
|
|
<input
|
|
type="text"
|
|
class="modern-input"
|
|
placeholder="Enter acknowledgement no., customer account no., or job ID..."
|
|
[(ngModel)]="lookupQuery"
|
|
(keyup.enter)="performLookup()"
|
|
autofocus
|
|
/>
|
|
@if (lookupQuery) {
|
|
<button class="clear-btn" (click)="lookupQuery = ''">
|
|
<fa-icon icon="times"></fa-icon>
|
|
</button>
|
|
}
|
|
</div>
|
|
<button
|
|
class="search-submit-btn"
|
|
(click)="performLookup()"
|
|
[disabled]="lookupLoading || !lookupQuery.trim()"
|
|
>
|
|
@if (lookupLoading) {
|
|
<fa-icon icon="sync" animation="spin"></fa-icon>
|
|
<span>Searching...</span>
|
|
} @else {
|
|
<fa-icon icon="search"></fa-icon>
|
|
<span>Search</span>
|
|
}
|
|
</button>
|
|
</div>
|
|
|
|
@if (lookupError) {
|
|
<div class="i4c-error">{{ lookupError }}</div>
|
|
}
|
|
|
|
<!-- Search Results -->
|
|
@if (lookupSearched) {
|
|
<div class="lookup-results">
|
|
<!-- Complaints Section -->
|
|
<div class="results-section">
|
|
<div class="results-section__head">
|
|
<fa-icon icon="inbox"></fa-icon>
|
|
<span>Complaints from I4C</span>
|
|
<span class="count-badge">{{ lookupResults.complaints.length }}</span>
|
|
</div>
|
|
@if (lookupResults.complaints.length > 0) {
|
|
<div class="results-list">
|
|
@for (c of lookupResults.complaints; track c.id) {
|
|
<div class="result-item" (click)="goToComplaint(c.id)">
|
|
<div class="result-item__main">
|
|
<div class="result-item__title">
|
|
<span class="ack-code">{{ c.acknowledgement_no }}</span>
|
|
<span class="status-pill status-pill--{{ c.status?.toLowerCase() }}">{{ c.status }}</span>
|
|
</div>
|
|
<div class="result-item__sub">
|
|
<span
|
|
>Account: <b>{{ c.payer_account_number }}</b></span
|
|
>
|
|
<span>•</span>
|
|
<span>Job: {{ c.job_id }}</span>
|
|
<span>•</span>
|
|
<span>Sub-cat: {{ c.sub_category }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="result-item__side">
|
|
<span class="held-amt">Held: ₹{{ c.amount_held | number: '1.2-2' }}</span>
|
|
<span class="open-link">Open Complaint <fa-icon icon="arrow-right"></fa-icon></span>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
} @else {
|
|
<div class="no-res">No complaints matched "{{ lookupQuery }}".</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Holds Section -->
|
|
<div class="results-section">
|
|
<div class="results-section__head">
|
|
<fa-icon icon="lock"></fa-icon>
|
|
<span>Holds Register</span>
|
|
<span class="count-badge">{{ lookupResults.holds.length }}</span>
|
|
</div>
|
|
@if (lookupResults.holds.length > 0) {
|
|
<div class="results-list">
|
|
@for (h of lookupResults.holds; track h.id) {
|
|
<div class="result-item" (click)="goToHold(h.account_no)">
|
|
<div class="result-item__main">
|
|
<div class="result-item__title">
|
|
<span class="ack-code">Account: {{ h.account_no }}</span>
|
|
<span class="status-pill status-pill--{{ h.status?.toLowerCase() }}">{{ h.status }}</span>
|
|
@if (h.debit_frozen) {
|
|
<span class="freeze-tag">DEBIT FROZEN</span>
|
|
}
|
|
</div>
|
|
<div class="result-item__sub">
|
|
<span
|
|
>Customer: <b>{{ h.client_name || 'N/A' }}</b></span
|
|
>
|
|
<span>•</span>
|
|
<span>Ack: {{ h.acknowledgement_no }}</span>
|
|
<span>•</span>
|
|
<span>Layer: {{ h.layer }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="result-item__side">
|
|
<span class="held-amt">Held: ₹{{ h.amount_held | number: '1.2-2' }}</span>
|
|
<span class="open-link">View in Holds <fa-icon icon="arrow-right"></fa-icon></span>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
} @else {
|
|
<div class="no-res">No holds matched "{{ lookupQuery }}".</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<div class="lookup-hint">
|
|
<fa-icon icon="lightbulb" class="hint-icon"></fa-icon>
|
|
<span
|
|
>Type a 14-digit acknowledgement number, customer bank account number, or job ID to quickly locate
|
|
complaints or hold records.</span
|
|
>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="i4c-modal-footer">
|
|
<button class="footer-btn-close" (click)="closeLookup()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|