cbsnexora/src/app/cfcfrms/fmr-submission/fmr-submission.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="report-layout">
    <mat-card class="report-card wide-card">
      <mat-card-header>
        <mat-card-title>
          <fa-icon icon="university" class="mr-05"></fa-icon>
          {{ 'labels.text.Fraud Monitoring Return (FMR)' | 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.FMR Submitted Successfully' | translate }}</h3>
            <div class="result-details">
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.FMR Reference' | translate }}</span
                ><span class="result-value mono">{{ result.fmrReferenceNumber }}</span>
              </div>
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Bank IFSC' | translate }}</span
                ><span class="result-value mono">{{ result.reportingBankIfsc }}</span>
              </div>
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Fraud Category' | translate }}</span
                ><span class="result-value">{{ result.fraudCategory }}</span>
              </div>
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Fraud Amount' | translate }}</span
                ><span class="result-value">&#8377;{{ result.fraudAmount?.toLocaleString() }}</span>
              </div>
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Status' | translate }}</span
                ><span class="result-value status-submitted">{{ result.status }}</span>
              </div>
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Submitted At' | translate }}</span
                ><span class="result-value">{{ result.submittedAt }}</span>
              </div>
              <div class="result-row">
                <span class="result-label">{{ 'labels.text.Next FMR Due Date' | translate }}</span
                ><span class="result-value">{{ result.nextDueDate }}</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 FMR' | translate }}
            </button>
          </div>
        } @else {
          <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <div class="form-row">
              <mat-form-field appearance="outline" class="half-width">
                <mat-label>{{ 'labels.text.Reporting Bank IFSC' | translate }}</mat-label>
                <input matInput formControlName="reportingBankIfsc" readonly />
              </mat-form-field>
              <mat-form-field appearance="outline" class="half-width">
                <mat-label>{{ 'labels.text.Reporting Bank Name' | translate }}</mat-label>
                <input matInput formControlName="reportingBankName" readonly />
              </mat-form-field>
            </div>

            <div class="form-row">
              <mat-form-field appearance="outline" class="half-width">
                <mat-label>{{ 'labels.text.Fraud Category' | translate }}</mat-label>
                <mat-select formControlName="fraudCategory">
                  @for (cat of fraudCategories; track cat) {
                    <mat-option [value]="cat">{{ cat }}</mat-option>
                  }
                </mat-select>
              </mat-form-field>
              <mat-form-field appearance="outline" class="half-width">
                <mat-label>{{ 'labels.text.Sub-Category' | translate }}</mat-label>
                <mat-select formControlName="fraudSubCategory">
                  @for (sub of fraudSubCategories; track sub) {
                    <mat-option [value]="sub">{{ sub }}</mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </div>

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

            <div class="form-row">
              <mat-form-field appearance="outline" class="half-width">
                <mat-label>{{ 'labels.text.Account Number' | translate }}</mat-label>
                <input matInput formControlName="accountNumber" />
              </mat-form-field>
              <mat-form-field appearance="outline" class="half-width">
                <mat-label>{{ 'labels.text.Account Holder Name' | translate }}</mat-label>
                <input matInput formControlName="accountHolderName" />
              </mat-form-field>
            </div>

            <div class="form-row">
              <mat-form-field appearance="outline" class="half-width">
                <mat-label>{{ 'labels.text.Date of Detection' | translate }}</mat-label>
                <input matInput [matDatepicker]="detPicker" formControlName="dateOfDetection" />
                <mat-datepicker-toggle matSuffix [for]="detPicker"></mat-datepicker-toggle>
                <mat-datepicker #detPicker></mat-datepicker>
              </mat-form-field>
              <mat-form-field appearance="outline" class="half-width">
                <mat-label>{{ 'labels.text.Date of Fraud' | translate }}</mat-label>
                <input matInput [matDatepicker]="fraudPicker" formControlName="dateOfFraud" />
                <mat-datepicker-toggle matSuffix [for]="fraudPicker"></mat-datepicker-toggle>
                <mat-datepicker #fraudPicker></mat-datepicker>
              </mat-form-field>
            </div>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Modus Operandi' | translate }}</mat-label>
              <textarea
                matInput
                formControlName="modus"
                rows="3"
                placeholder="Describe the method used to commit fraud..."
              ></textarea>
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Action Taken' | translate }}</mat-label>
              <mat-select formControlName="actionTaken">
                @for (action of actionsTaken; track action) {
                  <mat-option [value]="action">{{ action }}</mat-option>
                }
              </mat-select>
            </mat-form-field>

            <div class="checkbox-row">
              <mat-checkbox formControlName="staffInvolved" color="warn">{{
                'labels.text.Staff Involved in Fraud' | translate
              }}</mat-checkbox>
            </div>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Remarks' | translate }}</mat-label>
              <textarea
                matInput
                formControlName="remarks"
                rows="2"
                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 to RBI' | translate }}
              }
            </button>
          </form>
        }
      </mat-card-content>
    </mat-card>
  </div>
</div>