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>

src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.html

@@ -305,23 +305,85 @@
           <mat-datepicker #incorpDatePicker></mat-datepicker>
         </mat-form-field>
 
-        <!-- GSTIN (all non-individual) -->
-        <mat-form-field appearance="outline" class="form-field">
-          <mat-label>GSTIN Number</mat-label>
-          <input
-            matInput
-            formControlName="gstinNumber"
-            placeholder="15-character GSTIN"
-            maxlength="15"
-            style="text-transform: uppercase"
-            (input)="
-              kycForm.get('gstinNumber')?.setValue($any($event.target).value.toUpperCase(), { emitEvent: false })
-            "
-          />
-          @if (kycForm.get('gstinNumber')?.hasError('pattern') && kycForm.get('gstinNumber')?.touched) {
-            <mat-error>Invalid GSTIN format (e.g. 22AAAAA0000A1Z5)</mat-error>
-          }
-        </mat-form-field>
+        <!-- GSTIN (all non-individual) with Verify -->
+        <div class="form-field verify-field">
+          <mat-form-field appearance="outline" class="verify-input">
+            <mat-label>GSTIN Number</mat-label>
+            <span matPrefix class="field-prefix-icon"><mat-icon>receipt_long</mat-icon></span>
+            <input
+              matInput
+              formControlName="gstinNumber"
+              placeholder="15-character GSTIN"
+              maxlength="15"
+              style="text-transform: uppercase"
+              (input)="
+                kycForm.get('gstinNumber')?.setValue($any($event.target).value.toUpperCase(), { emitEvent: false })
+              "
+            />
+            @if (kycForm.get('gstinNumber')?.hasError('pattern') && kycForm.get('gstinNumber')?.touched) {
+              <mat-error>Invalid GSTIN format (e.g. 22AAAAA0000A1Z5)</mat-error>
+            }
+            @if (gstinVerifyStatus === 'VERIFIED') {
+              <mat-icon matSuffix class="verify-icon-ok">check_circle</mat-icon>
+            }
+            @if (gstinVerifyStatus === 'FAILED') {
+              <mat-icon matSuffix class="verify-icon-fail">cancel</mat-icon>
+            }
+          </mat-form-field>
+          <div class="verify-action">
+            @if (gstinVerifyStatus === 'NONE' || gstinVerifyStatus === 'FAILED') {
+              <button
+                mat-raised-button
+                color="primary"
+                type="button"
+                class="verify-btn-inline"
+                [disabled]="
+                  readOnly ||
+                  !kycForm.get('gstinNumber')?.value ||
+                  kycForm.get('gstinNumber')?.value.length < 15 ||
+                  gstinVerifying ||
+                  !clientId
+                "
+                (click)="verifyGstin()"
+              >
+                @if (gstinVerifying) {
+                  <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
+                } @else {
+                  <fa-icon icon="shield-alt"></fa-icon> Verify GSTIN
+                }
+              </button>
+            }
+            @if (gstinVerifyStatus === 'VERIFIED') {
+              <span class="verify-chip verified"><fa-icon icon="check-circle"></fa-icon> Verified</span>
+            }
+          </div>
+        </div>
+        @if (gstinVerifyStatus === 'VERIFIED') {
+          <div class="pan-result-card full-width">
+            <div class="pan-result-header">
+              <fa-icon icon="check-circle" class="pan-result-ok-icon"></fa-icon>
+              <span>GSTIN Verified Successfully</span>
+            </div>
+            <div class="pan-result-body">
+              @if (gstinVerifyName) {
+                <div class="pan-result-row">
+                  <span class="pan-result-label">Trade Name / Legal Name</span>
+                  <span class="pan-result-value name">{{ gstinVerifyName }}</span>
+                </div>
+              }
+              @if (gstinVerifyState) {
+                <div class="pan-result-row">
+                  <span class="pan-result-label">State</span>
+                  <span class="pan-result-value">{{ gstinVerifyState }}</span>
+                </div>
+              }
+              <div class="pan-result-row">
+                <span class="pan-result-label">Verified On</span>
+                <span class="pan-result-value date">{{ gstinVerifiedOn }}</span>
+              </div>
+            </div>
+          </div>
+        }
 
         <!-- PAN — Proprietorship uses Individual PAN, others use Enterprise PAN -->
         @if (constitutionMeta?.value === 'PROPRIETORSHIP') {

src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts

@@ -263,6 +263,13 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
   entPanVerifyName = '';
   entPanVerifiedOn = '';
 
+  /** GSTIN verification */
+  gstinVerifyStatus: 'NONE' | 'VERIFIED' | 'FAILED' = 'NONE';
+  gstinVerifying = false;
+  gstinVerifyName = '';
+  gstinVerifiedOn = '';
+  gstinVerifyState = '';
+
   /** CIN verification (dummy) */
   cinVerifyStatus: 'NONE' | 'VERIFIED' | 'FAILED' = 'NONE';
   cinVerifying = false;
@@ -480,6 +487,17 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
           if (data.panAadhaarSeedingStatus) {
             this.panAadhaarSeedingStatus = data.panAadhaarSeedingStatus;
           }
+          if (data.gstinVerified) {
+            this.gstinVerifyStatus = 'VERIFIED';
+            this.gstinVerifyName = data.gstinTradeName || data.gstinLegalName || '';
+            this.gstinVerifyState = data.gstinState || '';
+            const rawGstinDate = data.gstinVerifiedOn;
+            if (Array.isArray(rawGstinDate) && rawGstinDate.length >= 3) {
+              this.gstinVerifiedOn = `${rawGstinDate[2]?.toString().padStart(2, '0')}/${rawGstinDate[1]?.toString().padStart(2, '0')}/${rawGstinDate[0]}`;
+            } else if (rawGstinDate) {
+              this.gstinVerifiedOn = rawGstinDate;
+            }
+          }
         }
         // Load existing photo & signature
         this.loadExistingPhoto();
@@ -772,6 +790,68 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     );
   }
 
+  /** Verify GSTIN via API */
+  verifyGstin() {
+    if (!this.clientId) return;
+    const gstin = this.kycForm.value.gstinNumber;
+    if (!gstin || this.kycForm.get('gstinNumber')?.invalid) return;
+
+    this.gstinVerifying = true;
+    const dateFormat = this.settingsService.dateFormat;
+
+    const payload: any = {
+      locale: 'en',
+      kycType: 1,
+      riskCategory: this.kycForm.value.riskCategory || 1,
+      gstinNumber: gstin,
+      dateFormat,
+      panNumber: this.kycForm.value.enterprisePan || this.kycForm.value.panNumber || null,
+      aadhaarNumberMasked: 'XXXXXXXX0000'
+    };
+
+    this.saveKycAndDo(
+      payload,
+      () => {
+        this.clientsService.verifyGSTIN(this.clientId, this.kycId).subscribe({
+          next: (res: any) => {
+            this.gstinVerifying = false;
+            const changes = res?.changes || res;
+            if (changes?.gstinVerified === true) {
+              this.gstinVerifyStatus = 'VERIFIED';
+              this.gstinVerifyName = changes?.gstinTradeName || changes?.gstinLegalName || '';
+              this.gstinVerifyState = changes?.gstinState || '';
+              const rawDate = changes?.gstinVerifiedOn;
+              if (Array.isArray(rawDate)) {
+                this.gstinVerifiedOn = `${rawDate[2]?.toString().padStart(2, '0')}/${rawDate[1]?.toString().padStart(2, '0')}/${rawDate[0]}`;
+              } else {
+                const now = new Date();
+                this.gstinVerifiedOn =
+                  rawDate ||
+                  `${now.getDate().toString().padStart(2, '0')}/${(now.getMonth() + 1).toString().padStart(2, '0')}/${now.getFullYear()}`;
+              }
+            } else {
+              this.gstinVerifyStatus = 'FAILED';
+              this.showPanErrorAlert(
+                changes?.gstinVerificationMessage || 'GSTIN verification failed. Please check the GSTIN number and try again.'
+              );
+            }
+          },
+          error: (err: any) => {
+            this.gstinVerifying = false;
+            this.gstinVerifyStatus = 'FAILED';
+            this.showPanErrorAlert(
+              err?.error?.errors?.[0]?.defaultUserMessage || err?.error?.defaultUserMessage || 'GSTIN verification failed.'
+            );
+          }
+        });
+      },
+      (msg) => {
+        this.gstinVerifying = false;
+        this.showPanErrorAlert(msg);
+      }
+    );
+  }
+
   /** Verify CIN (dummy — no real API) */
   verifyCin() {
     const cin = this.kycForm.value.cinNumber;

src/app/clients/client-stepper/client-kyc-step/image-crop-dialog/image-crop-dialog.component.scss

@@ -158,7 +158,7 @@ $navy: #0f172a;
   }
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .crop-workspace {
     flex-direction: column;
   }