feat(clients, alm): add CIN/MCA verification & authorized signatories tab; refactor ALM report print and export

2026-08-13 15:05:16 +05:30
parent 75df8865dd
commit 5581d4180d
29 changed files with 3002 additions and 2453 deletions
@@ -588,95 +588,23 @@

      <!-- ══ NON-INDIVIDUAL KYC ══ -->
      @if (isNonIndividual) {
-        <!-- Incorporation Date -->
-        <mat-form-field appearance="outline" class="form-field" (click)="incorpDatePicker.open()">
-          <mat-label>Incorporation Date</mat-label>
-          <span matPrefix class="field-prefix-icon"><mat-icon>calendar_today</mat-icon></span>
-          <input matInput [max]="today" [matDatepicker]="incorpDatePicker" formControlName="incorporationDate" />
-          <mat-datepicker-toggle matSuffix [for]="incorpDatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #incorpDatePicker></mat-datepicker>
+        <!-- Date of Incorporation — captured before PAN because Enterprise PAN verification
+             matches the entity on name + date of incorporation as held in the PAN records. -->
+        <mat-form-field appearance="outline" class="form-field" (click)="incorporationDatePicker.open()">
+          <mat-label>Date of Incorporation</mat-label>
+          <span matPrefix class="field-prefix-icon"><mat-icon>event_available</mat-icon></span>
+          <input
+            matInput
+            [max]="today"
+            [matDatepicker]="incorporationDatePicker"
+            formControlName="incorporationDate"
+            readonly
+          />
+          <mat-datepicker-toggle matSuffix [for]="incorporationDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #incorporationDatePicker></mat-datepicker>
+          <mat-hint>As per Certificate of Incorporation / Registration</mat-hint>
        </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') {
          <!-- Proprietorship: Individual PAN (proprietor's personal PAN) -->
@@ -826,8 +754,88 @@
          }
        }

-        <!-- CIN (Companies & LLP only) -->
-        @if (constitutionMeta?.showCin) {
+        <!-- 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>
+        }
+
+        <!-- CIN -->
+        @if (isNonIndividual) {
          <div class="form-field verify-field">
            <mat-form-field appearance="outline" class="verify-input">
              <mat-label>CIN (Corporate Identity Number)</mat-label>
@@ -850,7 +858,7 @@
              }
            </mat-form-field>
            <div class="verify-action">
-              @if (cinVerifyStatus === 'NONE' || cinVerifyStatus === 'FAILED') {
+              @if (cinVerifyStatus !== 'VERIFIED') {
                <button
                  mat-raised-button
                  color="primary"
@@ -862,16 +870,31 @@
                  @if (cinVerifying) {
                    <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
                  } @else {
-                    <fa-icon icon="shield-alt"></fa-icon> Verify CIN
+                    <fa-icon icon="shield-alt"></fa-icon>
+                    {{ cinVerifyStatus === 'UNCONFIRMED' ? 'Retry' : 'Verify CIN' }}
                  }
                </button>
              }
              @if (cinVerifyStatus === 'VERIFIED') {
                <span class="verify-chip verified"><fa-icon icon="check-circle"></fa-icon> Verified</span>
              }
+              @if (cinVerifyStatus === 'UNCONFIRMED') {
+                <span class="verify-chip unconfirmed"
+                  ><fa-icon icon="info-circle"></fa-icon> Saved — not confirmed</span
+                >
+              }
            </div>
          </div>

+          <!-- Accepted, but MCA returned no match. Stated plainly rather than as a failure: the
+               number is stored and the officer has nothing to correct. -->
+          @if (cinUnconfirmedMessage) {
+            <div class="cin-unconfirmed-note full-width">
+              <fa-icon icon="info-circle" class="cin-unconfirmed-note__icon"></fa-icon>
+              <span>{{ cinUnconfirmedMessage }}</span>
+            </div>
+          }
+
          <!-- CIN verification progress -->
          @if (cinVerifying) {
            <div class="cin-progress full-width">
@@ -1429,15 +1452,19 @@
        </div>
      }

+      <!--
+        Overriding the risk category is the one thing that makes remarks mandatory here. A verified
+        record still gets the box — the officer needs somewhere to record a re-edit reason, and the
+        server asks for one if the save actually replaces data already on the record — but it is
+        offered, not demanded, so a record that auto-verified mid-wizard does not open in error.
+      -->
      @if (kycForm.get('allowRiskOverride')?.value || isKycVerified) {
        <mat-form-field appearance="outline" class="form-field full-width">
          <mat-label>
            {{
-              isKycVerified
-                ? 'Reason for Re-edit'
-                : kycForm.get('allowRiskOverride')?.value
-                  ? 'Remarks (Required for Risk Override)'
-                  : 'Remarks'
+              kycForm.get('allowRiskOverride')?.value
+                ? 'Remarks (Required for Risk Override)'
+                : 'Reason for Re-edit (optional)'
            }}
          </mat-label>
          <textarea
@@ -1445,18 +1472,13 @@
            formControlName="remarks"
            rows="2"
            [placeholder]="
-              isKycVerified
-                ? 'Mandatory — explain why KYC is being re-edited'
-                : kycForm.get('allowRiskOverride')?.value
-                  ? 'Mandatory — explain why you are overriding the auto-calculated risk category'
-                  : ''
+              kycForm.get('allowRiskOverride')?.value
+                ? 'Mandatory — explain why you are overriding the auto-calculated risk category'
+                : 'Optional — needed only if you change details already recorded on this verified KYC'
            "
          ></textarea>
-          @if ((isKycVerified || kycForm.get('allowRiskOverride')?.value) && !kycForm.get('remarks')?.value?.trim()) {
-            <mat-error>
-              Remarks are mandatory when
-              {{ isKycVerified ? 'updating a verified KYC record' : 'overriding the risk category' }}
-            </mat-error>
+          @if (kycForm.get('allowRiskOverride')?.value && !kycForm.get('remarks')?.value?.trim()) {
+            <mat-error> Remarks are mandatory when overriding the risk category </mat-error>
          }
        </mat-form-field>
      }
@@ -1672,77 +1694,92 @@
  </div>

  <!-- ═══ SECTION: Form 97/98 ═══ -->
-  <div class="section-block">
-    <h4 class="section-title">
-      <fa-icon icon="file-invoice" class="section-icon"></fa-icon>
-      Form 97 / 98
+  @if (!isNonIndividual) {
+    <div class="section-block">
+      <h4 class="section-title">
+        <fa-icon icon="file-invoice" class="section-icon"></fa-icon>
+        Form 97 / 98
+        @if (!kycForm.get('hasPan')?.value) {
+          <span class="kyc-badge required-badge">Required — No PAN</span>
+        }
+      </h4>
      @if (!kycForm.get('hasPan')?.value) {
-        <span class="kyc-badge required-badge">Required — No PAN</span>
-      }
-    </h4>
-    @if (!kycForm.get('hasPan')?.value) {
-      <div class="kyc-info-hint warning-hint">
-        <mat-icon class="kyc-info-hint-icon">warning</mat-icon>
-        <span>Client does not have PAN. Form 97/98 is mandatory.</span>
-      </div>
-      <div class="form-grid">
-        <mat-form-field appearance="outline" class="form-field">
-          <mat-label>Form Type</mat-label>
-          <mat-select formControlName="form60Type">
-            <mat-option value="FORM_60">Form 97</mat-option>
-            <mat-option value="FORM_61">Form 98</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="form-field" (click)="form60DatePicker.open()">
-          <mat-label>Declaration Date</mat-label>
-          <input matInput [matDatepicker]="form60DatePicker" formControlName="form60Date" />
-          <mat-datepicker-toggle matSuffix [for]="form60DatePicker"></mat-datepicker-toggle>
-          <mat-datepicker #form60DatePicker></mat-datepicker>
-        </mat-form-field>
-      </div>
-    } @else {
-      <p class="form60-not-needed">Client has PAN — Form 97/98 not required.</p>
-    }
-  </div>
-
-  <!-- ═══ SECTION: Form 121 ═══ -->
-  <div class="section-block">
-    <h4 class="section-title">
-      <fa-icon icon="receipt" class="section-icon"></fa-icon>
-      Form 121
-    </h4>
-    <div class="form-grid">
-      <div class="form-field checkbox-field">
-        <mat-checkbox formControlName="form15Applicable">Form 121 Applicable</mat-checkbox>
-      </div>
-      @if (kycForm.get('form15Applicable')?.value) {
-        <mat-form-field appearance="outline" class="form-field">
-          <mat-label>Form Type</mat-label>
-          <mat-select formControlName="form15Type">
-            <mat-option value="15G">Form 121 (Below 60 years)</mat-option>
-            <mat-option value="15H">Form 121 (Senior Citizen 60+)</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="form-field">
-          <mat-label>Financial Year</mat-label>
-          <input matInput formControlName="form15FY" placeholder="e.g. 2025-26" />
-        </mat-form-field>
+        <div class="kyc-info-hint warning-hint">
+          <mat-icon class="kyc-info-hint-icon">warning</mat-icon>
+          <span>Client does not have PAN. Form 97/98 is mandatory.</span>
+        </div>
+        <div class="form-grid">
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Form Type</mat-label>
+            <mat-select formControlName="form60Type">
+              <mat-option value="FORM_60">Form 97</mat-option>
+              <mat-option value="FORM_61">Form 98</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field" (click)="form60DatePicker.open()">
+            <mat-label>Declaration Date</mat-label>
+            <input matInput [matDatepicker]="form60DatePicker" formControlName="form60Date" />
+            <mat-datepicker-toggle matSuffix [for]="form60DatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #form60DatePicker></mat-datepicker>
+          </mat-form-field>
+        </div>
+      } @else {
+        <p class="form60-not-needed">Client has PAN — Form 97/98 not required.</p>
      }
    </div>
-  </div>
+  }

-  <!-- ═══ SECTION: Photograph & Signature ═══ -->
+  <!-- ═══ SECTION: Form 121 ═══ -->
+  @if (!isNonIndividual) {
+    <div class="section-block">
+      <h4 class="section-title">
+        <fa-icon icon="receipt" class="section-icon"></fa-icon>
+        Form 121
+      </h4>
+      <div class="form-grid">
+        <div class="form-field checkbox-field">
+          <mat-checkbox formControlName="form15Applicable">Form 121 Applicable</mat-checkbox>
+        </div>
+        @if (kycForm.get('form15Applicable')?.value) {
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Form Type</mat-label>
+            <mat-select formControlName="form15Type">
+              <mat-option value="15G">Form 121 (Below 60 years)</mat-option>
+              <mat-option value="15H">Form 121 (Senior Citizen 60+)</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Financial Year</mat-label>
+            <input matInput formControlName="form15FY" placeholder="e.g. 2025-26" />
+          </mat-form-field>
+        }
+      </div>
+    </div>
+  }
+
+  <!-- ═══ SECTION: Photograph & Signature ═══
+
+       An entity gets the photograph box too — a shopfront, signboard or logo is what staff
+       recognise the client by in the ledger, and the client view has always had a photo slot in
+       its header with no way to fill it from the stepper. The specimen signature stays individual-
+       only: an entity signs through its authorised signatories, whose signatures are captured with
+       their own KYC rather than as one image for the company. Optional here, so a company can
+       still be onboarded before anyone has a usable photograph of the premises. -->
  <div class="section-block">
    <h4 class="section-title">
      <fa-icon icon="camera" class="section-icon"></fa-icon>
-      Photograph &amp; Signature
-      <span class="section-required-tag">Required</span>
+      {{ isNonIndividual ? 'Entity Photograph' : 'Photograph & Signature' }}
+      @if (isNonIndividual) {
+        <span class="section-optional-tag">Optional</span>
+      } @else {
+        <span class="section-required-tag">Required</span>
+      }
    </h4>
-    <div class="photo-sig-grid">
+    <div class="photo-sig-grid" [class.photo-sig-grid--single]="isNonIndividual">
      <div
        class="upload-box"
        [class.upload-box--has-preview]="photographPreview"
-        [class.upload-box--missing]="!photographPreview && photoSigTouched"
+        [class.upload-box--missing]="!photographPreview && photoSigTouched && !isNonIndividual"
      >
        @if (photographPreview) {
          <div class="upload-preview">
@@ -1758,12 +1795,16 @@
            </div>
          </div>
        } @else {
-          <div class="upload-box__icon"><fa-icon icon="user"></fa-icon></div>
+          <div class="upload-box__icon"><fa-icon [icon]="isNonIndividual ? 'building' : 'user'"></fa-icon></div>
          <span class="upload-box__label">
-            Client Photograph
-            <span class="upload-box__req">*</span>
+            {{ isNonIndividual ? 'Entity Photograph / Logo' : 'Client Photograph' }}
+            @if (!isNonIndividual) {
+              <span class="upload-box__req">*</span>
+            }
+          </span>
+          <span class="upload-box__hint">
+            {{ isNonIndividual ? 'Office premises, signboard or logo — JPG / PNG, max 2MB' : 'JPG / PNG, max 2MB' }}
          </span>
-          <span class="upload-box__hint">JPG / PNG, max 2MB</span>
          <div class="upload-box__btn-row">
            <label class="upload-box__btn">
              <input type="file" accept="image/*" hidden (change)="onPhotoSelected($event)" />
@@ -1773,50 +1814,52 @@
              <fa-icon icon="video"></fa-icon> Use Webcam
            </button>
          </div>
-          @if (photoSigTouched) {
+          @if (photoSigTouched && !isNonIndividual) {
            <span class="upload-box__error">Photograph is required</span>
          }
        }
      </div>
-      <div
-        class="upload-box"
-        [class.upload-box--has-preview]="signaturePreview"
-        [class.upload-box--missing]="!signaturePreview && photoSigTouched"
-      >
-        @if (signaturePreview) {
-          <div class="upload-preview">
-            <img [src]="signaturePreview" alt="Signature" class="upload-preview__img upload-preview__img--sig" />
-            <div class="upload-preview__actions">
-              <label class="upload-preview__btn recrop">
+      @if (!isNonIndividual) {
+        <div
+          class="upload-box"
+          [class.upload-box--has-preview]="signaturePreview"
+          [class.upload-box--missing]="!signaturePreview && photoSigTouched"
+        >
+          @if (signaturePreview) {
+            <div class="upload-preview">
+              <img [src]="signaturePreview" alt="Signature" class="upload-preview__img upload-preview__img--sig" />
+              <div class="upload-preview__actions">
+                <label class="upload-preview__btn recrop">
+                  <input type="file" accept="image/*" hidden (change)="onSignatureSelected($event)" />
+                  <fa-icon icon="crop"></fa-icon> Re-crop
+                </label>
+                <button type="button" class="upload-preview__btn remove" (click)="removeSignature()">
+                  <fa-icon icon="trash"></fa-icon> Remove
+                </button>
+              </div>
+            </div>
+          } @else {
+            <div class="upload-box__icon"><fa-icon icon="pen"></fa-icon></div>
+            <span class="upload-box__label">
+              Specimen Signature
+              <span class="upload-box__req">*</span>
+            </span>
+            <span class="upload-box__hint">Scanned image, max 1MB</span>
+            <div class="upload-box__btn-row">
+              <label class="upload-box__btn">
                <input type="file" accept="image/*" hidden (change)="onSignatureSelected($event)" />
-                <fa-icon icon="crop"></fa-icon> Re-crop
+                <fa-icon icon="crop"></fa-icon> Choose &amp; Crop
              </label>
-              <button type="button" class="upload-preview__btn remove" (click)="removeSignature()">
-                <fa-icon icon="trash"></fa-icon> Remove
+              <button type="button" class="upload-box__btn upload-box__btn--secondary" (click)="drawSignature()">
+                <fa-icon icon="pen"></fa-icon> Draw Signature
              </button>
            </div>
-          </div>
-        } @else {
-          <div class="upload-box__icon"><fa-icon icon="pen"></fa-icon></div>
-          <span class="upload-box__label">
-            Specimen Signature
-            <span class="upload-box__req">*</span>
-          </span>
-          <span class="upload-box__hint">Scanned image, max 1MB</span>
-          <div class="upload-box__btn-row">
-            <label class="upload-box__btn">
-              <input type="file" accept="image/*" hidden (change)="onSignatureSelected($event)" />
-              <fa-icon icon="crop"></fa-icon> Choose &amp; Crop
-            </label>
-            <button type="button" class="upload-box__btn upload-box__btn--secondary" (click)="drawSignature()">
-              <fa-icon icon="pen"></fa-icon> Draw Signature
-            </button>
-          </div>
-          @if (photoSigTouched) {
-            <span class="upload-box__error">Signature is required</span>
+            @if (photoSigTouched) {
+              <span class="upload-box__error">Signature is required</span>
+            }
          }
-        }
-      </div>
+        </div>
+      }
    </div>
  </div>