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

src/app/clients/clients-view/custom-dialogs/upload-image-dialog/upload-image-dialog.component.ts

@@ -33,6 +33,16 @@ export class UploadImageDialogComponent {
   /** Client Image */
   image: File;
 
+  /**
+   * Data URL of the selected image, rendered as a preview so the officer sees what they picked
+   * before confirming — the upload replaces the client's profile picture immediately on confirm,
+   * and picking the wrong file is otherwise only discovered once it is already live.
+   */
+  imagePreview: string | null = null;
+
+  /** Set when the picked file is not a readable image, in place of a preview. */
+  previewError = '';
+
   /**
    * Sets file form control value.
    * @param {any} $event file change event.
@@ -40,6 +50,29 @@ export class UploadImageDialogComponent {
   onFileSelect($event: any) {
     if ($event.target.files.length > 0) {
       this.image = $event.target.files[0];
+      this.buildPreview(this.image);
     }
   }
+
+  /** Reads the picked file into a data URL for the preview. */
+  private buildPreview(file: File) {
+    this.imagePreview = null;
+    this.previewError = '';
+
+    // The picker's accept filter is a hint the OS dialog can be talked out of, so re-check here
+    // rather than handing a non-image to FileReader and rendering a broken <img>.
+    if (!file.type?.startsWith('image/')) {
+      this.previewError = 'Selected file is not an image. Choose a PNG or JPEG file.';
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      this.imagePreview = reader.result as string;
+    };
+    reader.onerror = () => {
+      this.previewError = 'Could not read the selected file.';
+    };
+    reader.readAsDataURL(file);
+  }
 }