From 79e455c4edb365b96d0ba59555352d330726bf33 Mon Sep 17 00:00:00 2001 From: Aditya Date: Tue, 7 Apr 2026 15:08:07 +0530 Subject: [PATCH] =?UTF-8?q?feat:=20edit=20client=20=E2=80=94=20save=20per?= =?UTF-8?q?=20tab,=20DOB=20re-KYC=20alert,=20audit=20logs,=20KYC=20improve?= =?UTF-8?q?ments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Edit button per tab with Save & Next confirmation dialog - DOB change triggers re-KYC alert, resets PAN verification, auto-fills remarks - Mobile/email changes logged as audit notes via client notes API - Redesigned confirmation dialog with icon + title, type-based theming - KYC re-edit flow: remarks mandatory for VERIFIED records, re-edit API command - Load existing photo & signature in edit KYC, immediate upload on change - Populate all KYC fields (document, AML, form60/15) from API on edit - Non-individual PAN verification uses same flow as individual - Fix table overflow when sidebar panel is open - Add fr unit to stylelint allowed-list Co-Authored-By: Claude Opus 4.6 (1M context) --- .stylelintrc | 3 +- .../client-kyc-step.component.html | 328 ++++++-- .../client-kyc-step.component.scss | 135 +++- .../client-kyc-step.component.ts | 710 +++++++++++++----- src/app/clients/clients.service.ts | 54 +- .../edit-client/edit-client.component.html | 40 +- .../edit-client/edit-client.component.scss | 39 +- .../edit-client/edit-client.component.ts | 332 +++++++- src/app/core/shell/shell.component.scss | 42 +- .../confirmation-dialog.component.html | 47 +- .../confirmation-dialog.component.scss | 142 ++++ .../confirmation-dialog.component.ts | 21 +- src/app/shared/styles/list-layout.scss | 192 +++-- src/environments/.env.ts | 12 +- 14 files changed, 1699 insertions(+), 398 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index b720d1a7a..fa5dba7ef 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -67,7 +67,8 @@ "vh", "deg", "s", - "ms" + "ms", + "fr" ] } } diff --git a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.html b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.html index ffa19fdda..daee1a515 100644 --- a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.html +++ b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.html @@ -1,5 +1,9 @@
@@ -22,7 +26,6 @@
- @if (!isNonIndividual) {
@@ -35,9 +38,16 @@ PAN Number credit_card - + @if (kycForm.get('panNumber')?.hasError('pattern') && kycForm.get('panNumber')?.touched) { Invalid PAN format } @@ -51,9 +61,16 @@
@if (panVerifyStatus === 'NONE' || panVerifyStatus === 'FAILED') { -
PAN–Aadhaar Link Status - - @if (panAadhaarSeedingStatus?.toUpperCase() === 'Y') { Linked } - @else if (panAadhaarSeedingStatus?.toUpperCase() === 'N') { Not Linked } - @else { — } + + @if (panAadhaarSeedingStatus?.toUpperCase() === 'Y') { + Linked + } @else if (panAadhaarSeedingStatus?.toUpperCase() === 'N') { + Not Linked + } @else { + — + }
@@ -99,10 +124,22 @@ Aadhaar Number fingerprint - - @if (kycForm.get('aadhaarNumber')?.hasError('pattern') && kycForm.get('aadhaarNumber')?.touched) { @@ -114,9 +151,19 @@
@if ((aadhaarVerifyStatus === 'NONE' || aadhaarVerifyStatus === 'FAILED') && !aadhaarOtpSent) { - } @@ -185,7 +247,9 @@ } @if (aadhaarVerifyError) { -
{{ aadhaarVerifyError }}
+
+ {{ aadhaarVerifyError }} +
} @if (aadhaarVerifyStatus === 'VERIFIED' && aadhaarVerifyName) {
@@ -203,14 +267,25 @@ @if (kycForm.get('hasPan')?.value && panAadhaarSeedingStatus) {
-
+
PAN–Aadhaar Link Status - @if (panAadhaarSeedingStatus === 'Y') { Linked (Seeded) } - @if (panAadhaarSeedingStatus === 'N') { Not Linked } - @if (panAadhaarSeedingStatus === 'E') { Exempt } + @if (panAadhaarSeedingStatus === 'Y') { + Linked (Seeded) + } + @if (panAadhaarSeedingStatus === 'N') { + Not Linked + } + @if (panAadhaarSeedingStatus === 'E') { + Exempt + }
As per Income Tax Portal — Section 139AA @@ -233,9 +308,16 @@ GSTIN Number - + @if (kycForm.get('gstinNumber')?.hasError('pattern') && kycForm.get('gstinNumber')?.touched) { Invalid GSTIN format (e.g. 22AAAAA0000A1Z5) } @@ -248,9 +330,16 @@ PAN of Proprietor credit_card - + @if (kycForm.get('panNumber')?.hasError('pattern') && kycForm.get('panNumber')?.touched) { Invalid PAN format } @@ -264,9 +353,20 @@
@if (panVerifyStatus === 'NONE' || panVerifyStatus === 'FAILED') { -
diff --git a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss index f71ebc326..058940306 100644 --- a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss +++ b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss @@ -17,7 +17,7 @@ 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); @@ -119,7 +119,7 @@ &.active { border-color: #1353a0; background: #eff6ff; - box-shadow: 0 0 0 2px rgba(19, 83, 160, 0.12); + box-shadow: 0 0 0 2px rgb(19 83 160 / 12%); } &__dot { @@ -128,9 +128,17 @@ border-radius: 50%; flex-shrink: 0; - &.green { background: #10b981; } - &.amber { background: #f59e0b; } - &.red { background: #ef4444; } + &.green { + background: #10b981; + } + + &.amber { + background: #f59e0b; + } + + &.red { + background: #ef4444; + } } &__info { @@ -186,7 +194,9 @@ color: #065f46; border: 1px solid #a7f3d0; - .kyc-expiry-alert__icon { color: #10b981; } + .kyc-expiry-alert__icon { + color: #10b981; + } } &--medium { @@ -194,7 +204,9 @@ color: #92400e; border: 1px solid #fde68a; - .kyc-expiry-alert__icon { color: #f59e0b; } + .kyc-expiry-alert__icon { + color: #f59e0b; + } } &--high { @@ -202,11 +214,13 @@ color: #991b1b; border: 1px solid #fecaca; - .kyc-expiry-alert__icon { color: #ef4444; } + .kyc-expiry-alert__icon { + color: #ef4444; + } } } -@media (max-width: 768px) { +@media (width <= 768px) { .kyc-expiry-cards { grid-template-columns: 1fr; } @@ -451,7 +465,7 @@ border: 1px solid #e0e7ff; overflow: hidden; background: #fff; - box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08); + box-shadow: 0 2px 8px rgb(99 102 241 / 8%); margin-bottom: 8px; } @@ -475,7 +489,11 @@ color: #fff; flex-shrink: 0; - mat-icon { font-size: 16px; width: 16px; height: 16px; } + mat-icon { + font-size: 16px; + width: 16px; + height: 16px; + } } .otp-card__header-text { @@ -536,7 +554,7 @@ &:focus { border-color: #1074b9; background: #fff; - box-shadow: 0 0 0 2px rgba(16, 116, 185, 0.12); + box-shadow: 0 0 0 2px rgb(16 116 185 / 12%); } &.filled { @@ -652,8 +670,10 @@ color: #065f46; } -@media (max-width: 480px) { - .otp-digits { gap: 6px; } +@media (width <= 480px) { + .otp-digits { + gap: 6px; + } .otp-digit-box { width: 40px; @@ -662,8 +682,13 @@ border-radius: 8px; } - .otp-card__header { padding: 12px 14px; } - .otp-card__body { padding: 20px 14px; } + .otp-card__header { + padding: 12px 14px; + } + + .otp-card__body { + padding: 20px 14px; + } } /* PAN-Aadhaar Link Status (read-only) */ @@ -683,22 +708,40 @@ &.linked { border-color: #a7f3d0; background: #ecfdf5; - .pan-link-value { color: #059669; } - .pan-link-icon { color: #059669; } + + .pan-link-value { + color: #059669; + } + + .pan-link-icon { + color: #059669; + } } &.not-linked { border-color: #fecaca; background: #fef2f2; - .pan-link-value { color: #dc2626; } - .pan-link-icon { color: #dc2626; } + + .pan-link-value { + color: #dc2626; + } + + .pan-link-icon { + color: #dc2626; + } } &.exempt { border-color: #bfdbfe; background: #eff6ff; - .pan-link-value { color: #2563eb; } - .pan-link-icon { color: #2563eb; } + + .pan-link-value { + color: #2563eb; + } + + .pan-link-icon { + color: #2563eb; + } } } @@ -1037,7 +1080,7 @@ } } -@media (max-width: 768px) { +@media (width <= 768px) { .form-grid { grid-template-columns: 1fr; } @@ -1073,7 +1116,7 @@ &__sub { font-size: 11px; - color: rgba(255, 255, 255, 0.5); + color: rgb(255 255 255 / 50%); margin: 2px 0 0; } } @@ -1092,9 +1135,20 @@ border-radius: 50%; flex-shrink: 0; - &.risk-low { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); } - &.risk-medium { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); } - &.risk-high { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); } + &.risk-low { + background: #22c55e; + box-shadow: 0 0 0 3px rgb(34 197 94 / 20%); + } + + &.risk-medium { + background: #f59e0b; + box-shadow: 0 0 0 3px rgb(245 158 11 / 20%); + } + + &.risk-high { + background: #ef4444; + box-shadow: 0 0 0 3px rgb(239 68 68 / 20%); + } } .risk-hint { @@ -1133,3 +1187,30 @@ } } +/* ─── Re-edit Info Alert ─── */ +.kyc-reedit-alert { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 12px 16px; + margin-top: 8px; + background: #eff6ff; + border: 1px solid #93c5fd; + border-radius: 8px; + font-size: 13px; + line-height: 1.5; + color: #1e40af; + + &__icon { + color: #3b82f6; + font-size: 20px; + width: 20px; + height: 20px; + margin-top: 1px; + flex-shrink: 0; + } + + strong { + font-weight: 600; + } +} diff --git a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts index 68d3e4905..857797484 100644 --- a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts +++ b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts @@ -1,5 +1,9 @@ /** * 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/. */ import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, inject } from '@angular/core'; @@ -54,77 +58,88 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { kycId: string = ''; /** Whether existing KYC data has been loaded (edit mode) */ kycLoaded = false; + /** KYC status from API: 100=PENDING, 200=IN_PROGRESS, 300=VERIFIED */ + kycStatus: number = 0; + /** Whether the KYC record is in VERIFIED state (needs re-edit command) */ + get isKycVerified(): boolean { + return this.kycStatus === 300; + } /** KYC Document Types — populated from API template, falls back to defaults */ kycDocumentTypes: { name: string; code: string; mandatory: boolean }[] = []; /** 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' + 'Aadhaar Card', + 'Passport', + 'PAN Card', + 'Driving Licence', + 'Voter ID', + 'NREGA Job Card', + 'National Population Register Letter' ]; /** Constitution-based KYC document types for non-individual clients */ private constitutionDocTypes: Record = { - 'HUF': [ + HUF: [ { name: 'PAN Card of HUF', mandatory: true }, { name: 'Declaration by Karta (with name, address & HUF member details)', mandatory: true }, { name: 'KYC of Karta (OVDs + PAN + Photo)', mandatory: true }, { name: 'Proof of Address of HUF', mandatory: false } ], - 'PRIVATE_LIMITED': [ + PRIVATE_LIMITED: [ { name: 'Certificate of Incorporation', mandatory: true }, { name: 'Memorandum & Articles of Association', mandatory: true }, { name: 'PAN of Company', mandatory: true }, { name: 'Board Resolution (authorizing signatories)', mandatory: true }, { name: 'KYC of Authorized Signatories', mandatory: true } ], - 'PUBLIC_LIMITED': [ + PUBLIC_LIMITED: [ { name: 'Certificate of Incorporation', mandatory: true }, { name: 'Memorandum & Articles of Association', mandatory: true }, { name: 'PAN of Company', mandatory: true }, { name: 'Board Resolution (authorizing signatories)', mandatory: true }, { name: 'KYC of Authorized Signatories', mandatory: true } ], - 'LLP': [ + LLP: [ { name: 'Certificate of Incorporation', mandatory: true }, { name: 'LLP Agreement', mandatory: true }, { name: 'PAN of LLP', mandatory: true }, { name: 'Designated Partners Resolution', mandatory: true }, { name: 'KYC of Designated Partners / Authorized Signatories', mandatory: true } ], - 'PARTNERSHIP': [ + PARTNERSHIP: [ { name: 'Registration Certificate', mandatory: false }, { name: 'Partnership Deed', mandatory: true }, { name: 'PAN of Firm', mandatory: true }, { name: 'KYC of Authorized Signatories', mandatory: true } ], - 'TRUST': [ + TRUST: [ { name: 'Registration Certificate', mandatory: true }, { name: 'Trust Deed', mandatory: true }, { name: 'PAN of Trust', mandatory: true }, { name: 'KYC of Trustees / Authorized Signatories', mandatory: true } ], - 'SOCIETY': [ + SOCIETY: [ { name: 'Registration Certificate', mandatory: true }, { name: 'PAN of Society', mandatory: true }, { name: 'KYC of Authorized Signatories', mandatory: true } ], - 'PROPRIETORSHIP': [ + PROPRIETORSHIP: [ { name: 'Proof of Business Existence (GST Certificate / Shop License)', mandatory: true }, { name: 'PAN of Proprietor', mandatory: true }, { name: "Proprietor's KYC (OVDs + PAN + Photo)", mandatory: true } ], - 'ASSOCIATION': [ + ASSOCIATION: [ { name: 'Registration Certificate', mandatory: true }, { name: 'PAN', mandatory: true }, { name: 'Resolution authorizing signatories', mandatory: true }, { name: 'KYC of Authorized Signatories', mandatory: true } ], - 'GOVT_PSU': [ + GOVT_PSU: [ { name: 'Government Notification / Order', mandatory: true }, { name: 'PAN (if applicable)', mandatory: false }, { name: 'Authorized Signatory KYC', mandatory: true } ], - 'COOPERATIVE': [ + COOPERATIVE: [ { name: 'Registration Certificate', mandatory: true }, { name: 'PAN', mandatory: true }, { name: 'Resolution authorizing signatories', mandatory: true }, @@ -161,7 +176,14 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { aadhaarOtpReferenceId = ''; /** OTP digit boxes */ - otpDigits: string[] = ['', '', '', '', '', '']; + otpDigits: string[] = [ + '', + '', + '', + '', + '', + '' + ]; /** Resend countdown */ resendCountdown = 0; private resendTimer: any = null; @@ -221,7 +243,14 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { } resetOtpDigits(): void { - this.otpDigits = ['', '', '', '', '', '']; + this.otpDigits = [ + '', + '', + '', + '', + '', + '' + ]; this.aadhaarOtp = ''; } @@ -254,25 +283,73 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { photographPreview: string | null = null; signatureFile: File | null = null; signaturePreview: string | null = null; + /** Existing signature document ID (for re-upload/delete) */ + existingSignatureDocId: string = ''; /** KYC Form */ kycForm: UntypedFormGroup = this.formBuilder.group({ hasPan: [true], - panNumber: ['', [Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/), Validators.maxLength(10)]], - aadhaarNumber: ['', [Validators.pattern(/^\d{12}$/), Validators.maxLength(12)]], + panNumber: [ + '', + [ + Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/), + Validators.maxLength(10) + ] + ], + aadhaarNumber: [ + '', + [ + Validators.pattern(/^\d{12}$/), + Validators.maxLength(12) + ] + ], panAadhaarSeedingStatus: [''], - gstinNumber: ['', [Validators.pattern(/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/), Validators.maxLength(15)]], - enterprisePan: ['', [Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/), Validators.maxLength(10)]], - cinNumber: ['', [Validators.pattern(/^[A-Z]{1}[0-9]{5}[A-Z]{2}[0-9]{4}[A-Z]{3}[0-9]{6}$/), Validators.maxLength(21)]], + gstinNumber: [ + '', + [ + Validators.pattern(/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/), + Validators.maxLength(15) + ] + ], + enterprisePan: [ + '', + [ + Validators.pattern(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/), + Validators.maxLength(10) + ] + ], + cinNumber: [ + '', + [ + Validators.pattern(/^[A-Z]{1}[0-9]{5}[A-Z]{2}[0-9]{4}[A-Z]{3}[0-9]{6}$/), + Validators.maxLength(21) + ] + ], incorporationDate: [''], - kycDocumentName: ['', Validators.required], - kycDocumentNumber: ['', [Validators.required, Validators.pattern(/^[A-Za-z0-9\-\/\s]+$/), Validators.maxLength(30)]], + kycDocumentName: [ + '', + Validators.required + ], + kycDocumentNumber: [ + '', + [ + Validators.required, + Validators.pattern(/^[A-Za-z0-9\-\/\s]+$/), + Validators.maxLength(30) + ] + ], kycDocIssueDate: [''], kycDocExpiryDate: [''], riskCategory: [1], remarks: [''], - amlCheckStatus: ['CLEAR', Validators.required], - bannedEntityMatch: ['NO', Validators.required], + amlCheckStatus: [ + 'CLEAR', + Validators.required + ], + bannedEntityMatch: [ + 'NO', + Validators.required + ], willfulDefaulter: ['NO'], ecgcSalFlag: ['NO'], dormantFlag: ['ACTIVE'], @@ -320,7 +397,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { private updateDocTypesForConstitution(): void { const constitutionValue = this.constitutionMeta?.value; if (constitutionValue && this.constitutionDocTypes[constitutionValue]) { - this.kycDocumentTypes = this.constitutionDocTypes[constitutionValue].map(doc => ({ + this.kycDocumentTypes = this.constitutionDocTypes[constitutionValue].map((doc) => ({ name: doc.name, code: doc.name, mandatory: doc.mandatory @@ -339,13 +416,51 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { this.kycLoaded = true; if (data) { this.kycId = data.id?.toString() || ''; + this.kycStatus = data.status?.id || data.kycStatus || 0; + // Helper to parse API date arrays [y,m,d] or strings into Date objects + const parseDate = (val: any): Date | string => { + if (Array.isArray(val) && val.length >= 3) { + return new Date(val[0], val[1] - 1, val[2]); + } + if (val && typeof val === 'string') { + const d = new Date(val); + return isNaN(d.getTime()) ? '' : d; + } + return ''; + }; + this.kycForm.patchValue({ panNumber: data.panNumber || '', aadhaarNumber: data.aadhaarNumberMasked || '', gstinNumber: data.gstinNumber || '', + enterprisePan: data.enterprisePan || '', + cinNumber: data.cinNumber || '', + incorporationDate: parseDate(data.incorporationDate), + // KYC Document + kycDocumentName: data.kycDocumentName || '', + kycDocumentNumber: data.kycDocumentNumber || '', + kycDocIssueDate: parseDate(data.kycDocIssueDate), + kycDocExpiryDate: parseDate(data.kycDocExpiryDate), + // Risk & Remarks riskCategory: data.riskCategory || 1, remarks: data.remarks || '', - hasPan: !!data.panNumber + hasPan: !!data.panNumber, + // AML & Compliance + amlCheckStatus: data.amlCheckStatus || 'CLEAR', + bannedEntityMatch: data.bannedEntityMatch || 'NO', + willfulDefaulter: data.willfulDefaulter || 'NO', + ecgcSalFlag: data.ecgcSalFlag || 'NO', + dormantFlag: data.dormantFlag || 'ACTIVE', + // Account Status & Freeze + accountStatus: data.accountStatus || 'ACTIVE', + freezeReason: data.freezeReason || '', + freezeAuthority: data.freezeAuthority || '', + // Form 60 / Form 15 + form60Type: data.form60Type || 'FORM_60', + form60Date: parseDate(data.form60Date), + form15Applicable: data.form15Applicable || false, + form15Type: data.form15Type || '15G', + form15FY: data.form15FY || '' }); // Set verification statuses from existing data if (data.panVerified) { @@ -366,6 +481,9 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { this.panAadhaarSeedingStatus = data.panAadhaarSeedingStatus; } } + // Load existing photo & signature + this.loadExistingPhoto(); + this.loadExistingSignature(); }, error: () => { // No existing KYC — that's fine for new clients @@ -374,6 +492,45 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { }); } + /** Fetch existing client profile photo */ + private loadExistingPhoto(): void { + if (!this.clientId) return; + this.clientsService.getClientProfileImage(this.clientId).subscribe({ + next: (imageData: any) => { + if (imageData) { + this.photographPreview = imageData; + } + }, + error: () => {} + }); + } + + /** Fetch existing client signature from documents */ + private loadExistingSignature(): void { + if (!this.clientId) return; + this.clientsService.getClientDocuments(this.clientId).subscribe({ + next: (documents: any[]) => { + const sigDoc = documents?.find((d: any) => d.name === 'clientSignature'); + if (sigDoc?.id) { + this.existingSignatureDocId = sigDoc.id.toString(); + this.clientsService.getClientSignatureImage(this.clientId, this.existingSignatureDocId).subscribe({ + next: async (blob: any) => { + const buffer = await blob.arrayBuffer(); + const bytes = new Uint8Array(buffer); + let binary = ''; + for (let i = 0; i < bytes.length; i++) { + binary += String.fromCharCode(bytes[i]); + } + this.signaturePreview = 'data:' + blob.type + ';base64,' + btoa(binary); + }, + error: () => {} + }); + } + }, + error: () => {} + }); + } + /** Load KYC template to get required documents based on client type */ private loadKycTemplate(): void { if (!this.clientId || this.kycTemplateLoaded) return; @@ -388,7 +545,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { mandatory: doc.mandatory ?? false })); // Update kycDocumentName validator based on mandatory docs - const hasMandatory = this.kycDocumentTypes.some(d => d.mandatory); + const hasMandatory = this.kycDocumentTypes.some((d) => d.mandatory); if (hasMandatory) { this.kycForm.get('kycDocumentName')?.setValidators(Validators.required); } @@ -398,7 +555,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { error: () => { // Fallback to defaults if template API unavailable this.kycTemplateLoaded = true; - this.kycDocumentTypes = this.defaultDocumentTypes.map(name => ({ + this.kycDocumentTypes = this.defaultDocumentTypes.map((name) => ({ name, code: name, mandatory: false @@ -410,19 +567,48 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { /** Save or update KYC, then execute callback */ private saveKycAndDo(payload: any, callback: () => void, onError: (msg: string) => void) { if (this.kycId) { - // KYC already exists — use PUT to update (strip create-only fields) const { kycType, ...updatePayload } = payload; - this.clientsService.updateClientKyc(this.clientId, this.kycId, updatePayload).subscribe({ - next: () => callback(), - error: (err: any) => onError(err?.error?.defaultUserMessage || 'Failed to update KYC.') - }); + + // If KYC is VERIFIED, remarks are mandatory — use re-edit command + if (this.isKycVerified) { + const remarks = this.kycForm.get('remarks')?.value?.trim(); + if (!remarks) { + onError('Remarks are mandatory when updating a verified KYC record.'); + this.kycForm.get('remarks')?.markAsTouched(); + return; + } + updatePayload.remarks = remarks; + this.clientsService.reEditClientKyc(this.clientId, this.kycId, updatePayload).subscribe({ + next: () => { + // Status transitions to IN_PROGRESS, PAN verification is invalidated + this.kycStatus = 200; + this.panVerifyStatus = 'NONE'; + this.panVerifyName = ''; + this.panVerifiedOn = ''; + callback(); + }, + error: (err: any) => + onError( + err?.error?.errors?.[0]?.defaultUserMessage || err?.error?.defaultUserMessage || 'Failed to re-edit KYC.' + ) + }); + } else { + // Normal update for non-verified records + this.clientsService.updateClientKyc(this.clientId, this.kycId, updatePayload).subscribe({ + next: () => callback(), + error: (err: any) => onError(err?.error?.defaultUserMessage || 'Failed to update KYC.') + }); + } } else { // First time — use POST to create this.clientsService.saveClientKyc(this.clientId, payload).subscribe({ next: (res: any) => { this.kycId = res?.resourceId?.toString() || ''; - if (this.kycId) { callback(); } - else { onError('Failed to save KYC.'); } + if (this.kycId) { + callback(); + } else { + onError('Failed to save KYC.'); + } }, error: (err: any) => onError(err?.error?.defaultUserMessage || 'Failed to save KYC.') }); @@ -436,7 +622,10 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { return; } const pan = this.kycForm.value.panNumber; - if (!pan) { this.panVerifyError = 'Enter PAN number first.'; return; } + if (!pan) { + this.panVerifyError = 'Enter PAN number first.'; + return; + } this.panVerifying = true; this.panVerifyError = ''; @@ -451,107 +640,136 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { aadhaarNumberMasked: aadhaarRaw.length === 12 ? 'XXXXXXXX' + aadhaarRaw.slice(-4) : 'XXXXXXXX0000' }; - this.saveKycAndDo(panPayload, () => { - this.clientsService.verifyPAN(this.clientId, this.kycId).subscribe({ - next: (res: any) => { - this.panVerifying = false; - if (res?.changes?.panVerified === true) { - // Full name from API - const resolvedName = res.changes?.panFullName - || res.changes?.panHolderName - || [res.changes?.panFirstName, res.changes?.panLastName].filter(Boolean).join(' ') - || ''; + this.saveKycAndDo( + panPayload, + () => { + this.clientsService.verifyPAN(this.clientId, this.kycId).subscribe({ + next: (res: any) => { + this.panVerifying = false; + if (res?.changes?.panVerified === true) { + // Full name from API + const resolvedName = + res.changes?.panFullName || + res.changes?.panHolderName || + [ + res.changes?.panFirstName, + res.changes?.panLastName + ] + .filter(Boolean) + .join(' ') || + ''; - // If name is empty, the client name/DOB didn't match PAN holder - if (!resolvedName || !resolvedName.trim()) { - this.panVerifyStatus = 'FAILED'; - this.showPanErrorAlert('PAN verification failed: Client name or date of birth does not match the PAN card holder. Please ensure the client\'s name and date of birth exactly match the PAN card details.'); - return; - } + // If name is empty, the client name/DOB didn't match PAN holder + if (!resolvedName || !resolvedName.trim()) { + this.panVerifyStatus = 'FAILED'; + this.showPanErrorAlert( + "PAN verification failed: Client name or date of birth does not match the PAN card holder. Please ensure the client's name and date of birth exactly match the PAN card details." + ); + return; + } - this.panVerifyStatus = 'VERIFIED'; - this.panVerifyName = resolvedName; - // Date — could be string or array [y,m,d] - const rawDate = res.changes?.panVerifiedOn; - if (Array.isArray(rawDate)) { - this.panVerifiedOn = `${rawDate[2]?.toString().padStart(2, '0')}/${rawDate[1]?.toString().padStart(2, '0')}/${rawDate[0]}`; - } else if (rawDate) { - this.panVerifiedOn = rawDate; + this.panVerifyStatus = 'VERIFIED'; + this.panVerifyName = resolvedName; + // Date — could be string or array [y,m,d] + const rawDate = res.changes?.panVerifiedOn; + if (Array.isArray(rawDate)) { + this.panVerifiedOn = `${rawDate[2]?.toString().padStart(2, '0')}/${rawDate[1]?.toString().padStart(2, '0')}/${rawDate[0]}`; + } else if (rawDate) { + this.panVerifiedOn = rawDate; + } else { + const now = new Date(); + this.panVerifiedOn = `${now.getDate().toString().padStart(2, '0')}/${(now.getMonth() + 1).toString().padStart(2, '0')}/${now.getFullYear()}`; + } + // Seeding status + if (res.changes?.panAadhaarSeedingStatus) { + this.panAadhaarSeedingStatus = res.changes.panAadhaarSeedingStatus; + } } else { - const now = new Date(); - this.panVerifiedOn = `${now.getDate().toString().padStart(2, '0')}/${(now.getMonth() + 1).toString().padStart(2, '0')}/${now.getFullYear()}`; + this.panVerifyStatus = 'FAILED'; + this.showPanErrorAlert(res?.changes?.panVerificationMessage || 'PAN verification failed.'); } - // Seeding status - if (res.changes?.panAadhaarSeedingStatus) { - this.panAadhaarSeedingStatus = res.changes.panAadhaarSeedingStatus; - } - } else { + }, + error: (err: any) => { + this.panVerifying = false; this.panVerifyStatus = 'FAILED'; - this.showPanErrorAlert(res?.changes?.panVerificationMessage || 'PAN verification failed.'); + const msg = + err?.error?.errors?.[0]?.defaultUserMessage || + err?.error?.defaultUserMessage || + 'PAN verification failed.'; + this.showPanErrorAlert(msg); } - }, - error: (err: any) => { - this.panVerifying = false; - this.panVerifyStatus = 'FAILED'; - const msg = err?.error?.errors?.[0]?.defaultUserMessage - || err?.error?.defaultUserMessage - || 'PAN verification failed.'; - this.showPanErrorAlert(msg); - } - }); - }, (msg) => { this.panVerifying = false; this.showPanErrorAlert(msg); }); + }); + }, + (msg) => { + this.panVerifying = false; + this.showPanErrorAlert(msg); + } + ); } - /** Verify Enterprise PAN (non-individual) — uses same verify-pan API */ + /** + * Verify Enterprise PAN (non-individual) — same flow as individual PAN verification. + * Maps: Company PAN → panNumber, Company Name → client name, Date of Incorporation → DOB + */ verifyEnterprisePan() { if (!this.clientId) return; const pan = this.kycForm.value.enterprisePan; if (!pan || this.kycForm.get('enterprisePan')?.invalid) return; this.entPanVerifying = true; + const dateFormat = this.settingsService.dateFormat; const incorpDate = this.kycForm.value.incorporationDate; + + // Same payload structure as individual — backend uses panNumber + client name/DOB for verification const payload: any = { locale: 'en', kycType: 1, riskCategory: this.kycForm.value.riskCategory || 1, - panNumber: pan, - dateFormat: this.settingsService.dateFormat + panNumber: pan, // Company PAN → panNumber + dateFormat, + aadhaarNumberMasked: 'XXXXXXXX0000' // Placeholder — not applicable for entities }; - if (incorpDate) { - payload.dateOfIncorporation = incorpDate instanceof Date - ? this.dateUtils.formatDate(incorpDate, this.settingsService.dateFormat) - : incorpDate; - } - if (this.entityName) { - payload.companyFullName = this.entityName; - } - this.saveKycAndDo(payload, () => { - this.clientsService.verifyPAN(this.clientId, this.kycId).subscribe({ - next: (res: any) => { - this.entPanVerifying = false; - if (res?.changes?.panVerified === true) { - this.entPanVerifyStatus = 'VERIFIED'; - this.entPanVerifyName = res.changes?.panFullName || res.changes?.panHolderName || ''; - const rawDate = res.changes?.panVerifiedOn; - if (Array.isArray(rawDate)) { - this.entPanVerifiedOn = `${rawDate[2]?.toString().padStart(2, '0')}/${rawDate[1]?.toString().padStart(2, '0')}/${rawDate[0]}`; + this.saveKycAndDo( + payload, + () => { + this.clientsService.verifyPAN(this.clientId, this.kycId).subscribe({ + next: (res: any) => { + this.entPanVerifying = false; + if (res?.changes?.panVerified === true) { + this.entPanVerifyStatus = 'VERIFIED'; + this.entPanVerifyName = res.changes?.panFullName || res.changes?.panHolderName || ''; + const rawDate = res.changes?.panVerifiedOn; + if (Array.isArray(rawDate)) { + this.entPanVerifiedOn = `${rawDate[2]?.toString().padStart(2, '0')}/${rawDate[1]?.toString().padStart(2, '0')}/${rawDate[0]}`; + } else { + const now = new Date(); + this.entPanVerifiedOn = + rawDate || + `${now.getDate().toString().padStart(2, '0')}/${(now.getMonth() + 1).toString().padStart(2, '0')}/${now.getFullYear()}`; + } } else { - const now = new Date(); - this.entPanVerifiedOn = rawDate || `${now.getDate().toString().padStart(2, '0')}/${(now.getMonth() + 1).toString().padStart(2, '0')}/${now.getFullYear()}`; + this.entPanVerifyStatus = 'FAILED'; + this.showPanErrorAlert( + res?.changes?.panVerificationMessage || + 'Enterprise PAN verification failed. Ensure company name and date of incorporation match the PAN records.' + ); } - } else { + }, + error: (err: any) => { + this.entPanVerifying = false; this.entPanVerifyStatus = 'FAILED'; - this.showPanErrorAlert(res?.changes?.panVerificationMessage || 'Enterprise PAN verification failed.'); + this.showPanErrorAlert( + err?.error?.errors?.[0]?.defaultUserMessage || 'Enterprise PAN verification failed.' + ); } - }, - error: (err: any) => { - this.entPanVerifying = false; - this.entPanVerifyStatus = 'FAILED'; - this.showPanErrorAlert(err?.error?.errors?.[0]?.defaultUserMessage || 'Enterprise PAN verification failed.'); - } - }); - }, (msg) => { this.entPanVerifying = false; this.showPanErrorAlert(msg); }); + }); + }, + (msg) => { + this.entPanVerifying = false; + this.showPanErrorAlert(msg); + } + ); } /** Verify CIN (dummy — no real API) */ @@ -563,7 +781,12 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { this.cinProgressValue = 0; this.cinCurrentStep = 0; - const stepDurations = [800, 1000, 1200, 800]; + const stepDurations = [ + 800, + 1000, + 1200, + 800 + ]; const totalDuration = stepDurations.reduce((a, b) => a + b, 0); let elapsed = 0; const interval = 50; @@ -573,7 +796,10 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { let accum = 0; for (let i = 0; i < stepDurations.length; i++) { accum += stepDurations[i]; - if (elapsed <= accum) { this.cinCurrentStep = i; break; } + if (elapsed <= accum) { + this.cinCurrentStep = i; + break; + } } this.cinProgressValue = Math.min(Math.round((elapsed / totalDuration) * 100), 100); @@ -598,7 +824,10 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { return; } const aadhaar = this.kycForm.value.aadhaarNumber; - if (!aadhaar || aadhaar.length !== 12) { this.aadhaarVerifyError = 'Enter valid 12-digit Aadhaar first.'; return; } + if (!aadhaar || aadhaar.length !== 12) { + this.aadhaarVerifyError = 'Enter valid 12-digit Aadhaar first.'; + return; + } this.aadhaarVerifying = true; this.aadhaarVerifyError = ''; @@ -611,23 +840,32 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { aadhaarNumberMasked: aadhaarMasked }; const panVal = this.kycForm.value.panNumber; - if (panVal) { aadhaarPayload.panNumber = panVal; } + if (panVal) { + aadhaarPayload.panNumber = panVal; + } - this.saveKycAndDo(aadhaarPayload, () => { - this.clientsService.sendAadhaarOtp(this.clientId, this.kycId, aadhaar).subscribe({ - next: (res: any) => { - this.aadhaarVerifying = false; - this.aadhaarOtpSent = true; - this.aadhaarOtpReferenceId = res?.changes?.aadhaarRefNumber || ''; - this.resetOtpDigits(); - this.startResendCountdown(); - }, - error: (err: any) => { - this.aadhaarVerifying = false; - this.aadhaarVerifyError = err?.error?.defaultUserMessage || 'Failed to send OTP.'; - } - }); - }, (msg) => { this.aadhaarVerifying = false; this.aadhaarVerifyError = msg; }); + this.saveKycAndDo( + aadhaarPayload, + () => { + this.clientsService.sendAadhaarOtp(this.clientId, this.kycId, aadhaar).subscribe({ + next: (res: any) => { + this.aadhaarVerifying = false; + this.aadhaarOtpSent = true; + this.aadhaarOtpReferenceId = res?.changes?.aadhaarRefNumber || ''; + this.resetOtpDigits(); + this.startResendCountdown(); + }, + error: (err: any) => { + this.aadhaarVerifying = false; + this.aadhaarVerifyError = err?.error?.defaultUserMessage || 'Failed to send OTP.'; + } + }); + }, + (msg) => { + this.aadhaarVerifying = false; + this.aadhaarVerifyError = msg; + } + ); } /** Verify Aadhaar OTP */ @@ -636,25 +874,27 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { this.aadhaarOtpVerifying = true; this.aadhaarVerifyError = ''; - this.clientsService.verifyAadhaarOtp(this.clientId, this.kycId, this.aadhaarOtp, this.aadhaarOtpReferenceId).subscribe({ - next: (res: any) => { - this.aadhaarOtpVerifying = false; - if (res?.changes?.aadhaarVerified === true) { - this.aadhaarVerifyStatus = 'VERIFIED'; - this.aadhaarVerifyName = res.changes?.aadhaarHolderName || 'Aadhaar Verified'; - this.aadhaarOtpSent = false; - if (res.changes?.panAadhaarSeedingStatus) { - this.panAadhaarSeedingStatus = res.changes.panAadhaarSeedingStatus; + this.clientsService + .verifyAadhaarOtp(this.clientId, this.kycId, this.aadhaarOtp, this.aadhaarOtpReferenceId) + .subscribe({ + next: (res: any) => { + this.aadhaarOtpVerifying = false; + if (res?.changes?.aadhaarVerified === true) { + this.aadhaarVerifyStatus = 'VERIFIED'; + this.aadhaarVerifyName = res.changes?.aadhaarHolderName || 'Aadhaar Verified'; + this.aadhaarOtpSent = false; + if (res.changes?.panAadhaarSeedingStatus) { + this.panAadhaarSeedingStatus = res.changes.panAadhaarSeedingStatus; + } + } else { + this.aadhaarVerifyError = res?.changes?.aadhaarVerificationMessage || 'OTP verification failed'; } - } else { - this.aadhaarVerifyError = res?.changes?.aadhaarVerificationMessage || 'OTP verification failed'; + }, + error: (err: any) => { + this.aadhaarOtpVerifying = false; + this.aadhaarVerifyError = err?.error?.defaultUserMessage || 'OTP verification failed.'; } - }, - error: (err: any) => { - this.aadhaarOtpVerifying = false; - this.aadhaarVerifyError = err?.error?.defaultUserMessage || 'OTP verification failed.'; - } - }); + }); } private showPanErrorAlert(message: string) { @@ -667,17 +907,34 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { getRenewalYears(): number { switch (this.kycForm.value.riskCategory) { - case 1: return 10; - case 2: return 8; - case 3: return 2; - default: return 10; + case 1: + return 10; + case 2: + return 8; + case 3: + return 2; + default: + return 10; } } getKycExpiryDate(years: number): string { const d = new Date(); d.setFullYear(d.getFullYear() + years); - const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + const months = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec' + ]; return `${String(d.getDate()).padStart(2, '0')} ${months[d.getMonth()]} ${d.getFullYear()}`; } @@ -688,11 +945,21 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { input.value = ''; const { ImageCropDialogComponent } = await import('./image-crop-dialog/image-crop-dialog.component'); const dialogRef = this.dialog.open(ImageCropDialogComponent, { - width: '680px', maxWidth: '95vw', + width: '680px', + maxWidth: '95vw', data: { file, title: 'Crop Client Photograph', aspectRatio: 1, maxWidth: 300, maxHeight: 300 } }); dialogRef.afterClosed().subscribe((result: any) => { - if (result) { this.photographFile = result.croppedFile; this.photographPreview = result.previewUrl; } + if (result) { + this.photographFile = result.croppedFile; + this.photographPreview = result.previewUrl; + // In edit mode, upload immediately + if (this.clientId) { + this.clientsService + .uploadClientProfileImage(this.clientId, result.croppedFile) + .subscribe({ error: () => {} }); + } + } }); } @@ -703,16 +970,70 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { input.value = ''; const { ImageCropDialogComponent } = await import('./image-crop-dialog/image-crop-dialog.component'); const dialogRef = this.dialog.open(ImageCropDialogComponent, { - width: '680px', maxWidth: '95vw', + width: '680px', + maxWidth: '95vw', data: { file, title: 'Crop Specimen Signature', aspectRatio: 2.5, maxWidth: 400, maxHeight: 160 } }); dialogRef.afterClosed().subscribe((result: any) => { - if (result) { this.signatureFile = result.croppedFile; this.signaturePreview = result.previewUrl; } + if (result) { + this.signatureFile = result.croppedFile; + this.signaturePreview = result.previewUrl; + // In edit mode, delete old signature doc then upload new one + if (this.clientId) { + if (this.existingSignatureDocId) { + this.clientsService.deleteClientDocument(this.clientId, this.existingSignatureDocId).subscribe({ + next: () => { + this.clientsService.uploadClientSignatureImage(this.clientId, result.croppedFile).subscribe({ + next: (res: any) => { + if (res?.resourceId) this.existingSignatureDocId = res.resourceId.toString(); + }, + error: () => {} + }); + }, + error: () => { + this.clientsService.uploadClientSignatureImage(this.clientId, result.croppedFile).subscribe({ + next: (res: any) => { + if (res?.resourceId) this.existingSignatureDocId = res.resourceId.toString(); + }, + error: () => {} + }); + } + }); + } else { + this.clientsService.uploadClientSignatureImage(this.clientId, result.croppedFile).subscribe({ + next: (res: any) => { + if (res?.resourceId) this.existingSignatureDocId = res.resourceId.toString(); + }, + error: () => {} + }); + } + } + } }); } - removePhoto() { this.photographFile = null; this.photographPreview = null; } - removeSignature() { this.signatureFile = null; this.signaturePreview = null; } + removePhoto() { + this.photographFile = null; + this.photographPreview = null; + // In edit mode, delete from server + if (this.clientId) { + this.clientsService.deleteClientProfileImage(this.clientId).subscribe({ error: () => {} }); + } + } + + removeSignature() { + this.signatureFile = null; + this.signaturePreview = null; + // In edit mode, delete from server + if (this.clientId && this.existingSignatureDocId) { + this.clientsService.deleteClientDocument(this.clientId, this.existingSignatureDocId).subscribe({ + next: () => { + this.existingSignatureDocId = ''; + }, + error: () => {} + }); + } + } get kycData(): any { const formVal = this.readOnly ? this.kycForm.getRawValue() : this.kycForm.value; @@ -720,15 +1041,16 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { const aadhaarMasked = aadhaarRaw.length === 12 ? 'XXXXXXXX' + aadhaarRaw.slice(-4) : null; const dateFormat = this.settingsService.dateFormat; const v = formVal; - const formatDate = (d: any) => d instanceof Date ? this.dateUtils.formatDate(d, dateFormat) : (d || null); + const formatDate = (d: any) => (d instanceof Date ? this.dateUtils.formatDate(d, dateFormat) : d || null); return { locale: 'en', dateFormat, kycType: 1, riskCategory: v.riskCategory || 1, - panNumber: v.hasPan ? (v.panNumber || null) : null, - aadhaarNumberMasked: aadhaarMasked, + // For non-individual: Company PAN is used as panNumber for verification + panNumber: this.isNonIndividual ? v.enterprisePan || null : v.hasPan ? v.panNumber || null : null, + aadhaarNumberMasked: this.isNonIndividual ? 'XXXXXXXX0000' : aadhaarMasked, panAadhaarSeedingStatus: this.panAadhaarSeedingStatus || null, gstinNumber: v.gstinNumber || null, enterprisePan: v.enterprisePan || null, @@ -761,7 +1083,15 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy { get hasKycData(): boolean { const v = this.readOnly ? this.kycForm.getRawValue() : this.kycForm.value; - return !!(v.panNumber || v.aadhaarNumber || v.gstinNumber || v.enterprisePan || v.cinNumber || v.kycDocumentName || v.form15Applicable); + return !!( + v.panNumber || + v.aadhaarNumber || + v.gstinNumber || + v.enterprisePan || + v.cinNumber || + v.kycDocumentName || + v.form15Applicable + ); } } @@ -784,22 +1114,44 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
`, - styles: [` - .pan-err-dialog { max-width: 460px; } - .pan-err-header { - display: flex; align-items: center; gap: 10px; - padding: 16px 24px 12px; border-bottom: 1px solid #fecaca; - background: #fef2f2; font-size: 16px; font-weight: 600; color: #991b1b; - } - .pan-err-icon { color: #dc2626; } - .pan-err-body { padding: 18px 24px !important; font-size: 14px; line-height: 1.6; color: #475569; } - .pan-err-actions { padding: 10px 24px 16px !important; margin: 0 !important; } - `], - imports: [MatIcon, MatDialogContent, MatDialogActions, STANDALONE_SHARED_IMPORTS], + styles: [ + ` + .pan-err-dialog { + max-width: 460px; + } + .pan-err-header { + display: flex; + align-items: center; + gap: 10px; + padding: 16px 24px 12px; + border-bottom: 1px solid #fecaca; + background: #fef2f2; + font-size: 16px; + font-weight: 600; + color: #991b1b; + } + .pan-err-icon { + color: #dc2626; + } + .pan-err-body { + padding: 18px 24px !important; + font-size: 14px; + line-height: 1.6; + color: #475569; + } + .pan-err-actions { + padding: 10px 24px 16px !important; + margin: 0 !important; + } + ` + ], + imports: [ + MatIcon, + MatDialogContent, + MatDialogActions, + STANDALONE_SHARED_IMPORTS + ] }) export class PanErrorDialogComponent { - constructor( - @Inject(MAT_DIALOG_DATA) public data: { message: string } - ) {} + data = inject<{ message: string }>(MAT_DIALOG_DATA); } - diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts index b12db41d1..75299705d 100644 --- a/src/app/clients/clients.service.ts +++ b/src/app/clients/clients.service.ts @@ -243,27 +243,27 @@ export class ClientsService { }; for (const client of results) { // Fetch DOB from client data - this.getClientData(client.id.toString()).pipe( - catchError(() => of(null)) - ).subscribe((data: any) => { - if (data?.dateOfBirth) { - client.dateOfBirth = data.dateOfBirth; - } - }); + this.getClientData(client.id.toString()) + .pipe(catchError(() => of(null))) + .subscribe((data: any) => { + if (data?.dateOfBirth) { + client.dateOfBirth = data.dateOfBirth; + } + }); // Fetch father/spouse from family members - this.getClientFamilyMembers(client.id.toString()).pipe( - catchError(() => of([])) - ).subscribe((members: any) => { - const list = Array.isArray(members) ? members : []; - const spouse = list.find((m: any) => getRelName(m) === 'SPOUSE'); - const father = list.find((m: any) => getRelName(m) === 'FATHER'); - if (spouse) { - client.fatherSpouseName = `S/o: ${spouse.firstName}`; - } else if (father) { - client.fatherSpouseName = `F/o: ${father.firstName}`; - } - }); + this.getClientFamilyMembers(client.id.toString()) + .pipe(catchError(() => of([]))) + .subscribe((members: any) => { + const list = Array.isArray(members) ? members : []; + const spouse = list.find((m: any) => getRelName(m) === 'SPOUSE'); + const father = list.find((m: any) => getRelName(m) === 'FATHER'); + if (spouse) { + client.fatherSpouseName = `S/o: ${spouse.firstName}`; + } else if (father) { + client.fatherSpouseName = `F/o: ${father.firstName}`; + } + }); } } @@ -291,8 +291,12 @@ export class ClientsService { getClientNominees(clientId: string, accountNo?: string, accountType?: string): Observable { let params = new HttpParams(); - if (accountNo) { params = params.set('accountNo', accountNo); } - if (accountType) { params = params.set('accountType', accountType); } + if (accountNo) { + params = params.set('accountNo', accountNo); + } + if (accountType) { + params = params.set('accountType', accountType); + } return this.http.get(`/clients/${clientId}/nominees`, { params }); } @@ -599,6 +603,14 @@ export class ClientsService { return this.http.put(`/clients/${clientId}/kyc/${kycId}`, kycData); } + /** + * Re-edit a VERIFIED KYC record. Transitions status VERIFIED → IN_PROGRESS. + * Remarks are mandatory in the payload. + */ + reEditClientKyc(clientId: string, kycId: string, kycData: any): Observable { + return this.http.put(`/clients/${clientId}/kyc/${kycId}?command=re-edit`, kycData); + } + /** * Verifies PAN number via LincPay (reads PAN from the stored KYC record). * @param clientId Client ID diff --git a/src/app/clients/edit-client/edit-client.component.html b/src/app/clients/edit-client/edit-client.component.html index ed7a3db5d..9c3ba70df 100644 --- a/src/app/clients/edit-client/edit-client.component.html +++ b/src/app/clients/edit-client/edit-client.component.html @@ -12,7 +12,12 @@

{{ 'labels.heading.Edit Client' | translate }}

- + @@ -58,8 +63,18 @@ }
+ @if (dobChanged) { +
+ warning +
+ Re-KYC Required: Date of birth was changed. Please re-verify PAN and update the remarks + below before proceeding. +
+
+ }
- }
- @@ -141,7 +157,8 @@ }
- } @if (selectedTabIndex < totalTabs - 1) { - } @if (selectedTabIndex === totalTabs - 1 && areFormvalids()) { diff --git a/src/app/clients/edit-client/edit-client.component.scss b/src/app/clients/edit-client/edit-client.component.scss index b4c7c1f9f..771d5894b 100644 --- a/src/app/clients/edit-client/edit-client.component.scss +++ b/src/app/clients/edit-client/edit-client.component.scss @@ -48,11 +48,11 @@ .client-tabs { background: var(--md-sys-color-surface, #fff); border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 8px rgb(0 0 0 / 8%); ::ng-deep { .mat-mdc-tab-header { - border-bottom: 1px solid rgba(0, 0, 0, 0.08); + border-bottom: 1px solid rgb(0 0 0 / 8%); } .mat-mdc-tab { @@ -97,7 +97,7 @@ align-items: center; margin-top: 20px; padding: 16px 0; - border-top: 1px solid rgba(0, 0, 0, 0.08); + border-top: 1px solid rgb(0 0 0 / 8%); } .action-bar-right { @@ -106,7 +106,7 @@ } .cancel-btn { - color: rgba(0, 0, 0, 0.6); + color: rgb(0 0 0 / 60%); } /* ─── Read-only tab state ─── */ @@ -149,3 +149,34 @@ color: #ef4444 !important; border: 1px solid #fca5a5 !important; } + +/* ─── Re-KYC Alert Banner ─── */ +.rekyc-alert { + display: flex; + align-items: flex-start; + gap: 12px; + padding: 14px 18px; + margin: 0 0 16px; + background: #fef3c7; + border: 1px solid #f59e0b; + border-radius: 8px; + color: #92400e; + + &__icon { + color: #f59e0b; + font-size: 22px; + width: 22px; + height: 22px; + margin-top: 1px; + flex-shrink: 0; + } + + &__text { + font-size: 13.5px; + line-height: 1.5; + + strong { + font-weight: 600; + } + } +} diff --git a/src/app/clients/edit-client/edit-client.component.ts b/src/app/clients/edit-client/edit-client.component.ts index d10951f1e..92f579192 100644 --- a/src/app/clients/edit-client/edit-client.component.ts +++ b/src/app/clients/edit-client/edit-client.component.ts @@ -9,10 +9,12 @@ /** Angular Imports */ import { Component, QueryList, ViewChild, ViewChildren, inject } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; +import { MatDialog } from '@angular/material/dialog'; /** Custom Services */ import { ClientsService } from '../clients.service'; import { SettingsService } from 'app/settings/settings.service'; +import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component'; /** Custom Components */ import { ClientGeneralStepComponent } from '../client-stepper/client-general-step/client-general-step.component'; @@ -60,6 +62,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; export class EditClientComponent { private route = inject(ActivatedRoute); private router = inject(Router); + private dialog = inject(MatDialog); private clientsService = inject(ClientsService); private settingsService = inject(SettingsService); @@ -79,6 +82,9 @@ export class EditClientComponent { /** Track which tabs are in edit mode (false = read-only, true = editable) */ tabEditMode: Record = {}; + /** Flag: DOB was changed — requires re-KYC (PAN re-verification) */ + dobChanged = false; + /** Client data and template (merged object from resolver) */ clientDataAndTemplate: any; /** Client ID */ @@ -139,8 +145,13 @@ export class EditClientComponent { return areValids; } + /** Whether the current tab has unsaved edits */ + isCurrentTabEdited(): boolean { + return this.tabEditMode[this.selectedTabIndex] === true; + } + /** - * Next button handler — just navigates between tabs (client already exists in edit mode). + * Next button handler — saves changes via API if the current tab was edited, then moves to next tab. */ onNext() { if (this.selectedTabIndex === 0) { @@ -155,9 +166,271 @@ export class EditClientComponent { return; } } + + // If tab was edited, confirm and save before moving on + if (this.isCurrentTabEdited()) { + this.confirmAndSaveTab(); + } else { + this.selectedTabIndex = this.selectedTabIndex + 1; + } + } + + /** + * Show confirmation dialog and save the current tab's data via API. + * Shows a special warning if DOB was changed (re-KYC required). + */ + private confirmAndSaveTab() { + let heading = 'Confirm Edit'; + let dialogContext = 'Are you sure you want to save the changes'; + let dialogType = 'basic'; + + // Check if DOB changed on the General tab — warn about re-KYC + if (this.selectedTabIndex === 0) { + const changes = this.detectSensitiveFieldChanges(this.clientDataAndTemplate); + if (changes.dobChanged) { + heading = 'Re-KYC Required'; + dialogContext = + 'Date of birth has been changed. This will require PAN re-verification in the KYC section. A remark will be added automatically. Do you want to proceed'; + dialogType = 'warn'; + } + } + + const dialogRef = this.dialog.open(ConfirmationDialogComponent, { + data: { heading, dialogContext, type: dialogType } + }); + + dialogRef.afterClosed().subscribe((response: any) => { + if (response?.confirm) { + this.saveCurrentTab(); + } + }); + } + + /** + * Save the current tab's data via API, then advance to the next tab. + */ + private saveCurrentTab() { + const tabIndex = this.selectedTabIndex; + + // General Details tab (always index 0) + if (tabIndex === 0) { + const locale = this.settingsService.language.code; + const dateFormat = this.settingsService.dateFormat; + const clientData = { ...this.client, dateFormat, locale }; + delete clientData.officeId; + + // Detect changes to sensitive fields before saving + const originalData = this.clientDataAndTemplate; + const changedFields = this.detectSensitiveFieldChanges(originalData); + + this.savingClient = true; + this.clientsService.updateClient(this.clientId, clientData).subscribe({ + next: () => { + this.savingClient = false; + this.tabEditMode[tabIndex] = false; + + // Log mobile/email changes as client notes for risk audit + this.logFieldChangeNotes(changedFields); + + // If DOB changed, flag re-KYC requirement and reset PAN verification + if (changedFields.dobChanged) { + this.dobChanged = true; + this.tabEditMode[1] = true; // auto-enable KYC tab for re-verification + this.flagReKycRequired(changedFields.oldDob, changedFields.newDob); + } + + // Update original data snapshot so subsequent edits compare against latest + if (changedFields.mobileChanged) { + originalData.mobileNo = changedFields.newMobile; + } + if (changedFields.emailChanged) { + originalData.emailAddress = changedFields.newEmail; + } + if (changedFields.dobChanged) { + originalData.dateOfBirth = changedFields.newDob; + } + + this.selectedTabIndex = this.selectedTabIndex + 1; + }, + error: () => { + this.savingClient = false; + } + }); + return; + } + + // KYC tab (always index 1) + if (tabIndex === 1) { + this.savingClient = true; + + // Upload photo if selected + if (this.clientKycStep?.photographFile) { + this.clientsService + .uploadClientProfileImage(this.clientId, this.clientKycStep.photographFile) + .subscribe({ error: () => {} }); + } + // Upload signature if selected + if (this.clientKycStep?.signatureFile) { + this.clientsService + .uploadClientSignatureImage(this.clientId, this.clientKycStep.signatureFile) + .subscribe({ error: () => {} }); + } + + // Save KYC data — use correct API based on KYC state + if (this.clientKycStep?.hasKycData) { + const kycData = this.clientKycStep.kycData; + const kycId = this.clientKycStep.kycId; + const isVerified = this.clientKycStep.isKycVerified; + + // Validate remarks are present for verified KYC + if (isVerified && !kycData.remarks?.trim()) { + this.savingClient = false; + this.clientKycStep.kycForm.get('remarks')?.markAsTouched(); + return; + } + + let saveObs; + if (kycId && isVerified) { + // VERIFIED → re-edit command + const { kycType, ...updatePayload } = kycData; + saveObs = this.clientsService.reEditClientKyc(this.clientId, kycId, updatePayload); + } else if (kycId) { + // Existing but not verified → normal PUT + const { kycType, ...updatePayload } = kycData; + saveObs = this.clientsService.updateClientKyc(this.clientId, kycId, updatePayload); + } else { + // New → POST + saveObs = this.clientsService.saveClientKyc(this.clientId, kycData); + } + + saveObs.subscribe({ + next: (res: any) => { + this.savingClient = false; + this.tabEditMode[tabIndex] = false; + // If re-edit, update KYC component state + if (isVerified && this.clientKycStep) { + this.clientKycStep.kycStatus = 200; + this.clientKycStep.panVerifyStatus = 'NONE'; + this.clientKycStep.panVerifyName = ''; + this.clientKycStep.panVerifiedOn = ''; + } + if (!kycId && res?.resourceId) { + this.clientKycStep.kycId = res.resourceId.toString(); + } + this.selectedTabIndex = this.selectedTabIndex + 1; + }, + error: () => { + this.savingClient = false; + } + }); + } else { + this.savingClient = false; + this.tabEditMode[tabIndex] = false; + this.selectedTabIndex = this.selectedTabIndex + 1; + } + return; + } + + // Address tab + const addressTabIdx = this.legalFormType === 2 ? 3 : 2; + if (tabIndex === addressTabIdx) { + this.savingClient = true; + if (this.clientIndiaAddressStep?.hasAddressData) { + this.saveClientAddresses(this.clientId); + } + this.savingClient = false; + this.tabEditMode[tabIndex] = false; + this.selectedTabIndex = this.selectedTabIndex + 1; + return; + } + + // Family tab + const familyTabIdx = this.legalFormType === 2 ? 4 : 3; + if (tabIndex === familyTabIdx) { + this.savingClient = true; + if (this.clientFamilyMembersStep?.hasFamilyMembers) { + this.saveClientFamilyMembers(this.clientId); + } + this.savingClient = false; + this.tabEditMode[tabIndex] = false; + this.selectedTabIndex = this.selectedTabIndex + 1; + return; + } + + // Default: just advance + this.tabEditMode[tabIndex] = false; this.selectedTabIndex = this.selectedTabIndex + 1; } + /** + * Compare current form values with original data to detect changes in DOB, mobile, email. + */ + private detectSensitiveFieldChanges(originalData: any) { + const form = this.clientGeneralForm; + const newMobile = form?.get('mobileNo')?.value || ''; + const newEmail = form?.get('emailAddress')?.value || ''; + const newDobRaw = form?.get('dateOfBirth')?.value; + const newDob = newDobRaw instanceof Date ? newDobRaw.toISOString().split('T')[0] : newDobRaw || ''; + + const oldMobile = originalData.mobileNo || ''; + const oldEmail = originalData.emailAddress || ''; + const oldDobRaw = originalData.dateOfBirth; + const oldDob = Array.isArray(oldDobRaw) + ? `${oldDobRaw[0]}-${String(oldDobRaw[1]).padStart(2, '0')}-${String(oldDobRaw[2]).padStart(2, '0')}` + : oldDobRaw instanceof Date + ? oldDobRaw.toISOString().split('T')[0] + : oldDobRaw || ''; + + return { + mobileChanged: newMobile !== oldMobile, + emailChanged: newEmail !== oldEmail, + dobChanged: newDob !== oldDob, + oldMobile, + newMobile, + oldEmail, + newEmail, + oldDob, + newDob + }; + } + + /** + * Save audit notes for mobile/email changes via the client notes API. + */ + private logFieldChangeNotes(changes: any) { + const timestamp = new Date().toISOString(); + + if (changes.mobileChanged) { + const note = `[AUDIT] Mobile number changed from "${changes.oldMobile}" to "${changes.newMobile}" on ${timestamp}`; + this.clientsService.createClientNote(this.clientId, { note }).subscribe({ error: () => {} }); + } + + if (changes.emailChanged) { + const note = `[AUDIT] Email address changed from "${changes.oldEmail}" to "${changes.newEmail}" on ${timestamp}`; + this.clientsService.createClientNote(this.clientId, { note }).subscribe({ error: () => {} }); + } + } + + /** + * When DOB changes, reset PAN verification in KYC step and pre-fill remark for re-KYC. + */ + private flagReKycRequired(oldDob: string, newDob: string) { + // Reset PAN verification status so user must re-verify + if (this.clientKycStep) { + this.clientKycStep.panVerifyStatus = 'NONE'; + this.clientKycStep.panVerifyName = ''; + this.clientKycStep.panVerifiedOn = ''; + // Pre-fill remarks with re-KYC note + const remarkText = `[Re-KYC Required] Date of birth changed from ${oldDob} to ${newDob}. PAN re-verification is mandatory.`; + this.clientKycStep.kycForm.get('remarks')?.setValue(remarkText); + } + + // Also log DOB change as an audit note + const timestamp = new Date().toISOString(); + const note = `[AUDIT] Date of birth changed from "${oldDob}" to "${newDob}" on ${timestamp}. Re-KYC (PAN re-verification) required.`; + this.clientsService.createClientNote(this.clientId, { note }).subscribe({ error: () => {} }); + } + legalFormChange(eventData: { legalForm: number }) { this.legalFormType = eventData.legalForm; } @@ -185,12 +458,16 @@ export class EditClientComponent { // Upload photo if selected if (this.clientKycStep?.photographFile) { - this.clientsService.uploadClientProfileImage(this.clientId, this.clientKycStep.photographFile).subscribe({ error: () => {} }); + this.clientsService + .uploadClientProfileImage(this.clientId, this.clientKycStep.photographFile) + .subscribe({ error: () => {} }); } // Upload signature if selected if (this.clientKycStep?.signatureFile) { - this.clientsService.uploadClientSignatureImage(this.clientId, this.clientKycStep.signatureFile).subscribe({ error: () => {} }); + this.clientsService + .uploadClientSignatureImage(this.clientId, this.clientKycStep.signatureFile) + .subscribe({ error: () => {} }); } // Save addresses from India address step @@ -205,7 +482,20 @@ export class EditClientComponent { // Save/update KYC data if available if (this.clientKycStep?.hasKycData) { - this.clientsService.saveClientKyc(this.clientId, this.clientKycStep.kycData).subscribe({ + const kycData = this.clientKycStep.kycData; + const kycId = this.clientKycStep.kycId; + const isVerified = this.clientKycStep.isKycVerified; + let kycObs; + if (kycId && isVerified) { + const { kycType, ...updatePayload } = kycData; + kycObs = this.clientsService.reEditClientKyc(this.clientId, kycId, updatePayload); + } else if (kycId) { + const { kycType, ...updatePayload } = kycData; + kycObs = this.clientsService.updateClientKyc(this.clientId, kycId, updatePayload); + } else { + kycObs = this.clientsService.saveClientKyc(this.clientId, kycData); + } + kycObs.subscribe({ next: () => navigateBack(), error: () => navigateBack() }); @@ -225,16 +515,36 @@ export class EditClientComponent { private saveClientAddresses(clientId: string) { const addressData = this.clientIndiaAddressStep.addressData; const typeNameMap: Record = { - permanent: ['Permanent', 'Permanent Address'], - current: ['Residential', 'Current', 'Current / Residential', 'Communication'], - office: ['Office', 'Office / Work', 'Business', 'Work'], - correspondence: ['Correspondence', 'Mailing', 'Postal'] + permanent: [ + 'Permanent', + 'Permanent Address' + ], + current: [ + 'Residential', + 'Current', + 'Current / Residential', + 'Communication' + ], + office: [ + 'Office', + 'Office / Work', + 'Business', + 'Work' + ], + correspondence: [ + 'Correspondence', + 'Mailing', + 'Postal' + ] }; this.clientsService.getClientAddressTemplate().subscribe({ next: (template: any) => { const typeOptions = template?.addressTypeIdOptions || []; - for (const [tab, addr] of Object.entries(addressData)) { + for (const [ + tab, + addr + ] of Object.entries(addressData)) { if (!addr || !(addr as any).addressLine1) continue; const possibleNames = typeNameMap[tab] || [tab]; @@ -259,8 +569,8 @@ export class EditClientComponent { }; if ((addr as any).state && template?.stateProvinceIdOptions?.length) { - const stateMatch = template.stateProvinceIdOptions.find((s: any) => - s.name?.toLowerCase() === (addr as any).state?.toLowerCase() + const stateMatch = template.stateProvinceIdOptions.find( + (s: any) => s.name?.toLowerCase() === (addr as any).state?.toLowerCase() ); if (stateMatch) payload.stateProvinceId = stateMatch.id; } diff --git a/src/app/core/shell/shell.component.scss b/src/app/core/shell/shell.component.scss index ab4ec5672..6730a1f41 100644 --- a/src/app/core/shell/shell.component.scss +++ b/src/app/core/shell/shell.component.scss @@ -90,6 +90,15 @@ $color: #e2e4ec; .sidenav { overflow-x: hidden; position: relative; + + // Constrain routed page content so tables/cards shrink when sidebar opens + mifosx-content { + display: block; + min-width: 0; + max-width: 100%; + overflow-x: hidden; + box-sizing: border-box; + } } // ===== 2-Row Main Header ===== @@ -142,15 +151,28 @@ $gray-700: #334155; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; - transition: background 0.12s, color 0.12s; + transition: + background 0.12s, + color 0.12s; user-select: none; border-right: 1px solid $gray-200; text-decoration: none; - font-family: 'DM Sans', 'Roboto', sans-serif; + font-family: 'DM Sans', Roboto, sans-serif; - &:last-child { border-right: none; } - &:hover { background: $brand-hover; color: $brand; } - &.active { background: $brand-light; color: $brand; font-weight: 600; } + &:last-child { + border-right: none; + } + + &:hover { + background: $brand-hover; + color: $brand; + } + + &.active { + background: $brand-light; + color: $brand; + font-weight: 600; + } &.active::before { content: ''; @@ -178,7 +200,9 @@ $gray-700: #334155; .ni-caret { font-size: 8px; opacity: 0.3; - transition: transform 0.18s, opacity 0.18s; + transition: + transform 0.18s, + opacity 0.18s; flex-shrink: 0; .ni:hover & { @@ -211,7 +235,7 @@ $gray-700: #334155; min-height: 34px !important; padding: 0 14px !important; color: $gray-700 !important; - font-family: 'DM Sans', 'Roboto', sans-serif !important; + font-family: 'DM Sans', Roboto, sans-serif !important; &:hover { background: $brand-hover !important; @@ -266,7 +290,7 @@ $gray-700: #334155; width: 860px; max-width: 95vw; padding: 20px 24px; - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); + box-shadow: 0 6px 24px rgb(0 0 0 / 22%); border-radius: 0 0 10px 10px; z-index: 1000; border-top: 3px solid #0d47a1; @@ -307,7 +331,7 @@ $gray-700: #334155; outline: none; border-color: #0d47a1; background: #fff; - box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1); + box-shadow: 0 0 0 3px rgb(13 71 161 / 10%); } } diff --git a/src/app/shared/confirmation-dialog/confirmation-dialog.component.html b/src/app/shared/confirmation-dialog/confirmation-dialog.component.html index 4d94392d2..a3379a1ab 100644 --- a/src/app/shared/confirmation-dialog/confirmation-dialog.component.html +++ b/src/app/shared/confirmation-dialog/confirmation-dialog.component.html @@ -6,13 +6,42 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -

{{ data.heading }}

-
-

{{ data.dialogContext }} ?

+
+ +
+
+ @switch (data.type) { + @case ('warn') { + + } + @case ('Strong') { + + } + @default { + + } + } +
+

{{ data.heading }}

+
+ + + +

{{ data.dialogContext }}

+ + + + + + +
- - - - diff --git a/src/app/shared/confirmation-dialog/confirmation-dialog.component.scss b/src/app/shared/confirmation-dialog/confirmation-dialog.component.scss index af9f4c075..c8fd726af 100644 --- a/src/app/shared/confirmation-dialog/confirmation-dialog.component.scss +++ b/src/app/shared/confirmation-dialog/confirmation-dialog.component.scss @@ -5,3 +5,145 @@ * 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/. */ + +$primary: #1a73e8; +$primary-light: #e8f0fe; +$amber: #f59e0b; +$amber-light: #fef7e0; +$red: #ef4444; +$red-light: #fef2f2; +$gray-100: #f1f3f4; +$gray-200: #e8eaed; +$gray-500: #9aa0a6; +$gray-700: #5f6368; +$gray-900: #202124; +$white: #fff; + +.confirm-dialog { + display: flex; + flex-direction: column; + max-width: 460px; + min-width: 380px; +} + +// ─── Header ─── +.confirm-header { + display: flex; + align-items: center; + gap: 14px; + padding: 22px 24px 16px; + border-bottom: 1px solid $gray-200; + + &__icon-wrap { + width: 42px; + height: 42px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + .confirm-dialog--basic & { + background: $primary-light; + + i { + color: $primary; + } + } + + .confirm-dialog--warn & { + background: $amber-light; + + i { + color: $amber; + } + } + + .confirm-dialog--Strong & { + background: $red-light; + + i { + color: $red; + } + } + + i { + font-size: 18px; + } + } + + &__title { + margin: 0; + padding: 0; + font-size: 17px; + font-weight: 700; + color: $gray-900; + letter-spacing: -0.2px; + line-height: 1.25; + } +} + +// ─── Body ─── +.confirm-body { + padding: 18px 24px !important; + overflow: visible !important; + max-height: none !important; + + &__text { + font-size: 13.5px; + line-height: 1.65; + color: $gray-700; + margin: 0; + } +} + +// ─── Actions ─── +.confirm-actions { + padding: 14px 24px 20px !important; + border-top: 1px solid $gray-200; + margin: 0 !important; + display: flex !important; + justify-content: flex-end !important; + align-items: center !important; + gap: 10px !important; + + &__cancel { + border-radius: 8px !important; + font-size: 13px !important; + font-weight: 600 !important; + padding: 0 20px !important; + height: 38px !important; + color: $gray-700 !important; + border-color: $gray-200 !important; + } + + &__confirm { + border-radius: 8px !important; + font-size: 13px !important; + font-weight: 600 !important; + padding: 0 24px !important; + height: 38px !important; + letter-spacing: 0.2px; + color: $white !important; + + &--basic { + background: $primary !important; + box-shadow: 0 1px 3px rgba($primary, 0.3) !important; + } + + &--warn { + background: $amber !important; + box-shadow: 0 1px 3px rgba($amber, 0.3) !important; + } + + &--Strong { + background: $red !important; + box-shadow: 0 1px 3px rgba($red, 0.3) !important; + } + } + + &__btn-icon { + margin-right: 6px; + font-size: 12px; + } +} diff --git a/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts b/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts index 6785d6d54..dfa51070f 100644 --- a/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts +++ b/src/app/shared/confirmation-dialog/confirmation-dialog.component.ts @@ -7,22 +7,21 @@ */ /** Angular Imports */ -import { Component, OnInit, inject } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA, - MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog'; import { DialogData } from 'app/core/dialogs/dialog-data.model'; -import { Dialogs } from 'app/core/dialogs/dialogs'; import { CdkScrollable } from '@angular/cdk/scrolling'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; /** - * Delete dialog component. + * Confirmation dialog component. + * Supports types: 'basic' (blue), 'warn' (amber), 'Strong' (red/destructive). */ @Component({ selector: 'mifosx-confirmation-dialog', @@ -30,25 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; styleUrls: ['./confirmation-dialog.component.scss'], imports: [ ...STANDALONE_SHARED_IMPORTS, - MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatDialogClose ] }) -export class ConfirmationDialogComponent implements OnInit { +export class ConfirmationDialogComponent { dialogRef = inject>(MatDialogRef); - private dialogs = inject(Dialogs); data = inject(MAT_DIALOG_DATA); - - color: string; - - ngOnInit() { - this.setColor(); - } - - setColor() { - this.color = this.dialogs.setColor(this.data.type); - } } diff --git a/src/app/shared/styles/list-layout.scss b/src/app/shared/styles/list-layout.scss index dba7ea93a..8af67d841 100644 --- a/src/app/shared/styles/list-layout.scss +++ b/src/app/shared/styles/list-layout.scss @@ -23,6 +23,9 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; border-radius: 12px; border: 1px solid $border; box-shadow: 0 1px 3px rgb(0 0 0 / 5%); + min-width: 0; + max-width: 100%; + box-sizing: border-box; // Legacy layout support .layout-column, @@ -45,14 +48,21 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; flex: 1; min-width: 0; - &.m-r-30 { margin-right: 12px; } + &.m-r-30 { + margin-right: 12px; + } mat-form-field { min-width: 200px; flex: 1; - &.search-box { width: auto; } - + mat-form-field { margin-left: 12px; } + &.search-box { + width: auto; + } + + + mat-form-field { + margin-left: 12px; + } } mat-checkbox { @@ -60,7 +70,9 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; flex-shrink: 0; margin-left: 8px; - &.m-r-10 { margin-right: 8px; } + &.m-r-10 { + margin-right: 8px; + } } } @@ -70,14 +82,18 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; flex-shrink: 0; margin-left: auto; - &.gap-25px { gap: 10px; } + &.gap-25px { + gap: 10px; + } button { white-space: nowrap; fa-icon { &.m-r-10, - &.m-r-20 { margin-right: 6px; } + &.m-r-20 { + margin-right: 6px; + } } } } @@ -92,11 +108,16 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; .select-row { cursor: pointer; - &:hover { background-color: $hover-bg; } + + &:hover { + background-color: $hover-bg; + } } th, - td { padding: 10px 16px; } + td { + padding: 10px 16px; + } th { font-weight: 600; @@ -110,7 +131,10 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; tr { border-bottom: 1px solid #f1f5f9; - &:last-child { border-bottom: none; } + + &:last-child { + border-bottom: none; + } } td { @@ -125,7 +149,9 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; background: transparent; } - mat-progress-bar { margin: 0; } + mat-progress-bar { + margin: 0; + } } // ===== Modern Table Header ===== @@ -167,10 +193,21 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; span { border-radius: 2px; - &:nth-child(1) { background: $brand; } - &:nth-child(2) { background: #0ea5e9; } - &:nth-child(3) { background: #10b981; } - &:nth-child(4) { background: #cbd5e1; } + &:nth-child(1) { + background: $brand; + } + + &:nth-child(2) { + background: #0ea5e9; + } + + &:nth-child(3) { + background: #10b981; + } + + &:nth-child(4) { + background: #cbd5e1; + } } } } @@ -198,7 +235,9 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; max-width: 360px; ::ng-deep { - .mat-mdc-form-field-flex { height: 38px; } + .mat-mdc-form-field-flex { + height: 38px; + } .mat-mdc-form-field-infix { padding: 6px 0; @@ -206,8 +245,13 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; } .mdc-notched-outline { - .mdc-notched-outline__leading { border-radius: 8px 0 0 8px; } - .mdc-notched-outline__trailing { border-radius: 0 8px 8px 0; } + .mdc-notched-outline__leading { + border-radius: 8px 0 0 8px; + } + + .mdc-notched-outline__trailing { + border-radius: 0 8px 8px 0; + } } .mat-mdc-form-field-icon-prefix { @@ -215,7 +259,9 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; color: $text-muted; } - input { font-size: 13px; } + input { + font-size: 13px; + } } } @@ -237,7 +283,10 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; height: 36px; padding: 0 16px; - fa-icon { margin-right: 6px; font-size: 12px; } + fa-icon { + margin-right: 6px; + font-size: 12px; + } } .btn-import { @@ -259,7 +308,7 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; .table-container { border: 1px solid $border; border-radius: 10px; - overflow: hidden; + overflow: hidden auto; } .table-loader { @@ -294,7 +343,9 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; border-bottom: 1px solid #f1f5f9; transition: background 0.1s; - &:last-child { border-bottom: none; } + &:last-child { + border-bottom: none; + } &:nth-child(even) { background: #fafbfc; @@ -314,7 +365,11 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; font-weight: 400; color: $text; padding: 0 12px; - font-family: 'Inter', 'Roboto', -apple-system, sans-serif; + font-family: + Inter, + Roboto, + -apple-system, + sans-serif; } } } @@ -324,9 +379,15 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; font-weight: 500; font-size: 13px; cursor: pointer; - font-family: 'Inter', 'Roboto', -apple-system, sans-serif; + font-family: + Inter, + Roboto, + -apple-system, + sans-serif; - &:hover { text-decoration: underline; } + &:hover { + text-decoration: underline; + } } .cell-mono { @@ -350,7 +411,11 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; letter-spacing: 0.02em; text-transform: capitalize; white-space: nowrap; - font-family: 'Inter', 'Roboto', -apple-system, sans-serif; + font-family: + Inter, + Roboto, + -apple-system, + sans-serif; &::before { content: ''; @@ -367,7 +432,9 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; background: #ecfdf5 !important; color: #059669 !important; - &::before { background: #059669; } + &::before { + background: #059669; + } } .status-active-overdue, @@ -375,7 +442,9 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; background: #fef2f2 !important; color: #dc2626 !important; - &::before { background: #dc2626; } + &::before { + background: #dc2626; + } } .status-submitted-and-pending-approval, @@ -383,14 +452,18 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; background: #fffbeb !important; color: #d97706 !important; - &::before { background: #d97706; } + &::before { + background: #d97706; + } } .status-overpaid { background: #eff6ff !important; color: #2563eb !important; - &::before { background: #2563eb; } + &::before { + background: #2563eb; + } } } @@ -402,8 +475,13 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; vertical-align: middle; margin-right: 6px; - &.person { color: #2563eb; } - &.entity { color: #7c3aed; } + &.person { + color: #2563eb; + } + + &.entity { + color: #7c3aed; + } } .legal-form-badge { @@ -550,10 +628,15 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; min-width: 150px; margin-bottom: 8px; - + mat-form-field { margin-left: 0; } + + mat-form-field { + margin-left: 0; + } } - mat-checkbox { margin-left: 0; margin-top: 8px; } + mat-checkbox { + margin-left: 0; + margin-top: 8px; + } } .action-button { @@ -561,25 +644,50 @@ $mono: 'Roboto Mono', 'DM Mono', monospace; width: 100%; justify-content: center; - &.gap-25px { gap: 10px; } + &.gap-25px { + gap: 10px; + } } } } - .table-actions { flex-direction: column; align-items: stretch; } - .table-search { max-width: 100%; } - .table-buttons { margin-left: 0; justify-content: stretch; } - .table-buttons button { flex: 1; } + .table-actions { + flex-direction: column; + align-items: stretch; + } + + .table-search { + max-width: 100%; + } + + .table-buttons { + margin-left: 0; + justify-content: stretch; + } + + .table-buttons button { + flex: 1; + } } // Legacy table styles table { width: 100%; - tr.select-row:hover { cursor: pointer; } + tr.select-row:hover { + cursor: pointer; + } } // Utility classes -.m-r-10 { margin-right: 10px !important; } -.m-r-20 { margin-right: 20px !important; } -.m-r-30 { margin-right: 30px !important; } +.m-r-10 { + margin-right: 10px !important; +} + +.m-r-20 { + margin-right: 20px !important; +} + +.m-r-30 { + margin-right: 30px !important; +} diff --git a/src/environments/.env.ts b/src/environments/.env.ts index 216b49c93..9dd2af68c 100644 --- a/src/environments/.env.ts +++ b/src/environments/.env.ts @@ -1,9 +1,17 @@ +/** + * 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/. + */ + // IMPORTANT: THIS FILE IS AUTO GENERATED! DO NOT MANUALLY EDIT OR CHECKIN! /* tslint:disable */ export default { 'mifos_x': { - 'version': '260404', - 'hash': 'gab0111142' + 'version': '260407', + 'hash': 'gb890d24bb' }, 'allow_switching_backend_instance': true };