CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

merging code

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nitesh Yadav
2026-04-20 14:26:25 +05:30
co-authored by Claude Sonnet 4.6
parent e212bf7d79 d72e969dc3
commit d367e76104
322 changed files with 28779 additions and 4976 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.html
+445 -261
View File
@@ -24,52 +24,100 @@
</div>
</div>
<!-- Top Section: Read-Only Client Info -->
<mat-card class="ckyc-info-card">
<mat-card-content>
<div class="ckyc-info-grid">
<!-- Account Number Dropdown -->
<div class="ckyc-info-item">
<span class="ckyc-info-label">{{ 'labels.inputs.Account Number' | translate }}</span>
<mat-form-field appearance="outline">
<mat-select
[value]="selectedAccount?.accountNo || ''"
(selectionChange)="onAccountSelect($event.value)"
[placeholder]="'labels.inputs.Select Account' | translate"
>
@for (account of allAccounts; track account.accountNo) {
<mat-option [value]="account.accountNo">
{{ account.accountNo }} ({{ account.productName }})
</mat-option>
}
</mat-select>
</mat-form-field>
</div>
<!-- Client ID -->
<div class="ckyc-info-item">
<span class="ckyc-info-label">{{ 'labels.inputs.Client ID' | translate }}</span>
<span class="ckyc-info-value">{{ clientId }}</span>
</div>
<!-- Client Name -->
<div class="ckyc-info-item">
<span class="ckyc-info-label">{{ 'labels.inputs.Client Name' | translate }}</span>
<span class="ckyc-info-value">{{ clientName }}</span>
</div>
<!-- Account Type -->
<div class="ckyc-info-item">
<span class="ckyc-info-label">{{ 'labels.inputs.Account Type' | translate }}</span>
<span class="ckyc-info-value">{{ selectedAccountType || '—' }}</span>
</div>
<!-- CERSAI Sync Status hero -->
<div class="cersai-hero" [class.cersai-hero--synced]="ckycNumber" [class.cersai-hero--pending]="!ckycNumber">
<div class="cersai-hero__left">
<div class="cersai-hero__icon">
@if (ckycNumber) {
<fa-icon icon="check-double"></fa-icon>
} @else {
<fa-icon icon="hourglass-half"></fa-icon>
}
</div>
</mat-card-content>
</mat-card>
<div class="cersai-hero__text">
<div class="cersai-hero__status">
@if (ckycNumber) {
<span class="cersai-hero__tag">SYNCED WITH CERSAI</span>
} @else {
<span class="cersai-hero__tag cersai-hero__tag--pending">PENDING CERSAI SYNC</span>
}
</div>
@if (ckycNumber) {
<div class="cersai-hero__ckyc-label">CKYC Registry Number</div>
<div class="cersai-hero__ckyc-number">{{ ckycNumber }}</div>
<div class="cersai-hero__meta">
@if (ckycUploadedOn) {
<span>
<fa-icon icon="calendar-check"></fa-icon>
Uploaded on <strong>{{ ckycUploadedOn }}</strong>
</span>
}
@if (ckycBatchId) {
<span class="cersai-hero__sep">·</span>
<span>
<fa-icon icon="file-archive"></fa-icon>
Batch <strong>{{ ckycBatchId }}</strong>
</span>
}
</div>
} @else {
<div class="cersai-hero__ckyc-label">This client has not yet been synced to the CERSAI registry</div>
<div class="cersai-hero__hint">
Collect all 4 artefacts below, then create a batch from the Record Master to upload.
</div>
}
</div>
</div>
@if (ckycNumber) {
<div class="cersai-hero__pulse">
<span class="cersai-hero__pulse-dot"></span>
Live
</div>
}
</div>
<!-- Client basic info -->
<div class="ckyc-info-grid">
<div class="ckyc-info-item">
<span class="ckyc-info-label"> <fa-icon icon="hashtag"></fa-icon> CIF Number </span>
<span class="ckyc-info-value ckyc-info-value--mono">{{ cifNumber || clientId }}</span>
</div>
<div class="ckyc-info-item">
<span class="ckyc-info-label"> <fa-icon icon="user"></fa-icon> Full Name </span>
<span class="ckyc-info-value">{{ clientName || '—' }}</span>
</div>
<div class="ckyc-info-item">
<span class="ckyc-info-label"> <fa-icon icon="envelope"></fa-icon> Email </span>
@if (clientEmail) {
<span class="ckyc-info-value">{{ clientEmail }}</span>
} @else {
<span class="ckyc-info-value ckyc-info-value--missing">No email on file</span>
}
</div>
<div class="ckyc-info-item">
<span class="ckyc-info-label"> <fa-icon icon="phone"></fa-icon> Mobile </span>
@if (clientMobile) {
<span class="ckyc-info-value">{{ clientMobile }}</span>
} @else {
<span class="ckyc-info-value ckyc-info-value--missing">No mobile on file</span>
}
</div>
</div>
<!-- Document Upload Section -->
<h4 class="ckyc-section-title">{{ 'labels.heading.CKYC Documents' | translate }}</h4>
@if (checkingExisting) {
<div class="ckyc-existing-loading">
<mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
<span>Checking for already-uploaded artefacts…</span>
</div>
}
<div class="ckyc-upload-grid">
<!-- Address Proof Document -->
<mat-card class="ckyc-upload-card">
@@ -78,64 +126,101 @@
<mat-icon class="ckyc-upload-icon">home</mat-icon>
<span>{{ 'labels.inputs.Address Proof Document' | translate }}</span>
</div>
<p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
<div class="ckyc-file-row">
<input
type="file"
#addressProofInput
accept=".png,.jpeg,.jpg,.pdf"
(change)="onFileSelect($event, 'ADDRESS_PROOF')"
[style.display]="'none'"
/>
<mat-form-field appearance="outline" class="ckyc-file-name-field">
<input
matInput
[readonly]="true"
[value]="addressProofFile?.name || ''"
[placeholder]="'labels.text.NoFileSelected' | translate"
/>
</mat-form-field>
<button mat-stroked-button type="button" (click)="addressProofInput.click()">
<fa-icon icon="folder-open" size="lg"></fa-icon>
&nbsp;{{ 'labels.buttons.Browse' | translate }}
</button>
</div>
<button
mat-raised-button
color="primary"
type="button"
[disabled]="!addressProofFile || uploading['ADDRESS_PROOF']"
(click)="uploadDocument('ADDRESS_PROOF')"
>
@if (uploading['ADDRESS_PROOF']) {
<mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
} @else {
{{ 'labels.buttons.Upload' | translate }}
}
</button>
@if (uploadErrors['ADDRESS_PROOF']) {
<div class="ckyc-upload-error">
<mat-icon>error_outline</mat-icon>
<span>{{ uploadErrors['ADDRESS_PROOF'] }}</span>
@if (existing.ADDRESS_PROOF.present) {
<div class="ckyc-existing">
<div class="ckyc-existing__head">
<fa-icon icon="check-circle" class="ckyc-existing__ok"></fa-icon>
<div>
<strong>Already available</strong>
<span class="ckyc-existing__source">from {{ existing.ADDRESS_PROOF.source }}</span>
</div>
</div>
<div class="ckyc-existing__meta">
<fa-icon icon="file-alt"></fa-icon>
<span>{{ existing.ADDRESS_PROOF.name }}</span>
@if (existing.ADDRESS_PROOF.documentKey) {
<span class="ckyc-existing__key">{{ existing.ADDRESS_PROOF.documentKey }}</span>
}
@if (existing.ADDRESS_PROOF.fileCount && existing.ADDRESS_PROOF.fileCount > 0) {
<span class="ckyc-existing__count">
{{ existing.ADDRESS_PROOF.fileCount }}
{{ existing.ADDRESS_PROOF.fileCount === 1 ? 'file' : 'files' }}
</span>
}
</div>
<button
mat-stroked-button
type="button"
class="ckyc-existing__replace"
(click)="toggleReplace('ADDRESS_PROOF')"
>
<fa-icon [icon]="existing.ADDRESS_PROOF.expanded ? 'times' : 'upload'"></fa-icon>
{{ existing.ADDRESS_PROOF.expanded ? 'Cancel replace' : 'Upload new version' }}
</button>
</div>
}
@if (uploadResponses['ADDRESS_PROOF']) {
<div class="ckyc-upload-response">
<p>
<b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['ADDRESS_PROOF'].status }}
</p>
<p>
<b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['ADDRESS_PROOF'].requestId }}
</p>
<p>
<b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
{{ uploadResponses['ADDRESS_PROOF'].acknowledgementNumber }}
</p>
<p>
<b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
{{ uploadResponses['ADDRESS_PROOF'].processingStatus }}
</p>
@if (!existing.ADDRESS_PROOF.present || existing.ADDRESS_PROOF.expanded) {
<p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
<div class="ckyc-file-row">
<input
type="file"
#addressProofInput
accept=".png,.jpeg,.jpg,.pdf"
(change)="onFileSelect($event, 'ADDRESS_PROOF')"
[style.display]="'none'"
/>
<mat-form-field appearance="outline" class="ckyc-file-name-field">
<input
matInput
[readonly]="true"
[value]="addressProofFile?.name || ''"
[placeholder]="'labels.text.NoFileSelected' | translate"
/>
</mat-form-field>
<button mat-stroked-button type="button" (click)="addressProofInput.click()">
<fa-icon icon="folder-open" size="lg"></fa-icon>
&nbsp;{{ 'labels.buttons.Browse' | translate }}
</button>
</div>
<button
mat-raised-button
color="primary"
type="button"
[disabled]="!addressProofFile || uploading['ADDRESS_PROOF']"
(click)="uploadDocument('ADDRESS_PROOF')"
>
@if (uploading['ADDRESS_PROOF']) {
<mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
} @else {
{{ 'labels.buttons.Upload' | translate }}
}
</button>
@if (uploadErrors['ADDRESS_PROOF']) {
<div class="ckyc-upload-error">
<mat-icon>error_outline</mat-icon>
<span>{{ uploadErrors['ADDRESS_PROOF'] }}</span>
</div>
}
@if (uploadResponses['ADDRESS_PROOF']) {
<div class="ckyc-upload-response">
<p>
<b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['ADDRESS_PROOF'].status }}
</p>
<p>
<b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['ADDRESS_PROOF'].requestId }}
</p>
<p>
<b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
{{ uploadResponses['ADDRESS_PROOF'].acknowledgementNumber }}
</p>
<p>
<b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
{{ uploadResponses['ADDRESS_PROOF'].processingStatus }}
</p>
</div>
}
}
</mat-card-content>
</mat-card>
@@ -147,64 +232,100 @@
<mat-icon class="ckyc-upload-icon">photo_camera</mat-icon>
<span>{{ 'labels.inputs.Photo Proof Document' | translate }}</span>
</div>
<p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
<div class="ckyc-file-row">
<input
type="file"
#photoProofInput
accept=".png,.jpeg,.jpg,.pdf"
(change)="onFileSelect($event, 'PHOTO_PROOF')"
[style.display]="'none'"
/>
<mat-form-field appearance="outline" class="ckyc-file-name-field">
<input
matInput
[readonly]="true"
[value]="photoProofFile?.name || ''"
[placeholder]="'labels.text.NoFileSelected' | translate"
/>
</mat-form-field>
<button mat-stroked-button type="button" (click)="photoProofInput.click()">
<fa-icon icon="folder-open" size="lg"></fa-icon>
&nbsp;{{ 'labels.buttons.Browse' | translate }}
</button>
</div>
<button
mat-raised-button
color="primary"
type="button"
[disabled]="!photoProofFile || uploading['PHOTO_PROOF']"
(click)="uploadDocument('PHOTO_PROOF')"
>
@if (uploading['PHOTO_PROOF']) {
<mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
} @else {
{{ 'labels.buttons.Upload' | translate }}
}
</button>
@if (uploadErrors['PHOTO_PROOF']) {
<div class="ckyc-upload-error">
<mat-icon>error_outline</mat-icon>
<span>{{ uploadErrors['PHOTO_PROOF'] }}</span>
@if (existing.PHOTO_PROOF.present) {
<div class="ckyc-existing">
<div class="ckyc-existing__head">
<fa-icon icon="check-circle" class="ckyc-existing__ok"></fa-icon>
<div>
<strong>Already available</strong>
<span class="ckyc-existing__source">from {{ existing.PHOTO_PROOF.source }}</span>
</div>
</div>
<div class="ckyc-existing__meta">
<fa-icon icon="id-card"></fa-icon>
<span>{{ existing.PHOTO_PROOF.name }}</span>
@if (existing.PHOTO_PROOF.documentKey) {
<span class="ckyc-existing__key">{{ existing.PHOTO_PROOF.documentKey }}</span>
}
@if (existing.PHOTO_PROOF.fileCount && existing.PHOTO_PROOF.fileCount > 0) {
<span class="ckyc-existing__count">
{{ existing.PHOTO_PROOF.fileCount }} {{ existing.PHOTO_PROOF.fileCount === 1 ? 'file' : 'files' }}
</span>
}
</div>
<button
mat-stroked-button
type="button"
class="ckyc-existing__replace"
(click)="toggleReplace('PHOTO_PROOF')"
>
<fa-icon [icon]="existing.PHOTO_PROOF.expanded ? 'times' : 'upload'"></fa-icon>
{{ existing.PHOTO_PROOF.expanded ? 'Cancel replace' : 'Upload new version' }}
</button>
</div>
}
@if (uploadResponses['PHOTO_PROOF']) {
<div class="ckyc-upload-response">
<p>
<b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['PHOTO_PROOF'].status }}
</p>
<p>
<b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['PHOTO_PROOF'].requestId }}
</p>
<p>
<b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
{{ uploadResponses['PHOTO_PROOF'].acknowledgementNumber }}
</p>
<p>
<b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
{{ uploadResponses['PHOTO_PROOF'].processingStatus }}
</p>
@if (!existing.PHOTO_PROOF.present || existing.PHOTO_PROOF.expanded) {
<p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
<div class="ckyc-file-row">
<input
type="file"
#photoProofInput
accept=".png,.jpeg,.jpg,.pdf"
(change)="onFileSelect($event, 'PHOTO_PROOF')"
[style.display]="'none'"
/>
<mat-form-field appearance="outline" class="ckyc-file-name-field">
<input
matInput
[readonly]="true"
[value]="photoProofFile?.name || ''"
[placeholder]="'labels.text.NoFileSelected' | translate"
/>
</mat-form-field>
<button mat-stroked-button type="button" (click)="photoProofInput.click()">
<fa-icon icon="folder-open" size="lg"></fa-icon>
&nbsp;{{ 'labels.buttons.Browse' | translate }}
</button>
</div>
<button
mat-raised-button
color="primary"
type="button"
[disabled]="!photoProofFile || uploading['PHOTO_PROOF']"
(click)="uploadDocument('PHOTO_PROOF')"
>
@if (uploading['PHOTO_PROOF']) {
<mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
} @else {
{{ 'labels.buttons.Upload' | translate }}
}
</button>
@if (uploadErrors['PHOTO_PROOF']) {
<div class="ckyc-upload-error">
<mat-icon>error_outline</mat-icon>
<span>{{ uploadErrors['PHOTO_PROOF'] }}</span>
</div>
}
@if (uploadResponses['PHOTO_PROOF']) {
<div class="ckyc-upload-response">
<p>
<b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['PHOTO_PROOF'].status }}
</p>
<p>
<b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['PHOTO_PROOF'].requestId }}
</p>
<p>
<b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
{{ uploadResponses['PHOTO_PROOF'].acknowledgementNumber }}
</p>
<p>
<b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
{{ uploadResponses['PHOTO_PROOF'].processingStatus }}
</p>
</div>
}
}
</mat-card-content>
</mat-card>
@@ -216,64 +337,91 @@
<mat-icon class="ckyc-upload-icon">person</mat-icon>
<span>{{ 'labels.inputs.Image of Client' | translate }}</span>
</div>
<p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG</p>
<div class="ckyc-file-row">
<input
type="file"
#clientImageInput
accept=".png,.jpeg,.jpg"
(change)="onFileSelect($event, 'CLIENT_IMAGE')"
[style.display]="'none'"
/>
<mat-form-field appearance="outline" class="ckyc-file-name-field">
<input
matInput
[readonly]="true"
[value]="clientImageFile?.name || ''"
[placeholder]="'labels.text.NoFileSelected' | translate"
/>
</mat-form-field>
<button mat-stroked-button type="button" (click)="clientImageInput.click()">
<fa-icon icon="folder-open" size="lg"></fa-icon>
&nbsp;{{ 'labels.buttons.Browse' | translate }}
</button>
</div>
<button
mat-raised-button
color="primary"
type="button"
[disabled]="!clientImageFile || uploading['CLIENT_IMAGE']"
(click)="uploadDocument('CLIENT_IMAGE')"
>
@if (uploading['CLIENT_IMAGE']) {
<mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
} @else {
{{ 'labels.buttons.Upload' | translate }}
}
</button>
@if (uploadErrors['CLIENT_IMAGE']) {
<div class="ckyc-upload-error">
<mat-icon>error_outline</mat-icon>
<span>{{ uploadErrors['CLIENT_IMAGE'] }}</span>
@if (existing.CLIENT_IMAGE.present) {
<div class="ckyc-existing">
<div class="ckyc-existing__head">
<fa-icon icon="check-circle" class="ckyc-existing__ok"></fa-icon>
<div>
<strong>Already available</strong>
<span class="ckyc-existing__source">from {{ existing.CLIENT_IMAGE.source }}</span>
</div>
</div>
@if (existing.CLIENT_IMAGE.previewUrl) {
<img [src]="existing.CLIENT_IMAGE.previewUrl" alt="Client photo" class="ckyc-existing__thumb" />
}
<button
mat-stroked-button
type="button"
class="ckyc-existing__replace"
(click)="toggleReplace('CLIENT_IMAGE')"
>
<fa-icon [icon]="existing.CLIENT_IMAGE.expanded ? 'times' : 'upload'"></fa-icon>
{{ existing.CLIENT_IMAGE.expanded ? 'Cancel replace' : 'Upload new version' }}
</button>
</div>
}
@if (uploadResponses['CLIENT_IMAGE']) {
<div class="ckyc-upload-response">
<p>
<b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['CLIENT_IMAGE'].status }}
</p>
<p>
<b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['CLIENT_IMAGE'].requestId }}
</p>
<p>
<b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
{{ uploadResponses['CLIENT_IMAGE'].acknowledgementNumber }}
</p>
<p>
<b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
{{ uploadResponses['CLIENT_IMAGE'].processingStatus }}
</p>
@if (!existing.CLIENT_IMAGE.present || existing.CLIENT_IMAGE.expanded) {
<p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG</p>
<div class="ckyc-file-row">
<input
type="file"
#clientImageInput
accept=".png,.jpeg,.jpg"
(change)="onFileSelect($event, 'CLIENT_IMAGE')"
[style.display]="'none'"
/>
<mat-form-field appearance="outline" class="ckyc-file-name-field">
<input
matInput
[readonly]="true"
[value]="clientImageFile?.name || ''"
[placeholder]="'labels.text.NoFileSelected' | translate"
/>
</mat-form-field>
<button mat-stroked-button type="button" (click)="clientImageInput.click()">
<fa-icon icon="folder-open" size="lg"></fa-icon>
&nbsp;{{ 'labels.buttons.Browse' | translate }}
</button>
</div>
<button
mat-raised-button
color="primary"
type="button"
[disabled]="!clientImageFile || uploading['CLIENT_IMAGE']"
(click)="uploadDocument('CLIENT_IMAGE')"
>
@if (uploading['CLIENT_IMAGE']) {
<mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
} @else {
{{ 'labels.buttons.Upload' | translate }}
}
</button>
@if (uploadErrors['CLIENT_IMAGE']) {
<div class="ckyc-upload-error">
<mat-icon>error_outline</mat-icon>
<span>{{ uploadErrors['CLIENT_IMAGE'] }}</span>
</div>
}
@if (uploadResponses['CLIENT_IMAGE']) {
<div class="ckyc-upload-response">
<p>
<b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['CLIENT_IMAGE'].status }}
</p>
<p>
<b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['CLIENT_IMAGE'].requestId }}
</p>
<p>
<b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
{{ uploadResponses['CLIENT_IMAGE'].acknowledgementNumber }}
</p>
<p>
<b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
{{ uploadResponses['CLIENT_IMAGE'].processingStatus }}
</p>
</div>
}
}
</mat-card-content>
</mat-card>
@@ -285,64 +433,100 @@
<mat-icon class="ckyc-upload-icon">draw</mat-icon>
<span>{{ 'labels.inputs.Signature of Client' | translate }}</span>
</div>
<p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG</p>
<div class="ckyc-file-row">
<input
type="file"
#clientSignatureInput
accept=".png,.jpeg,.jpg"
(change)="onFileSelect($event, 'CLIENT_SIGNATURE')"
[style.display]="'none'"
/>
<mat-form-field appearance="outline" class="ckyc-file-name-field">
<input
matInput
[readonly]="true"
[value]="clientSignatureFile?.name || ''"
[placeholder]="'labels.text.NoFileSelected' | translate"
/>
</mat-form-field>
<button mat-stroked-button type="button" (click)="clientSignatureInput.click()">
<fa-icon icon="folder-open" size="lg"></fa-icon>
&nbsp;{{ 'labels.buttons.Browse' | translate }}
</button>
</div>
<button
mat-raised-button
color="primary"
type="button"
[disabled]="!clientSignatureFile || uploading['CLIENT_SIGNATURE']"
(click)="uploadDocument('CLIENT_SIGNATURE')"
>
@if (uploading['CLIENT_SIGNATURE']) {
<mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
} @else {
{{ 'labels.buttons.Upload' | translate }}
}
</button>
@if (uploadErrors['CLIENT_SIGNATURE']) {
<div class="ckyc-upload-error">
<mat-icon>error_outline</mat-icon>
<span>{{ uploadErrors['CLIENT_SIGNATURE'] }}</span>
@if (existing.CLIENT_SIGNATURE.present) {
<div class="ckyc-existing">
<div class="ckyc-existing__head">
<fa-icon icon="check-circle" class="ckyc-existing__ok"></fa-icon>
<div>
<strong>Already available</strong>
<span class="ckyc-existing__source">from {{ existing.CLIENT_SIGNATURE.source }}</span>
</div>
</div>
@if (existing.CLIENT_SIGNATURE.previewUrl) {
<img
[src]="existing.CLIENT_SIGNATURE.previewUrl"
alt="Client signature"
class="ckyc-existing__thumb ckyc-existing__thumb--wide"
/>
}
<div class="ckyc-existing__meta">
<fa-icon icon="file-signature"></fa-icon>
<span>{{ existing.CLIENT_SIGNATURE.name }}</span>
</div>
<button
mat-stroked-button
type="button"
class="ckyc-existing__replace"
(click)="toggleReplace('CLIENT_SIGNATURE')"
>
<fa-icon [icon]="existing.CLIENT_SIGNATURE.expanded ? 'times' : 'upload'"></fa-icon>
{{ existing.CLIENT_SIGNATURE.expanded ? 'Cancel replace' : 'Upload new version' }}
</button>
</div>
}
@if (uploadResponses['CLIENT_SIGNATURE']) {
<div class="ckyc-upload-response">
<p>
<b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['CLIENT_SIGNATURE'].status }}
</p>
<p>
<b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['CLIENT_SIGNATURE'].requestId }}
</p>
<p>
<b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
{{ uploadResponses['CLIENT_SIGNATURE'].acknowledgementNumber }}
</p>
<p>
<b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
{{ uploadResponses['CLIENT_SIGNATURE'].processingStatus }}
</p>
@if (!existing.CLIENT_SIGNATURE.present || existing.CLIENT_SIGNATURE.expanded) {
<p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG</p>
<div class="ckyc-file-row">
<input
type="file"
#clientSignatureInput
accept=".png,.jpeg,.jpg"
(change)="onFileSelect($event, 'CLIENT_SIGNATURE')"
[style.display]="'none'"
/>
<mat-form-field appearance="outline" class="ckyc-file-name-field">
<input
matInput
[readonly]="true"
[value]="clientSignatureFile?.name || ''"
[placeholder]="'labels.text.NoFileSelected' | translate"
/>
</mat-form-field>
<button mat-stroked-button type="button" (click)="clientSignatureInput.click()">
<fa-icon icon="folder-open" size="lg"></fa-icon>
&nbsp;{{ 'labels.buttons.Browse' | translate }}
</button>
</div>
<button
mat-raised-button
color="primary"
type="button"
[disabled]="!clientSignatureFile || uploading['CLIENT_SIGNATURE']"
(click)="uploadDocument('CLIENT_SIGNATURE')"
>
@if (uploading['CLIENT_SIGNATURE']) {
<mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
} @else {
{{ 'labels.buttons.Upload' | translate }}
}
</button>
@if (uploadErrors['CLIENT_SIGNATURE']) {
<div class="ckyc-upload-error">
<mat-icon>error_outline</mat-icon>
<span>{{ uploadErrors['CLIENT_SIGNATURE'] }}</span>
</div>
}
@if (uploadResponses['CLIENT_SIGNATURE']) {
<div class="ckyc-upload-response">
<p>
<b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['CLIENT_SIGNATURE'].status }}
</p>
<p>
<b>{{ 'labels.inputs.Request ID' | translate }}:</b>
{{ uploadResponses['CLIENT_SIGNATURE'].requestId }}
</p>
<p>
<b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
{{ uploadResponses['CLIENT_SIGNATURE'].acknowledgementNumber }}
</p>
<p>
<b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
{{ uploadResponses['CLIENT_SIGNATURE'].processingStatus }}
</p>
</div>
}
}
</mat-card-content>
</mat-card>
src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.scss
+441 -21
View File
@@ -49,35 +49,266 @@
line-height: 18px;
}
.ckyc-info-card {
margin-bottom: 24px;
/* ===================== CERSAI Sync Hero ===================== */
.cersai-hero {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 26px;
border-radius: 16px;
overflow: hidden;
margin-bottom: 18px;
color: #fff;
box-shadow: 0 6px 22px rgb(0 0 0 / 10%);
&::before {
content: '';
position: absolute;
top: -60%;
right: -10%;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgb(255 255 255 / 18%), transparent 70%);
pointer-events: none;
}
&--synced {
background: linear-gradient(135deg, #0f6e56 0%, #1d9e75 55%, #2fb88c 100%);
}
&--pending {
background: linear-gradient(135deg, #8a5a14 0%, #ba7517 55%, #d4892f 100%);
}
&__left {
display: flex;
align-items: center;
gap: 18px;
min-width: 0;
position: relative;
flex: 1;
}
&__icon {
width: 60px;
height: 60px;
border-radius: 16px;
background: rgb(255 255 255 / 20%);
border: 1px solid rgb(255 255 255 / 35%);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
flex-shrink: 0;
backdrop-filter: blur(10px);
}
&__text {
min-width: 0;
flex: 1;
}
&__tag {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
background: rgb(255 255 255 / 22%);
border: 1px solid rgb(255 255 255 / 40%);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
backdrop-filter: blur(8px);
}
&__ckyc-label {
font-size: 11px;
font-weight: 600;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 10px 0 4px;
}
&__ckyc-number {
font-size: 24px;
font-weight: 800;
font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
letter-spacing: 0.5px;
line-height: 1.1;
margin-bottom: 8px;
}
&__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
opacity: 0.95;
flex-wrap: wrap;
fa-icon {
font-size: 11px;
opacity: 0.9;
margin-right: 3px;
}
strong {
font-weight: 700;
}
}
&__sep {
opacity: 0.5;
}
&__hint {
font-size: 12px;
opacity: 0.9;
line-height: 1.5;
max-width: 480px;
margin-top: 4px;
}
&__pulse {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: rgb(255 255 255 / 20%);
border: 1px solid rgb(255 255 255 / 35%);
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
backdrop-filter: blur(8px);
flex-shrink: 0;
position: relative;
z-index: 1;
}
&__pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #9fe1cb;
box-shadow: 0 0 0 0 rgb(159 225 203 / 70%);
animation: cersai-pulse 2s infinite;
}
}
@keyframes cersai-pulse {
0% {
box-shadow: 0 0 0 0 rgb(159 225 203 / 70%);
}
70% {
box-shadow: 0 0 0 10px rgb(159 225 203 / 0%);
}
100% {
box-shadow: 0 0 0 0 rgb(159 225 203 / 0%);
}
}
/* ===================== Client info grid ===================== */
.ckyc-info-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
align-items: start;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 22px;
}
.ckyc-info-item {
display: flex;
flex-direction: column;
gap: 4px;
gap: 6px;
padding: 14px 16px;
background: #fff;
border: 1px solid #e8eaed;
border-radius: 12px;
min-width: 0;
transition: all 0.15s;
&:hover {
border-color: #c6dafc;
box-shadow: 0 2px 8px rgb(26 115 232 / 6%);
}
}
@media (width <= 900px) {
.ckyc-info-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cersai-hero {
flex-direction: column;
align-items: flex-start;
&__left {
width: 100%;
}
&__icon {
width: 52px;
height: 52px;
font-size: 22px;
}
&__ckyc-number {
font-size: 20px;
}
}
}
@media (width <= 500px) {
.ckyc-info-grid {
grid-template-columns: 1fr;
}
}
.ckyc-info-label {
font-size: 11px;
font-weight: 600;
color: #888;
font-size: 10px;
font-weight: 700;
color: #5f6368;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
gap: 6px;
fa-icon {
color: #1a73e8;
font-size: 11px;
}
}
.ckyc-info-value {
font-size: 14px;
color: #333;
min-height: 20px;
font-size: 13px;
color: #202124;
font-weight: 600;
min-height: 18px;
word-break: break-word;
&--mono {
font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
font-size: 12px;
color: #1a73e8;
letter-spacing: 0.3px;
}
&--missing {
color: #9aa0a6;
font-weight: 500;
font-style: italic;
}
}
.ckyc-info-hint {
display: none;
}
.ckyc-section-title {
@@ -87,31 +318,60 @@
.ckyc-upload-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 16px;
align-items: stretch;
}
.ckyc-upload-card {
border-radius: 12px !important;
border: 1px solid #e8eaed;
box-shadow: none !important;
transition:
border-color 0.15s,
box-shadow 0.15s;
display: flex;
flex-direction: column;
min-height: 240px;
&:hover {
border-color: #c6dafc;
box-shadow: 0 2px 10px rgb(26 115 232 / 6%) !important;
}
.mat-mdc-card-content {
padding: 16px;
padding: 18px 20px !important;
display: flex;
flex-direction: column;
height: 100%;
}
}
.ckyc-upload-header {
display: flex;
align-items: center;
gap: 8px;
gap: 10px;
font-weight: 600;
font-size: 14px;
margin-bottom: 8px;
color: #202124;
padding-bottom: 12px;
margin-bottom: 0;
border-bottom: 1px solid #f1f3f4;
}
.ckyc-upload-icon {
font-size: 20px;
height: 20px;
width: 20px;
color: #1976d2;
font-size: 18px;
height: 32px;
width: 32px;
color: #fff;
background: linear-gradient(135deg, #1a73e8, #4285f4);
border-radius: 8px;
display: flex !important;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgb(26 115 232 / 25%);
flex-shrink: 0;
}
.ckyc-upload-hint {
@@ -163,6 +423,12 @@
}
}
@media (width <= 900px) {
.ckyc-upload-grid {
grid-template-columns: 1fr;
}
}
@media (width <= 600px) {
.ckyc-info-grid {
grid-template-columns: 1fr;
@@ -180,3 +446,157 @@
width: 100%;
}
}
/* ===================== Already-available banners ===================== */
.ckyc-existing-loading {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: #e8f0fe;
color: #0c447c;
border-radius: 8px;
font-size: 12px;
margin-bottom: 14px;
mat-progress-spinner {
display: inline-block;
}
}
.ckyc-existing {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 14px 12px;
background: #f0fbf6;
border: 1px solid #cfecdd;
border-radius: 10px;
margin-top: 14px;
flex: 1;
position: relative;
&::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: #1d9e75;
border-radius: 10px 0 0 10px;
}
&__head {
display: flex;
align-items: center;
gap: 10px;
strong {
display: block;
font-size: 13px;
font-weight: 700;
color: #085041;
line-height: 1.2;
}
}
&__ok {
font-size: 20px;
color: #1d9e75;
flex-shrink: 0;
}
&__source {
display: block;
font-size: 11px;
color: #0f6e56;
margin-top: 2px;
font-weight: 500;
}
&__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #085041;
flex-wrap: wrap;
padding: 8px 10px;
background: #fff;
border: 1px solid #cfecdd;
border-radius: 8px;
> span:first-of-type {
font-weight: 600;
}
fa-icon {
color: #1d9e75;
font-size: 12px;
}
}
&__key {
font-family: 'SF Mono', Consolas, monospace;
font-size: 11px;
background: #e1f5ee;
color: #0f6e56;
padding: 2px 8px;
border-radius: 10px;
border: 1px solid #cfecdd;
font-weight: 600;
}
&__count {
font-size: 10px;
font-weight: 700;
background: #1d9e75;
color: #fff;
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
&__thumb {
width: 100px;
height: 100px;
border-radius: 10px;
border: 2px solid #fff;
outline: 1px solid #cfecdd;
background: #fff;
object-fit: cover;
align-self: center;
box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
&--wide {
width: 200px;
height: 80px;
object-fit: contain;
}
}
&__replace {
align-self: stretch;
margin-top: auto;
height: 34px !important;
font-size: 11px !important;
font-weight: 600 !important;
border-radius: 8px !important;
border: 1px solid #cfecdd !important;
color: #0f6e56 !important;
background: #fff !important;
padding: 0 12px !important;
letter-spacing: 0.2px;
fa-icon {
margin-right: 6px;
font-size: 11px;
}
&:hover {
background: #e1f5ee !important;
border-color: #1d9e75 !important;
}
}
}
src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.ts
+152 -4
View File
@@ -9,7 +9,7 @@
/** Angular Imports */
import { Component, OnInit, OnDestroy, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subject, takeUntil, catchError, of } from 'rxjs';
import { Subject, takeUntil, catchError, of, forkJoin } from 'rxjs';
/** Custom Services */
import { ClientsService } from '../../clients.service';
@@ -19,6 +19,17 @@ import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
interface ExistingArtefact {
present: boolean;
name?: string;
source?: string;
previewUrl?: string;
documentId?: string;
documentKey?: string;
fileCount?: number;
expanded?: boolean;
}
@Component({
selector: 'mifosx-ckyc-tab',
templateUrl: './ckyc-tab.component.html',
@@ -41,6 +52,10 @@ export class CkycTabComponent implements OnInit, OnDestroy {
/** Top section - read-only client info */
clientId: string;
clientName: string = '';
clientEmail: string = '';
clientMobile: string = '';
cifNumber: string = '';
ckycNumber: string = '';
allAccounts: any[] = [];
selectedAccount: any = null;
selectedAccountType: string = '';
@@ -48,6 +63,17 @@ export class CkycTabComponent implements OnInit, OnDestroy {
/** State */
loading = true;
ckycData: any = null;
ckycUploadedOn = '';
ckycBatchId = '';
checkingExisting = false;
/** Pre-existing artefacts detected from client data */
existing: Record<'ADDRESS_PROOF' | 'PHOTO_PROOF' | 'CLIENT_IMAGE' | 'CLIENT_SIGNATURE', ExistingArtefact> = {
ADDRESS_PROOF: { present: false },
PHOTO_PROOF: { present: false },
CLIENT_IMAGE: { present: false },
CLIENT_SIGNATURE: { present: false }
};
/** File references */
addressProofFile: File | null = null;
@@ -80,13 +106,18 @@ export class CkycTabComponent implements OnInit, OnDestroy {
this.loadClientInfo();
this.loadAccounts();
this.loadCkycData();
this.loadExistingArtefacts();
});
}
private loadClientInfo(): void {
this.route.parent.data.subscribe((data: any) => {
if (data?.clientViewData) {
this.clientName = data.clientViewData.displayName || '';
const cv = data?.clientViewData;
if (cv) {
this.clientName = cv.displayName || '';
this.clientEmail = cv.emailAddress || '';
this.clientMobile = cv.mobileNo || '';
this.cifNumber = cv.accountNo || cv.externalId || '';
}
});
}
@@ -122,8 +153,10 @@ export class CkycTabComponent implements OnInit, OnDestroy {
private loadCkycData(): void {
this.loading = true;
// Read CKYC registry data from /clients/{id}/kyc — that's where the
// SFTP upload flow persists ckycNumber / ckycUploadedOn / ckycBatchId.
this.clientsService
.getClientCkyc(this.clientId)
.getClientKyc(this.clientId)
.pipe(
takeUntil(this.destroy$),
catchError(() => {
@@ -134,9 +167,120 @@ export class CkycTabComponent implements OnInit, OnDestroy {
.subscribe((data: any) => {
this.loading = false;
this.ckycData = data;
this.ckycNumber = data?.ckycNumber || '';
this.ckycUploadedOn = this.formatJavaDate(data?.ckycUploadedOn);
this.ckycBatchId = data?.ckycBatchId || '';
});
}
private formatJavaDate(value: any): string {
if (!value) return '';
if (Array.isArray(value) && value.length >= 3) {
const [
y,
m,
d
] = value;
return `${String(d).padStart(2, '0')}-${String(m).padStart(2, '0')}-${y}`;
}
if (typeof value === 'string') return value;
return '';
}
/**
* Fetch photo (profile image), signature (client document),
* ID proof and address proof (client identifiers) so already-uploaded
* artefacts are shown here instead of forcing re-upload.
*/
private loadExistingArtefacts(): void {
this.checkingExisting = true;
forkJoin({
photo: this.clientsService.getClientProfileImage(this.clientId).pipe(catchError(() => of(null))),
documents: this.clientsService.getClientDocuments(this.clientId).pipe(catchError(() => of([]))),
identifiers: this.clientsService.getClientIdentifiers(this.clientId).pipe(catchError(() => of([]))),
proofTypes: this.clientsService.getKycProofTypes().pipe(catchError(() => of({ idProofs: [], addressProofs: [] })))
})
.pipe(takeUntil(this.destroy$))
.subscribe(({ photo, documents, identifiers, proofTypes }) => {
this.checkingExisting = false;
// 1. Photo / image of client — from m_client.image_id
if (photo && typeof photo === 'string' && photo.length > 0) {
this.existing.CLIENT_IMAGE = {
present: true,
source: 'Client registration',
previewUrl: photo,
name: 'Profile photo'
};
}
// 2. Signature — client document with name='clientSignature'
const signatureDoc = (documents as any[])?.find((d: any) => d?.name === 'clientSignature');
if (signatureDoc) {
this.existing.CLIENT_SIGNATURE = {
present: true,
source: 'Client registration',
name: signatureDoc.fileName || 'Client signature',
documentId: signatureDoc.id
};
// Fetch blob for preview
this.clientsService
.getClientSignatureImage(this.clientId, signatureDoc.id)
.pipe(takeUntil(this.destroy$))
.subscribe({
next: (blob: any) => {
if (blob) {
this.existing.CLIENT_SIGNATURE.previewUrl = URL.createObjectURL(blob);
}
},
error: () => undefined
});
}
// 3 & 4. ID proof + Address proof — client identifiers classified via proof-types
const idProofIds = new Set<string>((proofTypes?.idProofs || []).map((p: any) => String(p.id)));
const addressProofIds = new Set<string>((proofTypes?.addressProofs || []).map((p: any) => String(p.id)));
const idList = Array.isArray(identifiers) ? identifiers : (identifiers as any)?.pageItems || [];
for (const identity of idList) {
const docTypeId = String(identity?.documentType?.id ?? '');
const isActive =
!identity?.status ||
identity?.status?.code === 'clientIdentifierStatusType.active' ||
identity?.status === 'clientIdentifierStatusType.active' ||
identity?.status === 'Active';
if (!isActive) continue;
const proofName = identity?.documentType?.name || 'Identifier';
// Address proof documentKey is auto-generated as "<ProofName> - <clientId>"
// in identities-tab; hide it when it's just that synthetic key.
const rawKey = identity?.documentKey || '';
const isSyntheticKey = rawKey.startsWith(`${proofName} - `);
const common = {
present: true,
source: 'Identities section',
name: proofName,
documentKey: isSyntheticKey ? '' : rawKey,
documentId: identity?.id,
fileCount: (identity?.documents || []).length
};
if (idProofIds.has(docTypeId) && !this.existing.PHOTO_PROOF.present) {
this.existing.PHOTO_PROOF = common;
} else if (addressProofIds.has(docTypeId) && !this.existing.ADDRESS_PROOF.present) {
this.existing.ADDRESS_PROOF = common;
}
}
});
}
toggleReplace(documentType: string): void {
const entry = (this.existing as any)[documentType];
if (entry) entry.expanded = !entry.expanded;
}
onAccountSelect(accountNo: string): void {
this.selectedAccount = this.allAccounts.find((a) => a.accountNo === accountNo) || null;
this.selectedAccountType = this.selectedAccount?.accountType || '';
@@ -215,5 +359,9 @@ export class CkycTabComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
// Release object URLs
Object.values(this.existing).forEach((e) => {
if (e.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(e.previewUrl);
});
}
}