feat: add CKYC management tab, checker inbox views, and maker-checker diff utilities

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

@@ -187,6 +187,124 @@
     }
 
     <div class="ckyc-upload-grid">
+      <!-- ID Proof Document -->
+      <mat-card class="ckyc-upload-card">
+        <mat-card-content>
+          <div class="ckyc-upload-header">
+            <mat-icon class="ckyc-upload-icon">badge</mat-icon>
+            <span>{{ 'labels.inputs.ID Proof Document' | translate }}</span>
+          </div>
+
+          @if (existing.ID_PROOF.present) {
+            <div class="ckyc-existing">
+              <div class="ckyc-existing__head">
+                <fa-icon icon="check-circle" class="ckyc-existing__ok"></fa-icon>
+                <div>
+                  <strong>Already available</strong>
+                  <span class="ckyc-existing__source">from {{ existing.ID_PROOF.source }}</span>
+                  @if (existing.ID_PROOF.previewUnavailable) {
+                    <span class="ckyc-existing__warn">stored file unavailable</span>
+                  }
+                </div>
+              </div>
+              @if (existing.ID_PROOF.previewUrl && isImage('ID_PROOF')) {
+                <img [src]="existing.ID_PROOF.previewUrl" alt="ID proof" class="ckyc-existing__thumb" />
+              }
+              @if (existing.ID_PROOF.previewUrl) {
+                <button mat-stroked-button type="button" class="ckyc-existing__view" (click)="openDocument('ID_PROOF')">
+                  <fa-icon icon="eye"></fa-icon>
+                  &nbsp;View document
+                </button>
+              }
+              <div class="ckyc-existing__meta">
+                <fa-icon icon="file-alt"></fa-icon>
+                <span>{{ existing.ID_PROOF.name }}</span>
+                @if (existing.ID_PROOF.documentKey) {
+                  <span class="ckyc-existing__key">{{ existing.ID_PROOF.documentKey }}</span>
+                }
+                @if (existing.ID_PROOF.fileCount && existing.ID_PROOF.fileCount > 0) {
+                  <span class="ckyc-existing__count">
+                    {{ existing.ID_PROOF.fileCount }}
+                    {{ existing.ID_PROOF.fileCount === 1 ? 'file' : 'files' }}
+                  </span>
+                }
+              </div>
+              <button
+                mat-stroked-button
+                type="button"
+                class="ckyc-existing__replace"
+                (click)="toggleReplace('ID_PROOF')"
+              >
+                <fa-icon [icon]="existing.ID_PROOF.expanded ? 'times' : 'upload'"></fa-icon>
+                {{ existing.ID_PROOF.expanded ? 'Cancel replace' : 'Upload new version' }}
+              </button>
+            </div>
+          }
+
+          @if (!existing.ID_PROOF.present || existing.ID_PROOF.expanded) {
+            <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
+            <div class="ckyc-file-row">
+              <input
+                type="file"
+                #idProofInput
+                accept=".png,.jpeg,.jpg,.pdf"
+                (change)="onFileSelect($event, 'ID_PROOF')"
+                [style.display]="'none'"
+              />
+              <mat-form-field appearance="outline" class="ckyc-file-name-field">
+                <input
+                  matInput
+                  [readonly]="true"
+                  [value]="idProofFile?.name || ''"
+                  [placeholder]="'labels.text.NoFileSelected' | translate"
+                />
+              </mat-form-field>
+              <button mat-stroked-button type="button" (click)="idProofInput.click()">
+                <fa-icon icon="folder-open" size="lg"></fa-icon>
+                &nbsp;{{ 'labels.buttons.Browse' | translate }}
+              </button>
+            </div>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              [disabled]="!idProofFile || uploading['ID_PROOF']"
+              (click)="uploadDocument('ID_PROOF')"
+            >
+              @if (uploading['ID_PROOF']) {
+                <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
+              } @else {
+                {{ 'labels.buttons.Upload' | translate }}
+              }
+            </button>
+            @if (uploadErrors['ID_PROOF']) {
+              <div class="ckyc-upload-error">
+                <mat-icon>error_outline</mat-icon>
+                <span>{{ uploadErrors['ID_PROOF'] }}</span>
+              </div>
+            }
+            @if (uploadResponses['ID_PROOF']) {
+              <div class="ckyc-upload-response">
+                <p>
+                  <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['ID_PROOF'].status }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['ID_PROOF'].requestId }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
+                  {{ uploadResponses['ID_PROOF'].acknowledgementNumber }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
+                  {{ uploadResponses['ID_PROOF'].processingStatus }}
+                </p>
+              </div>
+            }
+          }
+        </mat-card-content>
+      </mat-card>
+
       <!-- Address Proof Document -->
       <mat-card class="ckyc-upload-card">
         <mat-card-content>
@@ -202,8 +320,25 @@
                 <div>
                   <strong>Already available</strong>
                   <span class="ckyc-existing__source">from {{ existing.ADDRESS_PROOF.source }}</span>
+                  @if (existing.ADDRESS_PROOF.previewUnavailable) {
+                    <span class="ckyc-existing__warn">stored file unavailable</span>
+                  }
                 </div>
               </div>
+              @if (existing.ADDRESS_PROOF.previewUrl && isImage('ADDRESS_PROOF')) {
+                <img [src]="existing.ADDRESS_PROOF.previewUrl" alt="Address proof" class="ckyc-existing__thumb" />
+              }
+              @if (existing.ADDRESS_PROOF.previewUrl) {
+                <button
+                  mat-stroked-button
+                  type="button"
+                  class="ckyc-existing__view"
+                  (click)="openDocument('ADDRESS_PROOF')"
+                >
+                  <fa-icon icon="eye"></fa-icon>
+                  &nbsp;View document
+                </button>
+              }
               <div class="ckyc-existing__meta">
                 <fa-icon icon="file-alt"></fa-icon>
                 <span>{{ existing.ADDRESS_PROOF.name }}</span>
@@ -308,8 +443,25 @@
                 <div>
                   <strong>Already available</strong>
                   <span class="ckyc-existing__source">from {{ existing.PHOTO_PROOF.source }}</span>
+                  @if (existing.PHOTO_PROOF.previewUnavailable) {
+                    <span class="ckyc-existing__warn">stored file unavailable</span>
+                  }
                 </div>
               </div>
+              @if (existing.PHOTO_PROOF.previewUrl && isImage('PHOTO_PROOF')) {
+                <img [src]="existing.PHOTO_PROOF.previewUrl" alt="Photo proof" class="ckyc-existing__thumb" />
+              }
+              @if (existing.PHOTO_PROOF.previewUrl) {
+                <button
+                  mat-stroked-button
+                  type="button"
+                  class="ckyc-existing__view"
+                  (click)="openDocument('PHOTO_PROOF')"
+                >
+                  <fa-icon icon="eye"></fa-icon>
+                  &nbsp;View document
+                </button>
+              }
               <div class="ckyc-existing__meta">
                 <fa-icon icon="id-card"></fa-icon>
                 <span>{{ existing.PHOTO_PROOF.name }}</span>
@@ -413,10 +565,22 @@
                 <div>
                   <strong>Already available</strong>
                   <span class="ckyc-existing__source">from {{ existing.CLIENT_IMAGE.source }}</span>
+                  @if (existing.CLIENT_IMAGE.previewUnavailable) {
+                    <span class="ckyc-existing__warn">stored file unavailable</span>
+                  }
                 </div>
               </div>
               @if (existing.CLIENT_IMAGE.previewUrl) {
                 <img [src]="existing.CLIENT_IMAGE.previewUrl" alt="Client photo" class="ckyc-existing__thumb" />
+                <button
+                  mat-stroked-button
+                  type="button"
+                  class="ckyc-existing__view"
+                  (click)="openDocument('CLIENT_IMAGE')"
+                >
+                  <fa-icon icon="eye"></fa-icon>
+                  &nbsp;View document
+                </button>
               }
               <button
                 mat-stroked-button
@@ -509,6 +673,9 @@
                 <div>
                   <strong>Already available</strong>
                   <span class="ckyc-existing__source">from {{ existing.CLIENT_SIGNATURE.source }}</span>
+                  @if (existing.CLIENT_SIGNATURE.previewUnavailable) {
+                    <span class="ckyc-existing__warn">stored file unavailable</span>
+                  }
                 </div>
               </div>
               @if (existing.CLIENT_SIGNATURE.previewUrl) {
@@ -518,6 +685,17 @@
                   class="ckyc-existing__thumb ckyc-existing__thumb--wide"
                 />
               }
+              @if (existing.CLIENT_SIGNATURE.previewUrl) {
+                <button
+                  mat-stroked-button
+                  type="button"
+                  class="ckyc-existing__view"
+                  (click)="openDocument('CLIENT_SIGNATURE')"
+                >
+                  <fa-icon icon="eye"></fa-icon>
+                  &nbsp;View document
+                </button>
+              }
               <div class="ckyc-existing__meta">
                 <fa-icon icon="file-signature"></fa-icon>
                 <span>{{ existing.CLIENT_SIGNATURE.name }}</span>