feat: Client & CKYC UI improvements — filters, KYC management, image crop+merge
- Clients list: CKYC icon, CKYC Number column, status/legal form/CKYC filters - CKYC: SFTP upload logs, date formatting, modal z-index fix, non-dismissible dialogs - KYC Management: new standalone module with alert dashboard, notification scheduler, audit inventory, account status - Image cropper: ngx-image-cropper integration for front+back document merge into single PNG - Sidebar: KYC Management menu entry after CKYC Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
79e455c4ed
commit
d72e969dc3
@@ -619,6 +619,7 @@
|
||||
<span class="sig-table__col sig-table__col--name">Name</span>
|
||||
<span class="sig-table__col sig-table__col--id">Client ID</span>
|
||||
<span class="sig-table__col sig-table__col--pan">PAN</span>
|
||||
<span class="sig-table__col sig-table__col--din">DIN</span>
|
||||
<span class="sig-table__col sig-table__col--status">Status</span>
|
||||
<span class="sig-table__col sig-table__col--actions">Actions</span>
|
||||
</div>
|
||||
@@ -645,6 +646,17 @@
|
||||
{{ sig.panNumber || '-' }}
|
||||
@if (sig.panVerified) { <mat-icon class="verify-tick-sm">check_circle</mat-icon> }
|
||||
</span>
|
||||
<span class="sig-table__col sig-table__col--din">
|
||||
@if (sig.dinNumber) {
|
||||
{{ sig.dinNumber }}
|
||||
@if (sig.dinVerified) { <mat-icon class="verify-tick-sm">check_circle</mat-icon> }
|
||||
@if (!sig.dinVerified) { <mat-icon class="verify-cross-sm">cancel</mat-icon> }
|
||||
} @else {
|
||||
<button mat-stroked-button class="din-verify-btn" type="button" matTooltip="Verify DIN" (click)="openDinVerifyDialog(sig)">
|
||||
<mat-icon class="din-verify-icon">badge</mat-icon> Verify DIN
|
||||
</button>
|
||||
}
|
||||
</span>
|
||||
<span class="sig-table__col sig-table__col--status">
|
||||
<span class="sig-status-chip" [class.active]="sig.status?.value === 'Active'">{{ sig.status?.value || '-' }}</span>
|
||||
</span>
|
||||
|
||||
+47
-14
@@ -13,7 +13,7 @@ form {
|
||||
.section-block {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-bottom: 1px solid rgb(0 0 0 / 6%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
@@ -28,7 +28,7 @@ form {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 16px 0;
|
||||
margin: 0 0 16px;
|
||||
|
||||
.section-icon {
|
||||
color: var(--md-sys-color-primary, #1074b9);
|
||||
@@ -235,7 +235,7 @@ form {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
|
||||
}
|
||||
|
||||
.guardian-section__header {
|
||||
@@ -268,7 +268,7 @@ form {
|
||||
|
||||
.guardian-section__sub {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
color: rgb(255 255 255 / 55%);
|
||||
}
|
||||
|
||||
.guardian-section__age-chips {
|
||||
@@ -280,9 +280,9 @@ form {
|
||||
.guardian-age-chip {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: rgb(255 255 255 / 80%);
|
||||
padding: 3px 10px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgb(255 255 255 / 10%);
|
||||
border-radius: 10px;
|
||||
|
||||
strong {
|
||||
@@ -638,12 +638,13 @@ form {
|
||||
padding: 0 !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.mdc-dialog__surface {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
.guardian-section__header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@@ -738,7 +739,7 @@ form {
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -834,7 +835,7 @@ form {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
.guardian-card__header {
|
||||
@@ -945,7 +946,7 @@ form {
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 0 1px rgb(0 0 0 / 10%);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -1030,7 +1031,7 @@ form {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: rgb(255 255 255 / 15%);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
@@ -1040,7 +1041,7 @@ form {
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: rgb(255 255 255 / 25%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1201,6 +1202,7 @@ form {
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: #10b981 !important;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #059669 !important;
|
||||
-webkit-text-fill-color: #059669 !important;
|
||||
@@ -1213,6 +1215,7 @@ form {
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: #0ea5e9 !important;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #0284c7 !important;
|
||||
-webkit-text-fill-color: #0284c7 !important;
|
||||
@@ -1225,6 +1228,7 @@ form {
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: #f59e0b !important;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #d97706 !important;
|
||||
-webkit-text-fill-color: #d97706 !important;
|
||||
@@ -1390,7 +1394,7 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -1505,6 +1509,7 @@ form {
|
||||
&--name { flex: 1; font-size: 13px; display: flex; align-items: center; gap: 6px; }
|
||||
&--id { flex: 0 0 100px; font-size: 12px; color: #64748b; }
|
||||
&--pan { flex: 0 0 120px; font-size: 12px; color: #1e293b; display: flex; align-items: center; gap: 3px; }
|
||||
&--din { flex: 0 0 140px; font-size: 12px; color: #1e293b; display: flex; align-items: center; gap: 3px; }
|
||||
&--status { flex: 0 0 80px; }
|
||||
&--actions { flex: 0 0 80px; display: flex; gap: 2px; }
|
||||
}
|
||||
@@ -1534,6 +1539,32 @@ form {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.verify-cross-sm {
|
||||
font-size: 14px !important;
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.din-verify-btn {
|
||||
font-size: 11px !important;
|
||||
padding: 2px 8px !important;
|
||||
min-height: 24px !important;
|
||||
line-height: 20px !important;
|
||||
border-radius: 6px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #1074b9 !important;
|
||||
border-color: #93c5fd !important;
|
||||
|
||||
.din-verify-icon {
|
||||
font-size: 14px !important;
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sig-status-chip {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
@@ -1561,11 +1592,13 @@ form {
|
||||
overflow: visible !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.mdc-dialog__surface {
|
||||
border-radius: 12px !important;
|
||||
overflow: visible !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.mat-mdc-dialog-content {
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
@@ -1625,7 +1658,7 @@ form {
|
||||
|
||||
&__sub {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: rgb(255 255 255 / 50%);
|
||||
margin: 2px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,6 +40,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { DateFormatPipe } from '../../../pipes/date-format.pipe';
|
||||
import { SanctionsVerifyDialogComponent } from './sanctions-verify-dialog.component';
|
||||
import { DipVerifyDialogComponent } from './dip-verify-dialog.component';
|
||||
import { DinVerifyDialogComponent } from './din-verify-dialog.component';
|
||||
|
||||
/**
|
||||
* Create Client Component
|
||||
@@ -824,6 +825,49 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
|
||||
this.syncSignatoryNames();
|
||||
|
||||
this.fetchClientFullDetails(client.id, sig);
|
||||
this.openDinVerifyDialog(sig);
|
||||
}
|
||||
|
||||
/** Open DIN verification dialog for a signatory */
|
||||
openDinVerifyDialog(sig: any): void {
|
||||
const cid = sig.id?.toString();
|
||||
if (!cid) return;
|
||||
|
||||
const entityName = this.createClientForm.get('fullname')?.value || '';
|
||||
|
||||
const openDialog = (kycId: string, panFromKyc?: string) => {
|
||||
const ref = this.dialog.open(DinVerifyDialogComponent, {
|
||||
width: '620px',
|
||||
maxWidth: '95vw',
|
||||
disableClose: false,
|
||||
autoFocus: true,
|
||||
data: {
|
||||
clientId: cid,
|
||||
kycId,
|
||||
signatoryName: sig.displayName || '',
|
||||
cifNumber: sig.cifNumber || sig.accountNumber || cid,
|
||||
panNumber: sig.panNumber || panFromKyc || '-',
|
||||
entityName
|
||||
}
|
||||
});
|
||||
ref.afterClosed().subscribe((result: any) => {
|
||||
if (result && !result.skipped) {
|
||||
sig.dinNumber = result.dinNumber || '';
|
||||
sig.dinVerified = result.dinVerified || false;
|
||||
sig.directorName = result.directorName || '';
|
||||
sig.dinStatus = result.dinStatus || '';
|
||||
sig.dinDesignation = result.dinDesignation || '';
|
||||
sig.companyMatch = result.companyMatch ?? null;
|
||||
sig.matchedCompany = result.matchedCompany || '';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Fetch KYC ID first, then open dialog
|
||||
this.clientService.getClientKyc(cid).subscribe({
|
||||
next: (kyc: any) => openDialog(kyc?.id?.toString() || '', kyc?.panNumber),
|
||||
error: () => openDialog('')
|
||||
});
|
||||
}
|
||||
|
||||
removeSignatoryAt(index: number): void {
|
||||
|
||||
@@ -0,0 +1,651 @@
|
||||
import { Component, OnInit, OnDestroy, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { ClientsService } from 'app/clients/clients.service';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-din-verify-dialog',
|
||||
template: `
|
||||
<h2 mat-dialog-title>
|
||||
<fa-icon icon="id-badge" class="dialog-title-icon"></fa-icon>
|
||||
DIN Verification
|
||||
</h2>
|
||||
<mat-dialog-content>
|
||||
<!-- Step 1: Enter DIN -->
|
||||
@if (!verifying && !verified && !failed && !errorOccurred) {
|
||||
<div class="din-entry">
|
||||
<div class="signatory-info">
|
||||
<fa-icon icon="user-shield" class="sig-icon"></fa-icon>
|
||||
<div class="sig-detail">
|
||||
<span class="sig-name">{{ signatoryName }}</span>
|
||||
<span class="sig-meta">CIF: {{ cifNumber }} · PAN: {{ panNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@if (entityName) {
|
||||
<div class="entity-info">
|
||||
<fa-icon icon="building" class="entity-icon"></fa-icon>
|
||||
<div class="entity-detail">
|
||||
<span class="entity-label">Entity</span>
|
||||
<span class="entity-name">{{ entityName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="din-info-bar">
|
||||
<fa-icon icon="info-circle" class="info-icon"></fa-icon>
|
||||
<span>Enter the <strong>Director Identification Number (DIN)</strong> issued by the Ministry of Corporate Affairs (MCA) for this authorized signatory. The system will verify the DIN and match the entity name against the director's associated companies.</span>
|
||||
</div>
|
||||
<mat-form-field appearance="outline" class="din-input-field">
|
||||
<mat-label>DIN Number</mat-label>
|
||||
<mat-icon matPrefix class="din-prefix-icon">badge</mat-icon>
|
||||
<input matInput [(ngModel)]="dinNumber" placeholder="e.g. 01234567" maxlength="8"
|
||||
(keyup.enter)="onVerify()" autocomplete="off" />
|
||||
<mat-hint>8-digit DIN number from MCA</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Step 2: Verifying -->
|
||||
@if (verifying) {
|
||||
<div class="progress-section">
|
||||
<mat-progress-bar mode="determinate" [value]="progress" color="primary"></mat-progress-bar>
|
||||
<div class="progress-percent">{{ progress }}%</div>
|
||||
<div class="progress-steps">
|
||||
@for (step of progressSteps; track step.label; let i = $index) {
|
||||
<div class="progress-step" [class.active]="i === currentStep" [class.done]="i < currentStep">
|
||||
<fa-icon [icon]="i < currentStep ? 'check-circle' : step.icon" [class.done-icon]="i < currentStep"></fa-icon>
|
||||
<span>{{ step.label }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<p class="verify-msg">
|
||||
Verifying DIN <strong>{{ dinNumber }}</strong> for <strong>{{ signatoryName }}</strong>
|
||||
against <strong>MCA (Ministry of Corporate Affairs)</strong> records.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Step 3a: Verified -->
|
||||
@if (!verifying && verified) {
|
||||
<div class="result-card success-card">
|
||||
<div class="result-icon-ring success-ring">
|
||||
<fa-icon icon="check-circle" class="result-shield success-shield"></fa-icon>
|
||||
</div>
|
||||
<div class="result-badge success-badge">VERIFIED</div>
|
||||
<h3 class="result-title">DIN Verified Successfully</h3>
|
||||
<p class="result-detail">
|
||||
DIN <strong class="din-highlight">{{ dinNumber }}</strong> for
|
||||
<strong>{{ signatoryName }}</strong> has been verified against
|
||||
<strong>MCA</strong> records.
|
||||
</p>
|
||||
<div class="result-meta">
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">DIN</span>
|
||||
<span class="meta-value meta-mono">{{ dinNumber }}</span>
|
||||
</div>
|
||||
@if (directorName) {
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Director Name</span>
|
||||
<span class="meta-value">{{ directorName }}</span>
|
||||
</div>
|
||||
}
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Status</span>
|
||||
<span class="meta-value meta-success">{{ dinStatus || 'Active' }}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Verified On</span>
|
||||
<span class="meta-value">{{ verifiedDate }}</span>
|
||||
</div>
|
||||
@if (dinDesignation) {
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Designation</span>
|
||||
<span class="meta-value">{{ dinDesignation }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Company Match Section -->
|
||||
@if (companies.length > 0) {
|
||||
<div class="company-match-section">
|
||||
<h4 class="company-match-title">
|
||||
<fa-icon icon="building" class="company-title-icon"></fa-icon>
|
||||
Associated Companies ({{ companies.length }})
|
||||
</h4>
|
||||
|
||||
@if (companyMatch) {
|
||||
<div class="match-banner match-success">
|
||||
<fa-icon icon="check-circle" class="match-banner-icon"></fa-icon>
|
||||
<div>
|
||||
<strong>Entity Match Found</strong>
|
||||
<p><strong>{{ entityName }}</strong> matches <strong>{{ matchedCompany }}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="match-banner match-warning">
|
||||
<fa-icon icon="exclamation-triangle" class="match-banner-icon"></fa-icon>
|
||||
<div>
|
||||
<strong>No Entity Match</strong>
|
||||
<p><strong>{{ entityName }}</strong> does not match any of the director's associated companies.</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="company-list">
|
||||
@for (company of companies; track company.companyName || $index) {
|
||||
<div class="company-item" [class.company-matched]="company._matched">
|
||||
@if (company._matched) {
|
||||
<mat-icon class="company-match-icon match">check_circle</mat-icon>
|
||||
} @else {
|
||||
<mat-icon class="company-match-icon no-match">radio_button_unchecked</mat-icon>
|
||||
}
|
||||
<div class="company-info">
|
||||
<span class="company-name">{{ company.companyName }}</span>
|
||||
<span class="company-meta">
|
||||
@if (company.cin) { CIN: {{ company.cin }} }
|
||||
@if (company.cin && company.designation) { · }
|
||||
@if (company.designation) { {{ company.designation }} }
|
||||
@if ((company.cin || company.designation) && company.appointmentDate) { · }
|
||||
@if (company.appointmentDate) { Since: {{ company.appointmentDate }} }
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Step 3b: Verification Failed -->
|
||||
@if (!verifying && failed) {
|
||||
<div class="result-card fail-card">
|
||||
<div class="result-icon-ring fail-ring">
|
||||
<fa-icon icon="times-circle" class="result-shield fail-shield"></fa-icon>
|
||||
</div>
|
||||
<div class="result-badge fail-badge">FAILED</div>
|
||||
<h3 class="result-title">DIN Verification Failed</h3>
|
||||
<p class="result-detail">
|
||||
DIN <strong class="din-highlight-fail">{{ dinNumber }}</strong> could not be verified.
|
||||
</p>
|
||||
@if (failReason) {
|
||||
<div class="fail-reason">
|
||||
<fa-icon icon="exclamation-triangle" class="fail-reason-icon"></fa-icon>
|
||||
<span>{{ failReason }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Step 3c: Error -->
|
||||
@if (!verifying && errorOccurred) {
|
||||
<div class="result-card error-card">
|
||||
<fa-icon icon="exclamation-circle" class="error-icon-large"></fa-icon>
|
||||
<p class="error-msg">Verification failed. Please try again.</p>
|
||||
<p class="error-detail">{{ errorMessage }}</p>
|
||||
</div>
|
||||
}
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
@if (!verifying && !verified && !failed && !errorOccurred) {
|
||||
<button mat-stroked-button (click)="onSkip()">Skip</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!dinNumber || dinNumber.length < 8" (click)="onVerify()">
|
||||
<fa-icon icon="search"></fa-icon> Verify DIN
|
||||
</button>
|
||||
}
|
||||
@if (!verifying && verified) {
|
||||
<button mat-raised-button color="primary" (click)="onClose(true)">
|
||||
<fa-icon icon="check"></fa-icon> Done
|
||||
</button>
|
||||
}
|
||||
@if (!verifying && failed) {
|
||||
<button mat-stroked-button (click)="onRetry()">Retry</button>
|
||||
<button mat-raised-button color="warn" (click)="onClose(false)">
|
||||
<fa-icon icon="times"></fa-icon> Close
|
||||
</button>
|
||||
}
|
||||
@if (!verifying && errorOccurred) {
|
||||
<button mat-stroked-button (click)="onRetry()">Retry</button>
|
||||
<button mat-raised-button (click)="onClose(false)">Close</button>
|
||||
}
|
||||
</mat-dialog-actions>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
min-width: 520px;
|
||||
}
|
||||
|
||||
h2[mat-dialog-title] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding: 16px 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1074b9;
|
||||
}
|
||||
|
||||
.dialog-title-icon { font-size: 20px; }
|
||||
|
||||
mat-dialog-content {
|
||||
padding: 16px 24px;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Signatory info */
|
||||
.signatory-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
background: #f0f4f8;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.sig-icon { font-size: 22px; color: #1074b9; }
|
||||
.sig-detail { display: flex; flex-direction: column; }
|
||||
.sig-name { font-size: 15px; font-weight: 700; color: #1a2332; }
|
||||
.sig-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
|
||||
|
||||
/* Entity info */
|
||||
.entity-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
background: #fffbeb;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid #fde68a;
|
||||
}
|
||||
|
||||
.entity-icon { font-size: 18px; color: #b45309; }
|
||||
.entity-detail { display: flex; flex-direction: column; }
|
||||
.entity-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #92400e; }
|
||||
.entity-name { font-size: 14px; font-weight: 700; color: #78350f; }
|
||||
|
||||
/* DIN info bar */
|
||||
.din-info-bar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: #e3f2fd;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-icon { font-size: 16px; color: #1074b9; flex-shrink: 0; margin-top: 2px; }
|
||||
|
||||
/* DIN input */
|
||||
.din-input-field { width: 100%; }
|
||||
.din-prefix-icon { color: #64748b; margin-right: 4px; }
|
||||
|
||||
/* Progress */
|
||||
.progress-section { display: flex; flex-direction: column; align-items: center; gap: 12px; }
|
||||
.progress-percent { font-size: 22px; font-weight: 700; color: #1074b9; margin-top: 4px; }
|
||||
|
||||
.progress-steps { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 8px 16px; }
|
||||
.progress-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9ca3af; transition: color 0.3s ease; }
|
||||
.progress-step.active { color: #1074b9; font-weight: 600; }
|
||||
.progress-step.done { color: #388e3c; }
|
||||
.done-icon { color: #388e3c; }
|
||||
|
||||
.verify-msg { font-size: 14px; color: #555; line-height: 1.6; text-align: center; margin: 4px 0 0; }
|
||||
|
||||
/* Result cards */
|
||||
.result-card { display: flex; flex-direction: column; align-items: center; padding: 20px 16px; gap: 12px; }
|
||||
.result-icon-ring { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
.success-ring { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 3px solid #a7f3d0; }
|
||||
.fail-ring { background: linear-gradient(135deg, #fef2f2, #fecaca); border: 3px solid #fca5a5; }
|
||||
.result-shield { font-size: 28px; }
|
||||
.success-shield { color: #059669; }
|
||||
.fail-shield { color: #dc2626; }
|
||||
|
||||
.result-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; padding: 3px 14px; border-radius: 20px; }
|
||||
.success-badge { color: #059669; background: #ecfdf5; border: 1px solid #a7f3d0; }
|
||||
.fail-badge { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; }
|
||||
|
||||
.result-title { font-size: 17px; font-weight: 700; color: #111827; margin: 0; }
|
||||
.result-detail { font-size: 13px; color: #6b7280; text-align: center; line-height: 1.6; margin: 0; max-width: 400px; }
|
||||
.din-highlight { color: #059669; font-family: 'JetBrains Mono', 'Fira Code', monospace; }
|
||||
.din-highlight-fail { color: #dc2626; font-family: 'JetBrains Mono', 'Fira Code', monospace; }
|
||||
|
||||
.result-meta { width: 100%; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 16px; margin-top: 4px; }
|
||||
.meta-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
|
||||
.meta-row:last-child { border-bottom: none; }
|
||||
.meta-label { font-size: 12px; color: #9ca3af; font-weight: 500; }
|
||||
.meta-value { font-size: 12px; color: #374151; font-weight: 600; }
|
||||
.meta-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; letter-spacing: 0.5px; }
|
||||
.meta-success { color: #059669; }
|
||||
|
||||
/* ═══ Company Match Section ═══ */
|
||||
.company-match-section {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.company-match-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.company-title-icon { font-size: 14px; color: #64748b; }
|
||||
|
||||
/* Match banner */
|
||||
.match-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.match-banner p { margin: 2px 0 0; font-size: 12px; }
|
||||
|
||||
.match-success {
|
||||
background: #ecfdf5;
|
||||
border: 1px solid #a7f3d0;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.match-success .match-banner-icon { color: #059669; font-size: 18px; margin-top: 1px; flex-shrink: 0; }
|
||||
|
||||
.match-warning {
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fde68a;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.match-warning .match-banner-icon { color: #d97706; font-size: 18px; margin-top: 1px; flex-shrink: 0; }
|
||||
|
||||
/* Company list */
|
||||
.company-list {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.company-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.company-item:last-child { border-bottom: none; }
|
||||
|
||||
.company-item:hover { background: #f8fafc; }
|
||||
|
||||
.company-matched {
|
||||
background: #f0fdf4 !important;
|
||||
border-left: 3px solid #22c55e;
|
||||
}
|
||||
|
||||
.company-match-icon {
|
||||
font-size: 18px !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.company-match-icon.match { color: #22c55e; }
|
||||
.company-match-icon.no-match { color: #d1d5db; }
|
||||
|
||||
.company-info { display: flex; flex-direction: column; min-width: 0; }
|
||||
.company-name { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.company-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
|
||||
|
||||
/* Fail reason */
|
||||
.fail-reason {
|
||||
display: flex; align-items: center; gap: 10px; width: 100%;
|
||||
background: #fef2f2; border: 1px solid #fecaca; padding: 10px 14px;
|
||||
border-radius: 6px; font-size: 13px; color: #991b1b; line-height: 1.5;
|
||||
}
|
||||
.fail-reason-icon { font-size: 16px; color: #dc2626; flex-shrink: 0; }
|
||||
|
||||
/* Error */
|
||||
.error-icon-large { font-size: 48px; color: #f57c00; }
|
||||
.error-msg { font-size: 16px; font-weight: 600; color: #f57c00; margin: 0; text-align: center; }
|
||||
.error-detail { font-size: 14px; color: #555; text-align: center; }
|
||||
|
||||
mat-dialog-actions { padding: 8px 24px 16px; }
|
||||
mat-dialog-actions button { display: flex; align-items: center; gap: 6px; }
|
||||
`
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatDialogModule,
|
||||
MatProgressBarModule,
|
||||
MatButtonModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatIconModule,
|
||||
FaIconComponent
|
||||
]
|
||||
})
|
||||
export class DinVerifyDialogComponent implements OnInit, OnDestroy {
|
||||
private dialogRef = inject(MatDialogRef<DinVerifyDialogComponent>);
|
||||
private data: {
|
||||
clientId: string;
|
||||
kycId: string;
|
||||
signatoryName: string;
|
||||
cifNumber: string;
|
||||
panNumber: string;
|
||||
entityName: string;
|
||||
} = inject(MAT_DIALOG_DATA);
|
||||
private clientsService = inject(ClientsService);
|
||||
|
||||
signatoryName = '';
|
||||
cifNumber = '';
|
||||
panNumber = '';
|
||||
entityName = '';
|
||||
dinNumber = '';
|
||||
|
||||
verifying = false;
|
||||
verified = false;
|
||||
failed = false;
|
||||
errorOccurred = false;
|
||||
errorMessage = '';
|
||||
failReason = '';
|
||||
|
||||
directorName = '';
|
||||
dinStatus = '';
|
||||
dinDesignation = '';
|
||||
verifiedDate = new Date().toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
|
||||
|
||||
/** Companies list from DIN verification response */
|
||||
companies: any[] = [];
|
||||
/** Whether entity name matched a company */
|
||||
companyMatch = false;
|
||||
/** The matched company name */
|
||||
matchedCompany = '';
|
||||
|
||||
progress = 0;
|
||||
currentStep = 0;
|
||||
progressSteps = [
|
||||
{ label: 'Connecting to MCA portal...', icon: 'globe' as any },
|
||||
{ label: 'Looking up DIN records...', icon: 'search' as any },
|
||||
{ label: 'Matching entity with companies...', icon: 'building' as any },
|
||||
{ label: 'Saving verification...', icon: 'database' as any }
|
||||
];
|
||||
|
||||
private intervalId: any;
|
||||
private apiResponse: any = null;
|
||||
private apiError: any = null;
|
||||
private apiDone = false;
|
||||
|
||||
ngOnInit() {
|
||||
this.signatoryName = this.data?.signatoryName || '';
|
||||
this.cifNumber = this.data?.cifNumber || '';
|
||||
this.panNumber = this.data?.panNumber || '-';
|
||||
this.entityName = this.data?.entityName || '';
|
||||
}
|
||||
|
||||
onVerify() {
|
||||
if (!this.dinNumber || this.dinNumber.length < 8) return;
|
||||
|
||||
this.verifying = true;
|
||||
this.verified = false;
|
||||
this.failed = false;
|
||||
this.errorOccurred = false;
|
||||
this.apiDone = false;
|
||||
this.apiResponse = null;
|
||||
this.apiError = null;
|
||||
this.progress = 0;
|
||||
this.currentStep = 0;
|
||||
this.companies = [];
|
||||
this.companyMatch = false;
|
||||
this.matchedCompany = '';
|
||||
|
||||
this.dialogRef.disableClose = true;
|
||||
|
||||
// Fire API call — pass clientId, kycId, dinNumber and entityName
|
||||
this.clientsService.verifyDIN(this.data.clientId, this.data.kycId, this.dinNumber, this.entityName).subscribe({
|
||||
next: (res: any) => {
|
||||
this.apiResponse = res;
|
||||
this.apiDone = true;
|
||||
this.tryShowResult();
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.apiError = err;
|
||||
this.apiDone = true;
|
||||
this.tryShowResult();
|
||||
}
|
||||
});
|
||||
|
||||
// Animate progress
|
||||
this.intervalId = setInterval(() => {
|
||||
this.progress += 2;
|
||||
this.currentStep = Math.min(Math.floor(this.progress / 25), this.progressSteps.length - 1);
|
||||
if (this.progress >= 100) {
|
||||
clearInterval(this.intervalId);
|
||||
this.intervalId = null;
|
||||
this.tryShowResult();
|
||||
}
|
||||
}, 60);
|
||||
}
|
||||
|
||||
private tryShowResult() {
|
||||
if (!this.apiDone || this.progress < 100) return;
|
||||
|
||||
this.verifying = false;
|
||||
this.dialogRef.disableClose = false;
|
||||
|
||||
if (this.apiError) {
|
||||
this.errorOccurred = true;
|
||||
this.errorMessage = this.apiError?.error?.defaultUserMessage || this.apiError?.error?.message || this.apiError?.message || 'Unable to verify DIN. Please try again.';
|
||||
return;
|
||||
}
|
||||
|
||||
const res = this.apiResponse;
|
||||
const changes = res?.changes || res;
|
||||
|
||||
if (changes?.dinVerified || res?.dinVerified) {
|
||||
this.verified = true;
|
||||
this.directorName = changes?.directorName || res?.directorName || '';
|
||||
this.dinStatus = changes?.dinStatus || res?.dinStatus || 'Active';
|
||||
this.dinDesignation = changes?.dinDesignation || res?.dinDesignation || '';
|
||||
this.verifiedDate = new Date().toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
|
||||
|
||||
// Process company list from response
|
||||
const rawCompanies = changes?.companies || res?.companies || [];
|
||||
this.companies = rawCompanies.map((c: any) => ({
|
||||
...c,
|
||||
companyName: c.companyName || c.name || '',
|
||||
cin: c.cin || c.cinNumber || '',
|
||||
designation: c.designation || '',
|
||||
appointmentDate: c.appointmentDate || c.dateOfAppointment || '',
|
||||
_matched: false
|
||||
}));
|
||||
|
||||
// Match entity name against company list
|
||||
this.matchCompanyName();
|
||||
} else {
|
||||
this.failed = true;
|
||||
this.failReason = changes?.dinFailReason || res?.failReason || res?.defaultUserMessage || 'DIN could not be verified against MCA records.';
|
||||
}
|
||||
}
|
||||
|
||||
/** Match the entity name against the list of companies from the DIN response */
|
||||
private matchCompanyName() {
|
||||
if (!this.entityName || this.companies.length === 0) return;
|
||||
|
||||
const normalize = (s: string) => s.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
const entityNorm = normalize(this.entityName);
|
||||
|
||||
for (const company of this.companies) {
|
||||
const compNorm = normalize(company.companyName);
|
||||
// Exact match or substring containment
|
||||
if (compNorm === entityNorm || compNorm.includes(entityNorm) || entityNorm.includes(compNorm)) {
|
||||
company._matched = true;
|
||||
this.companyMatch = true;
|
||||
this.matchedCompany = company.companyName;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onSkip() {
|
||||
this.dialogRef.close({ skipped: true });
|
||||
}
|
||||
|
||||
onRetry() {
|
||||
this.verified = false;
|
||||
this.failed = false;
|
||||
this.errorOccurred = false;
|
||||
this.progress = 0;
|
||||
this.currentStep = 0;
|
||||
this.companies = [];
|
||||
this.companyMatch = false;
|
||||
this.matchedCompany = '';
|
||||
}
|
||||
|
||||
onClose(verified: boolean) {
|
||||
this.dialogRef.close({
|
||||
verified,
|
||||
dinNumber: this.dinNumber,
|
||||
directorName: this.directorName,
|
||||
dinStatus: this.dinStatus,
|
||||
dinDesignation: this.dinDesignation,
|
||||
dinVerified: verified,
|
||||
companyMatch: this.companyMatch,
|
||||
matchedCompany: this.matchedCompany,
|
||||
companies: this.companies,
|
||||
response: this.apiResponse
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.intervalId) {
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user