cbsnexora/src/app/cfcfrms/report-suspect/report-suspect.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 Suspect Account' | translate }}</h2>
    <p class="subtitle">{{ 'labels.text.Report internally detected suspect account to I4C' | translate }}</p>
  </div>

  <div class="report-layout">
    <mat-card class="report-card">
      <mat-card-header>
        <mat-card-title>
          <fa-icon icon="user-shield" class="mr-05"></fa-icon> {{ 'labels.text.Suspect 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.Report Submitted' | 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.Status' | translate }}</span
                ><span class="result-value">{{ 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" />
              @if (form.get('accountName')?.hasError('required') && form.get('accountName')?.touched) {
                <mat-error>Account name is required</mat-error>
              }
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Bank IFSC' | translate }}</mat-label>
              <input matInput formControlName="bankIfsc" placeholder="e.g. LINC0000001" />
              @if (form.get('bankIfsc')?.hasError('pattern') && form.get('bankIfsc')?.touched) {
                <mat-error>{{ 'labels.text.Invalid IFSC format' | translate }}</mat-error>
              }
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Suspicion Reason' | translate }}</mat-label>
              <mat-select formControlName="suspicionReason">
                @for (reason of suspicionReasons; track reason) {
                  <mat-option [value]="reason">{{ reason }}</mat-option>
                }
              </mat-select>
              @if (form.get('suspicionReason')?.hasError('required') && form.get('suspicionReason')?.touched) {
                <mat-error>Suspicion reason is required</mat-error>
              }
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Detected By' | translate }}</mat-label>
              <input matInput formControlName="detectedBy" placeholder="Officer name / system" />
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Detection Date' | translate }}</mat-label>
              <input matInput [matDatepicker]="picker" formControlName="detectedOn" />
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>

            <mat-form-field appearance="outline" class="full-width">
              <mat-label>{{ 'labels.text.Linked Transaction IDs' | translate }}</mat-label>
              <input matInput formControlName="linkedTransactions" placeholder="Comma-separated TXN IDs" />
            </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>