feat: implement product approval workflow updates

2026-09-09 11:32:37 +05:30
parent abc966d507
commit 227949f8b2
31 changed files with 1472 additions and 277 deletions
@@ -7,7 +7,7 @@
 -->

 <div class="cv-tab-content">
-  <!-- Action bar (search + advanced toggle + Approve/Delete/Reject) — only
+  <!-- Action bar (search + advanced toggle + Approve/Reject) — only
       rendered when there's actual data to work with. An empty inbox shows
       the friendly empty-state block below without these controls. -->
  @if (checkerData) {
@@ -37,9 +37,6 @@
        <button mat-stroked-button class="cv-btn cv-btn-approve" (click)="approveChecker()">
          <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
        </button>
-        <button mat-stroked-button class="cv-btn cv-btn-delete" (click)="deleteChecker()">
-          <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
-        </button>
        <button mat-stroked-button class="cv-btn cv-btn-reject" (click)="rejectChecker()">
          <fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reject' | translate }}
        </button>
@@ -112,15 +112,6 @@ $text-muted: #64748b;
  }
 }

-.cv-btn-delete {
-  border-color: #dc2626;
-  color: #dc2626;
-
-  &:hover {
-    background: #fef2f2;
-  }
-}
-
 .cv-btn-reject {
  border-color: #64748b;
  color: #64748b;
@@ -33,12 +33,14 @@ import { SettingsService } from 'app/settings/settings.service';

 /** Dialog Components */
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+import { ViewCheckerInboxComponent } from '../../view-checker-inbox/view-checker-inbox.component';
 import { Dates } from 'app/core/utils/dates';
 import { TranslateService } from '@ngx-translate/core';
 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',
@@ -104,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)
    );
  }

@@ -141,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);
@@ -181,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 {
@@ -242,20 +236,6 @@ export class CheckerInboxComponent implements OnInit {
    });
  }

-  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.bulkDeleteChecker();
-      }
-    });
-  }
-
  bulkCheckerApproveorReject(action: any) {
    const selectedAccounts = this.selection.selected.length;
    const listSelectedAccounts = this.selection.selected;
@@ -270,22 +250,94 @@ export class CheckerInboxComponent implements OnInit {
    });
  }

-  bulkDeleteChecker() {
-    const selectedAccounts = this.selection.selected.length;
-    const listSelectedAccounts = this.selection.selected;
-    let approvedAccounts = 0;
-    listSelectedAccounts.forEach((element: any) => {
-      this.tasksService.deleteMakerChecker(element.id).subscribe((response: any) => {
-        approvedAccounts++;
-        if (selectedAccounts === approvedAccounts) {
+  applyFilter(filterValue: string = '') {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  /**
+   * 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);
+
+    // DIAGNOSTIC — open browser DevTools console to confirm the row payload.
+    // Remove after confirming root cause.
+    console.log('[CheckerInbox] viewEntry row =', {
+      id: row.id,
+      entityName,
+      actionName: row.actionName,
+      resourceId,
+      resolvedRoute: route
+    });
+
+    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 },
+        autoFocus: false
+      })
+      .afterClosed()
+      .subscribe((result: any) => {
+        // Only reload when something was actually actioned — a plain close must not throw away the
+        // checker's current search, which reload() does by re-navigating the route.
+        if (result?.refreshed) {
          this.reload();
        }
      });
-    });
-  }
-
-  applyFilter(filterValue: string = '') {
-    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

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

@@ -49,8 +63,18 @@
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef>Actions</th>
          <td mat-cell *matCellDef="let edit">
-            <button mat-stroked-button class="psp-btn psp-btn-view" (click)="viewDiff(edit)">
-              <fa-icon icon="eye" class="m-r-10"></fa-icon>Compare
+            <button
+              mat-stroked-button
+              class="psp-btn psp-btn-view"
+              [disabled]="loadingDiffFor === edit"
+              (click)="viewDiff(edit)"
+            >
+              <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
@@ -85,6 +85,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;
+  }
 }

 .psp-diff-panel {
@@ -27,11 +27,15 @@ import { MatIconButton } from '@angular/material/button';
 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',
@@ -59,12 +63,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',
@@ -76,6 +82,9 @@ export class PendingSavingsProductsComponent {
  originalProduct: any = null;
  diffRows: { label: string; original: any; proposed: any; changed: boolean }[] = [];

+  /** Tracks which row currently has a diff loading in progress, to show a spinner on that row. */
+  loadingDiffFor: any = null;
+
  constructor() {
    this.route.data.subscribe((data: { pendingSavingsProductsData: any }) => {
      const items = data.pendingSavingsProductsData || [];
@@ -88,6 +97,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)
@@ -141,23 +158,54 @@ export class PendingSavingsProductsComponent {
    }
  }

-  viewDiff(edit: any): void {
-    this.selectedEdit = edit;
-    this.diffRows = [];
-    this.getOriginalProduct$(edit).subscribe((original: any) => {
-      this.originalProduct = original;
-      const proposed = edit.proposedChanges || {};
-      const keys = Object.keys(proposed);
-      this.diffRows = keys.map((key) => {
-        const originalValue = original ? original[key] : undefined;
-        const proposedValue = proposed[key];
-        return {
-          label: key,
-          original: originalValue,
-          proposed: proposedValue,
-          changed: JSON.stringify(originalValue) !== JSON.stringify(proposedValue)
-        };
-      });
+  /**
+   * 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: row.savingsProductName,
+            original: original ?? {},
+            proposed: row.proposedChanges ?? {}
+          }
+        });
+      },
+      error: () => {
+        this.loadingDiffFor = null;
+      }
    });
  }

@@ -167,22 +215,46 @@ export class PendingSavingsProductsComponent {
    this.diffRows = [];
  }

-  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',
@@ -194,7 +266,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
      }
@@ -202,7 +274,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());
      }
    });
  }
@@ -0,0 +1,57 @@
+<!--
+  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/.
+-->
+
+<div class="diff-dialog">
+  <!-- Header -->
+  <div class="diff-header" mat-dialog-title>
+    <div class="diff-header__title">
+      <span class="diff-header__icon">⊕</span>
+      Product Edit Diff
+      <span class="diff-header__name">{{ data.productName }}</span>
+    </div>
+    <div class="diff-header__meta">
+      <span class="diff-badge" [ngClass]="changedCount > 0 ? 'diff-badge--changed' : 'diff-badge--none'">
+        {{ changedCount }} field{{ changedCount !== 1 ? 's' : '' }} changed
+      </span>
+      <button class="diff-toggle" (click)="showChangedOnly = !showChangedOnly">
+        {{ showChangedOnly ? 'Show All' : 'Changed Only' }}
+      </button>
+    </div>
+  </div>
+
+  <!-- Body -->
+  <mat-dialog-content class="diff-body">
+    <table class="diff-table" *ngIf="visibleRows.length > 0; else noRows">
+      <thead>
+        <tr>
+          <th class="diff-table__label">Field</th>
+          <th class="diff-table__val diff-table__val--orig">Current</th>
+          <th class="diff-table__val diff-table__val--prop">Proposed</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let row of visibleRows" [ngClass]="{ 'diff-row--changed': row.changed }">
+          <td class="diff-table__label">{{ row.label }}</td>
+          <td class="diff-table__val diff-table__val--orig">{{ row.original }}</td>
+          <td class="diff-table__val diff-table__val--prop">
+            <span *ngIf="row.changed" class="diff-new">{{ row.proposed }}</span>
+            <span *ngIf="!row.changed">{{ row.proposed }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <ng-template #noRows>
+      <p class="diff-empty">No differences found.</p>
+    </ng-template>
+  </mat-dialog-content>
+
+  <!-- Actions -->
+  <mat-dialog-actions align="end" class="diff-actions">
+    <button mat-stroked-button (click)="close()">Close</button>
+  </mat-dialog-actions>
+</div>
@@ -0,0 +1,194 @@
+/**
+ * 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/.
+ */
+
+$border: #e2e8f0;
+$bg-page: #f8fafc;
+$text-dark: #1e293b;
+$text-mid: #475569;
+$text-soft: #94a3b8;
+$changed: #fef9c3;
+$changed-border: #fde047;
+$new-text: #15803d;
+
+.diff-dialog {
+  display: flex;
+  flex-direction: column;
+  min-width: 560px;
+  max-width: 820px;
+}
+
+// ── Header ───────────────────────────────────────────────────────────────────
+.diff-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid $border;
+  background: $bg-page;
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 15px;
+    font-weight: 700;
+    color: $text-dark;
+  }
+
+  &__icon {
+    font-size: 18px;
+    color: #2563eb;
+  }
+
+  &__name {
+    font-size: 13px;
+    font-weight: 500;
+    color: $text-mid;
+    border-left: 1px solid $border;
+    padding-left: 8px;
+  }
+
+  &__meta {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}
+
+.diff-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+
+  &--changed {
+    background: #fef9c3;
+    color: #854d0e;
+    border: 1px solid #fde047;
+  }
+
+  &--none {
+    background: #f0fdf4;
+    color: #166534;
+    border: 1px solid #86efac;
+  }
+}
+
+.diff-toggle {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 12px;
+  border: 1px solid $border;
+  border-radius: 6px;
+  background: #fff;
+  color: $text-mid;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+
+  &:hover {
+    background: #f1f5f9;
+    color: $text-dark;
+  }
+}
+
+// ── Body ─────────────────────────────────────────────────────────────────────
+.diff-body {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 0 !important;
+}
+
+.diff-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+
+  th,
+  td {
+    padding: 9px 14px;
+    text-align: left;
+    border-bottom: 1px solid $border;
+    vertical-align: top;
+  }
+
+  th {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: $text-soft;
+    background: $bg-page;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  &__label {
+    width: 28%;
+    font-weight: 600;
+    color: $text-mid;
+  }
+
+  &__val {
+    width: 36%;
+    color: $text-dark;
+    word-break: break-word;
+
+    &--orig {
+      background: #fff;
+    }
+
+    &--prop {
+      background: #fff;
+    }
+  }
+}
+
+.diff-row--changed {
+  background: $changed !important;
+
+  td {
+    border-bottom-color: $changed-border;
+  }
+
+  .diff-table__val--orig {
+    background: #fef2f2;
+    color: #b91c1c;
+    text-decoration: line-through;
+    text-decoration-color: #fca5a5;
+  }
+
+  .diff-table__val--prop {
+    background: #f0fdf4;
+  }
+}
+
+.diff-new {
+  color: $new-text;
+  font-weight: 600;
+}
+
+.diff-empty {
+  padding: 32px;
+  text-align: center;
+  color: $text-soft;
+  font-style: italic;
+  font-size: 14px;
+}
+
+// ── Actions ───────────────────────────────────────────────────────────────────
+.diff-actions {
+  padding: 12px 20px;
+  border-top: 1px solid $border;
+  background: $bg-page;
+}
@@ -0,0 +1,95 @@
+/**
+ * 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 { Component, inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { NgClass } from '@angular/common';
+
+export interface ProductEditDiffDialogData {
+  productName: string;
+  original: Record<string, any>;
+  proposed: Record<string, any>;
+}
+
+export interface DiffRow {
+  label: string;
+  original: string;
+  proposed: string;
+  changed: boolean;
+}
+
+@Component({
+  selector: 'mifosx-product-edit-diff-dialog',
+  templateUrl: './product-edit-diff-dialog.component.html',
+  styleUrls: ['./product-edit-diff-dialog.component.scss'],
+  imports: [
+    MatDialogModule,
+    MatButtonModule,
+    NgClass
+  ]
+})
+export class ProductEditDiffDialogComponent {
+  dialogRef = inject(MatDialogRef<ProductEditDiffDialogComponent>);
+  data: ProductEditDiffDialogData = inject(MAT_DIALOG_DATA);
+
+  diffRows: DiffRow[] = [];
+  showChangedOnly = false;
+
+  get visibleRows(): DiffRow[] {
+    return this.showChangedOnly ? this.diffRows.filter((r) => r.changed) : this.diffRows;
+  }
+
+  get changedCount(): number {
+    return this.diffRows.filter((r) => r.changed).length;
+  }
+
+  constructor() {
+    this.diffRows = this.buildDiff(this.data.original, this.data.proposed);
+  }
+
+  private buildDiff(original: Record<string, any>, proposed: Record<string, any>): DiffRow[] {
+    const allKeys = new Set([
+      ...Object.keys(original),
+      ...Object.keys(proposed)
+    ]);
+    const rows: DiffRow[] = [];
+    allKeys.forEach((key) => {
+      const orig = original[key];
+      const prop = proposed[key];
+      const origStr = this.format(orig);
+      const propStr = this.format(prop);
+      rows.push({
+        label: this.labelFor(key),
+        original: origStr,
+        proposed: propStr,
+        changed: origStr !== propStr
+      });
+    });
+    return rows.sort((a, b) => (a.changed === b.changed ? 0 : a.changed ? -1 : 1));
+  }
+
+  private format(value: any): string {
+    if (value === null || value === undefined) return '—';
+    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+    if (typeof value === 'object') return JSON.stringify(value);
+    return String(value);
+  }
+
+  private labelFor(key: string): string {
+    return key
+      .replace(/([a-z])([A-Z])/g, '$1 $2')
+      .replace(/[_\-.]+/g, ' ')
+      .replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}
@@ -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,
@@ -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,