feat: MFA/2FA, OTP audit logs, KYC + client/user enhancements

- Access Control module: SMS/Email/TOTP/Hardware-token MFA factor management - OTP Audit Logs module under Admin menu (list + detail) with 401/403 handling - Two-factor authentication login flow updates - Client KYC, India address, family-members, ckyc, nominee enhancements - New shared KYC helpers (kyc-proof-types, kyc-upload-helper.service) - User create/edit/view enhancements - Shell navigation: OTP Audit Logs entry under real Admin menu
2026-05-10 13:24:48 +05:30
parent 2d4fb4237e
commit 3b752dc6ae
56 changed files with 7741 additions and 599 deletions
@@ -8,19 +8,28 @@

 import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule } from '@angular/forms';
-import { MatDialog, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import {
+  MatDialog,
+  MAT_DIALOG_DATA,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
 import { Inject } from '@angular/core';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatSelectTrigger } from '@angular/material/select';

 import { MatDivider } from '@angular/material/divider';
 import { MatIcon } from '@angular/material/icon';
+import { MatIconButton, MatButton } from '@angular/material/button';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { ClientsService } from '../../clients.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { ProofType, normalizeProofType, groupProofsByCategory } from '../../shared/kyc-proof-types';
+import { KycUploadHelperService } from '../../shared/kyc-upload-helper.service';

@Component({
  selector: 'mifosx-client-kyc-step',
@@ -31,6 +40,8 @@ import { Dates } from 'app/core/utils/dates';
    FormsModule,
    MatDivider,
    MatIcon,
+    MatIconButton,
+    MatButton,
    MatCheckbox,
    MatProgressSpinner,
    FaIconComponent,
@@ -43,6 +54,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
  private clientsService = inject(ClientsService);
  private settingsService = inject(SettingsService);
  private dateUtils = inject(Dates);
+  private kycUpload = inject(KycUploadHelperService);

  /** Set by parent after client is created */
  @Input() clientId: string = '';
@@ -67,15 +79,47 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {

  /** KYC Document Types — populated from API template, falls back to defaults */
  kycDocumentTypes: { name: string; code: string; mandatory: boolean }[] = [];
+
+  /** Chip-group state for KYC document picker (mirrors identity proof in identifier dialog) */
+  kycDocProofs: ProofType[] = [];
+  kycDocGroups: { label: string; items: ProofType[] }[] = [];
+  selectedKycDoc: ProofType | null = null;
+  /** Front/back files for the chosen KYC document */
+  kycDocFiles: { front: File | null; back: File | null } = { front: null, back: null };
+  /** Combined front+back PNG (built automatically once both image sides are ready) */
+  kycDocMergedFile: File | null = null;
+  kycDocMergedPreview: string | null = null;
+
+  /** Set true after a save attempt so we can highlight missing photo/signature boxes */
+  photoSigTouched = false;
+
+  /** Either an in-memory crop or an image already on the server */
+  get hasPhoto(): boolean {
+    return !!this.photographPreview;
+  }
+
+  get hasSignature(): boolean {
+    return !!this.signaturePreview;
+  }
+
+  /** Photo + signature are mandatory before leaving the KYC tab */
+  get photoSigComplete(): boolean {
+    return this.hasPhoto && this.hasSignature;
+  }
+
+  /** Mark uploads as touched so the UI shows the missing-required state */
+  markPhotoSigTouched(): void {
+    this.photoSigTouched = true;
+  }
  /** Fallback document types when template API is unavailable */
  private defaultDocumentTypes = [
-    'Aadhaar Card',
-    'Passport',
-    'PAN Card',
-    'Driving Licence',
-    'Voter ID',
-    'NREGA Job Card',
-    'National Population Register Letter'
+    { name: 'Aadhaar Card', code: 'AADHAAR' },
+    { name: 'Passport', code: 'PASSPORT' },
+    { name: 'PAN Card', code: 'PAN' },
+    { name: 'Driving Licence', code: 'DRIVING_LICENSE' },
+    { name: 'Voter ID', code: 'VOTER_ID' },
+    { name: 'NREGA Job Card', code: 'NREGA_JOB_CARD' },
+    { name: 'National Population Register Letter', code: 'NPR_LETTER' }
  ];
  /** Constitution-based KYC document types for non-individual clients */
  private constitutionDocTypes: Record<string, { name: string; mandatory: boolean }[]> = {
@@ -371,6 +415,16 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
  });

  ngOnInit(): void {
+    // Seed defaults immediately so the picker has options before clientId is set
+    // (template API requires clientId; user can still pick a type pre-save).
+    if (!this.kycDocumentTypes.length) {
+      this.kycDocumentTypes = this.defaultDocumentTypes.map((d) => ({
+        name: d.name,
+        code: d.code,
+        mandatory: false
+      }));
+      this.rebuildKycDocPicker();
+    }
    this.loadExistingKycIfNeeded();
    this.loadKycTemplate();
    if (this.isNonIndividual && this.constitutionMeta) {
@@ -412,9 +466,111 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
      // Reset selected document type since options changed
      this.kycForm.get('kycDocumentName')?.setValue('');
      this.kycForm.get('kycDocumentName')?.updateValueAndValidity();
+      this.rebuildKycDocPicker();
    }
  }

+  /** Rebuild chip-group picker model from kycDocumentTypes */
+  private rebuildKycDocPicker(): void {
+    this.kycDocProofs = (this.kycDocumentTypes || []).map((d, i) =>
+      normalizeProofType({ id: d.code || d.name || i, name: d.name, code: d.code, description: d.code || d.name })
+    );
+    this.kycDocGroups = groupProofsByCategory(this.kycDocProofs);
+    // Sync selected proof with current form value (e.g. on edit-mode prefill)
+    const currentName = this.kycForm?.get('kycDocumentName')?.value;
+    this.selectedKycDoc = currentName ? this.kycDocProofs.find((p) => p.name === currentName) || null : null;
+  }
+
+  selectKycDoc(proof: ProofType): void {
+    this.selectedKycDoc = proof;
+    this.kycForm.get('kycDocumentName')?.setValue(proof.name);
+    // Reset uploads + merged preview when document type changes
+    this.kycDocFiles = { front: null, back: null };
+    this.kycDocMergedFile = null;
+    this.kycDocMergedPreview = null;
+  }
+
+  isKycDocSelected(proof: ProofType): boolean {
+    return this.selectedKycDoc?.code === proof.code && this.selectedKycDoc?.name === proof.name;
+  }
+
+  async onKycDocFile(event: Event, slot: 'front' | 'back'): Promise<void> {
+    const input = event.target as HTMLInputElement;
+    const raw = input.files?.[0];
+    input.value = ''; // allow re-picking the same filename
+    if (!raw) return;
+    if (raw.size > 5 * 1024 * 1024) return;
+
+    const cropped = await this.kycUpload.pickWithCrop(raw, `Crop ${slot} side`);
+    if (!cropped) return;
+    this.kycDocFiles[slot] = cropped;
+    await this.refreshKycDocMerged();
+  }
+
+  async reCropKycDocFile(slot: 'front' | 'back'): Promise<void> {
+    const current = this.kycDocFiles[slot];
+    if (!current || !current.type.startsWith('image/')) return;
+    const cropped = await this.kycUpload.pickWithCrop(current, `Re-crop ${slot} side`);
+    if (!cropped) return;
+    this.kycDocFiles[slot] = cropped;
+    await this.refreshKycDocMerged();
+  }
+
+  removeKycDocFile(slot: 'front' | 'back'): void {
+    this.kycDocFiles[slot] = null;
+    this.kycDocMergedFile = null;
+    this.kycDocMergedPreview = null;
+  }
+
+  private async refreshKycDocMerged(): Promise<void> {
+    const proof = this.selectedKycDoc;
+    if (!proof || proof.sides !== 2 || !this.kycDocFiles.front || !this.kycDocFiles.back) {
+      this.kycDocMergedFile = null;
+      this.kycDocMergedPreview = null;
+      return;
+    }
+    const merged = await this.kycUpload.mergeFrontBack(
+      this.kycDocFiles.front,
+      this.kycDocFiles.back,
+      proof.name || 'kyc-document'
+    );
+    if (merged) {
+      this.kycDocMergedFile = merged.file;
+      this.kycDocMergedPreview = merged.preview;
+    } else {
+      this.kycDocMergedFile = null;
+      this.kycDocMergedPreview = null;
+    }
+  }
+
+  /**
+   * Files + proof metadata for the parent to persist as a client identifier.
+   * When both image sides are present they're sent as a single combined PNG;
+   * otherwise the individual files are returned.
+   */
+  get kycDocPayload(): {
+    proof: ProofType | null;
+    proofId: any;
+    documentKey: string;
+    files: { slot: string; file: File }[];
+  } {
+    const files: { slot: string; file: File }[] = [];
+    if (this.selectedKycDoc?.sides === 2 && this.kycDocMergedFile) {
+      files.push({ slot: 'Combined', file: this.kycDocMergedFile });
+    } else {
+      if (this.kycDocFiles.front) files.push({ slot: 'Front', file: this.kycDocFiles.front });
+      if (this.selectedKycDoc?.sides === 2 && this.kycDocFiles.back) {
+        files.push({ slot: 'Back', file: this.kycDocFiles.back });
+      }
+    }
+    return {
+      proof: this.selectedKycDoc,
+      proofId: this.selectedKycDoc?.id ?? '',
+      documentKey: this.kycForm.get('kycDocumentNumber')?.value || '',
+      files
+    };
+  }
+
  /** Load existing KYC data if clientId is set (edit mode) */
  private loadExistingKycIfNeeded(): void {
    if (!this.clientId || this.kycLoaded) return;
@@ -469,6 +625,10 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
            form15Type: data.form15Type || '15G',
            form15FY: data.form15FY || ''
          });
+          // Sync chip-picker selection with the prefilled document name
+          if (data.kycDocumentName) {
+            this.selectedKycDoc = this.kycDocProofs.find((p) => p.name === data.kycDocumentName) || null;
+          }
          // Set verification statuses from existing data
          if (data.panVerified) {
            this.panVerifyStatus = 'VERIFIED';
@@ -568,16 +728,18 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
            this.kycForm.get('kycDocumentName')?.setValidators(Validators.required);
          }
          this.kycForm.get('kycDocumentName')?.updateValueAndValidity();
+          this.rebuildKycDocPicker();
        }
      },
      error: () => {
        // Fallback to defaults if template API unavailable
        this.kycTemplateLoaded = true;
-        this.kycDocumentTypes = this.defaultDocumentTypes.map((name) => ({
-          name,
-          code: name,
+        this.kycDocumentTypes = this.defaultDocumentTypes.map((d) => ({
+          name: d.name,
+          code: d.code,
          mandatory: false
        }));
+        this.rebuildKycDocPicker();
      }
    });
  }
@@ -1232,6 +1394,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
    MatIcon,
    MatDialogContent,
    MatDialogActions,
+    MatDialogClose,
    STANDALONE_SHARED_IMPORTS
  ]
 })