merging code

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/clients/clients-view/kyc-tab/kyc-tab.component.html

@@ -27,10 +27,17 @@
           </span>
         }
       </div>
-      <button mat-raised-button color="primary" (click)="toggleEditMode()" type="button">
-        <fa-icon [icon]="isEditMode ? 'times' : 'edit'" class="m-r-10"></fa-icon>
-        {{ isEditMode ? ('labels.buttons.Cancel' | translate) : ('labels.buttons.Edit' | translate) }}
-      </button>
+      <div class="kyc-header-actions">
+        @if (!isEditMode && kycData) {
+          <button mat-stroked-button class="kyc-print-btn" type="button" (click)="printSelfDeclaration()">
+            <fa-icon icon="file-pdf" class="m-r-6"></fa-icon> Self Declaration
+          </button>
+        }
+        <button mat-raised-button color="primary" (click)="toggleEditMode()" type="button">
+          <fa-icon [icon]="isEditMode ? 'times' : 'edit'" class="m-r-10"></fa-icon>
+          {{ isEditMode ? ('labels.buttons.Cancel' | translate) : ('labels.buttons.Edit' | translate) }}
+        </button>
+      </div>
     </div>
 
     <!-- KYC Summary (read-only when not in edit mode) -->
@@ -58,12 +65,22 @@
               <span class="kv-status kv-status--pending"><mat-icon>radio_button_unchecked</mat-icon> Pending</span>
             }
           </span>
-          <span class="kv-table__col kv-table__col--date">{{ kycData.panVerifiedOn ? formatDate(kycData.panVerifiedOn) : '—' }}</span>
+          <span class="kv-table__col kv-table__col--date">{{
+            kycData.panVerifiedOn ? formatDate(kycData.panVerifiedOn) : '—'
+          }}</span>
           <span class="kv-table__col kv-table__col--action">
-            <button mat-stroked-button class="kv-action-btn" type="button"
-              [disabled]="verifying.pan || !kycData.panNumber" (click)="verifyPAN()">
-              @if (verifying.pan) { <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner> }
-              @else { Re-Verify }
+            <button
+              mat-stroked-button
+              class="kv-action-btn"
+              type="button"
+              [disabled]="verifying.pan || !kycData.panNumber"
+              (click)="verifyPAN()"
+            >
+              @if (verifying.pan) {
+                <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner>
+              } @else {
+                Re-Verify
+              }
             </button>
           </span>
         </div>
@@ -81,11 +98,18 @@
               <span class="kv-status kv-status--pending"><mat-icon>radio_button_unchecked</mat-icon> Pending</span>
             }
           </span>
-          <span class="kv-table__col kv-table__col--date">{{ kycData.aadhaarVerifiedOn ? formatDate(kycData.aadhaarVerifiedOn) : '—' }}</span>
+          <span class="kv-table__col kv-table__col--date">{{
+            kycData.aadhaarVerifiedOn ? formatDate(kycData.aadhaarVerifiedOn) : '—'
+          }}</span>
           <span class="kv-table__col kv-table__col--action">
             @if (!showAadhaarReVerify && !aadhaarOtpSent) {
-              <button mat-stroked-button class="kv-action-btn" type="button"
-                [disabled]="verifying.aadhaar || !kycData.aadhaarNumberMasked" (click)="startAadhaarReVerify()">
+              <button
+                mat-stroked-button
+                class="kv-action-btn"
+                type="button"
+                [disabled]="verifying.aadhaar || !kycData.aadhaarNumberMasked"
+                (click)="startAadhaarReVerify()"
+              >
                 Re-Verify
               </button>
             }
@@ -106,12 +130,22 @@
                 <span class="kv-status kv-status--pending"><mat-icon>radio_button_unchecked</mat-icon> Pending</span>
               }
             </span>
-            <span class="kv-table__col kv-table__col--date">{{ kycData.gstinVerifiedOn ? formatDate(kycData.gstinVerifiedOn) : '—' }}</span>
+            <span class="kv-table__col kv-table__col--date">{{
+              kycData.gstinVerifiedOn ? formatDate(kycData.gstinVerifiedOn) : '—'
+            }}</span>
             <span class="kv-table__col kv-table__col--action">
-              <button mat-stroked-button class="kv-action-btn" type="button"
-                [disabled]="verifying.gstin || !kycData.gstinNumber" (click)="verifyGSTIN()">
-                @if (verifying.gstin) { <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner> }
-                @else { Re-Verify }
+              <button
+                mat-stroked-button
+                class="kv-action-btn"
+                type="button"
+                [disabled]="verifying.gstin || !kycData.gstinNumber"
+                (click)="verifyGSTIN()"
+              >
+                @if (verifying.gstin) {
+                  <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner>
+                } @else {
+                  Re-Verify
+                }
               </button>
             </span>
           </div>
@@ -131,7 +165,9 @@
                 <span class="kv-status kv-status--pending"><mat-icon>radio_button_unchecked</mat-icon> Pending</span>
               }
             </span>
-            <span class="kv-table__col kv-table__col--date">{{ kycData.enterprisePanVerifiedOn ? formatDate(kycData.enterprisePanVerifiedOn) : '—' }}</span>
+            <span class="kv-table__col kv-table__col--date">{{
+              kycData.enterprisePanVerifiedOn ? formatDate(kycData.enterprisePanVerifiedOn) : '—'
+            }}</span>
             <span class="kv-table__col kv-table__col--action"></span>
           </div>
         }
@@ -195,12 +231,27 @@
         <div class="kv-otp-bar">
           <mat-form-field appearance="outline" class="kv-otp-input">
             <mat-label>Enter 12-digit Aadhaar</mat-label>
-            <input matInput [(ngModel)]="aadhaarFullNumber" [ngModelOptions]="{standalone: true}" maxlength="12" type="password" />
+            <input
+              matInput
+              [(ngModel)]="aadhaarFullNumber"
+              [ngModelOptions]="{ standalone: true }"
+              maxlength="12"
+              type="password"
+            />
           </mat-form-field>
-          <button mat-raised-button color="primary" type="button" class="kv-otp-btn"
-            [disabled]="!aadhaarFullNumber || aadhaarFullNumber.length !== 12 || verifying.aadhaar" (click)="sendAadhaarOtp()">
-            @if (verifying.aadhaar) { <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner> }
-            @else { Send OTP }
+          <button
+            mat-raised-button
+            color="primary"
+            type="button"
+            class="kv-otp-btn"
+            [disabled]="!aadhaarFullNumber || aadhaarFullNumber.length !== 12 || verifying.aadhaar"
+            (click)="sendAadhaarOtp()"
+          >
+            @if (verifying.aadhaar) {
+              <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner>
+            } @else {
+              Send OTP
+            }
           </button>
         </div>
       }
@@ -209,32 +260,69 @@
           <span class="kv-otp-label"><mat-icon>sms</mat-icon> OTP sent</span>
           <mat-form-field appearance="outline" class="kv-otp-input">
             <mat-label>Enter OTP</mat-label>
-            <input matInput [(ngModel)]="aadhaarOtp" [ngModelOptions]="{standalone: true}" maxlength="6" autocomplete="one-time-code" />
+            <input
+              matInput
+              [(ngModel)]="aadhaarOtp"
+              [ngModelOptions]="{ standalone: true }"
+              maxlength="6"
+              autocomplete="one-time-code"
+            />
           </mat-form-field>
-          <button mat-raised-button color="primary" type="button" class="kv-otp-btn"
-            [disabled]="!aadhaarOtp || aadhaarOtp.length < 4 || aadhaarOtpVerifying" (click)="verifyAadhaarOtp()">
-            @if (aadhaarOtpVerifying) { <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner> }
-            @else { Verify }
+          <button
+            mat-raised-button
+            color="primary"
+            type="button"
+            class="kv-otp-btn"
+            [disabled]="!aadhaarOtp || aadhaarOtp.length < 4 || aadhaarOtpVerifying"
+            (click)="verifyAadhaarOtp()"
+          >
+            @if (aadhaarOtpVerifying) {
+              <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner>
+            } @else {
+              Verify
+            }
+          </button>
+          <button
+            mat-stroked-button
+            type="button"
+            class="kv-otp-btn"
+            [disabled]="verifying.aadhaar"
+            (click)="sendAadhaarOtp()"
+          >
+            Resend
           </button>
-          <button mat-stroked-button type="button" class="kv-otp-btn" [disabled]="verifying.aadhaar" (click)="sendAadhaarOtp()">Resend</button>
         </div>
       }
       @if (verificationError.aadhaar) {
-        <div class="kyc-error-msg"><mat-icon class="kyc-error-icon">error_outline</mat-icon> {{ verificationError.aadhaar }}</div>
+        <div class="kyc-error-msg">
+          <mat-icon class="kyc-error-icon">error_outline</mat-icon> {{ verificationError.aadhaar }}
+        </div>
       }
       @if (verificationError.pan) {
-        <div class="kyc-error-msg"><mat-icon class="kyc-error-icon">error_outline</mat-icon> {{ verificationError.pan }}</div>
+        <div class="kyc-error-msg">
+          <mat-icon class="kyc-error-icon">error_outline</mat-icon> {{ verificationError.pan }}
+        </div>
       }
 
       <!-- KYC Meta Grid -->
       <div class="kv-meta-grid">
         <div class="kv-meta-item">
           <span class="kv-meta-label">KYC Type</span>
-          <span class="kv-meta-value">{{ kycData.kycType === 1 ? 'Individual' : kycData.kycType === 2 ? 'Non-Individual' : '—' }}</span>
+          <span class="kv-meta-value">{{
+            kycData.kycType === 1 ? 'Individual' : kycData.kycType === 2 ? 'Non-Individual' : '—'
+          }}</span>
         </div>
         <div class="kv-meta-item">
           <span class="kv-meta-label">Risk Category</span>
-          <span class="kv-meta-value">{{ kycData.riskCategory === 1 ? 'Low' : kycData.riskCategory === 2 ? 'Medium' : kycData.riskCategory === 3 ? 'High' : '—' }}</span>
+          <span class="kv-meta-value">{{
+            kycData.riskCategory === 1
+              ? 'Low'
+              : kycData.riskCategory === 2
+                ? 'Medium'
+                : kycData.riskCategory === 3
+                  ? 'High'
+                  : '—'
+          }}</span>
         </div>
         <div class="kv-meta-item">
           <span class="kv-meta-label">Initiated On</span>
@@ -255,6 +343,105 @@
           </div>
         }
       </div>
+
+      <!-- Re-KYC: Upload Signed Declaration & Complete -->
+      <div class="rekyc-section">
+        <div class="rekyc-header">
+          <div class="rekyc-icon-wrap">
+            <fa-icon icon="sync-alt" class="rekyc-icon"></fa-icon>
+          </div>
+          <div class="rekyc-header-text">
+            <h4 class="rekyc-title">Re-KYC Completion</h4>
+            <p class="rekyc-desc">Print self-declaration, get it signed, upload &amp; complete re-KYC.</p>
+          </div>
+        </div>
+
+        <!-- Step 1 -->
+        <div class="rekyc-timeline">
+          <div class="rekyc-tl-item">
+            <div class="rekyc-tl-dot">
+              <span class="rekyc-tl-num">1</span>
+              <div class="rekyc-tl-line"></div>
+            </div>
+            <div class="rekyc-tl-content">
+              <div class="rekyc-tl-label">Download Self Declaration Form</div>
+              <div class="rekyc-tl-sub">System-generated PDF with PAN, Aadhaar &amp; KYC details</div>
+              <button mat-flat-button class="rekyc-btn-print" type="button" (click)="printSelfDeclaration()">
+                <fa-icon icon="file-pdf"></fa-icon> Download PDF
+              </button>
+            </div>
+          </div>
+
+          <!-- Step 2 -->
+          <div class="rekyc-tl-item">
+            <div class="rekyc-tl-dot">
+              <span class="rekyc-tl-num">2</span>
+              <div class="rekyc-tl-line"></div>
+            </div>
+            <div class="rekyc-tl-content">
+              <div class="rekyc-tl-label">Upload Signed Declaration</div>
+              <div class="rekyc-tl-sub">Get the form signed by the client and upload the scanned copy</div>
+              <label class="rekyc-upload-zone" [class.has-file]="selectedDeclarationFile">
+                <input type="file" accept=".pdf,.jpg,.jpeg,.png" (change)="onDeclarationFileSelected($event)" hidden />
+                @if (!selectedDeclarationFile) {
+                  <mat-icon class="upload-zone-icon">cloud_upload</mat-icon>
+                  <span class="upload-zone-text">Click to upload signed form</span>
+                  <span class="upload-zone-hint">PDF, JPG or PNG</span>
+                } @else {
+                  <fa-icon icon="check-circle" class="upload-zone-check"></fa-icon>
+                  <span class="upload-zone-filename">{{ selectedDeclarationFile.name }}</span>
+                  <span class="upload-zone-hint">Click to change file</span>
+                }
+              </label>
+            </div>
+          </div>
+
+          <!-- Step 3 -->
+          <div class="rekyc-tl-item rekyc-tl-item--last">
+            <div class="rekyc-tl-dot">
+              <span class="rekyc-tl-num">3</span>
+            </div>
+            <div class="rekyc-tl-content">
+              <div class="rekyc-tl-label">Complete Re-KYC</div>
+              <div class="rekyc-tl-sub">Updates Last Verified date and sets new Expiry Date as per RBI norms</div>
+              <button
+                mat-flat-button
+                color="primary"
+                class="rekyc-btn-complete"
+                type="button"
+                [disabled]="!selectedDeclarationFile || reKycCompleting || !kycId"
+                (click)="completeReKyc()"
+              >
+                @if (reKycCompleting) {
+                  <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
+                  Completing...
+                } @else {
+                  <fa-icon icon="check-circle"></fa-icon> Complete Re-KYC
+                }
+              </button>
+            </div>
+          </div>
+        </div>
+
+        @if (reKycSuccess) {
+          <div class="rekyc-result rekyc-result--success">
+            <fa-icon icon="check-circle" class="rekyc-result-icon"></fa-icon>
+            <div>
+              <strong>Re-KYC completed successfully</strong>
+              <p>Last Verified and Expiry Date have been updated.</p>
+            </div>
+          </div>
+        }
+        @if (reKycError) {
+          <div class="rekyc-result rekyc-result--error">
+            <mat-icon class="rekyc-result-icon">error_outline</mat-icon>
+            <div>
+              <strong>Re-KYC failed</strong>
+              <p>{{ reKycError }}</p>
+            </div>
+          </div>
+        }
+      </div>
     }
 
     <!-- No KYC Data State -->