Merge branch 'dev' into feature/bugfix

Conflicts resolved in:
- src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.html
- src/app/clients/clients-view/ckyc-tab/ckyc-tab.component.ts

Kept dev's CKYC architecture (upload dialog, real per-artefact endpoints)
and layered feature/bugfix's fixes on top: upload file validation,
missing-file badge, silent preview download, and image/PDF view button.
Also includes the CKYC "Image of Client" upload-state fix and the
client-change state-leak fix in the same component.

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

.drone.yml

@@ -9,7 +9,6 @@ trigger:
     - push
 
 steps:
-
   # ============================================================
   # DOCKER BUILD & PUSH
   #
@@ -69,7 +68,6 @@ steps:
 
         echo "Docker image pushed successfully."
 
-
   # ============================================================
   # DEPLOY
   # ============================================================
@@ -104,7 +102,7 @@ steps:
         echo "Repository : $$REPO"
         echo "Service    : $$SERVICE_NAME"
         echo "Image      : $$IMAGE"
-        echo "Placement  : node.labels.environment == dev"
+        echo "Placement  : node.labels.environment == dev2"
         echo "=========================================="
 
 
@@ -132,6 +130,20 @@ steps:
         echo "Image verified      : $$IMAGE"
 
 
+        # ========================================================
+        # HARBOR LOGIN
+        #
+        # Zaroori hai taaki --with-registry-auth worker node (dev2) ko
+        # valid Harbor credentials propagate kare — warna cross-node pull
+        # "No such image" / "no basic auth credentials" se fail hota hai.
+        # ========================================================
+
+        echo 'QVgW5QbqlKKtBU2dYApTY28Dd6J36GK3' | \
+          docker login harbor.lincpay:8082 \
+          -u 'robot$lincpay+drone' \
+          --password-stdin
+
+
         # ========================================================
         # EXISTING SERVICE
         # ========================================================
@@ -151,7 +163,7 @@ steps:
 
           CONSTRAINT_EXISTS=$$(docker service inspect "$$SERVICE_NAME" \
             --format '{{range .Spec.TaskTemplate.Placement.Constraints}}{{println .}}{{end}}' \
-            | grep -Fx 'node.labels.environment == dev' || true)
+            | grep -Fx 'node.labels.environment == dev2' || true)
 
 
           # ------------------------------------------------------
@@ -161,10 +173,10 @@ steps:
           if [ -z "$$CONSTRAINT_EXISTS" ]; then
 
             echo "Constraint missing."
-            echo "Adding: node.labels.environment == dev"
+            echo "Adding: node.labels.environment == dev2"
 
             docker service update \
-              --constraint-add 'node.labels.environment == dev' \
+              --constraint-add 'node.labels.environment == dev2' \
               "$$SERVICE_NAME"
 
           else
@@ -220,7 +232,7 @@ steps:
             --name "$$SERVICE_NAME" \
             --network edge-network \
             --replicas 1 \
-            --constraint 'node.labels.environment == dev' \
+            --constraint 'node.labels.environment == dev2' \
             --with-registry-auth \
             --env-file /platform-env/global.env \
             --env-file /platform-env/dev.env \
@@ -268,9 +280,7 @@ steps:
         echo "DEPLOYMENT COMPLETE"
         echo "=========================================="
 
-
 volumes:
-
   # ============================================================
   # DOCKER SOCKET
   # ============================================================
@@ -278,11 +288,9 @@ volumes:
     host:
       path: /var/run/docker.sock
 
-
   # ============================================================
   # ENVIRONMENT FILES
   # ============================================================
   - name: envfiles
     host:
       path: /opt/platform/env
-

src/app/cashier/transaction-entry/cashier-issue-dd-dialog.component.ts

@@ -236,9 +236,7 @@ export interface CashierIssueDdDialogData {
 
       <mat-dialog-actions class="dd-dialog-actions" align="end">
         <button mat-button type="button" (click)="onClose()">Cancel</button>
-        <button mat-flat-button color="primary" [disabled]="form.invalid" (click)="onSubmit()">
-          Save DD Details
-        </button>
+        <button mat-flat-button color="primary" [disabled]="form.invalid" (click)="onSubmit()">Save DD Details</button>
       </mat-dialog-actions>
     </div>
   `,

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

@@ -202,9 +202,14 @@
                 <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 || existing.ADDRESS_PROOF.previewUrlBack) {
+              @if (
+                (existing.ADDRESS_PROOF.previewUrl || existing.ADDRESS_PROOF.previewUrlBack) && isImage('ADDRESS_PROOF')
+              ) {
                 <div class="ckyc-existing__thumbs">
                   @if (existing.ADDRESS_PROOF.previewUrl) {
                     <img
@@ -222,6 +227,17 @@
                   }
                 </div>
               }
+              @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>
@@ -299,9 +315,12 @@
                 <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 || existing.PHOTO_PROOF.previewUrlBack) {
+              @if ((existing.PHOTO_PROOF.previewUrl || existing.PHOTO_PROOF.previewUrlBack) && isImage('PHOTO_PROOF')) {
                 <div class="ckyc-existing__thumbs">
                   @if (existing.PHOTO_PROOF.previewUrl) {
                     <img
@@ -319,6 +338,17 @@
                   }
                 </div>
               }
+              @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>
@@ -393,11 +423,25 @@
                 <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) {
+              @if (existing.CLIENT_IMAGE.previewUrl && isImage('CLIENT_IMAGE')) {
                 <img [src]="existing.CLIENT_IMAGE.previewUrl" alt="Client photo" class="ckyc-existing__thumb" />
               }
+              @if (existing.CLIENT_IMAGE.previewUrl) {
+                <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
                 type="button"
@@ -448,15 +492,29 @@
                 <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) {
+              @if (existing.CLIENT_SIGNATURE.previewUrl && isImage('CLIENT_SIGNATURE')) {
                 <img
                   [src]="existing.CLIENT_SIGNATURE.previewUrl"
                   alt="Client signature"
                   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>

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

@@ -623,6 +623,35 @@
   }
 }
 
+/* Opens the uploaded artefact full size in a new tab. Sits directly under the thumbnail, and is
+   the only way to inspect a PDF - which cannot render as an inline <img>. */
+.ckyc-existing__view {
+  align-self: flex-start;
+  color: #1d6fd0;
+  border-color: #bcd8f5;
+  background: #fff;
+  font-size: 13px;
+  font-weight: 600;
+
+  &:hover {
+    background: #eef6ff;
+  }
+}
+
+/* Shown when a document row exists but its file could not be fetched from the content store,
+   so "Already available" is not silently misleading. */
+.ckyc-existing__warn {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: #fdecec;
+  border: 1px solid #f3c2c2;
+  color: #a12b2b;
+  font-size: 11px;
+  font-weight: 600;
+}
+
 .ckyc-existing {
   display: flex;
   flex-direction: column;

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

@@ -36,11 +36,41 @@ interface ExistingArtefact {
    *  already writes/reads for address proof; now shared by the photo/identity proof too. */
   description?: string;
   fileCount?: number;
+  /** Set when the stored file could not be fetched - the row exists but its content is gone. */
+  previewUnavailable?: boolean;
+  /** Stored MIME type, so the card knows whether it can render an inline thumbnail. */
+  mimeType?: string;
 }
 
 type ProofKind = 'ADDRESS_PROOF' | 'PHOTO_PROOF';
 type CkycDocKind = ProofKind | 'CLIENT_IMAGE' | 'CLIENT_SIGNATURE';
 
+/**
+ * Client-side upload guards, kept deliberately in step with the backend so a file that passes here
+ * is not rejected server-side:
+ *  - 5 MB matches `spring.servlet.multipart.max-file-size`
+ *  - the extension list is the intersection of the backend `fineract.content.regex-whitelist`
+ *    with what these cards can actually render.
+ * The dialog's `accept=` is only a file-picker hint and is trivially bypassed, so the real check
+ * runs here, on the file the dialog hands back, before anything is sent.
+ */
+const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
+const IMAGE_EXTENSIONS = [
+  'png',
+  'jpeg',
+  'jpg'
+];
+const DOCUMENT_EXTENSIONS = [
+  ...IMAGE_EXTENSIONS,
+  'pdf'
+];
+
+/** Cards that render an inline <img>, so a PDF would not display in them. */
+const IMAGE_ONLY_KINDS: CkycDocKind[] = [
+  'CLIENT_IMAGE',
+  'CLIENT_SIGNATURE'
+];
+
 @Component({
   selector: 'mifosx-ckyc-tab',
   templateUrl: './ckyc-tab.component.html',
@@ -150,6 +180,11 @@ export class CkycTabComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.route.parent.params.subscribe((params: any) => {
       this.clientId = params['clientId'];
+      // Angular reuses this component when only the clientId in the route changes, and
+      // loadExistingArtefacts() only ever *assigns* what it finds - it has no "not found" branch.
+      // Without clearing first, a client with no photo (or no signature, or no proof) keeps showing
+      // the previous client's card.
+      this.resetArtefactState();
       this.loadClientInfo();
       this.loadAccounts();
       this.loadCkycData();
@@ -157,6 +192,46 @@ export class CkycTabComponent implements OnInit, OnDestroy {
     });
   }
 
+  /**
+   * Returns every per-client card to its empty state, so nothing from the client just viewed can
+   * survive into the next one. Covers all four cards plus the details staged for an upload - a file
+   * or document number left over from another client must never be submitted against this one.
+   */
+  private resetArtefactState(): void {
+    this.revokePreviewUrls();
+    this.existing = {
+      ADDRESS_PROOF: { present: false },
+      PHOTO_PROOF: { present: false },
+      CLIENT_IMAGE: { present: false },
+      CLIENT_SIGNATURE: { present: false }
+    };
+    this.selectedProofType = { ADDRESS_PROOF: null, PHOTO_PROOF: null };
+    this.docFiles = {
+      ADDRESS_PROOF: { front: null, back: null },
+      PHOTO_PROOF: { front: null, back: null }
+    };
+    this.documentDetails = {
+      ADDRESS_PROOF: { documentKey: '', issueDate: null, expiryDate: null },
+      PHOTO_PROOF: { documentKey: '', issueDate: null, expiryDate: null }
+    };
+    this.clientImageFile = null;
+    this.clientSignatureFile = null;
+    this.uploadErrors = {
+      ADDRESS_PROOF: null,
+      PHOTO_PROOF: null,
+      CLIENT_IMAGE: null,
+      CLIENT_SIGNATURE: null
+    };
+  }
+
+  /** Frees the blob URLs held by the current cards before their references are dropped. */
+  private revokePreviewUrls(): void {
+    Object.values(this.existing).forEach((e) => {
+      if (e.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(e.previewUrl);
+      if (e.previewUrlBack?.startsWith('blob:')) URL.revokeObjectURL(e.previewUrlBack);
+    });
+  }
+
   private loadClientInfo(): void {
     this.route.parent.data.subscribe((data: any) => {
       const cv = data?.clientViewData;
@@ -280,19 +355,29 @@ export class CkycTabComponent implements OnInit, OnDestroy {
             present: true,
             source: 'Client registration',
             name: signatureDoc.fileName || 'Client signature',
-            documentId: signatureDoc.id
+            documentId: signatureDoc.id,
+            mimeType: signatureDoc.type
           };
-          // Fetch blob for preview
+          // Same endpoint getClientSignatureImage() uses, but opted out of the global error alert:
+          // a m_document row whose file is no longer in the content store returns 500, and the card
+          // below reports that itself. Without `silent` the interceptor pops an "Internal Server
+          // Error" modal on every page load, for a failure the user cannot act on.
           this.clientsService
-            .getClientSignatureImage(this.clientId, signatureDoc.id)
+            .downloadClientDocument(this.clientId, String(signatureDoc.id), true)
             .pipe(takeUntil(this.destroy$))
             .subscribe({
               next: (blob: any) => {
-                if (blob) {
+                if (blob && blob.size > 0) {
                   this.existing.CLIENT_SIGNATURE.previewUrl = URL.createObjectURL(blob);
+                } else {
+                  // A 200 with an empty body still means there is nothing to show. Without this the
+                  // card would claim "Already available" with no thumbnail and no explanation.
+                  this.existing.CLIENT_SIGNATURE.previewUnavailable = true;
                 }
               },
-              error: () => undefined
+              error: () => {
+                this.existing.CLIENT_SIGNATURE.previewUnavailable = true;
+              }
             });
         }
 
@@ -364,6 +449,7 @@ export class CkycTabComponent implements OnInit, OnDestroy {
         const list = Array.isArray(docs) ? docs : [];
         if (!list.length) return;
         this.existing[kind].fileCount = list.length;
+        this.existing[kind].previewUnavailable = false;
 
         const byNewest = (a: any, b: any) => b.id - a.id;
         const label = (d: any) => (d?.name || d?.fileName || '').toString();
@@ -372,6 +458,9 @@ export class CkycTabComponent implements OnInit, OnDestroy {
           [...list].filter((d: any) => /front/i.test(label(d))).sort(byNewest)[0] ||
           [...list].filter((d: any) => d.id !== back?.id).sort(byNewest)[0];
 
+        // A proof can be scanned to PDF, which no <img> can render - remember what was stored so the
+        // card offers "View document" instead of a broken thumbnail.
+        if (front) this.existing[kind].mimeType = front.type;
         if (front) this.downloadIdentifierDocPreview(identifierId, front.id, kind, 'front');
         if (back && back.id !== front?.id) this.downloadIdentifierDocPreview(identifierId, back.id, kind, 'back');
       });
@@ -388,12 +477,19 @@ export class CkycTabComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this.destroy$))
       .subscribe({
         next: (blob: any) => {
-          if (!blob) return;
+          if (!blob || blob.size === 0) {
+            this.existing[kind].previewUnavailable = true;
+            return;
+          }
           const url = URL.createObjectURL(blob);
           if (slot === 'front') this.existing[kind].previewUrl = url;
           else this.existing[kind].previewUrlBack = url;
         },
-        error: () => undefined
+        // The row exists but its file is gone from the content store. Saying so on the card beats
+        // showing "Already available" next to a blank space.
+        error: () => {
+          this.existing[kind].previewUnavailable = true;
+        }
       });
   }
 
@@ -452,6 +548,18 @@ export class CkycTabComponent implements OnInit, OnDestroy {
 
     ref.afterClosed().subscribe((result: CkycUploadDialogResult | null) => {
       if (!result) return;
+
+      // The dialog's `accept=` filter is only a hint to the file picker and is trivially bypassed,
+      // so the size/type guard runs here on what actually came back. Catching it now turns a raw
+      // server rejection into a message on the card.
+      const rejection =
+        this.validationError(result.front, kind) ?? (result.back ? this.validationError(result.back, kind) : null);
+      if (rejection) {
+        this.uploadErrors[kind] = rejection;
+        return;
+      }
+      this.uploadErrors[kind] = null;
+
       if (isProofKind) {
         const proofKind = kind as ProofKind;
         this.selectedProofType[proofKind] = result.proofType || null;
@@ -470,6 +578,66 @@ export class CkycTabComponent implements OnInit, OnDestroy {
     });
   }
 
+  /** Extensions a given card can both store and render. */
+  private allowedExtensions(kind: CkycDocKind): string[] {
+    return IMAGE_ONLY_KINDS.includes(kind) ? IMAGE_EXTENSIONS : DOCUMENT_EXTENSIONS;
+  }
+
+  /**
+   * Rejects a file the backend would refuse (or the card could not render) before it is uploaded,
+   * so the user gets a clear message instead of a raw server error. Returns null when the file is
+   * acceptable.
+   */
+  private validationError(file: File | null | undefined, kind: CkycDocKind): string | null {
+    if (!file) {
+      return null;
+    }
+    const allowed = this.allowedExtensions(kind);
+    const extension = (file.name.split('.').pop() || '').toLowerCase();
+
+    if (!allowed.includes(extension)) {
+      return `Unsupported file type ".${extension}". Allowed: ${allowed.map((e) => e.toUpperCase()).join(', ')}.`;
+    }
+    if (file.size > MAX_UPLOAD_BYTES) {
+      const mb = (file.size / (1024 * 1024)).toFixed(1);
+      return `File is ${mb} MB. The maximum allowed size is 5 MB.`;
+    }
+    if (file.size === 0) {
+      return 'The selected file is empty.';
+    }
+    return null;
+  }
+
+  /**
+   * True when the stored file can be shown as an inline thumbnail. A PDF cannot, so its card falls
+   * back to the "View document" button alone rather than rendering a broken image.
+   */
+  isImage(kind: CkycDocKind): boolean {
+    const entry = this.existing[kind];
+    // The profile image arrives as a `data:image/...;base64,` URL, which declares its own type -
+    // it has neither a stored MIME type nor a file extension for the checks below to read.
+    if (entry?.previewUrl?.startsWith('data:')) {
+      return entry.previewUrl.startsWith('data:image/');
+    }
+    if (entry?.mimeType) {
+      return entry.mimeType.startsWith('image/');
+    }
+    // Older rows can have no stored MIME type - fall back to the file extension.
+    const extension = (entry?.name?.split('.').pop() || '').toLowerCase();
+    return IMAGE_EXTENSIONS.includes(extension);
+  }
+
+  /**
+   * Opens the uploaded document full size in a new tab. Uses the blob already fetched for the
+   * thumbnail, so it works for PDFs too and costs no extra request.
+   */
+  openDocument(kind: CkycDocKind): void {
+    const url = this.existing[kind]?.previewUrl;
+    if (url) {
+      window.open(url, '_blank', 'noopener');
+    }
+  }
+
   /** Reads back the "Issue date: yyyy-MM-dd, Expiry date: yyyy-MM-dd" convention this tab (and
    *  client-india-address-step, for address proof) writes into the identifier's description. */
   private parseDescriptionDates(description: string | undefined): { issueDate: Date | null; expiryDate: Date | null } {
@@ -533,6 +701,10 @@ export class CkycTabComponent implements OnInit, OnDestroy {
     request$.pipe(takeUntil(this.destroy$)).subscribe({
       next: () => {
         this.uploading[documentType] = false;
+        // The card is gated on `present`; without this a successful upload left it reading
+        // "Not uploaded yet". uploadProofDocument() sets the same flag for the proof cards.
+        this.existing[key].present = true;
+        this.existing[key].source = this.existing[key].source || 'CKYC upload';
         this.alertService.alert({ type: 'success', message: 'Document uploaded successfully.' });
         this.refreshPreview(documentType);
       },
@@ -653,13 +825,22 @@ export class CkycTabComponent implements OnInit, OnDestroy {
     if (this.existing[staleKey].previewUrlBack?.startsWith('blob:')) {
       URL.revokeObjectURL(this.existing[staleKey].previewUrlBack!);
     }
+    // The upload that triggered this refresh is what repairs a previously missing file, so the
+    // warning has to be cleared before the re-read - otherwise a fixed card keeps the old badge.
+    this.existing[staleKey].previewUrl = undefined;
+    this.existing[staleKey].previewUrlBack = undefined;
+    this.existing[staleKey].previewUnavailable = false;
     switch (documentType) {
       case 'CLIENT_IMAGE':
         this.clientsService
           .getClientProfileImage(this.clientId)
           .pipe(takeUntil(this.destroy$))
           .subscribe((photo: any) => {
-            if (photo) this.existing.CLIENT_IMAGE.previewUrl = photo;
+            if (photo) {
+              this.existing.CLIENT_IMAGE.previewUrl = photo;
+            } else {
+              this.existing.CLIENT_IMAGE.previewUnavailable = true;
+            }
           });
         break;
       case 'CLIENT_SIGNATURE':
@@ -672,11 +853,21 @@ export class CkycTabComponent implements OnInit, OnDestroy {
               ?.sort((a: any, b: any) => b.id - a.id)?.[0];
             if (!doc) return;
             this.existing.CLIENT_SIGNATURE.documentId = doc.id;
+            this.existing.CLIENT_SIGNATURE.mimeType = doc.type;
             this.clientsService
-              .getClientSignatureImage(this.clientId, doc.id)
+              .downloadClientDocument(this.clientId, String(doc.id), true)
               .pipe(takeUntil(this.destroy$))
-              .subscribe((blob: any) => {
-                if (blob) this.existing.CLIENT_SIGNATURE.previewUrl = URL.createObjectURL(blob);
+              .subscribe({
+                next: (blob: any) => {
+                  if (blob && blob.size > 0) {
+                    this.existing.CLIENT_SIGNATURE.previewUrl = URL.createObjectURL(blob);
+                  } else {
+                    this.existing.CLIENT_SIGNATURE.previewUnavailable = true;
+                  }
+                },
+                error: () => {
+                  this.existing.CLIENT_SIGNATURE.previewUnavailable = true;
+                }
               });
           });
         break;
@@ -690,10 +881,6 @@ export class CkycTabComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
-    // Release object URLs
-    Object.values(this.existing).forEach((e) => {
-      if (e.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(e.previewUrl);
-      if (e.previewUrlBack?.startsWith('blob:')) URL.revokeObjectURL(e.previewUrlBack);
-    });
+    this.revokePreviewUrls();
   }
 }

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

@@ -1207,9 +1207,7 @@
                     </div>
 
                     @if (!docScansLoading && !docScans.front && !docScans.back) {
-                      <div class="kyc-doc-scans__empty">
-                        No scan is on file for this document. Upload one below.
-                      </div>
+                      <div class="kyc-doc-scans__empty">No scan is on file for this document. Upload one below.</div>
                     }
 
                     <div class="kyc-doc-scans__sides">

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

@@ -175,7 +175,10 @@ export class KycTabComponent implements OnInit, OnDestroy {
   docScans: { front: DocScanSide | null; back: DocScanSide | null } = { front: null, back: null };
 
   /** The two sides, in display order, so the template loops rather than repeating itself. */
-  readonly docScanSlots: ('front' | 'back')[] = ['front', 'back'];
+  readonly docScanSlots: ('front' | 'back')[] = [
+    'front',
+    'back'
+  ];
 
   docScanOf(slot: 'front' | 'back') {
     return this.docScans[slot];
@@ -1417,7 +1420,10 @@ I further confirm that:
       this.docScansLoading = false;
       // This runs again after every replace, so the previews being thrown away are revoked
       // rather than left holding their blobs.
-      for (const old of [this.docScans.front, this.docScans.back]) {
+      for (const old of [
+        this.docScans.front,
+        this.docScans.back
+      ]) {
         if (old?.previewUrl) {
           URL.revokeObjectURL(old.previewUrl);
         }
@@ -1459,7 +1465,10 @@ I further confirm that:
       }
 
       this.docScans = sides;
-      for (const key of ['front', 'back'] as const) {
+      for (const key of [
+        'front',
+        'back'
+      ] as const) {
         if (sides[key]) {
           this.loadScanPreview(sides[key]!);
         }
@@ -1520,7 +1529,9 @@ I further confirm that:
       error: (err: any) => {
         this.docScanUploading = null;
         this.docScanError =
-          err?.error?.defaultUserMessage || err?.error?.developerMessage || `Could not replace the ${label.toLowerCase()} side.`;
+          err?.error?.defaultUserMessage ||
+          err?.error?.developerMessage ||
+          `Could not replace the ${label.toLowerCase()} side.`;
       }
     });
   }
@@ -1703,7 +1714,10 @@ I further confirm that:
     this.destroy$.next();
     this.destroy$.complete();
     // Object URLs are held by the browser until revoked, so the scan blobs would outlive the tab.
-    for (const side of [this.docScans.front, this.docScans.back]) {
+    for (const side of [
+      this.docScans.front,
+      this.docScans.back
+    ]) {
       if (side?.previewUrl) {
         URL.revokeObjectURL(side.previewUrl);
       }

src/app/clients/clients.service.ts

@@ -569,8 +569,19 @@ export class ClientsService {
     return this.http.get(`/clients/${clientId}/documents`);
   }
 
-  downloadClientDocument(parentEntityId: string, documentId: string) {
-    return this.http.get(`/clients/${parentEntityId}/documents/${documentId}/attachment`, { responseType: 'blob' });
+  /**
+   * Fetches a client document's stored file.
+   *
+   * `silent` opts the request out of ErrorHandlerInterceptor's alert. Pass it when the caller
+   * renders its own failure state - notably thumbnail fetches, where a `m_document` row whose file
+   * is no longer in the content store returns 500 and would otherwise pop a modal the user can do
+   * nothing about. The interceptor still rethrows, so the caller's error callback continues to run.
+   */
+  downloadClientDocument(parentEntityId: string, documentId: string, silent = false) {
+    return this.http.get(`/clients/${parentEntityId}/documents/${documentId}/attachment`, {
+      responseType: 'blob',
+      ...(silent ? { context: new HttpContext().set(SILENT_HTTP_ERROR, true) } : {})
+    });
   }
 
   uploadClientDocument(clientId: string, documentData: any) {
@@ -992,12 +1003,28 @@ export class ClientsService {
     return this.http.post(`/clients/${clientId}/entityclassification/${category}`, data);
   }
 
-  getClientCkyc(clientId: string): Observable<any> {
-    return this.http.get(`/clients/${clientId}/ckyc`);
+  /**
+   * Uploads a single CKYC artefact against the client, using the platform's generic document
+   * endpoint (DocumentApiResource, POST /v1/{entityType}/{entityId}/documents). There is no
+   * CKYC-specific document API on the backend - the earlier `/clients/{id}/ckyc/documents` path
+   * was never implemented and returned 404.
+   *
+   * The multipart body must carry `file`, `name` and `description`; the caller builds those so the
+   * stored document stays identifiable by CKYC artefact type. See ckyc-tab.component.ts.
+   */
+  uploadCkycDocument(clientId: string, formData: FormData): Observable<any> {
+    return this.http.post(`/clients/${clientId}/documents`, formData);
   }
 
-  uploadCkycDocument(clientId: string, formData: FormData): Observable<any> {
-    return this.http.post(`/clients/${clientId}/ckyc/documents`, formData);
+  /**
+   * Replaces the content of an existing client document in place (DocumentApiResource PUT
+   * /v1/{entityType}/{entityId}/documents/{documentId}), keeping the same document id.
+   *
+   * Used by the CKYC screen's "Upload new version" so a re-upload updates the existing artefact
+   * rather than adding another row. Takes the same multipart body as the create call.
+   */
+  replaceClientDocument(clientId: string, documentId: string, formData: FormData): Observable<any> {
+    return this.http.put(`/clients/${clientId}/documents/${documentId}`, formData);
   }
 
   /**

src/app/clients/shared/kyc-document-update-dialog/kyc-document-update-dialog.component.html

@@ -109,13 +109,7 @@
               </button>
             }
           </div>
-          <input
-            #sideInput
-            type="file"
-            hidden
-            accept="image/*,application/pdf"
-            (change)="onFilePicked($event, slot)"
-          />
+          <input #sideInput type="file" hidden accept="image/*,application/pdf" (change)="onFilePicked($event, slot)" />
         </div>
       }
     </div>

src/app/fiu/fiu.component.html

@@ -167,7 +167,9 @@
           </div>
           <!-- The 15th of the month after the one being reported, worked out rather than fixed at
                15 Feb 2026 — a due date that never moves stops being a due date. -->
-          <div class="dc-meta">Due: <strong>{{ ctrDueDateLabel }}</strong></div>
+          <div class="dc-meta">
+            Due: <strong>{{ ctrDueDateLabel }}</strong>
+          </div>
           <button class="dc-btn" (click)="showTab('ctr')"><fa-icon icon="external-link-alt"></fa-icon> Open</button>
         </div>
         <div class="dc-card">
@@ -220,9 +222,7 @@
         @if (ctrLinesLoading) {
           <div class="fiu-note">Loading the generated CTR lines…</div>
         } @else if (ctrLinesError) {
-          <div class="fiu-note fiu-note--warn">
-            <fa-icon icon="exclamation-triangle"></fa-icon> {{ ctrLinesError }}
-          </div>
+          <div class="fiu-note fiu-note--warn"><fa-icon icon="exclamation-triangle"></fa-icon> {{ ctrLinesError }}</div>
         } @else if (!ctrTxns.length) {
           <div class="fiu-note fiu-note--warn">
             <fa-icon icon="exclamation-triangle"></fa-icon>

src/app/fiu/fiu.component.ts

@@ -661,7 +661,8 @@ export class FiuComponent implements OnInit {
         this.ctrLinesLoading = false;
         this.ctrTxns = [];
         this.ctrLinesError =
-          err?.error?.defaultUserMessage || 'Could not load the generated CTR lines. Generate a report for the month first.';
+          err?.error?.defaultUserMessage ||
+          'Could not load the generated CTR lines. Generate a report for the month first.';
       }
     });
   }
@@ -1689,7 +1690,9 @@ export class FiuComponent implements OnInit {
   private writeLiveStrXml(cases: any[], filename: string): void {
     const xml: string[] = [];
     xml.push('<?xml version="1.0" encoding="UTF-8"?>');
-    xml.push(`<STR xmlns="http://fiuind.gov.in/finnet2/str" reportingMonth="${this.escapeXml(this.reportingMonthLabel)}">`);
+    xml.push(
+      `<STR xmlns="http://fiuind.gov.in/finnet2/str" reportingMonth="${this.escapeXml(this.reportingMonthLabel)}">`
+    );
     xml.push(`  <REBank name="${this.escapeXml(this.bank.name)}" />`);
     if (this.principalOfficerName) {
       xml.push(`  <PrincipalOfficer name="${this.escapeXml(this.principalOfficerName)}" />`);

src/app/risk-review/risk-review-report.component.ts

@@ -243,7 +243,12 @@ export class RiskReviewReportComponent implements OnInit {
         )
       )
     ).subscribe((results) => {
-      const byClient = new Map(results.map((r) => [r.id, r]));
+      const byClient = new Map(
+        results.map((r) => [
+          r.id,
+          r
+        ])
+      );
       this.liveAlerts = rows.map((r) => {
         const info = byClient.get(r.clientId);
         return {

src/app/tasks/checker-inbox-and-tasks-tabs/pending-savings-products/product-edit-diff-dialog/product-edit-diff-dialog.component.ts

@@ -18,6 +18,7 @@ import {
 import { MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { humanizeKey, sameValue, toIsoDate } from 'app/tasks/command-diff.util';
 
 interface DiffRow {
   label: string;
@@ -106,9 +107,9 @@ export class ProductEditDiffDialogComponent implements OnInit {
     this.rows = Object.keys(proposed)
       .filter((key) => !ProductEditDiffDialogComponent.IGNORED_KEYS.has(key))
       .map((key) => ({ key, originalValue: this.originalValueFor(key, original) }))
-      .filter(({ key, originalValue }) => !this.sameValue(originalValue, proposed[key]))
+      .filter(({ key, originalValue }) => !sameValue(originalValue, proposed[key]))
       .map(({ key, originalValue }) => ({
-        label: this.humanizeKey(key),
+        label: humanizeKey(key),
         original: this.displayValue(originalValue, key, original),
         proposed: this.displayValue(proposed[key], key, original)
       }))
@@ -173,58 +174,11 @@ export class ProductEditDiffDialogComponent implements OnInit {
    * carries just the id, so a raw comparison reports every such field as changed. Comparing on the id
    * (and coercing numeric strings) keeps the list to fields whose value genuinely moved.
    */
-  private sameValue(a: any, b: any): boolean {
-    return JSON.stringify(this.normalize(a)) === JSON.stringify(this.normalize(b));
-  }
-
-  private normalize(value: any): any {
-    if (value === null || value === undefined || value === '') {
-      return null;
-    }
-    // Dates come back from the product as [yyyy, m, d] but are submitted as "yyyy-MM-dd"; without
-    // folding both to one form every date field reads as changed on every edit.
-    const asDate = this.toIsoDate(value);
-    if (asDate !== null) {
-      return asDate;
-    }
-    if (Array.isArray(value)) {
-      // An empty array and an absent value mean the same thing here.
-      return value.length === 0 ? null : value.map((item) => this.normalize(item));
-    }
-    if (typeof value === 'object') {
-      if (value.id !== undefined) {
-        return this.normalize(value.id);
-      }
-      return Object.keys(value).length === 0 ? null : JSON.stringify(value);
-    }
-    if (typeof value === 'boolean') {
-      return value;
-    }
-    const asNumber = Number(value);
-    return Number.isNaN(asNumber) ? value : asNumber;
-  }
-
-  /** Recognises both date shapes the API uses and returns "yyyy-MM-dd", or null if not a date. */
-  private toIsoDate(value: any): string | null {
-    if (Array.isArray(value) && value.length === 3 && value.every((part) => typeof part === 'number')) {
-      const [
-        year,
-        month,
-        day
-      ] = value;
-      return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
-    }
-    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
-      return value;
-    }
-    return null;
-  }
-
   private displayValue(value: any, fieldKey: string, template: any): string {
     if (value === null || value === undefined || value === '') {
       return '—';
     }
-    const asDate = this.toIsoDate(value);
+    const asDate = toIsoDate(value);
     if (asDate !== null) {
       return asDate;
     }
@@ -248,14 +202,4 @@ export class ProductEditDiffDialogComponent implements OnInit {
     // A bare id that names an option -- show the option's label, not the number.
     return this.resolveOptionLabel(fieldKey, value, template) ?? String(value);
   }
-
-  /** camelCase / PascalCase field name to a spaced, capitalised label. */
-  private humanizeKey(key: string): string {
-    const spaced = key
-      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-      .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
-      .replace(/[_-]+/g, ' ')
-      .trim();
-    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
-  }
 }

src/app/tasks/command-diff.util.ts

@@ -0,0 +1,332 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/**
+ * Shared comparison helpers for maker-checker review screens.
+ *
+ * Extracted verbatim from ProductEditDiffDialogComponent, which had already solved the awkward part:
+ * a naive comparison of a submitted command against the stored entity reports almost every field as
+ * changed, because the two sides encode the same value differently. The normalisation below is what
+ * keeps a diff down to the fields that genuinely moved:
+ *
+ *  - dates arrive as `[yyyy, m, d]` from the API but as `"yyyy-MM-dd"` in the payload
+ *  - option/enum fields come back as `{ id, value }` but are submitted as a bare id
+ *  - `null`, `undefined`, `''`, `[]` and `{}` all mean "not set"
+ *  - numeric strings and numbers are the same value
+ *
+ * Product-specific concerns (GL account mappings, `<field>Options` lookups, currency aliases) stay in
+ * the product dialog - they have no meaning for a role or a client.
+ */
+
+/**
+ * Keys that are never a setting a checker reviews, in two groups.
+ *
+ * The first is request plumbing - how the command was encoded, plus the identifiers naming the record
+ * it applies to, both of which the screen already shows.
+ *
+ * The second is values derived from another field rather than entered. An age is computed from
+ * `dateOfBirth` at the moment it is read, so a command submitted last month always disagrees with the
+ * entity read today - a difference caused by the calendar, not by the maker. The field the maker can
+ * actually change (`dateOfBirth`) is still compared, so a real edit is never hidden by this.
+ */
+export const COMMAND_NOISE_KEYS: ReadonlySet<string> = new Set([
+  // request plumbing
+  'locale',
+  'dateFormat',
+  'monthDayFormat',
+  'id',
+  'productId',
+  'savingsProductId',
+  // derived from dateOfBirth
+  'ageYears',
+  'ageMonths',
+  'ageDays',
+  'isMinor',
+  'isSeniorCitizen'
+]);
+
+const MONTH_NAMES = [
+  'january',
+  'february',
+  'march',
+  'april',
+  'may',
+  'june',
+  'july',
+  'august',
+  'september',
+  'october',
+  'november',
+  'december'
+];
+
+/**
+ * Recognises every date shape these two sides use and returns "yyyy-MM-dd", or null if not a date.
+ *
+ * Three encodings are in play for the same day:
+ *  - `[yyyy, m, d]`      what the read APIs return
+ *  - `"yyyy-MM-dd"`      what some forms submit
+ *  - `"29 June 2026"`    what Fineract commands carry, per the payload's own `dateFormat`
+ *
+ * Missing the third one makes every dated field read as changed on every request, which is exactly
+ * the noise this whole comparison exists to remove.
+ */
+export function toIsoDate(value: any): string | null {
+  if (Array.isArray(value) && value.length === 3 && value.every((part) => typeof part === 'number')) {
+    const [
+      year,
+      month,
+      day
+    ] = value;
+    return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+  }
+  if (typeof value !== 'string') {
+    return null;
+  }
+  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return value;
+  }
+  const spelled = /^(\d{1,2})\s+([A-Za-z]+)\s+(\d{4})$/.exec(value.trim());
+  if (spelled) {
+    const day = Number(spelled[1]);
+    const monthName = spelled[2].toLowerCase();
+    const monthIndex = MONTH_NAMES.findIndex((name) => name === monthName || name.slice(0, 3) === monthName);
+    if (monthIndex !== -1) {
+      return `${spelled[3]}-${String(monthIndex + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    }
+  }
+  return null;
+}
+
+/**
+ * Folds a value into the one form both sides of a comparison can be measured in. See the class
+ * comment above for why each case exists.
+ */
+export function normalizeValue(value: any): any {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+  const asDate = toIsoDate(value);
+  if (asDate !== null) {
+    return asDate;
+  }
+  if (Array.isArray(value)) {
+    return value.length === 0 ? null : value.map((item) => normalizeValue(item));
+  }
+  if (typeof value === 'object') {
+    if (value.id !== undefined) {
+      return normalizeValue(value.id);
+    }
+    return Object.keys(value).length === 0 ? null : JSON.stringify(value);
+  }
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  const asNumber = Number(value);
+  return Number.isNaN(asNumber) ? value : asNumber;
+}
+
+/**
+ * True when two values mean the same thing.
+ *
+ * The structural comparison handles most cases, but the two sides of a maker-checker review come
+ * from different APIs that expand the same option differently: `/audits/{id}` returns an enum as its
+ * label ("Daily") while the entity's own read API returns `{ id, code, value }`. Those normalise to
+ * different things yet are the same setting, so a second pass asks the question that actually
+ * matters to a checker - would these two render identically on screen? If they would, there is
+ * nothing to report.
+ */
+export function sameValue(a: any, b: any): boolean {
+  if (JSON.stringify(normalizeValue(a)) === JSON.stringify(normalizeValue(b))) {
+    return true;
+  }
+  return displayScalar(a) === displayScalar(b);
+}
+
+/** camelCase / PascalCase / snake_case field name to a spaced, capitalised label. */
+export function humanizeKey(key: string): string {
+  const spaced = String(key ?? '')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
+/**
+ * Renders one value for display, without any entity-specific option lookup. Arrays and objects are
+ * summarised rather than dumped - a review row states *that* a collection changed; the detail belongs
+ * in the entity's own screen.
+ */
+export function displayScalar(value: any): string {
+  if (value === null || value === undefined || value === '') {
+    return '—';
+  }
+  const asDate = toIsoDate(value);
+  if (asDate !== null) {
+    return asDate;
+  }
+  if (Array.isArray(value)) {
+    return value.length === 0 ? '—' : `${value.length} item${value.length === 1 ? '' : 's'}`;
+  }
+  if (typeof value === 'object') {
+    if (Object.keys(value).length === 0) {
+      return '—';
+    }
+    if (value.name && value.glCode) {
+      return `${value.name} (${value.glCode})`;
+    }
+    return value.value ?? value.name ?? value.code ?? (value.id !== undefined ? String(value.id) : '—');
+  }
+  if (typeof value === 'boolean') {
+    return value ? 'Yes' : 'No';
+  }
+  return String(value);
+}
+
+/**
+ * Sections a CREATE payload is bucketed into, so a checker reads a submitted product the way it was
+ * entered rather than as one flat run of fields. Matching is by key name, tried in order, so the
+ * grouping works for any entity - a role or a GL account simply lands everything in "Details".
+ */
+const CREATE_SECTIONS: { title: string; matches: RegExp }[] = [
+  { title: 'Accounting', matches: /account(ing)?|glaccount|writeOff|receivable|payable|suspense|escheat|fund/i },
+  { title: 'Charges & Fees', matches: /charge|fee|penalt|tax/i },
+  {
+    title: 'Interest & Terms',
+    matches: /interest|term|period|lockin|compound|annualis|maturity|deposit(Amount|Min|Max)/i
+  },
+  { title: 'Balances & Limits', matches: /balance|overdraft|limit|amount|minimum|maximum|multiplesOf|decimal/i },
+  { title: 'Facilities & Features', matches: /facility|facilities|nominee|nomination|alert|banking|card|withdrawal/i }
+];
+
+const CREATE_DEFAULT_SECTION = 'General';
+
+/** One named group of payload keys for a CREATE review. */
+export interface CreateSection {
+  title: string;
+  keys: string[];
+}
+
+/**
+ * Buckets a CREATE payload's keys into readable sections. Keys the sections do not recognise fall
+ * into "Details", which is also where everything lands for entities that have no product-like shape.
+ * Empty sections are dropped, and section order is stable so the same entity always reads the same.
+ */
+export function groupCreateFields(payload: Record<string, any>, ignoredKeys?: ReadonlySet<string>): CreateSection[] {
+  const ignored = ignoredKeys ?? COMMAND_NOISE_KEYS;
+  const buckets = new Map<string, string[]>();
+  buckets.set(CREATE_DEFAULT_SECTION, []);
+  CREATE_SECTIONS.forEach((section) => buckets.set(section.title, []));
+
+  Object.keys(payload ?? {})
+    .filter((key) => !ignored.has(key))
+    .forEach((key) => {
+      const section = CREATE_SECTIONS.find((candidate) => candidate.matches.test(key));
+      buckets.get(section ? section.title : CREATE_DEFAULT_SECTION).push(key);
+    });
+
+  const ordered = [
+    CREATE_DEFAULT_SECTION,
+    ...CREATE_SECTIONS.map((section) => section.title)
+  ];
+
+  return ordered
+    .map((title) => ({ title, keys: buckets.get(title) ?? [] }))
+    .filter((section) => section.keys.length > 0);
+}
+
+/**
+ * Reads the current value for a payload key, allowing for the two naming conventions the read APIs
+ * use that the command payload does not:
+ *
+ *  - lifecycle dates live under `timeline` (`timeline.submittedOnDate`)
+ *  - a payload `<field>Id` is usually the expanded `<field>` object on the entity
+ *
+ * Returns `undefined` when the key cannot be located at all, which the caller reports honestly
+ * rather than claiming the field was newly added.
+ */
+export function currentValueFor(current: any, key: string): any {
+  if (current && key in current) {
+    return current[key];
+  }
+  if (current?.timeline && key in current.timeline) {
+    return current.timeline[key];
+  }
+  if (key.endsWith('Id')) {
+    const base = key.slice(0, -2);
+    if (current && base in current) {
+      return current[base];
+    }
+  }
+  return undefined;
+}
+
+/**
+ * How a single field moved between the stored entity and the submitted command.
+ *
+ * `SUBMITTED` is not a change: it marks a field the command carries but which could not be located
+ * on the entity, so no before-value exists to compare against. Calling those ADDED would tell the
+ * checker something untrue.
+ */
+export type ChangeKind = 'ADDED' | 'REMOVED' | 'MODIFIED' | 'SUBMITTED';
+
+export interface CommandChange {
+  label: string;
+  kind: ChangeKind;
+  oldValue: string;
+  newValue: string;
+}
+
+/**
+ * Compares a submitted command payload against the entity as it stands today, returning only the
+ * fields that actually moved.
+ *
+ * Only keys present in the payload are considered: a command says what the maker submitted, so a
+ * field absent from it was not part of the request and must not be reported as removed.
+ */
+export function diffCommandAgainstEntity(
+  submitted: Record<string, any>,
+  current: Record<string, any>,
+  options?: { ignoredKeys?: ReadonlySet<string>; currentValueFor?: (key: string) => any }
+): CommandChange[] {
+  const ignored = options?.ignoredKeys ?? COMMAND_NOISE_KEYS;
+  const readCurrent = options?.currentValueFor ?? ((key: string) => currentValueFor(current, key));
+  const knownOnEntity = (key: string) =>
+    !!current && (key in current || (!!current.timeline && key in current.timeline) || `${key}Id` in current);
+
+  const rank: Record<ChangeKind, number> = { MODIFIED: 0, ADDED: 1, REMOVED: 2, SUBMITTED: 3 };
+
+  return (
+    Object.keys(submitted ?? {})
+      .filter((key) => !ignored.has(key))
+      .map((key) => ({ key, before: readCurrent(key), after: submitted[key] }))
+      .filter(({ before, after }) => !sameValue(before, after))
+      .map(({ key, before, after }) => {
+        const hadBefore = normalizeValue(before) !== null;
+        const hasAfter = normalizeValue(after) !== null;
+        // No before-value *and* no such field on the entity means there is nothing to compare, which is
+        // different from a field that exists and was empty.
+        const kind: ChangeKind = !hadBefore
+          ? knownOnEntity(key) || !!options?.currentValueFor
+            ? 'ADDED'
+            : 'SUBMITTED'
+          : !hasAfter
+            ? 'REMOVED'
+            : 'MODIFIED';
+        return {
+          label: humanizeKey(key),
+          kind,
+          oldValue: displayScalar(before),
+          newValue: displayScalar(after)
+        };
+      })
+      // Real changes first, then the fields that could only be reported as submitted.
+      .sort((a, b) => rank[a.kind] - rank[b.kind] || a.label.localeCompare(b.label))
+  );
+}

src/app/tasks/maker-checker-entity-fetch.ts

@@ -0,0 +1,205 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Observable } from 'rxjs';
+
+import { ProductsService } from 'app/products/products.service';
+import { ClientsService } from 'app/clients/clients.service';
+import { SavingsService } from 'app/savings/savings.service';
+import { FixedDepositsService } from 'app/deposits/fixed-deposits/fixed-deposits.service';
+import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
+import { SystemService } from 'app/system/system.service';
+import { AccountingService } from 'app/accounting/accounting.service';
+import { UsersService } from 'app/users/users.service';
+
+/**
+ * The services a maker-checker review screen needs in order to read an entity's current state.
+ * Passed in rather than injected here so this stays a plain lookup table with no Angular wiring.
+ */
+export interface EntityFetchServices {
+  products: ProductsService;
+  clients: ClientsService;
+  savings: SavingsService;
+  fixedDeposits: FixedDepositsService;
+  recurringDeposits: RecurringDepositsService;
+  system: SystemService;
+  accounting: AccountingService;
+  users: UsersService;
+}
+
+/**
+ * Maps a maker-checker `entityName` to the existing API that returns that entity as it stands today,
+ * so an UPDATE can be shown as OLD -> NEW and a DELETE can show what is about to be removed.
+ *
+ * Every entry reuses an API the application already calls elsewhere - nothing new was added on the
+ * backend. Products are fetched with `template=true` because that response also carries the option
+ * lists (`accountingRuleOptions`, `interestCompoundingPeriodTypeOptions`, ...) the payload's bare ids
+ * refer to.
+ *
+ * An entity absent from this table simply has no current-state lookup; callers fall back to rendering
+ * the submitted payload, which is what every entity did before this table existed.
+ */
+const ENTITY_FETCHERS: Record<string, (id: string, s: EntityFetchServices) => Observable<any>> = {
+  // ---- Products ----------------------------------------------------------------
+  SAVINGSPRODUCT: (id, s) => s.products.getSavingProduct(id, true),
+  CURRENTPRODUCT: (id, s) => s.products.getCurrentProduct(id, true),
+  SHAREPRODUCT: (id, s) => s.products.getShareProduct(id, true),
+  LOANPRODUCT: (id, s) => s.products.getLoanProduct(id, true),
+  FIXEDDEPOSITPRODUCT: (id, s) => s.products.getFixedDepositProductAndTemplate(id),
+  RECURRINGDEPOSITPRODUCT: (id, s) => s.products.getRecurringDepositProduct(id, true),
+  CHARGE: (id, s) => s.products.getCharge(id, true),
+
+  // ---- Accounts ----------------------------------------------------------------
+  SAVINGSACCOUNT: (id, s) => s.savings.getSavingsAccountData(id),
+  // Deposit accounts must be read through their own endpoints: /savingsaccounts omits the deposit
+  // terms (depositAmount, depositPeriod, charts, ...), so comparing against it reports every one of
+  // those as newly added.
+  FIXEDDEPOSITACCOUNT: (id, s) => s.fixedDeposits.getFixedDepositsAccountData(id),
+  RECURRINGDEPOSITACCOUNT: (id, s) => s.recurringDeposits.getRecurringDepositsAccountAndTemplate(id),
+
+  // ---- People and administration ----------------------------------------------
+  CLIENT: (id, s) => s.clients.getClientData(id, true),
+  ROLE: (id, s) => s.system.getRole(id),
+  USER: (id, s) => s.users.getUser(id),
+  GLACCOUNT: (id, s) => s.accounting.getGlAccount(id, true)
+};
+
+/** Whether this screen can read the entity's current state, and therefore produce a real diff. */
+export function canFetchEntity(entityName: string | undefined | null): boolean {
+  return !!ENTITY_FETCHERS[(entityName ?? '').toUpperCase()];
+}
+
+/**
+ * Returns the entity as it stands today, or null when there is no mapping for it or no resource to
+ * read - in which case the caller keeps showing the submitted payload rather than failing.
+ */
+export function fetchCurrentEntity(
+  entityName: string | undefined | null,
+  resourceId: string | number | undefined | null,
+  services: EntityFetchServices
+): Observable<any> | null {
+  const fetcher = ENTITY_FETCHERS[(entityName ?? '').toUpperCase()];
+  if (!fetcher || resourceId === null || resourceId === undefined || resourceId === '') {
+    return null;
+  }
+  return fetcher(String(resourceId), services);
+}
+
+/**
+ * The handful of fields worth showing for a DELETE, whose payload is empty - the checker needs to
+ * recognise *which* record is about to go, not read its full configuration. Keys are tried in order
+ * and the first present one wins; anything not listed falls back to a generic set.
+ */
+const DELETE_SUMMARY_KEYS: Record<string, string[]> = {
+  SAVINGSPRODUCT: [
+    'name',
+    'shortName',
+    'description',
+    'currency'
+  ],
+  CURRENTPRODUCT: [
+    'name',
+    'shortName',
+    'description',
+    'currency'
+  ],
+  SHAREPRODUCT: [
+    'name',
+    'shortName',
+    'description',
+    'currency'
+  ],
+  LOANPRODUCT: [
+    'name',
+    'shortName',
+    'description',
+    'currency'
+  ],
+  FIXEDDEPOSITPRODUCT: [
+    'name',
+    'shortName',
+    'description',
+    'currency'
+  ],
+  RECURRINGDEPOSITPRODUCT: [
+    'name',
+    'shortName',
+    'description',
+    'currency'
+  ],
+  CHARGE: [
+    'name',
+    'currency',
+    'amount',
+    'chargeAppliesTo',
+    'chargeTimeType'
+  ],
+  CLIENT: [
+    'displayName',
+    'accountNo',
+    'officeName',
+    'status',
+    'mobileNo',
+    'emailAddress'
+  ],
+  SAVINGSACCOUNT: [
+    'accountNo',
+    'clientName',
+    'savingsProductName',
+    'status',
+    'currency'
+  ],
+  FIXEDDEPOSITACCOUNT: [
+    'accountNo',
+    'clientName',
+    'savingsProductName',
+    'status',
+    'currency'
+  ],
+  RECURRINGDEPOSITACCOUNT: [
+    'accountNo',
+    'clientName',
+    'savingsProductName',
+    'status',
+    'currency'
+  ],
+  ROLE: [
+    'name',
+    'description',
+    'disabled'
+  ],
+  USER: [
+    'username',
+    'firstname',
+    'lastname',
+    'email',
+    'officeName'
+  ],
+  GLACCOUNT: [
+    'name',
+    'glCode',
+    'type',
+    'usage',
+    'description'
+  ]
+};
+
+const GENERIC_SUMMARY_KEYS = [
+  'name',
+  'displayName',
+  'accountNo',
+  'shortName',
+  'username',
+  'description',
+  'status'
+];
+
+/** Field names worth surfacing for the entity about to be deleted. */
+export function deleteSummaryKeys(entityName: string | undefined | null): string[] {
+  return DELETE_SUMMARY_KEYS[(entityName ?? '').toUpperCase()] ?? GENERIC_SUMMARY_KEYS;
+}

src/app/tasks/view-checker-inbox/view-checker-inbox.component.html

@@ -39,9 +39,6 @@
           <button type="button" class="vci-btn vci-btn--approve" (click)="approveChecker()">
             <fa-icon icon="check"></fa-icon><span>{{ 'labels.buttons.Approve' | translate }}</span>
           </button>
-          <button type="button" class="vci-btn vci-btn--delete" (click)="deleteChecker()">
-            <fa-icon icon="trash"></fa-icon><span>{{ 'labels.buttons.Delete' | translate }}</span>
-          </button>
           <button type="button" class="vci-btn vci-btn--reject" (click)="rejectChecker()">
             <fa-icon icon="times"></fa-icon><span>{{ 'labels.buttons.Reject' | translate }}</span>
           </button>
@@ -74,7 +71,9 @@
             </dd>
           </div>
           <div class="vci-kv">
-            <dt>{{ 'labels.inputs.Entity' | translate }}</dt>
+            <!-- Not `labels.inputs.Entity`: this project maps that key to "Non-Individual" for the client
+                 legal-form screens, which reads as nonsense against a value like GLACCOUNT. -->
+            <dt>{{ 'labels.inputs.Entity Type' | translate }}</dt>
             <dd>{{ checkerInboxDetail.entityName }}</dd>
           </div>
           @if (checkerInboxDetail.resourceId) {
@@ -108,9 +107,61 @@
         </dl>
       </div>
 
-      @if (displayJSONData) {
+      @if (comparing) {
+        <div class="vci-loading">
+          <fa-icon icon="spinner" class="vci-loading__ic"></fa-icon>
+          <span>Comparing against current values…</span>
+        </div>
+      }
+
+      <!-- UPDATE: only the fields this command actually moves, as OLD -> NEW. -->
+      @if (showChanges) {
         <div class="vci-section">
-          <div class="vci-section__title">{{ 'labels.heading.Command' | translate }}</div>
+          <div class="vci-section__title">Changes Requested ({{ changes.length }})</div>
+          @if (changes.length === 0) {
+            <p class="vci-nochange">This request does not change any value.</p>
+          } @else {
+            <div class="vci-changes">
+              @for (change of changes; track $index) {
+                <div class="vci-change">
+                  <div class="vci-change__head">
+                    <span class="vci-change__label">{{ change.label }}</span>
+                    <span class="vci-change__kind vci-change__kind--{{ change.kind.toLowerCase() }}">{{
+                      change.kind
+                    }}</span>
+                  </div>
+                  <div class="vci-change__values">
+                    <span class="vci-change__old">{{ change.oldValue }}</span>
+                    <fa-icon icon="arrow-right" class="vci-change__arrow"></fa-icon>
+                    <span class="vci-change__new">{{ change.newValue }}</span>
+                  </div>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+
+      <!-- CREATE: submitted data grouped into readable sections. -->
+      @if (!showChanges && createSections.length > 0) {
+        @for (section of createSections; track section.title) {
+          <div class="vci-section">
+            <div class="vci-section__title">{{ section.title }}</div>
+            <dl class="vci-grid">
+              @for (field of section.fields; track $index) {
+                <ng-container *ngTemplateOutlet="commandField; context: { $implicit: field }"></ng-container>
+              }
+            </dl>
+          </div>
+        }
+      }
+
+      <!-- DELETE summary, role-permission changes, and the fallback payload all render here. -->
+      @if (!showChanges && createSections.length === 0 && displayJSONData) {
+        <div class="vci-section">
+          <div class="vci-section__title">
+            {{ deletingEntity ? 'Record To Be Deleted' : ('labels.heading.Command' | translate) }}
+          </div>
           <dl class="vci-grid">
             @for (field of commandFields; track $index) {
               <ng-container *ngTemplateOutlet="commandField; context: { $implicit: field }"></ng-container>

src/app/tasks/view-checker-inbox/view-checker-inbox.component.scss

@@ -304,6 +304,97 @@ $bg-page: #f8fafc;
   color: $text-soft;
 }
 
+/* ── UPDATE review: one row per field that actually moved ──────────────────── */
+.vci-changes {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: $border;
+}
+
+.vci-change {
+  background: #fff;
+  padding: 11px 16px;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 5px;
+  }
+
+  &__label {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: $text-soft;
+  }
+
+  &__kind {
+    font-size: 9.5px;
+    font-weight: 700;
+    letter-spacing: 0.07em;
+    padding: 1px 7px;
+    border-radius: 2px;
+
+    &--modified {
+      background: #e0f2fe;
+      color: #0369a1;
+    }
+
+    &--added {
+      background: #dcfce7;
+      color: #15803d;
+    }
+
+    &--removed {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+
+    /* Not a change: the entity has no such field, so there was no before-value to compare. */
+    &--submitted {
+      background: #eef1f4;
+      color: #5b6673;
+    }
+  }
+
+  &__values {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    font-size: 14px;
+    min-width: 0;
+  }
+
+  &__old {
+    color: $text-soft;
+    text-decoration: line-through;
+    overflow-wrap: anywhere;
+  }
+
+  &__arrow {
+    color: $text-soft;
+    font-size: 11px;
+    flex: none;
+  }
+
+  &__new {
+    color: $text-dark;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+}
+
+.vci-nochange {
+  margin: 0;
+  padding: 16px;
+  font-size: 13.5px;
+  color: $text-soft;
+}
+
 .vci-tag {
   display: inline-flex;
   align-items: center;

src/app/tasks/view-checker-inbox/view-checker-inbox.component.ts

@@ -14,6 +14,7 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial
 
 /** Custom Services */
 import { TasksService } from '../tasks.service';
+import { SystemService } from 'app/system/system.service';
 
 /** Dialog Components */
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
@@ -23,6 +24,23 @@ import { NgTemplateOutlet } from '@angular/common';
 import { DateFormatPipe } from '../../pipes/date-format.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { isTempTableProductEdit } from '../product-entities';
+import {
+  CommandChange,
+  diffCommandAgainstEntity,
+  displayScalar,
+  groupCreateFields,
+  humanizeKey
+} from '../command-diff.util';
+import { deleteSummaryKeys, EntityFetchServices, fetchCurrentEntity } from '../maker-checker-entity-fetch';
+
+/** Services the entity lookup table needs; assembled once and handed to the shared fetcher. */
+import { ProductsService } from 'app/products/products.service';
+import { ClientsService } from 'app/clients/clients.service';
+import { SavingsService } from 'app/savings/savings.service';
+import { AccountingService } from 'app/accounting/accounting.service';
+import { UsersService } from 'app/users/users.service';
+import { FixedDepositsService } from 'app/deposits/fixed-deposits/fixed-deposits.service';
+import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
 
 /**
  * One row of the rendered Command payload. The dialog turns the parsed command JSON into a tree of
@@ -35,6 +53,17 @@ export type CommandField =
   | { label: string; kind: 'object'; fields: CommandField[] }
   | { label: string; kind: 'list'; items: CommandField[] };
 
+/**
+ * Transport-level fields every Fineract command carries. They describe how the request was encoded,
+ * not what the maker actually changed, so they are dropped before the payload is shown - present in
+ * roughly three quarters of all stored commands, and pure noise to a checker.
+ */
+const NOISE_KEYS = new Set([
+  'locale',
+  'dateFormat',
+  'monthDayFormat'
+]);
+
 /**
  * Segments that read as initialisms in this domain, so `upiFacility` becomes "UPI Facility" rather
  * than "Upi Facility". Anything not listed just gets title-cased, so an unknown key still renders
@@ -76,6 +105,24 @@ const LABEL_ACRONYMS = new Set([
   'nef'
 ]);
 
+/**
+ * Fields that identify one element of an array, tried in order. Keeping this as a list of names rather
+ * than per-entity rules means an unfamiliar collection still gets a readable heading if it happens to
+ * carry any of them.
+ */
+const ENTRY_LABEL_KEYS = [
+  'limitType',
+  'name',
+  'displayName',
+  'chargeName',
+  'title',
+  'label',
+  'type',
+  'description',
+  'code',
+  'value'
+];
+
 @Component({
   selector: 'mifosx-view-checker-inbox',
   templateUrl: './view-checker-inbox.component.html',
@@ -93,6 +140,28 @@ export class ViewCheckerInboxComponent {
   private router = inject(Router);
   private translateService = inject(TranslateService);
   private tasksService = inject(TasksService);
+  private systemService = inject(SystemService);
+  private productsService = inject(ProductsService);
+  private clientsService = inject(ClientsService);
+  private savingsService = inject(SavingsService);
+  private accountingService = inject(AccountingService);
+  private usersService = inject(UsersService);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private recurringDepositsService = inject(RecurringDepositsService);
+
+  /** Bundle handed to the shared entity lookup, so that table stays free of Angular injection. */
+  private get entityFetchServices(): EntityFetchServices {
+    return {
+      products: this.productsService,
+      clients: this.clientsService,
+      savings: this.savingsService,
+      system: this.systemService,
+      accounting: this.accountingService,
+      users: this.usersService,
+      fixedDeposits: this.fixedDepositsService,
+      recurringDeposits: this.recurringDepositsService
+    };
+  }
   /** Present only when opened as a popup from the Checker Inbox list; absent when reached by direct
    *  route (a bookmarked or shared link). Both entry points stay supported — this only changes where
    *  the detail comes from and how "done" is signalled: closing the dialog vs. navigating back. */
@@ -122,6 +191,17 @@ export class ViewCheckerInboxComponent {
    */
   commandFields: CommandField[] = [];
 
+  /** UPDATE review: the fields this command actually moves, as OLD -> NEW. */
+  changes: CommandChange[] = [];
+  /** True once the current entity was read and a real comparison is on screen. */
+  showChanges = false;
+  /** True while the current entity is being fetched for comparison. */
+  comparing = false;
+  /** True when the screen is describing a record that is about to be deleted. */
+  deletingEntity = false;
+  /** CREATE review: submitted data bucketed into readable sections. */
+  createSections: { title: string; fields: CommandField[] }[] = [];
+
   /** camelCase / snake_case key -> readable label, e.g. `upiFacility` -> "UPI Facility". */
   private labelFor(key: string): string {
     const spaced = String(key ?? '')
@@ -156,6 +236,27 @@ export class ViewCheckerInboxComponent {
    * Recursively turns one key/value pair into a render node. Nothing is dropped or summarised - every
    * key in the payload produces a node, so the checker still sees the complete request.
    */
+  /**
+   * Names one element of an array of objects.
+   *
+   * Numbering them "Account Facility Limits 1 ... 10" tells a checker nothing - the position in a JSON
+   * array is not a fact about the record. Most entries carry a field that identifies them (`limitType`,
+   * a charge's `name`, a chart's `description`), so that value is used as the heading and the ordinal
+   * is only a fallback for entries that have nothing identifying at all.
+   */
+  private entryLabel(item: Record<string, any>, listLabel: string, index: number): string {
+    for (const key of ENTRY_LABEL_KEYS) {
+      const candidate = item?.[key];
+      if (typeof candidate === 'string' && candidate.trim() !== '') {
+        return candidate.trim();
+      }
+      if (typeof candidate === 'number') {
+        return String(candidate);
+      }
+    }
+    return `${listLabel} ${index + 1}`;
+  }
+
   private toField(label: string, value: any): CommandField {
     if (Array.isArray(value)) {
       return {
@@ -163,7 +264,7 @@ export class ViewCheckerInboxComponent {
         kind: 'list',
         items: value.map((item, index) =>
           item !== null && typeof item === 'object'
-            ? this.toField(`${label} ${index + 1}`, item)
+            ? this.toField(this.entryLabel(item, label, index), item)
             : { label: '', kind: 'scalar' as const, text: this.scalarText(item) }
         )
       };
@@ -172,7 +273,9 @@ export class ViewCheckerInboxComponent {
       return {
         label,
         kind: 'object',
-        fields: Object.keys(value).map((key) => this.toField(this.labelFor(key), value[key]))
+        fields: Object.keys(value)
+          .filter((key) => !NOISE_KEYS.has(key))
+          .map((key) => this.toField(this.labelFor(key), value[key]))
       };
     }
     return { label, kind: 'scalar', text: this.scalarText(value) };
@@ -182,7 +285,9 @@ export class ViewCheckerInboxComponent {
     if (!payload || typeof payload !== 'object' || Array.isArray(payload)) {
       return [];
     }
-    return Object.keys(payload).map((key) => this.toField(this.labelFor(key), payload[key]));
+    return Object.keys(payload)
+      .filter((key) => !NOISE_KEYS.has(key))
+      .map((key) => this.toField(this.labelFor(key), payload[key]));
   }
 
   /** Checker Inbox Details Data */
@@ -238,6 +343,14 @@ export class ViewCheckerInboxComponent {
 
   private applyDetail(detail: any): void {
     this.checkerInboxDetail = detail;
+    // Angular reuses this component when only the route's id changes, so the previous request's review
+    // state has to be cleared explicitly — otherwise a DELETE opened after an UPDATE keeps showing the
+    // UPDATE's changes.
+    this.changes = [];
+    this.showChanges = false;
+    this.comparing = false;
+    this.deletingEntity = false;
+    this.createSections = [];
     // commandAsJson is absent on some entries (a DELETE carries no payload), and JSON.parse(undefined)
     // throws — which as a route only broke the page, but in a dialog would leave an empty shell open.
     try {
@@ -247,6 +360,186 @@ export class ViewCheckerInboxComponent {
     }
     this.displayJSONData = !_.isEmpty(this.jsondata);
     this.commandFields = this.buildCommandFields(this.jsondata);
+
+    // Role permissions get their own treatment: the payload is the role's whole permission map, so a
+    // field-by-field diff would be 1,100 rows rather than the handful that moved.
+    if (this.isRolePermissionsCommand(detail)) {
+      this.loadRolePermissionChanges(detail.resourceId, this.jsondata.permissions);
+      return;
+    }
+
+    const action = (detail?.actionName ?? '').toUpperCase();
+    if (action === 'UPDATE') {
+      this.loadUpdateChanges(detail);
+    } else if (action === 'DELETE') {
+      this.loadDeleteSummary(detail);
+    } else if (action === 'CREATE') {
+      this.createSections = this.buildCreateSections(this.jsondata);
+    }
+  }
+
+  /**
+   * UPDATE: read the entity as it stands today and show only what the command actually moves.
+   *
+   * Several screens submit their entire form regardless of what the maker touched - a fixed deposit
+   * account update posts 28 fields every time - so without this the checker cannot tell which one
+   * changed. If the entity cannot be read the submitted payload stays on screen, which is what every
+   * entity showed before.
+   */
+  private loadUpdateChanges(detail: any): void {
+    const request$ = fetchCurrentEntity(detail?.entityName, detail?.resourceId, this.entityFetchServices);
+    if (!request$) {
+      return;
+    }
+    this.comparing = true;
+    request$.subscribe({
+      next: (current: any) => {
+        // A slow response for a record the user has already navigated away from must not overwrite the
+        // record now on screen.
+        if (!this.isCurrent(detail)) {
+          return;
+        }
+        this.comparing = false;
+        this.changes = diffCommandAgainstEntity(this.jsondata ?? {}, current ?? {});
+        this.showChanges = true;
+      },
+      error: () => {
+        this.comparing = false;
+      }
+    });
+  }
+
+  /**
+   * DELETE: the payload is empty for every entity, so the command alone tells the checker nothing.
+   * Reads the record instead and shows the few fields that identify it.
+   */
+  private loadDeleteSummary(detail: any): void {
+    const request$ = fetchCurrentEntity(detail?.entityName, detail?.resourceId, this.entityFetchServices);
+    if (!request$) {
+      return;
+    }
+    this.comparing = true;
+    request$.subscribe({
+      next: (current: any) => {
+        if (!this.isCurrent(detail)) {
+          return;
+        }
+        this.comparing = false;
+        const keys = deleteSummaryKeys(detail?.entityName);
+        const fields = keys
+          .filter((key) => current?.[key] !== undefined && current?.[key] !== null && current?.[key] !== '')
+          .map((key) => ({
+            label: humanizeKey(key),
+            kind: 'scalar' as const,
+            text: displayScalar(current[key])
+          }));
+        if (fields.length > 0) {
+          this.commandFields = fields;
+          this.displayJSONData = true;
+          this.deletingEntity = true;
+        }
+      },
+      error: () => {
+        this.comparing = false;
+      }
+    });
+  }
+
+  /** Whether `detail` is still the request on screen, i.e. an in-flight lookup is not stale. */
+  private isCurrent(detail: any): boolean {
+    return this.checkerInboxDetail?.id === detail?.id;
+  }
+
+  /** CREATE: nothing to compare against, so the submitted data is grouped rather than diffed. */
+  private buildCreateSections(payload: any): { title: string; fields: CommandField[] }[] {
+    if (!payload || typeof payload !== 'object' || Array.isArray(payload)) {
+      return [];
+    }
+    return groupCreateFields(payload).map((section) => ({
+      title: section.title,
+      fields: section.keys.map((key) => this.toField(this.labelFor(key), payload[key]))
+    }));
+  }
+
+  /**
+   * A role permission update posts the role's *entire* permission map - over 1,100 entries, of which
+   * a handful are actually being changed. Rendering that as-is buries the change completely, so this
+   * screen fetches the role's current permissions and shows only the difference.
+   */
+  private isRolePermissionsCommand(detail: any): boolean {
+    return (
+      (detail?.entityName ?? '').toUpperCase() === 'ROLE' &&
+      (detail?.actionName ?? '').toUpperCase() === 'PERMISSIONS' &&
+      detail?.resourceId != null &&
+      !!this.jsondata?.permissions
+    );
+  }
+
+  /**
+   * Replaces the flat permission dump with Granted / Revoked lists, by comparing the submitted map
+   * against what the role holds today. Anything the maker left untouched is summarised as a count
+   * rather than listed.
+   *
+   * If the role lookup fails the original payload stays on screen - a degraded but complete view is
+   * better than showing the checker nothing.
+   */
+  private loadRolePermissionChanges(roleId: string | number, submitted: Record<string, boolean>): void {
+    this.systemService.getRole(roleId).subscribe({
+      next: (role: any) => {
+        const current = new Map<string, boolean>(
+          (role?.permissionUsageData ?? []).map((p: any): [string, boolean] => [
+            p.code,
+            !!p.selected
+          ])
+        );
+
+        const granted: string[] = [];
+        const revoked: string[] = [];
+        let unchanged = 0;
+
+        Object.keys(submitted).forEach((code) => {
+          const now = !!submitted[code];
+          const before = current.get(code);
+          // A code missing from the role lookup has no "before" to compare against, so treat it as
+          // changed only when it is being switched on.
+          if (before === undefined) {
+            if (now) {
+              granted.push(code);
+            }
+            return;
+          }
+          if (now === before) {
+            unchanged++;
+          } else if (now) {
+            granted.push(code);
+          } else {
+            revoked.push(code);
+          }
+        });
+
+        this.commandFields = this.buildPermissionChangeFields(granted, revoked, unchanged);
+      },
+      error: () => undefined
+    });
+  }
+
+  private buildPermissionChangeFields(granted: string[], revoked: string[], unchanged: number): CommandField[] {
+    const fields: CommandField[] = [];
+    const asList = (label: string, codes: string[]): CommandField => ({
+      label,
+      kind: 'list',
+      items: codes.sort().map((code) => ({ label: '', kind: 'scalar' as const, text: this.labelFor(code) }))
+    });
+
+    fields.push(asList(`Permissions Granted (${granted.length})`, granted));
+    fields.push(asList(`Permissions Revoked (${revoked.length})`, revoked));
+
+    if (granted.length === 0 && revoked.length === 0) {
+      fields.push({ label: 'Result', kind: 'scalar', text: 'No permission changes in this request.' });
+    }
+    fields.push({ label: 'Unchanged Permissions', kind: 'scalar', text: `${unchanged} left as they were` });
+
+    return fields;
   }
 
   /** "Done" for this screen — closes the popup (telling the list to refresh) when opened as a
@@ -304,23 +597,4 @@ export class ViewCheckerInboxComponent {
       }
     });
   }
-
-  /**
-   * Delete Checker
-   */
-  deleteChecker() {
-    const deleteCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
-      data: {
-        heading: this.translateService.instant('labels.heading.Delete Checker'),
-        dialogContext: this.translateService.instant('labels.dialogContext.Are you sure you want to delete checker')
-      }
-    });
-    deleteCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
-      if (response.confirm) {
-        this.tasksService.deleteMakerChecker(this.checkerInboxDetail.id).subscribe((res: any) => {
-          this.finish();
-        });
-      }
-    });
-  }
 }

src/app/tds-reports/tds-reports-data.ts

@@ -171,7 +171,6 @@ export function tdsDeductees(): TdsDeductee[] {
   return liveDeductees;
 }
 
-
 /**
  * Statutory date by which tax deducted in a given month must be deposited.
  *