Merge branch 'maker-checker' into dev: Product Approval workflow

Brings in the Product Approval feature (anshul.rathore) — a unified Approvals
screen for Loan/Savings/Current/Share/FD/RD/Charge product requests:
- Merges two existing pending-request sources into one list: staged product
  edits (m_saving_product_temp, via /{producttype}/pending) and native
  maker-checker entries (/makercheckers) for product CREATE/DELETE and
  LOANPRODUCT/CHARGE of any action.
- Checker Inbox no longer lists product requests at all — they now live only
  in Product Approval, so a checker isn't checking two queues for the same
  thing. Clicking a non-product row now navigates straight to that entity's
  own view page when one exists, instead of always opening a detail dialog.
- View Checker Inbox dialog gains a caller-supplied heading (used when opened
  from Product Approval) and a notice steering staged product edits back to
  Product Approval instead of being actioned in place.
- Route renamed pending-savings-products -> product-approval, with the old
  path kept as a redirect for existing bookmarks/links.

8 files conflicted with dev's own recent Checker Inbox work (popup-based
detail view, e8097bc2/63134f17) and were resolved by hand, keeping both
sides' real functionality rather than picking one branch wholesale:
- product-edit-diff-dialog.component.{ts,html,scss}: kept dev's diff dialog
  (resolves GL account ids to names, aliases fields like currencyCode against
  the stored product, normalises the two date shapes the API uses) over
  maker-checker's simpler raw-value version.
- pending-savings-products.component.{ts,html}: kept maker-checker's full
  isPendingEdit()-based dispatch (dev's version was a strict subset of it).
- view-checker-inbox.component.{ts,html,scss}: kept dev's per-entry Delete
  action and maker-checker's recursive Command-payload tree renderer and
  custom heading side by side.

Also recovered two regressions the merge introduced silently (no conflict
markers, so `git merge` gave no warning):
- tasks.service.ts lost deleteMakerChecker() entirely — restored.
- Checker Inbox's bulk Delete action (button, deleteChecker()/
  bulkDeleteChecker(), and its .cv-btn-delete style) was dropped across three
  files — restored to match dev's pre-merge behaviour exactly.

And one duplicate the merge produced without a conflict marker: two
independent viewEntry() implementations landed in checker-inbox.component.ts
(TS2393, caught at build). Kept maker-checker's entity-view-page-routing
version — a superset of dev's dialog-only version — and dropped the duplicate,
along with a leftover diagnostic console.log.

src/app/pipes/date-format.pipe.ts

@@ -59,6 +59,10 @@ export class DateFormatPipe implements PipeTransform, OnDestroy {
     if (Array.isArray(value)) {
       // Backend sometimes returns [yyyy, MM, dd]
       dateVal = moment(value.join('-'), 'YYYY-MM-DD');
+    } else if (typeof value === 'number' && value < 1e12) {
+      // Unix timestamp in seconds (e.g. /makercheckers madeOnDate).
+      // moment(seconds) would treat it as milliseconds → 1970; use moment.unix() instead.
+      dateVal = moment.unix(value);
     } else {
       dateVal = moment(value);
     }

src/app/products/products.service.ts

@@ -87,7 +87,7 @@ export class ProductsService {
 
   /**
    * Submitting a savings product update (above) puts it in the pending-approval temp table instead of
-   * applying it directly. These calls drive the Approvals -> Pending Savings Product Edits screen.
+   * applying it directly. These calls drive the Approvals -> Product Approval screen.
    */
   getPendingSavingsProductEdits(): Observable<any> {
     return this.http.get('/savingsproducts/pending');
@@ -135,7 +135,7 @@ export class ProductsService {
 
   /**
    * Submitting a current product update (above) puts it in the pending-approval temp table instead of
-   * applying it directly. These calls drive the Approvals -> Pending Product Edits screen.
+   * applying it directly. These calls drive the Approvals -> Product Approval screen.
    */
   getPendingCurrentProductEdits(): Observable<any> {
     return this.http.get('/currentproducts/pending');
@@ -179,7 +179,7 @@ export class ProductsService {
 
   /**
    * Submitting a share product update (above) puts it in the pending-approval temp table instead of
-   * applying it directly. These calls drive the Approvals -> Pending Product Edits screen.
+   * applying it directly. These calls drive the Approvals -> Product Approval screen.
    */
   getPendingShareProductEdits(): Observable<any> {
     return this.http.get('/products/share/pending');
@@ -449,7 +449,7 @@ export class ProductsService {
 
   /**
    * Submitting a fixed deposit product update (above) puts it in the pending-approval temp table instead of
-   * applying it directly. These calls drive the Approvals -> Pending Product Edits screen.
+   * applying it directly. These calls drive the Approvals -> Product Approval screen.
    */
   getPendingFixedDepositProductEdits(): Observable<any> {
     return this.http.get('/fixeddepositproducts/pending');
@@ -744,7 +744,7 @@ export class ProductsService {
 
   /**
    * Submitting a recurring deposit product update (above) puts it in the pending-approval temp table instead of
-   * applying it directly. These calls drive the Approvals -> Pending Product Edits screen.
+   * applying it directly. These calls drive the Approvals -> Product Approval screen.
    */
   getPendingRecurringDepositProductEdits(): Observable<any> {
     return this.http.get('/recurringdepositproducts/pending');

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.ts

@@ -27,7 +27,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     FaIconComponent,
-    NgClass,
     TransactionPaymentDetailComponent,
     CurrencyPipe,
     DateFormatPipe

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts

@@ -60,7 +60,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     DateFormatPipe,
     DatetimeFormatPipe,
     FormatNumberPipe,
-    YesnoPipe,
     MatCardModule,
     MatTooltipModule
   ]

src/app/shared/file-upload/file-upload.component.ts

@@ -20,9 +20,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   templateUrl: './file-upload.component.html',
   styleUrls: ['./file-upload.component.scss'],
   imports: [
-    ...STANDALONE_SHARED_IMPORTS,
-    NgStyle,
-    FaIconComponent
+    ...STANDALONE_SHARED_IMPORTS
   ]
 })
 export class FileUploadComponent implements OnInit {

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.ts

@@ -42,10 +42,8 @@ import { MatOption } from '@angular/material/core';
     MatDialogContent,
     MatDialogActions,
     MatDialogClose,
-    MatDivider,
     MatButton,
     FormsModule,
-    NgClass,
     MatIcon,
     MatFormField,
     MatLabel,

src/app/shared/shortcut-usage-dialog/inline-create-shortcut-dialog.component.ts

@@ -35,8 +35,7 @@ import { take } from 'rxjs/operators';
     FormsModule,
     MatFormField,
     MatLabel,
-    MatInput,
-    MatError
+    MatInput
   ]
 })
 export class InlineCreateShortcutDialogComponent {

src/app/sponsor-dd-reconciliation/reco-batch-list/reco-batch-list.component.ts

@@ -25,8 +25,7 @@ import { SponsorDDReconciliationService } from '../sponsor-dd-reconciliation.ser
     MatCardModule,
     MatTableModule,
     MatButtonModule,
-    MatSnackBarModule,
-    FaIconComponent
+    MatSnackBarModule
   ],
   templateUrl: './reco-batch-list.component.html',
   styles: [

src/app/sponsor-dd/dd-inventory-list/dd-inventory-list.component.ts

@@ -34,8 +34,7 @@ import { SponsorDDService } from '../sponsor-dd.service';
     MatTableModule,
     MatButtonModule,
     MatDialogModule,
-    MatSnackBarModule,
-    FaIconComponent
+    MatSnackBarModule
   ],
   templateUrl: './dd-inventory-list.component.html',
   styles: [

src/app/sponsor-dd/dd-list/dd-list.component.ts

@@ -40,8 +40,7 @@ import { DividendClaimRequestService } from '../../clerk/dividend-claim-request.
     MatDialogModule,
     MatSnackBarModule,
     MatFormFieldModule,
-    MatInputModule,
-    FaIconComponent
+    MatInputModule
   ],
   templateUrl: './dd-list.component.html',
   styles: [

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.ts

@@ -40,6 +40,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { DateFormatPipe } from '../../../pipes/date-format.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { isProductEntity, isTempTableAccountEdit } from '../../product-entities';
 
 @Component({
   selector: 'mifosx-checker-inbox',
@@ -105,27 +106,19 @@ export class CheckerInboxComponent implements OnInit {
   ];
 
   /**
-   * Entities whose pending edits are gated by our own custom staging tables (m_savings_product_temp
-   * for products, the savings account edit-request table for Nominee/Digital-Feature edits) rather
-   * than the native command-source pipeline. They're excluded from Checker Inbox entirely -
-   * approving/rejecting them here would call the native /makercheckers/{id}?command=approve endpoint,
-   * which replays the original command handler directly and never touches our staging table, leaving
-   * its lock/hold stuck forever. Action them from Approvals -> Pending Product Edits / Pending Account
-   * Edits instead, where that's handled correctly.
+   * The Checker Inbox holds non-product pending requests only. Two groups are routed elsewhere:
+   *
+   *  - Product requests of every action (CREATE, UPDATE, DELETE) belong to Approvals -> Product
+   *    Approval, which merges them with the product edits staged in m_saving_product_temp so a
+   *    checker sees one queue per product rather than two.
+   *  - Savings/current account edits are staged the same way as product edits and belong to
+   *    Approvals -> Pending Account Edits. Approving them here would call
+   *    /makercheckers/{id}?command=approve, which replays the original command handler and never
+   *    touches the staging table, leaving its lock held forever.
    */
-  private readonly productEditEntities = [
-    'SAVINGSPRODUCT',
-    'CURRENTPRODUCT',
-    'SHAREPRODUCT',
-    'FIXEDDEPOSITPRODUCT',
-    'RECURRINGDEPOSITPRODUCT',
-    'SAVINGSACCOUNT',
-    'CURRENTACCOUNT'
-  ];
-
-  private excludeProductEdits(items: any[]): any[] {
+  private excludeRoutedElsewhere(items: any[]): any[] {
     return (items || []).filter(
-      (item: any) => !(this.productEditEntities.includes(item?.entityName) && item?.actionName === 'UPDATE')
+      (item: any) => !isProductEntity(item?.entityName) && !isTempTableAccountEdit(item?.entityName, item?.actionName)
     );
   }
 
@@ -142,7 +135,7 @@ export class CheckerInboxComponent implements OnInit {
   constructor() {
     this.route.data.subscribe((data: { makerCheckerResource: any; makerCheckerTemplate: any }) => {
       const raw = data.makerCheckerResource;
-      this.searchData = this.excludeProductEdits(Array.isArray(raw) ? raw : (raw?.pageItems ?? []));
+      this.searchData = this.excludeRoutedElsewhere(Array.isArray(raw) ? raw : (raw?.pageItems ?? []));
       this.checkerData = this.searchData.length > 0;
       this.makerCheckerTemplate = data.makerCheckerTemplate ?? {};
       this.dataSource = new MatTableDataSource(this.searchData);
@@ -182,7 +175,7 @@ export class CheckerInboxComponent implements OnInit {
       makerDateTimeto: this.dateUtils.formatDate(this.makerCheckerSearchForm.value.makerDateTimeto, dateFormat)
     };
     this.tasksService.getMakerCheckerData(makerCheckerSearchParams).subscribe((response: any) => {
-      this.searchData = this.excludeProductEdits(response);
+      this.searchData = this.excludeRoutedElsewhere(response);
       if (this.searchData.length === 0) {
         this.noSearchedData = true;
       } else {
@@ -290,11 +283,66 @@ export class CheckerInboxComponent implements OnInit {
   }
 
   /**
-   * Opens one inbox entry in a popup rather than navigating to its own page, so the checker keeps
-   * the list (and any search/filter they set up) behind the dialog. The direct route stays available
-   * for a bookmarked link — ViewCheckerInboxComponent supports both entry points.
+   * Maps a maker-checker entityName to the Angular route path for that entity's existing view page.
+   * Returns null for entity types that have no dedicated view page in this application.
+   */
+  private entityRoute(entityName: string, resourceId: string | number): string | null {
+    const id = resourceId;
+    switch ((entityName ?? '').toUpperCase()) {
+      case 'LOANPRODUCT':
+        return `/products/loan-products/${id}`;
+      case 'SAVINGSPRODUCT':
+        return `/products/saving-products/${id}`;
+      case 'CURRENTPRODUCT':
+        return `/products/current-products/${id}`;
+      case 'SHAREPRODUCT':
+        return `/products/share-products/${id}`;
+      case 'FIXEDDEPOSITPRODUCT':
+        return `/products/fixed-deposit-products/${id}`;
+      case 'RECURRINGDEPOSITPRODUCT':
+        return `/products/recurring-deposit-products/${id}`;
+      case 'CHARGE':
+        return `/products/charges/${id}`;
+      case 'GLACCOUNT':
+        return `/accounting/chart-of-accounts/gl-accounts/view/${id}`;
+      case 'CLIENT':
+        return `/clients/${id}/general`;
+      case 'LOAN':
+        return `/loans/${id}`;
+      case 'SAVINGSACCOUNT':
+        return `/savings-accounts/${id}`;
+      case 'CURRENTACCOUNT':
+        return `/current-accounts/${id}`;
+      default:
+        return null;
+    }
+  }
+
+  /**
+   * Handles a row click in the Checker Inbox.
+   *
+   * Priority:
+   *  1. If the row has a known entityName and a resourceId → navigate to the entity's existing
+   *     view page (read-only; no maker-checker action buttons are present on those pages).
+   *  2. If no resourceId is available (e.g. a DELETE action where the entity no longer exists)
+   *     → show a brief informational snackbar.
+   *  3. If the entityName is unrecognised → fall back to the existing ViewCheckerInboxComponent
+   *     dialog so the checker can still view the command details and action the entry.
    */
   viewEntry(row: any): void {
+    const entityName: string = row.entityName ?? '';
+    const resourceId = row.resourceId;
+    const route = this.entityRoute(entityName, resourceId);
+
+    if (route && resourceId != null) {
+      // Navigate to the existing entity view page (no maker-checker buttons there).
+      this.router.navigate([route]);
+      return;
+    }
+
+    // resourceId is absent (CREATE rows: entity does not exist yet until approved),
+    // or entityName is unmapped — fall back to the detail dialog so the checker
+    // can still view the command payload and action the entry.
     this.dialog
       .open(ViewCheckerInboxComponent, {
         data: { checkerId: row.id },

src/app/tasks/checker-inbox-and-tasks-tabs/pending-client-edits/pending-client-edits.component.ts

@@ -98,8 +98,7 @@ const NATIONALITY_LABELS: Record<string, string> = {
     MatRowDef,
     MatRow,
     MatIcon,
-    MatPaginatorModule,
-    ClientEditEmailDialogComponent
+    MatPaginatorModule
   ]
 })
 export class PendingClientEditsComponent implements OnInit {

src/app/tasks/checker-inbox-and-tasks-tabs/pending-savings-products/pending-savings-products.component.html

@@ -11,7 +11,12 @@
     <div class="psp-action-bar">
       <mat-form-field appearance="outline" class="psp-search-field">
         <mat-icon matPrefix>search</mat-icon>
-        <input #filterInput matInput placeholder="Search by product name" (keyup)="applyFilter(filterInput.value)" />
+        <input
+          #filterInput
+          matInput
+          placeholder="Search by product name, type or request"
+          (keyup)="applyFilter(filterInput.value)"
+        />
       </mat-form-field>
     </div>
 
@@ -20,7 +25,16 @@
         <ng-container matColumnDef="productType">
           <th mat-header-cell *matHeaderCellDef>Type</th>
           <td mat-cell *matCellDef="let edit">
-            <span class="status-badge status-badge--type">{{ edit.productType }}</span>
+            <span class="status-badge status-badge--type">{{ productTypeLabel(edit.productType) }}</span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="actionName">
+          <th mat-header-cell *matHeaderCellDef>Request</th>
+          <td mat-cell *matCellDef="let edit">
+            <span class="status-badge status-badge--action" [class.status-badge--delete]="edit.actionName === 'DELETE'">
+              {{ edit.actionName }}
+            </span>
           </td>
         </ng-container>
 
@@ -55,7 +69,12 @@
               [disabled]="loadingDiffFor === edit"
               (click)="viewDiff(edit)"
             >
-              <fa-icon icon="eye" class="m-r-10"></fa-icon>{{ loadingDiffFor === edit ? 'Loading…' : 'Compare' }}
+              <fa-icon icon="eye" class="m-r-10"></fa-icon>
+              @if (loadingDiffFor === edit) {
+                Loading…
+              } @else {
+                {{ isPendingEdit(edit) ? 'Compare' : 'View' }}
+              }
             </button>
             <button mat-stroked-button class="psp-btn psp-btn-approve" (click)="approve(edit)">
               <fa-icon icon="check" class="m-r-10"></fa-icon>Approve

src/app/tasks/checker-inbox-and-tasks-tabs/pending-savings-products/pending-savings-products.component.scss

@@ -45,8 +45,16 @@ $text-muted: #64748b;
   border-color: #2563eb;
   color: #2563eb;
 
-  &:hover {
-    background: #eff6ff;
+  &:not(:disabled) {
+    --mat-button-outlined-outline-color: #2563eb;
+    --mat-button-outlined-label-text-color: #2563eb;
+
+    border-color: #2563eb !important;
+    color: #2563eb !important;
+
+    &:hover {
+      background: #eff6ff !important;
+    }
   }
 }
 
@@ -54,8 +62,16 @@ $text-muted: #64748b;
   border-color: #16a34a;
   color: #16a34a;
 
-  &:hover {
-    background: #f0fdf4;
+  &:not(:disabled) {
+    --mat-button-outlined-outline-color: #16a34a;
+    --mat-button-outlined-label-text-color: #16a34a;
+
+    border-color: #16a34a !important;
+    color: #16a34a !important;
+
+    &:hover {
+      background: #f0fdf4 !important;
+    }
   }
 }
 
@@ -63,8 +79,16 @@ $text-muted: #64748b;
   border-color: #dc2626;
   color: #dc2626;
 
-  &:hover {
-    background: #fef2f2;
+  &:not(:disabled) {
+    --mat-button-outlined-outline-color: #dc2626;
+    --mat-button-outlined-label-text-color: #dc2626;
+
+    border-color: #dc2626 !important;
+    color: #dc2626 !important;
+
+    &:hover {
+      background: #fef2f2 !important;
+    }
   }
 }
 
@@ -85,6 +109,17 @@ $text-muted: #64748b;
     background: #e0e7ff;
     color: #3730a3;
   }
+
+  &--action {
+    background: #dcfce7;
+    color: #166534;
+  }
+
+  // DELETE is the one irreversible request in this table, so it reads red rather than green.
+  &--delete {
+    background: #fee2e2;
+    color: #991b1b;
+  }
 }
 
 .empty-state {

src/app/tasks/checker-inbox-and-tasks-tabs/pending-savings-products/pending-savings-products.component.ts

@@ -26,12 +26,15 @@ import { MatIcon } from '@angular/material/icon';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 import { ProductsService } from 'app/products/products.service';
+import { TasksService } from '../../tasks.service';
 import { ProductEditDiffDialogComponent } from './product-edit-diff-dialog/product-edit-diff-dialog.component';
+import { ViewCheckerInboxComponent } from '../../view-checker-inbox/view-checker-inbox.component';
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { productTypeDisplayLabel } from '../../product-entities';
 
 @Component({
   selector: 'mifosx-pending-savings-products',
@@ -58,12 +61,14 @@ export class PendingSavingsProductsComponent {
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private productsService = inject(ProductsService);
+  private tasksService = inject(TasksService);
 
   dataSource: MatTableDataSource<any>;
   showData = false;
 
   displayedColumns: string[] = [
     'productType',
+    'actionName',
     'savingsProductName',
     'makerUsername',
     'createdOn',
@@ -86,6 +91,14 @@ export class PendingSavingsProductsComponent {
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
 
+  /**
+   * Label for the Type column. Display only — the row's own `productType` is left untouched, so the
+   * endpoint switches, filtering and approve/reject paths below still see the original value.
+   */
+  productTypeLabel(productType: string): string {
+    return productTypeDisplayLabel(productType);
+  }
+
   formatDate(date: any): string {
     if (!date) return '';
     const d = Array.isArray(date)
@@ -144,17 +157,48 @@ export class PendingSavingsProductsComponent {
     }
   }
 
-  viewDiff(edit: any): void {
-    this.loadingDiffFor = edit;
-    this.getOriginalProduct$(edit).subscribe({
+  /**
+   * A staged edit (m_saving_product_temp) is approved through the product's own
+   * /{producttype}/{id}/approve endpoint; a native maker-checker entry through
+   * /makercheckers/{id}?command=approve. Crossing the two would leave the staged edit's lock in place,
+   * so every action below dispatches on this.
+   */
+  isPendingEdit(row: any): boolean {
+    return row?.source === 'PENDING_EDIT';
+  }
+
+  /**
+   * A staged edit is diffed against the live product. A maker-checker entry has no staged row to diff
+   * - and on CREATE no product exists yet - so it opens the existing command-detail dialog, which
+   * renders the submitted payload and can action the entry itself.
+   */
+  viewDiff(row: any): void {
+    if (!this.isPendingEdit(row)) {
+      this.dialog
+        .open(ViewCheckerInboxComponent, {
+          // Same dialog as the Checker Inbox, titled for the tab it was opened from.
+          data: { checkerId: row.id, title: 'Product Approval Details' },
+          autoFocus: false
+        })
+        .afterClosed()
+        .subscribe((result: any) => {
+          if (result?.refreshed) {
+            this.reload();
+          }
+        });
+      return;
+    }
+
+    this.loadingDiffFor = row;
+    this.getOriginalProduct$(row).subscribe({
       next: (original: any) => {
         this.loadingDiffFor = null;
         this.dialog.open(ProductEditDiffDialogComponent, {
           width: '820px',
           data: {
-            productName: edit.savingsProductName,
+            productName: row.savingsProductName,
             original: original ?? {},
-            proposed: edit.proposedChanges ?? {}
+            proposed: row.proposedChanges ?? {}
           }
         });
       },
@@ -168,22 +212,46 @@ export class PendingSavingsProductsComponent {
     this.loadingDiffFor = null;
   }
 
-  approve(edit: any): void {
+  approve(row: any): void {
+    const isEdit = this.isPendingEdit(row);
     const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
       data: {
-        heading: 'Approve Savings Product Edit',
-        dialogContext: `Apply the pending edit to "${edit.savingsProductName}"? This cannot be undone.`,
+        heading: isEdit ? 'Approve Product Edit' : `Approve Product ${row.actionName}`,
+        dialogContext: isEdit
+          ? `Apply the pending edit to "${row.savingsProductName}"? This cannot be undone.`
+          : `Approve the pending ${row.actionName} request for "${row.savingsProductName}"? This cannot be undone.`,
         type: 'basic'
       }
     });
     dialogRef.afterClosed().subscribe((response: any) => {
       if (response?.confirm) {
-        this.approveEdit$(edit).subscribe(() => this.reload());
+        const request$ = isEdit
+          ? this.approveEdit$(row)
+          : this.tasksService.executeMakerCheckerAction(row.id, 'approve');
+        request$.subscribe(() => this.reload());
       }
     });
   }
 
-  reject(edit: any): void {
+  reject(row: any): void {
+    if (!this.isPendingEdit(row)) {
+      // The native /makercheckers reject endpoint takes no payload, so there is nowhere to store a
+      // reason - ask for plain confirmation rather than collecting text that would be discarded.
+      const confirmRef = this.dialog.open(ConfirmationDialogComponent, {
+        data: {
+          heading: `Reject Product ${row.actionName}`,
+          dialogContext: `Reject the pending ${row.actionName} request for "${row.savingsProductName}"?`,
+          type: 'basic'
+        }
+      });
+      confirmRef.afterClosed().subscribe((response: any) => {
+        if (response?.confirm) {
+          this.tasksService.executeMakerCheckerAction(row.id, 'reject').subscribe(() => this.reload());
+        }
+      });
+      return;
+    }
+
     const formfields: FormfieldBase[] = [
       new InputBase({
         controlName: 'rejectReason',
@@ -195,7 +263,7 @@ export class PendingSavingsProductsComponent {
     ];
     const dialogRef = this.dialog.open(FormDialogComponent, {
       data: {
-        title: `Reject edit for "${edit.savingsProductName}"`,
+        title: `Reject edit for "${row.savingsProductName}"`,
         layout: { addButtonText: 'Reject' },
         formfields
       }
@@ -203,7 +271,7 @@ export class PendingSavingsProductsComponent {
     dialogRef.afterClosed().subscribe((response: any) => {
       if (response?.data) {
         const rejectReason = response.data.value.rejectReason || '';
-        this.rejectEdit$(edit, rejectReason).subscribe(() => this.reload());
+        this.rejectEdit$(row, rejectReason).subscribe(() => this.reload());
       }
     });
   }

src/app/tasks/checker-inbox-and-tasks-tabs/rejected-account/rejected-account.component.ts

@@ -31,7 +31,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   styleUrls: ['./rejected-account.component.scss'],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
-    FaIconComponent,
     MatTable,
     MatColumnDef,
     MatHeaderCellDef,

src/app/tasks/checker-inbox-and-tasks-tabs/terminated-account/terminated-account.component.ts

@@ -31,7 +31,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   styleUrls: ['./terminated-account.component.scss'],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
-    FaIconComponent,
     MatTable,
     MatColumnDef,
     MatHeaderCellDef,

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

@@ -74,12 +74,12 @@
     </a>
     <a
       class="ac-tab"
-      routerLink="./pending-savings-products"
+      routerLink="./product-approval"
       routerLinkActive="ac-tab--active"
       *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
     >
       <fa-icon icon="piggy-bank" class="ac-tab__ic"></fa-icon>
-      <span>Pending Product Edits</span>
+      <span>Product Approval</span>
     </a>
     <a
       class="ac-tab"

src/app/tasks/common-resolvers/getPendingSavingsProducts.resolver.ts

@@ -11,15 +11,27 @@ import { Resolve } from '@angular/router';
 import { Observable, forkJoin, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { ProductsService } from 'app/products/products.service';
+import { TasksService } from '../tasks.service';
+import { isProductEntity, isTempTableProductEdit, PRODUCT_ENTITY_TYPE_LABEL } from '../product-entities';
 
 /**
- * Merges pending edits across all product types sharing the m_savings_product_temp backing table -
- * Savings, Current Account, Share, Fixed Deposit, and Recurring Deposit products - into one list for
- * the Pending Product Edits screen.
+ * Builds the Approvals -> Product Approval list from the two pending-request sources the platform
+ * already has. No new workflow or table is involved; both feeds are read as-is.
+ *
+ *  1. Pending product edits (m_saving_product_temp), via /{producttype}/pending. UPDATE only, for the
+ *     five product types whose PUT handler stages the change instead of logging a command.
+ *  2. Native maker-checker entries (m_portfolio_command_source), via /makercheckers. This is where
+ *     product CREATE and DELETE land - and LOANPRODUCT/CHARGE requests of every action, since those
+ *     were never diverted to the staging table.
+ *
+ * Rows staged in (1) also have an audit-only command-source row that surfaces in (2), so the
+ * maker-checker feed drops them - see isTempTableProductEdit. Each source keeps its own approve/reject
+ * path in the component; the merge here is presentational only.
  */
 @Injectable()
 export class GetPendingSavingsProducts implements Resolve<any> {
   private productsService = inject(ProductsService);
+  private tasksService = inject(TasksService);
 
   resolve(): Observable<any> {
     return forkJoin({
@@ -27,15 +39,73 @@ export class GetPendingSavingsProducts implements Resolve<any> {
       current: this.productsService.getPendingCurrentProductEdits().pipe(catchError(() => of([]))),
       share: this.productsService.getPendingShareProductEdits().pipe(catchError(() => of([]))),
       fd: this.productsService.getPendingFixedDepositProductEdits().pipe(catchError(() => of([]))),
-      rd: this.productsService.getPendingRecurringDepositProductEdits().pipe(catchError(() => of([])))
+      rd: this.productsService.getPendingRecurringDepositProductEdits().pipe(catchError(() => of([]))),
+      // includeJson so a CREATE row - which has no resourceId, and therefore no product to look up -
+      // can still show the submitted product name.
+      makerChecker: this.tasksService.getMakerCheckerData({ includeJson: true }).pipe(catchError(() => of([])))
     }).pipe(
       map((results) => [
-        ...(results.savings || []).map((e: any) => ({ ...e, productType: 'SAVINGS' })),
-        ...(results.current || []).map((e: any) => ({ ...e, productType: 'CURRENT' })),
-        ...(results.share || []).map((e: any) => ({ ...e, productType: 'SHARE' })),
-        ...(results.fd || []).map((e: any) => ({ ...e, productType: 'FD' })),
-        ...(results.rd || []).map((e: any) => ({ ...e, productType: 'RD' }))
+        ...this.asEditRows(results.savings, 'SAVINGS'),
+        ...this.asEditRows(results.current, 'CURRENT'),
+        ...this.asEditRows(results.share, 'SHARE'),
+        ...this.asEditRows(results.fd, 'FD'),
+        ...this.asEditRows(results.rd, 'RD'),
+        ...this.asMakerCheckerRows(results.makerChecker)
       ])
     );
   }
+
+  /** Staged product edits, unchanged apart from the source/action tags the merged table needs. */
+  private asEditRows(edits: any[], productType: string): any[] {
+    return (edits || []).map((edit: any) => ({
+      ...edit,
+      productType,
+      source: 'PENDING_EDIT',
+      actionName: 'UPDATE'
+    }));
+  }
+
+  /**
+   * Normalises maker-checker entries onto the same field names the pending-edit table already renders,
+   * so the existing template keeps working for both sources.
+   */
+  private asMakerCheckerRows(entries: any): any[] {
+    const items = Array.isArray(entries) ? entries : (entries?.pageItems ?? []);
+    return items
+      .filter((entry: any) => isProductEntity(entry?.entityName))
+      .filter((entry: any) => !isTempTableProductEdit(entry?.entityName, entry?.actionName))
+      .map((entry: any) => ({
+        id: entry.id,
+        source: 'MAKER_CHECKER',
+        entityName: entry.entityName,
+        actionName: (entry.actionName ?? '').toUpperCase(),
+        productType: PRODUCT_ENTITY_TYPE_LABEL[(entry.entityName ?? '').toUpperCase()] ?? entry.entityName,
+        savingsProductId: entry.resourceId ?? null,
+        savingsProductName: this.resolveName(entry),
+        makerUsername: entry.maker,
+        // /makercheckers returns madeOnDate as a Unix timestamp in seconds.
+        // new Date(seconds) misreads it as milliseconds → January 1970.
+        // Normalise to milliseconds here, matching DatetimeFormatPipe's unix() branch.
+        createdOn:
+          typeof entry.madeOnDate === 'number' && entry.madeOnDate < 1e12 ? entry.madeOnDate * 1000 : entry.madeOnDate,
+        status: 'PENDING'
+      }));
+  }
+
+  /**
+   * A CREATE has no resourceId - the product does not exist until approval - so the name comes from
+   * the submitted command payload. Falls back to the entity/id when the payload is absent (a DELETE
+   * carries none) or unparseable.
+   */
+  private resolveName(entry: any): string {
+    try {
+      const payload = entry?.commandAsJson ? JSON.parse(entry.commandAsJson) : null;
+      if (payload?.name) {
+        return payload.name;
+      }
+    } catch {
+      /* fall through to the identifier below */
+    }
+    return entry?.resourceId != null ? `${entry.entityName} #${entry.resourceId}` : entry.entityName;
+  }
 }

src/app/tasks/product-entities.ts

@@ -0,0 +1,121 @@
+/**
+ * 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/.
+ */
+
+/**
+ * Single source of truth for which maker-checker entities belong to Approvals -> Product Approval
+ * rather than the generic Checker Inbox.
+ *
+ * These are the entity names the application already treats as products: the five that own a
+ * /products/... view route and a pending-edit staging row, plus LOANPRODUCT and CHARGE, which are
+ * product-module entities whose maker-checker requests run entirely through the native pipeline.
+ * Deliberately excluded are the product-module *configuration* entities (tax groups, floating rates,
+ * delinquency buckets, product mixes, collaterals) - they stay in the Checker Inbox.
+ */
+export const PRODUCT_ENTITIES: readonly string[] = [
+  'LOANPRODUCT',
+  'SAVINGSPRODUCT',
+  'CURRENTPRODUCT',
+  'SHAREPRODUCT',
+  'FIXEDDEPOSITPRODUCT',
+  'RECURRINGDEPOSITPRODUCT',
+  'CHARGE'
+];
+
+/**
+ * The subset whose UPDATEs bypass the native command-source pipeline: the PUT handler calls
+ * submitEditForApproval, which stages the change in m_saving_product_temp and writes an *audit-only*
+ * command-source row alongside it. That row shows up in /makercheckers like any pending command, but
+ * approving it there replays the original handler and never clears the staging lock - so it must be
+ * actioned through /{producttype}/{id}/approve instead.
+ *
+ * Two consequences, both relied on below:
+ *  - Product Approval must drop these rows from its maker-checker feed, since the pending-edit feed
+ *    already supplies them (otherwise every product edit would be listed twice).
+ *  - View Checker Inbox must not offer approve/reject on them.
+ */
+export const TEMP_TABLE_PRODUCT_ENTITIES: readonly string[] = [
+  'SAVINGSPRODUCT',
+  'CURRENTPRODUCT',
+  'SHAREPRODUCT',
+  'FIXEDDEPOSITPRODUCT',
+  'RECURRINGDEPOSITPRODUCT'
+];
+
+/**
+ * Account entities staged the same way (savings/current account Nominee and Digital-Feature edits).
+ * Not products - they belong to Approvals -> Pending Account Edits - but their UPDATE rows have to
+ * stay out of the Checker Inbox for exactly the same lock reason.
+ */
+export const TEMP_TABLE_ACCOUNT_ENTITIES: readonly string[] = [
+  'SAVINGSACCOUNT',
+  'CURRENTACCOUNT'
+];
+
+/** Short type badge shown in the Product Approval table, matching the pending-edit productType tags. */
+export const PRODUCT_ENTITY_TYPE_LABEL: Record<string, string> = {
+  LOANPRODUCT: 'LOAN',
+  SAVINGSPRODUCT: 'SAVINGS',
+  CURRENTPRODUCT: 'CURRENT',
+  SHAREPRODUCT: 'SHARE',
+  FIXEDDEPOSITPRODUCT: 'FD',
+  RECURRINGDEPOSITPRODUCT: 'RD',
+  CHARGE: 'CHARGE'
+};
+
+/** Whether a maker-checker entry is a product request, and so belongs to Product Approval. */
+export function isProductEntity(entityName: string | undefined | null): boolean {
+  return PRODUCT_ENTITIES.includes((entityName ?? '').toUpperCase());
+}
+
+/** Whether a maker-checker entry is a product edit already staged in m_saving_product_temp. */
+export function isTempTableProductEdit(
+  entityName: string | undefined | null,
+  actionName: string | undefined | null
+): boolean {
+  return (
+    TEMP_TABLE_PRODUCT_ENTITIES.includes((entityName ?? '').toUpperCase()) &&
+    (actionName ?? '').toUpperCase() === 'UPDATE'
+  );
+}
+
+/** Whether a maker-checker entry is an account edit already staged for Pending Account Edits. */
+export function isTempTableAccountEdit(
+  entityName: string | undefined | null,
+  actionName: string | undefined | null
+): boolean {
+  return (
+    TEMP_TABLE_ACCOUNT_ENTITIES.includes((entityName ?? '').toUpperCase()) &&
+    (actionName ?? '').toUpperCase() === 'UPDATE'
+  );
+}
+
+/**
+ * Display-only expansion of the short type badge above, for the Product Approval table.
+ *
+ * Presentation layer only: `productType` is still the value the component switches on to pick the
+ * right fetch/approve/reject endpoint, so the underlying row data, filtering and routing are
+ * untouched. Both the short code ('FD') and the spelled-out form ('FIXED DEPOSIT') are accepted so
+ * either feed maps correctly.
+ */
+export const PRODUCT_TYPE_DISPLAY_LABEL: Record<string, string> = {
+  CURRENT: 'CURRENT PRODUCT',
+  SAVINGS: 'SAVINGS PRODUCT',
+  SHARE: 'SHARE PRODUCT',
+  CHARGE: 'CHARGE',
+  LOAN: 'LOAN PRODUCT',
+  FD: 'FIXED DEPOSIT PRODUCT',
+  'FIXED DEPOSIT': 'FIXED DEPOSIT PRODUCT',
+  RD: 'RECURRING DEPOSIT PRODUCT',
+  'RECURRING DEPOSIT': 'RECURRING DEPOSIT PRODUCT'
+};
+
+/** Label shown in the Product Approval Type column. Unmapped types render unchanged. */
+export function productTypeDisplayLabel(productType: string | undefined | null): string {
+  const raw = (productType ?? '').toString();
+  return PRODUCT_TYPE_DISPLAY_LABEL[raw.trim().toUpperCase()] ?? raw;
+}

src/app/tasks/tasks-routing.module.ts

@@ -128,13 +128,19 @@ const routes: Routes = [
           }
         },
         {
-          path: 'pending-savings-products',
+          path: 'product-approval',
           component: PendingSavingsProductsComponent,
-          data: { title: 'Pending Savings Product Edits' },
+          data: { title: 'Product Approval' },
           resolve: {
             pendingSavingsProductsData: GetPendingSavingsProducts
           }
         },
+        {
+          // The tab was called "Pending Product Edits" until it grew to cover product CREATE and
+          // DELETE too; keep its old path working for bookmarks and saved links.
+          path: 'pending-savings-products',
+          redirectTo: 'product-approval'
+        },
         {
           path: 'pending-savings-account-edits',
           component: PendingSavingsAccountEditsComponent,

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

@@ -9,7 +9,7 @@
 <div class="vci" [class.vci--dialog]="isDialog">
   <!-- The heading lives here in both modes, so a dialog does not end up showing it twice. -->
   <div class="vci-head">
-    <span class="vci-head__title">{{ 'labels.heading.View Checker Inbox' | translate }}</span>
+    <span class="vci-head__title">{{ headingTitle }}</span>
     @if (isDialog) {
       <button type="button" class="vci-head__close" (click)="close()">
         <fa-icon icon="times"></fa-icon>
@@ -112,11 +112,8 @@
         <div class="vci-section">
           <div class="vci-section__title">{{ 'labels.heading.Command' | translate }}</div>
           <dl class="vci-grid">
-            @for (json of jsondata | keyvalue; track json.key) {
-              <div class="vci-kv">
-                <dt>{{ json.key }}</dt>
-                <dd>{{ json.value }}</dd>
-              </div>
+            @for (field of commandFields; track $index) {
+              <ng-container *ngTemplateOutlet="commandField; context: { $implicit: field }"></ng-container>
             }
           </dl>
         </div>
@@ -124,3 +121,54 @@
     </div>
   }
 </div>
+
+<!-- Recursive renderer for one Command payload field. Scalars stay in the two-column grid; objects and
+     arrays span the full width so their nested content has room instead of overflowing the dialog. -->
+<ng-template #commandField let-field>
+  @switch (field.kind) {
+    @case ('object') {
+      <div class="vci-kv vci-kv--wide">
+        <dt>{{ field.label }}</dt>
+        <dd>
+          <dl class="vci-subgrid">
+            @for (child of field.fields; track $index) {
+              <ng-container *ngTemplateOutlet="commandField; context: { $implicit: child }"></ng-container>
+            }
+          </dl>
+        </dd>
+      </div>
+    }
+    @case ('list') {
+      <div class="vci-kv vci-kv--wide">
+        <dt>
+          {{ field.label }} <span class="vci-count">{{ field.items.length }}</span>
+        </dt>
+        <dd>
+          @if (field.items.length === 0) {
+            <span class="vci-none">None</span>
+          }
+          @for (item of field.items; track $index) {
+            @if (item.kind === 'scalar') {
+              <span class="vci-chip">{{ item.text }}</span>
+            } @else {
+              <div class="vci-entry">
+                <div class="vci-entry__head">{{ item.label }}</div>
+                <dl class="vci-subgrid">
+                  @for (child of item.kind === 'object' ? item.fields : item.items; track $index) {
+                    <ng-container *ngTemplateOutlet="commandField; context: { $implicit: child }"></ng-container>
+                  }
+                </dl>
+              </div>
+            }
+          }
+        </dd>
+      </div>
+    }
+    @default {
+      <div class="vci-kv">
+        <dt>{{ field.label }}</dt>
+        <dd>{{ field.text }}</dd>
+      </div>
+    }
+  }
+</ng-template>

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

@@ -225,6 +225,83 @@ $bg-page: #f8fafc;
     line-height: 1.35;
     overflow-wrap: anywhere;
   }
+
+  // A nested object/array needs the full grid width, not one of the two columns, or its own
+  // label/value pairs get squeezed into a sliver and wrap character by character.
+  &--wide {
+    grid-column: 1 / -1;
+  }
+}
+
+/* Nested object/array rendering inside the Command section. Reuses .vci-kv for the leaves, so a
+   nested field looks like every other label/value pair, just indented under its parent. */
+.vci-subgrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 10px 20px;
+  margin: 6px 0 0;
+  padding: 10px 12px;
+  border-left: 2px solid $border;
+  background: $bg-page;
+  border-radius: 0 6px 6px 0;
+  min-width: 0;
+}
+
+/* One element of an array of objects. */
+.vci-entry {
+  margin-top: 8px;
+  border: 1px solid $border;
+  border-radius: 8px;
+  background: #fff;
+  overflow: hidden;
+
+  &__head {
+    padding: 6px 12px;
+    background: $bg-page;
+    border-bottom: 1px solid $border;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: $text-mid;
+  }
+
+  .vci-subgrid {
+    margin: 0;
+    border-left: 0;
+    background: transparent;
+  }
+}
+
+/* Count badge next to an array's label. */
+.vci-count {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 7px;
+  border-radius: 20px;
+  background: $border;
+  color: $text-mid;
+  font-size: 10.5px;
+  font-weight: 700;
+}
+
+/* A scalar element of an array (e.g. a list of codes) - shown inline rather than as a card. */
+.vci-chip {
+  display: inline-block;
+  margin: 3px 6px 0 0;
+  padding: 3px 10px;
+  border-radius: 6px;
+  background: $bg-page;
+  border: 1px solid $border;
+  font-size: 12.5px;
+  color: $text-dark;
+  overflow-wrap: anywhere;
+}
+
+.vci-none {
+  font-size: 13px;
+  font-style: italic;
+  color: $text-soft;
 }
 
 .vci-tag {

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

@@ -19,9 +19,62 @@ import { TasksService } from '../tasks.service';
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { KeyValuePipe } from '@angular/common';
+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';
+
+/**
+ * One row of the rendered Command payload. The dialog turns the parsed command JSON into a tree of
+ * these so the template can lay nested objects out as label/value pairs and arrays as repeated
+ * entries, rather than dumping raw JSON at the checker. Purely a view model — the command data
+ * itself (`jsondata`) is left exactly as the API returned it.
+ */
+export type CommandField =
+  | { label: string; kind: 'scalar'; text: string }
+  | { label: string; kind: 'object'; fields: CommandField[] }
+  | { label: string; kind: 'list'; items: CommandField[] };
+
+/**
+ * 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
+ * sensibly - no per-product hard-coding.
+ */
+const LABEL_ACRONYMS = new Set([
+  'upi',
+  'id',
+  'ids',
+  'url',
+  'api',
+  'ifsc',
+  'micr',
+  'kyc',
+  'ckyc',
+  'aml',
+  'pan',
+  'gst',
+  'cgst',
+  'sgst',
+  'igst',
+  'tds',
+  'gl',
+  'neft',
+  'rtgs',
+  'imps',
+  'nach',
+  'ecs',
+  'atm',
+  'nri',
+  'cif',
+  'dob',
+  'otp',
+  'sms',
+  'emi',
+  'fd',
+  'rd',
+  'mis',
+  'nef'
+]);
 
 @Component({
   selector: 'mifosx-view-checker-inbox',
@@ -30,7 +83,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     FaIconComponent,
-    KeyValuePipe,
+    NgTemplateOutlet,
     DateFormatPipe
   ]
 })
@@ -44,7 +97,9 @@ export class ViewCheckerInboxComponent {
    *  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. */
   private dialogRef = inject(MatDialogRef<ViewCheckerInboxComponent>, { optional: true });
-  private dialogData = inject<{ checkerId: number | string } | null>(MAT_DIALOG_DATA, { optional: true });
+  private dialogData = inject<{ checkerId: number | string; title?: string } | null>(MAT_DIALOG_DATA, {
+    optional: true
+  });
 
   loading = false;
 
@@ -52,6 +107,84 @@ export class ViewCheckerInboxComponent {
     return !!this.dialogRef;
   }
 
+  /**
+   * Heading text. Defaults to the Checker Inbox heading — which is what the Checker Inbox itself and
+   * the direct route both get — but a caller opening this dialog from another tab can supply its own,
+   * so the checker sees which queue the request came from. Nothing else about the dialog changes.
+   */
+  get headingTitle(): string {
+    return this.dialogData?.title ?? this.translateService.instant('labels.heading.View Checker Inbox');
+  }
+
+  /**
+   * The Command payload as a render tree. Built once per detail load rather than exposed as a getter,
+   * so change detection is not re-walking the payload on every cycle.
+   */
+  commandFields: CommandField[] = [];
+
+  /** camelCase / snake_case key -> readable label, e.g. `upiFacility` -> "UPI Facility". */
+  private labelFor(key: string): string {
+    const spaced = String(key ?? '')
+      .replace(/[_\-.]+/g, ' ')
+      // splitAt lower|digit -> Upper, and at the tail of a run of capitals (`UPIFacility` -> `UPI Facility`)
+      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+      .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+      .trim();
+    if (!spaced) {
+      return '';
+    }
+    return spaced
+      .split(/\s+/)
+      .map((word) =>
+        LABEL_ACRONYMS.has(word.toLowerCase()) ? word.toUpperCase() : word.charAt(0).toUpperCase() + word.slice(1)
+      )
+      .join(' ');
+  }
+
+  /** Leaf rendering. Booleans read as Yes/No; everything else keeps the text it always had. */
+  private scalarText(value: any): string {
+    if (value === null || value === undefined) {
+      return '—';
+    }
+    if (typeof value === 'boolean') {
+      return value ? 'Yes' : 'No';
+    }
+    return String(value);
+  }
+
+  /**
+   * 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.
+   */
+  private toField(label: string, value: any): CommandField {
+    if (Array.isArray(value)) {
+      return {
+        label,
+        kind: 'list',
+        items: value.map((item, index) =>
+          item !== null && typeof item === 'object'
+            ? this.toField(`${label} ${index + 1}`, item)
+            : { label: '', kind: 'scalar' as const, text: this.scalarText(item) }
+        )
+      };
+    }
+    if (value !== null && typeof value === 'object') {
+      return {
+        label,
+        kind: 'object',
+        fields: Object.keys(value).map((key) => this.toField(this.labelFor(key), value[key]))
+      };
+    }
+    return { label, kind: 'scalar', text: this.scalarText(value) };
+  }
+
+  private buildCommandFields(payload: any): CommandField[] {
+    if (!payload || typeof payload !== 'object' || Array.isArray(payload)) {
+      return [];
+    }
+    return Object.keys(payload).map((key) => this.toField(this.labelFor(key), payload[key]));
+  }
+
   /** Checker Inbox Details Data */
   checkerInboxDetail: any;
   /** JsonData */
@@ -60,24 +193,16 @@ export class ViewCheckerInboxComponent {
   displayJSONData = false;
 
   /**
-   * These entities' pending edits are gated by our own m_savings_product_temp lock, not the native
-   * command-source pipeline. Approving/rejecting them here would replay the original command handler
-   * directly via /makercheckers/{id}?command=approve and never clear our temp table's lock. Action them
-   * from Approvals -> Pending Product Edits instead.
+   * A product edit staged in m_saving_product_temp is not approvable here: /makercheckers/{id} replays
+   * the original command handler and never clears the staging lock. Product Approval actions those
+   * through the product's own approve/reject endpoint instead.
+   *
+   * Scoped to staged UPDATEs on purpose. Product CREATE and DELETE rows are ordinary command-source
+   * entries with no staging row, and Product Approval opens this dialog to action them - so they must
+   * keep their buttons.
    */
-  private readonly productEditEntities = [
-    'SAVINGSPRODUCT',
-    'CURRENTPRODUCT',
-    'SHAREPRODUCT',
-    'FIXEDDEPOSITPRODUCT',
-    'RECURRINGDEPOSITPRODUCT'
-  ];
-
   get isProductEditEntry(): boolean {
-    return (
-      this.productEditEntities.includes(this.checkerInboxDetail?.entityName) &&
-      this.checkerInboxDetail?.actionName === 'UPDATE'
-    );
+    return isTempTableProductEdit(this.checkerInboxDetail?.entityName, this.checkerInboxDetail?.actionName);
   }
 
   /**
@@ -88,19 +213,27 @@ export class ViewCheckerInboxComponent {
    * @param {TasksService} tasksService Tasks Service.
    */
   constructor() {
-    // As a popup the list only has summary rows, so the detail (which carries commandAsJson) is
-    // fetched here; as a route it is already resolved by GetCheckerInboxDetailResolver.
-    if (this.dialogData?.checkerId != null) {
-      this.loading = true;
-      this.tasksService.getCheckerInboxDetail(this.dialogData.checkerId).subscribe((detail: any) => {
-        this.loading = false;
-        this.applyDetail(detail);
-      });
-      return;
-    }
+    // Route entry: detail is pre-fetched by the resolver and injected via route.data.
     this.route.data.subscribe((data: { checkerInboxDetail: any }) => {
-      this.applyDetail(data.checkerInboxDetail);
+      if (data.checkerInboxDetail) {
+        this.applyDetail(data.checkerInboxDetail);
+      }
     });
+
+    // Dialog entry: no resolver fires, so fetch the detail imperatively using the
+    // checkerId the caller passed in MAT_DIALOG_DATA.
+    if (this.dialogData?.checkerId != null && !this.checkerInboxDetail) {
+      this.loading = true;
+      this.tasksService.getCheckerInboxDetail(this.dialogData.checkerId).subscribe({
+        next: (detail: any) => {
+          this.loading = false;
+          this.applyDetail(detail);
+        },
+        error: () => {
+          this.loading = false;
+        }
+      });
+    }
   }
 
   private applyDetail(detail: any): void {
@@ -113,6 +246,7 @@ export class ViewCheckerInboxComponent {
       this.jsondata = {};
     }
     this.displayJSONData = !_.isEmpty(this.jsondata);
+    this.commandFields = this.buildCommandFields(this.jsondata);
   }
 
   /** "Done" for this screen — closes the popup (telling the list to refresh) when opened as a

src/app/users/dsc/dsc-list/dsc-list.component.ts

@@ -52,7 +52,6 @@ import { RevokeDscDialogComponent } from '../revoke-dsc-dialog/revoke-dsc-dialog
     MatRow,
     MatButton,
     MatIconButton,
-    MatIcon,
     MatMenu,
     MatMenuItem,
     MatMenuTrigger,