fix: restore Product Approval action button colors

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html

@@ -119,7 +119,7 @@
         <button
           mat-raised-button
           color="primary"
-          [disabled]="!glAccountForm.valid"
+          [disabled]="!glAccountForm.valid || submitting"
           *mifosxHasPermission="'CREATE_GLACCOUNT'"
         >
           {{ 'labels.buttons.Submit' | translate }}

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts

@@ -14,6 +14,7 @@ import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
 import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
 
@@ -42,6 +43,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateGlAccountComponent implements OnInit, AfterViewInit {
   private formBuilder = inject(UntypedFormBuilder);
   private accountingService = inject(AccountingService);
+  private alertService = inject(AlertService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private configurationWizardService = inject(ConfigurationWizardService);
@@ -50,6 +52,8 @@ export class CreateGlAccountComponent implements OnInit, AfterViewInit {
 
   /** GL account form. */
   glAccountForm: UntypedFormGroup;
+  /** Submitting state to prevent duplicate submissions. */
+  submitting = false;
   /** Chart of accounts data. */
   chartOfAccountsData: any;
   /** Account type data. */
@@ -166,24 +170,40 @@ export class CreateGlAccountComponent implements OnInit, AfterViewInit {
 
   /**
    * Submits the gl account form and creates gl account,
-   * if successful redirects to view created account.
+   * if successful redirects to view created account or back to list if awaiting approval.
    */
   submit() {
-    if (this.glAccountForm.invalid) {
+    if (this.glAccountForm.invalid || this.submitting) {
       return;
     }
-    this.accountingService.createGlAccount(this.glAccountForm.value).subscribe((response: any) => {
-      if (this.configurationWizardService.showChartofAccounts) {
-        this.configurationWizardService.showChartofAccounts = false;
-        this.openDialog();
-      } else {
-        this.router.navigate(
-          [
-            '../view',
-            response.resourceId
-          ],
-          { relativeTo: this.route }
-        );
+    this.submitting = true;
+    this.accountingService.createGlAccount(this.glAccountForm.value).subscribe({
+      next: (response: any) => {
+        if (response?.resourceId) {
+          if (this.configurationWizardService.showChartofAccounts) {
+            this.configurationWizardService.showChartofAccounts = false;
+            this.openDialog();
+          } else {
+            this.router.navigate(
+              [
+                '../view',
+                response.resourceId
+              ],
+              { relativeTo: this.route }
+            );
+          }
+        } else if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'GL Account submitted successfully for approval.'
+          });
+          this.router.navigate([this.cancelRoute], { relativeTo: this.route });
+        } else {
+          this.router.navigate([this.cancelRoute], { relativeTo: this.route });
+        }
+      },
+      error: () => {
+        this.submitting = false;
       }
     });
   }

src/app/clients/clients.service.ts

@@ -16,7 +16,7 @@ import { Observable, of, throwError } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { map, catchError } from 'rxjs/operators';
 
-import { environment } from 'environments/environment';
+import { environment } from '../../environments/environment';
 import { dataUrlToFile } from 'app/shared/utils/data-url.util';
 
 /**

src/app/clients/services/external-national-id.service.ts

@@ -11,7 +11,7 @@ import { UntypedFormGroup } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter, switchMap, takeUntil, timeout, catchError } from 'rxjs/operators';
 import { of } from 'rxjs';
-import { environment } from 'environments/environment';
+import { environment } from '../../../environments/environment';
 import { ClientsService } from '../clients.service';
 import {
   EXTERNAL_ID_STATUS_KEYS,

src/app/core/services/keyboard-shortcut.service.ts

@@ -0,0 +1,228 @@
+/**
+ * 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 { Injectable, inject, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { fromEvent, Subscription, BehaviorSubject } from 'rxjs';
+import { KeyboardShortcutsConfiguration } from '../../keyboards-shortcut-config';
+import { AuthenticationService } from '../authentication/authentication.service';
+import { UserPreferenceService } from './user-preference.service';
+import { DocumentationLinksService } from '../../shared/services/documentation-links.service';
+
+export interface ShortcutItem {
+  title: string;
+  ctrlKey: boolean;
+  shiftKey: boolean;
+  altKey: boolean;
+  key: string;
+  route: string;
+  id?: string;
+  custom?: boolean;
+  action?: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KeyboardShortcutService implements OnDestroy {
+  private router = inject(Router);
+  private activatedRoute = inject(ActivatedRoute);
+  private authenticationService = inject(AuthenticationService);
+  private userPreferenceService = inject(UserPreferenceService);
+  private documentationLinks = inject(DocumentationLinksService);
+
+  private keydownSubscription: Subscription;
+  private activeShortcutsSubject = new BehaviorSubject<ShortcutItem[]>([]);
+  public activeShortcuts$ = this.activeShortcutsSubject.asObservable();
+
+  constructor() {
+    this.keydownSubscription = fromEvent<KeyboardEvent>(window, 'keydown').subscribe((event) => {
+      this.handleKeydown(event);
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.keydownSubscription) {
+      this.keydownSubscription.unsubscribe();
+    }
+  }
+
+  public initShortcuts(): void {
+    const credentials = this.authenticationService.getCredentials();
+    if (!credentials || !credentials.userId) {
+      this.loadDefaults();
+      return;
+    }
+
+    this.userPreferenceService.getPreference(credentials.userId, 'keyboard_shortcuts').subscribe({
+      next: (data) => {
+        if (data && data.value) {
+          try {
+            const parsed = JSON.parse(data.value);
+            if (Array.isArray(parsed)) {
+              parsed.forEach((shortcut: ShortcutItem) => {
+                if (shortcut.custom && shortcut.action === 'navigate' && shortcut.route) {
+                  shortcut.route = this.normalizeRouteStr(shortcut.route);
+                }
+              });
+            }
+            this.activeShortcutsSubject.next(parsed);
+          } catch (e) {
+            console.error('Error parsing shortcuts', e);
+            this.loadDefaults();
+          }
+        } else {
+          this.loadDefaults();
+        }
+      },
+      error: () => {
+        this.loadDefaults();
+      }
+    });
+  }
+
+  public loadDefaults(): void {
+    const config = new KeyboardShortcutsConfiguration();
+    this.activeShortcutsSubject.next(config.buttonsArray);
+  }
+
+  public updateShortcuts(shortcuts: ShortcutItem[]): void {
+    const credentials = this.authenticationService.getCredentials();
+    if (credentials && credentials.userId) {
+      const cleanedShortcuts = shortcuts.map((s) => {
+        const clean: any = {
+          title: s.title,
+          ctrlKey: s.ctrlKey,
+          shiftKey: s.shiftKey,
+          altKey: s.altKey,
+          key: s.key,
+          route: s.route
+        };
+        if (s.id !== undefined) clean.id = s.id;
+        if (s.custom !== undefined) clean.custom = s.custom;
+        if (s.action !== undefined) clean.action = s.action;
+        return clean;
+      });
+
+      this.userPreferenceService
+        .updatePreference(credentials.userId, 'keyboard_shortcuts', JSON.stringify(cleanedShortcuts))
+        .subscribe(() => {
+          this.activeShortcutsSubject.next(shortcuts);
+        });
+    } else {
+      this.activeShortcutsSubject.next(shortcuts);
+    }
+  }
+
+  public resetToDefaults(): void {
+    const credentials = this.authenticationService.getCredentials();
+    const config = new KeyboardShortcutsConfiguration();
+    if (credentials && credentials.userId) {
+      this.userPreferenceService
+        .updatePreference(credentials.userId, 'keyboard_shortcuts', JSON.stringify(config.buttonsArray))
+        .subscribe(() => {
+          this.activeShortcutsSubject.next(config.buttonsArray);
+        });
+    } else {
+      this.activeShortcutsSubject.next(config.buttonsArray);
+    }
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    const activeShortcuts = this.activeShortcutsSubject.getValue();
+    const routeD = activeShortcuts.find(
+      (x) =>
+        x.ctrlKey === event.ctrlKey &&
+        x.shiftKey === event.shiftKey &&
+        x.altKey === event.altKey &&
+        x.key.toLowerCase() === event.key.toLowerCase()
+    );
+
+    if (routeD !== undefined) {
+      event.preventDefault(); // Prevent default browser actions for matched shortcuts
+
+      if (routeD.custom) {
+        if (routeD.action === 'navigate' && routeD.route) {
+          this.router.navigate([routeD.route]);
+        }
+      } else {
+        switch (routeD.id) {
+          case 'logout':
+            this.authenticationService.logout().subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
+            break;
+          case 'help':
+            this.documentationLinks.open('userManual');
+            break;
+          case 'runReport':
+            const runReportElement = document.getElementById('runReport');
+            if (runReportElement) runReportElement.click();
+            break;
+          case 'cancel':
+            const cancelEl = document.querySelector('[data-shortcut-action="cancel"]') as HTMLElement;
+            if (cancelEl) {
+              cancelEl.click();
+            } else {
+              const cancelButtons = Array.from(document.querySelectorAll('button')).filter(
+                (el) => el.textContent && el.textContent.trim() === 'Cancel'
+              );
+              if (cancelButtons.length > 0) cancelButtons[0].click();
+            }
+            break;
+          case 'submit':
+            const submitEl = document.querySelector('[data-shortcut-action="submit"]') as HTMLElement;
+            if (submitEl) {
+              submitEl.click();
+            } else {
+              const submitButtons = Array.from(document.querySelectorAll('button')).filter(
+                (el) => el.textContent && el.textContent.trim() === 'Submit'
+              );
+              if (submitButtons.length > 0) submitButtons[0].click();
+            }
+            break;
+          default:
+            this.router.navigate([routeD.route], { relativeTo: this.activatedRoute });
+        }
+      }
+    }
+  }
+
+  public normalizeRouteStr(route: string | undefined | null): string {
+    if (!route) return '';
+    let r = route.trim();
+
+    try {
+      if (r.startsWith('http://') || r.startsWith('https://')) {
+        const url = new URL(r);
+        if (url.hash && url.hash.startsWith('#')) {
+          let path = url.hash.substring(1);
+          if (!path.startsWith('/')) {
+            path = '/' + path;
+          }
+          return path;
+        }
+        return url.pathname + url.search;
+      }
+    } catch (e) {
+      // Ignore
+    }
+
+    if (r.includes('#/')) {
+      r = r.substring(r.indexOf('#/') + 1);
+    }
+
+    if (/^[a-zA-Z0-9]+:/.test(r)) {
+      return '/';
+    }
+
+    if (!r.startsWith('/')) {
+      r = '/' + r;
+    }
+
+    return r;
+  }
+}

src/app/core/services/shortcut-suggestion.service.ts

@@ -0,0 +1,161 @@
+/**
+ * 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 { Injectable, inject, OnDestroy } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatDialog } from '@angular/material/dialog';
+import { AuthenticationService } from '../authentication/authentication.service';
+import { KeyboardShortcutService } from './keyboard-shortcut.service';
+import { UserPreferenceService } from './user-preference.service';
+import { KeyboardShortcutsDialogComponent } from '../../shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
+import { filter, take } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShortcutSuggestionService implements OnDestroy {
+  private router = inject(Router);
+  private titleService = inject(Title);
+  private snackBar = inject(MatSnackBar);
+  private dialog = inject(MatDialog);
+  private authenticationService = inject(AuthenticationService);
+  private keyboardShortcutService = inject(KeyboardShortcutService);
+  private userPreferenceService = inject(UserPreferenceService);
+
+  private readonly FREQUENCY_THRESHOLD = 5;
+  private readonly PREF_KEY = 'shortcut_suggestions_state';
+  private routerSubscription!: Subscription;
+
+  private state: { dismissed: string[] } = { dismissed: [] };
+
+  private get userId(): number | null {
+    const creds = this.authenticationService.getCredentials();
+    return creds ? creds.userId : null;
+  }
+
+  private getVisitsKey(): string {
+    return `route_visits_${this.userId}`;
+  }
+
+  private getVisits(): Record<string, number> {
+    const key = this.getVisitsKey();
+    if (!key) return {};
+    const val = localStorage.getItem(key);
+    return val ? JSON.parse(val) : {};
+  }
+
+  private saveVisits(visits: Record<string, number>) {
+    const key = this.getVisitsKey();
+    if (key) {
+      localStorage.setItem(key, JSON.stringify(visits));
+    }
+  }
+
+  private isSuggestionOpen = false;
+
+  public init() {
+    const uid = this.userId;
+    if (uid) {
+      this.userPreferenceService.getPreference(uid, this.PREF_KEY).subscribe({
+        next: (data) => {
+          if (data && data.value) {
+            try {
+              this.state = JSON.parse(data.value);
+              if (!this.state.dismissed) this.state.dismissed = [];
+            } catch (e) {
+              this.state = { dismissed: [] };
+            }
+          }
+        },
+        error: () => {}
+      });
+    }
+
+    this.routerSubscription = this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe((event: any) => {
+        this.handleNavigation(event.urlAfterRedirects);
+      });
+  }
+
+  private handleNavigation(url: string) {
+    if (!this.userId) return;
+
+    let path = url.split('?')[0];
+    path = this.keyboardShortcutService.normalizeRouteStr(path);
+
+    const visits = this.getVisits();
+    visits[path] = (visits[path] || 0) + 1;
+    this.saveVisits(visits);
+  }
+
+  public getUsageData(): { route: string; pageName: string; visits: number; hasShortcut: boolean }[] {
+    const visits = this.getVisits();
+    const result: { route: string; pageName: string; visits: number; hasShortcut: boolean }[] = [];
+
+    // Get current shortcuts (sync)
+    let currentShortcuts: any[] = [];
+    this.keyboardShortcutService.activeShortcuts$.pipe(take(1)).subscribe((s) => (currentShortcuts = s));
+
+    for (const route of Object.keys(visits)) {
+      const count = visits[route];
+      const hasShortcut = currentShortcuts.some(
+        (s) =>
+          (s.custom && s.action === 'navigate' && this.keyboardShortcutService.normalizeRouteStr(s.route) === route) ||
+          (!s.custom && this.keyboardShortcutService.normalizeRouteStr(s.route) === route)
+      );
+
+      let pageName = route.split('/').pop() || route;
+      // Capitalize and clean
+      pageName = pageName.replace(/-/g, ' ');
+      pageName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
+
+      result.push({ route, pageName, visits: count, hasShortcut });
+    }
+
+    return result.sort((a, b) => b.visits - a.visits);
+  }
+
+  public markAsDismissed(route: string) {
+    if (!this.state.dismissed.includes(route)) {
+      this.state.dismissed.push(route);
+      const uid = this.userId;
+      if (uid) {
+        this.userPreferenceService.updatePreference(uid, this.PREF_KEY, JSON.stringify(this.state)).subscribe();
+      }
+    }
+  }
+
+  public openCreateShortcutDialog(pageName: string, route: string) {
+    this.dialog
+      .open(KeyboardShortcutsDialogComponent, {
+        data: {
+          prefill: {
+            title: pageName,
+            route: route,
+            action: 'navigate'
+          }
+        }
+      })
+      .afterClosed()
+      .subscribe((saved) => {
+        if (saved) {
+          this.markAsDismissed(route);
+        }
+      });
+  }
+
+  ngOnDestroy() {
+    if (this.routerSubscription) {
+      this.routerSubscription.unsubscribe();
+    }
+  }
+}

src/app/core/services/user-preference.service.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+@Injectable({
+  providedIn: 'root'
+})
+export class UserPreferenceService {
+  private http = inject(HttpClient);
+
+  getPreference(userId: number, preferenceName: string): Observable<{ name: string; value: string }> {
+    const timestamp = new Date().getTime();
+    return this.http.get<{ name: string; value: string }>(
+      `/users/${userId}/preferences/${preferenceName}?_t=${timestamp}`
+    );
+  }
+
+  updatePreference(userId: number, preferenceName: string, value: string): Observable<{ name: string; value: string }> {
+    return this.http.put<{ name: string; value: string }>(`/users/${userId}/preferences/${preferenceName}`, { value });
+  }
+}

src/app/keyboards-shortcut-config.ts

@@ -31,7 +31,8 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'n',
-        route: 'navigation'
+        route: 'navigation',
+        id: 'navigation_page'
       },
       // Run Report - ctrl + t
       {
@@ -50,17 +51,9 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'i',
-        route: 'checker-inbox-and-tasks/checker-inbox'
+        route: 'checker-inbox-and-tasks/checker-inbox',
+        id: 'checker_inbox'
       },
-      // Collection Sheet- ctrl + alt + o
-      // {
-      // title: 'Collection Sheet',
-      // ctrlKey: true,
-      // shiftKey: false,
-      // altKey: true,
-      // key: 'o',
-      // route: ''
-      // },
       // Create Client - ctrl + c
       {
         title: 'Create Client',
@@ -68,7 +61,8 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: true,
         key: 'c',
-        route: 'clients/create'
+        route: 'clients/create',
+        id: 'create_client'
       },
       // Create Group - ctrl + g
       {
@@ -77,7 +71,8 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'g',
-        route: 'groups/create'
+        route: 'groups/create',
+        id: 'create_group'
       },
       // Create Center - ctrl + q
       {
@@ -86,7 +81,8 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'q',
-        route: 'centers/create'
+        route: 'centers/create',
+        id: 'create_center'
       },
       // Frequent Posting - ctrl + f
       {
@@ -95,7 +91,8 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'f',
-        route: 'accounting/journal-entries/frequent-postings'
+        route: 'accounting/journal-entries/frequent-postings',
+        id: 'frequent_posting'
       },
       // Closure Entries - ctrl + e
       {
@@ -104,7 +101,8 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'e',
-        route: 'accounting/closing-entries'
+        route: 'accounting/closing-entries',
+        id: 'closure_entries'
       },
       // Journal Entry - ctrl + j
       {
@@ -113,7 +111,8 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'j',
-        route: 'accounting/journal-entries/create'
+        route: 'accounting/journal-entries/create',
+        id: 'journal_entry'
       },
       // Reports - ctrl + r
       {
@@ -122,7 +121,8 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'r',
-        route: 'reports'
+        route: 'reports',
+        id: 'reports_page'
       },
       // Accounting - ctrl + a
       {
@@ -131,7 +131,8 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: true,
         key: 'a',
-        route: 'accounting'
+        route: 'accounting',
+        id: 'accounting_page'
       },
       // Save/Submit Forms - ctrl + s
       {

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/charges/create-charge/create-charge.component.ts

@@ -20,6 +20,7 @@ import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 /** Custom Services */
 import { ProductsService } from '../../products.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { Dates } from 'app/core/utils/dates';
 import { minNumberValueValidator } from 'app/shared/validators/min-number-value.validator';
 import { maxNumberValueValidator } from 'app/shared/validators/max-number-value.validator';
@@ -45,6 +46,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateChargeComponent implements OnInit {
   private formBuilder = inject(UntypedFormBuilder);
   private productsService = inject(ProductsService);
+  private alertService = inject(AlertService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dateUtils = inject(Dates);
@@ -352,8 +354,16 @@ export class CreateChargeComponent implements OnInit {
     if (!data.maxCap) {
       delete data.maxCap;
     }
-    this.productsService.createCharge(data).subscribe((response: any) => {
-      this.router.navigate(['../'], { relativeTo: this.route });
+    this.productsService.createCharge(data).subscribe({
+      next: (response: any) => {
+        if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'Charge submitted successfully for approval.'
+          });
+        }
+        this.router.navigate(['../'], { relativeTo: this.route });
+      }
     });
   }
 }

src/app/products/charges/edit-charge/edit-charge.component.ts

@@ -14,6 +14,7 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { maxNumberValueValidator } from 'app/shared/validators/max-number-value.validator';
 import { minNumberValueValidator } from 'app/shared/validators/min-number-value.validator';
 import { ValidateOnFocusDirective } from '../../../directives/validate-on-focus.directive';
@@ -37,6 +38,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 })
 export class EditChargeComponent implements OnInit {
   private productsService = inject(ProductsService);
+  private alertService = inject(AlertService);
   private formBuilder = inject(UntypedFormBuilder);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
@@ -222,8 +224,16 @@ export class EditChargeComponent implements OnInit {
     if (!charges.maxCap) {
       delete charges.maxCap;
     }
-    this.productsService.updateCharge(this.chargeData.id.toString(), charges).subscribe((response: any) => {
-      this.router.navigate(['../'], { relativeTo: this.route });
+    this.productsService.updateCharge(this.chargeData.id.toString(), charges).subscribe({
+      next: (response: any) => {
+        if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'Charge update submitted successfully for approval.'
+          });
+        }
+        this.router.navigate(['../'], { relativeTo: this.route });
+      }
     });
   }
 }

src/app/products/current-products/create-current-product/create-current-product.component.ts

@@ -18,6 +18,7 @@ import { CurrentProductAccountingStepComponent } from '../current-product-steppe
 import { CurrentProductPreviewStepComponent } from '../current-product-stepper/current-product-preview-step/current-product-preview-step.component';
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { Accounting } from 'app/core/utils/accounting';
 import { MatTabsModule } from '@angular/material/tabs';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -42,6 +43,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateCurrentProductComponent {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
+  private alertService = inject(AlertService);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
   private accounting = inject(Accounting);
@@ -144,14 +146,24 @@ export class CreateCurrentProductComponent {
   submit() {
     const currentProduct = this.prepareCurrentProductPayload();
     console.log('Current product submit payload:', currentProduct);
-    this.productsService.createCurrentProduct(currentProduct).subscribe((response: any) => {
-      this.router.navigate(
-        [
-          '../',
-          response.resourceId
-        ],
-        { relativeTo: this.route }
-      );
+    this.productsService.createCurrentProduct(currentProduct).subscribe({
+      next: (response: any) => {
+        if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'Current product creation request submitted successfully for approval.'
+          });
+          this.router.navigate(['../'], { relativeTo: this.route });
+        } else {
+          this.router.navigate(
+            [
+              '../',
+              response.resourceId
+            ],
+            { relativeTo: this.route }
+          );
+        }
+      }
     });
   }
 }

src/app/products/fixed-deposit-products/base-fd-interest-rate-chart/base-fd-interest-rate-chart.component.html

@@ -35,7 +35,7 @@
               <p class="empty-text">No slabs defined. Click "Add Slab" to begin.</p>
             } @else {
               <form [formGroup]="forms[fdType]">
-                <table mat-table [dataSource]="slabs(fdType).controls" class="slabs-table">
+                <table mat-table [dataSource]="slabsDataSources[fdType]" class="slabs-table">
                   <ng-container matColumnDef="srNo">
                     <th mat-header-cell *matHeaderCellDef>#</th>
                     <td mat-cell *matCellDef="let row">{{ row.get('srNo').value }}</td>
@@ -139,12 +139,25 @@
               </mat-form-field>
             </form>
 
+            @if (getSlabValidationErrors(fdType).length > 0) {
+              <div class="validation-errors-box">
+                <mat-icon color="warn">error_outline</mat-icon>
+                <div class="error-list">
+                  @for (err of getSlabValidationErrors(fdType); track err) {
+                    <p class="error-item">{{ err }}</p>
+                  }
+                </div>
+              </div>
+            }
+
             <div class="actions-row">
               <button
                 type="button"
                 mat-raised-button
                 color="primary"
-                [disabled]="forms[fdType].invalid || slabs(fdType).length === 0"
+                [disabled]="
+                  forms[fdType].invalid || slabs(fdType).length === 0 || getSlabValidationErrors(fdType).length > 0
+                "
                 (click)="openPreview(fdType)"
               >
                 Preview & Save

src/app/products/fixed-deposit-products/base-fd-interest-rate-chart/base-fd-interest-rate-chart.component.scss

@@ -78,6 +78,30 @@
   min-width: 200px;
 }
 
+/* ── Validation Errors ── */
+.validation-errors-box {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 6px;
+  color: #b91c1c;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+
+  .error-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .error-item {
+    margin: 0;
+  }
+}
+
 /* ── Actions ── */
 .actions-row {
   display: flex;

src/app/products/fixed-deposit-products/base-fd-interest-rate-chart/base-fd-interest-rate-chart.component.ts

@@ -7,13 +7,14 @@
  */
 
 import { Component, OnInit, inject } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DecimalPipe } from '@angular/common';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatIconButton } from '@angular/material/button';
 import { MatExpansionModule } from '@angular/material/expansion';
 import {
   MatTable,
+  MatTableDataSource,
   MatColumnDef,
   MatHeaderCellDef,
   MatHeaderCell,
@@ -26,6 +27,7 @@ import {
 } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
 import { ProductsService } from 'app/products/products.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
@@ -54,6 +56,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class BaseFdInterestRateChartComponent implements OnInit {
   private fb = inject(FormBuilder);
   private productsService = inject(ProductsService);
+  private alertService = inject(AlertService);
 
   readonly fdTypes = [
     'SINGLE',
@@ -87,6 +90,7 @@ export class BaseFdInterestRateChartComponent implements OnInit {
   ];
 
   forms: Record<string, FormGroup> = {};
+  slabsDataSources: Record<string, MatTableDataSource<AbstractControl>> = {};
   activeRates: Record<string, any> = {};
   historyRates: any[] = [];
 
@@ -98,6 +102,7 @@ export class BaseFdInterestRateChartComponent implements OnInit {
   ngOnInit(): void {
     this.fdTypes.forEach((type) => {
       this.forms[type] = this.buildForm();
+      this.slabsDataSources[type] = new MatTableDataSource<AbstractControl>([]);
       this.isSaving[type] = false;
       this.saveMessage[type] = '';
       this.showPreview[type] = false;
@@ -111,15 +116,140 @@ export class BaseFdInterestRateChartComponent implements OnInit {
 
   addSlab(fdType: string): void {
     const arr = this.slabs(fdType);
-    arr.push(this.buildSlabRow({ srNo: arr.length + 1 }));
+    let nextFrom = 1;
+    let periodType = this.getDefaultPeriodType(fdType);
+
+    if (arr.length > 0) {
+      const lastSlab = arr.at(arr.length - 1).value;
+      periodType = lastSlab.periodTypeEnum ?? periodType;
+      if (lastSlab.toPeriod != null && lastSlab.toPeriod >= 0) {
+        nextFrom = Number(lastSlab.toPeriod) + 1;
+      } else if (lastSlab.fromPeriod != null && lastSlab.fromPeriod >= 0) {
+        nextFrom = Number(lastSlab.fromPeriod) + 1;
+      }
+    }
+
+    const desc = this.generateSlabDescription(nextFrom, null, periodType);
+    arr.push(
+      this.buildSlabRow({
+        srNo: arr.length + 1,
+        description: desc,
+        periodTypeEnum: periodType,
+        fromPeriod: nextFrom,
+        toPeriod: null,
+        annualInterestRate: 0,
+        seniorCitizenRate: 0
+      })
+    );
+    this.slabsDataSources[fdType].data = [...arr.controls];
   }
 
   removeSlab(fdType: string, index: number): void {
     this.slabs(fdType).removeAt(index);
     this.slabs(fdType).controls.forEach((c, i) => c.patchValue({ srNo: i + 1 }));
+    this.slabsDataSources[fdType].data = [...this.slabs(fdType).controls];
+  }
+
+  getDefaultPeriodType(fdType: string): number {
+    switch (fdType) {
+      case 'SINGLE':
+        return 0; // Days
+      case 'DOUBLE':
+        return 3; // Years
+      case 'SPECIAL':
+        return 2; // Months
+      default:
+        return 0;
+    }
+  }
+
+  generateSlabDescription(from: number, to: number | null, periodTypeEnum: number): string {
+    const unit = this.getPeriodLabel(periodTypeEnum);
+    if (to == null) {
+      return `${from}+ ${unit}`;
+    }
+    return `${from} to ${to} ${unit}`;
+  }
+
+  getSlabValidationErrors(fdType: string): string[] {
+    const errors: string[] = [];
+    const arr = this.slabs(fdType);
+    if (!arr || arr.length === 0) {
+      return errors;
+    }
+
+    const slabs = arr.controls.map((c) => c.value);
+    const expectedPeriodType = slabs[0].periodTypeEnum;
+    let expectedFrom = 1;
+
+    for (let i = 0; i < slabs.length; i++) {
+      const s = slabs[i];
+      const slabNum = i + 1;
+
+      if (s.periodTypeEnum !== expectedPeriodType) {
+        errors.push(`Slab #${slabNum}: Period type must be consistent across all slabs.`);
+      }
+
+      if (s.fromPeriod == null || s.fromPeriod < 0) {
+        errors.push(`Slab #${slabNum}: 'From' period must be a non-negative number.`);
+      } else if (s.fromPeriod !== expectedFrom) {
+        if (i === 0) {
+          errors.push(`Slab #${slabNum}: First slab must start from 1 (found: ${s.fromPeriod}).`);
+        } else if (s.fromPeriod < expectedFrom) {
+          errors.push(
+            `Slab #${slabNum}: Range overlaps with previous slab (expected start: ${expectedFrom}, found: ${s.fromPeriod}).`
+          );
+        } else {
+          errors.push(
+            `Slab #${slabNum}: Gap detected in range (expected start: ${expectedFrom}, found: ${s.fromPeriod}).`
+          );
+        }
+      }
+
+      if (i < slabs.length - 1) {
+        // Non-final slab
+        if (s.toPeriod == null) {
+          errors.push(`Slab #${slabNum}: 'To' period is required for non-final slabs.`);
+        } else {
+          if (s.toPeriod < 0) {
+            errors.push(`Slab #${slabNum}: 'To' period must be non-negative.`);
+          }
+          if (s.fromPeriod != null && s.toPeriod < s.fromPeriod) {
+            errors.push(
+              `Slab #${slabNum}: 'From' period (${s.fromPeriod}) cannot be greater than 'To' period (${s.toPeriod}).`
+            );
+          }
+          expectedFrom = Number(s.toPeriod) + 1;
+        }
+      } else {
+        // Final slab
+        if (s.toPeriod != null) {
+          if (s.toPeriod < 0) {
+            errors.push(`Slab #${slabNum}: 'To' period must be non-negative.`);
+          }
+          if (s.fromPeriod != null && s.toPeriod < s.fromPeriod) {
+            errors.push(
+              `Slab #${slabNum}: 'From' period (${s.fromPeriod}) cannot be greater than 'To' period (${s.toPeriod}).`
+            );
+          }
+        }
+      }
+
+      if (s.annualInterestRate == null || s.annualInterestRate < 0) {
+        errors.push(`Slab #${slabNum}: Annual Interest Rate cannot be negative.`);
+      }
+      if (s.seniorCitizenRate != null && s.seniorCitizenRate < 0) {
+        errors.push(`Slab #${slabNum}: Senior Citizen Rate cannot be negative.`);
+      }
+    }
+
+    return errors;
   }
 
   openPreview(fdType: string): void {
+    if (this.getSlabValidationErrors(fdType).length > 0) {
+      return;
+    }
     this.showPreview[fdType] = true;
     this.saveMessage[fdType] = '';
   }
@@ -129,13 +259,24 @@ export class BaseFdInterestRateChartComponent implements OnInit {
   }
 
   confirmSave(fdType: string): void {
+    if (this.isSaving[fdType]) {
+      return;
+    }
     this.isSaving[fdType] = true;
     const { versionLabel, remarks, slabs } = this.forms[fdType].value;
     this.productsService.saveFdBaseInterestRates({ fdType, versionLabel, remarks, slabs }).subscribe({
-      next: () => {
-        this.saveMessage[fdType] = 'New version activated. Previous version deactivated.';
-        this.showPreview[fdType] = false;
+      next: (response: any) => {
         this.isSaving[fdType] = false;
+        this.showPreview[fdType] = false;
+        if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'Base interest rate configuration submitted successfully for approval.'
+          });
+          this.saveMessage[fdType] = 'Base interest rate configuration submitted successfully for approval.';
+        } else {
+          this.saveMessage[fdType] = 'New version activated. Previous version deactivated.';
+        }
         this.loadAll();
       },
       error: () => {
@@ -171,6 +312,7 @@ export class BaseFdInterestRateChartComponent implements OnInit {
           const arr = this.slabs(type);
           arr.clear();
           (active?.slabs ?? []).forEach((s: any) => arr.push(this.buildSlabRow(s)));
+          this.slabsDataSources[type].data = [...arr.controls];
           this.forms[type].patchValue({ versionLabel: '', remarks: '' });
         },
         error: () => {

src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.ts

@@ -33,6 +33,7 @@ import {
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { Dates } from 'app/core/utils/dates';
 import { Accounting } from 'app/core/utils/accounting';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
@@ -70,6 +71,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateFixedDepositProductComponent {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
+  private alertService = inject(AlertService);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
   private dateUtils = inject(Dates);
@@ -265,14 +267,24 @@ export class CreateFixedDepositProductComponent {
       locale: this.settingsService.language.code
     });
     delete fixedDepositProduct.advancedAccountingRules;
-    this.productsService.createFixedDepositProduct(fixedDepositProduct).subscribe((response: any) => {
-      this.router.navigate(
-        [
-          '../',
-          response.resourceId
-        ],
-        { relativeTo: this.route }
-      );
+    this.productsService.createFixedDepositProduct(fixedDepositProduct).subscribe({
+      next: (response: any) => {
+        if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'Fixed deposit product creation request submitted successfully for approval.'
+          });
+          this.router.navigate(['../'], { relativeTo: this.route });
+        } else {
+          this.router.navigate(
+            [
+              '../',
+              response.resourceId
+            ],
+            { relativeTo: this.route }
+          );
+        }
+      }
     });
   }
 }

src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.ts

@@ -21,6 +21,7 @@ import { FixedDepositProductAccountingStepComponent } from '../fixed-deposit-pro
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { MatTabsModule } from '@angular/material/tabs';
 import {
   MatTable,
@@ -70,6 +71,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class EditFixedDepositProductComponent {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
+  private alertService = inject(AlertService);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
   private accounting = inject(Accounting);
@@ -280,8 +282,14 @@ export class EditFixedDepositProductComponent {
     delete fixedDepositProduct.advancedAccountingRules;
     this.productsService
       .updateFixedDepositProduct(this.fixedDepositProductsTemplate.id, fixedDepositProduct)
-      .subscribe((response: any) => {
-        this.router.navigate(['../'], { relativeTo: this.route });
+      .subscribe({
+        next: () => {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'Fixed deposit product update submitted successfully for Checker approval.'
+          });
+          this.router.navigate(['../'], { relativeTo: this.route });
+        }
       });
   }
 

src/app/products/loan-products/create-loan-product/create-loan-product.component.ts

@@ -21,6 +21,7 @@ import { LoanProductInterestRefundStepComponent } from '../loan-product-stepper/
 
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { LoanProducts } from '../loan-products';
 import {
   AdvancedPaymentAllocation,
@@ -63,6 +64,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateLoanProductComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
+  private alertService = inject(AlertService);
   private loanProducts = inject(LoanProducts);
   private router = inject(Router);
   private accounting = inject(Accounting);
@@ -313,14 +315,24 @@ export class CreateLoanProductComponent implements OnInit {
       delete loanProduct['daysInYearCustomStrategy'];
     }
 
-    this.productsService.createLoanProduct(loanProduct).subscribe((response: any) => {
-      this.router.navigate(
-        [
-          '../',
-          response.resourceId
-        ],
-        { relativeTo: this.route }
-      );
+    this.productsService.createLoanProduct(loanProduct).subscribe({
+      next: (response: any) => {
+        if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'Loan product creation request submitted successfully for approval.'
+          });
+          this.router.navigate(['../'], { relativeTo: this.route });
+        } else {
+          this.router.navigate(
+            [
+              '../',
+              response.resourceId
+            ],
+            { relativeTo: this.route }
+          );
+        }
+      }
     });
   }
 

src/app/products/products.service.ts

@@ -76,7 +76,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');
@@ -124,7 +124,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');
@@ -168,7 +168,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');
@@ -313,7 +313,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');
@@ -608,7 +608,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/products/saving-products/create-saving-product/create-saving-product.component.ts

@@ -1,4 +1,4 @@
-/**
+/**
  * Copyright since 2025 Mifos Initiative
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
@@ -22,6 +22,7 @@ import { SavingProductAccountingStepComponent } from '../saving-product-stepper/
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { Accounting } from 'app/core/utils/accounting';
 import { SavingProductPreviewStepComponent } from '../saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -47,6 +48,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateSavingProductComponent {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
+  private alertService = inject(AlertService);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
   private accounting = inject(Accounting);
@@ -162,14 +164,24 @@ export class CreateSavingProductComponent {
   submit() {
     const savingProduct = this.prepareSavingProductPayload();
     console.log('Saving product submit payload:', savingProduct);
-    this.productsService.createSavingProduct(savingProduct).subscribe((response: any) => {
-      this.router.navigate(
-        [
-          '../',
-          response.resourceId
-        ],
-        { relativeTo: this.route }
-      );
+    this.productsService.createSavingProduct(savingProduct).subscribe({
+      next: (response: any) => {
+        if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'Savings product creation request submitted successfully for approval.'
+          });
+          this.router.navigate(['../'], { relativeTo: this.route });
+        } else {
+          this.router.navigate(
+            [
+              '../',
+              response.resourceId
+            ],
+            { relativeTo: this.route }
+          );
+        }
+      }
     });
   }
 }

src/app/products/share-products/create-share-product/create-share-product.component.ts

@@ -22,6 +22,7 @@ import { ShareProductAccountingStepComponent } from '../share-product-stepper/sh
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { Accounting } from 'app/core/utils/accounting';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { ShareProductPreviewStepComponent } from '../share-product-stepper/share-product-preview-step/share-product-preview-step.component';
@@ -49,6 +50,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateShareProductComponent {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
+  private alertService = inject(AlertService);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
   private accounting = inject(Accounting);
@@ -143,14 +145,24 @@ export class CreateShareProductComponent {
       chargesSelected: this.shareProduct.chargesSelected.map((charge: any) => ({ id: charge.id })),
       locale: this.settingsService.language.code // locale required for digitsAfterDecimal
     };
-    this.productsService.createShareProduct(shareProduct).subscribe((response: any) => {
-      this.router.navigate(
-        [
-          '../',
-          response.resourceId
-        ],
-        { relativeTo: this.route }
-      );
+    this.productsService.createShareProduct(shareProduct).subscribe({
+      next: (response: any) => {
+        if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'Share product creation request submitted successfully for approval.'
+          });
+          this.router.navigate(['../'], { relativeTo: this.route });
+        } else {
+          this.router.navigate(
+            [
+              '../',
+              response.resourceId
+            ],
+            { relativeTo: this.route }
+          );
+        }
+      }
     });
   }
 }

src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.html

@@ -28,7 +28,7 @@
         }
       </div>
     </div>
-    <div style="display: flex; gap: 10px; flex-shrink: 0">
+    <div class="pv-hero-actions">
       <button
         class="pv-edit-btn"
         type="button"
@@ -43,111 +43,141 @@
     </div>
   </div>
 
-  <div class="pv-legacy">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Details' | translate }}</h3>
-
-    <mat-divider [inset]="true"></mat-divider>
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
-      <span class="flex-60">{{ shareProduct.shortName }}</span>
+  <!-- DETAILS -->
+  <section class="pv-section">
+    <div class="pv-section-h">
+      <div class="pv-section-ic pv-section-ic--blue"><fa-icon icon="info-circle"></fa-icon></div>
+      <h3>{{ 'labels.inputs.Details' | translate }}</h3>
     </div>
-
-    @if (shareProduct.description) {
-      <div class="flex-fill layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
-        <span class="flex-60">{{ shareProduct.description }}</span>
-      </div>
-    }
-
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Currency' | translate }}</h3>
-
-    <mat-divider [inset]="true"></mat-divider>
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
-      <span class="flex-60">{{ shareProduct.currency.name }}</span>
-    </div>
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-      <span class="flex-60">{{ shareProduct.currency.decimalPlaces }}</span>
-    </div>
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
-      <span class="flex-60">{{ shareProduct.currency.inMultiplesOf }}</span>
-    </div>
-
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
-
-    <mat-divider [inset]="true"></mat-divider>
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Total Number of Shares' | translate }}:</span>
-      <span class="flex-60">{{ shareProduct.totalShares | formatNumber }}</span>
-    </div>
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Shares to be Issued' | translate }}:</span>
-      <span class="flex-60">{{ shareProduct.totalSharesIssued | formatNumber }}</span>
-    </div>
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Nominal/Unit Price' | translate }}:</span>
-      <span class="flex-60">{{ shareProduct.unitPrice | formatNumber }}</span>
-    </div>
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Capital Value' | translate }}:</span>
-      <span class="flex-60">{{ shareProduct.shareCapital | formatNumber }}</span>
-    </div>
-
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Settings' | translate }}</h3>
-
-    <mat-divider [inset]="true"></mat-divider>
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Shares per Client' | translate }}:</span>
-      <span class="flex-60">{{
-        shareProduct.nominalShares +
-          ' (Min: ' +
-          (shareProduct.minimumShares ? shareProduct.minimumShares : shareProduct.nominalShares) +
-          ', Max: ' +
-          (shareProduct.maximumShares ? shareProduct.maximumShares : shareProduct.nominalShares) +
-          ')'
-      }}</span>
-    </div>
-
-    @if (shareProduct.minimumActivePeriod) {
-      <div class="flex-fill layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Minimum Active Period' | translate }}:</span>
-        <span class="flex-60"
-          >{{ shareProduct.minimumActivePeriod }}
-          {{ shareProduct.minimumActivePeriodForDividendsTypeEnum.value | translateKey: 'catalogs' }}</span
+    <div class="pv-grid">
+      <div class="pv-kv">
+        <span class="pv-k">{{ 'labels.inputs.Short Name' | translate }}</span>
+        <span class="pv-v"
+          ><strong>{{ shareProduct.shortName }}</strong></span
         >
       </div>
-    }
+      @if (shareProduct.description) {
+        <div class="pv-kv pv-kv--span">
+          <span class="pv-k">{{ 'labels.inputs.Description' | translate }}</span>
+          <span class="pv-v">{{ shareProduct.description }}</span>
+        </div>
+      }
+    </div>
+  </section>
 
-    @if (shareProduct.lockinPeriod) {
-      <div class="flex-fill layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
-        <span class="flex-60"
-          >{{ shareProduct.lockinPeriod }} {{ shareProduct.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}</span
+  <!-- CURRENCY -->
+  <section class="pv-section">
+    <div class="pv-section-h">
+      <div class="pv-section-ic pv-section-ic--teal"><fa-icon icon="coins"></fa-icon></div>
+      <h3>{{ 'labels.heading.Currency' | translate }}</h3>
+    </div>
+    <div class="pv-grid">
+      <div class="pv-kv">
+        <span class="pv-k">{{ 'labels.inputs.Currency' | translate }}</span>
+        <span class="pv-v"
+          ><strong>{{ shareProduct.currency.name }}</strong></span
         >
       </div>
-    }
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}:</span>
-      <span class="flex-60">{{ shareProduct.allowDividendCalculationForInactiveClients | yesNo }}</span>
+      <div class="pv-kv">
+        <span class="pv-k">{{ 'labels.inputs.Decimal Places' | translate }}</span>
+        <span class="pv-v">{{ shareProduct.currency.decimalPlaces }}</span>
+      </div>
+      <div class="pv-kv">
+        <span class="pv-k">{{ 'labels.inputs.Currency in multiples of' | translate }}</span>
+        <span class="pv-v">{{ shareProduct.currency.inMultiplesOf }}</span>
+      </div>
     </div>
+  </section>
 
-    @if (shareProduct.marketPrice?.length) {
-      <div class="layout-row-wrap responsive-column flex-fill">
-        <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Market Price Period' | translate }}</h3>
-        <mat-divider [inset]="true"></mat-divider>
-        <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="shareProduct.marketPrice">
+  <!-- TERMS -->
+  <section class="pv-section">
+    <div class="pv-section-h">
+      <div class="pv-section-ic pv-section-ic--amber"><fa-icon icon="percentage"></fa-icon></div>
+      <h3>{{ 'labels.heading.Terms' | translate }}</h3>
+    </div>
+    <div class="pv-grid">
+      <div class="pv-kv">
+        <span class="pv-k">{{ 'labels.inputs.Total Number of Shares' | translate }}</span>
+        <span class="pv-v">{{ shareProduct.totalShares | formatNumber }}</span>
+      </div>
+      <div class="pv-kv">
+        <span class="pv-k">{{ 'labels.inputs.Shares to be Issued' | translate }}</span>
+        <span class="pv-v">{{ shareProduct.totalSharesIssued | formatNumber }}</span>
+      </div>
+      <div class="pv-kv">
+        <span class="pv-k">{{ 'labels.inputs.Nominal/Unit Price' | translate }}</span>
+        <span class="pv-v">{{ shareProduct.unitPrice | formatNumber }}</span>
+      </div>
+      <div class="pv-kv">
+        <span class="pv-k">{{ 'labels.inputs.Capital Value' | translate }}</span>
+        <span class="pv-v">{{ shareProduct.shareCapital | formatNumber }}</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- SETTINGS -->
+  <section class="pv-section">
+    <div class="pv-section-h">
+      <div class="pv-section-ic pv-section-ic--indigo"><fa-icon icon="sliders-h"></fa-icon></div>
+      <h3>{{ 'labels.heading.Settings' | translate }}</h3>
+    </div>
+    <div class="pv-grid">
+      <div class="pv-kv">
+        <span class="pv-k">{{ 'labels.inputs.Shares per Client' | translate }}</span>
+        <span class="pv-v">{{
+          shareProduct.nominalShares +
+            ' (Min: ' +
+            (shareProduct.minimumShares ? shareProduct.minimumShares : shareProduct.nominalShares) +
+            ', Max: ' +
+            (shareProduct.maximumShares ? shareProduct.maximumShares : shareProduct.nominalShares) +
+            ')'
+        }}</span>
+      </div>
+
+      @if (shareProduct.minimumActivePeriod) {
+        <div class="pv-kv">
+          <span class="pv-k">{{ 'labels.inputs.Minimum Active Period' | translate }}</span>
+          <span class="pv-v"
+            >{{ shareProduct.minimumActivePeriod }}
+            {{ shareProduct.minimumActivePeriodForDividendsTypeEnum.value | translateKey: 'catalogs' }}</span
+          >
+        </div>
+      }
+
+      @if (shareProduct.lockinPeriod) {
+        <div class="pv-kv">
+          <span class="pv-k">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
+          <span class="pv-v"
+            >{{ shareProduct.lockinPeriod }}
+            {{ shareProduct.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}</span
+          >
+        </div>
+      }
+
+      <div class="pv-kv">
+        <span class="pv-k">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}</span>
+        <span class="pv-v">
+          <span
+            class="pv-pill"
+            [class.pv-pill--green]="shareProduct.allowDividendCalculationForInactiveClients"
+            [class.pv-pill--gray]="!shareProduct.allowDividendCalculationForInactiveClients"
+          >
+            {{ shareProduct.allowDividendCalculationForInactiveClients | yesNo }}
+          </span>
+        </span>
+      </div>
+    </div>
+  </section>
+
+  <!-- MARKET PRICE -->
+  @if (shareProduct.marketPrice?.length) {
+    <section class="pv-section">
+      <div class="pv-section-h">
+        <div class="pv-section-ic pv-section-ic--teal"><fa-icon icon="chart-line"></fa-icon></div>
+        <h3>{{ 'labels.inputs.Market Price Period' | translate }}</h3>
+      </div>
+      <div class="pv-table-wrap">
+        <table class="pv-table" mat-table [dataSource]="shareProduct.marketPrice">
           <ng-container matColumnDef="fromDate">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Date' | translate }}</th>
             <td mat-cell *matCellDef="let marketPrice">
@@ -164,13 +194,18 @@
           <tr mat-row *matRowDef="let row; columns: marketPriceDisplayedColumns"></tr>
         </table>
       </div>
-    }
+    </section>
+  }
 
-    @if (shareProduct.charges.length) {
-      <div class="layout-row-wrap responsive-column flex-fill">
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
-        <mat-divider [inset]="true"></mat-divider>
-        <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="shareProduct.charges">
+  <!-- CHARGES -->
+  @if (shareProduct.charges.length) {
+    <section class="pv-section">
+      <div class="pv-section-h">
+        <div class="pv-section-ic pv-section-ic--red"><fa-icon icon="receipt"></fa-icon></div>
+        <h3>{{ 'labels.heading.Charges' | translate }}</h3>
+      </div>
+      <div class="pv-table-wrap">
+        <table class="pv-table" mat-table [dataSource]="shareProduct.charges">
           <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
             <td mat-cell *matCellDef="let charge">
@@ -199,62 +234,57 @@
           <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
         </table>
       </div>
-    }
+    </section>
+  }
 
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Accounting' | translate }}</h3>
+  <!-- ACCOUNTING -->
+  <section class="pv-section pv-accounting">
+    <div class="pv-section-h">
+      <div class="pv-section-ic pv-section-ic--green"><fa-icon icon="book"></fa-icon></div>
+      <h3>{{ 'labels.heading.Accounting' | translate }}</h3>
+    </div>
 
-    <mat-divider [inset]="true"></mat-divider>
-
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
-      <span class="flex-60">{{
+    <div class="pv-accounting-row">
+      <span class="pv-accounting-label">{{ 'labels.inputs.Type' | translate }}</span>
+      <span class="pv-accounting-value">{{
         'labels.accounting.' + getAccountingRuleName(shareProduct.accountingRule.value) | translate
       }}</span>
     </div>
 
     @if (shareProduct.accountingRule.id === 2) {
-      <div class="layout-row-wrap responsive-column flex-fill">
-        <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Assets' | translate }}</h4>
-        <div class="flex-fill">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Share reference'"
-            [glAccount]="shareProduct.accountingMappings.shareReferenceId"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
-        </div>
-        <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Liabilities' | translate }}</h4>
-        <div class="flex-fill">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Share suspense control'"
-            [glAccount]="shareProduct.accountingMappings.shareSuspenseId"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
-        </div>
-        <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Share Equity' | translate }}</h4>
-        <div class="flex-fill">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Equity'"
-            [glAccount]="shareProduct.accountingMappings.shareEquityId"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
-        </div>
-        <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Income' | translate }}</h4>
-        <div class="flex-fill">
-          <mifosx-gl-account-display
-            class="flex-100"
-            [accountTitle]="'Income from fees'"
-            [glAccount]="shareProduct.accountingMappings.incomeFromFeeAccountId"
-            [withTitle]="'40%'"
-          >
-          </mifosx-gl-account-display>
-        </div>
+      <div class="pv-accounting-details">
+        <h4 class="pv-sub-h">{{ 'labels.heading.Assets' | translate }}</h4>
+        <mifosx-gl-account-display
+          [accountTitle]="'Share reference'"
+          [glAccount]="shareProduct.accountingMappings.shareReferenceId"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+
+        <h4 class="pv-sub-h">{{ 'labels.heading.Liabilities' | translate }}</h4>
+        <mifosx-gl-account-display
+          [accountTitle]="'Share suspense control'"
+          [glAccount]="shareProduct.accountingMappings.shareSuspenseId"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+
+        <h4 class="pv-sub-h">{{ 'labels.heading.Share Equity' | translate }}</h4>
+        <mifosx-gl-account-display
+          [accountTitle]="'Equity'"
+          [glAccount]="shareProduct.accountingMappings.shareEquityId"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
+
+        <h4 class="pv-sub-h">{{ 'labels.heading.Income' | translate }}</h4>
+        <mifosx-gl-account-display
+          [accountTitle]="'Income from fees'"
+          [glAccount]="shareProduct.accountingMappings.incomeFromFeeAccountId"
+          [withTitle]="'40%'"
+        >
+        </mifosx-gl-account-display>
       </div>
     }
-  </div>
+  </section>
 </div>

src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.scss

@@ -6,8 +6,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-@use 'assets/styles/helper';
-@use 'assets/styles/colours' as *;
 @use 'assets/styles/product-view' as pv;
 
 @include pv.product-view-styles;
@@ -18,13 +16,111 @@
   --pv-accent-l: #fce7f3;
 }
 
-.tab-container {
-  padding: 1%;
-  margin: 1%;
+.pv-hero-actions {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
 
-.mat-h3 {
-  margin-top: 10px !important;
-  font-weight: 300;
-  color: $status-approved;
+/* ───────── COMPACT ACCOUNTING SECTION ───────── */
+.pv-accounting {
+  .pv-accounting-row {
+    display: grid;
+    grid-template-columns: minmax(220px, 40%) 1fr;
+    gap: 14px;
+    align-items: baseline;
+    padding: 8px 0;
+    border-bottom: 1px dashed var(--pv-g100);
+    min-height: unset;
+    line-height: 1.4;
+  }
+
+  .pv-accounting-label {
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--pv-g500);
+    margin: 0;
+    flex: none;
+  }
+
+  .pv-accounting-value {
+    font-size: 13.5px;
+    color: var(--pv-g900);
+    font-weight: 500;
+    word-break: break-word;
+    margin: 0;
+    flex: none;
+  }
+
+  .pv-accounting-details {
+    margin-top: 0;
+
+    h4.pv-sub-h {
+      margin: 16px 0 8px;
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--pv-g700);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      line-height: 1.2;
+    }
+
+    mifosx-gl-account-display {
+      display: block;
+      padding: 8px 0;
+      min-height: unset;
+      line-height: 1.4;
+      border-bottom: 1px dashed var(--pv-g100);
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      ::ng-deep .layout-row {
+        display: grid;
+        grid-template-columns: minmax(220px, 40%) 1fr;
+        gap: 14px;
+        align-items: baseline;
+        margin: 0;
+      }
+
+      ::ng-deep div {
+        margin: 0 !important;
+        line-height: 1.4;
+      }
+
+      ::ng-deep .header {
+        font-size: 10.5px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--pv-g500);
+        margin: 0 !important;
+        max-width: 100%;
+        flex: none;
+      }
+
+      ::ng-deep div:not(.header) {
+        font-size: 13.5px;
+        color: var(--pv-g900);
+        font-weight: 500;
+        word-break: break-word;
+        margin: 0 !important;
+        max-width: 100%;
+        flex: none;
+      }
+    }
+  }
+
+  @media (width <= 600px) {
+    .pv-accounting-row,
+    .pv-accounting-details mifosx-gl-account-display ::ng-deep .layout-row {
+      grid-template-columns: 1fr;
+      gap: 4px;
+    }
+  }
 }

src/app/profile/profile.component.html

@@ -7,6 +7,10 @@
 -->
 
 <div class="container m-b-10 layout-row layout-lt-md-column align-end gap-1percent">
+  <button mat-raised-button color="primary" class="m-r-10" (click)="configureShortcuts()">
+    <fa-icon icon="keyboard" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Configure Shortcuts' | translate }}
+  </button>
   <button mat-raised-button color="primary" class="m-r-10" [routerLink]="['/system', 'roles-and-permissions']">
     <fa-icon icon="check" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Permissions' | translate }}

src/app/profile/profile.component.ts

@@ -28,6 +28,7 @@ import { Router, RouterLink } from '@angular/router';
 import { AuthenticationService } from 'app/core/authentication/authentication.service';
 import { ChangePasswordDialogComponent } from 'app/shared/change-password-dialog/change-password-dialog.component';
 import { SettingsService } from 'app/settings/settings.service';
+import { KeyboardShortcutsDialogComponent } from 'app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -108,7 +109,13 @@ export class ProfileComponent implements OnInit {
     });
   }
 
-  get tenantIdentifier(): string {
+  get tenantIdentifier() {
     return this.settingsService.tenantIdentifier || 'default';
   }
+
+  configureShortcuts() {
+    this.dialog.open(KeyboardShortcutsDialogComponent, {
+      width: '800px'
+    });
+  }
 }

src/app/rbi-circulars/openproject.service.ts

@@ -9,7 +9,7 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { environment } from 'environments/environment';
+import { environment } from '../../environments/environment';
 
 export interface OpenProjectWorkPackage {
   id: number;

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.html

@@ -6,37 +6,205 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<h1 mat-dialog-title>{{ 'labels.heading.Keyboard Shortcuts' | translate }}</h1>
+<div class="ks-header">
+  <h1 mat-dialog-title class="ks-title">{{ 'labels.heading.Configure Keyboard Shortcuts' | translate }}</h1>
+  <button mat-icon-button (click)="openUsagePopup()" matTooltip="Shortcut Usage">
+    <mat-icon>analytics</mat-icon>
+  </button>
+</div>
 
 <div mat-dialog-content>
-  <div class="layout-column gap-2px">
-    @for (item of buttonConfig.buttonCombinations; track item) {
-      <mat-divider [inset]="true"></mat-divider>
-      <div class="flex-fill flex-50">
-        <span class="flex-50">
-          @if (item.ctrlKey) {
-            <span>
-              <span class="modifier-key">{{ 'labels.inputs.Ctrl' | translate }}</span> +
-            </span>
+  @if (validationError) {
+    <div class="alert error margin-b-10">
+      {{ validationError }}
+    </div>
+  }
+
+  <table class="ks-table">
+    <thead>
+      <tr>
+        <th>{{ 'labels.inputs.Shortcut Name' | translate }}</th>
+        <th>{{ 'Key Combination' }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (item of shortcuts; track item) {
+        <tr style="cursor: pointer" (click)="showShortcutDetails(item)">
+          <td [attr.colspan]="editingShortcutId === item.id || (!item.id && editingShortcutId === item.title) ? 2 : 1">
+            @if (editingShortcutId === item.id || (!item.id && editingShortcutId === item.title)) {
+              <!-- Edit Mode -->
+              <div class="layout-row-wrap layout-lt-md-column gap-2percent padding-y-10">
+                <h4 class="flex-100 margin-0 margin-b-10">Edit Shortcut</h4>
+
+                <mat-form-field class="ks-field flex-48">
+                  <mat-label>Shortcut Name</mat-label>
+                  <input matInput [(ngModel)]="editingShortcutData.title" [disabled]="!item.custom" />
+                </mat-form-field>
+
+                @if (item.custom || item.route) {
+                  <mat-form-field class="ks-field flex-48">
+                    <mat-label>URL / Route</mat-label>
+                    <input matInput [(ngModel)]="editingShortcutData.route" [disabled]="!item.custom" />
+                  </mat-form-field>
+                }
+
+                @if (item.custom) {
+                  <mat-form-field class="ks-field flex-48">
+                    <mat-label>Action</mat-label>
+                    <mat-select [(ngModel)]="editingShortcutData.action">
+                      <mat-option value="navigate">Navigate</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                }
+
+                <mat-form-field class="ks-field flex-48">
+                  <mat-label>Key Combination</mat-label>
+                  <input
+                    matInput
+                    readonly
+                    [value]="formatShortcut(editingShortcutData)"
+                    (keydown)="onKeyDown($event, editingShortcutData, true)"
+                    placeholder="Press keys..."
+                  />
+                </mat-form-field>
+
+                <div class="flex-100 layout-row justify-content-end gap-10px">
+                  <button mat-stroked-button class="ks-actions__cancel" (click)="cancelEditShortcut()">Cancel</button>
+                  <button
+                    mat-flat-button
+                    class="ks-actions__confirm ks-actions__confirm--basic"
+                    (click)="saveEditShortcut()"
+                  >
+                    Save
+                  </button>
+                </div>
+              </div>
+            } @else {
+              <!-- View Mode -->
+              <span style="text-transform: capitalize; padding: 8px 0; display: inline-block">{{ item.title }}</span>
+            }
+          </td>
+
+          @if (!(editingShortcutId === item.id || (!item.id && editingShortcutId === item.title))) {
+            <td (click)="$event.stopPropagation()">
+              <mat-form-field class="ks-field" subscriptSizing="dynamic" style="width: 250px">
+                <input
+                  matInput
+                  readonly
+                  [value]="formatShortcut(item)"
+                  (keydown)="onKeyDown($event, item)"
+                  (focus)="activeInputItem = item"
+                  (blur)="activeInputItem = null"
+                  placeholder="Click and press keys..."
+                  matTooltip="Click here and press your desired key combination"
+                />
+              </mat-form-field>
+            </td>
           }
-          @if (item.shiftKey) {
-            <span>
-              <span class="modifier-key">{{ 'labels.inputs.Shift' | translate }}</span> +
-            </span>
-          }
-          @if (item.altKey) {
-            <span>
-              <span class="modifier-key">{{ 'labels.inputs.Alt' | translate }}</span> +
-            </span>
-          }
-          @if (item.key) {
-            <span>
-              <span class="modifier-key">{{ item.key }}</span></span
-            >
-          }
-        </span>
-        <span class="flex-50">{{ item.title }}</span>
+        </tr>
+      }
+    </tbody>
+  </table>
+
+  @if (isAddingNew) {
+    <div
+      class="layout-row-wrap layout-lt-md-column gap-2percent padding-20 mat-elevation-z1 margin-t-10"
+      style="background-color: white; border-radius: 4px"
+    >
+      <h4 class="flex-100 margin-0 margin-b-10">Add Custom Shortcut</h4>
+
+      <mat-form-field class="ks-field flex-48">
+        <mat-label>Shortcut Name</mat-label>
+        <input matInput [(ngModel)]="newShortcut.title" placeholder="e.g. Share Holder" />
+      </mat-form-field>
+
+      <mat-form-field class="ks-field flex-48">
+        <mat-label>URL / Route</mat-label>
+        <input matInput [(ngModel)]="newShortcut.route" placeholder="e.g. /shares/share-holders" />
+      </mat-form-field>
+
+      <mat-form-field class="ks-field flex-48">
+        <mat-label>Action</mat-label>
+        <mat-select [(ngModel)]="newShortcut.action">
+          <mat-option value="navigate">Navigate</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field class="ks-field flex-48">
+        <mat-label>Key Combination</mat-label>
+        <input
+          matInput
+          readonly
+          [value]="formatShortcut(newShortcut)"
+          (keydown)="onKeyDown($event, newShortcut, true)"
+          placeholder="Press keys..."
+        />
+      </mat-form-field>
+
+      <div class="flex-100 layout-row justify-content-end gap-10px">
+        <button mat-stroked-button class="ks-actions__cancel" (click)="cancelAddShortcut()">Cancel</button>
+        <button mat-flat-button class="ks-actions__confirm ks-actions__confirm--basic" (click)="saveNewShortcut()">
+          Save
+        </button>
       </div>
-    }
-  </div>
+    </div>
+  } @else {
+    <div class="margin-t-10">
+      <button mat-button color="primary" (click)="startAddShortcut()"><mat-icon>add</mat-icon> Add Shortcut</button>
+    </div>
+  }
 </div>
+
+<mat-dialog-actions class="ks-actions">
+  <button mat-flat-button class="ks-actions__confirm ks-actions__confirm--warn" (click)="resetToDefaults()">
+    Reset to Defaults
+  </button>
+  <div class="ks-actions__right">
+    <button mat-stroked-button class="ks-actions__cancel" (click)="cancel()">
+      {{ 'labels.button.cancel' | translate }}
+    </button>
+    <button
+      mat-flat-button
+      class="ks-actions__confirm ks-actions__confirm--basic"
+      (click)="save()"
+      [disabled]="validationError !== null"
+    >
+      {{ 'labels.button.save' | translate }}
+    </button>
+  </div>
+</mat-dialog-actions>
+
+<ng-template #shortcutDetailsTemplate let-data>
+  <h2 mat-dialog-title style="text-transform: capitalize">{{ data.title }}</h2>
+  <div mat-dialog-content>
+    <div class="layout-column gap-10px padding-y-10" style="font-size: 14px">
+      <div>
+        <strong>Shortcut Name:</strong> <br />
+        <span style="text-transform: capitalize">{{ data.title }}</span>
+      </div>
+      <div>
+        <strong>Key Combination:</strong> <br />
+        {{ formatShortcut(data) }}
+      </div>
+      <div>
+        <strong>Action:</strong> <br />
+        {{ data.action === 'navigate' ? 'Navigate' : data.action || data.id || 'Predefined' }}
+      </div>
+      @if (data.route) {
+        <div>
+          <strong>URL / Route:</strong> <br />
+          {{ data.route }}
+        </div>
+      }
+      <div>
+        <strong>Description:</strong> <br />
+        {{ getShortcutDescription(data) }}
+      </div>
+    </div>
+  </div>
+  <mat-dialog-actions align="end">
+    <button mat-button color="primary" (click)="startEditShortcut(data)">Edit</button>
+    <button mat-button color="warn" (click)="deleteShortcut(data)">Delete</button>
+    <button mat-button mat-dialog-close>Close</button>
+  </mat-dialog-actions>
+</ng-template>

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

@@ -6,15 +6,157 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-.modifier-key {
-  border: 1px solid #0000004d;
-  padding: 0.3rem;
-  background: #f8f8f8;
-  color: #00000086;
-  font-weight: bold;
-  border-radius: 0.3rem;
-}
+$primary: #1a73e8;
+$gray-50: #f8f9fa;
+$gray-100: #f1f3f4;
+$gray-200: #e8eaed;
+$gray-500: #9aa0a6;
+$gray-700: #5f6368;
+$gray-900: #202124;
+$red: #ef4444;
+$navy: #0d1b2a;
+$white: #fff;
 
 .mat-divider.mat-divider-inset {
   margin-left: 0;
 }
+
+/* --- Header (from form-dialog) --- */
+.ks-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px 12px;
+  border-bottom: 1px solid $gray-200;
+}
+
+.ks-title {
+  margin: 0 !important;
+  padding: 0 !important;
+  font-size: 17px !important;
+  font-weight: 600 !important;
+  color: $gray-900;
+  letter-spacing: -0.2px;
+}
+
+/* --- Table Rows (from bank-calendar) --- */
+.ks-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+
+  thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: #f1f5f9;
+    color: #475569;
+    text-align: left;
+    padding: 10px 14px;
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  tbody td {
+    padding: 9px 14px;
+    border-bottom: 1px solid #f1f5f9;
+    vertical-align: middle;
+    color: $navy;
+  }
+
+  tbody tr {
+    transition: background 0.12s;
+
+    &:hover {
+      background: #f8fafc;
+    }
+  }
+}
+
+/* --- Inputs/Forms (from form-dialog) --- */
+.ks-field {
+  min-width: 0;
+
+  ::ng-deep {
+    .mat-mdc-form-field {
+      width: 100%;
+    }
+
+    .mat-mdc-text-field-wrapper {
+      background: $gray-50;
+      border-radius: 8px;
+    }
+
+    .mdc-text-field--outlined .mdc-notched-outline__leading,
+    .mdc-text-field--outlined .mdc-notched-outline__trailing,
+    .mdc-text-field--outlined .mdc-notched-outline__notch {
+      border-color: $gray-200;
+    }
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__leading,
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__trailing,
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__notch {
+      border-color: $primary;
+    }
+
+    .mat-mdc-floating-label {
+      font-size: 13px;
+      color: $gray-700;
+    }
+
+    input.mat-mdc-input-element {
+      font-size: 14px;
+      color: $gray-900;
+    }
+  }
+}
+
+/* --- Dialog Footer & Buttons (from confirmation-dialog) --- */
+.ks-actions {
+  padding: 14px 24px 20px !important;
+  border-top: 1px solid $gray-200;
+  margin: 0 !important;
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  gap: 10px !important;
+
+  .ks-actions__right {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  &__cancel {
+    border-radius: 8px !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    padding: 0 20px !important;
+    height: 38px !important;
+    color: $gray-700 !important;
+    border-color: $gray-200 !important;
+  }
+
+  &__confirm {
+    border-radius: 8px !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    padding: 0 24px !important;
+    height: 38px !important;
+    letter-spacing: 0.2px;
+    color: $white !important;
+
+    &--basic {
+      background: $primary !important;
+      box-shadow: 0 1px 3px rgb(26 115 232 / 30%) !important;
+    }
+
+    &--warn {
+      background: $red !important;
+      box-shadow: 0 1px 3px rgb(239 68 68 / 30%) !important;
+    }
+  }
+}

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

@@ -6,16 +6,31 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-/** Angular Imports */
-import { Component, OnInit, inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent } from '@angular/material/dialog';
-import { KeyboardShortcutsConfiguration } from '../../keyboards-shortcut-config';
+import { Component, OnInit, inject, ViewChild } from '@angular/core';
+import {
+  MatDialogRef,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialog,
+  MatDialogClose,
+  MAT_DIALOG_DATA
+} from '@angular/material/dialog';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { MatDivider } from '@angular/material/divider';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
-/**
- * Delete dialog component.
- */
+import { KeyboardShortcutService, ShortcutItem } from '../../core/services/keyboard-shortcut.service';
+import { FormsModule } from '@angular/forms';
+import { NgClass } from '@angular/common';
+import { MatButton } from '@angular/material/button';
+import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
+import { ShortcutUsageDialogComponent } from '../shortcut-usage-dialog/shortcut-usage-dialog.component';
+import { MatIcon } from '@angular/material/icon';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+
 @Component({
   selector: 'mifosx-keyboard-shortcuts-dialog',
   templateUrl: './keyboard-shortcuts-dialog.component.html',
@@ -25,16 +40,291 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     MatDialogTitle,
     CdkScrollable,
     MatDialogContent,
-    MatDivider
+    MatDialogActions,
+    MatDialogClose,
+    MatButton,
+    FormsModule,
+    MatIcon,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    MatSelect,
+    MatOption
   ]
 })
 export class KeyboardShortcutsDialogComponent implements OnInit {
   dialogRef = inject<MatDialogRef<KeyboardShortcutsDialogComponent>>(MatDialogRef);
+  private keyboardShortcutService = inject(KeyboardShortcutService);
+  public data = inject(MAT_DIALOG_DATA, { optional: true });
 
-  buttonConfig: KeyboardShortcutsConfiguration;
+  shortcuts: ShortcutItem[] = [];
+  validationError: string | null = null;
+  activeInputItem: ShortcutItem | null = null;
+  displayedColumns: string[] = [
+    'title',
+    'keyCombination'
+  ];
+
+  isAddingNew = false;
+  newShortcut: Partial<ShortcutItem> = {};
+  activeNewInput = false;
+
+  editingShortcutId: string | null = null;
+  editingShortcutData: Partial<ShortcutItem> = {};
+  activeEditInput = false;
 
   ngOnInit() {
-    this.dialogRef.updateSize(`800px`);
-    this.buttonConfig = new KeyboardShortcutsConfiguration();
+    this.dialogRef.updateSize('800px');
+    this.keyboardShortcutService.activeShortcuts$.subscribe((shortcuts) => {
+      // Deep copy to allow editing without affecting the global state immediately
+      this.shortcuts = JSON.parse(JSON.stringify(shortcuts));
+    });
+
+    if (this.data && this.data.prefill) {
+      this.startAddShortcut();
+      this.newShortcut = {
+        ...this.newShortcut,
+        ...this.data.prefill
+      };
+    }
+  }
+
+  formatShortcut(item: Partial<ShortcutItem>): string {
+    if (!item || (!item.key && !item.ctrlKey && !item.shiftKey && !item.altKey)) return '';
+    const parts = [];
+    if (item.ctrlKey) parts.push('Ctrl');
+    if (item.shiftKey) parts.push('Shift');
+    if (item.altKey) parts.push('Alt');
+    if (item.key) parts.push(item.key.toUpperCase());
+    return parts.join(' + ');
+  }
+
+  onKeyDown(event: KeyboardEvent, item: Partial<ShortcutItem>, isNewOrEdit: boolean = false) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Ignore if only modifier keys are pressed
+    if ([
+        'Control',
+        'Shift',
+        'Alt',
+        'Meta'
+      ].includes(event.key)) {
+      return;
+    }
+
+    item.ctrlKey = event.ctrlKey;
+    item.shiftKey = event.shiftKey;
+    item.altKey = event.altKey;
+    item.key = event.key.toLowerCase();
+
+    if (!isNewOrEdit) {
+      this.activeInputItem = null;
+      this.validateShortcuts();
+    } else {
+      this.activeNewInput = false;
+      this.activeEditInput = false;
+    }
+  }
+
+  validateShortcuts() {
+    this.validationError = null;
+    const seen = new Set<string>();
+
+    for (const item of this.shortcuts) {
+      if (!item.key) {
+        this.validationError = `Invalid shortcut for ${item.title}: Key is required`;
+        return;
+      }
+
+      const keyStr = `${!!item.ctrlKey}-${!!item.shiftKey}-${!!item.altKey}-${item.key.toLowerCase()}`;
+      if (seen.has(keyStr)) {
+        this.validationError = `Duplicate shortcut detected: ${this.formatShortcut(item)}`;
+        return;
+      }
+      seen.add(keyStr);
+    }
+  }
+
+  startAddShortcut() {
+    this.isAddingNew = true;
+    this.newShortcut = {
+      title: '',
+      route: '',
+      key: '',
+      ctrlKey: false,
+      shiftKey: false,
+      altKey: false,
+      action: 'navigate',
+      custom: true,
+      id: 'custom_' + Date.now()
+    };
+    this.validationError = null;
+  }
+
+  cancelAddShortcut() {
+    this.isAddingNew = false;
+    this.validationError = null;
+  }
+
+  private dialog = inject(MatDialog);
+
+  @ViewChild('shortcutDetailsTemplate') shortcutDetailsTemplate: any;
+  private detailsDialogRef: MatDialogRef<any> | null = null;
+
+  showShortcutDetails(item: ShortcutItem) {
+    this.detailsDialogRef = this.dialog.open(this.shortcutDetailsTemplate, {
+      data: item,
+      width: '400px'
+    });
+  }
+
+  openUsagePopup() {
+    this.dialog.open(ShortcutUsageDialogComponent, {
+      width: '600px'
+    });
+  }
+
+  getShortcutDescription(item: Partial<ShortcutItem>): string {
+    if (item.custom) {
+      if (item.action === 'navigate') {
+        return `Navigates to the ${item.title} page.`;
+      }
+      return `Executes the ${item.action} action.`;
+    } else {
+      switch (item.id) {
+        case 'logout':
+          return 'Logs you out of the application securely.';
+        case 'help':
+          return 'Opens the user manual and help documentation.';
+        case 'runReport':
+          return 'Executes the currently selected report.';
+        case 'cancel':
+          return 'Cancels the current operation or form.';
+        case 'submit':
+          return 'Submits the current form or dialog.';
+        default:
+          return `Navigates to the predefined ${item.title} feature.`;
+      }
+    }
+  }
+
+  saveNewShortcut() {
+    if (this.newShortcut.action === 'navigate' && this.newShortcut.route) {
+      this.newShortcut.route = this.keyboardShortcutService.normalizeRouteStr(this.newShortcut.route);
+    }
+    if (this.validateSingleShortcut(this.newShortcut, null)) {
+      this.shortcuts.push(this.newShortcut as ShortcutItem);
+      this.isAddingNew = false;
+      this.validateShortcuts();
+      if (!this.validationError) {
+        this.keyboardShortcutService.updateShortcuts(this.shortcuts);
+      }
+    }
+  }
+
+  startEditShortcut(item: ShortcutItem) {
+    if (this.detailsDialogRef) {
+      this.detailsDialogRef.close();
+      this.detailsDialogRef = null;
+    }
+    this.editingShortcutId = item.id || null;
+    this.editingShortcutData = { ...item };
+    this.validationError = null;
+  }
+
+  cancelEditShortcut() {
+    this.editingShortcutId = null;
+    this.validationError = null;
+  }
+
+  saveEditShortcut() {
+    if (this.editingShortcutData.action === 'navigate' && this.editingShortcutData.route) {
+      this.editingShortcutData.route = this.keyboardShortcutService.normalizeRouteStr(this.editingShortcutData.route);
+    }
+    if (this.validateSingleShortcut(this.editingShortcutData, this.editingShortcutId)) {
+      const index = this.shortcuts.findIndex((s) => s.id === this.editingShortcutId);
+      if (index > -1) {
+        this.shortcuts[index] = { ...this.editingShortcutData } as ShortcutItem;
+      }
+      this.editingShortcutId = null;
+      this.validateShortcuts();
+      if (!this.validationError) {
+        this.keyboardShortcutService.updateShortcuts(this.shortcuts);
+      }
+    }
+  }
+
+  deleteShortcut(item: ShortcutItem) {
+    if (this.detailsDialogRef) {
+      this.detailsDialogRef.close();
+      this.detailsDialogRef = null;
+    }
+    this.shortcuts = this.shortcuts.filter((s) => (s.id ? s.id !== item.id : s.title !== item.title));
+    this.validateShortcuts();
+    if (!this.validationError) {
+      this.keyboardShortcutService.updateShortcuts(this.shortcuts);
+    }
+  }
+
+  validateSingleShortcut(item: Partial<ShortcutItem>, excludeId: string | null): boolean {
+    if (!item.title || item.title.trim() === '') {
+      this.validationError = 'Shortcut Name is required';
+      return false;
+    }
+    if (!item.key) {
+      this.validationError = 'Key combination is required';
+      return false;
+    }
+    if (item.action === 'navigate' && (!item.route || item.route.trim() === '')) {
+      this.validationError = 'URL / Route is required';
+      return false;
+    }
+
+    const keyStr = `${!!item.ctrlKey}-${!!item.shiftKey}-${!!item.altKey}-${item.key.toLowerCase()}`;
+    const seen = new Set<string>();
+
+    for (const s of this.shortcuts) {
+      if (excludeId && s.id === excludeId) continue;
+      seen.add(`${!!s.ctrlKey}-${!!s.shiftKey}-${!!s.altKey}-${s.key.toLowerCase()}`);
+    }
+
+    if (seen.has(keyStr)) {
+      this.validationError = `Duplicate shortcut detected: ${this.formatShortcut(item)}`;
+      return false;
+    }
+
+    this.validationError = null;
+    return true;
+  }
+
+  save() {
+    this.validateShortcuts();
+    if (!this.validationError) {
+      this.keyboardShortcutService.updateShortcuts(this.shortcuts);
+      this.dialogRef.close(true);
+    }
+  }
+
+  resetToDefaults() {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        heading: 'Reset Keyboard Shortcuts',
+        dialogContext:
+          'Are you sure you want to reset all keyboard shortcuts to their default configuration? This will remove all custom shortcuts and restore default keys.',
+        type: 'Warn'
+      }
+    });
+
+    dialogRef.afterClosed().subscribe((confirm: boolean) => {
+      if (confirm) {
+        this.keyboardShortcutService.resetToDefaults();
+        this.dialogRef.close(true);
+      }
+    });
+  }
+
+  cancel() {
+    this.dialogRef.close(false);
   }
 }

src/app/shared/shortcut-suggestion-snackbar/shortcut-suggestion-snackbar.component.html

@@ -0,0 +1,22 @@
+<!--
+  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="suggestion-container">
+  <div class="suggestion-text">
+    <strong
+      >💡 You frequently use <span style="text-transform: capitalize">{{ data.pageName }}</span></strong
+    ><br />
+    Would you like to create a keyboard shortcut for faster access?
+  </div>
+  <div class="suggestion-actions margin-t-10" style="display: flex; justify-content: flex-end; gap: 8px">
+    <button mat-button style="color: #bbb" (click)="dismiss()">Not Now</button>
+    <button mat-button style="color: #fff; background-color: rgba(255, 255, 255, 0.1)" (click)="createShortcut()">
+      Create Shortcut
+    </button>
+  </div>
+</div>

src/app/shared/shortcut-suggestion-snackbar/shortcut-suggestion-snackbar.component.scss

@@ -0,0 +1,19 @@
+/**
+ * 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/.
+ */
+
+.suggestion-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.suggestion-text {
+  font-size: 14px;
+  line-height: 1.4;
+  color: #fff;
+}

src/app/shared/shortcut-suggestion-snackbar/shortcut-suggestion-snackbar.component.ts

@@ -0,0 +1,34 @@
+/**
+ * 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_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
+import { MatButton } from '@angular/material/button';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+@Component({
+  selector: 'mifosx-shortcut-suggestion-snackbar',
+  templateUrl: './shortcut-suggestion-snackbar.component.html',
+  styleUrls: ['./shortcut-suggestion-snackbar.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatButton
+  ]
+})
+export class ShortcutSuggestionSnackbarComponent {
+  snackBarRef = inject(MatSnackBarRef<ShortcutSuggestionSnackbarComponent>);
+  data: { pageName: string; route: string } = inject(MAT_SNACK_BAR_DATA);
+
+  createShortcut() {
+    this.snackBarRef.dismissWithAction();
+  }
+
+  dismiss() {
+    this.snackBarRef.dismiss();
+  }
+}

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

@@ -0,0 +1,55 @@
+<!--
+  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="ks-header">
+  <h1 mat-dialog-title class="ks-title">Create Shortcut</h1>
+</div>
+
+<div mat-dialog-content>
+  @if (validationError) {
+    <div class="alert error margin-b-10" style="color: #ef4444; margin-bottom: 15px; font-size: 13px">
+      {{ validationError }}
+    </div>
+  }
+
+  <div class="layout-column gap-10px" style="padding-top: 10px">
+    <mat-form-field class="ks-field" style="width: 100%">
+      <mat-label>Shortcut Name</mat-label>
+      <input matInput [(ngModel)]="newShortcut.title" />
+    </mat-form-field>
+
+    <mat-form-field class="ks-field" style="width: 100%">
+      <mat-label>Key Combination</mat-label>
+      <input
+        matInput
+        readonly
+        [value]="formatShortcut(newShortcut)"
+        (keydown)="onKeyDown($event)"
+        placeholder="Click and press keys..."
+      />
+    </mat-form-field>
+
+    <mat-form-field class="ks-field" style="width: 100%">
+      <mat-label>Route</mat-label>
+      <input matInput [ngModel]="newShortcut.route" disabled="true" />
+    </mat-form-field>
+
+    <mat-form-field class="ks-field" style="width: 100%">
+      <mat-label>Action</mat-label>
+      <input matInput [ngModel]="'Navigate'" disabled="true" />
+    </mat-form-field>
+  </div>
+</div>
+
+<mat-dialog-actions class="ks-actions">
+  <div style="flex: 1"></div>
+  <div class="ks-actions__right">
+    <button mat-stroked-button class="ks-actions__cancel" (click)="cancel()">Cancel</button>
+    <button mat-flat-button class="ks-actions__confirm ks-actions__confirm--basic" (click)="save()">Save</button>
+  </div>
+</mat-dialog-actions>

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

@@ -0,0 +1,128 @@
+/**
+ * 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,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions
+} from '@angular/material/dialog';
+import { KeyboardShortcutService, ShortcutItem } from '../../core/services/keyboard-shortcut.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { FormsModule } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { take } from 'rxjs/operators';
+
+@Component({
+  selector: 'mifosx-inline-create-shortcut-dialog',
+  templateUrl: './inline-create-shortcut-dialog.component.html',
+  styleUrls: ['../keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatButton,
+    FormsModule,
+    MatFormField,
+    MatLabel,
+    MatInput
+  ]
+})
+export class InlineCreateShortcutDialogComponent {
+  dialogRef = inject<MatDialogRef<InlineCreateShortcutDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
+  private keyboardShortcutService = inject(KeyboardShortcutService);
+
+  newShortcut: Partial<ShortcutItem> = {
+    title: this.data.pageName,
+    route: this.data.route,
+    action: 'navigate',
+    key: '',
+    ctrlKey: false,
+    shiftKey: false,
+    altKey: false,
+    custom: true,
+    id: 'custom_' + Date.now()
+  };
+
+  validationError: string | null = null;
+
+  formatShortcut(item: Partial<ShortcutItem>): string {
+    if (!item || (!item.key && !item.ctrlKey && !item.shiftKey && !item.altKey)) return '';
+    const parts = [];
+    if (item.ctrlKey) parts.push('Ctrl');
+    if (item.shiftKey) parts.push('Shift');
+    if (item.altKey) parts.push('Alt');
+    if (item.key) parts.push(item.key.toUpperCase());
+    return parts.join(' + ');
+  }
+
+  onKeyDown(event: KeyboardEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Ignore if only modifier keys are pressed
+    if ([
+        'Control',
+        'Shift',
+        'Alt',
+        'Meta'
+      ].includes(event.key)) {
+      return;
+    }
+
+    this.newShortcut.ctrlKey = event.ctrlKey;
+    this.newShortcut.shiftKey = event.shiftKey;
+    this.newShortcut.altKey = event.altKey;
+    this.newShortcut.key = event.key.toLowerCase();
+    this.validationError = null;
+  }
+
+  save() {
+    if (!this.newShortcut.title || this.newShortcut.title.trim() === '') {
+      this.validationError = 'Shortcut Name is required';
+      return;
+    }
+    if (!this.newShortcut.key) {
+      this.validationError = 'Key combination is required';
+      return;
+    }
+
+    const keyStr = `${!!this.newShortcut.ctrlKey}-${!!this.newShortcut.shiftKey}-${!!this.newShortcut.altKey}-${this.newShortcut.key.toLowerCase()}`;
+
+    this.keyboardShortcutService.activeShortcuts$.pipe(take(1)).subscribe((shortcuts) => {
+      // Check for duplicates
+      const seen = new Set<string>();
+      for (const s of shortcuts) {
+        seen.add(`${!!s.ctrlKey}-${!!s.shiftKey}-${!!s.altKey}-${s.key.toLowerCase()}`);
+      }
+
+      if (seen.has(keyStr)) {
+        this.validationError = `Duplicate shortcut detected: ${this.formatShortcut(this.newShortcut)}`;
+        return;
+      }
+
+      // Add and save
+      if (this.newShortcut.route) {
+        this.newShortcut.route = this.keyboardShortcutService.normalizeRouteStr(this.newShortcut.route);
+      }
+      shortcuts.push(this.newShortcut as ShortcutItem);
+      this.keyboardShortcutService.updateShortcuts(shortcuts);
+      this.dialogRef.close(true);
+    });
+  }
+
+  cancel() {
+    this.dialogRef.close(false);
+  }
+}

src/app/shared/shortcut-usage-dialog/shortcut-usage-dialog.component.html

@@ -0,0 +1,58 @@
+<!--
+  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/.
+-->
+
+<h1 mat-dialog-title>Shortcut Usage</h1>
+
+<div mat-dialog-content>
+  <table mat-table [dataSource]="usageData" class="mat-elevation-z1" style="width: 100%; margin-top: 10px">
+    <!-- Page Column -->
+    <ng-container matColumnDef="page">
+      <th mat-header-cell *matHeaderCellDef>Page</th>
+      <td mat-cell *matCellDef="let item">
+        <div>{{ item.pageName }}</div>
+        <div style="font-size: 11px; color: #888">{{ item.route }}</div>
+      </td>
+    </ng-container>
+
+    <!-- Visits Column -->
+    <ng-container matColumnDef="visits">
+      <th mat-header-cell *matHeaderCellDef style="text-align: center">Visits</th>
+      <td mat-cell *matCellDef="let item" style="text-align: center">
+        <span style="font-weight: 500">{{ item.visits }}</span>
+      </td>
+    </ng-container>
+
+    <!-- Status / Action Column -->
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef style="text-align: right">Status / Action</th>
+      <td mat-cell *matCellDef="let item" style="text-align: right">
+        @if (item.hasShortcut) {
+          <span style="color: #4caf50; font-size: 13px; font-weight: 500">✓ Shortcut exists</span>
+        } @else if (item.visits >= 5) {
+          <span style="color: #ff9800; font-size: 12px; margin-right: 10px; font-weight: 500">Frequently Used</span>
+          <button mat-button color="primary" (click)="createShortcut(item)">Create Shortcut</button>
+        } @else {
+          <span style="color: #aaa; font-size: 12px">Not enough visits</span>
+        }
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+
+  @if (usageData.length === 0) {
+    <div style="padding: 20px; text-align: center; color: #888; border: 1px solid #eee; border-top: none">
+      No usage data collected yet.
+    </div>
+  }
+</div>
+
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Close</button>
+</mat-dialog-actions>

src/app/shared/shortcut-usage-dialog/shortcut-usage-dialog.component.scss

@@ -0,0 +1,9 @@
+/**
+ * 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/.
+ */
+
+// Usage dialog styling

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

@@ -0,0 +1,92 @@
+/**
+ * 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, OnInit, inject } from '@angular/core';
+import {
+  MatDialogRef,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialog
+} from '@angular/material/dialog';
+import { ShortcutSuggestionService } from '../../core/services/shortcut-suggestion.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { MatButton } from '@angular/material/button';
+import {
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { InlineCreateShortcutDialogComponent } from './inline-create-shortcut-dialog.component';
+
+@Component({
+  selector: 'mifosx-shortcut-usage-dialog',
+  templateUrl: './shortcut-usage-dialog.component.html',
+  styleUrls: ['./shortcut-usage-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatButton,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow
+  ]
+})
+export class ShortcutUsageDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<ShortcutUsageDialogComponent>>(MatDialogRef);
+  private shortcutSuggestionService = inject(ShortcutSuggestionService);
+  private dialog = inject(MatDialog);
+
+  usageData: { route: string; pageName: string; visits: number; hasShortcut: boolean }[] = [];
+  displayedColumns: string[] = [
+    'page',
+    'visits',
+    'status'
+  ];
+
+  ngOnInit() {
+    this.refreshData();
+  }
+
+  refreshData() {
+    this.usageData = this.shortcutSuggestionService.getUsageData();
+  }
+
+  createShortcut(item: { pageName: string; route: string }) {
+    const inlineDialogRef = this.dialog.open(InlineCreateShortcutDialogComponent, {
+      data: item,
+      width: '400px',
+      disableClose: true
+    });
+
+    inlineDialogRef.afterClosed().subscribe((saved) => {
+      if (saved) {
+        this.shortcutSuggestionService.markAsDismissed(item.route);
+        this.refreshData(); // update the table so the checkmark appears!
+      }
+    });
+  }
+}

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

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

src/app/system/roles-and-permissions/add-role/add-role.component.ts

@@ -13,6 +13,7 @@ import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { SystemService } from '../../system.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /** Custom Service Zitadel */
@@ -36,6 +37,7 @@ export class AddRoleComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private authService = inject(AuthService);
+  private alertService = inject(AlertService);
 
   /** Role form. */
   roleForm: UntypedFormGroup;
@@ -69,7 +71,12 @@ export class AddRoleComponent implements OnInit {
    */
   submit() {
     this.systemService.createRole(this.roleForm.value).subscribe((response: any) => {
-      if (environment.OIDC.oidcServerEnabled) {
+      if (response?.rollbackTransaction) {
+        this.alertService.alert({
+          type: 'Success',
+          message: 'Role creation request submitted successfully for approval.'
+        });
+      } else if (environment.OIDC.oidcServerEnabled) {
         this.authService.createRole(response.resourceId, this.roleForm.value.name, this.roleForm.value.description);
       }
       this.router.navigate(['../'], { relativeTo: this.route });

src/app/system/roles-and-permissions/edit-role/edit-role.component.ts

@@ -13,6 +13,7 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { SystemService } from '../../system.service';
+import { AlertService } from 'app/core/alert/alert.service';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /** Custom Service Zitadel */
@@ -36,6 +37,7 @@ export class EditRoleComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private authService = inject(AuthService);
+  private alertService = inject(AlertService);
 
   /** Role Form */
   roleForm: UntypedFormGroup;
@@ -83,8 +85,13 @@ export class EditRoleComponent implements OnInit {
    * if successful redirects to view updated roles and permissions.
    */
   submit() {
-    this.systemService.updateRole(this.roleForm.value, this.roleData.id).subscribe(() => {
-      if (environment.OIDC.oidcServerEnabled) {
+    this.systemService.updateRole(this.roleForm.value, this.roleData.id).subscribe((response: any) => {
+      if (response?.rollbackTransaction) {
+        this.alertService.alert({
+          type: 'Success',
+          message: 'Role update request submitted successfully for approval.'
+        });
+      } else if (environment.OIDC.oidcServerEnabled) {
         this.authService.updateRole(
           this.roleData.id,
           this.roleForm.get('name')?.value,

src/app/system/roles-and-permissions/view-role/view-role.component.ts

@@ -22,6 +22,7 @@ import { EnableDialogComponent } from '../../../shared/enable-dialog/enable-dial
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { AlertService } from 'app/core/alert/alert.service';
 
 /** Custom Service Zitadel */
 import { environment } from '../../../../environments/environment';
@@ -48,6 +49,7 @@ export class ViewRoleComponent implements OnInit {
   private translateService = inject(TranslateService);
   dialog = inject(MatDialog);
   private authService = inject(AuthService);
+  private alertService = inject(AlertService);
 
   /** Role Permissions Data */
   rolePermissionService: any;
@@ -720,7 +722,14 @@ export class ViewRoleComponent implements OnInit {
     this.formGroup.controls.roster.disable();
     this.checkboxesChanged = false;
     this.isDisabled = true;
-    this.systemService.updateRolePermission(this.roleId, permissionData).subscribe((response: any) => {});
+    this.systemService.updateRolePermission(this.roleId, permissionData).subscribe((response: any) => {
+      if (response?.rollbackTransaction) {
+        this.alertService.alert({
+          type: 'Success',
+          message: 'Role permissions update request submitted successfully for approval.'
+        });
+      }
+    });
   }
 
   /**
@@ -756,8 +765,13 @@ export class ViewRoleComponent implements OnInit {
     });
     deleteRoleDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {
-        this.systemService.deleteRole(this.roleId).subscribe(() => {
-          if (environment.OIDC.oidcServerEnabled) {
+        this.systemService.deleteRole(this.roleId).subscribe((res: any) => {
+          if (res?.rollbackTransaction) {
+            this.alertService.alert({
+              type: 'Success',
+              message: 'Role deletion request submitted successfully for approval.'
+            });
+          } else if (environment.OIDC.oidcServerEnabled) {
             this.authService.deleteRole(this.roleId);
           }
           this.router.navigate(['/system/roles-and-permissions']);
@@ -776,7 +790,13 @@ export class ViewRoleComponent implements OnInit {
     });
     enableRoleDialogRef.afterClosed().subscribe((response: any) => {
       if (response.enable) {
-        this.systemService.enableRole(this.roleId).subscribe(() => {
+        this.systemService.enableRole(this.roleId).subscribe((res: any) => {
+          if (res?.rollbackTransaction) {
+            this.alertService.alert({
+              type: 'Success',
+              message: 'Role enablement request submitted successfully for approval.'
+            });
+          }
           this.router.navigate(['/system/roles-and-permissions']);
         });
       } else {
@@ -793,7 +813,13 @@ export class ViewRoleComponent implements OnInit {
     });
     deleteRoleDialogRef.afterClosed().subscribe((response: any) => {
       if (response.disable) {
-        this.systemService.disableRole(this.roleId).subscribe(() => {
+        this.systemService.disableRole(this.roleId).subscribe((res: any) => {
+          if (res?.rollbackTransaction) {
+            this.alertService.alert({
+              type: 'Success',
+              message: 'Role disablement request submitted successfully for approval.'
+            });
+          }
           this.router.navigate(['/system/roles-and-permissions']);
         });
       } else {

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

@@ -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>

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

@@ -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;

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

@@ -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,26 +106,20 @@ 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[] {
-    return (items || []).filter((item: any) => !this.productEditEntities.includes(item?.entityName));
+  private excludeRoutedElsewhere(items: any[]): any[] {
+    return (items || []).filter(
+      (item: any) => !isProductEntity(item?.entityName) && !isTempTableAccountEdit(item?.entityName, item?.actionName)
+    );
   }
 
   /**
@@ -139,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);
@@ -179,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 {
@@ -240,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;
@@ -268,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();
   }
 
   /**

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>
 
@@ -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

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;
+  }
 }
 
 .psp-diff-panel {

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

@@ -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());
       }
     });
   }

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

@@ -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>

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

@@ -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;
+}

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

@@ -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();
+  }
+}

src/app/tasks/checker-inbox-and-tasks-tabs/pending-user-edits/pending-user-edits.component.html

@@ -0,0 +1,161 @@
+<!--
+  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="pce-tab-content">
+  <div class="pce-action-bar">
+    <div class="pce-search-box">
+      <mat-icon>search</mat-icon>
+      <input #filterInput type="text" placeholder="Search by username" (keyup.enter)="applyFilter(filterInput.value)" />
+    </div>
+
+    <select class="pce-filter-select" [(ngModel)]="filterStatus" (change)="onFilterChange()">
+      @for (opt of statusOptions; track opt.value) {
+        <option [value]="opt.value">{{ opt.label }}</option>
+      }
+    </select>
+
+    <span class="pce-fb-sep"></span>
+
+    <div class="pce-presets">
+      @for (p of datePresets; track p.key) {
+        <button
+          type="button"
+          class="pce-preset-chip"
+          [class.pce-preset-chip--active]="activePreset === p.key"
+          (click)="applyPreset(p.key)"
+        >
+          {{ p.label }}
+        </button>
+      }
+    </div>
+
+    <button type="button" class="pce-btn pce-btn-refresh" (click)="load()" [disabled]="loading">
+      <fa-icon icon="sync-alt"></fa-icon>
+    </button>
+  </div>
+
+  @if (loading) {
+    <div class="empty-state">
+      <p class="empty-title">Loading&hellip;</p>
+    </div>
+  } @else if (loaded && requests.length === 0) {
+    <div class="empty-state">
+      <fa-icon icon="hourglass-half" class="empty-icon"></fa-icon>
+      <p class="empty-title">No {{ filterStatus | lowercase }} user requests</p>
+      <p class="empty-text">No pending user operations found for this filter.</p>
+    </div>
+  } @else {
+    <div class="table-container">
+      <table mat-table [dataSource]="requests" class="modern-table">
+        <ng-container matColumnDef="id">
+          <th mat-header-cell *matHeaderCellDef>#</th>
+          <td mat-cell *matCellDef="let req">{{ req.id }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="requestType">
+          <th mat-header-cell *matHeaderCellDef>Action</th>
+          <td mat-cell *matCellDef="let req">
+            <span
+              class="type-badge"
+              [class.type-create]="req.requestType === 'CREATE_USER'"
+              [class.type-update]="req.requestType === 'UPDATE_USER'"
+            >
+              {{ req.requestType === 'CREATE_USER' ? 'Create User' : 'Update User' }}
+            </span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="username">
+          <th mat-header-cell *matHeaderCellDef>Username</th>
+          <td mat-cell *matCellDef="let req" class="font-medium">{{ req.username || '—' }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="fullname">
+          <th mat-header-cell *matHeaderCellDef>Name</th>
+          <td mat-cell *matCellDef="let req">{{ req.firstname || '' }} {{ req.lastname || '' }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="email">
+          <th mat-header-cell *matHeaderCellDef>Email</th>
+          <td mat-cell *matCellDef="let req">{{ req.email || '—' }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="office">
+          <th mat-header-cell *matHeaderCellDef>Office ID</th>
+          <td mat-cell *matCellDef="let req">{{ req.officeId || '—' }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="makerUsername">
+          <th mat-header-cell *matHeaderCellDef>Submitted By</th>
+          <td mat-cell *matCellDef="let req">{{ req.makerUsername }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="submittedDate">
+          <th mat-header-cell *matHeaderCellDef>Submitted On</th>
+          <td mat-cell *matCellDef="let req">{{ formatDate(req.submittedDate) }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef>Status</th>
+          <td mat-cell *matCellDef="let req">
+            <span class="status-badge" [ngClass]="statusClass(req.status)">{{ req.status }}</span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef>Actions</th>
+          <td mat-cell *matCellDef="let req">
+            <div class="action-buttons">
+              <button
+                type="button"
+                class="btn-action btn-action--compare"
+                (click)="compare(req)"
+                title="View / Compare Details"
+              >
+                <fa-icon icon="eye"></fa-icon>
+                <span>View</span>
+              </button>
+
+              @if (req.status === 'PENDING') {
+                <button
+                  type="button"
+                  class="btn-action btn-action--approve"
+                  (click)="approve(req)"
+                  title="Approve User Request"
+                >
+                  <fa-icon icon="check"></fa-icon>
+                  <span>Approve</span>
+                </button>
+
+                <button
+                  type="button"
+                  class="btn-action btn-action--reject"
+                  (click)="reject(req)"
+                  title="Reject User Request"
+                >
+                  <fa-icon icon="times"></fa-icon>
+                  <span>Reject</span>
+                </button>
+              }
+            </div>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      </table>
+
+      <mat-paginator
+        [length]="totalRecords"
+        [pageSize]="pageSize"
+        [pageSizeOptions]="[10, 20, 50]"
+        (page)="onPageChange($event)"
+      ></mat-paginator>
+    </div>
+  }
+</div>

src/app/tasks/checker-inbox-and-tasks-tabs/pending-user-edits/pending-user-edits.component.scss

@@ -0,0 +1,221 @@
+/**
+ * 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/.
+ */
+
+.pce-tab-content {
+  padding: 16px;
+}
+
+.pce-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.pce-search-box {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  padding: 4px 10px;
+  gap: 6px;
+
+  mat-icon {
+    font-size: 18px;
+    color: #64748b;
+  }
+
+  input {
+    border: none;
+    outline: none;
+    font-size: 0.88rem;
+  }
+}
+
+.pce-filter-select {
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid #cbd5e1;
+  background: #fff;
+  font-size: 0.88rem;
+}
+
+.pce-fb-sep {
+  height: 24px;
+  width: 1px;
+  background: #e2e8f0;
+}
+
+.pce-presets {
+  display: flex;
+  gap: 6px;
+}
+
+.pce-preset-chip {
+  padding: 4px 10px;
+  border-radius: 16px;
+  border: 1px solid #cbd5e1;
+  background: #f8fafc;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &--active {
+    background: #2563eb;
+    color: #fff;
+    border-color: #2563eb;
+  }
+}
+
+.pce-btn-refresh {
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid #cbd5e1;
+  background: #fff;
+  cursor: pointer;
+}
+
+.table-container {
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
+}
+
+.modern-table {
+  width: 100%;
+
+  th {
+    background: #f8fafc;
+    color: #475569;
+    font-weight: 600;
+    font-size: 0.82rem;
+    padding: 12px 14px;
+    border-bottom: 2px solid #e2e8f0;
+  }
+
+  td {
+    padding: 10px 14px;
+    font-size: 0.85rem;
+    border-bottom: 1px solid #f1f5f9;
+  }
+}
+
+.type-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.72rem;
+  font-weight: 600;
+
+  &.type-create {
+    background-color: #e0f2fe;
+    color: #0369a1;
+  }
+
+  &.type-update {
+    background-color: #f3e8ff;
+    color: #7e22ce;
+  }
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+
+  &--pending {
+    background-color: #fef3c7;
+    color: #b45309;
+  }
+
+  &--approved {
+    background-color: #d1fae5;
+    color: #065f46;
+  }
+
+  &--rejected {
+    background-color: #fee2e2;
+    color: #991b1b;
+  }
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.btn-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s;
+
+  &--compare {
+    background: #f1f5f9;
+    color: #334155;
+    border-color: #cbd5e1;
+
+    &:hover {
+      background: #e2e8f0;
+    }
+  }
+
+  &--approve {
+    background: #ecfdf5;
+    color: #059669;
+    border-color: #a7f3d0;
+
+    &:hover {
+      background: #d1fae5;
+    }
+  }
+
+  &--reject {
+    background: #fef2f2;
+    color: #dc2626;
+    border-color: #fecaca;
+
+    &:hover {
+      background: #fee2e2;
+    }
+  }
+}
+
+.empty-state {
+  text-align: center;
+  padding: 48px 16px;
+  color: #64748b;
+
+  .empty-icon {
+    font-size: 32px;
+    margin-bottom: 8px;
+  }
+
+  .empty-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .empty-text {
+    font-size: 0.88rem;
+    margin-top: 4px;
+  }
+}

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

@@ -0,0 +1,323 @@
+/**
+ * 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, OnInit, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+
+import { UsersService } from 'app/users/users.service';
+import { SettingsService } from 'app/settings/settings.service';
+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 {
+  UserEditCompareDialogComponent,
+  UserEditCompareRow,
+  UserEditCompareDialogData
+} from './user-edit-compare-dialog/user-edit-compare-dialog.component';
+
+const USER_FIELD_LABELS: Record<string, string> = {
+  username: 'Username',
+  firstname: 'First Name',
+  lastname: 'Last Name',
+  email: 'Email Address',
+  mobileNo: 'Mobile Number',
+  officeId: 'Office',
+  officeName: 'Office Name',
+  staffId: 'Staff Member',
+  roles: 'Assigned Roles',
+  roleNames: 'Assigned Roles',
+  otpDeliveryMethod: '2FA / OTP Channel',
+  sendPasswordToEmail: 'Send Password To Email',
+  passwordNeverExpires: 'Password Never Expires',
+  password: 'Password'
+};
+
+@Component({
+  selector: 'mifosx-pending-user-edits',
+  templateUrl: './pending-user-edits.component.html',
+  styleUrls: ['./pending-user-edits.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FormsModule,
+    FaIconComponent,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatIcon,
+    MatPaginatorModule
+  ]
+})
+export class PendingUserEditsComponent implements OnInit {
+  private usersService = inject(UsersService);
+  private settingsService = inject(SettingsService);
+  private dialog = inject(MatDialog);
+
+  requests: any[] = [];
+  loading = false;
+  loaded = false;
+
+  filterStatus = 'PENDING';
+  filterUsername = '';
+  fromDate: Date | null = null;
+  toDate: Date | null = null;
+  maxDate = new Date();
+  activePreset = 'all';
+
+  pageIndex = 0;
+  pageSize = 20;
+  totalRecords = 0;
+
+  displayedColumns = [
+    'id',
+    'requestType',
+    'username',
+    'fullname',
+    'email',
+    'office',
+    'makerUsername',
+    'submittedDate',
+    'status',
+    'actions'
+  ];
+
+  statusOptions = [
+    { value: 'PENDING', label: 'Pending Approval' },
+    { value: 'APPROVED', label: 'Approved' },
+    { value: 'REJECTED', label: 'Rejected' },
+    { value: '', label: 'All Statuses' }
+  ];
+
+  datePresets = [
+    { key: 'today', label: 'Today' },
+    { key: '7d', label: 'Last 7 Days' },
+    { key: '30d', label: 'Last 30 Days' },
+    { key: 'all', label: 'All Dates' }
+  ];
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.loading = true;
+    const fromStr = this.fromDate ? this.formatIsoDate(this.fromDate) : undefined;
+    const toStr = this.toDate ? this.formatIsoDate(this.toDate) : undefined;
+    const offset = this.pageIndex * this.pageSize;
+
+    this.usersService
+      .getPendingUsers(this.filterStatus, this.filterUsername, fromStr, toStr, offset, this.pageSize)
+      .subscribe({
+        next: (response: any) => {
+          this.requests = response.pageItems || [];
+          this.totalRecords = response.totalFilteredRecords || this.requests.length;
+          this.loading = false;
+          this.loaded = true;
+        },
+        error: () => {
+          this.requests = [];
+          this.loading = false;
+          this.loaded = true;
+        }
+      });
+  }
+
+  onFilterChange(): void {
+    this.pageIndex = 0;
+    this.load();
+  }
+
+  applyFilter(query: string): void {
+    this.filterUsername = query;
+    this.pageIndex = 0;
+    this.load();
+  }
+
+  applyPreset(key: string): void {
+    this.activePreset = key;
+    const now = new Date();
+    if (key === 'today') {
+      this.fromDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+      this.toDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    } else if (key === '7d') {
+      const past = new Date();
+      past.setDate(past.getDate() - 7);
+      this.fromDate = past;
+      this.toDate = now;
+    } else if (key === '30d') {
+      const past = new Date();
+      past.setDate(past.getDate() - 30);
+      this.fromDate = past;
+      this.toDate = now;
+    } else {
+      this.fromDate = null;
+      this.toDate = null;
+    }
+    this.pageIndex = 0;
+    this.load();
+  }
+
+  onPageChange(event: PageEvent): void {
+    this.pageIndex = event.pageIndex;
+    this.pageSize = event.pageSize;
+    this.load();
+  }
+
+  formatDate(val: any): string {
+    if (!val) {
+      return '—';
+    }
+    const d = new Date(val);
+    return isNaN(d.getTime()) ? String(val) : d.toLocaleString();
+  }
+
+  private formatIsoDate(d: Date): string {
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    return `${yyyy}-${mm}-${dd}`;
+  }
+
+  statusClass(status: string): string {
+    if (status === 'PENDING') {
+      return 'status-badge--pending';
+    }
+    if (status === 'APPROVED') {
+      return 'status-badge--approved';
+    }
+    if (status === 'REJECTED') {
+      return 'status-badge--rejected';
+    }
+    return '';
+  }
+
+  compare(req: any): void {
+    this.usersService.getPendingUser(req.id).subscribe((detail: any) => {
+      const rows: UserEditCompareRow[] = [];
+      const proposed = detail.proposedValues || {};
+      const original = detail.originalValues || {};
+
+      const allKeys = Array.from(
+        new Set([
+          ...Object.keys(original),
+          ...Object.keys(proposed)
+        ])
+      );
+      for (const k of allKeys) {
+        if (k === 'repeatPassword' || k === 'pendingLockKey' || k === 'id') {
+          continue;
+        }
+        const label = USER_FIELD_LABELS[k] || k;
+        let curVal = original[k];
+        let propVal = proposed[k];
+
+        if (Array.isArray(curVal)) {
+          curVal = curVal.join(', ');
+        }
+        if (Array.isArray(propVal)) {
+          propVal = propVal.join(', ');
+        }
+
+        rows.push({
+          key: k,
+          label,
+          current: curVal,
+          value: propVal
+        });
+      }
+
+      const data: UserEditCompareDialogData = {
+        requestId: detail.id,
+        requestType: detail.requestType,
+        username: detail.username || req.username,
+        rows,
+        status: detail.status,
+        makerUsername: detail.makerUsername,
+        submittedDate: this.formatDate(detail.submittedDate),
+        checkerUsername: detail.checkerUsername,
+        checkedDate: this.formatDate(detail.checkedDate),
+        rejectReason: detail.rejectReason
+      };
+
+      this.dialog.open(UserEditCompareDialogComponent, {
+        data,
+        width: '650px'
+      });
+    });
+  }
+
+  approve(req: any): void {
+    const actionLabel = req.requestType === 'CREATE_USER' ? 'creation' : 'update';
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        heading: `Approve User ${actionLabel}`,
+        dialogContext: `Are you sure you want to approve this user ${actionLabel} for '${req.username}'?`
+      }
+    });
+
+    dialogRef.afterClosed().subscribe((confirmed: boolean) => {
+      if (confirmed) {
+        this.usersService.approvePendingUser(req.id).subscribe(() => {
+          this.load();
+        });
+      }
+    });
+  }
+
+  reject(req: any): void {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlType: 'input',
+        key: 'reason',
+        label: 'Rejection Reason',
+        required: true,
+        order: 1
+      })
+    ];
+
+    const dialogRef = this.dialog.open(FormDialogComponent, {
+      data: {
+        title: `Reject User Request`,
+        layout: { addButtonText: 'Reject' },
+        formfields
+      }
+    });
+
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result && result.data && result.data.reason) {
+        this.usersService.rejectPendingUser(req.id, result.data.reason).subscribe(() => {
+          this.load();
+        });
+      }
+    });
+  }
+}

src/app/tasks/checker-inbox-and-tasks-tabs/pending-user-edits/user-edit-compare-dialog/user-edit-compare-dialog.component.html

@@ -0,0 +1,75 @@
+<!--
+  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/.
+-->
+
+<h2 mat-dialog-title class="dialog-title">
+  <span class="dialog-title__action"
+    >{{ data.requestType === 'CREATE_USER' ? 'Create User' : 'Update User' }} Request</span
+  >
+  <span class="dialog-title__user">&mdash; {{ data.username }}</span>
+</h2>
+
+<mat-dialog-content class="dialog-body">
+  <div class="meta-banner">
+    <div class="meta-item">
+      <span class="meta-label">Request ID</span>
+      <span class="meta-val">#{{ data.requestId }}</span>
+    </div>
+    <div class="meta-item">
+      <span class="meta-label">Submitted By</span>
+      <span class="meta-val">{{ data.makerUsername }}</span>
+    </div>
+    <div class="meta-item">
+      <span class="meta-label">Submitted On</span>
+      <span class="meta-val">{{ data.submittedDate }}</span>
+    </div>
+    <div class="meta-item">
+      <span class="meta-label">Status</span>
+      <span
+        class="status-badge"
+        [class.badge-pending]="data.status === 'PENDING'"
+        [class.badge-approved]="data.status === 'APPROVED'"
+        [class.badge-rejected]="data.status === 'REJECTED'"
+      >
+        {{ data.status }}
+      </span>
+    </div>
+  </div>
+
+  @if (data.rejectReason) {
+    <div class="reject-banner"><strong>Rejection Reason:</strong> {{ data.rejectReason }}</div>
+  }
+
+  <table class="compare-table">
+    <thead>
+      <tr>
+        <th>Field</th>
+        @if (data.requestType === 'UPDATE_USER') {
+          <th>Current Value</th>
+        }
+        <th>Proposed Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (r of data.rows; track r.key) {
+        <tr>
+          <td class="col-field">{{ r.label }}</td>
+          @if (data.requestType === 'UPDATE_USER') {
+            <td class="col-curr">{{ r.current != null && r.current !== '' ? r.current : '—' }}</td>
+          }
+          <td class="col-prop" [class.highlight-change]="data.requestType === 'UPDATE_USER' && r.current !== r.value">
+            {{ r.value != null && r.value !== '' ? r.value : '—' }}
+          </td>
+        </tr>
+      }
+    </tbody>
+  </table>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close class="btn-close">Close</button>
+</mat-dialog-actions>

src/app/tasks/checker-inbox-and-tasks-tabs/pending-user-edits/user-edit-compare-dialog/user-edit-compare-dialog.component.scss

@@ -0,0 +1,141 @@
+/**
+ * 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/.
+ */
+
+.dialog-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e2e8f0;
+
+  &__action {
+    color: #2563eb;
+  }
+
+  &__user {
+    color: #475569;
+  }
+}
+
+.dialog-body {
+  padding: 16px 20px;
+  max-height: 70vh;
+}
+
+.meta-banner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 12px 16px;
+  background-color: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  margin-bottom: 16px;
+}
+
+.meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.meta-label {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  color: #64748b;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.meta-val {
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: #1e293b;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+
+  &.badge-pending {
+    background-color: #fef3c7;
+    color: #b45309;
+  }
+
+  &.badge-approved {
+    background-color: #d1fae5;
+    color: #065f46;
+  }
+
+  &.badge-rejected {
+    background-color: #fee2e2;
+    color: #991b1b;
+  }
+}
+
+.reject-banner {
+  background-color: #fff1f2;
+  border: 1px solid #fecdd3;
+  color: #9f1239;
+  padding: 10px 14px;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  margin-bottom: 16px;
+}
+
+.compare-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+
+  th {
+    text-align: left;
+    padding: 8px 12px;
+    background: #f1f5f9;
+    color: #475569;
+    font-weight: 600;
+    border-bottom: 2px solid #cbd5e1;
+  }
+
+  td {
+    padding: 8px 12px;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .col-field {
+    font-weight: 500;
+    color: #334155;
+    width: 28%;
+  }
+
+  .col-curr {
+    color: #64748b;
+  }
+
+  .col-prop {
+    color: #0f172a;
+    font-weight: 500;
+
+    &.highlight-change {
+      background-color: #f0fdf4;
+      color: #15803d;
+      font-weight: 600;
+    }
+  }
+}
+
+.btn-close {
+  color: #64748b;
+}

src/app/tasks/checker-inbox-and-tasks-tabs/pending-user-edits/user-edit-compare-dialog/user-edit-compare-dialog.component.ts

@@ -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/.
+ */
+
+import { Component, inject } from '@angular/core';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+export interface UserEditCompareRow {
+  key: string;
+  label: string;
+  current: any;
+  value: any;
+}
+
+export interface UserEditCompareDialogData {
+  requestId: string | number;
+  requestType: string;
+  username: string;
+  rows: UserEditCompareRow[];
+  status?: string;
+  makerUsername?: string;
+  submittedDate?: string | null;
+  checkerUsername?: string;
+  checkedDate?: string | null;
+  rejectReason?: string;
+}
+
+@Component({
+  selector: 'mifosx-user-edit-compare-dialog',
+  templateUrl: './user-edit-compare-dialog.component.html',
+  styleUrls: ['./user-edit-compare-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
+})
+export class UserEditCompareDialogComponent {
+  dialogRef = inject<MatDialogRef<UserEditCompareDialogComponent>>(MatDialogRef);
+  data = inject<UserEditCompareDialogData>(MAT_DIALOG_DATA);
+}

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"
@@ -108,6 +108,15 @@
       <fa-icon icon="edit" class="ac-tab__ic"></fa-icon>
       <span>Pending Client Edits</span>
     </a>
+    <a
+      class="ac-tab"
+      routerLink="./pending-user-edits"
+      routerLinkActive="ac-tab--active"
+      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
+    >
+      <fa-icon icon="user-cog" class="ac-tab__ic"></fa-icon>
+      <span>Pending User Approvals</span>
+    </a>
     <a
       class="ac-tab"
       routerLink="./rejected-account"

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

@@ -33,6 +33,7 @@ import { ChequebookRequestsComponent } from './checker-inbox-and-tasks-tabs/cheq
 import { PendingSavingsAccountEditsComponent } from './checker-inbox-and-tasks-tabs/pending-savings-account-edits/pending-savings-account-edits.component';
 import { PendingShareAccountEditsComponent } from './checker-inbox-and-tasks-tabs/pending-share-account-edits/pending-share-account-edits.component';
 import { PendingClientEditsComponent } from './checker-inbox-and-tasks-tabs/pending-client-edits/pending-client-edits.component';
+import { PendingUserEditsComponent } from './checker-inbox-and-tasks-tabs/pending-user-edits/pending-user-edits.component';
 import { ViewCheckerInboxComponent } from './view-checker-inbox/view-checker-inbox.component';
 
 /** Custom Resolvers */
@@ -123,13 +124,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,
@@ -156,6 +163,11 @@ const routes: Routes = [
           component: PendingClientEditsComponent,
           data: { title: 'Pending Client Edits' }
         },
+        {
+          path: 'pending-user-edits',
+          component: PendingUserEditsComponent,
+          data: { title: 'Pending User Approvals' }
+        },
         {
           path: 'withdrawal-requests',
           component: WithdrawalRequestsComponent,

src/app/tasks/tasks.service.ts

@@ -249,14 +249,6 @@ export class TasksService {
     return this.http.post(`/makercheckers/${makerCheckerId}`, {}, { params: httpParams });
   }
 
-  /**
-   * Execute Maker Checker Delete Action
-   * @param {makerCheckerId} MakerCheckerId
-   */
-  deleteMakerChecker(makerCheckerId: any): Observable<any> {
-    return this.http.delete(`/makercheckers/${makerCheckerId}`);
-  }
-
   /**
    * Get Maker Checker Details.
    * @param {makerCheckerId} MakerCheckerId

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

@@ -6,108 +6,166 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-@if (isProductEditEntry) {
-  <div class="container m-b-20">
-    <div class="mat-elevation-z1" style="padding: 12px 16px; border-left: 4px solid #f59e0b; background: #fffbeb">
-      This is a product edit awaiting approval. Approve or reject it from
-      <strong>Approvals &gt; Pending Product Edits</strong> instead — actioning it here would not release its lock.
+<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">{{ headingTitle }}</span>
+    @if (isDialog) {
+      <button type="button" class="vci-head__close" (click)="close()">
+        <fa-icon icon="times"></fa-icon>
+        <span>{{ 'labels.buttons.Close' | translate }}</span>
+      </button>
+    }
+  </div>
+
+  <!-- As a dialog the detail is fetched rather than resolved, so nothing below can render until it
+       arrives — every field reads checkerInboxDetail.* directly. -->
+  @if (loading) {
+    <div class="vci-loading">
+      <fa-icon icon="spinner" class="vci-loading__ic"></fa-icon>
+      <span>{{ 'labels.heading.Loading' | translate }}…</span>
     </div>
-  </div>
-} @else {
-  <div class="layout-row align-end gap-1percent layout-lt-md-column container m-b-20">
-    <button mat-raised-button color="success" (click)="approveChecker()">
-      <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
-    </button>
-    <button mat-raised-button color="warn" (click)="deleteChecker()">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
-    </button>
-    <button mat-raised-button color="reject" (click)="rejectChecker()">
-      <fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reject' | translate }}
-    </button>
-  </div>
-}
+  }
 
-<div class="container">
-  <mat-card>
-    <mat-card-content>
-      <div class="layout-row-wrap responsive-column">
-        <h2 class="mat-h2 flex-fill">{{ 'labels.heading.View Checker Inbox' | translate }}</h2>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
-
-        <mat-divider [inset]="true"></mat-divider>
-
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.ID' | translate }}:</span>
-          <span class="flex-60">{{ checkerInboxDetail.id }}</span>
+  @if (checkerInboxDetail) {
+    <div class="vci-body">
+      @if (isProductEditEntry) {
+        <div class="vci-notice">
+          This is a product edit awaiting approval. Approve or reject it from
+          <strong>Approvals &gt; Pending Product Edits</strong> instead — actioning it here would not release its lock.
         </div>
-
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Status' | translate }}:</span>
-          <span class="flex-60">{{ checkerInboxDetail.processingResult }}</span>
+      } @else {
+        <div class="vci-actions">
+          <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--reject" (click)="rejectChecker()">
+            <fa-icon icon="times"></fa-icon><span>{{ 'labels.buttons.Reject' | translate }}</span>
+          </button>
         </div>
+      }
 
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.User' | translate }}:</span>
-          <span class="flex-60">{{ checkerInboxDetail.maker }}</span>
-        </div>
-
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Action' | translate }}:</span>
-          <span class="flex-60">{{ checkerInboxDetail.actionName }}</span>
-        </div>
-
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Entity' | translate }}:</span>
-          <span class="flex-60">{{ checkerInboxDetail.entityName }}</span>
-        </div>
-
-        @if (checkerInboxDetail.resourceId) {
-          <div class="flex-fill">
-            <span class="flex-40">{{ 'labels.inputs.Resource ID' | translate }}:</span>
-            <span class="flex-60">{{ checkerInboxDetail.resourceId }}</span>
+      <div class="vci-section">
+        <div class="vci-section__title">{{ 'labels.heading.Details' | translate }}</div>
+        <!-- A real label/value grid rather than the global flex-40/flex-60 utilities, which are sized
+             for a full-width page and collapse into one run-together line inside a dialog. -->
+        <dl class="vci-grid">
+          <div class="vci-kv">
+            <dt>{{ 'labels.inputs.ID' | translate }}</dt>
+            <dd>{{ checkerInboxDetail.id }}</dd>
           </div>
-        }
-
-        <div class="flex-fill">
-          <span class="flex-40">{{ 'labels.inputs.Date' | translate }}:</span>
-          <span class="flex-60">{{ checkerInboxDetail.madeOnDate | dateFormat }}</span>
-        </div>
-
-        @if (checkerInboxDetail.officeName) {
-          <div class="flex-fill">
-            <span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
-            <span class="flex-60">{{ checkerInboxDetail.officeName }}</span>
+          <div class="vci-kv">
+            <dt>{{ 'labels.inputs.Status' | translate }}</dt>
+            <dd>{{ checkerInboxDetail.processingResult || '—' }}</dd>
           </div>
-        }
-
-        @if (checkerInboxDetail.savingsAccountNo) {
-          <div class="flex-fill">
-            <span class="flex-40">{{ 'labels.inputs.Savings Account Number' | translate }}:</span>
-            <span class="flex-60">{{ checkerInboxDetail.savingsAccountNo }}</span>
+          <div class="vci-kv">
+            <dt>{{ 'labels.inputs.User' | translate }}</dt>
+            <dd>{{ checkerInboxDetail.maker || '—' }}</dd>
           </div>
-        }
-
-        @if (checkerInboxDetail.groupLevelName) {
-          <div class="flex-fill">
-            <span class="flex-40"> {{ checkerInboxDetail.groupLevelName }}</span>
-            <span class="flex-60">{{ checkerInboxDetail.groupName }}</span>
+          <div class="vci-kv">
+            <dt>{{ 'labels.inputs.Action' | translate }}</dt>
+            <dd>
+              <span class="vci-tag" [class.vci-tag--danger]="checkerInboxDetail.actionName === 'DELETE'">{{
+                checkerInboxDetail.actionName
+              }}</span>
+            </dd>
           </div>
-        }
-
-        @if (displayJSONData) {
-          <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Command' | translate }}</h3>
-          <mat-divider [inset]="true"></mat-divider>
-          @for (json of jsondata | keyvalue; track json) {
-            <div class="flex-fill">
-              <span class="flex-40">{{ json.key }}:</span>
-              <span class="flex-60">{{ json.value }}</span>
+          <div class="vci-kv">
+            <dt>{{ 'labels.inputs.Entity' | translate }}</dt>
+            <dd>{{ checkerInboxDetail.entityName }}</dd>
+          </div>
+          @if (checkerInboxDetail.resourceId) {
+            <div class="vci-kv">
+              <dt>{{ 'labels.inputs.Resource ID' | translate }}</dt>
+              <dd>{{ checkerInboxDetail.resourceId }}</dd>
             </div>
           }
-        }
+          <div class="vci-kv">
+            <dt>{{ 'labels.inputs.Date' | translate }}</dt>
+            <dd>{{ checkerInboxDetail.madeOnDate | dateFormat }}</dd>
+          </div>
+          @if (checkerInboxDetail.officeName) {
+            <div class="vci-kv">
+              <dt>{{ 'labels.inputs.Office' | translate }}</dt>
+              <dd>{{ checkerInboxDetail.officeName }}</dd>
+            </div>
+          }
+          @if (checkerInboxDetail.savingsAccountNo) {
+            <div class="vci-kv">
+              <dt>{{ 'labels.inputs.Savings Account Number' | translate }}</dt>
+              <dd>{{ checkerInboxDetail.savingsAccountNo }}</dd>
+            </div>
+          }
+          @if (checkerInboxDetail.groupLevelName) {
+            <div class="vci-kv">
+              <dt>{{ checkerInboxDetail.groupLevelName }}</dt>
+              <dd>{{ checkerInboxDetail.groupName }}</dd>
+            </div>
+          }
+        </dl>
       </div>
-    </mat-card-content>
-  </mat-card>
+
+      @if (displayJSONData) {
+        <div class="vci-section">
+          <div class="vci-section__title">{{ 'labels.heading.Command' | translate }}</div>
+          <dl class="vci-grid">
+            @for (field of commandFields; track $index) {
+              <ng-container *ngTemplateOutlet="commandField; context: { $implicit: field }"></ng-container>
+            }
+          </dl>
+        </div>
+      }
+    </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

@@ -6,19 +6,321 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+// ── Design tokens ─────────────────────────────────────────────────────────────
+$border: #e2e8f0;
+$bg-page: #f8fafc;
+$text-dark: #1e293b;
+$text-mid: #475569;
+$text-soft: #94a3b8;
+$success: #16a34a;
+$warning: #d97706;
+
 .mat-elevation-z1 {
   margin: 1em 0 1.5em;
 }
 
-h2,
-h3,
-h4 {
+.vci {
+  background: #fff;
+
+  /* Opened as a popup rather than a full page: sized to its own content, capped so a long command
+     payload scrolls inside the dialog instead of pushing it off screen. As a route it stays a
+     normal page-width card. */
+  &--dialog {
+    width: min(680px, 92vw);
+    max-height: 85vh;
+    overflow-y: auto;
+    border-radius: 10px;
+  }
+
+  &:not(&--dialog) {
+    max-width: 900px;
+    margin: 20px auto;
+    border: 1px solid $border;
+    border-radius: 12px;
+    overflow: hidden;
+  }
+}
+
+// ── Header ───────────────────────────────────────────────────────────────────
+.vci-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  border-bottom: 1px solid $border;
+  background: #fff;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  &__title {
+    font-size: 15px;
+    font-weight: 700;
+    color: $text-dark;
+  }
+
+  &__close {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: 12.5px;
+    font-weight: 600;
+    color: $text-soft;
+    cursor: pointer;
+    padding: 6px 12px;
+    border-radius: 6px;
+    transition: all 0.15s;
+
+    &:hover {
+      background: #f1f5f9;
+      color: $text-mid;
+    }
+  }
+}
+
+.vci-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 48px 24px;
+  font-size: 14px;
+  color: $text-soft;
+
+  &__ic {
+    animation: vci-spin 1s linear infinite;
+  }
+}
+
+@keyframes vci-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.vci-body {
+  padding: 16px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+// ── Actions ──────────────────────────────────────────────────────────────────
+.vci-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.vci-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 36px;
+  padding: 0 18px;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1.5px solid transparent;
+  transition: all 0.15s;
+
+  &--approve {
+    background: #f0fdf4;
+    color: $success;
+    border-color: #86efac;
+
+    &:hover {
+      background: $success;
+      color: #fff;
+      border-color: $success;
+    }
+  }
+
+  &--delete {
+    background: #fff7ed;
+    color: #c2410c;
+    border-color: #fdba74;
+
+    &:hover {
+      background: #ea580c;
+      color: #fff;
+      border-color: #ea580c;
+    }
+  }
+
+  &--reject {
+    background: #fff;
+    color: $text-mid;
+    border-color: $border;
+
+    &:hover {
+      background: #f1f5f9;
+      color: $text-dark;
+    }
+  }
+}
+
+.vci-notice {
+  padding: 12px 16px;
+  border-left: 4px solid $warning;
+  background: #fffbeb;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #92400e;
+}
+
+// ── Detail sections ──────────────────────────────────────────────────────────
+.vci-section {
+  border: 1px solid $border;
+  border-radius: 10px;
+  overflow: hidden;
+
+  &__title {
+    padding: 10px 16px;
+    background: $bg-page;
+    border-bottom: 1px solid $border;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: $text-mid;
+  }
+}
+
+/* One label above its value, two pairs per row where there is room. This replaces the global
+   flex-40/flex-60 utilities, which are sized for a full-width page and ran every field together
+   onto a single line inside the dialog. */
+.vci-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px 24px;
   margin: 0;
   font-weight: 500;
 }
 
-span {
-  margin: 0.5em 0;
+.vci-kv {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+
+  dt {
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: $text-soft;
+  }
+
+  dd {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 500;
+    color: $text-dark;
+    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 {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  background: $bg-page;
+  color: $text-mid;
+  border: 1px solid $border;
+
+  &--danger {
+    background: #fff1f2;
+    color: #be123c;
+    border-color: #fda4af;
+  }
 }
 
 .margin-t {

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

@@ -10,7 +10,7 @@
 import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as _ from 'lodash';
-import { MatDialog } from '@angular/material/dialog';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 /** Custom Services */
 import { TasksService } from '../tasks.service';
@@ -19,10 +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 { MatDivider } from '@angular/material/divider';
-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',
@@ -31,8 +83,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     FaIconComponent,
-    MatDivider,
-    KeyValuePipe,
+    NgTemplateOutlet,
     DateFormatPipe
   ]
 })
@@ -43,6 +94,98 @@ export class ViewCheckerInboxComponent {
   private translateService = inject(TranslateService);
   private tasksService = inject(TasksService);
 
+  /** 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. */
+  private dialogRef = inject(MatDialogRef<ViewCheckerInboxComponent>, { optional: true });
+  private dialogData = inject<{ checkerId: number | string; title?: string } | null>(MAT_DIALOG_DATA, {
+    optional: true
+  });
+
+  loading = false;
+
+  get isDialog(): boolean {
+    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 */
@@ -51,21 +194,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);
+    return isTempTableProductEdit(this.checkerInboxDetail?.entityName, this.checkerInboxDetail?.actionName);
   }
 
   /**
@@ -76,11 +214,58 @@ export class ViewCheckerInboxComponent {
    * @param {TasksService} tasksService Tasks Service.
    */
   constructor() {
+    // Route entry: detail is pre-fetched by the resolver and injected via route.data.
     this.route.data.subscribe((data: { checkerInboxDetail: any }) => {
-      this.checkerInboxDetail = data.checkerInboxDetail;
-      this.jsondata = JSON.parse(this.checkerInboxDetail.commandAsJson);
-      this.displayJSONData = !_.isEmpty(this.jsondata);
+      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 {
+    this.checkerInboxDetail = detail;
+    // 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 {
+      this.jsondata = detail?.commandAsJson ? JSON.parse(detail.commandAsJson) : {};
+    } catch {
+      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
+   *  dialog, or returns to the inbox route otherwise. */
+  private finish(): void {
+    if (this.dialogRef) {
+      this.dialogRef.close({ refreshed: true });
+    } else {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    }
+  }
+
+  close(): void {
+    if (this.dialogRef) {
+      this.dialogRef.close();
+    } else {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    }
   }
 
   /**
@@ -96,7 +281,7 @@ export class ViewCheckerInboxComponent {
     approveCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
       if (response.confirm) {
         this.tasksService.executeMakerCheckerAction(this.checkerInboxDetail.id, 'approve').subscribe((res: any) => {
-          this.router.navigate(['../../'], { relativeTo: this.route });
+          this.finish();
         });
       }
     });
@@ -115,26 +300,7 @@ export class ViewCheckerInboxComponent {
     rejectCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
       if (response.confirm) {
         this.tasksService.executeMakerCheckerAction(this.checkerInboxDetail.id, 'reject').subscribe((res: any) => {
-          this.router.navigate(['../../'], { relativeTo: this.route });
-        });
-      }
-    });
-  }
-
-  /**
-   * 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.router.navigate(['../../'], { relativeTo: this.route });
+          this.finish();
         });
       }
     });

src/app/users/create-user/create-user.component.ts

@@ -21,6 +21,7 @@ import { MatDialog } from '@angular/material/dialog';
 /** Custom Services */
 import { UsersService } from '../users.service';
 import { PopoverService } from '../../configuration-wizard/popover/popover.service';
+import { AlertService } from 'app/core/alert/alert.service';
 
 /** Custom Dialog Component */
 import { PasswordsUtility } from 'app/core/utils/passwords-utility';
@@ -56,6 +57,7 @@ export class CreateUserComponent implements OnInit, AfterViewInit {
   private configurationWizardService = inject(ConfigurationWizardService);
   private dialog = inject(MatDialog);
   private passwordsUtility = inject(PasswordsUtility);
+  private alertService = inject(AlertService);
 
   /** User form. */
   userForm: UntypedFormGroup;
@@ -211,6 +213,12 @@ export class CreateUserComponent implements OnInit, AfterViewInit {
       if (this.configurationWizardService.showUsersForm) {
         this.configurationWizardService.showUsersForm = false;
         this.openDialog();
+      } else if (response?.rollbackTransaction) {
+        this.alertService.alert({
+          type: 'Success',
+          message: 'User creation request submitted successfully for approval.'
+        });
+        this.router.navigate(['../'], { relativeTo: this.route });
       } else {
         this.router.navigate(
           [

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,

src/app/users/edit-user/edit-user.component.ts

@@ -19,6 +19,7 @@ import { MatIcon } from '@angular/material/icon';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { SuccessDialogComponent } from 'app/shared/success-dialog/success-dialog.component';
 import { ErrorDialogComponent } from 'app/shared/error-dialog/error-dialog.component';
+import { AlertService } from 'app/core/alert/alert.service';
 
 /**
  * Edit User Component.
@@ -39,6 +40,7 @@ export class EditUserComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
+  private alertService = inject(AlertService);
 
   /** User Data */
   userData: any;
@@ -142,27 +144,35 @@ export class EditUserComponent implements OnInit {
     const editedUser = this.editUserForm.value;
     this.usersService.editUser(this.userData.id, editedUser).subscribe({
       next: (response: any) => {
-        // Fineract sometimes omits resourceId in PUT responses — fall back to
-        // the user id we're editing so navigation never silently no-ops.
-        const targetId = response?.resourceId ?? this.userData.id;
-        const dialogRef = this.dialog.open(SuccessDialogComponent, {
-          data: {
-            title: 'User updated',
-            message: `Changes to ${this.userData.username} have been saved successfully.`,
-            buttonLabel: 'View user'
-          },
-          panelClass: 'sd-panel',
-          disableClose: true
-        });
-        dialogRef.afterClosed().subscribe(() => {
-          this.router.navigate(
-            [
-              '../../',
-              targetId
-            ],
-            { relativeTo: this.route }
-          );
-        });
+        if (response?.rollbackTransaction) {
+          this.alertService.alert({
+            type: 'Success',
+            message: 'User update request submitted successfully for approval.'
+          });
+          this.router.navigate(['../../'], { relativeTo: this.route });
+        } else {
+          // Fineract sometimes omits resourceId in PUT responses — fall back to
+          // the user id we're editing so navigation never silently no-ops.
+          const targetId = response?.resourceId ?? this.userData.id;
+          const dialogRef = this.dialog.open(SuccessDialogComponent, {
+            data: {
+              title: 'User updated',
+              message: `Changes to ${this.userData.username} have been saved successfully.`,
+              buttonLabel: 'View user'
+            },
+            panelClass: 'sd-panel',
+            disableClose: true
+          });
+          dialogRef.afterClosed().subscribe(() => {
+            this.router.navigate(
+              [
+                '../../',
+                targetId
+              ],
+              { relativeTo: this.route }
+            );
+          });
+        }
       },
       error: (err) => {
         console.error('[EditUser] update failed', err);

src/app/users/users.service.ts

@@ -87,4 +87,62 @@ export class UsersService {
     const httpParams = new HttpParams().set('officeId', officeId.toString()).set('status', 'all');
     return this.http.get('/staff', { params: httpParams });
   }
+
+  /**
+   * @param {string} status Status filter (e.g. 'PENDING')
+   * @param {string} username Username filter
+   * @param {string} fromDate From date filter
+   * @param {string} toDate To date filter
+   * @param {number} offset Offset
+   * @param {number} limit Limit
+   * @returns {Observable<any>} Pending users
+   */
+  getPendingUsers(
+    status?: string,
+    username?: string,
+    fromDate?: string,
+    toDate?: string,
+    offset: number = 0,
+    limit: number = 20
+  ): Observable<any> {
+    let httpParams = new HttpParams().set('offset', offset.toString()).set('limit', limit.toString());
+    if (status) {
+      httpParams = httpParams.set('status', status);
+    }
+    if (username) {
+      httpParams = httpParams.set('username', username);
+    }
+    if (fromDate) {
+      httpParams = httpParams.set('fromDate', fromDate);
+    }
+    if (toDate) {
+      httpParams = httpParams.set('toDate', toDate);
+    }
+    return this.http.get('/users/pending', { params: httpParams });
+  }
+
+  /**
+   * @param {string | number} id Pending request ID
+   * @returns {Observable<any>}
+   */
+  getPendingUser(id: string | number): Observable<any> {
+    return this.http.get(`/users/pending/${id}`);
+  }
+
+  /**
+   * @param {string | number} id Pending request ID
+   * @returns {Observable<any>}
+   */
+  approvePendingUser(id: string | number): Observable<any> {
+    return this.http.post(`/users/pending/${id}/approve`, {});
+  }
+
+  /**
+   * @param {string | number} id Pending request ID
+   * @param {string} reason Rejection reason
+   * @returns {Observable<any>}
+   */
+  rejectPendingUser(id: string | number, reason: string): Observable<any> {
+    return this.http.post(`/users/pending/${id}/reject`, { reason });
+  }
 }

src/app/users/view-user/view-user.component.ts

@@ -15,6 +15,7 @@ import { MatIconButton } from '@angular/material/button';
 
 /** Custom Services */
 import { UsersService } from '../users.service';
+import { AlertService } from 'app/core/alert/alert.service';
 
 /** Custom Components */
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
@@ -42,6 +43,7 @@ export class ViewUserComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
+  private alertService = inject(AlertService);
 
   /** User Data. */
   userData: any;
@@ -68,7 +70,13 @@ export class ViewUserComponent {
     });
     deleteUserDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {
-        this.usersService.deleteUser(this.userData.id).subscribe(() => {
+        this.usersService.deleteUser(this.userData.id).subscribe((res: any) => {
+          if (res?.rollbackTransaction) {
+            this.alertService.alert({
+              type: 'Success',
+              message: 'User deletion request submitted successfully for approval.'
+            });
+          }
           this.router.navigate(['/appusers']);
         });
       }

src/app/web-app.component.ts

@@ -37,11 +37,12 @@ import { ErrorDialogComponent } from './shared/error-dialog/error-dialog.compone
 
 /** Custom Items */
 import { Alert } from './core/alert/alert.model';
-import { KeyboardShortcutsConfiguration } from './keyboards-shortcut-config';
 import { Dates } from './core/utils/dates';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { I18nService } from './core/i18n/i18n.service';
 import { ThemingService } from './shared/theme-toggle/theming.service';
+import { KeyboardShortcutService } from './core/services/keyboard-shortcut.service';
+import { ShortcutSuggestionService } from './core/services/shortcut-suggestion.service';
 
 /** Initialize Logger */
 const log = new Logger('MifosX');
@@ -97,8 +98,6 @@ registerLocaleData(localeSW);
   standalone: false
 })
 export class WebAppComponent implements OnInit, OnDestroy {
-  buttonConfig: KeyboardShortcutsConfiguration;
-
   i18nService: I18nService;
 
   private authSubscription: Subscription;
@@ -132,7 +131,9 @@ export class WebAppComponent implements OnInit, OnDestroy {
     private dateUtils: Dates,
     private idle: IdleTimeoutService,
     private dialog: MatDialog,
-    private documentationLinks: DocumentationLinksService
+    private documentationLinks: DocumentationLinksService,
+    private keyboardShortcutService: KeyboardShortcutService,
+    private shortcutSuggestionService: ShortcutSuggestionService
   ) {}
 
   @HostBinding('class') public cssClass: string;
@@ -246,7 +247,6 @@ export class WebAppComponent implements OnInit, OnDestroy {
         verticalPosition: 'top'
       });
     });
-    this.buttonConfig = new KeyboardShortcutsConfiguration();
 
     // initialize language and date format if they are null.
     if (!localStorage.getItem('mifosXLanguage')) {
@@ -269,6 +269,8 @@ export class WebAppComponent implements OnInit, OnDestroy {
       this.authSubscription = this.authenticationService.isAuthenticated$.subscribe((loggedIn) => {
         if (loggedIn) {
           this.idle.start();
+          this.keyboardShortcutService.initShortcuts();
+          this.shortcutSuggestionService.init();
         } else {
           this.idle.stop();
         }
@@ -311,46 +313,4 @@ export class WebAppComponent implements OnInit, OnDestroy {
   help() {
     this.documentationLinks.open('userManual');
   }
-
-  // Monitor all keyboard events and excute keyboard shortcuts
-  @HostListener('window:keydown', ['$event'])
-  onKeydownHandler(event: KeyboardEvent) {
-    const routeD = this.buttonConfig.buttonCombinations.find(
-      (x) =>
-        x.ctrlKey === event.ctrlKey && x.shiftKey === event.shiftKey && x.altKey === event.altKey && x.key === event.key
-    );
-    if (!(routeD === undefined)) {
-      switch (routeD.id) {
-        case 'logout':
-          this.logout();
-          break;
-        case 'help':
-          this.help();
-          break;
-        case 'runReport':
-          document.getElementById('runReport').click();
-          break;
-        case 'cancel':
-          const cancelButtons = document.querySelectorAll('button');
-          const filteredcancelButtons = Array.prototype.filter.call(cancelButtons, function (el: any) {
-            return el.textContent.trim() === 'Cancel';
-          });
-          if (filteredcancelButtons.length > 0) {
-            filteredcancelButtons[0].click();
-          }
-          break;
-        case 'submit':
-          const submitButton = document.querySelectorAll('button');
-          const filteredSubmitButton = Array.prototype.filter.call(submitButton, function (el: any) {
-            return el.textContent.trim() === 'Submit';
-          });
-          if (filteredSubmitButton.length > 0) {
-            filteredSubmitButton[0].click();
-          }
-          break;
-        default:
-          this.router.navigate([routeD.route], { relativeTo: this.activatedRoute });
-      }
-    }
-  }
 }

src/assets/styles/_product-list.scss

@@ -357,6 +357,8 @@
 
       &.num {
         text-align: right;
+        white-space: nowrap;
+        width: 1%;
       }
     }
 
@@ -369,6 +371,8 @@
 
       &.num {
         text-align: right;
+        white-space: nowrap;
+        width: 1%;
       }
     }
   }
@@ -496,8 +500,10 @@
   .pl-action-btn {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 5px;
     height: 30px;
+    min-width: 80px;
     padding: 0 12px;
     border-radius: 8px;
     border: 1px solid;

src/environments/.env.ts

@@ -9,8 +9,8 @@
 /* tslint:disable */
 export default {
   'mifos_x': {
-    'version': '260813',
-    'hash': '5a6fb1f9'
+    'version': '260825',
+    'hash': '1b2ef512'
   },
   'allow_switching_backend_instance': true
 };

tsconfig.json

@@ -8,6 +8,9 @@
       ],
       "app/*": [
         "src/app/*"
+      ],
+      "environments/*": [
+        "src/environments/*"
       ]
     },
     "importHelpers": true,