cbsnexora/src/app/cfcfrms/cfr-lookup/cfr-lookup.component.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="cfr-lookup-page">
  <div class="page-header">
    <h2>{{ 'labels.text.CFR Lookup' | translate }}</h2>
    <p class="subtitle">{{ 'labels.text.Query RBI Central Fraud Registry before customer onboarding' | translate }}</p>
  </div>

  <!-- Search Card -->
  <mat-card class="search-card">
    <mat-card-content>
      <div class="search-row">
        <mat-form-field appearance="outline" class="search-field">
          <mat-label>{{ 'labels.text.Account Number' | translate }}</mat-label>
          <input
            matInput
            [(ngModel)]="accountNumber"
            (keyup.enter)="onSearch()"
            placeholder="Enter account number to verify..."
          />
          <button mat-icon-button matSuffix (click)="onSearch()" [disabled]="isSearching">
            <fa-icon icon="search"></fa-icon>
          </button>
        </mat-form-field>
        <button mat-raised-button color="primary" (click)="onSearch()" [disabled]="isSearching" class="search-btn">
          @if (isSearching) {
            <mat-spinner diameter="20" class="inline-spinner"></mat-spinner>
          } @else {
            <fa-icon icon="search" class="mr-05"></fa-icon>
          }
          {{ 'labels.text.Search CFR' | translate }}
        </button>
      </div>

      <div class="quick-search">
        <span class="quick-label">Quick Demo:</span>
        @for (acct of sampleAccounts; track acct) {
          <button mat-stroked-button class="quick-btn" (click)="quickLookup(acct)">{{ acct }}</button>
        }
      </div>
    </mat-card-content>
  </mat-card>

  <!-- Results -->
  @if (isSearching) {
    <div class="loading-container">
      <mat-spinner diameter="48"></mat-spinner>
      <p>Querying RBI Central Fraud Registry...</p>
    </div>
  } @else if (hasSearched && result) {
    <mat-card class="result-card" [class.result-clear]="!result.found" [class.result-flagged]="result.found">
      <mat-card-header>
        <mat-card-title>
          @if (result.found) {
            <fa-icon icon="exclamation-triangle" class="warn-icon mr-05"></fa-icon>
            Fraud Records Found
          } @else {
            <fa-icon icon="check-circle" class="clear-icon mr-05"></fa-icon>
            No Fraud Records Found
          }
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div class="account-info">
          <span class="info-label">{{ 'labels.text.Account Number' | translate }}:</span>
          <span class="info-value mono">{{ result.accountNumber }}</span>
          <span class="info-label ml-24">Query Time:</span>
          <span class="info-value">{{ result.queryTimestamp }}</span>
        </div>

        @if (result.found && result.records.length > 0) {
          <table mat-table [dataSource]="result.records" class="full-width records-table">
            <ng-container matColumnDef="fraudReferenceNumber">
              <th mat-header-cell *matHeaderCellDef>Reference</th>
              <td mat-cell *matCellDef="let row" class="mono">{{ row.fraudReferenceNumber }}</td>
            </ng-container>
            <ng-container matColumnDef="fraudCategory">
              <th mat-header-cell *matHeaderCellDef>Category</th>
              <td mat-cell *matCellDef="let row">{{ row.fraudCategory }}</td>
            </ng-container>
            <ng-container matColumnDef="fraudAmount">
              <th mat-header-cell *matHeaderCellDef>{{ 'labels.text.Fraud Amount' | translate }}</th>
              <td mat-cell *matCellDef="let row" class="amount-cell">{{ formatCurrency(row.fraudAmount) }}</td>
            </ng-container>
            <ng-container matColumnDef="reportingBank">
              <th mat-header-cell *matHeaderCellDef>Reporting Bank</th>
              <td mat-cell *matCellDef="let row">{{ row.reportingBank }}</td>
            </ng-container>
            <ng-container matColumnDef="dateReported">
              <th mat-header-cell *matHeaderCellDef>Date Reported</th>
              <td mat-cell *matCellDef="let row">{{ row.dateReported }}</td>
            </ng-container>
            <ng-container matColumnDef="status">
              <th mat-header-cell *matHeaderCellDef>{{ 'labels.text.Status' | translate }}</th>
              <td mat-cell *matCellDef="let row">
                <span class="status-chip" [style.background]="getStatusColor(row.status)">{{ row.status }}</span>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
          </table>

          <div class="remarks-section">
            <h4>{{ 'labels.text.Remarks' | translate }}</h4>
            @for (record of result.records; track record.fraudReferenceNumber) {
              <div class="remark-item">
                <strong>{{ record.fraudReferenceNumber }}:</strong> {{ record.remarks }}
              </div>
            }
          </div>
        } @else if (!result.found) {
          <div class="clear-message">
            <fa-icon icon="shield-alt" size="2x" class="clear-icon"></fa-icon>
            <p>This account has no entries in the Central Fraud Registry. Safe to proceed with onboarding.</p>
          </div>
        }
      </mat-card-content>
    </mat-card>
  }
</div>