cbsnexora/src/app/cfcfrms/report-mule/report-mule.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="report-page">
  <div class="page-header">
    <h2>{{ 'labels.text.Report Mule Account' | translate }}</h2>
    <p class="subtitle">{{ 'labels.text.Flag a mule account proactively to I4C/CFCFRMS' | translate }}</p>
  </div>

  <div class="report-layout">
    <mat-card class="report-card">
      <mat-card-header>
        <mat-card-title>
          <fa-icon icon="user-slash" class="mr-05"></fa-icon> {{ 'labels.text.Mule Account Details' | translate }}
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        @if (result) {
          <div class="success-result">
            <div class="success-icon"><fa-icon icon="check-circle" size="3x"></fa-icon></div>
            <h3>{{ 'labels.text.Mule Account Flagged' | translate }}</h3>
            <div class="result-details">
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Reference Number' | translate }}</span
                ><span class="result-value mono">{{ result.referenceNumber }}</span>
              </div>
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Account Number' | translate }}</span
                ><span class="result-value mono">{{ result.accountNumber }}</span>
              </div>
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Mule Type' | translate }}</span
                ><span class="result-value">{{ result.muleType }}</span>
              </div>
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Status' | translate }}</span
                ><span class="result-value status-flagged">{{ result.status }}</span>
              </div>
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Timestamp' | translate }}</span
                ><span class="result-value">{{ result.reportedAt }}</span>
              </div>
            </div>
            <button mat-raised-button color="primary" (click)="resetForm()" class="mt-16">
              <fa-icon icon="plus" class="mr-05"></fa-icon> {{ 'labels.text.New Report' | translate }}
            </button>
          </div>
        } @else {
          <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Account Number' | translate }}</mat-label>
              <input matInput formControlName="accountNumber" placeholder="e.g. 50100268347291" />
              @if (form.get('accountNumber')?.hasError('required') && form.get('accountNumber')?.touched) {
                <mat-error>Account number is required</mat-error>
              }
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Account Name' | translate }}</mat-label>
              <input matInput formControlName="accountName" placeholder="Account holder name" />
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Bank IFSC' | translate }}</mat-label>
              <input matInput formControlName="bankIfsc" />
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Mule Type' | translate }}</mat-label>
              <mat-select formControlName="muleType">
                @for (t of muleTypes; track t.value) {
                  <mat-option [value]="t.value">{{ t.label }}</mat-option>
                }
              </mat-select>
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Transaction Pattern' | translate }}</mat-label>
              <mat-select formControlName="transactionPattern">
                @for (p of transactionPatterns; track p) {
                  <mat-option [value]="p">{{ p }}</mat-option>
                }
              </mat-select>
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Total Suspicious Amount (INR)' | translate }}</mat-label>
              <input matInput type="number" formControlName="totalSuspiciousAmount" placeholder="0.00" />
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Linked Fraud Ticket IDs' | translate }}</mat-label>
              <input
                matInput
                formControlName="linkedFraudTickets"
                placeholder="e.g. CFCFRMS-2024-00001, CFCFRMS-2024-00002"
              />
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Remarks' | translate }}</mat-label>
              <textarea
                matInput
                formControlName="remarks"
                rows="3"
                placeholder="{{ 'labels.text.Enter remarks...' | translate }}"
              ></textarea>
            </mat-form-field>

            <button
              mat-raised-button
              color="primary"
              type="submit"
              [disabled]="isSubmitting"
              class="full-width submit-btn"
            >
              @if (isSubmitting) {
                <mat-spinner diameter="20" class="inline-spinner"></mat-spinner>
              } @else {
                <fa-icon icon="paper-plane" class="mr-05"></fa-icon> {{ 'labels.text.Submit Report' | translate }}
              }
            </button>
          </form>
        }
      </mat-card-content>
    </mat-card>
  </div>
</div>