feat(cfcfrms): I4C Live screens for the I4C-MHA integration

New CFCFRMS > I4C Live section backed by /v1/i4c/admin and /v1/i4c/cases
(the demo mock interceptor does not match these paths):

- Dashboard, complaints from I4C, holds register, approvals, responses and
  API log, bank code master, intimation settings.
- Hold popup: overview, hold transactions, customer intimation (automatic and
  manual), maker request (full / partial release, freeze, unfreeze), GRM / MRM
  and documents, request history.
- GRM grievances, MRM restorations and MRM balance report pages; shared date
  range filter (today, yesterday, week, month, custom), server-side paging and
  filters on every list; document upload / download.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

@@ -19,6 +19,18 @@ import { ReportMuleComponent } from './report-mule/report-mule.component';
 import { ReportFraudTxnComponent } from './report-fraud-txn/report-fraud-txn.component';
 import { FmrSubmissionComponent } from './fmr-submission/fmr-submission.component';
 import { CfrLookupComponent } from './cfr-lookup/cfr-lookup.component';
+import { I4cShellComponent } from './i4c/i4c-shell/i4c-shell.component';
+import { I4cDashboardComponent } from './i4c/i4c-dashboard/i4c-dashboard.component';
+import { I4cRequestsComponent } from './i4c/i4c-requests/i4c-requests.component';
+import { I4cRequestDetailComponent } from './i4c/i4c-request-detail/i4c-request-detail.component';
+import { I4cHoldsComponent } from './i4c/i4c-holds/i4c-holds.component';
+import { I4cApprovalsComponent } from './i4c/i4c-approvals/i4c-approvals.component';
+import { I4cOutboxComponent } from './i4c/i4c-outbox/i4c-outbox.component';
+import { I4cBankMasterComponent } from './i4c/i4c-bank-master/i4c-bank-master.component';
+import { I4cIntimationSettingsComponent } from './i4c/i4c-intimation-settings/i4c-intimation-settings.component';
+import { I4cGrievancesComponent } from './i4c/i4c-grievances/i4c-grievances.component';
+import { I4cRestorationsComponent } from './i4c/i4c-restorations/i4c-restorations.component';
+import { I4cMrmReportComponent } from './i4c/i4c-mrm-report/i4c-mrm-report.component';
 
 const routes: Routes = [
   Route.withShell([
@@ -76,6 +88,67 @@ const routes: Routes = [
           path: 'cfr-lookup',
           component: CfrLookupComponent,
           data: { title: 'CFR Lookup', breadcrumb: 'CFR Lookup' }
+        },
+        {
+          // Live I4C-MHA integration (NCRP-CFCFRMS API). Served by /v1/i4c/admin on the CBS; the demo mock
+          // interceptor does not match these paths.
+          path: 'i4c',
+          component: I4cShellComponent,
+          data: { title: 'I4C Live Integration', breadcrumb: 'I4C Live' },
+          children: [
+            { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+            {
+              path: 'dashboard',
+              component: I4cDashboardComponent,
+              data: { title: 'I4C Dashboard', breadcrumb: 'Dashboard' }
+            },
+            {
+              path: 'requests',
+              component: I4cRequestsComponent,
+              data: { title: 'Complaints from I4C', breadcrumb: 'Complaints' }
+            },
+            {
+              path: 'requests/:id',
+              component: I4cRequestDetailComponent,
+              data: { title: 'I4C Complaint', breadcrumb: 'Complaint' }
+            },
+            { path: 'holds', component: I4cHoldsComponent, data: { title: 'I4C Holds Register', breadcrumb: 'Holds' } },
+            {
+              path: 'approvals',
+              component: I4cApprovalsComponent,
+              data: { title: 'I4C Approvals', breadcrumb: 'Approvals' }
+            },
+            {
+              path: 'outbox',
+              component: I4cOutboxComponent,
+              data: { title: 'I4C Responses', breadcrumb: 'Responses' }
+            },
+            {
+              path: 'bank-master',
+              component: I4cBankMasterComponent,
+              data: { title: 'I4C Bank Code Master', breadcrumb: 'Bank Master' }
+            },
+            {
+              path: 'grievances',
+              component: I4cGrievancesComponent,
+              data: { title: 'I4C GRM Grievances', breadcrumb: 'GRM Grievances' }
+            },
+            {
+              path: 'restorations',
+              component: I4cRestorationsComponent,
+              data: { title: 'I4C MRM Restorations', breadcrumb: 'MRM Restorations' }
+            },
+            {
+              path: 'mrm-report',
+              component: I4cMrmReportComponent,
+              data: { title: 'I4C MRM Balance Report', breadcrumb: 'MRM Balance Report' }
+            },
+            {
+              path: 'intimation-settings',
+              component: I4cIntimationSettingsComponent,
+              data: { title: 'I4C Intimation Settings', breadcrumb: 'Intimation Settings' }
+            }
+          ]
         }
       ]
     }

src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.html

@@ -34,6 +34,17 @@
       <fa-icon icon="chart-line" class="cfc-tab__ic"></fa-icon>
       <span>Dashboard</span>
     </a>
+    <a
+      mat-tab-link
+      class="cfc-tab"
+      [routerLink]="['./i4c']"
+      routerLinkActive
+      #i4cLive="routerLinkActive"
+      [active]="i4cLive.isActive"
+    >
+      <fa-icon icon="satellite-dish" class="cfc-tab__ic"></fa-icon>
+      <span>I4C Live</span>
+    </a>
     <a
       mat-tab-link
       class="cfc-tab"

src/app/cfcfrms/i4c/_i4c-cases.scss

@@ -0,0 +1,144 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+// Shared by the GRM grievance, MRM restoration and MRM report pages.
+@mixin i4c-case-page {
+  .modal-title-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .count-tag {
+    font-size: 11px;
+    font-weight: 700;
+    color: #64748b;
+    background: #f1f5f9;
+    padding: 2px 7px;
+    border-radius: 9999px;
+    border: 1px solid #e2e8f0;
+  }
+
+  .search-input {
+    width: 260px;
+  }
+
+  .footer-btn-close {
+    padding: 6px 14px;
+    border-radius: 8px;
+    background: #e2e8f0;
+    color: #334155;
+    border: none;
+    font-size: 11.5px;
+    font-weight: 600;
+    cursor: pointer;
+
+    &:hover {
+      background: #cbd5e1;
+      color: #0f172a;
+    }
+  }
+
+  .sub {
+    font-size: 11px;
+    color: #64748b;
+  }
+
+  .num {
+    text-align: right;
+  }
+
+  .wrap {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .step {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    &__title {
+      font-weight: 600;
+      font-size: 13px;
+      color: #0f172a;
+    }
+
+    &__row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      align-items: center;
+
+      mat-form-field {
+        width: 220px;
+      }
+    }
+
+    &__wide {
+      flex: 1 1 100%;
+    }
+
+    & + & {
+      margin-top: 14px;
+      padding-top: 14px;
+      border-top: 1px dashed #e2e8f0;
+    }
+  }
+
+  .flow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+    font-size: 11px;
+
+    &__stage {
+      padding: 3px 9px;
+      border-radius: 999px;
+      background: #f1f5f9;
+      color: #64748b;
+      font-weight: 600;
+
+      &--done {
+        background: #ecfdf5;
+        color: #047857;
+      }
+
+      &--now {
+        background: #2563eb;
+        color: #fff;
+      }
+    }
+
+    &__arrow {
+      color: #cbd5e1;
+    }
+  }
+
+  .deadline {
+    font-weight: 600;
+
+    &--late {
+      color: #dc2626;
+    }
+  }
+
+  .grid-2 {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+  }
+
+  @media (width <= 900px) {
+    .grid-2 {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}

src/app/cfcfrms/i4c/_i4c.scss

@@ -0,0 +1,789 @@
+/**
+ * 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/.
+ */
+
+/* Modern design system for the I4C (NCRP-CFCFRMS) subsystem:
+   Glassmorphism, sleek modern cards, rich data tables, glowing status pills,
+   and animated popup window modals. */
+
+@mixin i4c-skin {
+  .i4c-page {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    animation: i4c-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  /* Modern Toolbar */
+  .i4c-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgb(15 23 42 / 3%);
+
+    &__hint {
+      color: #64748b;
+      font-size: 11.5px;
+      font-weight: 500;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    &__spacer {
+      flex: 1 1 auto;
+    }
+
+    mat-form-field {
+      min-width: 180px;
+    }
+  }
+
+  /* Extra filters and the date range, under the toolbar */
+  .i4c-filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px 14px;
+    padding: 10px 14px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+
+    mat-form-field {
+      width: 170px;
+    }
+
+    &__clear {
+      margin-left: auto;
+    }
+
+    // Inside a card, under its head
+    &--inset {
+      border: 0;
+      border-bottom: 1px solid #f1f5f9;
+      border-radius: 0;
+    }
+  }
+
+  /* Paginator at the foot of a list card */
+  .i4c-paginator {
+    border-top: 1px solid #f1f5f9;
+    background: transparent;
+  }
+
+  /* Filter Chip bar */
+  .i4c-filter-chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+
+    .filter-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 4px 10px;
+      border-radius: 9999px;
+      font-size: 11px;
+      font-weight: 600;
+      color: #475569;
+      background: #f1f5f9;
+      border: 1px solid #e2e8f0;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      text-decoration: none;
+
+      &:hover {
+        background: #e2e8f0;
+        color: #0f172a;
+        transform: translateY(-1px);
+      }
+
+      &--active {
+        background: #2563eb;
+        color: #fff;
+        border-color: #2563eb;
+        box-shadow: 0 3px 8px rgb(37 99 235 / 25%);
+
+        &:hover {
+          background: #1d4ed8;
+          color: #fff;
+        }
+
+        .filter-chip-count {
+          background: rgb(255 255 255 / 25%);
+          color: #fff;
+        }
+      }
+
+      .filter-chip-count {
+        display: inline-block;
+        padding: 1px 5px;
+        border-radius: 9999px;
+        background: #e2e8f0;
+        font-size: 10px;
+        font-weight: 700;
+      }
+    }
+  }
+
+  /* Modern KPI Cards */
+  .i4c-kpis {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 12px;
+  }
+
+  .i4c-kpi {
+    position: relative;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 12px 14px;
+    box-shadow: 0 4px 10px rgb(15 23 42 / 3%);
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    overflow: hidden;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, #3b82f6, #60a5fa);
+      border-radius: 12px 12px 0 0;
+    }
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 18px -4px rgb(15 23 42 / 8%);
+      border-color: #cbd5e1;
+    }
+
+    &__value {
+      font-size: 18px;
+      font-weight: 800;
+      color: #0f172a;
+      letter-spacing: -0.02em;
+      font-variant-numeric: tabular-nums;
+    }
+
+    &__label {
+      font-size: 11.5px;
+      font-weight: 600;
+      color: #475569;
+    }
+
+    &__sub {
+      font-size: 10px;
+      color: #94a3b8;
+    }
+
+    &--green::before {
+      background: linear-gradient(90deg, #10b981, #34d399);
+    }
+
+    &--amber::before {
+      background: linear-gradient(90deg, #f59e0b, #fbbf24);
+    }
+
+    &--red::before {
+      background: linear-gradient(90deg, #ef4444, #f87171);
+    }
+
+    &--purple::before {
+      background: linear-gradient(90deg, #8b5cf6, #a78bfa);
+    }
+  }
+
+  /* Modern Card Container */
+  .i4c-card {
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    box-shadow: 0 4px 14px rgb(15 23 42 / 3%);
+    overflow: hidden;
+    transition: box-shadow 0.2s ease;
+
+    &:hover {
+      box-shadow: 0 6px 18px rgb(15 23 42 / 5%);
+    }
+
+    &__head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      background: linear-gradient(180deg, #fafbfd 0%, #f4f6fa 100%);
+      border-bottom: 1px solid #e2e8f0;
+      font-size: 13px;
+      font-weight: 700;
+      color: #1e293b;
+      letter-spacing: -0.01em;
+
+      fa-icon {
+        color: #2563eb;
+      }
+    }
+
+    &__body {
+      padding: 14px 16px;
+    }
+  }
+
+  .i4c-grid-2 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 14px;
+  }
+
+  .i4c-table-wrap {
+    overflow-x: auto;
+  }
+
+  /* Modern Data Table */
+  table.i4c-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 11.5px;
+
+    th {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      text-align: left;
+      font-weight: 600;
+      color: #475569;
+      background: #f8fafc;
+      padding: 8px 10px;
+      border-bottom: 1px solid #e2e8f0;
+      white-space: nowrap;
+      font-size: 10.5px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    td {
+      padding: 8px 10px;
+      border-bottom: 1px solid #f1f5f9;
+      color: #1e293b;
+      vertical-align: middle;
+      transition: background-color 0.15s ease;
+    }
+
+    tr:last-child td {
+      border-bottom: none;
+    }
+
+    tr.clickable {
+      cursor: pointer;
+
+      &:hover td {
+        background: #f8fafc;
+      }
+    }
+
+    tr.selected td {
+      background: #eff6ff;
+      border-bottom-color: #dbeafe;
+    }
+
+    .num {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+  }
+
+  /* Glowing Modern Status Pills */
+  .i4c-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 2px 8px;
+    border-radius: 9999px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    background: #e2e8f0;
+    color: #334155;
+    white-space: nowrap;
+    border: 1px solid transparent;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: currentcolor;
+    }
+
+    &--green {
+      background: #ecfdf5;
+      color: #059669;
+      border-color: #a7f3d0;
+
+      &::before {
+        box-shadow: 0 0 6px #10b981;
+      }
+    }
+
+    &--amber {
+      background: #fffbeb;
+      color: #d97706;
+      border-color: #fde68a;
+
+      &::before {
+        box-shadow: 0 0 6px #f59e0b;
+      }
+    }
+
+    &--red {
+      background: #fef2f2;
+      color: #dc2626;
+      border-color: #fecaca;
+
+      &::before {
+        box-shadow: 0 0 6px #ef4444;
+      }
+    }
+
+    &--blue {
+      background: #eff6ff;
+      color: #2563eb;
+      border-color: #bfdbfe;
+
+      &::before {
+        box-shadow: 0 0 6px #3b82f6;
+      }
+    }
+
+    &--purple {
+      background: #f5f3ff;
+      color: #7c3aed;
+      border-color: #ddd6fe;
+
+      &::before {
+        box-shadow: 0 0 6px #8b5cf6;
+      }
+    }
+  }
+
+  /* Key-Value details layout */
+  .i4c-kv {
+    display: grid;
+    grid-template-columns: 160px 1fr;
+    gap: 8px 12px;
+    font-size: 11.5px;
+    margin: 0;
+
+    dt {
+      color: #64748b;
+      font-weight: 500;
+    }
+
+    dd {
+      margin: 0;
+      color: #0f172a;
+      font-weight: 600;
+      word-break: break-word;
+    }
+  }
+
+  .i4c-empty {
+    padding: 30px 20px;
+    text-align: center;
+    color: #64748b;
+    font-size: 12px;
+
+    .empty-icon {
+      font-size: 26px;
+      color: #cbd5e1;
+      margin-bottom: 6px;
+    }
+  }
+
+  .i4c-error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    border-radius: 10px;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    color: #991b1b;
+    font-size: 11.5px;
+    font-weight: 500;
+  }
+
+  .i4c-note {
+    padding: 10px 14px;
+    border-radius: 8px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    color: #475569;
+    font-size: 11.5px;
+    line-height: 1.5;
+  }
+
+  /* Sleek Dark JSON / Code Viewer */
+  pre.i4c-json {
+    margin: 0;
+    padding: 10px 14px 20px;
+    max-height: 380px;
+    overflow: auto;
+    background: #0f172a;
+    color: #38bdf8;
+    border: 1px solid #1e293b;
+    border-radius: 10px;
+    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
+    font-size: 10.5px;
+    line-height: 1.5;
+    box-shadow: inset 0 2px 4px rgb(0 0 0 / 40%);
+    box-sizing: border-box;
+    white-space: pre-wrap;
+    word-break: break-all;
+
+    &::-webkit-scrollbar {
+      width: 7px;
+      height: 7px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #1e293b;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #475569;
+      border-radius: 4px;
+
+      &:hover {
+        background: #64748b;
+      }
+    }
+  }
+
+  .i4c-form {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 8px 14px;
+  }
+
+  .i4c-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+
+  /* Quick action button inside tables */
+  .table-action-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 8px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: #2563eb;
+    background: #eff6ff;
+    border: 1px solid #bfdbfe;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: #2563eb;
+      color: #fff;
+      transform: translateY(-1px);
+    }
+  }
+
+  /* Copy Button */
+  .copy-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 6px;
+    background: #f1f5f9;
+    color: #475569;
+    font-size: 11px;
+    cursor: pointer;
+    border: 1px solid #e2e8f0;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: #e2e8f0;
+      color: #0f172a;
+    }
+  }
+
+  /* Expandable JSON Row inside tables */
+  .finding-json-cell {
+    padding: 12px 16px !important;
+    background: #0b1329 !important;
+    border-bottom: 2px solid #1e293b !important;
+  }
+
+  .finding-json-box {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .finding-json-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 11px;
+      font-weight: 600;
+      color: #94a3b8;
+      padding-bottom: 6px;
+      border-bottom: 1px solid #1e293b;
+
+      fa-icon {
+        color: #60a5fa;
+      }
+    }
+
+    pre.i4c-json {
+      max-height: none;
+      overflow: auto visible;
+      border: none;
+      background: transparent;
+      padding: 6px 0 16px;
+      box-shadow: none;
+      white-space: pre-wrap;
+      word-break: break-all;
+      font-size: 11px;
+      line-height: 1.6;
+      color: #38bdf8;
+    }
+  }
+
+  /* ========================================================
+     MODERN POPUP WINDOW MODAL SYSTEM (Ultra Modern Backdrop & Window)
+     ======================================================== */
+  .i4c-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgb(15 23 42 / 65%);
+    backdrop-filter: blur(6px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    padding: 16px;
+    animation: i4c-fade-in 0.2s ease-out;
+  }
+
+  .i4c-modal-window {
+    background: #fff;
+    border-radius: 14px;
+    border: 1px solid rgb(255 255 255 / 20%);
+    box-shadow: 0 20px 50px -15px rgb(15 23 42 / 35%);
+    width: 100%;
+    max-width: 660px;
+    max-height: 86vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: i4c-modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+    &--wide {
+      max-width: 860px;
+    }
+
+    &--full {
+      max-width: 90vw;
+      max-height: 88vh;
+    }
+
+    &--compact {
+      max-width: 440px;
+    }
+  }
+
+  .i4c-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 11px 16px;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+    color: #fff;
+    border-bottom: 1px solid rgb(255 255 255 / 10%);
+    flex-shrink: 0;
+
+    &__title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+      font-weight: 700;
+      letter-spacing: -0.01em;
+
+      fa-icon {
+        color: #60a5fa;
+      }
+    }
+
+    &__sub {
+      font-size: 11px;
+      color: #94a3b8;
+      font-weight: normal;
+      margin-top: 2px;
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .modal-close-btn {
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+      background: rgb(255 255 255 / 10%);
+      color: #fff;
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 11px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: rgb(239 68 68 / 80%);
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  .i4c-modal-tabs {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 16px;
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+    overflow-x: auto;
+    flex-shrink: 0;
+
+    .modal-tab {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 4px 10px;
+      border-radius: 6px;
+      font-size: 11px;
+      font-weight: 600;
+      color: #64748b;
+      background: transparent;
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      white-space: nowrap;
+
+      &:hover {
+        color: #0f172a;
+        background: #e2e8f0;
+      }
+
+      &--active {
+        color: #2563eb;
+        background: #fff;
+        border-color: #e2e8f0;
+        box-shadow: 0 1px 3px rgb(15 23 42 / 5%);
+      }
+    }
+  }
+
+  .i4c-modal-body {
+    padding: 14px 16px;
+    overflow: hidden auto;
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overscroll-behavior: contain;
+
+    /* Content keeps its natural height and the body scrolls; a flex child would otherwise shrink to fit and
+       clip what is inside it (a card has overflow: hidden). */
+    > div {
+      flex-shrink: 0;
+    }
+
+    &::-webkit-scrollbar {
+      width: 7px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f1f5f9;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 4px;
+
+      &:hover {
+        background: #94a3b8;
+      }
+    }
+  }
+
+  .i4c-modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 10px 16px;
+    background: #f8fafc;
+    border-top: 1px solid #e2e8f0;
+    flex-shrink: 0;
+  }
+}
+
+/* Animations */
+@keyframes i4c-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes i4c-modal-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.92) translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}

src/app/cfcfrms/i4c/i4c-approvals/i4c-approvals.component.html

@@ -0,0 +1,343 @@
+<!--
+  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="i4c-page">
+  <!-- Modern Toolbar & Filter Chips -->
+  <div class="i4c-toolbar">
+    <div class="i4c-filter-chips">
+      @for (s of statuses; track s) {
+        <button class="filter-chip" [class.filter-chip--active]="status === s" (click)="setStatus(s)">
+          <span>{{ s || 'All Requests' }}</span>
+        </button>
+      }
+    </div>
+
+    <span class="i4c-toolbar__spacer"></span>
+
+    <div class="maker-checker-pill">
+      <fa-icon icon="shield-alt"></fa-icon>
+      <span>Maker-Checker Enforced: you cannot approve a request you raised.</span>
+    </div>
+
+    <button mat-flat-button color="primary" class="refresh-btn" (click)="load()" [disabled]="loading">
+      <fa-icon icon="sync" [animation]="loading ? 'spin' : undefined"></fa-icon> Refresh
+    </button>
+  </div>
+
+  <div class="i4c-filter-bar">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="search-field">
+      <mat-label>Account / ack / order no. / officer</mat-label>
+      <input
+        matInput
+        [(ngModel)]="search"
+        (keyup.enter)="load(true)"
+        (blur)="load(true)"
+        placeholder="Type & hit enter..."
+      />
+    </mat-form-field>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Action</mat-label>
+      <mat-select [(ngModel)]="action" (selectionChange)="load(true)">
+        <mat-option value="">All actions</mat-option>
+        <mat-option value="RELEASE">Release hold</mat-option>
+        <mat-option value="FREEZE">Freeze debits</mat-option>
+        <mat-option value="UNFREEZE">Unfreeze debits</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Reason</mat-label>
+      <mat-select [(ngModel)]="reasonType" (selectionChange)="load(true)">
+        <mat-option value="">All reasons</mat-option>
+        @for (r of reasonTypes; track r.value) {
+          <mat-option [value]="r.value">{{ r.label }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mifosx-i4c-date-range label="Raised on" [range]="dates" (rangeChange)="onDates($event)"></mifosx-i4c-date-range>
+    <button mat-stroked-button class="i4c-filter-bar__clear" (click)="clearFilters()" [disabled]="!hasFilters">
+      <fa-icon icon="times"></fa-icon> Clear filters
+    </button>
+  </div>
+
+  @if (loading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">
+      <fa-icon icon="exclamation-circle"></fa-icon>
+      <span>{{ error }}</span>
+    </div>
+  }
+
+  <!-- Approvals Table Card -->
+  <div class="i4c-card">
+    <div class="i4c-card__head">
+      <fa-icon icon="user-check"></fa-icon>
+      <span>Checker Approval Queue (I4C Account Holds)</span>
+      <span class="head-hint">{{ total }} requests in current queue</span>
+    </div>
+
+    <div class="i4c-table-wrap">
+      <table class="i4c-table">
+        <thead>
+          <tr>
+            <th>Raised On</th>
+            <th>Requested Action</th>
+            <th>Target Account / Complaint</th>
+            <th class="num">Held Amount (₹)</th>
+            <th>Reason &amp; Legal Order</th>
+            <th>Maker Remarks</th>
+            <th>Status</th>
+            <th>Decision Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (r of rows; track r.id) {
+            <tr>
+              <td>
+                <span class="date-main">{{ r.maker_at | date: 'dd MMM yyyy, HH:mm' }}</span>
+                <div class="sub">
+                  Raised by: <b>{{ r.maker_name }}</b>
+                </div>
+              </td>
+              <td>
+                <span
+                  class="i4c-badge"
+                  [class.i4c-badge--red]="r.action !== 'RELEASE'"
+                  [class.i4c-badge--blue]="r.action === 'RELEASE'"
+                >
+                  {{ r.action }}
+                </span>
+              </td>
+              <td>
+                <a [routerLink]="['../holds']" [queryParams]="{ view: '' }" class="acc-link font-semibold">
+                  {{ r.account_no }}
+                </a>
+                <div class="sub">{{ r.account_type }} • Ack: {{ r.acknowledgement_no }}</div>
+              </td>
+              <td class="num">
+                <span class="font-bold text-accent">₹{{ r.amount_held | number: '1.2-2' }}</span>
+                <div class="sub">Disputed: ₹{{ r.disputed_amount | number: '1.2-2' }}</div>
+              </td>
+              <td>
+                <div class="reason-title">{{ reasonLabel(r.reason_type) }}</div>
+                <div class="sub">
+                  Ref: {{ r.order_reference }} {{ r.order_date ? '(' + r.order_date + ')' : '' }}
+                  {{ r.authority ? '• ' + r.authority : '' }}
+                </div>
+              </td>
+              <td>
+                <div class="remarks-text">{{ r.remarks || '-' }}</div>
+              </td>
+              <td>
+                <span
+                  class="i4c-badge"
+                  [class.i4c-badge--green]="r.status === 'APPROVED'"
+                  [class.i4c-badge--red]="r.status === 'REJECTED' || r.status === 'FAILED'"
+                  [class.i4c-badge--amber]="r.status === 'PENDING'"
+                >
+                  {{ r.status }}
+                </span>
+                @if (r.checker_name) {
+                  <div class="sub">Checked by {{ r.checker_name }}, {{ r.checker_at | date: 'dd MMM, HH:mm' }}</div>
+                }
+                @if (r.rejection_reason || r.failure_message) {
+                  <div class="sub err-text">{{ r.rejection_reason || r.failure_message }}</div>
+                }
+              </td>
+              <td class="actions-cell">
+                @if (r.status === 'PENDING') {
+                  <div class="i4c-actions">
+                    <button class="approve-btn" (click)="startApprove(r)" [disabled]="busyId === r.id">
+                      <fa-icon icon="check"></fa-icon> Approve
+                    </button>
+                    <button class="reject-btn" (click)="startReject(r)" [disabled]="busyId === r.id">
+                      <fa-icon icon="times"></fa-icon> Reject
+                    </button>
+                  </div>
+                } @else {
+                  <span class="text-muted">Decision Recorded</span>
+                }
+              </td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="8" class="i4c-empty">
+                <div class="empty-icon"><fa-icon icon="user-check"></fa-icon></div>
+                <div>No approval requests in this category.</div>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+    <mat-paginator
+      class="i4c-paginator"
+      [length]="total"
+      [pageIndex]="pageIndex"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="pageSizes"
+      (page)="onPage($event)"
+      showFirstLastButtons
+      aria-label="Approval requests pages"
+    ></mat-paginator>
+  </div>
+
+  <!-- ========================================================
+       MODERN POPUP WINDOW: APPROVE CONFIRMATION MODAL
+       ======================================================== -->
+  @if (approvingRow) {
+    <div class="i4c-modal-backdrop" (click)="closeApprove()">
+      <div class="i4c-modal-window i4c-modal-window--compact" (click)="$event.stopPropagation()">
+        <div class="i4c-modal-header approve-header">
+          <div class="i4c-modal-header__title">
+            <fa-icon icon="check-circle" class="text-green"></fa-icon>
+            <div>
+              <span>Confirm Checker Approval</span>
+              <div class="i4c-modal-header__sub">Executing live CBS account action</div>
+            </div>
+          </div>
+          <button class="modal-close-btn" (click)="closeApprove()" aria-label="Close">
+            <fa-icon icon="times"></fa-icon>
+          </button>
+        </div>
+
+        <div class="i4c-modal-body">
+          <div class="approve-card">
+            <div class="approve-action-badge">
+              <span
+                >ACTION: <b>{{ approvingRow.action }}</b></span
+              >
+            </div>
+
+            <dl class="i4c-kv">
+              <dt>Account Number</dt>
+              <dd>
+                <b>{{ approvingRow.account_no }}</b>
+              </dd>
+
+              <dt>Held Amount</dt>
+              <dd>
+                <b class="text-accent">₹{{ approvingRow.amount_held | number: '1.2-2' }}</b>
+              </dd>
+
+              <dt>Reason</dt>
+              <dd>{{ reasonLabel(approvingRow.reason_type) }}</dd>
+
+              <dt>Order Reference</dt>
+              <dd>
+                {{ approvingRow.order_reference }}
+                {{ approvingRow.authority ? '(' + approvingRow.authority + ')' : '' }}
+              </dd>
+
+              <dt>Maker Details</dt>
+              <dd>{{ approvingRow.maker_name }} on {{ approvingRow.maker_at | date: 'dd MMM yyyy, HH:mm' }}</dd>
+            </dl>
+          </div>
+
+          <div class="i4c-note warn-note">
+            <fa-icon icon="exclamation-triangle"></fa-icon>
+            <span
+              >Warning: Once confirmed, the hold change or freeze will be executed immediately on the core banking
+              system.</span
+            >
+          </div>
+        </div>
+
+        <div class="i4c-modal-footer">
+          <button class="footer-btn-close" (click)="closeApprove()">Cancel</button>
+          <button
+            mat-flat-button
+            color="primary"
+            class="confirm-approve-btn"
+            (click)="confirmApprove()"
+            [disabled]="busyId === approvingRow.id"
+          >
+            <fa-icon
+              [icon]="busyId === approvingRow.id ? 'sync' : 'check'"
+              [animation]="busyId === approvingRow.id ? 'spin' : undefined"
+            ></fa-icon>
+            Confirm &amp; Approve
+          </button>
+        </div>
+      </div>
+    </div>
+  }
+
+  <!-- ========================================================
+       MODERN POPUP WINDOW: REJECT REASON MODAL
+       ======================================================== -->
+  @if (rejectingRow) {
+    <div class="i4c-modal-backdrop" (click)="closeReject()">
+      <div class="i4c-modal-window" (click)="$event.stopPropagation()">
+        <div class="i4c-modal-header reject-header">
+          <div class="i4c-modal-header__title">
+            <fa-icon icon="times-circle" class="text-red"></fa-icon>
+            <div>
+              <span>Reject Request #{{ rejectingRow.id }}</span>
+              <div class="i4c-modal-header__sub">Provide the reason for rejecting this hold action</div>
+            </div>
+          </div>
+          <button class="modal-close-btn" (click)="closeReject()" aria-label="Close">
+            <fa-icon icon="times"></fa-icon>
+          </button>
+        </div>
+
+        <div class="i4c-modal-body">
+          <div class="reject-summary">
+            <span
+              >Rejecting: <b>{{ rejectingRow.action }}</b> on Account <b>{{ rejectingRow.account_no }}</b></span
+            >
+          </div>
+
+          <!-- Preset Reason Chips -->
+          <div class="preset-box">
+            <div class="preset-title">Quick Preset Reasons:</div>
+            <div class="preset-chips">
+              @for (preset of presetReasons; track preset) {
+                <button type="button" class="preset-chip" (click)="applyPreset(preset)">
+                  {{ preset }}
+                </button>
+              }
+            </div>
+          </div>
+
+          <!-- Rejection Reason Input -->
+          <mat-form-field appearance="outline" class="w-full">
+            <mat-label>Rejection Reason (Required)</mat-label>
+            <textarea
+              matInput
+              rows="3"
+              [(ngModel)]="rejectReason"
+              placeholder="Explain why this request is rejected for the maker's audit log..."
+              maxlength="1000"
+            ></textarea>
+            <mat-hint align="end">{{ rejectReason.length }}/1000</mat-hint>
+          </mat-form-field>
+        </div>
+
+        <div class="i4c-modal-footer">
+          <button class="footer-btn-close" (click)="closeReject()">Cancel</button>
+          <button
+            mat-flat-button
+            color="warn"
+            class="confirm-reject-btn"
+            (click)="confirmReject()"
+            [disabled]="busyId === rejectingRow.id || !rejectReason.trim()"
+          >
+            <fa-icon
+              [icon]="busyId === rejectingRow.id ? 'sync' : 'times'"
+              [animation]="busyId === rejectingRow.id ? 'spin' : undefined"
+            ></fa-icon>
+            Confirm Rejection
+          </button>
+        </div>
+      </div>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-approvals/i4c-approvals.component.scss

@@ -0,0 +1,244 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+
+@include i4c-skin;
+
+.maker-checker-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 9999px;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  font-size: 11px;
+  font-weight: 600;
+  color: #475569;
+
+  fa-icon {
+    color: #2563eb;
+  }
+}
+
+.refresh-btn {
+  height: 36px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 11.5px;
+}
+
+.head-hint {
+  margin-left: auto;
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: normal;
+}
+
+.date-main {
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.acc-link {
+  color: #2563eb;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.text-accent {
+  color: #0f172a;
+}
+
+.reason-title {
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.remarks-text {
+  font-size: 12px;
+  color: #475569;
+  max-width: 220px;
+}
+
+.sub {
+  font-size: 11px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.err-text {
+  color: #dc2626;
+  font-size: 11px;
+}
+
+.actions-cell {
+  min-width: 190px;
+}
+
+.approve-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #10b981;
+  color: #fff;
+  border: none;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover:not(:disabled) {
+    background: #059669;
+    box-shadow: 0 4px 10px rgb(16 185 129 / 30%);
+    transform: translateY(-1px);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.reject-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover:not(:disabled) {
+    background: #fee2e2;
+    transform: translateY(-1px);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+/* Approve Modal styles */
+.approve-card {
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.approve-action-badge {
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  color: #1e40af;
+  background: #eff6ff;
+  padding: 4px 10px;
+  border-radius: 6px;
+  align-self: flex-start;
+}
+
+.warn-note {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: #fffbeb;
+  border-color: #fde68a;
+  color: #92400e;
+}
+
+.text-green {
+  color: #10b981;
+}
+
+.text-red {
+  color: #ef4444;
+}
+
+.text-muted {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+/* Preset reasons */
+.preset-box {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.preset-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.preset-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.preset-chip {
+  padding: 3px 8px;
+  border-radius: 9999px;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  font-size: 10.5px;
+  color: #334155;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover {
+    background: #e2e8f0;
+    color: #0f172a;
+    border-color: #cbd5e1;
+  }
+}
+
+.reject-summary {
+  font-size: 11.5px;
+  color: #475569;
+  margin-bottom: 6px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.footer-btn-close {
+  padding: 6px 14px;
+  border-radius: 8px;
+  background: #e2e8f0;
+  color: #334155;
+  border: none;
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #cbd5e1;
+    color: #0f172a;
+  }
+}

src/app/cfcfrms/i4c/i4c-approvals/i4c-approvals.component.ts

@@ -0,0 +1,231 @@
+/**
+ * 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 { DatePipe, DecimalPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { HOLD_REASON_TYPES, I4cService, i4cErrorMessage } from '../i4c.service';
+import { ALL_DATES, I4cDateRange, I4cDateRangeComponent } from '../i4c-date-range/i4c-date-range.component';
+
+/**
+ * Checker's queue: release / freeze / unfreeze requests raised on I4C holds. Approving carries the change out on the
+ * account at once; the server refuses an approval by the officer who raised the request.
+ */
+@Component({
+  selector: 'mifosx-i4c-approvals',
+  templateUrl: './i4c-approvals.component.html',
+  styleUrls: ['./i4c-approvals.component.scss'],
+  imports: [
+    DatePipe,
+    DecimalPipe,
+    FormsModule,
+    RouterLink,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatProgressBarModule,
+    MatPaginatorModule,
+    I4cDateRangeComponent,
+    FaIconComponent
+  ]
+})
+export class I4cApprovalsComponent implements OnInit {
+  private i4c = inject(I4cService);
+  private snackBar = inject(MatSnackBar);
+
+  readonly statuses = [
+    'PENDING',
+    'APPROVED',
+    'REJECTED',
+    'FAILED',
+    ''
+  ];
+  status = 'PENDING';
+  search = '';
+  action = '';
+  reasonType = '';
+  readonly reasonTypes = HOLD_REASON_TYPES;
+  dates: I4cDateRange = { ...ALL_DATES };
+  total = 0;
+  pageIndex = 0;
+  pageSize = 20;
+  readonly pageSizes = [
+    10,
+    20,
+    50,
+    100
+  ];
+  rows: any[] = [];
+  loading = false;
+  busyId: number | null = null;
+  error = '';
+
+  // Modern Approval Popup Modal state
+  approvingRow: any = null;
+
+  // Modern Rejection Popup Modal state
+  rejectingRow: any = null;
+  rejectReason = '';
+
+  readonly presetReasons = [
+    'Insufficient court / IO documentation provided.',
+    'Invalid or unverified reference number.',
+    'Duplicate action request raised.',
+    'Wrong account number specified in order.',
+    'Investigation still in progress; hold must remain.'
+  ];
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  /** Reload the current page; a changed filter passes `fromFirstPage` so the officer lands on page one. */
+  load(fromFirstPage = false): void {
+    if (fromFirstPage) {
+      this.pageIndex = 0;
+    }
+    this.loading = true;
+    this.error = '';
+    this.i4c
+      .holdActions({
+        status: this.status,
+        search: this.search.trim(),
+        action: this.action,
+        reasonType: this.reasonType,
+        fromDate: this.dates.fromDate,
+        toDate: this.dates.toDate,
+        offset: this.pageIndex * this.pageSize,
+        limit: this.pageSize
+      })
+      .subscribe({
+        next: (page) => {
+          this.rows = page.pageItems;
+          this.total = page.totalFilteredRecords;
+          this.loading = false;
+        },
+        error: (e) => {
+          this.error = i4cErrorMessage(e);
+          this.loading = false;
+        }
+      });
+  }
+
+  setStatus(s: string): void {
+    this.status = s;
+    this.load(true);
+  }
+
+  onPage(e: PageEvent): void {
+    this.pageIndex = e.pageIndex;
+    this.pageSize = e.pageSize;
+    this.load();
+  }
+
+  onDates(range: I4cDateRange): void {
+    this.dates = range;
+    this.load(true);
+  }
+
+  get hasFilters(): boolean {
+    return !!(this.search || this.action || this.reasonType || this.dates.preset !== 'ALL');
+  }
+
+  /** Clears the extra filters; the status chip stays as chosen. */
+  clearFilters(): void {
+    this.search = '';
+    this.action = '';
+    this.reasonType = '';
+    this.dates = { ...ALL_DATES };
+    this.load(true);
+  }
+
+  // Open modern approval popup modal
+  startApprove(row: any): void {
+    this.approvingRow = row;
+  }
+
+  closeApprove(): void {
+    this.approvingRow = null;
+  }
+
+  confirmApprove(): void {
+    if (!this.approvingRow) {
+      return;
+    }
+    const row = this.approvingRow;
+    this.busyId = row.id;
+    this.i4c.approveHoldAction(row.id).subscribe({
+      next: () => {
+        this.busyId = null;
+        this.approvingRow = null;
+        this.snackBar.open('Approved! The action has been executed immediately on the CBS account.', 'OK', {
+          duration: 5000
+        });
+        this.load();
+      },
+      error: (e) => {
+        this.busyId = null;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 8000 });
+        this.load();
+      }
+    });
+  }
+
+  // Open modern rejection popup modal
+  startReject(row: any): void {
+    this.rejectingRow = row;
+    this.rejectReason = '';
+  }
+
+  closeReject(): void {
+    this.rejectingRow = null;
+    this.rejectReason = '';
+  }
+
+  applyPreset(preset: string): void {
+    this.rejectReason = preset;
+  }
+
+  confirmReject(): void {
+    if (!this.rejectingRow) {
+      return;
+    }
+    if (!this.rejectReason.trim()) {
+      this.snackBar.open('A reason is required to reject.', 'Close', { duration: 4000 });
+      return;
+    }
+    const row = this.rejectingRow;
+    this.busyId = row.id;
+    this.i4c.rejectHoldAction(row.id, this.rejectReason.trim()).subscribe({
+      next: () => {
+        this.busyId = null;
+        this.rejectingRow = null;
+        this.snackBar.open('Request rejected.', 'OK', { duration: 3000 });
+        this.load();
+      },
+      error: (e) => {
+        this.busyId = null;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+
+  reasonLabel(value: string): string {
+    return HOLD_REASON_TYPES.find((r) => r.value === value)?.label || value;
+  }
+}

src/app/cfcfrms/i4c/i4c-bank-master/i4c-bank-master.component.html

@@ -0,0 +1,258 @@
+<!--
+  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="i4c-page">
+  <!-- Top Filters & Search Toolbar -->
+  <div class="i4c-toolbar">
+    <div class="i4c-filter-chips">
+      @for (t of types; track t.value) {
+        <button class="filter-chip" [class.filter-chip--active]="type === t.value" (click)="setType(t.value)">
+          <span>{{ t.label }}</span>
+          @if (type === t.value) {
+            <span class="filter-chip-count">{{ total }}</span>
+          }
+        </button>
+      }
+    </div>
+
+    <span class="i4c-toolbar__spacer"></span>
+
+    <div class="search-box">
+      <fa-icon icon="search" class="search-icon"></fa-icon>
+      <input
+        type="text"
+        [(ngModel)]="search"
+        placeholder="Filter by name, code or IFSC prefix..."
+        (keyup.enter)="load(true)"
+        class="search-input"
+      />
+      @if (search) {
+        <button class="search-clear-btn" (click)="search = ''; load(true)" aria-label="Clear search">
+          <fa-icon icon="times"></fa-icon>
+        </button>
+      }
+      <button mat-flat-button color="primary" class="search-btn" (click)="load(true)" [disabled]="loading">
+        Search
+      </button>
+    </div>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="ifsc-filter">
+      <mat-label>IFSC prefix</mat-label>
+      <mat-select [(ngModel)]="ifsc" (selectionChange)="load(true)">
+        <mat-option value="">Any</mat-option>
+        <mat-option value="KNOWN">Prefix known</mat-option>
+        <mat-option value="UNKNOWN">Prefix not known</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  @if (loading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">
+      <fa-icon icon="exclamation-circle"></fa-icon>
+      <span>{{ error }}</span>
+    </div>
+  }
+
+  <!-- Main Directory Card -->
+  <div class="i4c-card">
+    <div class="i4c-card-head">
+      <fa-icon icon="university"></fa-icon>
+      <span>I4C Intermediary &amp; Bank Master Directory</span>
+      <span class="head-hint">Official MHA-I4C 2.0 routing table for beneficiary &amp; payee bank mapping</span>
+
+      <span class="i4c-toolbar-spacer"></span>
+      <span class="entries-counter">{{ total }} routing codes</span>
+    </div>
+
+    <div class="i4c-table-wrap">
+      <table class="i4c-table">
+        <thead>
+          <tr>
+            <th class="num">Bank Code</th>
+            <th>Institution / Intermediary Name</th>
+            <th>Entity Type</th>
+            <th>IFSC Prefix Pattern</th>
+            <th>Routing Standard</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (b of rows; track b.bank_code) {
+            <tr class="clickable" (click)="openModal(b)">
+              <td class="num">
+                <span class="code-pill font-mono">#{{ b.bank_code }}</span>
+              </td>
+              <td>
+                <div class="bank-name-cell">
+                  <div class="entity-avatar entity-avatar--{{ b.entity_type?.toLowerCase() }}">
+                    <fa-icon [icon]="getTypeIcon(b.entity_type)"></fa-icon>
+                  </div>
+                  <div class="bank-title-wrap">
+                    <span class="bank-name font-semibold">{{ b.bank_name }}</span>
+                    <span class="bank-code-sub">Reported as payee_bank_code</span>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <span class="entity-type-badge entity-type-badge--{{ b.entity_type?.toLowerCase() }}">
+                  {{ b.entity_type }}
+                </span>
+              </td>
+              <td>
+                @if (b.ifsc_prefix) {
+                  <button
+                    class="copy-chip copy-chip--ifsc"
+                    (click)="copyText(b.ifsc_prefix, 'ifsc-' + b.bank_code, $event)"
+                    title="Click to copy IFSC prefix"
+                  >
+                    <fa-icon [icon]="copiedKey === 'ifsc-' + b.bank_code ? 'check' : 'copy'"></fa-icon>
+                    <span class="font-mono">{{ b.ifsc_prefix }}</span>
+                    @if (copiedKey === 'ifsc-' + b.bank_code) {
+                      <span class="copy-success-text">Copied!</span>
+                    }
+                  </button>
+                } @else {
+                  <span class="text-muted text-xs">Dynamic / Non-IFSC</span>
+                }
+              </td>
+              <td>
+                <span class="standard-tag"> <fa-icon icon="shield-alt"></fa-icon> MHA-I4C 2.0 </span>
+              </td>
+              <td (click)="$event.stopPropagation()">
+                <button class="table-action-btn" (click)="openModal(b)"><fa-icon icon="eye"></fa-icon> Details</button>
+              </td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="6" class="i4c-empty">
+                <div class="empty-icon"><fa-icon icon="university"></fa-icon></div>
+                <div>No banking intermediaries found matching "{{ search }}".</div>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+    <mat-paginator
+      class="i4c-paginator"
+      [length]="total"
+      [pageIndex]="pageIndex"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="pageSizes"
+      (page)="onPage($event)"
+      showFirstLastButtons
+      aria-label="Bank codes pages"
+    ></mat-paginator>
+  </div>
+
+  <!-- ========================================================
+       MODERN POPUP WINDOW: BANK CODE & ROUTING DETAILS MODAL
+       ======================================================== -->
+  @if (selectedBankModal) {
+    <div class="i4c-modal-backdrop" (click)="closeModal()">
+      <div class="i4c-modal-window i4c-modal-window--wide" (click)="$event.stopPropagation()">
+        <!-- Modal Header -->
+        <div class="i4c-modal-header">
+          <div class="i4c-modal-header-title">
+            <div
+              class="entity-avatar entity-avatar--lg entity-avatar--{{ selectedBankModal.entity_type?.toLowerCase() }}"
+            >
+              <fa-icon [icon]="getTypeIcon(selectedBankModal.entity_type)"></fa-icon>
+            </div>
+            <div>
+              <div class="modal-title-row">
+                <span>{{ selectedBankModal.bank_name }}</span>
+                <span class="entity-type-badge entity-type-badge--{{ selectedBankModal.entity_type?.toLowerCase() }}">
+                  {{ selectedBankModal.entity_type }}
+                </span>
+                <span class="code-pill font-mono">Code #{{ selectedBankModal.bank_code }}</span>
+              </div>
+              <div class="modal-header-sub">MHA-I4C Intermediary Specification 2.0 Directory Routing Node</div>
+            </div>
+          </div>
+          <button class="modal-close-btn" (click)="closeModal()" aria-label="Close modal">
+            <fa-icon icon="times"></fa-icon>
+          </button>
+        </div>
+
+        <!-- Modal Body -->
+        <div class="i4c-modal-body">
+          <!-- Information Grid -->
+          <div class="details-grid">
+            <div class="detail-card">
+              <span class="detail-card-label">I4C Root Bank ID</span>
+              <div class="detail-card-val font-mono">
+                <span>{{ selectedBankModal.bank_code }}</span>
+                <button
+                  class="copy-chip copy-chip--sm"
+                  (click)="copyText(selectedBankModal.bank_code, 'bank-code-modal')"
+                >
+                  <fa-icon [icon]="copiedKey === 'bank-code-modal' ? 'check' : 'copy'"></fa-icon>
+                  {{ copiedKey === 'bank-code-modal' ? 'Copied' : 'Copy' }}
+                </button>
+              </div>
+              <span class="detail-card-sub">Used in root_bankid and payee_bank_code fields</span>
+            </div>
+
+            <div class="detail-card">
+              <span class="detail-card-label">IFSC Prefix</span>
+              <div class="detail-card-val font-mono">
+                <span>{{ selectedBankModal.ifsc_prefix || 'Dynamic Routing' }}</span>
+                @if (selectedBankModal.ifsc_prefix) {
+                  <button
+                    class="copy-chip copy-chip--sm"
+                    (click)="copyText(selectedBankModal.ifsc_prefix, 'ifsc-modal')"
+                  >
+                    <fa-icon [icon]="copiedKey === 'ifsc-modal' ? 'check' : 'copy'"></fa-icon>
+                    {{ copiedKey === 'ifsc-modal' ? 'Copied' : 'Copy' }}
+                  </button>
+                }
+              </div>
+              <span class="detail-card-sub">Matches starting characters of Indian Financial System Code</span>
+            </div>
+
+            <div class="detail-card">
+              <span class="detail-card-label">Entity Classification</span>
+              <div class="detail-card-val">
+                <span class="entity-type-badge entity-type-badge--{{ selectedBankModal.entity_type?.toLowerCase() }}">
+                  {{ selectedBankModal.entity_type }}
+                </span>
+              </div>
+              <span class="detail-card-sub">Classification recognized by Indian Cyber Crime Coordination Centre</span>
+            </div>
+
+            <div class="detail-card">
+              <span class="detail-card-label">Supported Layer Depth</span>
+              <div class="detail-card-val font-semibold text-accent">Layer 1 to Layer 10+</div>
+              <span class="detail-card-sub">Valid for multi-layered money trail tracing</span>
+            </div>
+          </div>
+
+          <!-- Section 6 Integration Preview -->
+          <div class="payload-box">
+            <div class="payload-box-title">
+              <span>Section 6 Response Payload Example</span>
+              <button class="copy-chip" (click)="copyText(sampleJson(selectedBankModal), 'json-modal')">
+                <fa-icon [icon]="copiedKey === 'json-modal' ? 'check' : 'copy'"></fa-icon>
+                {{ copiedKey === 'json-modal' ? 'Copied!' : 'Copy Schema Snippet' }}
+              </button>
+            </div>
+            <pre class="i4c-json">{{ sampleJson(selectedBankModal) }}</pre>
+          </div>
+        </div>
+
+        <!-- Modal Footer -->
+        <div class="i4c-modal-footer">
+          <button class="footer-btn-close" (click)="closeModal()">Close</button>
+        </div>
+      </div>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-bank-master/i4c-bank-master.component.scss

@@ -0,0 +1,360 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+
+@include i4c-skin;
+
+.search-box {
+  display: inline-flex;
+  align-items: center;
+  background: #fff;
+  border: 1px solid #cbd5e1;
+  border-radius: 9px;
+  padding: 3px 5px 3px 10px;
+  gap: 6px;
+  box-shadow: 0 1px 3px rgb(15 23 42 / 5%);
+  transition: all 0.2s ease;
+
+  &:focus-within {
+    border-color: #2563eb;
+    box-shadow: 0 0 0 3px rgb(37 99 235 / 15%);
+  }
+
+  .search-icon {
+    color: #94a3b8;
+    font-size: 12px;
+  }
+
+  .search-input {
+    border: none;
+    outline: none;
+    font-size: 11.5px;
+    color: #0f172a;
+    width: 220px;
+    background: transparent;
+
+    &::placeholder {
+      color: #94a3b8;
+    }
+  }
+
+  .search-clear-btn {
+    background: none;
+    border: none;
+    color: #94a3b8;
+    cursor: pointer;
+    padding: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+
+    &:hover {
+      color: #0f172a;
+      background: #f1f5f9;
+    }
+  }
+
+  .search-btn {
+    height: 30px;
+    border-radius: 7px;
+    font-weight: 600;
+    font-size: 11px;
+    padding: 0 12px;
+  }
+}
+
+.i4c-card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px;
+  background: #fff;
+  border-bottom: 1px solid #f1f5f9;
+  font-size: 13px;
+  font-weight: 700;
+  color: #0f172a;
+
+  fa-icon {
+    color: #2563eb;
+  }
+
+  .head-hint {
+    font-size: 11px;
+    color: #64748b;
+    font-weight: normal;
+  }
+
+  .i4c-toolbar-spacer {
+    flex: 1 1 auto;
+  }
+
+  .entries-counter {
+    font-size: 11px;
+    font-weight: 600;
+    color: #475569;
+    background: #f1f5f9;
+    padding: 2px 8px;
+    border-radius: 9999px;
+    border: 1px solid #e2e8f0;
+  }
+}
+
+.bank-name-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  .bank-title-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .bank-name {
+    color: #0f172a;
+    font-size: 12px;
+  }
+
+  .bank-code-sub {
+    font-size: 10px;
+    color: #94a3b8;
+  }
+}
+
+.entity-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  background: #f1f5f9;
+  color: #475569;
+  border: 1px solid #e2e8f0;
+  flex-shrink: 0;
+
+  &--lg {
+    width: 36px;
+    height: 36px;
+    font-size: 15px;
+    border-radius: 10px;
+  }
+
+  &--bnk {
+    background: #eff6ff;
+    color: #1d4ed8;
+    border-color: #bfdbfe;
+  }
+
+  &--wlt {
+    background: #f5f3ff;
+    color: #7c3aed;
+    border-color: #ddd6fe;
+  }
+
+  &--mer {
+    background: #ecfdf5;
+    color: #059669;
+    border-color: #a7f3d0;
+  }
+
+  &--ppi {
+    background: #fffbeb;
+    color: #d97706;
+    border-color: #fde68a;
+  }
+}
+
+.entity-type-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  background: #f1f5f9;
+  color: #475569;
+  border: 1px solid #e2e8f0;
+
+  &--bnk {
+    background: #eff6ff;
+    color: #1d4ed8;
+    border-color: #bfdbfe;
+  }
+
+  &--wlt {
+    background: #f5f3ff;
+    color: #7c3aed;
+    border-color: #ddd6fe;
+  }
+
+  &--mer {
+    background: #ecfdf5;
+    color: #059669;
+    border-color: #a7f3d0;
+  }
+
+  &--ppi {
+    background: #fffbeb;
+    color: #d97706;
+    border-color: #fde68a;
+  }
+}
+
+.code-pill {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 6px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  color: #0f172a;
+  font-weight: 700;
+  font-size: 12px;
+}
+
+.copy-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
+  color: #334155;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: #e2e8f0;
+    color: #0f172a;
+  }
+
+  &--ifsc {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+    color: #166534;
+
+    &:hover {
+      background: #dcfce7;
+    }
+  }
+
+  &--sm {
+    padding: 2px 8px;
+    font-size: 10px;
+  }
+
+  .copy-success-text {
+    color: #16a34a;
+    font-weight: 700;
+  }
+}
+
+.standard-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: #64748b;
+  font-weight: 600;
+}
+
+.modal-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.modal-header-sub {
+  font-size: 12px;
+  color: #94a3b8;
+  font-weight: normal;
+  margin-top: 2px;
+}
+
+.details-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px;
+}
+
+.detail-card {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+
+  &-label {
+    font-size: 10px;
+    font-weight: 700;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  &-val {
+    font-size: 13px;
+    font-weight: 700;
+    color: #0f172a;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &-sub {
+    font-size: 10px;
+    color: #94a3b8;
+    margin-top: 1px;
+  }
+}
+
+.payload-box {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  &-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12px;
+    font-weight: 700;
+    color: #1e293b;
+  }
+}
+
+.footer-btn-close {
+  padding: 6px 14px;
+  border-radius: 8px;
+  background: #e2e8f0;
+  color: #334155;
+  border: none;
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #cbd5e1;
+    color: #0f172a;
+  }
+}
+
+.ifsc-filter {
+  width: 170px;
+}

src/app/cfcfrms/i4c/i4c-bank-master/i4c-bank-master.component.ts

@@ -0,0 +1,167 @@
+/**
+ * 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 { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { I4cService, i4cErrorMessage } from '../i4c.service';
+
+/** The I4C Bank Code Master from the specification: codes the bank reports as root_bankid / payee_bank_code. */
+@Component({
+  selector: 'mifosx-i4c-bank-master',
+  templateUrl: './i4c-bank-master.component.html',
+  styleUrls: ['./i4c-bank-master.component.scss'],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatProgressBarModule,
+    MatPaginatorModule,
+    FaIconComponent
+  ]
+})
+export class I4cBankMasterComponent implements OnInit {
+  private i4c = inject(I4cService);
+
+  readonly types = [
+    { value: '', label: 'All Entities' },
+    { value: 'BNK', label: 'Commercial Banks' },
+    { value: 'WLT', label: 'Digital Wallets' },
+    { value: 'MER', label: 'Payment Merchants' },
+    { value: 'PPI', label: 'Prepaid Instruments' },
+    { value: 'CBD', label: 'CBD' },
+    { value: 'INS', label: 'Insurance' }
+  ];
+
+  search = '';
+  type = '';
+  ifsc = '';
+  total = 0;
+  pageIndex = 0;
+  pageSize = 50;
+  readonly pageSizes = [
+    25,
+    50,
+    100,
+    200
+  ];
+  rows: any[] = [];
+  loading = false;
+  error = '';
+  copiedKey = '';
+  selectedBankModal: any = null;
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  setType(t: string): void {
+    if (this.type === t) return;
+    this.type = t;
+    this.load(true);
+  }
+
+  onPage(e: PageEvent): void {
+    this.pageIndex = e.pageIndex;
+    this.pageSize = e.pageSize;
+    this.load();
+  }
+
+  /** Reload the current page; a changed filter passes `fromFirstPage` so the officer lands on page one. */
+  load(fromFirstPage = false): void {
+    if (fromFirstPage) {
+      this.pageIndex = 0;
+    }
+    this.loading = true;
+    this.error = '';
+    this.i4c
+      .bankMaster({
+        search: this.search.trim(),
+        type: this.type,
+        ifsc: this.ifsc,
+        offset: this.pageIndex * this.pageSize,
+        limit: this.pageSize
+      })
+      .subscribe({
+        next: (page) => {
+          this.rows = page.pageItems;
+          this.total = page.totalFilteredRecords;
+          this.loading = false;
+        },
+        error: (e) => {
+          this.error = i4cErrorMessage(e);
+          this.loading = false;
+        }
+      });
+  }
+
+  openModal(bank: any): void {
+    this.selectedBankModal = bank;
+  }
+
+  closeModal(): void {
+    this.selectedBankModal = null;
+  }
+
+  copyText(text: string, key: string, e?: MouseEvent): void {
+    if (e) {
+      e.stopPropagation();
+    }
+    if (!text) return;
+    navigator.clipboard?.writeText(text);
+    this.copiedKey = key;
+    setTimeout(() => {
+      if (this.copiedKey === key) {
+        this.copiedKey = '';
+      }
+    }, 2000);
+  }
+
+  getTypeIcon(type: string): string {
+    switch (type?.toUpperCase()) {
+      case 'BNK':
+        return 'university';
+      case 'WLT':
+        return 'mobile-alt';
+      case 'MER':
+        return 'coins';
+      case 'PPI':
+        return 'credit-card';
+      default:
+        return 'building';
+    }
+  }
+
+  sampleJson(b: any): string {
+    if (!b) return '';
+    const sample = {
+      layer_number: 1,
+      transaction_details: {
+        payee_bank_code: b.bank_code,
+        payee_bank_name: b.bank_name,
+        payee_ifsc_prefix: b.ifsc_prefix || 'N/A',
+        entity_category: b.entity_type
+      },
+      mha_routing: {
+        root_bankid: b.bank_code,
+        standard: 'I4C-MHA-2.0'
+      }
+    };
+    return JSON.stringify(sample, null, 2);
+  }
+}

src/app/cfcfrms/i4c/i4c-dashboard/i4c-dashboard.component.html

@@ -0,0 +1,484 @@
+<!--
+  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="i4c-page">
+  <!-- Modern Toolbar -->
+  <div class="i4c-toolbar">
+    <div class="i4c-toolbar__hint">
+      <fa-icon icon="info-circle" class="hint-ic"></fa-icon>
+      <span
+        >Live NCRP-CFCFRMS Integration: automated complaint processing, targeted account holds &amp; MHA
+        responses.</span
+      >
+    </div>
+    <span class="i4c-toolbar__spacer"></span>
+    <button mat-stroked-button class="action-btn" (click)="showConfigModal = true" [disabled]="!data">
+      <fa-icon icon="cog"></fa-icon> Integration Config
+    </button>
+    <button mat-flat-button color="primary" class="action-btn" (click)="load()" [disabled]="loading">
+      <fa-icon icon="sync" [animation]="loading ? 'spin' : undefined"></fa-icon> Refresh
+    </button>
+  </div>
+
+  @if (loading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">
+      <fa-icon icon="exclamation-circle"></fa-icon>
+      <span>{{ error }}</span>
+    </div>
+  }
+
+  @if (data) {
+    @if (setupGaps.length) {
+      <div class="setup-banner">
+        <div class="setup-banner__icon">
+          <fa-icon icon="exclamation-triangle"></fa-icon>
+        </div>
+        <div class="setup-banner__content">
+          <div class="setup-banner__title">Configuration &amp; Production Setup Needed</div>
+          <ul class="setup-banner__list">
+            @for (gap of setupGaps; track gap) {
+              <li>{{ gap }}</li>
+            }
+          </ul>
+        </div>
+      </div>
+    }
+
+    <!-- KPI Groups: Complaints, Holds, Needs Action -->
+    <div class="kpi-groups">
+      <!-- Section 1: Complaints -->
+      <section class="kpi-group">
+        <div class="kpi-group__head">
+          <fa-icon icon="inbox"></fa-icon>
+          <span>Complaints</span>
+        </div>
+        <div class="kpi-group__row">
+          <a class="modern-kpi" routerLink="../requests">
+            <div class="kpi-top">
+              <span class="kpi-icon-circle kpi-icon-circle--blue"><fa-icon icon="clock"></fa-icon></span>
+              <span class="kpi-trend">Last 24h</span>
+            </div>
+            <span class="modern-kpi__value">{{ data.requestsLast24h }}</span>
+            <span class="modern-kpi__label">Received (24 h)</span>
+            <span class="modern-kpi__sub">{{ data.requestsLast30d }} received in 30 days</span>
+          </a>
+
+          <a class="modern-kpi" routerLink="../requests" [class.modern-kpi--warn]="data.requestsPending > 0">
+            <div class="kpi-top">
+              <span class="kpi-icon-circle kpi-icon-circle--amber"><fa-icon icon="tasks"></fa-icon></span>
+              @if (data.requestsPending > 0) {
+                <span class="kpi-trend kpi-trend--warn">Needs processing</span>
+              }
+            </div>
+            <span class="modern-kpi__value">{{ data.requestsPending }}</span>
+            <span class="modern-kpi__label">Still Processing</span>
+            <span class="modern-kpi__sub">queued / retry queue</span>
+          </a>
+        </div>
+      </section>
+
+      <!-- Section 2: Holds -->
+      <section class="kpi-group">
+        <div class="kpi-group__head">
+          <fa-icon icon="lock"></fa-icon>
+          <span>Holds Register</span>
+        </div>
+        <div class="kpi-group__row">
+          <a class="modern-kpi" routerLink="../holds" [queryParams]="{ view: 'ACTIVE' }">
+            <div class="kpi-top">
+              <span class="kpi-icon-circle kpi-icon-circle--green"><fa-icon icon="shield-alt"></fa-icon></span>
+              <span class="kpi-trend kpi-trend--green">Active</span>
+            </div>
+            <span class="modern-kpi__value">{{ data.activeHolds }}</span>
+            <span class="modern-kpi__label">Active Account Holds</span>
+            <span class="modern-kpi__sub">disputed amounts restricted</span>
+          </a>
+
+          <a class="modern-kpi" routerLink="../holds" [queryParams]="{ view: 'ACTIVE' }">
+            <div class="kpi-top">
+              <span class="kpi-icon-circle kpi-icon-circle--blue"><fa-icon icon="coins"></fa-icon></span>
+            </div>
+            <span class="modern-kpi__value">₹{{ data.amountHeld | number: '1.2-2' }}</span>
+            <span class="modern-kpi__label">Total Amount Held</span>
+            <span class="modern-kpi__sub">customer account balance</span>
+          </a>
+
+          <a
+            class="modern-kpi"
+            routerLink="../holds"
+            [queryParams]="{ view: 'PROSPECTIVE' }"
+            [class.modern-kpi--warn]="data.prospectiveShortfall > 0"
+          >
+            <div class="kpi-top">
+              <span class="kpi-icon-circle kpi-icon-circle--amber"><fa-icon icon="exclamation-circle"></fa-icon></span>
+            </div>
+            <span class="modern-kpi__value">₹{{ data.prospectiveShortfall | number: '1.2-2' }}</span>
+            <span class="modern-kpi__label">Prospective Shortfall</span>
+            <span class="modern-kpi__sub">funds pending deposit</span>
+          </a>
+        </div>
+      </section>
+
+      <!-- Section 3: Needs Action -->
+      <section class="kpi-group kpi-group--action">
+        <div class="kpi-group__head">
+          <fa-icon icon="bell"></fa-icon>
+          <span>Needs Immediate Action</span>
+        </div>
+        <div class="kpi-group__row">
+          <a
+            class="modern-kpi"
+            routerLink="../holds"
+            [queryParams]="{ view: 'INTIMATION_DUE' }"
+            [class.modern-kpi--alert]="data.intimationOverdue > 0"
+          >
+            <div class="kpi-top">
+              <span class="kpi-icon-circle kpi-icon-circle--red"><fa-icon icon="envelope"></fa-icon></span>
+              @if (data.intimationOverdue > 0) {
+                <span class="kpi-trend kpi-trend--alert">Overdue</span>
+              }
+            </div>
+            <span class="modern-kpi__value">{{ data.intimationOverdue }}</span>
+            <span class="modern-kpi__label">Intimation Overdue</span>
+            <span class="modern-kpi__sub">RBI notification window</span>
+          </a>
+
+          <a
+            class="modern-kpi"
+            routerLink="../holds"
+            [queryParams]="{ view: 'REVIEW_DUE' }"
+            [class.modern-kpi--warn]="data.holdsReviewDue > 0"
+          >
+            <div class="kpi-top">
+              <span class="kpi-icon-circle kpi-icon-circle--amber"><fa-icon icon="calendar-check"></fa-icon></span>
+            </div>
+            <span class="modern-kpi__value">{{ data.holdsReviewDue }}</span>
+            <span class="modern-kpi__label">90-Day Review Due</span>
+            <span class="modern-kpi__sub">due within 15 days</span>
+          </a>
+
+          <a class="modern-kpi" routerLink="../approvals" [class.modern-kpi--warn]="data.pendingApprovals > 0">
+            <div class="kpi-top">
+              <span class="kpi-icon-circle kpi-icon-circle--purple"><fa-icon icon="user-check"></fa-icon></span>
+              @if (data.pendingApprovals > 0) {
+                <span class="kpi-trend kpi-trend--warn">Pending Checker</span>
+              }
+            </div>
+            <span class="modern-kpi__value">{{ data.pendingApprovals }}</span>
+            <span class="modern-kpi__label">Awaiting Approval</span>
+            <span class="modern-kpi__sub">hold release / freeze</span>
+          </a>
+
+          <a
+            class="modern-kpi"
+            routerLink="../outbox"
+            [queryParams]="{ status: 'FAILED' }"
+            [class.modern-kpi--alert]="data.outboxFailed > 0"
+          >
+            <div class="kpi-top">
+              <span class="kpi-icon-circle kpi-icon-circle--red"><fa-icon icon="paper-plane"></fa-icon></span>
+              @if (data.outboxFailed > 0) {
+                <span class="kpi-trend kpi-trend--alert">Outbox Fail</span>
+              }
+            </div>
+            <span class="modern-kpi__value">{{ data.outboxFailed }}</span>
+            <span class="modern-kpi__label">Delivery Failed</span>
+            <span class="modern-kpi__sub">{{ data.outboxPending }} queued to send</span>
+          </a>
+        </div>
+      </section>
+    </div>
+
+    <!-- Middle Row: API Performance + Complaints Status -->
+    <div class="dashboard-grid">
+      <!-- API Performance 30 Days -->
+      <div class="i4c-card card-perf">
+        <div class="i4c-card__head">
+          <fa-icon icon="tachometer-alt"></fa-icon>
+          <span>API Gateway Performance (Last 30 Days)</span>
+          <span class="rbi-badge"><fa-icon icon="shield-alt"></fa-icon> RBI Review Periodic Spec</span>
+        </div>
+        <div class="i4c-table-wrap">
+          <table class="i4c-table">
+            <thead>
+              <tr>
+                <th>Direction</th>
+                <th class="num">Calls</th>
+                <th class="num">Succeeded</th>
+                <th class="num">Failed</th>
+                <th class="num">Success Rate</th>
+                <th class="num">Avg (ms)</th>
+                <th class="num">Max (ms)</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (row of data.apiPerformance30d; track row.direction) {
+                <tr>
+                  <td>
+                    <span class="direction-chip direction-chip--{{ row.direction?.toLowerCase() }}">
+                      {{ row.direction === 'IN' ? '↓ Inbound (I4C → Bank)' : '↑ Outbound (Bank → I4C)' }}
+                    </span>
+                  </td>
+                  <td class="num font-semibold">{{ row.calls }}</td>
+                  <td class="num success-num">{{ row.succeeded }}</td>
+                  <td class="num" [class.fail-num]="row.failed > 0">{{ row.failed }}</td>
+                  <td class="num">
+                    @if (successRate(row) === null) {
+                      <span class="text-muted">-</span>
+                    } @else {
+                      <div class="modern-rate">
+                        <div class="modern-rate__bar">
+                          <div class="modern-rate__fill" [style.width.%]="successRate(row)"></div>
+                        </div>
+                        <span class="modern-rate__text">{{ successRate(row) | number: '1.0-1' }}%</span>
+                      </div>
+                    }
+                  </td>
+                  <td class="num latency-pill">{{ row.avg_ms ? row.avg_ms + ' ms' : '-' }}</td>
+                  <td class="num latency-pill">{{ row.max_ms ? row.max_ms + ' ms' : '-' }}</td>
+                </tr>
+              } @empty {
+                <tr>
+                  <td colspan="7" class="i4c-empty">No API calls recorded in the last 30 days.</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+        <div class="card-footer-info">
+          <div class="footer-stat">
+            <fa-icon icon="clock"></fa-icon>
+            <span>Average time from complaint arrival to response delivery:</span>
+            <b class="stat-highlight">{{
+              data.avgAckToResponseSeconds === null ? '-' : data.avgAckToResponseSeconds + ' seconds'
+            }}</b>
+          </div>
+          <div class="footer-note">
+            Note: Failed inbound calls include unauthenticated requests and invalid signature payloads.
+          </div>
+        </div>
+      </div>
+
+      <!-- Complaints by Status -->
+      <div class="i4c-card card-status">
+        <div class="i4c-card__head">
+          <fa-icon icon="tasks"></fa-icon>
+          <span>Complaints by Status</span>
+        </div>
+        <div class="status-grid">
+          @for (row of data.requestsByStatus; track row.status) {
+            <a class="status-tile" [routerLink]="['../requests']" [queryParams]="{ status: row.status }">
+              <div class="status-tile__left">
+                <span class="i4c-badge" [class]="statusClass(row.status)">{{ row.status }}</span>
+                <span class="status-tile__hint">View complaints</span>
+              </div>
+              <span class="status-tile__count">{{ row.count }}</span>
+            </a>
+          } @empty {
+            <div class="i4c-empty">No complaints received yet.</div>
+          }
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Row: Findings + Configuration Preview -->
+    <div class="dashboard-grid dashboard-grid--equal">
+      <!-- Reported to I4C -->
+      <div class="i4c-card">
+        <div class="i4c-card__head">
+          <fa-icon icon="list-alt"></fa-icon>
+          <span>Findings Reported to I4C (Section 6)</span>
+        </div>
+        <div class="i4c-table-wrap">
+          <table class="i4c-table">
+            <thead>
+              <tr>
+                <th>Transaction / Hold Type</th>
+                <th class="num">Entries</th>
+                <th class="num">Reported Amount</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (row of data.findingsByType; track row.txn_type) {
+                <tr>
+                  <td>
+                    <b>{{ row.txn_type }}</b>
+                  </td>
+                  <td class="num">{{ row.count }}</td>
+                  <td class="num highlight-amt">₹{{ row.amount | number: '1.2-2' }}</td>
+                </tr>
+              } @empty {
+                <tr>
+                  <td colspan="3" class="i4c-empty">No findings reported to I4C yet.</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Configuration Snapshot -->
+      <div class="i4c-card">
+        <div class="i4c-card__head">
+          <fa-icon icon="cog"></fa-icon>
+          <span>Live Gateway Configuration</span>
+          <button class="config-popup-trigger" (click)="showConfigModal = true">
+            <fa-icon icon="external-link-alt"></fa-icon> Details
+          </button>
+        </div>
+        <div class="config-grid">
+          <div class="config-tile">
+            <div class="config-tile__label">Gateway Status</div>
+            <div class="config-tile__value">
+              <span class="i4c-badge" [class]="data.configuration.enabled ? 'i4c-badge--green' : 'i4c-badge--red'">
+                {{ data.configuration.enabled ? 'ENABLED' : 'DISABLED' }}
+              </span>
+            </div>
+          </div>
+
+          <div class="config-tile">
+            <div class="config-tile__label">Tenant</div>
+            <div class="config-tile__value">{{ data.configuration.tenant }}</div>
+          </div>
+
+          <div class="config-tile">
+            <div class="config-tile__label">Bank Code (I4C root)</div>
+            <div class="config-tile__value">
+              <b>{{ data.configuration.bankCode || 'Not configured' }}</b>
+            </div>
+          </div>
+
+          <div class="config-tile">
+            <div class="config-tile__label">Encryption Mode</div>
+            <div class="config-tile__value">
+              <span class="crypto-chip">{{ data.configuration.cryptoMode }}</span>
+            </div>
+          </div>
+
+          <div class="config-tile config-tile--full">
+            <div class="config-tile__label">I4C Outbound API Base URL</div>
+            <div class="config-tile__value url-val">
+              <span>{{ data.configuration.outboundBaseUrl || 'Not configured' }}</span>
+              @if (data.configuration.outboundBaseUrl) {
+                <button class="copy-btn" (click)="copyText(data.configuration.outboundBaseUrl, 'url')">
+                  {{ copiedKey === 'url' ? 'Copied!' : 'Copy' }}
+                </button>
+              }
+            </div>
+          </div>
+
+          <div class="config-tile">
+            <div class="config-tile__label">Review Window</div>
+            <div class="config-tile__value">{{ data.configuration.holdReviewDays }} Days (90-day cycle)</div>
+          </div>
+
+          <div class="config-tile">
+            <div class="config-tile__label">Match Window</div>
+            <div class="config-tile__value">± {{ data.configuration.matchDateWindowDays }} Days</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+
+  <!-- ========================================================
+       MODERN POPUP WINDOW: CONFIGURATION DETAILS MODAL
+       ======================================================== -->
+  @if (showConfigModal && data?.configuration) {
+    <div class="i4c-modal-backdrop" (click)="showConfigModal = false">
+      <div class="i4c-modal-window i4c-modal-window--wide" (click)="$event.stopPropagation()">
+        <div class="i4c-modal-header">
+          <div class="i4c-modal-header__title">
+            <fa-icon icon="cog"></fa-icon>
+            <div>
+              <span>I4C-MHA Integration Configuration</span>
+              <div class="i4c-modal-header__sub">
+                NCRP-CFCFRMS Specification 2.0 Security &amp; Connection Parameters
+              </div>
+            </div>
+          </div>
+          <button class="modal-close-btn" (click)="showConfigModal = false" aria-label="Close">
+            <fa-icon icon="times"></fa-icon>
+          </button>
+        </div>
+
+        <div class="i4c-modal-body">
+          <dl class="i4c-kv">
+            <dt>Integration Enabled</dt>
+            <dd>
+              <span class="i4c-badge" [class]="data.configuration.enabled ? 'i4c-badge--green' : 'i4c-badge--red'">
+                {{ data.configuration.enabled ? 'ACTIVE (Online)' : 'DISABLED' }}
+              </span>
+            </dd>
+
+            <dt>Tenant ID</dt>
+            <dd>{{ data.configuration.tenant }}</dd>
+
+            <dt>Bank Code (I4C ID)</dt>
+            <dd>
+              <b>{{ data.configuration.bankCode }}</b>
+            </dd>
+
+            <dt>Inbound Credentials</dt>
+            <dd>
+              {{ data.configuration.inboundCredentialsConfigured ? 'Configured' : 'Not configured' }}
+              @if (data.configuration.inboundPasswordHashed) {
+                <span class="badge-mini">bcrypt hash active</span>
+              }
+            </dd>
+
+            <dt>Allowed I4C IPs</dt>
+            <dd>{{ data.configuration.allowedIpCount || 'Any / All (UAT mode)' }}</dd>
+
+            <dt>Payload Encryption</dt>
+            <dd>
+              <span class="crypto-chip">{{ data.configuration.cryptoMode }}</span>
+              @if (data.configuration.cryptoPassphraseConfigured) {
+                <span class="badge-mini">passphrase active</span>
+              }
+            </dd>
+
+            <dt>Outbound Base URL</dt>
+            <dd class="font-mono">{{ data.configuration.outboundBaseUrl || 'Not set' }}</dd>
+
+            <dt>Automatic Hold Review</dt>
+            <dd>{{ data.configuration.holdReviewDays }} days</dd>
+
+            <dt>Transaction Match Window</dt>
+            <dd>± {{ data.configuration.matchDateWindowDays }} days</dd>
+
+            <dt>Simulator Status</dt>
+            <dd>
+              <span
+                class="i4c-badge"
+                [class]="data.configuration.simulatorEnabled ? 'i4c-badge--amber' : 'i4c-badge--green'"
+              >
+                {{ data.configuration.simulatorEnabled ? 'SIMULATOR ACTIVE (UAT)' : 'PRODUCTION' }}
+              </span>
+            </dd>
+          </dl>
+
+          <div class="i4c-note">
+            <fa-icon icon="shield-alt"></fa-icon>
+            <span
+              >All passwords, encryption keys, and tokens are stored in the server keystore and never revealed on the
+              UI.</span
+            >
+          </div>
+        </div>
+
+        <div class="i4c-modal-footer">
+          <button class="footer-btn-close" (click)="showConfigModal = false">Close</button>
+        </div>
+      </div>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-dashboard/i4c-dashboard.component.scss

@@ -0,0 +1,499 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+
+@include i4c-skin;
+
+/* Setup Banner */
+.setup-banner {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 10px 14px;
+  border: 1px solid #fde68a;
+  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgb(245 158 11 / 8%);
+
+  &__icon {
+    font-size: 18px;
+    color: #d97706;
+    margin-top: 1px;
+  }
+
+  &__title {
+    font-weight: 700;
+    color: #92400e;
+    font-size: 12.5px;
+  }
+
+  &__list {
+    margin: 4px 0 0;
+    padding-left: 18px;
+    color: #92400e;
+    font-size: 11.5px;
+    line-height: 1.5;
+  }
+}
+
+/* KPI Groups */
+.kpi-groups {
+  display: grid;
+  grid-template-columns: 2fr 3fr 4fr;
+  gap: 12px;
+}
+
+@media (width <= 1280px) {
+  .kpi-groups {
+    grid-template-columns: 1fr 1fr;
+
+    .kpi-group--action {
+      grid-column: 1 / -1;
+    }
+  }
+}
+
+@media (width <= 768px) {
+  .kpi-groups {
+    grid-template-columns: 1fr;
+  }
+}
+
+.kpi-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #64748b;
+
+    fa-icon {
+      color: #2563eb;
+    }
+  }
+
+  &__row {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 8px;
+  }
+}
+
+@media (width <= 580px) {
+  .kpi-group__row {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Modern Fintech KPI Tile */
+.modern-kpi {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  text-decoration: none;
+  color: inherit;
+  box-shadow: 0 3px 10px rgb(15 23 42 / 3%);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: #93c5fd;
+    box-shadow: 0 8px 16px -3px rgb(37 99 235 / 12%);
+  }
+
+  .kpi-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .kpi-icon-circle {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+
+    &--blue {
+      background: #eff6ff;
+      color: #2563eb;
+    }
+
+    &--green {
+      background: #ecfdf5;
+      color: #059669;
+    }
+
+    &--amber {
+      background: #fffbeb;
+      color: #d97706;
+    }
+
+    &--red {
+      background: #fef2f2;
+      color: #dc2626;
+    }
+
+    &--purple {
+      background: #f5f3ff;
+      color: #7c3aed;
+    }
+  }
+
+  .kpi-trend {
+    font-size: 9.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: 1px 6px;
+    border-radius: 9999px;
+    background: #f1f5f9;
+    color: #64748b;
+
+    &--green {
+      background: #ecfdf5;
+      color: #059669;
+    }
+
+    &--warn {
+      background: #fffbeb;
+      color: #d97706;
+    }
+
+    &--alert {
+      background: #fef2f2;
+      color: #dc2626;
+    }
+  }
+
+  &__value {
+    font-size: 18px;
+    font-weight: 800;
+    color: #0f172a;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #334155;
+  }
+
+  &__sub {
+    font-size: 10px;
+    color: #94a3b8;
+  }
+
+  &--warn {
+    border-color: #fde68a;
+    background: #fffdf5;
+
+    .modern-kpi__value {
+      color: #b45309;
+    }
+  }
+
+  &--alert {
+    border-color: #fecaca;
+    background: #fffbfb;
+
+    .modern-kpi__value {
+      color: #b91c1c;
+    }
+  }
+}
+
+/* Dashboard Grid */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 18px;
+
+  &--equal {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (width <= 1024px) {
+  .dashboard-grid,
+  .dashboard-grid--equal {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* API Performance */
+.rbi-badge {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #1e40af;
+  background: #dbeafe;
+  padding: 3px 10px;
+  border-radius: 9999px;
+}
+
+.direction-chip {
+  display: inline-block;
+  padding: 3px 9px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 700;
+
+  &--in {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+
+  &--out {
+    background: #f0fdf4;
+    color: #15803d;
+  }
+}
+
+.success-num {
+  color: #059669;
+  font-weight: 700;
+}
+
+.fail-num {
+  color: #dc2626;
+  font-weight: 700;
+}
+
+.modern-rate {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+
+  &__bar {
+    width: 60px;
+    height: 7px;
+    background: #fee2e2;
+    border-radius: 9999px;
+    overflow: hidden;
+  }
+
+  &__fill {
+    display: block;
+    height: 100%;
+    background: linear-gradient(90deg, #10b981, #059669);
+    border-radius: 9999px;
+  }
+
+  &__text {
+    font-size: 12px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+.latency-pill {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.card-footer-info {
+  padding: 12px 20px;
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: #475569;
+
+  .footer-stat {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    fa-icon {
+      color: #3b82f6;
+    }
+  }
+
+  .stat-highlight {
+    color: #0f172a;
+    font-weight: 700;
+  }
+
+  .footer-note {
+    font-size: 11px;
+    color: #94a3b8;
+  }
+}
+
+/* Status Tile List */
+.status-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+}
+
+.status-tile {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid #f1f5f9;
+  background: #f8fafc;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #fff;
+    border-color: #cbd5e1;
+    box-shadow: 0 4px 10px rgb(15 23 42 / 5%);
+    transform: translateY(-1px);
+  }
+
+  &__left {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__hint {
+    font-size: 11px;
+    color: #94a3b8;
+  }
+
+  &__count {
+    font-size: 18px;
+    font-weight: 800;
+    color: #0f172a;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+/* Configuration Grid */
+.config-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 16px 20px;
+}
+
+.config-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  &--full {
+    grid-column: 1 / -1;
+  }
+
+  &__label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #94a3b8;
+  }
+
+  &__value {
+    font-size: 13px;
+    color: #0f172a;
+    font-weight: 500;
+  }
+
+  .url-val {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: monospace;
+    font-size: 12px;
+    word-break: break-all;
+  }
+}
+
+.config-popup-trigger {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 8px;
+  background: #f1f5f9;
+  border: 1px solid #cbd5e1;
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #e2e8f0;
+    color: #1d4ed8;
+  }
+}
+
+.crypto-chip {
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: #eff6ff;
+  color: #1e40af;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.copy-btn {
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: #2563eb;
+  color: #fff;
+  border: none;
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover {
+    background: #1d4ed8;
+  }
+}
+
+.badge-mini {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  font-size: 11px;
+  color: #64748b;
+  margin-left: 6px;
+}
+
+.highlight-amt {
+  color: #0f172a;
+  font-weight: 700;
+}

src/app/cfcfrms/i4c/i4c-dashboard/i4c-dashboard.component.ts

@@ -0,0 +1,126 @@
+/**
+ * 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 { DecimalPipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { I4cService, i4cErrorMessage } from '../i4c.service';
+
+/**
+ * Integration health at a glance, and the API performance figures the RBI letter (05 Dec 2025, para 4) asks to be
+ * reviewed periodically: calls, failures and response times in each direction.
+ */
+@Component({
+  selector: 'mifosx-i4c-dashboard',
+  templateUrl: './i4c-dashboard.component.html',
+  styleUrls: ['./i4c-dashboard.component.scss'],
+  imports: [
+    DecimalPipe,
+    RouterLink,
+    MatButtonModule,
+    MatProgressBarModule,
+    FaIconComponent
+  ]
+})
+export class I4cDashboardComponent implements OnInit {
+  private i4c = inject(I4cService);
+
+  data: any = null;
+  loading = false;
+  error = '';
+  showConfigModal = false;
+  copiedKey = '';
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.loading = true;
+    this.error = '';
+    this.i4c.dashboard().subscribe({
+      next: (d) => {
+        this.data = d;
+        this.loading = false;
+      },
+      error: (e) => {
+        this.error = i4cErrorMessage(e);
+        this.loading = false;
+      }
+    });
+  }
+
+  copyText(text: string, key: string): void {
+    if (!text) {
+      return;
+    }
+    navigator.clipboard.writeText(text);
+    this.copiedKey = key;
+    setTimeout(() => {
+      if (this.copiedKey === key) {
+        this.copiedKey = '';
+      }
+    }, 2000);
+  }
+
+  statusClass(status: string): string {
+    switch (status) {
+      case 'PROCESSED':
+        return 'i4c-badge--green';
+      case 'RETRY':
+        return 'i4c-badge--red';
+      case 'RECEIVED':
+      case 'PROCESSING':
+        return 'i4c-badge--amber';
+      default:
+        return '';
+    }
+  }
+
+  /** Success rate of calls in one direction, as a percentage; null when there were none. */
+  successRate(row: any): number | null {
+    const calls = Number(row?.calls || 0);
+    return calls === 0 ? null : (Number(row?.succeeded || 0) * 100) / calls;
+  }
+
+  /** What still stands between this bank and live traffic, worked out from the configuration. */
+  get setupGaps(): string[] {
+    const c = this.data?.configuration;
+    if (!c) {
+      return [];
+    }
+    const gaps: string[] = [];
+    if (!c.enabled) {
+      gaps.push('Integration is switched off (fineract.i4c.enabled=false): I4C calls are refused with 503.');
+    }
+    if (!c.inboundCredentialsConfigured) {
+      gaps.push('No inbound username/password set for I4C to obtain a token.');
+    } else if (!c.inboundPasswordHashed) {
+      gaps.push('Inbound password is configured in plain text; set the bcrypt hash for production.');
+    }
+    if (!c.allowedIpCount) {
+      gaps.push('No I4C source IP allowlist: any address may call (UAT only).');
+    }
+    if (c.cryptoMode !== 'NONE' && !c.cryptoPassphraseConfigured) {
+      gaps.push('Encryption mode is ' + c.cryptoMode + ' but no passphrase is configured.');
+    }
+    if (!c.outboundConfigured) {
+      gaps.push('I4C response URL is not configured: replies wait in the outbox.');
+    }
+    if (!c.bankCode) {
+      gaps.push("This bank's I4C bank code is not set (fineract.i4c.bank-code); root_bankid is sent as 0.");
+    }
+    if (c.simulatorEnabled) {
+      gaps.push('The local I4C simulator is enabled; switch it off in production.');
+    }
+    return gaps;
+  }
+}

src/app/cfcfrms/i4c/i4c-date-range/i4c-date-range.component.html

@@ -0,0 +1,49 @@
+<!--
+  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="date-range" role="group" [attr.aria-label]="label + ' filter'">
+  <span class="date-range__label"><fa-icon icon="calendar-alt"></fa-icon> {{ label }}</span>
+  <div class="date-range__presets">
+    @for (p of presets; track p.value) {
+      <button
+        type="button"
+        class="date-chip"
+        [class.date-chip--active]="range.preset === p.value"
+        [attr.aria-pressed]="range.preset === p.value"
+        (click)="pick(p.value)"
+      >
+        {{ p.label }}
+      </button>
+    }
+  </div>
+  @if (range.preset !== 'ALL') {
+    <div class="date-range__custom">
+      <label>
+        From
+        <input
+          type="date"
+          [max]="range.toDate || today"
+          [(ngModel)]="range.fromDate"
+          (change)="customChanged()"
+          [attr.aria-label]="label + ' from'"
+        />
+      </label>
+      <label>
+        To
+        <input
+          type="date"
+          [min]="range.fromDate"
+          [max]="today"
+          [(ngModel)]="range.toDate"
+          (change)="customChanged()"
+          [attr.aria-label]="label + ' to'"
+        />
+      </label>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-date-range/i4c-date-range.component.scss

@@ -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/.
+ */
+
+:host {
+  display: block;
+}
+
+.date-range {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+
+  &__label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #475569;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__presets {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 3px;
+    border-radius: 999px;
+    background: #f1f5f9;
+  }
+
+  &__custom {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: #475569;
+    }
+
+    input {
+      height: 32px;
+      padding: 0 8px;
+      border: 1px solid #cbd5e1;
+      border-radius: 8px;
+      font: inherit;
+      font-size: 13px;
+      color: #0f172a;
+      background: #fff;
+
+      &:focus-visible {
+        outline: 2px solid #2563eb;
+        outline-offset: 1px;
+      }
+    }
+  }
+}
+
+.date-chip {
+  border: 0;
+  background: transparent;
+  border-radius: 999px;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+  cursor: pointer;
+
+  &:hover {
+    color: #1d4ed8;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #2563eb;
+    outline-offset: 1px;
+  }
+
+  &--active {
+    background: #2563eb;
+    color: #fff;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+}

src/app/cfcfrms/i4c/i4c-date-range/i4c-date-range.component.ts

@@ -0,0 +1,102 @@
+/**
+ * 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, EventEmitter, Input, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+
+export type I4cDatePreset = 'ALL' | 'TODAY' | 'YESTERDAY' | 'WEEK' | 'MONTH' | 'CUSTOM';
+
+/** A date range as the list APIs take it: yyyy-MM-dd, both days included, empty for "no limit". */
+export interface I4cDateRange {
+  preset: I4cDatePreset;
+  fromDate: string;
+  toDate: string;
+}
+
+export const ALL_DATES: I4cDateRange = { preset: 'ALL', fromDate: '', toDate: '' };
+
+/** yyyy-MM-dd in the browser's own time zone (toISOString would shift to UTC). */
+function iso(d: Date): string {
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+/** The days a preset stands for, worked out from today. */
+export function presetRange(preset: I4cDatePreset): I4cDateRange {
+  const today = new Date();
+  const day = (offset: number) => new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset);
+  switch (preset) {
+    case 'TODAY':
+      return { preset, fromDate: iso(today), toDate: iso(today) };
+    case 'YESTERDAY':
+      return { preset, fromDate: iso(day(-1)), toDate: iso(day(-1)) };
+    case 'WEEK': {
+      // The week starts on Monday.
+      const sinceMonday = (today.getDay() + 6) % 7;
+      return { preset, fromDate: iso(day(-sinceMonday)), toDate: iso(today) };
+    }
+    case 'MONTH':
+      return { preset, fromDate: iso(new Date(today.getFullYear(), today.getMonth(), 1)), toDate: iso(today) };
+    default:
+      return { ...ALL_DATES };
+  }
+}
+
+/**
+ * Date filter shared by the I4C lists: All, Today, Yesterday, This Week, This Month, or a custom From / To. Emits the
+ * new range whenever it changes; the page then reloads from page one.
+ */
+@Component({
+  selector: 'mifosx-i4c-date-range',
+  templateUrl: './i4c-date-range.component.html',
+  styleUrls: ['./i4c-date-range.component.scss'],
+  imports: [
+    FormsModule,
+    FaIconComponent
+  ]
+})
+export class I4cDateRangeComponent {
+  @Input() label = 'Date';
+  @Input() range: I4cDateRange = { ...ALL_DATES };
+  @Output() rangeChange = new EventEmitter<I4cDateRange>();
+
+  readonly presets: { value: I4cDatePreset; label: string }[] = [
+    { value: 'ALL', label: 'All' },
+    { value: 'TODAY', label: 'Today' },
+    { value: 'YESTERDAY', label: 'Yesterday' },
+    { value: 'WEEK', label: 'This Week' },
+    { value: 'MONTH', label: 'This Month' },
+    { value: 'CUSTOM', label: 'Custom' }
+  ];
+
+  readonly today = iso(new Date());
+
+  pick(preset: I4cDatePreset): void {
+    if (preset === 'CUSTOM') {
+      // Keep the days already shown so the officer can adjust them.
+      this.range = { ...this.range, preset };
+      return;
+    }
+    this.emit(presetRange(preset));
+  }
+
+  customChanged(): void {
+    const { fromDate, toDate } = this.range;
+    if (fromDate && toDate && toDate < fromDate) {
+      // A reversed range would match nothing; read it the way it was meant.
+      this.range = { preset: 'CUSTOM', fromDate: toDate, toDate: fromDate };
+    }
+    this.emit({ ...this.range, preset: 'CUSTOM' });
+  }
+
+  private emit(range: I4cDateRange): void {
+    this.range = range;
+    this.rangeChange.emit(range);
+  }
+}

src/app/cfcfrms/i4c/i4c-documents/i4c-documents.component.html

@@ -0,0 +1,83 @@
+<!--
+  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="docs">
+  @if (missing.length) {
+    <div class="docs__missing">
+      <fa-icon icon="exclamation-triangle"></fa-icon>
+      Still needed:
+      @for (m of missing; track m; let last = $last) {
+        <b>{{ label(m) }}</b
+        >{{ last ? '' : ', ' }}
+      }
+    </div>
+  }
+
+  <table class="i4c-table">
+    <thead>
+      <tr>
+        <th>Type</th>
+        <th>File</th>
+        <th>Remarks</th>
+        <th>Uploaded</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (d of rows; track d.id) {
+        <tr>
+          <td>{{ label(d.doc_type) }}</td>
+          <td>
+            <span class="docs__name">{{ d.file_name }}</span>
+            <div class="docs__sub" [title]="'SHA-256 ' + d.sha256">
+              {{ size(d.size_bytes) }} · {{ d.sha256.slice(0, 12) }}…
+            </div>
+          </td>
+          <td>{{ d.remarks || '-' }}</td>
+          <td>
+            {{ d.uploaded_at | date: 'dd MMM yyyy, HH:mm' }}
+            <div class="docs__sub">{{ d.uploaded_by }}</div>
+          </td>
+          <td>
+            <button mat-stroked-button type="button" (click)="download(d)">
+              <fa-icon icon="download"></fa-icon> Download
+            </button>
+          </td>
+        </tr>
+      } @empty {
+        <tr>
+          <td colspan="5" class="i4c-empty">No documents attached yet.</td>
+        </tr>
+      }
+    </tbody>
+  </table>
+
+  @if (canUpload) {
+    <div class="docs__upload">
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-label>Document type</mat-label>
+        <mat-select [(ngModel)]="docType">
+          @for (t of types; track t.value) {
+            <mat-option [value]="t.value">{{ t.label }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="docs__remarks">
+        <mat-label>Remarks (order no., date…)</mat-label>
+        <input matInput [(ngModel)]="remarks" maxlength="500" />
+      </mat-form-field>
+      <label class="docs__file">
+        <input #fileInput type="file" accept="application/pdf,image/jpeg,image/png" (change)="pick($event)" />
+      </label>
+      <button mat-flat-button color="primary" type="button" (click)="upload(fileInput)" [disabled]="uploading || !file">
+        <fa-icon icon="upload"></fa-icon> {{ uploading ? 'Uploading…' : 'Attach' }}
+      </button>
+      <span class="docs__sub">PDF, JPEG or PNG, up to 5 MB. Stored with a SHA-256; never changed once attached.</span>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-documents/i4c-documents.component.scss

@@ -0,0 +1,66 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+
+@include i4c-skin;
+
+:host {
+  display: block;
+}
+
+.docs {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  &__missing {
+    padding: 8px 12px;
+    border-radius: 8px;
+    border: 1px solid #fde68a;
+    background: #fffbeb;
+    color: #92400e;
+    font-size: 12.5px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+  }
+
+  &__name {
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+
+  &__sub {
+    font-size: 11px;
+    color: #64748b;
+  }
+
+  &__upload {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+    padding-top: 10px;
+    border-top: 1px solid #f1f5f9;
+
+    mat-form-field {
+      width: 200px;
+    }
+  }
+
+  &__remarks {
+    flex: 1 1 220px;
+  }
+
+  &__file input {
+    font-size: 12px;
+    max-width: 240px;
+  }
+}

src/app/cfcfrms/i4c/i4c-documents/i4c-documents.component.ts

@@ -0,0 +1,174 @@
+/**
+ * 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, EventEmitter, Input, OnChanges, Output, inject } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { DOCUMENT_TYPES, I4cDocument, I4cDocumentOwner, I4cService, i4cErrorMessage, saveBlob } from '../i4c.service';
+
+const MAX_BYTES = 5 * 1024 * 1024;
+const ACCEPTED = [
+  'application/pdf',
+  'image/jpeg',
+  'image/png'
+];
+
+/**
+ * Documents behind a hold, grievance or restoration: list, download, and upload (PDF / JPEG / PNG up to 5 MB). Shows
+ * which of the {@link required} types are still missing.
+ */
+@Component({
+  selector: 'mifosx-i4c-documents',
+  templateUrl: './i4c-documents.component.html',
+  styleUrls: ['./i4c-documents.component.scss'],
+  imports: [
+    DatePipe,
+    FormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    FaIconComponent
+  ]
+})
+export class I4cDocumentsComponent implements OnChanges {
+  private i4c = inject(I4cService);
+  private snackBar = inject(MatSnackBar);
+
+  @Input({ required: true }) ownerType!: I4cDocumentOwner;
+  @Input({ required: true }) ownerId!: number;
+  /** Document types this record needs; missing ones are flagged. */
+  @Input() required: string[] = [];
+  /** Types offered first in the picker. */
+  @Input() suggested: string[] = [];
+  @Input() canUpload = true;
+  /** Documents already loaded with the record, to avoid a second call. */
+  @Input() documents: I4cDocument[] | null = null;
+  @Output() changed = new EventEmitter<void>();
+
+  rows: I4cDocument[] = [];
+  docType = '';
+  remarks = '';
+  file: File | null = null;
+  uploading = false;
+
+  ngOnChanges(): void {
+    if (this.documents) {
+      this.rows = this.documents;
+    } else {
+      this.reload();
+    }
+    if (!this.docType) {
+      this.docType = this.suggested[0] || this.missing[0] || 'OTHER';
+    }
+  }
+
+  get types(): { value: string; label: string }[] {
+    const first = DOCUMENT_TYPES.filter((t) => this.suggested.includes(t.value) || this.required.includes(t.value));
+    return [
+      ...first,
+      ...DOCUMENT_TYPES.filter((t) => !first.includes(t))
+    ];
+  }
+
+  get missing(): string[] {
+    return this.required.filter((t) => !this.rows.some((d) => d.doc_type === t));
+  }
+
+  label(type: string): string {
+    return DOCUMENT_TYPES.find((t) => t.value === type)?.label || type;
+  }
+
+  reload(): void {
+    if (!this.ownerId) {
+      return;
+    }
+    this.i4c.documents(this.ownerType, this.ownerId).subscribe({
+      next: (rows) => (this.rows = rows),
+      error: (e) => this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 })
+    });
+  }
+
+  pick(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const f = input.files?.[0] || null;
+    if (f && !ACCEPTED.includes(f.type)) {
+      this.snackBar.open('Only PDF, JPEG and PNG files can be attached.', 'Close', { duration: 5000 });
+      input.value = '';
+      return;
+    }
+    if (f && f.size > MAX_BYTES) {
+      this.snackBar.open('A document can be at most 5 MB.', 'Close', { duration: 5000 });
+      input.value = '';
+      return;
+    }
+    this.file = f;
+  }
+
+  upload(input: HTMLInputElement): void {
+    if (!this.file || !this.docType) {
+      this.snackBar.open('Choose the document type and the file.', 'Close', { duration: 4000 });
+      return;
+    }
+    const file = this.file;
+    this.uploading = true;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataUrl = String(reader.result || '');
+      const content = dataUrl.substring(dataUrl.indexOf(',') + 1);
+      this.i4c
+        .uploadDocument({
+          ownerType: this.ownerType,
+          ownerId: this.ownerId,
+          docType: this.docType,
+          fileName: file.name,
+          contentType: file.type,
+          content,
+          remarks: this.remarks.trim() || undefined
+        })
+        .subscribe({
+          next: () => {
+            this.uploading = false;
+            this.file = null;
+            this.remarks = '';
+            input.value = '';
+            this.snackBar.open(this.label(this.docType) + ' attached.', 'OK', { duration: 3000 });
+            this.documents = null;
+            this.reload();
+            this.changed.emit();
+          },
+          error: (e) => {
+            this.uploading = false;
+            this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+          }
+        });
+    };
+    reader.onerror = () => {
+      this.uploading = false;
+      this.snackBar.open('The file could not be read.', 'Close', { duration: 5000 });
+    };
+    reader.readAsDataURL(file);
+  }
+
+  download(d: I4cDocument): void {
+    this.i4c.downloadDocument(d.id).subscribe({
+      next: (blob) => saveBlob(blob, d.file_name),
+      error: (e) => this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 })
+    });
+  }
+
+  size(bytes: number): string {
+    return bytes < 1024 * 1024 ? Math.ceil(bytes / 1024) + ' KB' : (bytes / 1024 / 1024).toFixed(1) + ' MB';
+  }
+}

src/app/cfcfrms/i4c/i4c-grievances/i4c-grievances.component.html

@@ -0,0 +1,558 @@
+<!--
+  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="i4c-page">
+  <div class="i4c-toolbar">
+    <div class="i4c-filter-chips">
+      <button class="filter-chip" [class.filter-chip--active]="stage === 'OPEN'" (click)="setStage('OPEN')">
+        <span>All open</span>
+      </button>
+      @for (s of stages; track s.value) {
+        <button class="filter-chip" [class.filter-chip--active]="stage === s.value" (click)="setStage(s.value)">
+          <span>{{ s.label }}</span>
+        </button>
+      }
+      <button class="filter-chip" [class.filter-chip--active]="stage === ''" (click)="setStage('')">
+        <span>All</span>
+      </button>
+    </div>
+    <span class="i4c-toolbar__spacer"></span>
+    <span class="count-tag">{{ total }} grievances</span>
+  </div>
+
+  <div class="i4c-filter-bar">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="search-input">
+      <mat-label>GR id / account / ack no. / customer</mat-label>
+      <input matInput [(ngModel)]="search" (keyup.enter)="load(true)" (blur)="load(true)" />
+    </mat-form-field>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Outcome</mat-label>
+      <mat-select [(ngModel)]="status" (selectionChange)="load(true)">
+        <mat-option value="">Any</mat-option>
+        <mat-option value="OPEN">Pending decision</mat-option>
+        <mat-option value="ALLOWED">Allowed (order given)</mat-option>
+        <mat-option value="REJECTED">Rejected</mat-option>
+        <mat-option value="COURT">Left to the court</mat-option>
+        <mat-option value="WITHDRAWN">Withdrawn</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-checkbox [(ngModel)]="overdueOnly" (change)="load(true)">Past deadline only</mat-checkbox>
+    <mifosx-i4c-date-range label="Raised" [range]="dates" (rangeChange)="onDates($event)"></mifosx-i4c-date-range>
+    <button mat-stroked-button class="i4c-filter-bar__clear" (click)="clearFilters()" [disabled]="!hasFilters">
+      <fa-icon icon="times"></fa-icon> Clear filters
+    </button>
+  </div>
+
+  @if (loading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">
+      <fa-icon icon="exclamation-circle"></fa-icon> <span>{{ error }}</span>
+    </div>
+  }
+
+  <div class="i4c-card">
+    <div class="i4c-card__head">
+      <fa-icon icon="balance-scale"></fa-icon>
+      <span>GRM Grievances (NCRP Grievance Redressal Module)</span>
+      <span class="head-hint"
+        >Raise a grievance from the hold (Holds Register → hold → GRM / MRM). Click a row to work on it.</span
+      >
+    </div>
+    <div class="i4c-table-wrap">
+      <table class="i4c-table">
+        <thead>
+          <tr>
+            <th>Raised</th>
+            <th>GR id</th>
+            <th>Account / Customer</th>
+            <th>Customer asks</th>
+            <th class="num">Held (₹)</th>
+            <th>Stage</th>
+            <th>Deadline</th>
+            <th>Outcome</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (g of rows; track g.id) {
+            <tr class="clickable" (click)="open(g.id)">
+              <td>
+                {{ g.created_at | date: 'dd MMM yyyy' }}
+                <div class="sub">{{ g.created_by }}</div>
+              </td>
+              <td>
+                <b>{{ g.grievance_no || 'Draft #' + g.id }}</b>
+              </td>
+              <td>
+                <b>{{ g.account_no }}</b>
+                <div class="sub">{{ g.client_name }} · Ack {{ g.acknowledgement_no }}</div>
+              </td>
+              <td>{{ requestLabel(g.customer_request) }}</td>
+              <td class="num">{{ g.amount_held | number: '1.2-2' }}</td>
+              <td>
+                <span class="i4c-badge">{{ stageLabel(g.stage) }}</span>
+              </td>
+              <td>
+                @if (g.compliance_due_at && g.stage !== 'CLOSED') {
+                  <span class="deadline" [class.deadline--late]="g.compliance_overdue">
+                    Carry out by {{ g.compliance_due_at | date: 'dd MMM, HH:mm' }}
+                  </span>
+                } @else if (g.due_at) {
+                  <span class="deadline" [class.deadline--late]="g.overdue">{{ g.due_at | date: 'dd MMM yyyy' }}</span>
+                } @else {
+                  -
+                }
+              </td>
+              <td>
+                <span
+                  class="i4c-badge"
+                  [class.i4c-badge--green]="g.status === 'ALLOWED'"
+                  [class.i4c-badge--red]="g.status === 'REJECTED' || g.status === 'COURT'"
+                  [class.i4c-badge--amber]="g.status === 'OPEN'"
+                  >{{ g.status }}</span
+                >
+                @if (g.decision) {
+                  <div class="sub">{{ g.decision_level }}: {{ decisionLabel(g.decision) }}</div>
+                }
+              </td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="8" class="i4c-empty">No grievances match these filters.</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+    <mat-paginator
+      class="i4c-paginator"
+      [length]="total"
+      [pageIndex]="pageIndex"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="pageSizes"
+      (page)="onPage($event)"
+      showFirstLastButtons
+      aria-label="Grievance pages"
+    ></mat-paginator>
+  </div>
+
+  @if (selected; as g) {
+    <div class="i4c-modal-backdrop" (click)="close()">
+      <div class="i4c-modal-window i4c-modal-window--wide" (click)="$event.stopPropagation()">
+        <div class="i4c-modal-header">
+          <div class="i4c-modal-header__title">
+            <fa-icon icon="balance-scale"></fa-icon>
+            <div>
+              <div class="modal-title-row">
+                <span>{{ g.grievance_no || 'Draft grievance #' + g.id }}</span>
+                <span class="i4c-badge">{{ stageLabel(g.stage) }}</span>
+                <span
+                  class="i4c-badge"
+                  [class.i4c-badge--green]="g.status === 'ALLOWED'"
+                  [class.i4c-badge--red]="g.status === 'REJECTED' || g.status === 'COURT'"
+                  >{{ g.status }}</span
+                >
+                @if (g.overdue || g.compliance_overdue) {
+                  <span class="i4c-badge i4c-badge--red">PAST DEADLINE</span>
+                }
+              </div>
+              <div class="i4c-modal-header__sub">
+                Account <b>{{ g.account_no }}</b> ({{ g.client_name }}) · Ack {{ g.acknowledgement_no }} · Held ₹{{
+                  g.amount_held | number: '1.2-2'
+                }}{{ g.debit_frozen ? ' · debits frozen' : '' }}
+              </div>
+            </div>
+          </div>
+          <div class="i4c-modal-header__actions">
+            <button class="modal-close-btn" (click)="close()" aria-label="Close">
+              <fa-icon icon="times"></fa-icon>
+            </button>
+          </div>
+        </div>
+
+        <div class="i4c-modal-tabs">
+          <button class="modal-tab" [class.modal-tab--active]="tab === 'workflow'" (click)="tab = 'workflow'">
+            <fa-icon icon="tasks"></fa-icon> Next step
+          </button>
+          <button class="modal-tab" [class.modal-tab--active]="tab === 'overview'" (click)="tab = 'overview'">
+            <fa-icon icon="info-circle"></fa-icon> Details &amp; EDD
+          </button>
+          <button class="modal-tab" [class.modal-tab--active]="tab === 'documents'" (click)="tab = 'documents'">
+            <fa-icon icon="paperclip"></fa-icon> Documents ({{ g.documents?.length || 0 }})
+          </button>
+          <button class="modal-tab" [class.modal-tab--active]="tab === 'history'" (click)="tab = 'history'">
+            <fa-icon icon="history"></fa-icon> History ({{ g.events?.length || 0 }})
+          </button>
+        </div>
+
+        <div class="i4c-modal-body">
+          <div class="flow">
+            @for (f of flow(g); track f.value; let last = $last) {
+              <span
+                class="flow__stage"
+                [class.flow__stage--done]="f.state === 'done'"
+                [class.flow__stage--now]="f.state === 'now'"
+                >{{ f.label }}</span
+              >
+              @if (!last) {
+                <span class="flow__arrow">›</span>
+              }
+            }
+          </div>
+
+          @if (tab === 'workflow') {
+            <div class="i4c-card">
+              <div class="i4c-card__body">
+                @if (g.stage === 'DRAFT') {
+                  @if (!g.edd_done) {
+                    <div class="step">
+                      <div class="step__title">1. Enhanced due diligence (before raising on GRM)</div>
+                      <div class="step__row">
+                        <mat-checkbox [(ngModel)]="edd.kycVerified">KYC re-verified</mat-checkbox>
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>Risk</mat-label>
+                          <mat-select [(ngModel)]="edd.risk">
+                            <mat-option value="LOW">Low</mat-option>
+                            <mat-option value="MEDIUM">Medium</mat-option>
+                            <mat-option value="HIGH">High</mat-option>
+                          </mat-select>
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>Bank's view</mat-label>
+                          <mat-select [(ngModel)]="edd.recommendation">
+                            <mat-option value="SUPPORT">Supports the request</mat-option>
+                            <mat-option value="NOT_SUPPORT">Does not support it</mat-option>
+                          </mat-select>
+                        </mat-form-field>
+                      </div>
+                      <mat-form-field appearance="outline" class="step__wide">
+                        <mat-label>Source of the disputed credit, as the customer explains it *</mat-label>
+                        <textarea matInput rows="2" [(ngModel)]="edd.sourceOfFunds" maxlength="2000"></textarea>
+                      </mat-form-field>
+                      <mat-form-field appearance="outline" class="step__wide">
+                        <mat-label>Customer's statement / notes</mat-label>
+                        <textarea matInput rows="2" [(ngModel)]="edd.customerStatement" maxlength="2000"></textarea>
+                      </mat-form-field>
+                      <div class="i4c-actions">
+                        <button mat-flat-button color="primary" (click)="saveEdd()" [disabled]="busy">
+                          <fa-icon icon="user-shield"></fa-icon> Save due diligence
+                        </button>
+                      </div>
+                    </div>
+                  } @else {
+                    <div class="step">
+                      <div class="step__title">2. Raise it on GRM, then record the GR id</div>
+                      <div class="sub">
+                        GRM's entry form needs the KYC document, the customer's application, a photograph and the bank
+                        statement. Attach them on the Documents tab (the statement can be downloaded from the hold).
+                      </div>
+                      @if (missingDocs(g).length) {
+                        <div class="i4c-note">Still to attach: {{ missingDocs(g).join(', ') }}</div>
+                      }
+                      <div class="step__row">
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>GR id from GRM *</mat-label>
+                          <input matInput [(ngModel)]="grievanceNo" maxlength="40" placeholder="GR003260316001" />
+                        </mat-form-field>
+                        <button
+                          mat-flat-button
+                          color="primary"
+                          (click)="submit()"
+                          [disabled]="busy || !grievanceNo.trim()"
+                        >
+                          <fa-icon icon="paper-plane"></fa-icon> Mark raised on GRM
+                        </button>
+                      </div>
+                    </div>
+                  }
+                }
+
+                @if (g.stage === 'NODAL_REVIEW') {
+                  <div class="step">
+                    <div class="step__title">Bank GRM nodal officer's decision</div>
+                    <mat-form-field appearance="outline" class="step__wide">
+                      <mat-label>Remarks (required to reject)</mat-label>
+                      <input matInput [(ngModel)]="remarks" maxlength="2000" />
+                    </mat-form-field>
+                    <div class="i4c-actions">
+                      <button mat-flat-button color="primary" (click)="nodal(true)" [disabled]="busy">
+                        <fa-icon icon="check"></fa-icon> Approved on GRM (to IO)
+                      </button>
+                      <button
+                        mat-stroked-button
+                        color="warn"
+                        (click)="nodal(false)"
+                        [disabled]="busy || !remarks.trim()"
+                      >
+                        <fa-icon icon="times"></fa-icon> Rejected by nodal
+                      </button>
+                    </div>
+                  </div>
+                }
+
+                @if (withOfficer && g.status === 'OPEN') {
+                  <div class="step">
+                    <div class="step__title">
+                      Decision of the {{ level }}
+                      @if (g.due_at) {
+                        <span class="deadline" [class.deadline--late]="isLate(g.due_at)">
+                          · due {{ g.due_at | date: 'dd MMM yyyy' }}</span
+                        >
+                      }
+                    </div>
+                    <div class="step__row">
+                      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="step__wide">
+                        <mat-label>Decision on GRM</mat-label>
+                        <mat-select [(ngModel)]="decision.decision">
+                          @for (d of decisions; track d.value) {
+                            <mat-option [value]="d.value">{{ d.label }}</mat-option>
+                          }
+                        </mat-select>
+                      </mat-form-field>
+                      @if (decision.decision === 'PARTIAL_HOLD') {
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>Amount to keep on hold (₹)</mat-label>
+                          <input matInput type="number" min="0" [(ngModel)]="decision.keepAmount" />
+                        </mat-form-field>
+                      }
+                      @if (decision.decision !== 'SEEK_INFO' && decision.decision !== 'REJECTED_CONTINUE') {
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>Order no. *</mat-label>
+                          <input matInput [(ngModel)]="decision.orderRef" maxlength="200" />
+                        </mat-form-field>
+                      }
+                      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                        <mat-label>Order / decision date</mat-label>
+                        <input matInput type="date" [(ngModel)]="decision.orderDate" />
+                      </mat-form-field>
+                    </div>
+                    <mat-form-field appearance="outline" class="step__wide">
+                      <mat-label
+                        >Remarks{{ decision.decision === 'REJECTED_CONTINUE' ? ' (reason given) *' : '' }}</mat-label
+                      >
+                      <input matInput [(ngModel)]="decision.remarks" maxlength="2000" />
+                    </mat-form-field>
+                    @if (decision.decision !== 'SEEK_INFO' && decision.decision !== 'REJECTED_CONTINUE') {
+                      <div class="sub">
+                        Attach the signed and stamped order copy (GRM order or IO order) on the Documents tab first.
+                      </div>
+                    }
+                    <div class="i4c-actions">
+                      <button mat-flat-button color="primary" (click)="decide()" [disabled]="busy">
+                        <fa-icon icon="gavel"></fa-icon> Record decision
+                      </button>
+                    </div>
+                  </div>
+
+                  <div class="step">
+                    <div class="step__title">Something else happened on GRM</div>
+                    <div class="step__row">
+                      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                        <mat-label>Event</mat-label>
+                        <mat-select [(ngModel)]="noteType">
+                          @for (n of noteEvents; track n.value) {
+                            <mat-option [value]="n.value">{{ n.label }}</mat-option>
+                          }
+                        </mat-select>
+                      </mat-form-field>
+                      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="step__wide">
+                        <mat-label>Remarks</mat-label>
+                        <input matInput [(ngModel)]="remarks" maxlength="2000" />
+                      </mat-form-field>
+                    </div>
+                    <div class="i4c-actions">
+                      <button mat-stroked-button (click)="note()" [disabled]="busy">
+                        <fa-icon icon="plus"></fa-icon> Add to history
+                      </button>
+                      @if (g.stage === 'WITH_IO') {
+                        <button mat-stroked-button (click)="investigation()" [disabled]="busy">
+                          <fa-icon icon="search"></fa-icon> IO is investigating (+15 days)
+                        </button>
+                      }
+                    </div>
+                  </div>
+                }
+
+                @if (g.status === 'REJECTED' && g.stage !== 'CLOSED') {
+                  <div class="step">
+                    <div class="step__title">Rejected by the {{ g.decision_level }}: {{ g.decision_remarks }}</div>
+                    <div class="sub">
+                      If the customer is not satisfied, the branch raises a review: IO → District GRO → State GRO (15
+                      days each); after the State GRO the customer may approach the jurisdictional court.
+                    </div>
+                    <mat-form-field appearance="outline" class="step__wide">
+                      <mat-label>Remarks</mat-label>
+                      <input matInput [(ngModel)]="remarks" maxlength="2000" />
+                    </mat-form-field>
+                    <div class="i4c-actions">
+                      <button mat-flat-button color="primary" (click)="escalate()" [disabled]="busy">
+                        <fa-icon icon="arrow-up"></fa-icon> {{ escalateLabel }}
+                      </button>
+                    </div>
+                  </div>
+                }
+
+                @if (g.status === 'ALLOWED' && g.stage !== 'CLOSED') {
+                  <div class="step">
+                    <div class="step__title">
+                      Order: {{ decisionLabel(g.decision) }}
+                      @if (g.decision_keep_amount !== null) {
+                        (keep ₹{{ g.decision_keep_amount | number: '1.2-2' }})
+                      }
+                      · {{ g.decision_order_ref }}
+                    </div>
+                    <div class="sub">
+                      Carry it out on the account by
+                      <span class="deadline" [class.deadline--late]="g.compliance_overdue">{{
+                        g.compliance_due_at | date: 'dd MMM yyyy, HH:mm'
+                      }}</span
+                      >. The change goes to a second officer for approval; the grievance closes when it is approved.
+                    </div>
+                    @if (g.actionRequest?.length) {
+                      <div class="sub">
+                        Request #{{ g.actionRequest[0].id }} ({{ g.actionRequest[0].action }}) is
+                        <b>{{ g.actionRequest[0].status }}</b>
+                        {{ g.actionRequest[0].failure_message || g.actionRequest[0].rejection_reason || '' }}
+                      </div>
+                    }
+                    @if (
+                      !g.actionRequest?.length ||
+                      g.actionRequest[0].status === 'REJECTED' ||
+                      g.actionRequest[0].status === 'FAILED'
+                    ) {
+                      <div class="i4c-actions">
+                        <button mat-flat-button color="warn" (click)="raiseAction()" [disabled]="busy">
+                          <fa-icon icon="hand-paper"></fa-icon> Raise the account change for approval
+                        </button>
+                      </div>
+                    }
+                  </div>
+                }
+
+                @if (g.stage === 'CLOSED') {
+                  <div class="i4c-note">This grievance is closed ({{ g.status }}).</div>
+                } @else {
+                  <div class="step">
+                    <div class="i4c-actions">
+                      <button mat-button color="warn" (click)="withdraw()" [disabled]="busy">
+                        Customer withdrew the grievance
+                      </button>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+
+          @if (tab === 'overview') {
+            <div class="grid-2">
+              <div class="i4c-card">
+                <div class="i4c-card__head"><fa-icon icon="user"></fa-icon> Customer's request</div>
+                <div class="i4c-card__body">
+                  <dl class="i4c-kv">
+                    <dt>Asks to</dt>
+                    <dd>{{ requestLabel(g.customer_request) }}</dd>
+                    <dt>Reason given</dt>
+                    <dd class="wrap">{{ g.customer_reason || '-' }}</dd>
+                    <dt>Opened</dt>
+                    <dd>{{ g.created_at | date: 'dd MMM yyyy, HH:mm' }} by {{ g.created_by }}</dd>
+                    <dt>Decision</dt>
+                    <dd>
+                      {{ g.decision ? g.decision_level + ': ' + decisionLabel(g.decision) : '-' }}
+                      @if (g.decision_order_ref) {
+                        <div class="sub">
+                          Order {{ g.decision_order_ref }} {{ g.decision_date | date: 'dd MMM yyyy' }}
+                        </div>
+                      }
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+              <div class="i4c-card">
+                <div class="i4c-card__head"><fa-icon icon="user-shield"></fa-icon> Enhanced due diligence</div>
+                <div class="i4c-card__body">
+                  @if (g.edd_done) {
+                    <dl class="i4c-kv">
+                      <dt>KYC re-verified</dt>
+                      <dd>{{ g.edd_kyc_verified ? 'Yes' : 'No' }}</dd>
+                      <dt>Source of funds</dt>
+                      <dd class="wrap">{{ g.edd_source_of_funds }}</dd>
+                      <dt>Statement</dt>
+                      <dd class="wrap">{{ g.edd_customer_statement || '-' }}</dd>
+                      <dt>Risk / view</dt>
+                      <dd>
+                        {{ g.edd_risk }} ·
+                        {{ g.edd_recommendation === 'SUPPORT' ? 'Bank supports' : 'Bank does not support' }}
+                      </dd>
+                      <dt>By</dt>
+                      <dd>{{ g.edd_by }}, {{ g.edd_at | date: 'dd MMM yyyy, HH:mm' }}</dd>
+                    </dl>
+                  } @else {
+                    <div class="i4c-note">Not done yet.</div>
+                  }
+                </div>
+              </div>
+            </div>
+          }
+
+          @if (tab === 'documents') {
+            <div class="i4c-card">
+              <div class="i4c-card__body">
+                <mifosx-i4c-documents
+                  ownerType="GRIEVANCE"
+                  [ownerId]="g.id"
+                  [required]="g.requiredDocuments || []"
+                  [suggested]="['GRM_ORDER', 'IO_ORDER', 'EDD_REPORT']"
+                  [documents]="g.documents"
+                  [canUpload]="g.stage !== 'CLOSED'"
+                  (changed)="open(g.id)"
+                ></mifosx-i4c-documents>
+              </div>
+            </div>
+          }
+
+          @if (tab === 'history') {
+            <div class="i4c-card">
+              <div class="i4c-table-wrap">
+                <table class="i4c-table">
+                  <thead>
+                    <tr>
+                      <th>When</th>
+                      <th>Event</th>
+                      <th>Stage</th>
+                      <th>Remarks</th>
+                      <th>By</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (e of g.events; track e.id) {
+                      <tr>
+                        <td>{{ e.created_at | date: 'dd MMM yyyy, HH:mm' }}</td>
+                        <td>
+                          <span class="i4c-badge">{{ e.event_type }}</span>
+                        </td>
+                        <td>{{ stageLabel(e.stage) }}</td>
+                        <td class="wrap">{{ e.remarks || '-' }}</td>
+                        <td>{{ e.actor }}</td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          }
+        </div>
+
+        <div class="i4c-modal-footer">
+          <button class="footer-btn-close" (click)="close()">Close</button>
+        </div>
+      </div>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-grievances/i4c-grievances.component.scss

@@ -0,0 +1,13 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+@use '../i4c-cases' as *;
+
+@include i4c-skin;
+@include i4c-case-page;

src/app/cfcfrms/i4c/i4c-grievances/i4c-grievances.component.ts

@@ -0,0 +1,359 @@
+/**
+ * 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 { DatePipe, DecimalPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { I4cService, i4cErrorMessage } from '../i4c.service';
+import { ALL_DATES, I4cDateRange, I4cDateRangeComponent } from '../i4c-date-range/i4c-date-range.component';
+import { I4cDocumentsComponent } from '../i4c-documents/i4c-documents.component';
+
+export const GRM_STAGES: { value: string; label: string }[] = [
+  { value: 'DRAFT', label: 'Draft (EDD)' },
+  { value: 'NODAL_REVIEW', label: 'Bank nodal review' },
+  { value: 'WITH_IO', label: 'With IO (7 days)' },
+  { value: 'IO_INVESTIGATION', label: 'IO investigating (15 days)' },
+  { value: 'WITH_DGRO', label: 'District GRO review (15 days)' },
+  { value: 'WITH_SGRO', label: 'State GRO review (15 days)' },
+  { value: 'CLOSED', label: 'Closed' }
+];
+
+export const GRM_DECISIONS: { value: string; label: string }[] = [
+  { value: 'REMOVE_HOLD', label: 'Remove put on hold' },
+  { value: 'UNFREEZE_HOLD_CONTINUES', label: 'Unfreeze the account, hold continues' },
+  { value: 'UNFREEZE_AND_REMOVE_HOLD', label: 'Unfreeze and remove put on hold' },
+  { value: 'PARTIAL_HOLD', label: 'Keep a smaller amount on hold' },
+  { value: 'REJECTED_CONTINUE', label: 'Request rejected, hold / freeze continues' },
+  { value: 'SEEK_INFO', label: 'Seek additional information' }
+];
+
+const REQUESTS: Record<string, string> = {
+  REMOVE_HOLD: 'Remove the hold',
+  UNFREEZE: 'Unfreeze the account',
+  RESTORE_DIGITAL_SERVICES: 'Restore digital services'
+};
+
+/**
+ * GRM grievances raised by the bank for account holders who contest an I4C hold: EDD, raising on GRM, the IO / DGRO /
+ * SGRO decision with its deadlines, escalation, and carrying an allowing order out on the account.
+ */
+@Component({
+  selector: 'mifosx-i4c-grievances',
+  templateUrl: './i4c-grievances.component.html',
+  styleUrls: ['./i4c-grievances.component.scss'],
+  imports: [
+    DatePipe,
+    DecimalPipe,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatProgressBarModule,
+    MatPaginatorModule,
+    FaIconComponent,
+    I4cDateRangeComponent,
+    I4cDocumentsComponent
+  ]
+})
+export class I4cGrievancesComponent implements OnInit {
+  private i4c = inject(I4cService);
+  private route = inject(ActivatedRoute);
+  private snackBar = inject(MatSnackBar);
+
+  readonly stages = GRM_STAGES;
+  readonly decisions = GRM_DECISIONS;
+  readonly noteEvents = [
+    { value: 'VC_REQUESTED', label: 'IO requested a VC' },
+    { value: 'VC_DONE', label: 'VC held' },
+    { value: 'VC_NOT_REQUIRED', label: 'VC not required' },
+    { value: 'INFO_SOUGHT', label: 'Additional information sought' },
+    { value: 'INFO_SENT', label: 'Information sent' },
+    { value: 'NOTE', label: 'Note' }
+  ];
+  readonly pageSizes = [
+    10,
+    20,
+    50,
+    100
+  ];
+
+  stage = 'OPEN';
+  status = '';
+  overdueOnly = false;
+  search = '';
+  dates: I4cDateRange = { ...ALL_DATES };
+  rows: any[] = [];
+  total = 0;
+  pageIndex = 0;
+  pageSize = 20;
+  loading = false;
+  error = '';
+
+  selected: any = null;
+  busy = false;
+  tab: 'overview' | 'workflow' | 'documents' | 'history' = 'workflow';
+  edd = { kycVerified: true, sourceOfFunds: '', customerStatement: '', risk: 'LOW', recommendation: 'SUPPORT' };
+  grievanceNo = '';
+  remarks = '';
+  noteType = 'VC_REQUESTED';
+  decision = { decision: 'REMOVE_HOLD', keepAmount: null as number | null, orderRef: '', orderDate: '', remarks: '' };
+
+  ngOnInit(): void {
+    const open = Number(this.route.snapshot.queryParamMap.get('open'));
+    this.load();
+    if (open) {
+      this.open(open);
+    }
+  }
+
+  load(fromFirstPage = false): void {
+    if (fromFirstPage) {
+      this.pageIndex = 0;
+    }
+    this.loading = true;
+    this.error = '';
+    this.i4c
+      .grievances({
+        stage: this.stage,
+        status: this.status,
+        overdue: this.overdueOnly || null,
+        search: this.search.trim(),
+        fromDate: this.dates.fromDate,
+        toDate: this.dates.toDate,
+        offset: this.pageIndex * this.pageSize,
+        limit: this.pageSize
+      })
+      .subscribe({
+        next: (page) => {
+          this.rows = page.pageItems;
+          this.total = page.totalFilteredRecords;
+          this.loading = false;
+        },
+        error: (e) => {
+          this.error = i4cErrorMessage(e);
+          this.loading = false;
+        }
+      });
+  }
+
+  setStage(s: string): void {
+    this.stage = s;
+    this.load(true);
+  }
+
+  onPage(e: PageEvent): void {
+    this.pageIndex = e.pageIndex;
+    this.pageSize = e.pageSize;
+    this.load();
+  }
+
+  onDates(range: I4cDateRange): void {
+    this.dates = range;
+    this.load(true);
+  }
+
+  get hasFilters(): boolean {
+    return !!(this.status || this.overdueOnly || this.search || this.dates.preset !== 'ALL' || this.stage !== 'OPEN');
+  }
+
+  clearFilters(): void {
+    this.stage = 'OPEN';
+    this.status = '';
+    this.overdueOnly = false;
+    this.search = '';
+    this.dates = { ...ALL_DATES };
+    this.load(true);
+  }
+
+  open(id: number): void {
+    this.i4c.grievance(id).subscribe({
+      next: (g) => {
+        const same = this.selected?.id === g.id;
+        this.selected = g;
+        if (!same) {
+          this.tab = 'workflow';
+          this.remarks = '';
+          this.grievanceNo = g.grievance_no || '';
+          this.decision = { decision: 'REMOVE_HOLD', keepAmount: null, orderRef: '', orderDate: '', remarks: '' };
+        }
+      },
+      error: (e) => this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 })
+    });
+  }
+
+  close(): void {
+    this.selected = null;
+  }
+
+  stageLabel(s: string): string {
+    return GRM_STAGES.find((x) => x.value === s)?.label || s;
+  }
+
+  decisionLabel(d: string): string {
+    return GRM_DECISIONS.find((x) => x.value === d)?.label || d;
+  }
+
+  requestLabel(r: string): string {
+    return REQUESTS[r] || r;
+  }
+
+  /** The stages on the way, for the little progress line; escalation stages show only once reached. */
+  flow(g: any): { value: string; label: string; state: 'done' | 'now' | 'todo' }[] {
+    const path = [
+      'DRAFT',
+      'NODAL_REVIEW',
+      'WITH_IO',
+      'IO_INVESTIGATION',
+      'WITH_DGRO',
+      'WITH_SGRO',
+      'CLOSED'
+    ];
+    const at = path.indexOf(g.stage);
+    const visible = path.filter((s, i) => i <= Math.max(at, 3) || s === 'CLOSED' || i <= at);
+    return visible.map((s) => ({
+      value: s,
+      label: (GRM_STAGES.find((x) => x.value === s)?.label || s).replace(/ \(.*\)/, ''),
+      state: path.indexOf(s) < at ? 'done' : s === g.stage ? 'now' : 'todo'
+    }));
+  }
+
+  get level(): string {
+    const s = this.selected?.stage;
+    return s === 'WITH_DGRO' ? 'DGRO' : s === 'WITH_SGRO' ? 'SGRO' : 'IO';
+  }
+
+  get withOfficer(): boolean {
+    return [
+      'WITH_IO',
+      'IO_INVESTIGATION',
+      'WITH_DGRO',
+      'WITH_SGRO'
+    ].includes(this.selected?.stage);
+  }
+
+  isLate(ts: string | null): boolean {
+    return !!ts && new Date(ts).getTime() < Date.now();
+  }
+
+  step(step: string, body: Record<string, any>, done: string): void {
+    if (!this.selected) {
+      return;
+    }
+    this.busy = true;
+    this.i4c.grievanceStep(this.selected.id, step, body).subscribe({
+      next: (g) => {
+        this.busy = false;
+        this.selected = g;
+        this.remarks = '';
+        this.snackBar.open(done, 'OK', { duration: 4000 });
+        this.load();
+      },
+      error: (e) => {
+        this.busy = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 7000 });
+      }
+    });
+  }
+
+  saveEdd(): void {
+    this.step('edd', this.edd, 'Due diligence recorded.');
+  }
+
+  submit(): void {
+    this.step('submit', { grievanceNo: this.grievanceNo.trim() }, 'Grievance marked as raised on GRM.');
+  }
+
+  nodal(approve: boolean): void {
+    this.step(
+      'nodal',
+      { approve, remarks: this.remarks },
+      approve ? 'Approved; now with the IO (7 days).' : 'Grievance rejected by the nodal officer.'
+    );
+  }
+
+  note(): void {
+    this.step('events', { eventType: this.noteType, remarks: this.remarks }, 'Noted.');
+  }
+
+  investigation(): void {
+    this.step('investigation', { remarks: this.remarks }, 'IO investigation recorded (15 days).');
+  }
+
+  decide(): void {
+    this.step(
+      'decision',
+      {
+        level: this.level,
+        decision: this.decision.decision,
+        keepAmount: this.decision.decision === 'PARTIAL_HOLD' ? this.decision.keepAmount : null,
+        orderRef: this.decision.orderRef,
+        orderDate: this.decision.orderDate || null,
+        remarks: this.decision.remarks
+      },
+      'Decision recorded.'
+    );
+  }
+
+  escalate(): void {
+    this.step('escalate', { remarks: this.remarks }, 'Escalated.');
+  }
+
+  withdraw(): void {
+    this.step('withdraw', { remarks: this.remarks }, 'Grievance withdrawn.');
+  }
+
+  raiseAction(): void {
+    if (!this.selected) {
+      return;
+    }
+    this.busy = true;
+    this.i4c.raiseGrievanceAction(this.selected.id).subscribe({
+      next: (r) => {
+        this.busy = false;
+        this.snackBar.open(
+          r.actionRequestId
+            ? 'Request ' + r.actionRequestId + ' raised. Another officer approves it on the Approvals page.'
+            : 'Nothing to change on the account; grievance closed.',
+          'OK',
+          { duration: 6000 }
+        );
+        this.open(this.selected.id);
+        this.load();
+      },
+      error: (e) => {
+        this.busy = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 7000 });
+      }
+    });
+  }
+
+  missingDocs(g: any): string[] {
+    return (g.requiredDocuments || []).filter((t: string) => !(g.documents || []).some((d: any) => d.doc_type === t));
+  }
+
+  get escalateLabel(): string {
+    const s = this.selected?.stage;
+    return s === 'WITH_SGRO'
+      ? 'Close: customer may approach the court'
+      : s === 'WITH_DGRO'
+        ? 'Escalate to State GRO'
+        : 'Escalate to District GRO';
+  }
+}

src/app/cfcfrms/i4c/i4c-holds/i4c-holds.component.html

@@ -0,0 +1,794 @@
+<!--
+  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="i4c-page">
+  <!-- Modern Toolbar & Filter Chips -->
+  <div class="i4c-toolbar">
+    <div class="i4c-filter-chips">
+      @for (v of views; track v.value) {
+        <button class="filter-chip" [class.filter-chip--active]="view === v.value" (click)="setView(v.value)">
+          <span>{{ v.label }}</span>
+        </button>
+      }
+    </div>
+
+    <span class="i4c-toolbar__spacer"></span>
+
+    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="search-input">
+      <mat-label>Account / acknowledgement / customer</mat-label>
+      <input matInput [(ngModel)]="search" (keyup.enter)="load(true)" placeholder="Type & hit enter..." />
+    </mat-form-field>
+
+    <button mat-flat-button color="primary" class="search-btn" (click)="load(true)">
+      <fa-icon icon="search"></fa-icon> Search
+    </button>
+
+    <span class="count-tag">{{ total }} holds</span>
+  </div>
+
+  <div class="i4c-filter-bar">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Account type</mat-label>
+      <mat-select [(ngModel)]="accountType" (selectionChange)="load(true)">
+        <mat-option value="">All accounts</mat-option>
+        <mat-option value="SAVINGS">Savings</mat-option>
+        <mat-option value="CURRENT">Current</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Customer intimation</mat-label>
+      <mat-select [(ngModel)]="intimationFilter" (selectionChange)="load(true)">
+        <mat-option value="">Any</mat-option>
+        <mat-option value="DONE">Customer told</mat-option>
+        <mat-option value="PENDING">Not yet told</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Layer</mat-label>
+      <mat-select [(ngModel)]="layer" (selectionChange)="load(true)">
+        <mat-option value="">All layers</mat-option>
+        <mat-option value="0">Layer 0</mat-option>
+        <mat-option value="1">Layer 1+</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-checkbox [(ngModel)]="frozenOnly" (change)="load(true)">Debits frozen only</mat-checkbox>
+    <mifosx-i4c-date-range label="Held on" [range]="dates" (rangeChange)="onDates($event)"></mifosx-i4c-date-range>
+    <button mat-stroked-button class="i4c-filter-bar__clear" (click)="clearFilters()" [disabled]="!hasFilters">
+      <fa-icon icon="times"></fa-icon> Clear filters
+    </button>
+  </div>
+
+  @if (loading || busy) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">
+      <fa-icon icon="exclamation-circle"></fa-icon>
+      <span>{{ error }}</span>
+    </div>
+  }
+
+  <!-- Holds Register Table -->
+  <div class="i4c-card">
+    <div class="i4c-card__head">
+      <fa-icon icon="lock"></fa-icon>
+      <span>I4C Account Holds Register</span>
+      <span class="head-hint">Only disputed amounts are restricted; remaining balance stays usable by customer.</span>
+    </div>
+
+    <div class="i4c-table-wrap">
+      <table class="i4c-table">
+        <thead>
+          <tr>
+            <th>Customer Account</th>
+            <th>Account Holder / Branch</th>
+            <th>Ack No.</th>
+            <th class="num">Layer</th>
+            <th class="num">Disputed (₹)</th>
+            <th class="num">Held (₹)</th>
+            <th class="num">Short (₹)</th>
+            <th>Hold Status</th>
+            <th>Customer Intimation</th>
+            <th>90-Day Review</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (h of rows; track h.id) {
+            <tr class="clickable" (click)="select(h.id)">
+              <td>
+                <div class="acc-cell">
+                  <b>{{ h.account_no }}</b>
+                  <span class="type-tag">{{ h.account_type }}</span>
+                </div>
+              </td>
+              <td>
+                <div class="client-name">{{ h.client_name || 'N/A' }}</div>
+                <div class="sub">{{ h.office_name }}</div>
+              </td>
+              <td>
+                <div class="ack-cell">
+                  <span class="ack-no">{{ h.acknowledgement_no }}</span>
+                  <button
+                    class="copy-chip"
+                    (click)="copyText(h.acknowledgement_no, 'ack-' + h.id, $event)"
+                    title="Copy Ack No."
+                  >
+                    <fa-icon icon="copy"></fa-icon>
+                  </button>
+                </div>
+              </td>
+              <td class="num font-semibold">{{ h.layer }}</td>
+              <td class="num">₹{{ h.disputed_amount | number: '1.2-2' }}</td>
+              <td class="num font-bold text-accent">₹{{ h.amount_held | number: '1.2-2' }}</td>
+              <td class="num">
+                @if (h.shortfall > 0) {
+                  <span class="short-pill">₹{{ h.shortfall | number: '1.2-2' }}</span>
+                } @else {
+                  <span class="text-muted">-</span>
+                }
+              </td>
+              <td>
+                <span class="i4c-badge" [class]="statusClass(h)">{{ h.status }}</span>
+                @if (h.debit_frozen) {
+                  <span class="i4c-badge i4c-badge--red">DEBIT FROZEN</span>
+                }
+                @if (h.pending_actions) {
+                  <span class="i4c-badge i4c-badge--purple">APPROVAL PENDING</span>
+                }
+              </td>
+              <td>
+                @if (h.customer_intimated_at) {
+                  <span class="intimation-ok">
+                    <fa-icon icon="check-circle"></fa-icon>
+                    <span>{{ h.customer_intimated_at | date: 'dd MMM' }} ({{ h.intimation_mode }})</span>
+                  </span>
+                } @else if (isOverdue(h)) {
+                  <span class="i4c-badge i4c-badge--red">OVERDUE</span>
+                } @else if (h.amount_held > 0 && h.status === 'ACTIVE') {
+                  <span class="i4c-badge i4c-badge--amber">INTIMATION DUE</span>
+                } @else {
+                  <span class="text-muted">-</span>
+                }
+              </td>
+              <td>
+                <span [class.due-alert]="isReviewDue(h)" class="review-date">
+                  @if (isReviewDue(h)) {
+                    <fa-icon icon="exclamation-circle"></fa-icon>
+                  }
+                  {{ h.review_due_on }}
+                </span>
+              </td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="10" class="i4c-empty">
+                <div class="empty-icon"><fa-icon icon="lock"></fa-icon></div>
+                <div>No holds found in this view.</div>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+    <mat-paginator
+      class="i4c-paginator"
+      [length]="total"
+      [pageIndex]="pageIndex"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="pageSizes"
+      (page)="onPage($event)"
+      showFirstLastButtons
+      aria-label="Holds pages"
+    ></mat-paginator>
+  </div>
+
+  <!-- ========================================================
+       MODERN POPUP WINDOW: HOLD DETAILS & MAKER ACTIONS MODAL
+       ======================================================== -->
+  @if (selected; as h) {
+    <div class="i4c-modal-backdrop" (click)="close()">
+      <div class="i4c-modal-window i4c-modal-window--wide" (click)="$event.stopPropagation()">
+        <!-- Modal Header -->
+        <div class="i4c-modal-header">
+          <div class="i4c-modal-header__title">
+            <fa-icon icon="lock"></fa-icon>
+            <div>
+              <div class="modal-title-row">
+                <span>Hold #{{ h.id }} on Account {{ h.account_no }}</span>
+                <span class="i4c-badge" [class]="statusClass(h)">{{ h.status }}</span>
+                @if (h.debit_frozen) {
+                  <span class="i4c-badge i4c-badge--red">DEBIT FROZEN</span>
+                }
+                @if (hasPendingAction) {
+                  <span class="i4c-badge i4c-badge--purple">APPROVAL PENDING</span>
+                }
+              </div>
+              <div class="i4c-modal-header__sub">
+                Customer: <b>{{ h.client_name || 'N/A' }}</b> ({{ h.office_name }}) • Ack: {{ h.acknowledgement_no }}
+              </div>
+            </div>
+          </div>
+          <div class="i4c-modal-header__actions">
+            <button class="modal-close-btn" (click)="close()" aria-label="Close">
+              <fa-icon icon="times"></fa-icon>
+            </button>
+          </div>
+        </div>
+
+        <!-- Navigation Tabs inside the Modal -->
+        <div class="i4c-modal-tabs">
+          <button class="modal-tab" [class.modal-tab--active]="modalTab === 'overview'" (click)="modalTab = 'overview'">
+            <fa-icon icon="info-circle"></fa-icon> Overview &amp; Compliance
+          </button>
+          <button class="modal-tab" [class.modal-tab--active]="modalTab === 'txns'" (click)="modalTab = 'txns'">
+            <fa-icon icon="table"></fa-icon> Hold Transactions ({{ h.transactions?.length || 0 }})
+          </button>
+          @if ((h.status === 'ACTIVE' && h.amount_held > 0) || h.intimationLog?.length) {
+            <button
+              class="modal-tab"
+              [class.modal-tab--active]="modalTab === 'intimation'"
+              (click)="modalTab = 'intimation'"
+            >
+              <fa-icon icon="bell"></fa-icon> Customer Intimation
+              @if (!h.customer_intimated_at && h.status === 'ACTIVE' && h.amount_held > 0) {
+                <span class="i4c-badge i4c-badge--amber">Pending</span>
+              }
+            </button>
+          }
+          @if (allowedActions.length > 0) {
+            <button class="modal-tab" [class.modal-tab--active]="modalTab === 'action'" (click)="modalTab = 'action'">
+              <fa-icon icon="hand-paper"></fa-icon> Request Action (Maker)
+            </button>
+          }
+          <button class="modal-tab" [class.modal-tab--active]="modalTab === 'cases'" (click)="modalTab = 'cases'">
+            <fa-icon icon="balance-scale"></fa-icon> GRM / MRM &amp; Documents
+            @if (openGrievance || openRestoration) {
+              <span class="i4c-badge i4c-badge--amber">Open</span>
+            }
+          </button>
+          @if (h.actions?.length) {
+            <button class="modal-tab" [class.modal-tab--active]="modalTab === 'history'" (click)="modalTab = 'history'">
+              <fa-icon icon="history"></fa-icon> Request Audit ({{ h.actions.length }})
+            </button>
+          }
+        </div>
+
+        <!-- Modal Body -->
+        <div class="i4c-modal-body">
+          <!-- TAB 1: OVERVIEW -->
+          @if (modalTab === 'overview') {
+            <div class="i4c-grid-2">
+              <div class="i4c-card">
+                <div class="i4c-card__head"><fa-icon icon="shield-alt"></fa-icon> Hold Balances &amp; Account</div>
+                <div class="i4c-card__body">
+                  <dl class="i4c-kv">
+                    <dt>Customer Name</dt>
+                    <dd>{{ h.client_name || '-' }} ({{ h.office_name }})</dd>
+
+                    <dt>Account Number</dt>
+                    <dd>
+                      <b>{{ h.account_no }}</b> ({{ h.account_type }})
+                    </dd>
+
+                    <dt>I4C Complaint Ack</dt>
+                    <dd>
+                      <a [routerLink]="['../requests', h.request_id]" (click)="close()">{{ h.acknowledgement_no }}</a>
+                      (Layer {{ h.layer }})
+                    </dd>
+
+                    <dt>Disputed Amount</dt>
+                    <dd>₹{{ h.disputed_amount | number: '1.2-2' }}</dd>
+
+                    <dt>Amount Held</dt>
+                    <dd>
+                      <b class="amount-held-text">₹{{ h.amount_held | number: '1.2-2' }}</b>
+                    </dd>
+
+                    <dt>Shortfall</dt>
+                    <dd>
+                      @if (h.shortfall > 0) {
+                        <span class="err-text">₹{{ h.shortfall | number: '1.2-2' }} (Prospective hold)</span>
+                      } @else {
+                        <span>Fully covered (₹0.00)</span>
+                      }
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+
+              <div class="i4c-card">
+                <div class="i4c-card__head"><fa-icon icon="calendar-check"></fa-icon> Compliance &amp; Directions</div>
+                <div class="i4c-card__body">
+                  <dl class="i4c-kv">
+                    <dt>Hold Placed On</dt>
+                    <dd>{{ h.held_at | date: 'dd MMM yyyy, HH:mm:ss' }} (System automated)</dd>
+
+                    <dt>90-Day Review Due</dt>
+                    <dd>
+                      <span [class.due-alert]="isReviewDue(h)">{{ h.review_due_on }}</span>
+                    </dd>
+
+                    <dt>Debit Freeze Status</dt>
+                    <dd>
+                      @if (h.debit_frozen) {
+                        <span class="i4c-badge i4c-badge--red">FROZEN</span>
+                      } @else {
+                        <span>Active (Debit Not Frozen)</span>
+                      }
+                    </dd>
+
+                    <dt>Customer Intimation</dt>
+                    <dd>
+                      @if (h.customer_intimated_at) {
+                        <span class="intimation-ok">
+                          {{ h.customer_intimated_at | date: 'dd MMM yyyy, HH:mm' }} by {{ h.intimated_by }} ({{
+                            h.intimation_mode
+                          }}{{ h.intimation_reference ? ', ' + h.intimation_reference : '' }})
+                        </span>
+                      } @else {
+                        <span class="err-text">
+                          Not told yet{{
+                            h.intimation_due_by ? ' - due by ' + (h.intimation_due_by | date: 'dd MMM yyyy, HH:mm') : ''
+                          }}
+                        </span>
+                      }
+                    </dd>
+
+                    @if (h.status === 'RELEASED') {
+                      <dt>Released On</dt>
+                      <dd>
+                        {{ h.released_at | date: 'dd MMM yyyy, HH:mm' }} -
+                        {{ reasonLabel(h.release_reason_type || '') }}
+                        {{ h.release_reference }}
+                      </dd>
+                    }
+                  </dl>
+                </div>
+              </div>
+            </div>
+          }
+
+          <!-- TAB 2: TRANSACTIONS -->
+          @if (modalTab === 'txns') {
+            <div class="i4c-card">
+              <div class="i4c-card__head"><fa-icon icon="table"></fa-icon> Account Hold Transactions</div>
+              <div class="i4c-card__body i4c-table-wrap">
+                <table class="i4c-table">
+                  <thead>
+                    <tr>
+                      <th>Account Txn ID</th>
+                      <th class="num">Held Amount (₹)</th>
+                      <th>Placed Timestamp</th>
+                      <th>Released Timestamp</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (t of h.transactions; track t.id) {
+                      <tr>
+                        <td>
+                          <b>{{ t.account_txn_id }}</b>
+                        </td>
+                        <td class="num">₹{{ t.amount | number: '1.2-2' }}</td>
+                        <td>{{ t.placed_at | date: 'dd MMM yyyy, HH:mm' }}</td>
+                        <td>{{ t.released_at ? (t.released_at | date: 'dd MMM yyyy, HH:mm') : '-' }}</td>
+                      </tr>
+                    } @empty {
+                      <tr>
+                        <td colspan="4" class="i4c-empty">
+                          No money held yet (prospective hold waiting for funds deposit).
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          }
+
+          <!-- TAB 3: CUSTOMER INTIMATION (automatic channels, manual record, history) -->
+          @if (modalTab === 'intimation') {
+            @if (h.customer_intimated_at) {
+              <div class="intim-status intim-status--done">
+                <fa-icon icon="check"></fa-icon>
+                <div>
+                  <b>Customer told</b> on {{ h.customer_intimated_at | date: 'dd MMM yyyy, HH:mm' }} by
+                  {{ channelLabel(h.intimation_mode || '')
+                  }}{{ h.intimation_reference ? ' - ' + h.intimation_reference : '' }} ({{ h.intimated_by }})
+                </div>
+              </div>
+            } @else if (h.automaticChannels?.length) {
+              <div class="intim-status intim-status--auto">
+                <fa-icon icon="paper-plane"></fa-icon>
+                <div>
+                  <b>Automatic intimation is on</b> ({{ autoChannelsText(h) }}).
+                  @if (h.intimationLog?.length) {
+                    The last automatic attempt did not reach the customer; the system retries up to 3 times. You can
+                    send again now, or call the customer and record it below.
+                  } @else {
+                    The notice is sent as soon as the hold is placed. If it has not gone yet, send it now.
+                  }
+                </div>
+                <button mat-flat-button color="primary" (click)="sendIntimationNow()" [disabled]="busy">
+                  <fa-icon icon="paper-plane"></fa-icon> Send now
+                </button>
+              </div>
+            } @else {
+              <div class="intim-status intim-status--manual">
+                <fa-icon icon="phone"></fa-icon>
+                <div>
+                  <b>No automatic channel is configured.</b> Call the customer (or send a letter / meet in person), then
+                  record it below. Channels are switched on under Intimation Settings.
+                </div>
+              </div>
+            }
+
+            @if (!h.customer_intimated_at && h.status === 'ACTIVE' && h.amount_held > 0) {
+              <div class="i4c-card">
+                <div class="i4c-card__head"><fa-icon icon="bell"></fa-icon> Record Customer Intimation (manual)</div>
+                <div class="i4c-card__body">
+                  <div class="i4c-note">
+                    RBI draft directions mandate that the account holder be notified of an account hold by the end of
+                    the next day, including reason, restoration options, and Grievance Officer contacts.
+                  </div>
+                  <div class="i4c-form">
+                    <mat-form-field appearance="outline">
+                      <mat-label>How the customer was told</mat-label>
+                      <mat-select [(ngModel)]="intimation.mode">
+                        @for (m of intimationModes; track m) {
+                          <mat-option [value]="m">{{ channelLabel(m) }}</mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+
+                    <mat-form-field appearance="outline">
+                      <mat-label>Reference (call note, letter no.)</mat-label>
+                      <input
+                        matInput
+                        [(ngModel)]="intimation.reference"
+                        maxlength="200"
+                        placeholder="e.g. Called 98xxxx1234, customer informed"
+                      />
+                    </mat-form-field>
+                  </div>
+                  <button mat-flat-button color="primary" (click)="submitIntimation()" [disabled]="busy">
+                    <fa-icon icon="bell"></fa-icon> Record Customer Intimation
+                  </button>
+                </div>
+              </div>
+            }
+
+            <div class="i4c-card">
+              <div class="i4c-card__head">
+                <fa-icon icon="history"></fa-icon> Intimation History ({{ h.intimationLog?.length || 0 }})
+              </div>
+              <div class="i4c-card__body">
+                <table class="i4c-table">
+                  <thead>
+                    <tr>
+                      <th>When</th>
+                      <th>Channel</th>
+                      <th>Type</th>
+                      <th>Status</th>
+                      <th>Sent to</th>
+                      <th>Reference / Reason</th>
+                      <th>By</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (l of h.intimationLog || []; track l.id) {
+                      <tr>
+                        <td>{{ l.created_at | date: 'dd MMM yyyy, HH:mm' }}</td>
+                        <td>{{ channelLabel(l.channel) }}</td>
+                        <td>
+                          {{ l.mode === 'AUTO' ? 'Automatic' : l.mode === 'RESEND' ? 'Sent by officer' : 'Recorded' }}
+                        </td>
+                        <td>
+                          <span
+                            class="i4c-badge"
+                            [class.i4c-badge--green]="
+                              l.status === 'SENT' || l.status === 'DELIVERED' || l.status === 'RECORDED'
+                            "
+                            [class.i4c-badge--red]="l.status === 'FAILED'"
+                            [class.i4c-badge--amber]="l.status === 'SKIPPED_NO_DESTINATION'"
+                            >{{ l.status }}</span
+                          >
+                        </td>
+                        <td>{{ l.destination_masked || '-' }}</td>
+                        <td class="wrap">{{ l.failure_reason || l.provider_reference || '-' }}</td>
+                        <td>{{ l.actor || '-' }}</td>
+                      </tr>
+                    } @empty {
+                      <tr>
+                        <td colspan="7" class="i4c-empty">No notice sent or recorded yet.</td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          }
+
+          <!-- TAB 4: MAKER CHANGE REQUEST FORM -->
+          @if (modalTab === 'action') {
+            <div class="i4c-card">
+              <div class="i4c-card__head"><fa-icon icon="hand-paper"></fa-icon> Raise Request on Hold (Maker)</div>
+              <div class="i4c-card__body">
+                @if (hasPendingAction) {
+                  <div class="i4c-note">
+                    A request on this hold is already waiting for checker approval on the Approvals page.
+                  </div>
+                } @else {
+                  <div class="i4c-form">
+                    <mat-form-field appearance="outline">
+                      <mat-label>Requested Action</mat-label>
+                      <mat-select [(ngModel)]="action.action">
+                        @for (a of allowedActions; track a.value) {
+                          <mat-option [value]="a.value">{{ a.label }}</mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+
+                    @if (action.action === 'RELEASE') {
+                      <mat-form-field appearance="outline">
+                        <mat-label>Amount to release (₹, empty = all)</mat-label>
+                        <input matInput type="number" min="0" [max]="h.amount_held" [(ngModel)]="action.amount" />
+                        @if (remainingAfterRelease !== null) {
+                          <mat-hint
+                            >₹{{ remainingAfterRelease | number: '1.2-2' }} stays on hold (order names the amount to
+                            keep)</mat-hint
+                          >
+                        }
+                      </mat-form-field>
+                    }
+
+                    <mat-form-field appearance="outline">
+                      <mat-label>Reason</mat-label>
+                      <mat-select [(ngModel)]="action.reasonType">
+                        @for (r of reasonTypes; track r.value) {
+                          <mat-option [value]="r.value">{{ r.label }}</mat-option>
+                        }
+                      </mat-select>
+                    </mat-form-field>
+
+                    <mat-form-field appearance="outline">
+                      <mat-label>Order / Reference No.{{ orderRequired ? ' *' : '' }}</mat-label>
+                      <input
+                        matInput
+                        [(ngModel)]="action.orderReference"
+                        maxlength="200"
+                        placeholder="IO / Court reference..."
+                      />
+                    </mat-form-field>
+
+                    <mat-form-field appearance="outline">
+                      <mat-label>Order Date</mat-label>
+                      <input matInput type="date" [(ngModel)]="action.orderDate" />
+                    </mat-form-field>
+
+                    <mat-form-field appearance="outline">
+                      <mat-label>Issuing Authority (IO, Court, DGRO...)</mat-label>
+                      <input
+                        matInput
+                        [(ngModel)]="action.authority"
+                        maxlength="200"
+                        placeholder="e.g. Cyber Cell IO..."
+                      />
+                    </mat-form-field>
+
+                    <mat-form-field appearance="outline">
+                      <mat-label>Maker Remarks</mat-label>
+                      <input
+                        matInput
+                        [(ngModel)]="action.remarks"
+                        maxlength="1000"
+                        placeholder="Notes for checker..."
+                      />
+                    </mat-form-field>
+                  </div>
+                  <button mat-flat-button color="warn" (click)="submitAction()" [disabled]="busy">
+                    <fa-icon icon="hand-paper"></fa-icon> Submit for Checker Approval
+                  </button>
+                }
+              </div>
+            </div>
+          }
+
+          <!-- TAB: GRM grievance, MRM restoration, statement and documents of this hold -->
+          @if (modalTab === 'cases') {
+            <div class="cases-grid">
+              <div class="i4c-card">
+                <div class="i4c-card__head">
+                  <fa-icon icon="balance-scale"></fa-icon> GRM grievance (customer contests the hold)
+                </div>
+                <div class="i4c-card__body">
+                  @for (g of h.grievances || []; track g.id) {
+                    <div
+                      class="case-row"
+                      (click)="goTo('grievances', g.id)"
+                      (keyup.enter)="goTo('grievances', g.id)"
+                      tabindex="0"
+                    >
+                      <b>{{ g.grievance_no || 'Draft #' + g.id }}</b>
+                      <span class="i4c-badge">{{ g.stage }}</span>
+                      <span
+                        class="i4c-badge"
+                        [class.i4c-badge--green]="g.status === 'ALLOWED'"
+                        [class.i4c-badge--red]="g.status === 'REJECTED'"
+                        >{{ g.status }}</span
+                      >
+                      <span class="sub">{{ g.created_at | date: 'dd MMM yyyy' }}</span>
+                    </div>
+                  }
+                  @if (h.status === 'ACTIVE' && !openGrievance) {
+                    <div class="i4c-form">
+                      <mat-form-field appearance="outline">
+                        <mat-label>Customer asks to</mat-label>
+                        <mat-select [(ngModel)]="grievanceForm.customerRequest">
+                          <mat-option value="REMOVE_HOLD">Remove the hold</mat-option>
+                          <mat-option value="UNFREEZE">Unfreeze the account</mat-option>
+                          <mat-option value="RESTORE_DIGITAL_SERVICES">Restore digital services</mat-option>
+                        </mat-select>
+                      </mat-form-field>
+                      <mat-form-field appearance="outline">
+                        <mat-label>Customer's reason</mat-label>
+                        <input matInput [(ngModel)]="grievanceForm.customerReason" maxlength="2000" />
+                      </mat-form-field>
+                    </div>
+                    <button mat-flat-button color="primary" (click)="raiseGrievance()" [disabled]="busy">
+                      <fa-icon icon="plus"></fa-icon> Open grievance (EDD next)
+                    </button>
+                  } @else if (!h.grievances?.length) {
+                    <div class="sub">No grievance on this hold.</div>
+                  }
+                </div>
+              </div>
+
+              <div class="i4c-card">
+                <div class="i4c-card__head"><fa-icon icon="hand-holding-usd"></fa-icon> MRM money restoration</div>
+                <div class="i4c-card__body">
+                  @for (r of h.restorations || []; track r.id) {
+                    <div
+                      class="case-row"
+                      (click)="goTo('restorations', r.id)"
+                      (keyup.enter)="goTo('restorations', r.id)"
+                      tabindex="0"
+                    >
+                      <b>{{ r.mrm_request_no || 'Restoration #' + r.id }}</b>
+                      <span class="i4c-badge">{{ r.status }}</span>
+                      <span class="sub"
+                        >{{ r.basis }}
+                        {{ r.restorable_amount ? '₹' + (r.restorable_amount | number: '1.2-2') : '' }}</span
+                      >
+                    </div>
+                  }
+                  @if (h.status === 'ACTIVE' && !openRestoration) {
+                    <div class="i4c-form">
+                      <mat-form-field appearance="outline">
+                        <mat-label>Restoration</mat-label>
+                        <mat-select [(ngModel)]="assessForm.basis">
+                          @for (b of mrmBases; track b.value) {
+                            <mat-option [value]="b.value">{{ b.label }}</mat-option>
+                          }
+                        </mat-select>
+                      </mat-form-field>
+                      @if (assessForm.basis === 'ATTRIBUTION' || assessForm.basis === 'PRO_RATA') {
+                        <mat-form-field appearance="outline">
+                          <mat-label>Restorable amount (₹, at most {{ h.amount_held | number: '1.2-2' }})</mat-label>
+                          <input matInput type="number" min="0" [(ngModel)]="assessForm.restorableAmount" />
+                        </mat-form-field>
+                      }
+                      <mat-form-field appearance="outline">
+                        <mat-label>Remarks</mat-label>
+                        <input matInput [(ngModel)]="assessForm.remarks" maxlength="1000" />
+                      </mat-form-field>
+                    </div>
+                    <button mat-flat-button color="primary" (click)="assessForMrm()" [disabled]="busy">
+                      <fa-icon icon="check"></fa-icon> Assess for MRM
+                    </button>
+                  } @else if (!h.restorations?.length) {
+                    <div class="sub">No restoration on this hold.</div>
+                  }
+                </div>
+              </div>
+            </div>
+
+            <div class="i4c-card">
+              <div class="i4c-card__head">
+                <fa-icon icon="file-csv"></fa-icon> Bank statement (GRM / MRM ask for it)
+              </div>
+              <div class="i4c-card__body">
+                <div class="i4c-form">
+                  <mat-form-field appearance="outline">
+                    <mat-label>From (default 90 days back)</mat-label>
+                    <input matInput type="date" [(ngModel)]="statement.fromDate" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>To (default today)</mat-label>
+                    <input matInput type="date" [(ngModel)]="statement.toDate" />
+                  </mat-form-field>
+                </div>
+                <button mat-stroked-button (click)="downloadStatement()">
+                  <fa-icon icon="download"></fa-icon> Download statement (CSV)
+                </button>
+              </div>
+            </div>
+
+            <div class="i4c-card">
+              <div class="i4c-card__head">
+                <fa-icon icon="paperclip"></fa-icon> Documents on this hold (IO / court orders...)
+              </div>
+              <div class="i4c-card__body">
+                <mifosx-i4c-documents
+                  ownerType="HOLD"
+                  [ownerId]="h.id"
+                  [suggested]="['IO_ORDER', 'COURT_ORDER', 'OTHER']"
+                  [documents]="h.documents || null"
+                  (changed)="select(h.id)"
+                ></mifosx-i4c-documents>
+              </div>
+            </div>
+          }
+
+          <!-- TAB 5: REQUEST AUDIT HISTORY -->
+          @if (modalTab === 'history') {
+            <div class="i4c-card">
+              <div class="i4c-card__head"><fa-icon icon="history"></fa-icon> Requests Audit History on this Hold</div>
+              <div class="i4c-card__body i4c-table-wrap">
+                <table class="i4c-table">
+                  <thead>
+                    <tr>
+                      <th>Action</th>
+                      <th>Reason / Order</th>
+                      <th>Status</th>
+                      <th>Maker Details</th>
+                      <th>Checker Details</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (a of h.actions; track a.id) {
+                      <tr>
+                        <td>
+                          <b>{{ a.action }}</b>
+                        </td>
+                        <td>
+                          {{ reasonLabel(a.reason_type) }}
+                          <div class="sub">{{ a.order_reference }} {{ a.authority ? '- ' + a.authority : '' }}</div>
+                        </td>
+                        <td>
+                          <span class="i4c-badge">{{ a.status }}</span>
+                          @if (a.rejection_reason || a.failure_message) {
+                            <div class="sub err-text">{{ a.rejection_reason || a.failure_message }}</div>
+                          }
+                        </td>
+                        <td>
+                          {{ a.maker_name }}
+                          <div class="sub">{{ a.maker_at | date: 'dd MMM, HH:mm' }}</div>
+                        </td>
+                        <td>
+                          {{ a.checker_name || '-' }}
+                          @if (a.checker_at) {
+                            <div class="sub">{{ a.checker_at | date: 'dd MMM, HH:mm' }}</div>
+                          }
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          }
+        </div>
+
+        <!-- Modal Footer -->
+        <div class="i4c-modal-footer">
+          <button class="footer-btn-close" (click)="close()">Close</button>
+        </div>
+      </div>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-holds/i4c-holds.component.scss

@@ -0,0 +1,236 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+
+@include i4c-skin;
+
+.search-input {
+  width: 240px;
+}
+
+.search-btn {
+  height: 38px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 11.5px;
+}
+
+.count-tag {
+  font-size: 11px;
+  font-weight: 700;
+  color: #64748b;
+  background: #f1f5f9;
+  padding: 2px 7px;
+  border-radius: 9999px;
+  border: 1px solid #e2e8f0;
+}
+
+.head-hint {
+  margin-left: auto;
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: normal;
+}
+
+.acc-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  b {
+    color: #0f172a;
+    font-size: 12px;
+  }
+}
+
+.type-tag {
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  font-size: 10px;
+  font-weight: 700;
+  color: #64748b;
+}
+
+.client-name {
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.ack-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  .ack-no {
+    font-weight: 600;
+    color: #334155;
+    font-size: 12px;
+  }
+}
+
+.short-pill {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: #fef2f2;
+  color: #dc2626;
+  font-weight: 700;
+  font-size: 11px;
+}
+
+.intimation-ok {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: #059669;
+  font-weight: 600;
+  font-size: 12px;
+
+  fa-icon {
+    font-size: 13px;
+  }
+}
+
+.review-date {
+  font-size: 12px;
+  color: #475569;
+  font-weight: 500;
+}
+
+.due-alert {
+  color: #d97706;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.modal-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.sub {
+  font-size: 11px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.err-text {
+  color: #dc2626;
+  font-size: 12px;
+}
+
+.text-accent {
+  color: #2563eb;
+}
+
+.amount-held-text {
+  color: #0f172a;
+  font-size: 13.5px;
+}
+
+.text-muted {
+  color: #94a3b8;
+}
+
+.footer-btn-close {
+  padding: 6px 14px;
+  border-radius: 8px;
+  background: #e2e8f0;
+  color: #334155;
+  border: none;
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #cbd5e1;
+    color: #0f172a;
+  }
+}
+
+.intim-status {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 10px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  border: 1px solid;
+
+  > div {
+    flex: 1 1 auto;
+  }
+
+  &--done {
+    border-color: #bbf7d0;
+    background: #f0fdf4;
+    color: #166534;
+  }
+
+  &--auto {
+    border-color: #bfdbfe;
+    background: #eff6ff;
+    color: #1e3a8a;
+  }
+
+  &--manual {
+    border-color: #fde68a;
+    background: #fffbeb;
+    color: #92400e;
+  }
+}
+
+.wrap {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  max-width: 320px;
+}
+
+.cases-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+@media (width <= 900px) {
+  .cases-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.case-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  cursor: pointer;
+
+  &:hover,
+  &:focus-visible {
+    border-color: #2563eb;
+    outline: none;
+  }
+
+  .sub {
+    font-size: 11px;
+    color: #64748b;
+  }
+}

src/app/cfcfrms/i4c/i4c-holds/i4c-holds.component.ts

@@ -0,0 +1,455 @@
+/**
+ * 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 { DatePipe, DecimalPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { HOLD_REASON_TYPES, HoldActionRequest, I4cHold, I4cService, i4cErrorMessage, saveBlob } from '../i4c.service';
+import { I4cDocumentsComponent } from '../i4c-documents/i4c-documents.component';
+import { MRM_BASES } from '../i4c-restorations/i4c-restorations.component';
+import { ALL_DATES, I4cDateRange, I4cDateRangeComponent } from '../i4c-date-range/i4c-date-range.component';
+
+/**
+ * The register of every hold placed for I4C. Placing is automatic; from here an officer asks for a release or a
+ * debit freeze/unfreeze (approved by someone else on the Approvals page), and records that the customer was told
+ * about the hold.
+ */
+@Component({
+  selector: 'mifosx-i4c-holds',
+  templateUrl: './i4c-holds.component.html',
+  styleUrls: ['./i4c-holds.component.scss'],
+  imports: [
+    DatePipe,
+    DecimalPipe,
+    FormsModule,
+    RouterLink,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatProgressBarModule,
+    MatPaginatorModule,
+    I4cDateRangeComponent,
+    I4cDocumentsComponent,
+    FaIconComponent
+  ]
+})
+export class I4cHoldsComponent implements OnInit {
+  private i4c = inject(I4cService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private snackBar = inject(MatSnackBar);
+
+  readonly views = [
+    { value: 'ACTIVE', label: 'Active' },
+    { value: 'PROSPECTIVE', label: 'Prospective (still short)' },
+    { value: 'INTIMATION_DUE', label: 'Customer not yet told' },
+    { value: 'REVIEW_DUE', label: '90-day review due' },
+    { value: 'NOT_HOLDABLE', label: 'Not holdable' },
+    { value: 'RELEASED', label: 'Released' },
+    { value: '', label: 'All' }
+  ];
+  readonly reasonTypes = HOLD_REASON_TYPES;
+  /** Ways an officer can tell the customer and record it by hand; phone call comes first. */
+  readonly intimationModes = [
+    'PHONE',
+    'LETTER',
+    'IN_PERSON',
+    'SMS',
+    'EMAIL'
+  ];
+
+  view = 'ACTIVE';
+  search = '';
+  accountType = '';
+  intimationFilter = '';
+  layer = '';
+  frozenOnly = false;
+  dates: I4cDateRange = { ...ALL_DATES };
+  total = 0;
+  pageIndex = 0;
+  pageSize = 20;
+  readonly pageSizes = [
+    10,
+    20,
+    50,
+    100
+  ];
+  rows: I4cHold[] = [];
+  selected: I4cHold | null = null;
+  loading = false;
+  busy = false;
+  error = '';
+  modalTab: 'overview' | 'txns' | 'intimation' | 'action' | 'cases' | 'history' = 'overview';
+  readonly mrmBases = MRM_BASES;
+  grievanceForm = { customerRequest: 'REMOVE_HOLD', customerReason: '' };
+  assessForm = { basis: 'ATTRIBUTION', restorableAmount: null as number | null, remarks: '' };
+  statement = { fromDate: '', toDate: '' };
+  copiedKey = '';
+
+  action: HoldActionRequest = this.emptyAction();
+  intimation = { mode: 'PHONE', reference: '' };
+
+  ngOnInit(): void {
+    const view = this.route.snapshot.queryParamMap.get('view');
+    if (view !== null) {
+      this.view = view;
+    }
+    this.load();
+  }
+
+  setView(v: string): void {
+    this.view = v;
+    this.load(true);
+  }
+
+  onPage(e: PageEvent): void {
+    this.pageIndex = e.pageIndex;
+    this.pageSize = e.pageSize;
+    this.load();
+  }
+
+  onDates(range: I4cDateRange): void {
+    this.dates = range;
+    this.load(true);
+  }
+
+  get hasFilters(): boolean {
+    return !!(
+      this.search ||
+      this.accountType ||
+      this.intimationFilter ||
+      this.layer ||
+      this.frozenOnly ||
+      this.dates.preset !== 'ALL'
+    );
+  }
+
+  /** Clears the extra filters; the view chip (Active, Released, ...) stays as chosen. */
+  clearFilters(): void {
+    this.search = '';
+    this.accountType = '';
+    this.intimationFilter = '';
+    this.layer = '';
+    this.frozenOnly = false;
+    this.dates = { ...ALL_DATES };
+    this.load(true);
+  }
+
+  /** Reload the current page; a changed filter passes `fromFirstPage` so the officer lands on page one. */
+  load(fromFirstPage = false): void {
+    if (fromFirstPage) {
+      this.pageIndex = 0;
+    }
+    this.loading = true;
+    this.error = '';
+    this.i4c
+      .holds({
+        view: this.view,
+        search: this.search.trim(),
+        accountType: this.accountType,
+        intimation: this.intimationFilter,
+        layer: this.layer,
+        frozen: this.frozenOnly || null,
+        fromDate: this.dates.fromDate,
+        toDate: this.dates.toDate,
+        offset: this.pageIndex * this.pageSize,
+        limit: this.pageSize
+      })
+      .subscribe({
+        next: (page) => {
+          this.rows = page.pageItems;
+          this.total = page.totalFilteredRecords;
+          this.loading = false;
+          if (this.selected) {
+            this.select(this.selected.id);
+          }
+        },
+        error: (e) => {
+          this.error = i4cErrorMessage(e);
+          this.loading = false;
+        }
+      });
+  }
+
+  select(id: number): void {
+    this.i4c.hold(id).subscribe({
+      next: (hold) => {
+        this.selected = hold;
+        this.action = this.emptyAction();
+        this.intimation = { mode: 'PHONE', reference: '' };
+        this.modalTab = 'overview';
+      },
+      error: (e) => this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 })
+    });
+  }
+
+  copyText(text: string, key: string, event?: Event): void {
+    if (event) {
+      event.stopPropagation();
+    }
+    if (!text) {
+      return;
+    }
+    navigator.clipboard.writeText(text);
+    this.copiedKey = key;
+    this.snackBar.open(`Copied: ${text}`, 'OK', { duration: 2500 });
+    setTimeout(() => {
+      if (this.copiedKey === key) {
+        this.copiedKey = '';
+      }
+    }, 2000);
+  }
+
+  close(): void {
+    this.selected = null;
+  }
+
+  /** What a maker may ask for on this hold, given its state. */
+  get allowedActions(): { value: string; label: string }[] {
+    const h = this.selected;
+    if (!h || h.status === 'RELEASED') {
+      return [];
+    }
+    const list = [{ value: 'RELEASE', label: 'Release hold' }];
+    if (h.account_type === 'SAVINGS') {
+      list.push(
+        h.debit_frozen
+          ? { value: 'UNFREEZE', label: 'Unfreeze debits, hold continues' }
+          : { value: 'FREEZE', label: 'Freeze all debits (on explicit LEA / court direction only)' }
+      );
+    }
+    if (h.debit_frozen) {
+      list.push({ value: 'UNFREEZE_AND_RELEASE', label: 'Unfreeze and remove the hold' });
+    }
+    return list;
+  }
+
+  get orderRequired(): boolean {
+    return (
+      (this.action.action === 'RELEASE' || this.action.action === 'UNFREEZE_AND_RELEASE') &&
+      this.action.reasonType !== 'REVIEW_90_DAYS'
+    );
+  }
+
+  /** What stays on hold after a partial release; null when the whole hold is released. */
+  get remainingAfterRelease(): number | null {
+    const h = this.selected;
+    const amount = Number(this.action.amount);
+    if (!h || this.action.action !== 'RELEASE' || !amount) {
+      return null;
+    }
+    return Math.max(0, Number(h.amount_held) - amount);
+  }
+
+  get openGrievance(): any {
+    return (this.selected?.grievances || []).find((g: any) => g.stage !== 'CLOSED');
+  }
+
+  get openRestoration(): any {
+    return (this.selected?.restorations || []).find((r: any) => r.status !== 'CLOSED');
+  }
+
+  raiseGrievance(): void {
+    if (!this.selected) {
+      return;
+    }
+    this.busy = true;
+    this.i4c.createGrievance(this.selected.id, this.grievanceForm).subscribe({
+      next: (r) => {
+        this.busy = false;
+        this.router.navigate(['/cfcfrms/i4c/grievances'], { queryParams: { open: r.resourceId } });
+      },
+      error: (e) => {
+        this.busy = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 7000 });
+      }
+    });
+  }
+
+  assessForMrm(): void {
+    if (!this.selected) {
+      return;
+    }
+    const possible = this.assessForm.basis === 'ATTRIBUTION' || this.assessForm.basis === 'PRO_RATA';
+    this.busy = true;
+    this.i4c
+      .assessRestoration(this.selected.id, {
+        basis: this.assessForm.basis,
+        restorableAmount: possible ? this.assessForm.restorableAmount : null,
+        remarks: this.assessForm.remarks
+      })
+      .subscribe({
+        next: (r) => {
+          this.busy = false;
+          this.router.navigate(['/cfcfrms/i4c/restorations'], { queryParams: { open: r.resourceId } });
+        },
+        error: (e) => {
+          this.busy = false;
+          this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 7000 });
+        }
+      });
+  }
+
+  goTo(page: 'grievances' | 'restorations', id: number): void {
+    this.router.navigate(['/cfcfrms/i4c/' + page], { queryParams: { open: id } });
+  }
+
+  downloadStatement(): void {
+    if (!this.selected) {
+      return;
+    }
+    const h = this.selected;
+    this.i4c.statementCsv(h.id, this.statement.fromDate || undefined, this.statement.toDate || undefined).subscribe({
+      next: (blob) => saveBlob(blob, 'statement-' + h.account_no + '.csv'),
+      error: (e) => this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 })
+    });
+  }
+
+  get hasPendingAction(): boolean {
+    return (this.selected?.actions || []).some((a: any) => a.status === 'PENDING');
+  }
+
+  submitAction(): void {
+    if (!this.selected) {
+      return;
+    }
+    if (!this.action.reasonType) {
+      this.snackBar.open('Choose the reason.', 'Close', { duration: 4000 });
+      return;
+    }
+    if (this.orderRequired && !this.action.orderReference?.trim()) {
+      this.snackBar.open('An order / reference number is required to release a hold.', 'Close', { duration: 5000 });
+      return;
+    }
+    this.busy = true;
+    this.i4c.requestHoldAction(this.selected.id, this.action).subscribe({
+      next: () => {
+        this.busy = false;
+        this.snackBar.open('Request raised. Another officer must approve it on the Approvals page.', 'OK', {
+          duration: 5000
+        });
+        this.load();
+      },
+      error: (e) => {
+        this.busy = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+
+  submitIntimation(): void {
+    if (!this.selected) {
+      return;
+    }
+    this.busy = true;
+    this.i4c.recordIntimation(this.selected.id, this.intimation.mode, this.intimation.reference).subscribe({
+      next: () => {
+        this.busy = false;
+        this.snackBar.open('Customer intimation recorded.', 'OK', { duration: 3000 });
+        this.load();
+      },
+      error: (e) => {
+        this.busy = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+
+  /** Send the hold notice now on the switched-on automatic channels (Email today). */
+  sendIntimationNow(): void {
+    if (!this.selected) {
+      return;
+    }
+    this.busy = true;
+    this.i4c.sendIntimation(this.selected.id).subscribe({
+      next: (r) => {
+        this.busy = false;
+        this.snackBar.open(r.message, 'OK', { duration: 6000 });
+        this.load();
+      },
+      error: (e) => {
+        this.busy = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+
+  channelLabel(channel: string): string {
+    return (
+      (
+        {
+          EMAIL: 'Email',
+          SMS: 'SMS',
+          WHATSAPP: 'WhatsApp',
+          PHONE: 'Phone call',
+          LETTER: 'Letter',
+          IN_PERSON: 'In person'
+        } as Record<string, string>
+      )[channel] ?? channel
+    );
+  }
+
+  autoChannelsText(hold: I4cHold): string {
+    return (hold.automaticChannels || []).map((c) => this.channelLabel(c)).join(', then ');
+  }
+
+  isOverdue(hold: I4cHold): boolean {
+    return (
+      hold.status === 'ACTIVE' &&
+      !hold.customer_intimated_at &&
+      !!hold.intimation_due_by &&
+      new Date(hold.intimation_due_by).getTime() < Date.now()
+    );
+  }
+
+  isReviewDue(hold: I4cHold): boolean {
+    if (hold.status !== 'ACTIVE' || !hold.review_due_on) {
+      return false;
+    }
+    const due = new Date(hold.review_due_on + 'T00:00:00').getTime();
+    return due - Date.now() <= 15 * 24 * 3600 * 1000;
+  }
+
+  statusClass(hold: I4cHold): string {
+    if (hold.status === 'RELEASED') {
+      return 'i4c-badge--blue';
+    }
+    if (hold.status === 'NOT_HOLDABLE') {
+      return 'i4c-badge--red';
+    }
+    return hold.shortfall > 0 ? 'i4c-badge--amber' : 'i4c-badge--green';
+  }
+
+  reasonLabel(value: string): string {
+    return this.reasonTypes.find((r) => r.value === value)?.label || value;
+  }
+
+  private emptyAction(): HoldActionRequest {
+    return {
+      action: 'RELEASE',
+      amount: null,
+      reasonType: '',
+      orderReference: '',
+      orderDate: '',
+      authority: '',
+      remarks: ''
+    };
+  }
+}

src/app/cfcfrms/i4c/i4c-intimation-settings/i4c-intimation-settings.component.html

@@ -0,0 +1,148 @@
+<!--
+  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="i4c-page">
+  @if (loading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">{{ error }}</div>
+  }
+
+  <div class="summary" [class.summary--manual]="!enabledChannels.length">
+    <fa-icon [icon]="enabledChannels.length ? 'check' : 'exclamation-triangle'" class="summary__icon"></fa-icon>
+    <div>
+      @if (enabledChannels.length) {
+        <div class="summary__title">
+          Customers are told automatically by
+          @for (c of enabledChannels; track c.channel; let last = $last) {
+            <b>{{ info(c.channel).label }}</b
+            >{{ last ? '' : ', then ' }}
+          }
+        </div>
+        <div class="summary__text">
+          As soon as money is held, the channels are tried in this order. The first that reaches the customer records
+          the intimation on the hold. If none does (no email on file, gateway down), the hold stays "customer not yet
+          told" for an officer to call and record by hand.
+        </div>
+      } @else {
+        <div class="summary__title">No automatic channel is switched on</div>
+        <div class="summary__text">
+          Every hold waits for an officer to contact the customer (phone, letter, in person) and record it on the hold's
+          Record Intimation tab.
+        </div>
+      }
+    </div>
+  </div>
+
+  @for (c of channels; track c.channel) {
+    <div class="i4c-card channel" [class.channel--off]="!c.enabled">
+      <div class="i4c-card__head">
+        <fa-icon [icon]="info(c.channel).icon"></fa-icon>
+        <span>{{ info(c.channel).label }}</span>
+        <span class="i4c-badge" [class.i4c-badge--green]="c.enabled">{{ c.enabled ? 'ON' : 'OFF' }}</span>
+        <span class="i4c-toolbar__spacer"></span>
+        <mat-slide-toggle
+          [id]="'toggle-' + c.channel"
+          [(ngModel)]="c.enabled"
+          (change)="toggle(c)"
+          [disabled]="c.saving"
+          [attr.aria-label]="'Send automatically by ' + info(c.channel).label"
+        >
+          Send automatically
+        </mat-slide-toggle>
+      </div>
+      <div class="i4c-card__body">
+        <div class="gateway">Sent through: {{ info(c.channel).gateway }}</div>
+
+        <div class="grid">
+          <div class="edit">
+            <div class="row">
+              <mat-form-field appearance="outline" class="priority">
+                <mat-label>Order</mat-label>
+                <input
+                  matInput
+                  type="number"
+                  min="1"
+                  max="99"
+                  [id]="'priority-' + c.channel"
+                  [(ngModel)]="c.priority"
+                  (ngModelChange)="c.dirty = true"
+                />
+              </mat-form-field>
+              @if (c.channel === 'EMAIL') {
+                <mat-form-field appearance="outline" class="subject">
+                  <mat-label>Subject</mat-label>
+                  <input
+                    matInput
+                    maxlength="300"
+                    [id]="'subject-' + c.channel"
+                    [(ngModel)]="c.subject"
+                    (ngModelChange)="c.dirty = true"
+                  />
+                </mat-form-field>
+              }
+            </div>
+            <mat-form-field appearance="outline" class="full">
+              <mat-label>Message</mat-label>
+              <textarea
+                matInput
+                rows="9"
+                [id]="'body-' + c.channel"
+                [(ngModel)]="c.body"
+                (ngModelChange)="c.dirty = true"
+              ></textarea>
+            </mat-form-field>
+            <div class="chips">
+              <span class="chips__label">Insert:</span>
+              @for (p of placeholders; track p) {
+                <button type="button" class="chip" (click)="insert(c, p)">{{ p }}</button>
+              }
+            </div>
+            <div class="i4c-actions">
+              <button mat-flat-button color="primary" (click)="saveText(c)" [disabled]="!c.dirty || c.saving">
+                <fa-icon icon="check"></fa-icon> Save {{ info(c.channel).label }} message
+              </button>
+              @if (c.updated_at) {
+                <span class="muted"
+                  >Last changed {{ c.updated_at | date: 'dd MMM yyyy, HH:mm' }} by {{ c.updated_by }}</span
+                >
+              }
+            </div>
+          </div>
+
+          <div class="preview">
+            <div class="preview__label">Preview (sample values)</div>
+            @if (c.channel === 'EMAIL') {
+              <div class="preview__subject">{{ preview(c.subject) }}</div>
+            }
+            <div class="preview__body">{{ preview(c.body) }}</div>
+          </div>
+        </div>
+
+        @if (c.channel === 'EMAIL') {
+          <div class="test">
+            <mat-form-field appearance="outline" class="test__field" subscriptSizing="dynamic">
+              <mat-label>Send a test to</mat-label>
+              <input matInput type="email" id="test-email-to" [(ngModel)]="testTo" placeholder="you@bank.in" />
+            </mat-form-field>
+            <button mat-stroked-button (click)="sendTest()" [disabled]="testing">
+              <fa-icon icon="paper-plane"></fa-icon> Send test email
+            </button>
+            <span class="muted">Uses the saved message with sample values; the subject starts with [TEST].</span>
+          </div>
+        }
+      </div>
+    </div>
+  }
+
+  <div class="i4c-note">
+    Phone, letter and in-person intimation are always recorded by an officer on the hold's Record Intimation tab; the
+    CBS cannot send them itself. Every notice, automatic or recorded, is listed in the hold's intimation history.
+  </div>
+</div>

src/app/cfcfrms/i4c/i4c-intimation-settings/i4c-intimation-settings.component.scss

@@ -0,0 +1,172 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+
+@include i4c-skin;
+
+.summary {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 12px 16px;
+  border-radius: 10px;
+  border: 1px solid #bbf7d0;
+  background: #f0fdf4;
+  color: #166534;
+
+  &--manual {
+    border-color: #fde68a;
+    background: #fffbeb;
+    color: #92400e;
+  }
+
+  &__icon {
+    margin-top: 2px;
+  }
+
+  &__title {
+    font-weight: 600;
+    font-size: 14px;
+  }
+
+  &__text {
+    font-size: 13px;
+    margin-top: 2px;
+    line-height: 1.5;
+  }
+}
+
+.channel--off {
+  opacity: 0.85;
+}
+
+.gateway {
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 10px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: 16px;
+}
+
+@media (width <= 1024px) {
+  .grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.edit {
+  min-width: 0;
+}
+
+.row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.priority {
+  width: 110px;
+}
+
+.subject {
+  flex: 1 1 320px;
+}
+
+.full {
+  width: 100%;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 12px;
+
+  &__label {
+    font-size: 12px;
+    color: #64748b;
+  }
+}
+
+.chip {
+  border: 1px solid #cbd5e1;
+  background: #f8fafc;
+  border-radius: 999px;
+  padding: 2px 10px;
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: #334155;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #2563eb;
+    color: #1d4ed8;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #2563eb;
+    outline-offset: 1px;
+  }
+}
+
+.preview {
+  min-width: 0;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #f8fafc;
+  padding: 12px 14px;
+  align-self: start;
+
+  &__label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #94a3b8;
+    margin-bottom: 8px;
+  }
+
+  &__subject {
+    font-weight: 600;
+    color: #0f172a;
+    font-size: 13px;
+    margin-bottom: 8px;
+  }
+
+  &__body {
+    white-space: pre-wrap;
+    font-size: 13px;
+    line-height: 1.55;
+    color: #1e293b;
+    overflow-wrap: anywhere;
+  }
+}
+
+.test {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid #f1f5f9;
+
+  &__field {
+    width: 280px;
+  }
+}
+
+.muted {
+  font-size: 12px;
+  color: #64748b;
+}

src/app/cfcfrms/i4c/i4c-intimation-settings/i4c-intimation-settings.component.ts

@@ -0,0 +1,185 @@
+/**
+ * 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 { DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { I4cService, IntimationChannel, i4cErrorMessage } from '../i4c.service';
+
+/** Sample values for the live preview; the server fills the real ones per hold. */
+const SAMPLE: Record<string, string> = {
+  customerName: 'Anshul Rathore',
+  accountNumber: 'XXXXXXXXXXX0006',
+  amountHeld: '1500.00',
+  disputedAmount: '1500.00',
+  ackNo: '31610201726120',
+  holdDate: '20-10-2026',
+  reviewDate: '18-01-2027',
+  bankName: 'LincPay Demo Co-operative Bank',
+  branchName: 'Head Office',
+  grievanceEmail: 'grievance@lpdb.example.in',
+  customerCare: '1800-200-4570'
+};
+
+const CHANNEL_INFO: Record<string, { label: string; icon: string; gateway: string }> = {
+  EMAIL: {
+    label: 'Email',
+    icon: 'envelope',
+    gateway: "CBS mail server (spring.mail settings), to the customer's email on file"
+  },
+  SMS: {
+    label: 'SMS',
+    icon: 'mobile-alt',
+    gateway: "SMS gateway (fineract.notification.sms), to the customer's mobile on file"
+  },
+  WHATSAPP: {
+    label: 'WhatsApp',
+    icon: 'phone',
+    gateway: "WhatsApp gateway (fineract.notification.whatsapp), to the customer's mobile"
+  }
+};
+
+interface EditableChannel extends IntimationChannel {
+  dirty?: boolean;
+  saving?: boolean;
+}
+
+/**
+ * Which channels tell the account holder about an I4C hold on their own. Switched-on channels are tried in priority
+ * order as soon as money is held; the first that reaches the customer records the intimation. With none switched on,
+ * or none reaching the customer, the hold waits for an officer to phone or write and record it by hand.
+ */
+@Component({
+  selector: 'mifosx-i4c-intimation-settings',
+  templateUrl: './i4c-intimation-settings.component.html',
+  styleUrls: ['./i4c-intimation-settings.component.scss'],
+  imports: [
+    DatePipe,
+    FormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSlideToggleModule,
+    MatProgressBarModule,
+    FaIconComponent
+  ]
+})
+export class I4cIntimationSettingsComponent implements OnInit {
+  private i4c = inject(I4cService);
+  private snackBar = inject(MatSnackBar);
+
+  channels: EditableChannel[] = [];
+  placeholders: string[] = [];
+  loading = false;
+  error = '';
+  testTo = '';
+  testing = false;
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.loading = true;
+    this.error = '';
+    this.i4c.intimationChannels().subscribe({
+      next: (s) => {
+        this.channels = s.channels.map((c) => ({ ...c }));
+        this.placeholders = s.placeholders;
+        this.loading = false;
+      },
+      error: (e) => {
+        this.error = i4cErrorMessage(e);
+        this.loading = false;
+      }
+    });
+  }
+
+  get enabledChannels(): EditableChannel[] {
+    return this.channels.filter((c) => c.enabled).sort((a, b) => a.priority - b.priority);
+  }
+
+  info(channel: string) {
+    return CHANNEL_INFO[channel] ?? { label: channel, icon: 'bell', gateway: '' };
+  }
+
+  preview(text: string | undefined): string {
+    return (text ?? '').replace(/\{(\w+)\}/g, (match, key) => SAMPLE[key] ?? match);
+  }
+
+  insert(channel: EditableChannel, placeholder: string): void {
+    channel.body = (channel.body ?? '') + placeholder;
+    channel.dirty = true;
+  }
+
+  /** The switch saves at once: it decides whether customers get told automatically. */
+  toggle(channel: EditableChannel): void {
+    this.save(channel, { enabled: channel.enabled });
+  }
+
+  saveText(channel: EditableChannel): void {
+    if (!channel.body?.trim()) {
+      this.snackBar.open('The message text cannot be empty.', 'Close', { duration: 4000 });
+      return;
+    }
+    if (channel.channel === 'EMAIL' && !channel.subject?.trim()) {
+      this.snackBar.open('An email needs a subject.', 'Close', { duration: 4000 });
+      return;
+    }
+    this.save(channel, { priority: channel.priority, subject: channel.subject, body: channel.body });
+  }
+
+  private save(
+    channel: EditableChannel,
+    body: { enabled?: boolean; priority?: number; subject?: string; body?: string }
+  ): void {
+    channel.saving = true;
+    this.i4c.updateIntimationChannel(channel.channel, body).subscribe({
+      next: (rows) => {
+        const fresh = rows.find((r) => r.channel === channel.channel);
+        if (fresh) {
+          Object.assign(channel, fresh, { dirty: false });
+        }
+        channel.saving = false;
+        this.snackBar.open(this.info(channel.channel).label + ' settings saved.', 'OK', { duration: 3000 });
+      },
+      error: (e) => {
+        channel.saving = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+        this.load();
+      }
+    });
+  }
+
+  sendTest(): void {
+    if (!this.testTo.trim()) {
+      this.snackBar.open('Enter an email address for the test.', 'Close', { duration: 4000 });
+      return;
+    }
+    this.testing = true;
+    this.i4c.testIntimationChannel('EMAIL', this.testTo.trim()).subscribe({
+      next: (r) => {
+        this.testing = false;
+        this.snackBar.open(r.outcome === 'SENT' ? 'Test email sent to ' + this.testTo + '.' : r.message, 'OK', {
+          duration: 6000
+        });
+      },
+      error: (e) => {
+        this.testing = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+}

src/app/cfcfrms/i4c/i4c-mrm-report/i4c-mrm-report.component.html

@@ -0,0 +1,149 @@
+<!--
+  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="i4c-page">
+  <div class="i4c-toolbar">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="search-input">
+      <mat-label>Filter account / customer / branch / ack</mat-label>
+      <input matInput [(ngModel)]="filter" />
+    </mat-form-field>
+    <span class="i4c-toolbar__spacer"></span>
+    <span class="count-tag"
+      >{{ shown.length }} accounts · {{ totals.complaints }} complaints · ₹{{
+        totals.held | number: '1.2-2'
+      }}
+      held</span
+    >
+    <button mat-stroked-button (click)="load()" [disabled]="loading"><fa-icon icon="sync"></fa-icon> Refresh</button>
+    <button mat-flat-button color="primary" (click)="download()">
+      <fa-icon icon="file-csv"></fa-icon> Download for MRM (CSV)
+    </button>
+  </div>
+
+  @if (loading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">
+      <fa-icon icon="exclamation-circle"></fa-icon> <span>{{ error }}</span>
+    </div>
+  }
+
+  <div class="i4c-card">
+    <div class="i4c-card__head">
+      <fa-icon icon="university"></fa-icon>
+      <span>MRM: Update Account Balance</span>
+      <span class="head-hint">
+        Every account with an active I4C hold. Enter these balances on MRM → Money Distribution Process (one by one or
+        with MRM's bulk format). Click an account for its pro-rata split.
+      </span>
+    </div>
+    <div class="i4c-table-wrap">
+      <table class="i4c-table">
+        <thead>
+          <tr>
+            <th>Account</th>
+            <th>Holder / Branch</th>
+            <th>Status</th>
+            <th class="num">Ledger balance</th>
+            <th class="num">Available</th>
+            <th class="num">On hold</th>
+            <th class="num">Disputed</th>
+            <th class="num">Complaints</th>
+            <th>Acknowledgement nos.</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (r of shown; track r.account_type + r.account_id) {
+            <tr class="clickable" (click)="pick(r)">
+              <td>
+                <b>{{ r.account_no }}</b>
+                <div class="sub">{{ r.account_type }}{{ r.debit_frozen ? ' · debits frozen' : '' }}</div>
+              </td>
+              <td>
+                {{ r.client_name }}
+                <div class="sub">{{ r.office_name }}</div>
+              </td>
+              <td>{{ r.account_status || '-' }}</td>
+              <td class="num">{{ r.ledger_balance | number: '1.2-2' }}</td>
+              <td class="num">{{ r.available_balance | number: '1.2-2' }}</td>
+              <td class="num">
+                <b>{{ r.held | number: '1.2-2' }}</b>
+              </td>
+              <td class="num">{{ r.disputed | number: '1.2-2' }}</td>
+              <td class="num">{{ r.complaints }}</td>
+              <td class="wrap">{{ r.acknowledgement_nos }}</td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="9" class="i4c-empty">No accounts with active I4C holds.</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="i4c-card">
+    <div class="i4c-card__head">
+      <fa-icon icon="calculator"></fa-icon>
+      <span>Pro-rata distribution</span>
+      <span class="head-hint">
+        MRM: when money from several complaints is mixed in one account, it is shared in proportion to the disputed
+        amounts. Leave the amount empty to share everything held.
+      </span>
+    </div>
+    <div class="i4c-card__body">
+      <div class="i4c-filter-bar i4c-filter-bar--inset">
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label>Account no.</mat-label>
+          <input matInput [(ngModel)]="proRataAccount" (keyup.enter)="calculate()" />
+        </mat-form-field>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label>Amount to share (₹)</mat-label>
+          <input matInput type="number" min="0" [(ngModel)]="proRataAmount" (keyup.enter)="calculate()" />
+        </mat-form-field>
+        <button mat-flat-button color="primary" (click)="calculate()" [disabled]="!proRataAccount.trim()">
+          <fa-icon icon="calculator"></fa-icon> Calculate
+        </button>
+      </div>
+      @if (proRata) {
+        <table class="i4c-table">
+          <thead>
+            <tr>
+              <th>Complaint (ack)</th>
+              <th class="num">Layer</th>
+              <th class="num">Disputed</th>
+              <th class="num">Held for it</th>
+              <th class="num">Share</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (h of proRata.holds; track h.id) {
+              <tr>
+                <td>{{ h.acknowledgement_no }}</td>
+                <td class="num">{{ h.layer }}</td>
+                <td class="num">{{ h.disputed_amount | number: '1.2-2' }}</td>
+                <td class="num">{{ h.amount_held | number: '1.2-2' }}</td>
+                <td class="num">
+                  <b>{{ h.share | number: '1.2-2' }}</b>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+        <div class="sub">
+          ₹{{ proRata.amount | number: '1.2-2' }} of ₹{{ proRata.totalHeld | number: '1.2-2' }} held on
+          {{ proRata.accountNo }}, by disputed amount (total ₹{{ proRata.totalDisputed | number: '1.2-2' }}). A share
+          never exceeds what that complaint's hold has; use the figure as the restorable amount of that complaint's
+          restoration.
+        </div>
+      }
+    </div>
+  </div>
+</div>

src/app/cfcfrms/i4c/i4c-mrm-report/i4c-mrm-report.component.scss

@@ -0,0 +1,13 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+@use '../i4c-cases' as *;
+
+@include i4c-skin;
+@include i4c-case-page;

src/app/cfcfrms/i4c/i4c-mrm-report/i4c-mrm-report.component.ts

@@ -0,0 +1,123 @@
+/**
+ * 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 { DecimalPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { I4cService, i4cErrorMessage, saveBlob } from '../i4c.service';
+
+/**
+ * MRM "Update Account Balance": every account with an active I4C hold and its balances now, for the bank to update on
+ * MRM (one by one or with the bulk sheet), plus the pro-rata calculator for accounts with several complaints.
+ */
+@Component({
+  selector: 'mifosx-i4c-mrm-report',
+  templateUrl: './i4c-mrm-report.component.html',
+  styleUrls: ['./i4c-mrm-report.component.scss'],
+  imports: [
+    DecimalPipe,
+    FormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatProgressBarModule,
+    FaIconComponent
+  ]
+})
+export class I4cMrmReportComponent implements OnInit {
+  private i4c = inject(I4cService);
+  private snackBar = inject(MatSnackBar);
+
+  rows: any[] = [];
+  loading = false;
+  error = '';
+  filter = '';
+  proRataAccount = '';
+  proRataAmount: number | null = null;
+  proRata: any = null;
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.loading = true;
+    this.error = '';
+    this.i4c.mrmBalanceReport().subscribe({
+      next: (rows) => {
+        this.rows = rows;
+        this.loading = false;
+      },
+      error: (e) => {
+        this.error = i4cErrorMessage(e);
+        this.loading = false;
+      }
+    });
+  }
+
+  get shown(): any[] {
+    const f = this.filter.trim().toLowerCase();
+    return f
+      ? this.rows.filter((r) =>
+          [
+            r.account_no,
+            r.client_name,
+            r.office_name,
+            r.acknowledgement_nos
+          ].some((v) =>
+            String(v || '')
+              .toLowerCase()
+              .includes(f)
+          )
+        )
+      : this.rows;
+  }
+
+  get totals(): { held: number; ledger: number; complaints: number } {
+    return this.shown.reduce(
+      (t, r) => ({
+        held: t.held + Number(r.held || 0),
+        ledger: t.ledger + Number(r.ledger_balance || 0),
+        complaints: t.complaints + Number(r.complaints || 0)
+      }),
+      { held: 0, ledger: 0, complaints: 0 }
+    );
+  }
+
+  download(): void {
+    this.i4c.mrmBalanceReportCsv().subscribe({
+      next: (blob) => saveBlob(blob, 'mrm-balance-report-' + new Date().toISOString().slice(0, 10) + '.csv'),
+      error: (e) => this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 })
+    });
+  }
+
+  pick(r: any): void {
+    this.proRataAccount = r.account_no;
+    this.proRataAmount = null;
+    this.calculate();
+  }
+
+  calculate(): void {
+    if (!this.proRataAccount.trim()) {
+      return;
+    }
+    this.i4c.proRata(this.proRataAccount.trim(), this.proRataAmount).subscribe({
+      next: (p) => (this.proRata = p),
+      error: (e) => {
+        this.proRata = null;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+}

src/app/cfcfrms/i4c/i4c-outbox/i4c-outbox.component.html

@@ -0,0 +1,497 @@
+<!--
+  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="i4c-page">
+  <!-- View Switcher & Toolbar -->
+  <div class="i4c-toolbar">
+    <div class="i4c-filter-chips">
+      <button class="filter-chip" [class.filter-chip--active]="activeSection === 'all'" (click)="activeSection = 'all'">
+        <fa-icon icon="list-ul"></fa-icon> <span>All (Outbox &amp; Log)</span>
+      </button>
+      <button
+        class="filter-chip"
+        [class.filter-chip--active]="activeSection === 'outbox'"
+        (click)="activeSection = 'outbox'"
+      >
+        <fa-icon icon="paper-plane"></fa-icon> <span>Responses to I4C ({{ outboxTotal }})</span>
+      </button>
+      <button class="filter-chip" [class.filter-chip--active]="activeSection === 'log'" (click)="activeSection = 'log'">
+        <fa-icon icon="history"></fa-icon> <span>API Audit Log ({{ logTotal }})</span>
+      </button>
+    </div>
+
+    <span class="i4c-toolbar__spacer"></span>
+
+    <button mat-flat-button color="primary" class="refresh-btn" (click)="loadOutbox(); loadLog()" [disabled]="loading">
+      <fa-icon icon="sync" [animation]="loading ? 'spin' : undefined"></fa-icon> Refresh
+    </button>
+  </div>
+
+  @if (loading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">
+      <fa-icon icon="exclamation-circle"></fa-icon>
+      <span>{{ error }}</span>
+    </div>
+  }
+
+  <!-- SECTION 1: RESPONSES TO I4C (OUTBOX) -->
+  @if (activeSection === 'all' || activeSection === 'outbox') {
+    <div class="i4c-card">
+      <div class="i4c-card__head">
+        <fa-icon icon="paper-plane"></fa-icon>
+        <span>Outbox Queue: Delivery to I4C</span>
+        <span class="head-hint">Automated HTTP callbacks carrying bank findings to I4C</span>
+
+        <span class="i4c-toolbar__spacer"></span>
+
+        <!-- Status Filter Chips -->
+        <div class="mini-chips">
+          @for (s of outboxStatuses; track s) {
+            <button class="mini-chip" [class.mini-chip--active]="outboxStatus === s" (click)="setOutboxStatus(s)">
+              {{ s || 'All' }}
+            </button>
+          }
+        </div>
+      </div>
+
+      <div class="i4c-filter-bar i4c-filter-bar--inset">
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label>Ack no. / job id</mat-label>
+          <input matInput [(ngModel)]="outboxSearch" (keyup.enter)="loadOutbox(true)" (blur)="loadOutbox(true)" />
+        </mat-form-field>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label>Type</mat-label>
+          <mat-select [(ngModel)]="outboxType" (selectionChange)="loadOutbox(true)">
+            <mat-option value="">ACK and RESPONSE</mat-option>
+            <mat-option value="ACK">ACK only</mat-option>
+            <mat-option value="RESPONSE">RESPONSE only</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mifosx-i4c-date-range
+          label="Queued"
+          [range]="outboxDates"
+          (rangeChange)="onOutboxDates($event)"
+        ></mifosx-i4c-date-range>
+        <button
+          mat-stroked-button
+          class="i4c-filter-bar__clear"
+          (click)="clearOutboxFilters()"
+          [disabled]="!outboxHasFilters"
+        >
+          <fa-icon icon="times"></fa-icon> Clear filters
+        </button>
+      </div>
+
+      <div class="i4c-table-wrap">
+        <table class="i4c-table">
+          <thead>
+            <tr>
+              <th>Created At</th>
+              <th>Complaint Ack No.</th>
+              <th title="ACK: separate acknowledgement callback. RESPONSE: the Section 6 findings.">Type</th>
+              <th>Delivery Status</th>
+              <th class="num">Attempts</th>
+              <th>Next Retry</th>
+              <th>HTTP Code</th>
+              <th>Sent Timestamp</th>
+              <th>Error</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (o of outbox; track o.id) {
+              <tr class="clickable" (click)="openOutboxModal(o)">
+                <td>
+                  <span class="date-main">{{ o.created_at | date: 'dd MMM, HH:mm:ss' }}</span>
+                </td>
+                <td>
+                  <a
+                    [routerLink]="['../requests', o.request_id]"
+                    class="font-semibold text-accent"
+                    (click)="$event.stopPropagation()"
+                  >
+                    {{ o.acknowledgement_no }}
+                  </a>
+                </td>
+                <td>
+                  <span class="i4c-badge" [class.i4c-badge--blue]="o.message_type === 'ACK'">{{
+                    o.message_type === 'ACK' ? 'ACK' : 'RESPONSE'
+                  }}</span>
+                </td>
+                <td>
+                  <span
+                    class="i4c-badge"
+                    [class.i4c-badge--green]="o.status === 'SENT'"
+                    [class.i4c-badge--red]="o.status === 'FAILED'"
+                    [class.i4c-badge--amber]="o.status === 'PENDING' || o.status === 'SENDING'"
+                  >
+                    {{ o.status }}
+                  </span>
+                </td>
+                <td class="num font-semibold">{{ o.attempts }}</td>
+                <td>{{ o.status === 'PENDING' ? (o.next_attempt_at | date: 'dd MMM, HH:mm:ss') : '-' }}</td>
+                <td>
+                  <span class="font-mono">{{ o.http_status ?? '-' }}</span>
+                </td>
+                <td>{{ o.sent_at ? (o.sent_at | date: 'dd MMM, HH:mm:ss') : '-' }}</td>
+                <td class="err-text">{{ o.last_error || '-' }}</td>
+                <td (click)="$event.stopPropagation()">
+                  <div class="i4c-actions">
+                    <button class="table-action-btn" (click)="openOutboxModal(o)">
+                      <fa-icon icon="eye"></fa-icon> Payload
+                    </button>
+                    @if (o.status === 'FAILED') {
+                      <button class="retry-btn" (click)="retry(o)" [disabled]="busyId === o.id">
+                        <fa-icon icon="redo" [animation]="busyId === o.id ? 'spin' : undefined"></fa-icon> Retry
+                      </button>
+                    }
+                  </div>
+                </td>
+              </tr>
+            } @empty {
+              <tr>
+                <td colspan="10" class="i4c-empty">
+                  <div class="empty-icon"><fa-icon icon="paper-plane"></fa-icon></div>
+                  <div>No responses in the outbox queue matching current filter.</div>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      <mat-paginator
+        class="i4c-paginator"
+        [length]="outboxTotal"
+        [pageIndex]="outboxPageIndex"
+        [pageSize]="outboxPageSize"
+        [pageSizeOptions]="pageSizes"
+        (page)="onOutboxPage($event)"
+        showFirstLastButtons
+        aria-label="Outbox pages"
+      ></mat-paginator>
+    </div>
+  }
+
+  <!-- SECTION 2: API LOG -->
+  @if (activeSection === 'all' || activeSection === 'log') {
+    <div class="i4c-card">
+      <div class="i4c-card__head">
+        <fa-icon icon="history"></fa-icon>
+        <span>API Gateway Audit Trail (Masked)</span>
+        <span class="head-hint">Every call to and from I4C. Click a row to see its request and response.</span>
+
+        <span class="i4c-toolbar__spacer"></span>
+
+        <!-- Direction Filters -->
+        <div class="mini-chips">
+          <button class="mini-chip" [class.mini-chip--active]="direction === ''" (click)="setDirection('')">
+            Both
+          </button>
+          <button class="mini-chip" [class.mini-chip--active]="direction === 'IN'" (click)="setDirection('IN')">
+            ↓ Inbound
+          </button>
+          <button class="mini-chip" [class.mini-chip--active]="direction === 'OUT'" (click)="setDirection('OUT')">
+            ↑ Outbound
+          </button>
+        </div>
+
+        <mat-checkbox [(ngModel)]="failuresOnly" (change)="loadLog(true)" class="failures-chk">
+          Failures Only
+        </mat-checkbox>
+      </div>
+
+      <div class="i4c-filter-bar i4c-filter-bar--inset">
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label>Endpoint / ack no. / IP</mat-label>
+          <input matInput [(ngModel)]="logSearch" (keyup.enter)="loadLog(true)" (blur)="loadLog(true)" />
+        </mat-form-field>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label>HTTP status</mat-label>
+          <mat-select [(ngModel)]="logHttpStatus" (selectionChange)="loadLog(true)">
+            <mat-option value="">Any</mat-option>
+            <mat-option value="200">200 OK</mat-option>
+            <mat-option value="400">400 Bad request</mat-option>
+            <mat-option value="401">401 Not authorised</mat-option>
+            <mat-option value="403">403 Forbidden</mat-option>
+            <mat-option value="409">409 Duplicate</mat-option>
+            <mat-option value="500">500 Server error</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label>Response code</mat-label>
+          <input
+            matInput
+            [(ngModel)]="logResponseCode"
+            (keyup.enter)="loadLog(true)"
+            (blur)="loadLog(true)"
+            placeholder="e.g. 00, 11"
+          />
+        </mat-form-field>
+        <mifosx-i4c-date-range
+          label="Call time"
+          [range]="logDates"
+          (rangeChange)="onLogDates($event)"
+        ></mifosx-i4c-date-range>
+        <button
+          mat-stroked-button
+          class="i4c-filter-bar__clear"
+          (click)="clearLogFilters()"
+          [disabled]="!logHasFilters"
+        >
+          <fa-icon icon="times"></fa-icon> Clear filters
+        </button>
+      </div>
+
+      <div class="i4c-table-wrap">
+        <table class="i4c-table">
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Direction</th>
+              <th>Endpoint</th>
+              <th>HTTP Status</th>
+              <th>Response Code</th>
+              <th>Ack No.</th>
+              <th class="num">Latency (ms)</th>
+              <th>Caller IP</th>
+              <th>Error Details</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (l of log; track l.id) {
+              <tr class="clickable" (click)="openLogModal(l)">
+                <td>{{ l.created_at | date: 'dd MMM, HH:mm:ss' }}</td>
+                <td>
+                  <span class="direction-badge direction-badge--{{ l.direction?.toLowerCase() }}">
+                    {{ l.direction === 'IN' ? '↓ I4C → Bank' : '↑ Bank → I4C' }}
+                  </span>
+                </td>
+                <td>
+                  <span class="font-mono text-xs">{{ l.endpoint }}</span>
+                </td>
+                <td>
+                  <span
+                    class="i4c-badge"
+                    [class.i4c-badge--green]="ok(l.http_status)"
+                    [class.i4c-badge--red]="!ok(l.http_status)"
+                  >
+                    {{ l.http_status ?? 'N/A' }}
+                  </span>
+                </td>
+                <td>{{ l.response_code || '-' }}</td>
+                <td>
+                  <b>{{ l.acknowledgement_no || '-' }}</b>
+                </td>
+                <td class="num">{{ l.duration_ms }} ms</td>
+                <td>{{ l.client_ip || '-' }}</td>
+                <td [class.err-text]="isFailedCall(l)" [class.note-text]="!isFailedCall(l)">
+                  {{ logNote(l.error) || '-' }}
+                </td>
+              </tr>
+            } @empty {
+              <tr>
+                <td colspan="9" class="i4c-empty">
+                  <div class="empty-icon"><fa-icon icon="history"></fa-icon></div>
+                  <div>No API calls recorded.</div>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      <mat-paginator
+        class="i4c-paginator"
+        [length]="logTotal"
+        [pageIndex]="logPageIndex"
+        [pageSize]="logPageSize"
+        [pageSizeOptions]="pageSizes"
+        (page)="onLogPage($event)"
+        showFirstLastButtons
+        aria-label="API log pages"
+      ></mat-paginator>
+    </div>
+  }
+
+  <!-- ========================================================
+       MODERN POPUP WINDOW: API LOG JSON INSPECTION MODAL
+       ======================================================== -->
+  @if (selectedLogModal) {
+    <div class="i4c-modal-backdrop" (click)="closeLogModal()">
+      <div class="i4c-modal-window i4c-modal-window--wide" (click)="$event.stopPropagation()">
+        <!-- Modal Header -->
+        <div class="i4c-modal-header">
+          <div class="i4c-modal-header__title">
+            <fa-icon icon="code"></fa-icon>
+            <div>
+              <div class="modal-title-row">
+                <span
+                  >{{ selectedLogModal.direction === 'IN' ? 'Inbound Call' : 'Outbound Call' }}:
+                  {{ selectedLogModal.endpoint }}</span
+                >
+                <span
+                  class="i4c-badge"
+                  [class.i4c-badge--green]="ok(selectedLogModal.http_status)"
+                  [class.i4c-badge--red]="!ok(selectedLogModal.http_status)"
+                >
+                  HTTP {{ selectedLogModal.http_status ?? 'N/A' }}
+                </span>
+              </div>
+              <div class="i4c-modal-header__sub">
+                Time: {{ selectedLogModal.created_at | date: 'dd MMM yyyy, HH:mm:ss' }} • Latency:
+                {{ selectedLogModal.duration_ms }} ms • Client IP: {{ selectedLogModal.client_ip }}
+              </div>
+            </div>
+          </div>
+          <button class="modal-close-btn" (click)="closeLogModal()" aria-label="Close">
+            <fa-icon icon="times"></fa-icon>
+          </button>
+        </div>
+
+        <!-- Navigation Tabs inside the Modal -->
+        <div class="i4c-modal-tabs">
+          <button class="modal-tab" [class.modal-tab--active]="logModalTab === 'req'" (click)="logModalTab = 'req'">
+            <fa-icon icon="arrow-up"></fa-icon> Request Payload
+          </button>
+          <button class="modal-tab" [class.modal-tab--active]="logModalTab === 'res'" (click)="logModalTab = 'res'">
+            <fa-icon icon="arrow-down"></fa-icon> Response Payload
+          </button>
+        </div>
+
+        <!-- Modal Body -->
+        <div class="i4c-modal-body">
+          @if (logModalTab === 'req') {
+            <div class="payload-box">
+              <div class="payload-box__title">
+                <span>HTTP Request Payload (Masked)</span>
+                <button class="copy-chip" (click)="copyPayload(pretty(selectedLogModal.request_body), 'req-body')">
+                  <fa-icon icon="copy"></fa-icon> {{ copiedKey === 'req-body' ? 'Copied!' : 'Copy Request' }}
+                </button>
+              </div>
+              <pre class="i4c-json">{{ pretty(selectedLogModal.request_body) || 'No request body sent.' }}</pre>
+            </div>
+          }
+
+          @if (logModalTab === 'res') {
+            <div class="payload-box">
+              <div class="payload-box__title">
+                <span>HTTP Response Payload</span>
+                <button class="copy-chip" (click)="copyPayload(pretty(selectedLogModal.response_body), 'res-body')">
+                  <fa-icon icon="copy"></fa-icon> {{ copiedKey === 'res-body' ? 'Copied!' : 'Copy Response' }}
+                </button>
+              </div>
+              <pre class="i4c-json">{{ pretty(selectedLogModal.response_body) || 'No response body received.' }}</pre>
+            </div>
+          }
+
+          @if (selectedLogModal.error) {
+            @if (isFailedCall(selectedLogModal)) {
+              <div class="i4c-error">
+                <fa-icon icon="exclamation-circle"></fa-icon>
+                <span>Error logged: {{ logNote(selectedLogModal.error) }}</span>
+              </div>
+            } @else {
+              <div class="i4c-note">
+                <fa-icon icon="info-circle"></fa-icon>
+                <span>Note: {{ logNote(selectedLogModal.error) }}</span>
+              </div>
+            }
+          }
+        </div>
+
+        <!-- Modal Footer -->
+        <div class="i4c-modal-footer">
+          <button class="footer-btn-close" (click)="closeLogModal()">Close</button>
+        </div>
+      </div>
+    </div>
+  }
+
+  <!-- ========================================================
+       MODERN POPUP WINDOW: OUTBOX RESPONSE INSPECTION MODAL
+       ======================================================== -->
+  @if (selectedOutboxModal) {
+    <div class="i4c-modal-backdrop" (click)="closeOutboxModal()">
+      <div class="i4c-modal-window i4c-modal-window--wide" (click)="$event.stopPropagation()">
+        <div class="i4c-modal-header">
+          <div class="i4c-modal-header__title">
+            <fa-icon icon="paper-plane"></fa-icon>
+            <div>
+              <div class="modal-title-row">
+                <span
+                  >Outbox Response #{{ selectedOutboxModal.id }} (Ack #{{
+                    selectedOutboxModal.acknowledgement_no
+                  }})</span
+                >
+                <span
+                  class="i4c-badge"
+                  [class.i4c-badge--green]="selectedOutboxModal.status === 'SENT'"
+                  [class.i4c-badge--red]="selectedOutboxModal.status === 'FAILED'"
+                >
+                  {{ selectedOutboxModal.status }}
+                </span>
+              </div>
+              <div class="i4c-modal-header__sub">
+                Created: {{ selectedOutboxModal.created_at | date: 'dd MMM yyyy, HH:mm:ss' }} • Attempts:
+                {{ selectedOutboxModal.attempts }}
+              </div>
+            </div>
+          </div>
+          <button class="modal-close-btn" (click)="closeOutboxModal()" aria-label="Close">
+            <fa-icon icon="times"></fa-icon>
+          </button>
+        </div>
+
+        <div class="i4c-modal-body">
+          <div class="payload-box">
+            <div class="payload-box__title">
+              <span>Report Payload Prepared for I4C Delivery</span>
+              <button class="copy-chip" (click)="copyPayload(pretty(selectedOutboxModal.payload), 'outbox-payload')">
+                <fa-icon icon="copy"></fa-icon> {{ copiedKey === 'outbox-payload' ? 'Copied!' : 'Copy Payload' }}
+              </button>
+            </div>
+            <pre class="i4c-json">{{ pretty(selectedOutboxModal.payload) || 'No payload recorded.' }}</pre>
+          </div>
+
+          @if (selectedOutboxModal.response_body) {
+            <div class="payload-box">
+              <div class="payload-box__title">
+                <span>Response Received from I4C Gateway</span>
+                <button
+                  class="copy-chip"
+                  (click)="copyPayload(pretty(selectedOutboxModal.response_body), 'outbox-res')"
+                >
+                  <fa-icon icon="copy"></fa-icon> {{ copiedKey === 'outbox-res' ? 'Copied!' : 'Copy Response' }}
+                </button>
+              </div>
+              <pre class="i4c-json">{{ pretty(selectedOutboxModal.response_body) }}</pre>
+            </div>
+          }
+
+          @if (selectedOutboxModal.last_error) {
+            <div class="i4c-error">
+              <fa-icon icon="exclamation-circle"></fa-icon>
+              <span>Last Delivery Error: {{ selectedOutboxModal.last_error }}</span>
+            </div>
+          }
+        </div>
+
+        <div class="i4c-modal-footer">
+          @if (selectedOutboxModal.status === 'FAILED') {
+            <button mat-flat-button color="warn" (click)="retry(selectedOutboxModal); closeOutboxModal()">
+              <fa-icon icon="redo"></fa-icon> Retry Send Now
+            </button>
+          }
+          <button class="footer-btn-close" (click)="closeOutboxModal()">Close</button>
+        </div>
+      </div>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-outbox/i4c-outbox.component.scss

@@ -0,0 +1,191 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+
+@include i4c-skin;
+
+.compact {
+  width: 160px;
+  font-size: 13px;
+}
+
+.sub {
+  font-size: 11px;
+  color: #64748b;
+  margin-bottom: 4px;
+}
+
+.err-text {
+  color: #dc2626;
+  font-size: 11px;
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.head-hint {
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: normal;
+  margin-left: 8px;
+}
+
+.date-main {
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.mini-chips {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  .mini-chip {
+    padding: 2px 8px;
+    border-radius: 9999px;
+    font-size: 10.5px;
+    font-weight: 600;
+    color: #475569;
+    background: #f1f5f9;
+    border: 1px solid #e2e8f0;
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: #e2e8f0;
+      color: #0f172a;
+    }
+
+    &--active {
+      background: #2563eb;
+      color: #fff;
+      border-color: #2563eb;
+      box-shadow: 0 2px 6px rgb(37 99 235 / 25%);
+    }
+  }
+}
+
+.failures-chk {
+  margin-left: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.direction-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 7px;
+  border-radius: 5px;
+  font-size: 10px;
+  font-weight: 700;
+
+  &--in {
+    background: #eff6ff;
+    color: #1d4ed8;
+    border: 1px solid #bfdbfe;
+  }
+
+  &--out {
+    background: #f5f3ff;
+    color: #6d28d9;
+    border: 1px solid #ddd6fe;
+  }
+}
+
+.retry-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border-radius: 5px;
+  font-size: 10.5px;
+  font-weight: 700;
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover:not(:disabled) {
+    background: #fee2e2;
+    border-color: #fca5a5;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.modal-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.payload-box {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  &__title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12px;
+    font-weight: 700;
+    color: #1e293b;
+  }
+}
+
+.copy-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border-radius: 5px;
+  background: #f1f5f9;
+  border: 1px solid #cbd5e1;
+  color: #334155;
+  font-size: 10.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: #e2e8f0;
+    color: #0f172a;
+  }
+}
+
+.footer-btn-close {
+  padding: 6px 14px;
+  border-radius: 8px;
+  background: #e2e8f0;
+  color: #334155;
+  border: none;
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #cbd5e1;
+    color: #0f172a;
+  }
+}
+
+.note-text {
+  color: #64748b;
+  font-size: 12px;
+}

src/app/cfcfrms/i4c/i4c-outbox/i4c-outbox.component.ts

@@ -0,0 +1,306 @@
+/**
+ * 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 { DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { I4cService, i4cErrorMessage } from '../i4c.service';
+import { ALL_DATES, I4cDateRange, I4cDateRangeComponent } from '../i4c-date-range/i4c-date-range.component';
+
+/**
+ * Responses waiting for, or delivered to, I4C, with a retry for the failed ones; and the log of every call in
+ * either direction, which is what the periodic review of the API integration reads.
+ */
+@Component({
+  selector: 'mifosx-i4c-outbox',
+  templateUrl: './i4c-outbox.component.html',
+  styleUrls: ['./i4c-outbox.component.scss'],
+  imports: [
+    DatePipe,
+    FormsModule,
+    RouterLink,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatProgressBarModule,
+    MatPaginatorModule,
+    I4cDateRangeComponent,
+    FaIconComponent
+  ]
+})
+export class I4cOutboxComponent implements OnInit {
+  private i4c = inject(I4cService);
+  private route = inject(ActivatedRoute);
+  private snackBar = inject(MatSnackBar);
+
+  readonly outboxStatuses = [
+    '',
+    'PENDING',
+    'SENDING',
+    'SENT',
+    'FAILED'
+  ];
+  readonly pageSizes = [
+    10,
+    20,
+    50,
+    100
+  ];
+
+  outboxStatus = '';
+  outboxType = '';
+  outboxSearch = '';
+  outboxDates: I4cDateRange = { ...ALL_DATES };
+  outboxTotal = 0;
+  outboxPageIndex = 0;
+  outboxPageSize = 20;
+  outbox: any[] = [];
+
+  direction = '';
+  failuresOnly = false;
+  logSearch = '';
+  logHttpStatus = '';
+  logResponseCode = '';
+  logDates: I4cDateRange = { ...ALL_DATES };
+  logTotal = 0;
+  logPageIndex = 0;
+  logPageSize = 20;
+  log: any[] = [];
+  logEntry: any = null;
+
+  loading = false;
+  busyId: number | null = null;
+  error = '';
+
+  activeSection: 'all' | 'outbox' | 'log' = 'all';
+  selectedLogModal: any = null;
+  selectedOutboxModal: any = null;
+  logModalTab: 'req' | 'res' = 'req';
+  copiedKey = '';
+
+  ngOnInit(): void {
+    this.outboxStatus = this.route.snapshot.queryParamMap.get('status') || '';
+    this.loadOutbox();
+    this.loadLog();
+  }
+
+  setOutboxStatus(s: string): void {
+    this.outboxStatus = s;
+    this.loadOutbox(true);
+  }
+
+  setDirection(d: string): void {
+    this.direction = d;
+    this.loadLog(true);
+  }
+
+  onOutboxPage(e: PageEvent): void {
+    this.outboxPageIndex = e.pageIndex;
+    this.outboxPageSize = e.pageSize;
+    this.loadOutbox();
+  }
+
+  onOutboxDates(range: I4cDateRange): void {
+    this.outboxDates = range;
+    this.loadOutbox(true);
+  }
+
+  get outboxHasFilters(): boolean {
+    return !!(this.outboxStatus || this.outboxType || this.outboxSearch || this.outboxDates.preset !== 'ALL');
+  }
+
+  clearOutboxFilters(): void {
+    this.outboxStatus = '';
+    this.outboxType = '';
+    this.outboxSearch = '';
+    this.outboxDates = { ...ALL_DATES };
+    this.loadOutbox(true);
+  }
+
+  onLogPage(e: PageEvent): void {
+    this.logPageIndex = e.pageIndex;
+    this.logPageSize = e.pageSize;
+    this.loadLog();
+  }
+
+  onLogDates(range: I4cDateRange): void {
+    this.logDates = range;
+    this.loadLog(true);
+  }
+
+  get logHasFilters(): boolean {
+    return !!(
+      this.direction ||
+      this.failuresOnly ||
+      this.logSearch ||
+      this.logHttpStatus ||
+      this.logResponseCode ||
+      this.logDates.preset !== 'ALL'
+    );
+  }
+
+  clearLogFilters(): void {
+    this.direction = '';
+    this.failuresOnly = false;
+    this.logSearch = '';
+    this.logHttpStatus = '';
+    this.logResponseCode = '';
+    this.logDates = { ...ALL_DATES };
+    this.loadLog(true);
+  }
+
+  /** Reload the current page; a changed filter passes `fromFirstPage` so the officer lands on page one. */
+  loadOutbox(fromFirstPage = false): void {
+    if (fromFirstPage) {
+      this.outboxPageIndex = 0;
+    }
+    this.loading = true;
+    this.error = '';
+    this.i4c
+      .outbox({
+        status: this.outboxStatus,
+        type: this.outboxType,
+        search: this.outboxSearch.trim(),
+        fromDate: this.outboxDates.fromDate,
+        toDate: this.outboxDates.toDate,
+        offset: this.outboxPageIndex * this.outboxPageSize,
+        limit: this.outboxPageSize
+      })
+      .subscribe({
+        next: (page) => {
+          this.outbox = page.pageItems;
+          this.outboxTotal = page.totalFilteredRecords;
+          this.loading = false;
+        },
+        error: (e) => {
+          this.error = i4cErrorMessage(e);
+          this.loading = false;
+        }
+      });
+  }
+
+  loadLog(fromFirstPage = false): void {
+    if (fromFirstPage) {
+      this.logPageIndex = 0;
+    }
+    this.i4c
+      .apiLog({
+        direction: this.direction,
+        failures: this.failuresOnly || null,
+        search: this.logSearch.trim(),
+        httpStatus: this.logHttpStatus,
+        responseCode: this.logResponseCode.trim(),
+        fromDate: this.logDates.fromDate,
+        toDate: this.logDates.toDate,
+        offset: this.logPageIndex * this.logPageSize,
+        limit: this.logPageSize
+      })
+      .subscribe({
+        next: (page) => {
+          this.log = page.pageItems;
+          this.logTotal = page.totalFilteredRecords;
+        },
+        error: (e) => (this.error = i4cErrorMessage(e))
+      });
+  }
+
+  retry(row: any): void {
+    this.busyId = row.id;
+    this.i4c.retryOutbox(row.id).subscribe({
+      next: (r) => {
+        this.busyId = null;
+        this.snackBar.open(r?.sent ? 'Delivered to I4C.' : 'Queued; it will be sent again shortly.', 'OK', {
+          duration: 4000
+        });
+        this.loadOutbox();
+        this.loadLog();
+      },
+      error: (e) => {
+        this.busyId = null;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+
+  openLogModal(row: any): void {
+    this.selectedLogModal = { ...row };
+    this.logModalTab = 'req';
+    this.i4c.apiLogEntry(row.id).subscribe({
+      next: (entry) => (this.selectedLogModal = entry),
+      error: (e) => this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 })
+    });
+  }
+
+  closeLogModal(): void {
+    this.selectedLogModal = null;
+  }
+
+  openOutboxModal(row: any): void {
+    this.selectedOutboxModal = row;
+  }
+
+  closeOutboxModal(): void {
+    this.selectedOutboxModal = null;
+  }
+
+  copyPayload(text: string, key: string): void {
+    if (!text) {
+      return;
+    }
+    navigator.clipboard.writeText(text);
+    this.copiedKey = key;
+    this.snackBar.open('Payload copied to clipboard.', 'OK', { duration: 2500 });
+    setTimeout(() => {
+      if (this.copiedKey === key) {
+        this.copiedKey = '';
+      }
+    }, 2000);
+  }
+
+  /** A call failed when HTTP says so or I4C/the bank answered with a code other than 00. */
+  isFailedCall(log: any): boolean {
+    return (log?.http_status ?? 0) >= 400 || (!!log?.response_code && log.response_code !== '00');
+  }
+
+  /** Successful calls keep a short note in the error column, e.g. how I4C logged in; spell it out. */
+  logNote(text: string): string {
+    const modes: Record<string, string> = {
+      TOKEN: 'I4C logged in with a Bearer token',
+      BASIC: 'I4C logged in with Basic authentication',
+      BODY: 'I4C sent its username and password in the request body'
+    };
+    return (text || '').replace(/auth (TOKEN|BASIC|BODY)/g, (m, mode) => modes[mode] ?? m);
+  }
+
+  pretty(text: string): string {
+    if (!text) {
+      return '';
+    }
+    try {
+      return JSON.stringify(JSON.parse(text), null, 2);
+    } catch {
+      return text;
+    }
+  }
+
+  ok(status: number | null): boolean {
+    return status !== null && status !== undefined && status >= 200 && status < 300;
+  }
+}

src/app/cfcfrms/i4c/i4c-request-detail/i4c-request-detail.component.html

@@ -0,0 +1,334 @@
+<!--
+  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="i4c-page">
+  <!-- Top Action Toolbar -->
+  <div class="i4c-toolbar">
+    <a mat-stroked-button routerLink="../" class="back-btn"> <fa-icon icon="arrow-left"></fa-icon> All Complaints </a>
+
+    @if (data) {
+      <div class="ack-badge-strip">
+        <span class="label">Ack No:</span>
+        <b class="val">{{ data.acknowledgement_no }}</b>
+        <button class="copy-chip" (click)="copyAck(data.acknowledgement_no)">
+          <fa-icon icon="copy"></fa-icon> Copy
+        </button>
+      </div>
+    }
+
+    <span class="i4c-toolbar__spacer"></span>
+
+    @if (canReprocess) {
+      <button mat-flat-button color="primary" (click)="reprocess()" [disabled]="busy">
+        <fa-icon icon="redo" [animation]="busy ? 'spin' : undefined"></fa-icon> Reprocess Now
+      </button>
+    }
+    <button mat-stroked-button (click)="load()" [disabled]="loading">
+      <fa-icon icon="sync" [animation]="loading ? 'spin' : undefined"></fa-icon> Refresh
+    </button>
+  </div>
+
+  @if (loading || busy) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">
+      <fa-icon icon="exclamation-circle"></fa-icon>
+      <span>{{ error }}</span>
+    </div>
+  }
+
+  @if (data) {
+    <!-- Main Top Info: Customer Target Account + Processing -->
+    <div class="i4c-grid-2">
+      <!-- Target Account Info -->
+      <div class="i4c-card">
+        <div class="i4c-card__head">
+          <fa-icon icon="inbox"></fa-icon>
+          <span>Complaint Details (From I4C)</span>
+        </div>
+        <div class="i4c-card__body">
+          <dl class="i4c-kv">
+            <dt>Acknowledgement No.</dt>
+            <dd>
+              <b class="text-accent">{{ data.acknowledgement_no }}</b>
+            </dd>
+
+            <dt>CBS Internal Job ID</dt>
+            <dd>{{ data.job_id }}</dd>
+
+            <dt>Sub-Category</dt>
+            <dd>
+              <span class="cat-chip">{{ data.sub_category }}</span>
+            </dd>
+
+            <dt>Account in this Bank</dt>
+            <dd>
+              <b>{{ data.payer_account_number }}</b>
+            </dd>
+
+            <dt>Complainant Bank</dt>
+            <dd>{{ data.payer_bank }} {{ data.payer_bank_code ? '(' + data.payer_bank_code + ')' : '' }}</dd>
+
+            <dt>Payment Mode / Type</dt>
+            <dd>{{ data.mode_of_payment || '-' }} {{ data.transaction_type ? '/ ' + data.transaction_type : '' }}</dd>
+
+            <dt>Wallet Reference</dt>
+            <dd>{{ data.wallet || 'None' }}</dd>
+
+            <dt>State &amp; District</dt>
+            <dd>{{ data.state }} / {{ data.district }}</dd>
+
+            <dt>Received At</dt>
+            <dd>{{ data.received_at | date: 'dd MMM yyyy, HH:mm:ss' }} from {{ data.source_ip }}</dd>
+          </dl>
+        </div>
+      </div>
+
+      <!-- Processing State Info -->
+      <div class="i4c-card">
+        <div class="i4c-card__head">
+          <fa-icon icon="tasks"></fa-icon>
+          <span>Automation &amp; Processing Outcome</span>
+        </div>
+        <div class="i4c-card__body">
+          <dl class="i4c-kv">
+            <dt>Processing Status</dt>
+            <dd>
+              <span class="i4c-badge">{{ data.status }}</span>
+            </dd>
+
+            <dt>Processing Attempts</dt>
+            <dd>{{ data.processing_attempts }}</dd>
+
+            <dt>Processed On</dt>
+            <dd>{{ data.processed_at ? (data.processed_at | date: 'dd MMM yyyy, HH:mm:ss') : 'Not yet processed' }}</dd>
+
+            <dt>Total Amount Held</dt>
+            <dd>
+              <b class="text-accent">₹{{ data.amount_held | number: '1.2-2' }}</b>
+            </dd>
+
+            <dt>Outbox Response Status</dt>
+            <dd>
+              <span class="i4c-badge">{{ data.response_status || 'NOT YET SENT' }}</span>
+            </dd>
+
+            @if (data.processing_error) {
+              <dt>Last Processing Error</dt>
+              <dd class="err-text">{{ data.processing_error }}</dd>
+            }
+          </dl>
+        </div>
+      </div>
+    </div>
+
+    <!-- Incidents Table -->
+    <div class="i4c-card">
+      <div class="i4c-card__head">
+        <fa-icon icon="list-alt"></fa-icon>
+        <span>Reported Incidents &amp; CBS Matching Engine Outcomes</span>
+      </div>
+      <div class="i4c-card__body i4c-table-wrap">
+        <table class="i4c-table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>RRN</th>
+              <th>Date &amp; Time</th>
+              <th class="num">Amount (₹)</th>
+              <th class="num">Disputed (₹)</th>
+              <th class="num">Layer</th>
+              <th>Match Method</th>
+              <th>Outcome</th>
+              <th class="num">Held Amount</th>
+              <th>Remarks</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (inc of data.incidents; track inc.id) {
+              <tr>
+                <td>
+                  <b>{{ inc.seq_no }}</b>
+                </td>
+                <td>
+                  <span class="font-mono">{{ inc.rrn }}</span>
+                </td>
+                <td>{{ inc.transaction_date }} {{ inc.transaction_time }}</td>
+                <td class="num">{{ inc.amount | number: '1.2-2' }}</td>
+                <td class="num">{{ inc.disputed_amount | number: '1.2-2' }}</td>
+                <td class="num font-semibold">{{ inc.layer }}</td>
+                <td>
+                  <span>{{ methodLabel(inc.match_method) }}</span>
+                  @if (inc.matched_txn_id) {
+                    <div class="sub">Txn #{{ inc.matched_txn_id }}</div>
+                  }
+                </td>
+                <td>
+                  <span class="i4c-badge" [class]="outcomeClass(inc.outcome)">{{ inc.outcome || 'PENDING' }}</span>
+                  <div class="sub">Code: {{ inc.status_code || '-' }}</div>
+                </td>
+                <td class="num">
+                  @if (holdFor(inc.id); as hold) {
+                    ₹{{ hold.amount_held | number: '1.2-2' }}
+                    @if (hold.shortfall > 0) {
+                      <div class="sub err-text">Short: ₹{{ hold.shortfall | number: '1.2-2' }}</div>
+                    }
+                  } @else {
+                    -
+                  }
+                </td>
+                <td>{{ inc.remarks || '-' }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Section 6 Findings -->
+    <div class="i4c-card">
+      <div class="i4c-card__head">
+        <fa-icon icon="paper-plane"></fa-icon>
+        <span>Entries Reported to I4C (Section 6 Compliance)</span>
+      </div>
+      <div class="i4c-card__body i4c-table-wrap">
+        <table class="i4c-table">
+          <thead>
+            <tr>
+              <th>Incident</th>
+              <th>Transaction Type</th>
+              <th class="num">Amount (₹)</th>
+              <th class="num">Disputed (₹)</th>
+              <th>Status Code</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (f of data.findings; track f.id) {
+              <tr>
+                <td>
+                  <b>{{ f.incident_id }}</b>
+                </td>
+                <td>{{ f.txn_type }} ({{ f.txn_type_id }})</td>
+                <td class="num">₹{{ f.amount | number: '1.2-2' }}</td>
+                <td class="num">₹{{ f.disputed_amount | number: '1.2-2' }}</td>
+                <td>
+                  <span class="i4c-badge">{{ f.status_code }}</span>
+                </td>
+                <td>
+                  <button class="table-action-btn" (click)="openEntry = openEntry === f.id ? null : f.id">
+                    <fa-icon [icon]="openEntry === f.id ? 'eye-slash' : 'eye'"></fa-icon>
+                    <span>{{ openEntry === f.id ? 'Hide JSON' : 'View JSON' }}</span>
+                  </button>
+                </td>
+              </tr>
+              @if (openEntry === f.id) {
+                <tr class="finding-json-row">
+                  <td colspan="6" class="finding-json-cell">
+                    <div class="finding-json-box">
+                      <div class="finding-json-head">
+                        <span> <fa-icon icon="code"></fa-icon> Finding #{{ f.id }} Payload </span>
+                        <button type="button" class="copy-chip" (click)="copyAck(pretty(f.entry_json))">
+                          <fa-icon icon="copy"></fa-icon>
+                          <span>Copy</span>
+                        </button>
+                      </div>
+                      <pre class="i4c-json">{{ pretty(f.entry_json) }}</pre>
+                    </div>
+                  </td>
+                </tr>
+              }
+            } @empty {
+              <tr>
+                <td colspan="6" class="i4c-empty">No section 6 findings reported yet.</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Outbox Delivery -->
+    <div class="i4c-card">
+      <div class="i4c-card__head">
+        <fa-icon icon="history"></fa-icon>
+        <span>Delivery to I4C Outbox Queue</span>
+      </div>
+      <div class="i4c-card__body i4c-table-wrap">
+        <table class="i4c-table">
+          <thead>
+            <tr>
+              <th>Created At</th>
+              <th>Status</th>
+              <th class="num">Attempts</th>
+              <th>HTTP Code</th>
+              <th>Sent Timestamp</th>
+              <th>Error</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (o of data.outbox; track o.id) {
+              <tr>
+                <td>{{ o.created_at | date: 'dd MMM, HH:mm:ss' }}</td>
+                <td>
+                  <span class="i4c-badge">{{ o.status }}</span>
+                </td>
+                <td class="num">{{ o.attempts }}</td>
+                <td>
+                  <span class="font-mono">{{ o.http_status ?? '-' }}</span>
+                </td>
+                <td>{{ o.sent_at ? (o.sent_at | date: 'dd MMM, HH:mm:ss') : '-' }}</td>
+                <td class="err-text">{{ o.last_error || '-' }}</td>
+                <td>
+                  @if (o.status === 'FAILED') {
+                    <button mat-stroked-button color="warn" (click)="retry(o.id)" [disabled]="busy">
+                      <fa-icon icon="redo"></fa-icon> Retry Send
+                    </button>
+                  }
+                </td>
+              </tr>
+            } @empty {
+              <tr>
+                <td colspan="7" class="i4c-empty">No response written to outbox yet.</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Raw Payloads Accordion -->
+    <div class="i4c-card">
+      <div class="i4c-card__head">
+        <fa-icon icon="code"></fa-icon>
+        <span>Cryptographic &amp; Raw Payloads Inspection</span>
+        <span class="i4c-toolbar__spacer"></span>
+        <button mat-button (click)="showRaw = !showRaw">
+          <fa-icon [icon]="showRaw ? 'eye-slash' : 'eye'"></fa-icon>
+          <span>{{ showRaw ? 'Hide Payloads' : 'Inspect Payloads' }}</span>
+        </button>
+      </div>
+      @if (showRaw) {
+        <div class="i4c-card__body payloads">
+          <div>
+            <div class="sub-title">Received from I4C Gateway (Sensitive credentials and PAN masked)</div>
+            <pre class="i4c-json">{{ pretty(data.raw_payload) }}</pre>
+          </div>
+          @for (o of data.outbox; track o.id) {
+            <div>
+              <div class="sub-title">Response #{{ o.id }} Sent to I4C</div>
+              <pre class="i4c-json">{{ pretty(o.payload) }}</pre>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-request-detail/i4c-request-detail.component.scss

@@ -0,0 +1,69 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+
+@include i4c-skin;
+
+.ack-badge-strip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 9999px;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+
+  .label {
+    font-size: 10px;
+    font-weight: 600;
+    color: #64748b;
+  }
+
+  .val {
+    font-size: 12px;
+    color: #0f172a;
+  }
+}
+
+.text-accent {
+  color: #2563eb;
+}
+
+.cat-chip {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  font-size: 10px;
+  color: #475569;
+}
+
+.sub {
+  font-size: 10.5px;
+  color: #64748b;
+  margin-top: 1px;
+}
+
+.sub-title {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: #475569;
+  margin-bottom: 4px;
+}
+
+.err-text {
+  color: #dc2626;
+  font-size: 11px;
+}
+
+.payloads {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}

src/app/cfcfrms/i4c/i4c-request-detail/i4c-request-detail.component.ts

@@ -0,0 +1,166 @@
+/**
+ * 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 { DatePipe, DecimalPipe } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { I4cService, i4cErrorMessage } from '../i4c.service';
+
+/**
+ * One complaint from I4C end to end: what I4C sent, what the bank matched in its books, the holds it placed, every
+ * entry it reported back, and each attempt to deliver that report.
+ */
+@Component({
+  selector: 'mifosx-i4c-request-detail',
+  templateUrl: './i4c-request-detail.component.html',
+  styleUrls: ['./i4c-request-detail.component.scss'],
+  imports: [
+    DatePipe,
+    DecimalPipe,
+    RouterLink,
+    MatButtonModule,
+    MatProgressBarModule,
+    FaIconComponent
+  ]
+})
+export class I4cRequestDetailComponent implements OnInit {
+  private i4c = inject(I4cService);
+  private route = inject(ActivatedRoute);
+  private snackBar = inject(MatSnackBar);
+
+  data: any = null;
+  loading = false;
+  busy = false;
+  error = '';
+  showRaw = false;
+  openEntry: number | null = null;
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  get id(): number {
+    return Number(this.route.snapshot.paramMap.get('id'));
+  }
+
+  load(): void {
+    this.loading = true;
+    this.error = '';
+    this.i4c.request(this.id).subscribe({
+      next: (d) => {
+        this.data = d;
+        this.loading = false;
+      },
+      error: (e) => {
+        this.error = i4cErrorMessage(e);
+        this.loading = false;
+      }
+    });
+  }
+
+  get canReprocess(): boolean {
+    return this.data?.status === 'RETRY' || this.data?.status === 'RECEIVED';
+  }
+
+  reprocess(): void {
+    this.busy = true;
+    this.i4c.reprocess(this.id).subscribe({
+      next: (d) => {
+        this.data = d;
+        this.busy = false;
+        this.snackBar.open('Complaint processed again.', 'OK', { duration: 3000 });
+      },
+      error: (e) => {
+        this.busy = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+
+  retry(outboxId: number): void {
+    this.busy = true;
+    this.i4c.retryOutbox(outboxId).subscribe({
+      next: (r) => {
+        this.busy = false;
+        this.snackBar.open(
+          r?.sent ? 'Response delivered to I4C.' : 'Retry queued; it will be sent again shortly.',
+          'OK',
+          {
+            duration: 4000
+          }
+        );
+        this.load();
+      },
+      error: (e) => {
+        this.busy = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+
+  findingsFor(incidentId: number): any[] {
+    return (this.data?.findings || []).filter((f: any) => f.incident_id === incidentId);
+  }
+
+  holdFor(incidentId: number): any {
+    return (this.data?.holds || []).find((h: any) => h.incident_id === incidentId);
+  }
+
+  pretty(json: string): string {
+    try {
+      return JSON.stringify(JSON.parse(json), null, 2);
+    } catch {
+      return json;
+    }
+  }
+
+  outcomeClass(outcome: string): string {
+    switch (outcome) {
+      case 'HELD':
+      case 'TRACED':
+        return 'i4c-badge--green';
+      case 'PARTIALLY_HELD':
+      case 'PROSPECTIVE_HOLD':
+        return 'i4c-badge--amber';
+      case 'NOT_FOUND':
+      case 'NO_MATCH':
+      case 'NOT_HOLDABLE':
+      case 'ERROR':
+        return 'i4c-badge--red';
+      default:
+        return '';
+    }
+  }
+
+  methodLabel(method: string): string {
+    switch (method) {
+      case 'RRN_FUND_TRANSFER':
+        return 'RRN on outward transfer';
+      case 'RRN_REFERENCE_TEXT':
+        return 'RRN in transaction narration';
+      case 'AMOUNT_DATE':
+        return 'Amount + date (no RRN in CBS)';
+      case 'NONE':
+        return 'Not matched';
+      default:
+        return method || '-';
+    }
+  }
+
+  copyAck(text: string): void {
+    if (!text) {
+      return;
+    }
+    navigator.clipboard.writeText(text);
+    this.snackBar.open(`Copied: ${text}`, 'OK', { duration: 2500 });
+  }
+}

src/app/cfcfrms/i4c/i4c-requests/i4c-requests.component.html

@@ -0,0 +1,566 @@
+<!--
+  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="i4c-page">
+  <!-- Modern Toolbar & Filter Chips -->
+  <div class="i4c-toolbar">
+    <div class="i4c-filter-chips">
+      <button class="filter-chip" [class.filter-chip--active]="status === ''" (click)="setStatus('')">
+        <span>All Complaints</span>
+      </button>
+      @for (s of statuses; track s) {
+        <button class="filter-chip" [class.filter-chip--active]="status === s" (click)="setStatus(s)">
+          <span>{{ s }}</span>
+        </button>
+      }
+    </div>
+
+    <span class="i4c-toolbar__spacer"></span>
+
+    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="search-input">
+      <mat-label>Search acknowledgement / account / job id</mat-label>
+      <input matInput [(ngModel)]="search" (keyup.enter)="load(true)" placeholder="Type & hit enter..." />
+    </mat-form-field>
+
+    <button mat-flat-button color="primary" class="search-btn" (click)="load(true)">
+      <fa-icon icon="search"></fa-icon> Search
+    </button>
+
+    <span class="count-tag">{{ total }} records</span>
+  </div>
+
+  <div class="i4c-filter-bar">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Sub-category</mat-label>
+      <input matInput [(ngModel)]="subCategory" (keyup.enter)="load(true)" (blur)="load(true)" placeholder="e.g. UPI" />
+    </mat-form-field>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Layer</mat-label>
+      <mat-select [(ngModel)]="layer" (selectionChange)="load(true)">
+        <mat-option value="">All layers</mat-option>
+        <mat-option value="0">Layer 0 (victim's account)</mat-option>
+        <mat-option value="1">Layer 1+ (money landed here)</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Response to I4C</mat-label>
+      <mat-select [(ngModel)]="response" (selectionChange)="load(true)">
+        <mat-option value="">Any</mat-option>
+        <mat-option value="SENT">Sent</mat-option>
+        <mat-option value="PENDING">Pending / sending</mat-option>
+        <mat-option value="FAILED">Failed</mat-option>
+        <mat-option value="NONE">Not yet created</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mifosx-i4c-date-range label="Received" [range]="dates" (rangeChange)="onDates($event)"></mifosx-i4c-date-range>
+    <button mat-stroked-button class="i4c-filter-bar__clear" (click)="clearFilters()" [disabled]="!hasFilters">
+      <fa-icon icon="times"></fa-icon> Clear filters
+    </button>
+  </div>
+
+  @if (loading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">
+      <fa-icon icon="exclamation-circle"></fa-icon>
+      <span>{{ error }}</span>
+    </div>
+  }
+
+  <!-- Complaints Data Table -->
+  <div class="i4c-card">
+    <div class="i4c-card__head">
+      <fa-icon icon="inbox"></fa-icon>
+      <span>I4C-MHA Cyber Fraud Complaints Log</span>
+      <span class="head-hint">Click any complaint to open modern detail popup window</span>
+    </div>
+
+    <div class="i4c-table-wrap">
+      <table class="i4c-table">
+        <thead>
+          <tr>
+            <th>Received</th>
+            <th>Acknowledgement No.</th>
+            <th>Sub-Category</th>
+            <th>Target Account</th>
+            <th class="num">Layer</th>
+            <th class="num">Incidents</th>
+            <th class="num">Held (₹)</th>
+            <th>Status</th>
+            <th>I4C Response</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of rows; track row.id) {
+            <tr class="clickable" (click)="openModal(row)">
+              <td>
+                <span class="date-main">{{ row.received_at | date: 'dd MMM yyyy' }}</span>
+                <div class="sub">{{ row.received_at | date: 'HH:mm:ss' }}</div>
+              </td>
+              <td>
+                <div class="ack-cell">
+                  <span class="ack-no">{{ row.acknowledgement_no }}</span>
+                  <button
+                    class="copy-chip"
+                    (click)="copyAck(row.acknowledgement_no, 'ack-' + row.id, $event)"
+                    title="Copy Ack No."
+                  >
+                    <fa-icon icon="copy"></fa-icon>
+                    <span>{{ copiedId === 'ack-' + row.id ? 'Copied' : 'Copy' }}</span>
+                  </button>
+                </div>
+                <div class="sub">Job: {{ row.job_id }}</div>
+              </td>
+              <td>
+                <span class="cat-pill">{{ row.sub_category || 'N/A' }}</span>
+              </td>
+              <td>
+                <b>{{ row.payer_account_number }}</b>
+              </td>
+              <td class="num font-semibold">{{ row.max_layer }}</td>
+              <td class="num">{{ row.incidents }}</td>
+              <td class="num font-bold">₹{{ row.amount_held | number: '1.2-2' }}</td>
+              <td>
+                <span class="i4c-badge" [class]="statusClass(row.status)">{{ row.status }}</span>
+                @if (row.processing_error) {
+                  <div class="sub err-text" [title]="row.processing_error">{{ row.processing_error }}</div>
+                }
+              </td>
+              <td>
+                <span class="i4c-badge" [class]="responseClass(row.response_status)">
+                  {{ row.response_status || 'NOT YET' }}
+                </span>
+              </td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="9" class="i4c-empty">
+                <div class="empty-icon"><fa-icon icon="inbox"></fa-icon></div>
+                <div>No complaints from I4C matched your query.</div>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+    <mat-paginator
+      class="i4c-paginator"
+      [length]="total"
+      [pageIndex]="pageIndex"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="pageSizes"
+      (page)="onPage($event)"
+      showFirstLastButtons
+      aria-label="Complaints pages"
+    ></mat-paginator>
+  </div>
+
+  <!-- ========================================================
+       MODERN POPUP WINDOW: COMPLAINT DETAILS MODAL
+       ======================================================== -->
+  @if (selectedComplaint) {
+    <div class="i4c-modal-backdrop" (click)="closeModal()">
+      <div class="i4c-modal-window i4c-modal-window--wide" (click)="$event.stopPropagation()">
+        <!-- Header -->
+        <div class="i4c-modal-header">
+          <div class="i4c-modal-header__title">
+            <fa-icon icon="inbox"></fa-icon>
+            <div>
+              <div class="modal-title-row">
+                <span>Ack #{{ selectedComplaint.acknowledgement_no }}</span>
+                <span class="i4c-badge" [class]="statusClass(selectedComplaint.status)">{{
+                  selectedComplaint.status
+                }}</span>
+                <button class="copy-chip" (click)="copyAck(selectedComplaint.acknowledgement_no, 'modal-ack')">
+                  <fa-icon icon="copy"></fa-icon>
+                  <span>{{ copiedId === 'modal-ack' ? 'Copied' : 'Copy Ack' }}</span>
+                </button>
+              </div>
+              <div class="i4c-modal-header__sub">
+                Job ID: {{ selectedComplaint.job_id }} • Received:
+                {{ selectedComplaint.received_at | date: 'dd MMM yyyy, HH:mm:ss' }}
+              </div>
+            </div>
+          </div>
+          <div class="i4c-modal-header__actions">
+            <button class="modal-close-btn" (click)="closeModal()" aria-label="Close">
+              <fa-icon icon="times"></fa-icon>
+            </button>
+          </div>
+        </div>
+
+        <!-- Navigation Tabs inside the Modal -->
+        <div class="i4c-modal-tabs">
+          <button class="modal-tab" [class.modal-tab--active]="modalTab === 'overview'" (click)="modalTab = 'overview'">
+            <fa-icon icon="info-circle"></fa-icon> Overview &amp; Account
+          </button>
+          <button
+            class="modal-tab"
+            [class.modal-tab--active]="modalTab === 'incidents'"
+            (click)="modalTab = 'incidents'"
+          >
+            <fa-icon icon="tasks"></fa-icon> Incidents ({{
+              selectedComplaint.incidents?.length || selectedComplaint.incidents || 0
+            }})
+          </button>
+          <button class="modal-tab" [class.modal-tab--active]="modalTab === 'findings'" (click)="modalTab = 'findings'">
+            <fa-icon icon="list-alt"></fa-icon> Section 6 Findings ({{ selectedComplaint.findings?.length || 0 }})
+          </button>
+          <button class="modal-tab" [class.modal-tab--active]="modalTab === 'outbox'" (click)="modalTab = 'outbox'">
+            <fa-icon icon="paper-plane"></fa-icon> Outbox Responses ({{ selectedComplaint.outbox?.length || 0 }})
+          </button>
+          <button class="modal-tab" [class.modal-tab--active]="modalTab === 'payloads'" (click)="modalTab = 'payloads'">
+            <fa-icon icon="code"></fa-icon> Raw JSON
+          </button>
+        </div>
+
+        <!-- Modal Body -->
+        <div class="i4c-modal-body">
+          @if (detailLoading) {
+            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+          }
+          @if (detailError) {
+            <div class="i4c-error">{{ detailError }}</div>
+          }
+
+          <!-- TAB 1: OVERVIEW -->
+          @if (modalTab === 'overview') {
+            <div class="i4c-grid-2">
+              <div class="i4c-card">
+                <div class="i4c-card__head"><fa-icon icon="user-shield"></fa-icon> Target Customer Account</div>
+                <div class="i4c-card__body">
+                  <dl class="i4c-kv">
+                    <dt>Account Number</dt>
+                    <dd>
+                      <b>{{ selectedComplaint.payer_account_number }}</b>
+                    </dd>
+
+                    <dt>Sub-Category</dt>
+                    <dd>{{ selectedComplaint.sub_category }}</dd>
+
+                    <dt>Complainant Bank</dt>
+                    <dd>
+                      {{ selectedComplaint.payer_bank }}
+                      {{ selectedComplaint.payer_bank_code ? '(' + selectedComplaint.payer_bank_code + ')' : '' }}
+                    </dd>
+
+                    <dt>Payment Mode</dt>
+                    <dd>
+                      {{ selectedComplaint.mode_of_payment || 'N/A' }}
+                      {{ selectedComplaint.transaction_type ? '/ ' + selectedComplaint.transaction_type : '' }}
+                    </dd>
+
+                    <dt>Wallet Reference</dt>
+                    <dd>{{ selectedComplaint.wallet || 'None' }}</dd>
+
+                    <dt>State / District</dt>
+                    <dd>{{ selectedComplaint.state }} / {{ selectedComplaint.district }}</dd>
+
+                    <dt>Source IP</dt>
+                    <dd>{{ selectedComplaint.source_ip || '-' }}</dd>
+                  </dl>
+                </div>
+              </div>
+
+              <div class="i4c-card">
+                <div class="i4c-card__head"><fa-icon icon="sync"></fa-icon> Processing Status</div>
+                <div class="i4c-card__body">
+                  <dl class="i4c-kv">
+                    <dt>Processing Status</dt>
+                    <dd>
+                      <span class="i4c-badge" [class]="statusClass(selectedComplaint.status)">{{
+                        selectedComplaint.status
+                      }}</span>
+                    </dd>
+
+                    <dt>Processing Attempts</dt>
+                    <dd>{{ selectedComplaint.processing_attempts ?? 1 }}</dd>
+
+                    <dt>Processed Timestamp</dt>
+                    <dd>
+                      {{
+                        selectedComplaint.processed_at
+                          ? (selectedComplaint.processed_at | date: 'dd MMM yyyy, HH:mm:ss')
+                          : 'Pending processing'
+                      }}
+                    </dd>
+
+                    <dt>Total Held Amount</dt>
+                    <dd>
+                      <b class="amount-accent">₹{{ selectedComplaint.amount_held | number: '1.2-2' }}</b>
+                    </dd>
+
+                    <dt>Response to I4C</dt>
+                    <dd>
+                      <span class="i4c-badge" [class]="responseClass(selectedComplaint.response_status)">
+                        {{ selectedComplaint.response_status || 'NOT YET SENT' }}
+                      </span>
+                    </dd>
+
+                    @if (selectedComplaint.processing_error) {
+                      <dt>Last Error</dt>
+                      <dd class="err-text">{{ selectedComplaint.processing_error }}</dd>
+                    }
+                  </dl>
+                </div>
+              </div>
+            </div>
+          }
+
+          <!-- TAB 2: INCIDENTS -->
+          @if (modalTab === 'incidents') {
+            <div class="i4c-card">
+              <div class="i4c-table-wrap">
+                <table class="i4c-table">
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>RRN</th>
+                      <th>Date</th>
+                      <th class="num">Amount (₹)</th>
+                      <th class="num">Disputed (₹)</th>
+                      <th class="num">Layer</th>
+                      <th>Matched By</th>
+                      <th>Outcome</th>
+                      <th class="num">Held (₹)</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (inc of selectedComplaint.incidents; track inc.id) {
+                      <tr>
+                        <td>
+                          <b>{{ inc.seq_no }}</b>
+                        </td>
+                        <td>{{ inc.rrn }}</td>
+                        <td>{{ inc.transaction_date }} {{ inc.transaction_time }}</td>
+                        <td class="num">{{ inc.amount | number: '1.2-2' }}</td>
+                        <td class="num">{{ inc.disputed_amount | number: '1.2-2' }}</td>
+                        <td class="num">{{ inc.layer }}</td>
+                        <td>
+                          <span>{{ inc.match_method || 'EXACT' }}</span>
+                          @if (inc.matched_txn_id) {
+                            <div class="sub">Txn #{{ inc.matched_txn_id }}</div>
+                          }
+                        </td>
+                        <td>
+                          <span class="i4c-badge" [class]="outcomeClass(inc.outcome)">{{
+                            inc.outcome || 'PENDING'
+                          }}</span>
+                          <div class="sub">Code: {{ inc.status_code || '-' }}</div>
+                        </td>
+                        <td class="num">
+                          @if (holdFor(inc.id); as hold) {
+                            ₹{{ hold.amount_held | number: '1.2-2' }}
+                            @if (hold.shortfall > 0) {
+                              <div class="sub err-text">Short ₹{{ hold.shortfall | number: '1.2-2' }}</div>
+                            }
+                          } @else {
+                            -
+                          }
+                        </td>
+                      </tr>
+                    } @empty {
+                      <tr>
+                        <td colspan="9" class="i4c-empty">No incident details found.</td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          }
+
+          <!-- TAB 3: FINDINGS (SECTION 6) -->
+          @if (modalTab === 'findings') {
+            <div class="i4c-card">
+              <div class="i4c-table-wrap">
+                <table class="i4c-table">
+                  <thead>
+                    <tr>
+                      <th>Incident ID</th>
+                      <th>Transaction Type</th>
+                      <th class="num">Amount (₹)</th>
+                      <th class="num">Disputed (₹)</th>
+                      <th>Status Code</th>
+                      <th>Raw JSON</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (f of selectedComplaint.findings; track f.id) {
+                      <tr>
+                        <td>{{ f.incident_id }}</td>
+                        <td>{{ f.txn_type }} ({{ f.txn_type_id }})</td>
+                        <td class="num">₹{{ f.amount | number: '1.2-2' }}</td>
+                        @if (f.disputed_amount === null || f.disputed_amount === undefined) {
+                          <td
+                            class="num muted-cell"
+                            title="The specification has no disputed amount in a Transaction Put on Hold entry"
+                          >
+                            -
+                          </td>
+                        } @else {
+                          <td class="num">₹{{ f.disputed_amount | number: '1.2-2' }}</td>
+                        }
+                        <td>
+                          <span
+                            class="i4c-badge"
+                            [class]="statusCodeClass(f.status_code)"
+                            [title]="statusCodeMeaning(f.status_code)"
+                          >
+                            {{ f.status_code }} · {{ statusCodeMeaning(f.status_code) }}
+                          </span>
+                        </td>
+                        <td>
+                          <button class="table-action-btn" (click)="toggleFindingJson(f.id)">
+                            {{ openFindingJsonId === f.id ? 'Hide JSON' : 'View JSON' }}
+                          </button>
+                        </td>
+                      </tr>
+                      @if (openFindingJsonId === f.id) {
+                        <tr class="finding-json-row">
+                          <td colspan="6" class="finding-json-cell">
+                            <div class="finding-json-box">
+                              <div class="finding-json-head">
+                                <span> <fa-icon icon="code"></fa-icon> Finding #{{ f.id }} Payload </span>
+                                <button
+                                  type="button"
+                                  class="copy-chip"
+                                  (click)="copyAck(prettyJson(f.entry_json), 'finding-' + f.id, $event)"
+                                >
+                                  <fa-icon icon="copy"></fa-icon>
+                                  <span>{{ copiedId === 'finding-' + f.id ? 'Copied!' : 'Copy' }}</span>
+                                </button>
+                              </div>
+                              <pre class="i4c-json">{{ prettyJson(f.entry_json) }}</pre>
+                            </div>
+                          </td>
+                        </tr>
+                      }
+                    } @empty {
+                      <tr>
+                        <td colspan="6" class="i4c-empty">No section 6 findings reported yet.</td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          }
+
+          <!-- TAB 4: OUTBOX RESPONSES -->
+          @if (modalTab === 'outbox') {
+            <div class="i4c-card">
+              <div class="i4c-table-wrap">
+                <table class="i4c-table">
+                  <thead>
+                    <tr>
+                      <th>Created</th>
+                      <th title="ACK: separate acknowledgement callback. RESPONSE: the Section 6 findings.">Type</th>
+                      <th>Status</th>
+                      <th class="num">Attempts</th>
+                      <th>HTTP Code</th>
+                      <th>Sent Time</th>
+                      <th>Error</th>
+                      <th>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (o of selectedComplaint.outbox; track o.id) {
+                      <tr>
+                        <td>{{ o.created_at | date: 'dd MMM, HH:mm:ss' }}</td>
+                        <td>
+                          <span class="i4c-badge" [class.i4c-badge--blue]="o.message_type === 'ACK'">{{
+                            o.message_type === 'ACK' ? 'ACK' : 'RESPONSE'
+                          }}</span>
+                        </td>
+                        <td>
+                          <span class="i4c-badge" [class]="responseClass(o.status)">{{ o.status }}</span>
+                        </td>
+                        <td class="num">{{ o.attempts }}</td>
+                        <td>{{ o.http_status ?? '-' }}</td>
+                        <td>{{ o.sent_at ? (o.sent_at | date: 'dd MMM, HH:mm:ss') : '-' }}</td>
+                        <td class="err-text">{{ o.last_error }}</td>
+                        <td>
+                          @if (o.status === 'FAILED') {
+                            <button
+                              class="table-action-btn"
+                              (click)="retryOutboxItem(o.id)"
+                              [disabled]="retryingOutboxId === o.id"
+                            >
+                              <fa-icon
+                                icon="redo"
+                                [animation]="retryingOutboxId === o.id ? 'spin' : undefined"
+                              ></fa-icon>
+                              Retry
+                            </button>
+                          }
+                        </td>
+                      </tr>
+                    } @empty {
+                      <tr>
+                        <td colspan="8" class="i4c-empty">No outbox delivery records yet.</td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          }
+
+          <!-- TAB 5: RAW PAYLOADS -->
+          @if (modalTab === 'payloads') {
+            <div class="payloads-view">
+              <div class="payload-box">
+                <div class="payload-box__title">
+                  <fa-icon icon="inbox"></fa-icon>
+                  <span>Payload Received from I4C Gateway (Masked)</span>
+                  <button class="copy-chip" (click)="copyAck(prettyJson(selectedComplaint.raw_payload), 'payload-in')">
+                    <fa-icon icon="copy"></fa-icon> Copy
+                  </button>
+                </div>
+                <pre class="i4c-json">{{ prettyJson(selectedComplaint.raw_payload) }}</pre>
+              </div>
+
+              @for (o of selectedComplaint.outbox; track o.id) {
+                <div class="payload-box">
+                  <div class="payload-box__title">
+                    <fa-icon icon="paper-plane"></fa-icon>
+                    <span>Response #{{ o.id }} Delivered to I4C</span>
+                    <button class="copy-chip" (click)="copyAck(prettyJson(o.payload), 'payload-out-' + o.id)">
+                      <fa-icon icon="copy"></fa-icon> Copy
+                    </button>
+                  </div>
+                  <pre class="i4c-json">{{ prettyJson(o.payload) }}</pre>
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        <!-- Footer -->
+        <div class="i4c-modal-footer">
+          @if (selectedComplaint.status === 'RETRY' || selectedComplaint.status === 'PROCESSING') {
+            <button
+              mat-flat-button
+              color="primary"
+              (click)="reprocessModal(selectedComplaint.id)"
+              [disabled]="reprocessing"
+            >
+              <fa-icon icon="redo" [animation]="reprocessing ? 'spin' : undefined"></fa-icon> Process Now
+            </button>
+          }
+          <button mat-stroked-button (click)="openFullPage(selectedComplaint.id)">
+            <fa-icon icon="external-link-alt"></fa-icon> Open in Full Page
+          </button>
+          <button class="footer-btn-close" (click)="closeModal()">Close</button>
+        </div>
+      </div>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-requests/i4c-requests.component.scss

@@ -0,0 +1,180 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+
+@include i4c-skin;
+
+.search-input {
+  width: 240px;
+}
+
+.search-btn {
+  height: 38px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 11.5px;
+}
+
+.count-tag {
+  font-size: 11px;
+  font-weight: 700;
+  color: #64748b;
+  background: #f1f5f9;
+  padding: 2px 7px;
+  border-radius: 9999px;
+  border: 1px solid #e2e8f0;
+}
+
+.head-hint {
+  margin-left: auto;
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: normal;
+}
+
+.ack-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  .ack-no {
+    font-weight: 700;
+    color: #0f172a;
+    font-size: 12px;
+  }
+}
+
+.date-main {
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.cat-pill {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: #f1f5f9;
+  font-size: 10px;
+  color: #475569;
+}
+
+.modal-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sub {
+  font-size: 10.5px;
+  color: #64748b;
+  margin-top: 1px;
+}
+
+.err-text {
+  color: #dc2626;
+  font-size: 10.5px;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.amount-accent {
+  color: #0f172a;
+  font-size: 13px;
+}
+
+.payloads-view {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.payload-box {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #1e293b;
+
+    fa-icon {
+      color: #2563eb;
+    }
+  }
+}
+
+.footer-btn-close {
+  padding: 6px 14px;
+  border-radius: 8px;
+  background: #e2e8f0;
+  color: #334155;
+  border: none;
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #cbd5e1;
+    color: #0f172a;
+  }
+}
+
+.finding-json-cell {
+  padding: 12px 16px !important;
+  background: #0b1329 !important;
+  border-bottom: 2px solid #1e293b !important;
+}
+
+.finding-json-box {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .finding-json-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 11px;
+    font-weight: 600;
+    color: #94a3b8;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #1e293b;
+
+    fa-icon {
+      color: #60a5fa;
+    }
+  }
+
+  /* Shown at full length: the popup body is the one scroll area, so nothing hides behind the footer. */
+  pre.i4c-json {
+    max-height: none;
+    overflow: visible;
+    border: none;
+    background: transparent;
+    padding: 6px 0 16px;
+    box-shadow: none;
+    white-space: pre-wrap;
+    word-break: break-all;
+    font-size: 11px;
+    line-height: 1.6;
+    color: #38bdf8;
+  }
+}
+
+.muted-cell {
+  color: #94a3b8;
+  cursor: help;
+}

src/app/cfcfrms/i4c/i4c-requests/i4c-requests.component.ts

@@ -0,0 +1,320 @@
+/**
+ * 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 { DatePipe, DecimalPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { I4cService, i4cErrorMessage } from '../i4c.service';
+import { ALL_DATES, I4cDateRange, I4cDateRangeComponent } from '../i4c-date-range/i4c-date-range.component';
+
+/** Every complaint I4C has pushed to the bank, newest first. */
+@Component({
+  selector: 'mifosx-i4c-requests',
+  templateUrl: './i4c-requests.component.html',
+  styleUrls: ['./i4c-requests.component.scss'],
+  imports: [
+    DatePipe,
+    DecimalPipe,
+    FormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatProgressBarModule,
+    MatPaginatorModule,
+    I4cDateRangeComponent,
+    FaIconComponent
+  ]
+})
+export class I4cRequestsComponent implements OnInit {
+  private i4c = inject(I4cService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private snackBar = inject(MatSnackBar);
+
+  readonly statuses = [
+    'RECEIVED',
+    'PROCESSING',
+    'RETRY',
+    'PROCESSED'
+  ];
+  rows: any[] = [];
+  status = '';
+  search = '';
+  subCategory = '';
+  layer = '';
+  response = '';
+  dates: I4cDateRange = { ...ALL_DATES };
+  total = 0;
+  pageIndex = 0;
+  pageSize = 20;
+  readonly pageSizes = [
+    10,
+    20,
+    50,
+    100
+  ];
+  loading = false;
+  error = '';
+
+  // Popup Window Modal state
+  selectedComplaint: any = null;
+  detailLoading = false;
+  detailError = '';
+  modalTab: 'overview' | 'incidents' | 'findings' | 'outbox' | 'payloads' = 'overview';
+  openFindingJsonId: number | null = null;
+  reprocessing = false;
+  retryingOutboxId: number | null = null;
+  copiedId = '';
+
+  ngOnInit(): void {
+    this.status = this.route.snapshot.queryParamMap.get('status') || '';
+    this.load();
+  }
+
+  /** Reload the current page; a changed filter passes `fromFirstPage` so the officer lands on page one. */
+  load(fromFirstPage = false): void {
+    if (fromFirstPage) {
+      this.pageIndex = 0;
+    }
+    this.loading = true;
+    this.error = '';
+    this.i4c
+      .requests({
+        status: this.status,
+        search: this.search.trim(),
+        subCategory: this.subCategory.trim(),
+        layer: this.layer,
+        response: this.response,
+        fromDate: this.dates.fromDate,
+        toDate: this.dates.toDate,
+        offset: this.pageIndex * this.pageSize,
+        limit: this.pageSize
+      })
+      .subscribe({
+        next: (page) => {
+          this.rows = page.pageItems;
+          this.total = page.totalFilteredRecords;
+          this.loading = false;
+        },
+        error: (e) => {
+          this.error = i4cErrorMessage(e);
+          this.loading = false;
+        }
+      });
+  }
+
+  setStatus(s: string): void {
+    this.status = s;
+    this.load(true);
+  }
+
+  onPage(e: PageEvent): void {
+    this.pageIndex = e.pageIndex;
+    this.pageSize = e.pageSize;
+    this.load();
+  }
+
+  onDates(range: I4cDateRange): void {
+    this.dates = range;
+    this.load(true);
+  }
+
+  get hasFilters(): boolean {
+    return !!(
+      this.status ||
+      this.search ||
+      this.subCategory ||
+      this.layer ||
+      this.response ||
+      this.dates.preset !== 'ALL'
+    );
+  }
+
+  clearFilters(): void {
+    this.status = '';
+    this.search = '';
+    this.subCategory = '';
+    this.layer = '';
+    this.response = '';
+    this.dates = { ...ALL_DATES };
+    this.load(true);
+  }
+
+  // Open in Modern Popup Window Modal
+  openModal(row: any): void {
+    this.detailLoading = true;
+    this.detailError = '';
+    this.modalTab = 'overview';
+    this.openFindingJsonId = null;
+    this.selectedComplaint = { ...row };
+
+    this.i4c.request(row.id).subscribe({
+      next: (full) => {
+        // Keep the list figures (held amount, response status) if the detail lacks them.
+        this.selectedComplaint = { ...row, ...full };
+        this.detailLoading = false;
+      },
+      error: (e) => {
+        this.detailError = i4cErrorMessage(e);
+        this.detailLoading = false;
+      }
+    });
+  }
+
+  closeModal(): void {
+    this.selectedComplaint = null;
+  }
+
+  toggleFindingJson(id: number): void {
+    this.openFindingJsonId = this.openFindingJsonId === id ? null : id;
+  }
+
+  // Open in Full Page view
+  openFullPage(id: number): void {
+    this.closeModal();
+    this.router.navigate([id], { relativeTo: this.route });
+  }
+
+  reprocessModal(id: number): void {
+    this.reprocessing = true;
+    this.i4c.reprocess(id).subscribe({
+      next: () => {
+        this.reprocessing = false;
+        this.snackBar.open('Complaint queued for reprocessing.', 'OK', { duration: 4000 });
+        this.openModal({ id });
+        this.load();
+      },
+      error: (e) => {
+        this.reprocessing = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+
+  retryOutboxItem(id: number): void {
+    this.retryingOutboxId = id;
+    this.i4c.retryOutbox(id).subscribe({
+      next: (r) => {
+        this.retryingOutboxId = null;
+        this.snackBar.open(r?.sent ? 'Delivered to I4C.' : 'Queued for retry.', 'OK', { duration: 4000 });
+        if (this.selectedComplaint?.id) {
+          this.openModal({ id: this.selectedComplaint.id });
+        }
+      },
+      error: (e) => {
+        this.retryingOutboxId = null;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 });
+      }
+    });
+  }
+
+  copyAck(text: string, id: string, event?: Event): void {
+    if (event) {
+      event.stopPropagation();
+    }
+    if (!text) {
+      return;
+    }
+    navigator.clipboard.writeText(text);
+    this.copiedId = id;
+    this.snackBar.open(`Copied: ${text}`, 'OK', { duration: 2500 });
+    setTimeout(() => {
+      if (this.copiedId === id) {
+        this.copiedId = '';
+      }
+    }, 2000);
+  }
+
+  /** What a section 6 status_code means, as I4C reads it. */
+  statusCodeMeaning(code: string): string {
+    switch (code) {
+      case '00':
+        return 'Success';
+      case '01':
+        return 'Record not found';
+      case '02':
+        return 'Invalid RRN';
+      case '70010':
+        return 'Not processed';
+      default:
+        return code ? 'Code ' + code : 'No code';
+    }
+  }
+
+  statusCodeClass(code: string): string {
+    return code === '00' ? 'i4c-badge--green' : code === '01' || code === '02' ? 'i4c-badge--amber' : 'i4c-badge--red';
+  }
+
+  prettyJson(val: any): string {
+    if (!val) {
+      return '';
+    }
+    try {
+      const parsed = typeof val === 'string' ? JSON.parse(val) : val;
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return String(val);
+    }
+  }
+
+  statusClass(status: string): string {
+    switch (status) {
+      case 'PROCESSED':
+        return 'i4c-badge--green';
+      case 'RETRY':
+        return 'i4c-badge--red';
+      case 'PROCESSING':
+      case 'RECEIVED':
+        return 'i4c-badge--amber';
+      default:
+        return '';
+    }
+  }
+
+  responseClass(status: string): string {
+    switch (status) {
+      case 'SENT':
+        return 'i4c-badge--green';
+      case 'FAILED':
+        return 'i4c-badge--red';
+      case 'PENDING':
+      case 'SENDING':
+        return 'i4c-badge--amber';
+      default:
+        return '';
+    }
+  }
+
+  outcomeClass(outcome: string): string {
+    switch (outcome) {
+      case 'HELD':
+        return 'i4c-badge--green';
+      case 'SHORT':
+        return 'i4c-badge--amber';
+      case 'NOT_FOUND':
+      case 'FAILED':
+        return 'i4c-badge--red';
+      default:
+        return '';
+    }
+  }
+
+  holdFor(incidentId: number): any {
+    return (this.selectedComplaint?.holds || []).find((h: any) => h.incident_id === incidentId);
+  }
+}

src/app/cfcfrms/i4c/i4c-restorations/i4c-restorations.component.html

@@ -0,0 +1,682 @@
+<!--
+  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="i4c-page">
+  <div class="i4c-toolbar">
+    <div class="i4c-filter-chips">
+      <button
+        class="filter-chip"
+        [class.filter-chip--active]="role === 'BENEFICIARY_BANK'"
+        (click)="setRole('BENEFICIARY_BANK')"
+      >
+        <fa-icon icon="hand-holding-usd"></fa-icon> <span>Money held here (beneficiary bank)</span>
+      </button>
+      <button class="filter-chip" [class.filter-chip--active]="role === 'VICTIM_BANK'" (click)="setRole('VICTIM_BANK')">
+        <fa-icon icon="user"></fa-icon> <span>Our customer is the victim (victim bank)</span>
+      </button>
+    </div>
+    <span class="i4c-toolbar__spacer"></span>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Layer 0 ack no.</mat-label>
+      <input matInput [(ngModel)]="victimAck" (keyup.enter)="openVictimCase()" />
+    </mat-form-field>
+    <button mat-stroked-button (click)="openVictimCase()" [disabled]="!victimAck.trim()">
+      <fa-icon icon="plus"></fa-icon> Open victim-bank case
+    </button>
+    <span class="count-tag">{{ total }} records</span>
+  </div>
+
+  <div class="i4c-filter-bar">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="search-input">
+      <mat-label>MR id / ack / victim / account / UTR</mat-label>
+      <input matInput [(ngModel)]="search" (keyup.enter)="load(true)" (blur)="load(true)" />
+    </mat-form-field>
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Status</mat-label>
+      <mat-select [(ngModel)]="status" (selectionChange)="load(true)">
+        <mat-option value="OPEN">All open</mat-option>
+        <mat-option value="">All</mat-option>
+        @for (s of statuses; track s.value) {
+          <mat-option [value]="s.value">{{ s.label }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    @if (role === 'BENEFICIARY_BANK') {
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-label>Bank action</mat-label>
+        <mat-select [(ngModel)]="bankAction" (selectionChange)="load(true)">
+          <mat-option value="">Any</mat-option>
+          <mat-option value="PENDING">Pending</mat-option>
+          @for (a of bankActions; track a.value) {
+            <mat-option [value]="a.value">{{ a.label }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    }
+    <mifosx-i4c-date-range label="Opened" [range]="dates" (rangeChange)="onDates($event)"></mifosx-i4c-date-range>
+    <button mat-stroked-button class="i4c-filter-bar__clear" (click)="clearFilters()" [disabled]="!hasFilters">
+      <fa-icon icon="times"></fa-icon> Clear filters
+    </button>
+  </div>
+
+  @if (loading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
+  @if (error) {
+    <div class="i4c-error">
+      <fa-icon icon="exclamation-circle"></fa-icon> <span>{{ error }}</span>
+    </div>
+  }
+
+  <div class="i4c-card">
+    <div class="i4c-card__head">
+      <fa-icon icon="hand-holding-usd"></fa-icon>
+      <span>MRM Money Restoration</span>
+      <span class="head-hint"
+        >Assess a hold for MRM from the hold (Holds Register → hold → GRM / MRM). Click a row to work on it.</span
+      >
+    </div>
+    <div class="i4c-table-wrap">
+      <table class="i4c-table">
+        <thead>
+          <tr>
+            <th>Opened</th>
+            <th>Ack / MR id</th>
+            @if (role === 'BENEFICIARY_BANK') {
+              <th>Account on hold</th>
+              <th>Basis</th>
+              <th class="num">Restorable (₹)</th>
+            }
+            <th>Victim</th>
+            <th>Status</th>
+            <th>Money</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (r of rows; track r.id) {
+            <tr class="clickable" (click)="open(r.id)">
+              <td>
+                {{ r.created_at | date: 'dd MMM yyyy' }}
+                <div class="sub">{{ r.created_by }}</div>
+              </td>
+              <td>
+                <b>{{ r.acknowledgement_no }}</b>
+                <div class="sub">{{ r.mrm_request_no || 'no MR id yet' }}</div>
+              </td>
+              @if (role === 'BENEFICIARY_BANK') {
+                <td>
+                  {{ r.hold_account_no }}
+                  <div class="sub">{{ r.client_name }} · held ₹{{ r.amount_held | number: '1.2-2' }}</div>
+                </td>
+                <td>{{ label(bases, r.basis) }}</td>
+                <td class="num">{{ r.restorable_amount | number: '1.2-2' }}</td>
+              }
+              <td>
+                {{ r.victim_name || '-' }}
+                <div class="sub">{{ r.victim_account_no }} {{ r.victim_ifsc }}</div>
+              </td>
+              <td>
+                <span
+                  class="i4c-badge"
+                  [class.i4c-badge--green]="r.status === 'RESTORED' || r.status === 'RECEIVED'"
+                  [class.i4c-badge--amber]="
+                    r.status === 'IN_POOL' || r.status === 'TRANSFER_PENDING' || r.status === 'AWAITING_APPROVAL'
+                  "
+                  >{{ label(statuses, r.status) }}</span
+                >
+                @if (r.bank_action && r.bank_action !== 'PENDING') {
+                  <div class="sub">{{ r.bank_action }}</div>
+                }
+                @if (r.transfer_error) {
+                  <div class="sub err-text">{{ r.transfer_error }}</div>
+                }
+              </td>
+              <td>
+                @if (r.role === 'VICTIM_BANK') {
+                  {{
+                    r.received_amount
+                      ? '₹' + (r.received_amount | number: '1.2-2') + ' received'
+                      : r.victim_status || '-'
+                  }}
+                } @else {
+                  {{ r.restored_amount ? '₹' + (r.restored_amount | number: '1.2-2') : '-' }}
+                  <div class="sub">{{ r.utr || r.transfer_status || '' }}{{ r.mrm_updated ? ' · on MRM' : '' }}</div>
+                }
+              </td>
+            </tr>
+          } @empty {
+            <tr>
+              <td [attr.colspan]="role === 'BENEFICIARY_BANK' ? 8 : 5" class="i4c-empty">
+                No restorations match these filters.
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+    <mat-paginator
+      class="i4c-paginator"
+      [length]="total"
+      [pageIndex]="pageIndex"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="pageSizes"
+      (page)="onPage($event)"
+      showFirstLastButtons
+      aria-label="Restoration pages"
+    ></mat-paginator>
+  </div>
+
+  @if (selected; as r) {
+    <div class="i4c-modal-backdrop" (click)="close()">
+      <div class="i4c-modal-window i4c-modal-window--wide" (click)="$event.stopPropagation()">
+        <div class="i4c-modal-header">
+          <div class="i4c-modal-header__title">
+            <fa-icon icon="hand-holding-usd"></fa-icon>
+            <div>
+              <div class="modal-title-row">
+                <span
+                  >{{ isVictim ? 'Victim-bank case' : 'Restoration' }} #{{ r.id }} · Ack
+                  {{ r.acknowledgement_no }}</span
+                >
+                <span class="i4c-badge">{{ label(statuses, r.status) }}</span>
+                @if (r.mrm_updated) {
+                  <span class="i4c-badge i4c-badge--green">ON MRM</span>
+                }
+              </div>
+              <div class="i4c-modal-header__sub">
+                @if (isVictim) {
+                  Our customer's account {{ r.victim_account_no }}
+                } @else {
+                  Held on {{ r.hold_account_no }} ({{ r.client_name }}): ₹{{ r.amount_held | number: '1.2-2' }} ·
+                  disputed ₹{{ r.disputed_amount | number: '1.2-2' }}
+                }
+              </div>
+            </div>
+          </div>
+          <div class="i4c-modal-header__actions">
+            <button class="modal-close-btn" (click)="close()" aria-label="Close">
+              <fa-icon icon="times"></fa-icon>
+            </button>
+          </div>
+        </div>
+
+        <div class="i4c-modal-tabs">
+          <button class="modal-tab" [class.modal-tab--active]="tab === 'workflow'" (click)="tab = 'workflow'">
+            <fa-icon icon="tasks"></fa-icon> Next step
+          </button>
+          <button class="modal-tab" [class.modal-tab--active]="tab === 'details'" (click)="tab = 'details'">
+            <fa-icon icon="info-circle"></fa-icon> Details
+          </button>
+          <button class="modal-tab" [class.modal-tab--active]="tab === 'documents'" (click)="tab = 'documents'">
+            <fa-icon icon="paperclip"></fa-icon> Documents ({{ r.documents?.length || 0 }})
+          </button>
+        </div>
+
+        <div class="i4c-modal-body">
+          @if (tab === 'workflow') {
+            <div class="i4c-card">
+              <div class="i4c-card__body">
+                @if (!isVictim) {
+                  @if (r.status === 'ASSESSED' || r.status === 'REQUESTED') {
+                    <div class="step">
+                      <div class="step__title">1. Assessment (what the bank updates on MRM)</div>
+                      <div class="step__row">
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="step__wide">
+                          <mat-label>Restoration</mat-label>
+                          <mat-select [(ngModel)]="assessment.basis">
+                            @for (b of bases; track b.value) {
+                              <mat-option [value]="b.value">{{ b.label }}</mat-option>
+                            }
+                          </mat-select>
+                        </mat-form-field>
+                        @if (possible) {
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>Restorable amount (₹)</mat-label>
+                            <input matInput type="number" min="0" [(ngModel)]="assessment.restorableAmount" />
+                          </mat-form-field>
+                          <button mat-stroked-button (click)="loadProRata()">
+                            <fa-icon icon="calculator"></fa-icon> Pro-rata share
+                          </button>
+                        }
+                      </div>
+                      @if (proRata) {
+                        <table class="i4c-table">
+                          <thead>
+                            <tr>
+                              <th>Complaint (ack)</th>
+                              <th class="num">Disputed</th>
+                              <th class="num">Held</th>
+                              <th class="num">Pro-rata share</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            @for (h of proRata.holds; track h.id) {
+                              <tr [class.highlight]="h.id === r.hold_id">
+                                <td>{{ h.acknowledgement_no }}{{ h.id === r.hold_id ? ' (this one)' : '' }}</td>
+                                <td class="num">{{ h.disputed_amount | number: '1.2-2' }}</td>
+                                <td class="num">{{ h.amount_held | number: '1.2-2' }}</td>
+                                <td class="num">
+                                  <b>{{ h.share | number: '1.2-2' }}</b>
+                                </td>
+                              </tr>
+                            }
+                          </tbody>
+                        </table>
+                        <div class="sub">
+                          ₹{{ proRata.amount | number: '1.2-2' }} held on {{ proRata.accountNo }} split by disputed
+                          amount (total ₹{{ proRata.totalDisputed | number: '1.2-2' }}).
+                        </div>
+                      }
+                      <mat-form-field appearance="outline" class="step__wide">
+                        <mat-label>Remarks{{ possible ? '' : ' (why not possible) *' }}</mat-label>
+                        <input matInput [(ngModel)]="assessment.remarks" maxlength="1000" />
+                      </mat-form-field>
+                      <div class="i4c-actions">
+                        <button mat-stroked-button color="primary" (click)="saveAssessment()" [disabled]="busy">
+                          <fa-icon icon="check"></fa-icon> Save assessment
+                        </button>
+                        @if (r.status === 'ASSESSED' && !r.mrm_updated) {
+                          <button mat-button (click)="markMrm()" [disabled]="busy">Entered on MRM</button>
+                        }
+                      </div>
+                    </div>
+                  }
+
+                  @if (r.status === 'ASSESSED' || r.status === 'REQUESTED' || r.status === 'IN_POOL') {
+                    <div class="step">
+                      <div class="step__title">
+                        {{
+                          r.status === 'IN_POOL'
+                            ? 'Refund account (correct it if the victim bank referred back)'
+                            : "2. Victim's MRM request, as the IO sent it"
+                        }}
+                      </div>
+                      <div class="step__row">
+                        @if (r.status !== 'IN_POOL') {
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>MRM request id *</mat-label>
+                            <input
+                              matInput
+                              [(ngModel)]="request['mrmRequestNo']"
+                              maxlength="40"
+                              placeholder="MR20251208000003"
+                            />
+                          </mat-form-field>
+                        }
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>Victim name *</mat-label>
+                          <input matInput [(ngModel)]="request['victimName']" maxlength="200" />
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>Refund account no. *</mat-label>
+                          <input matInput [(ngModel)]="request['victimAccountNo']" maxlength="40" />
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>IFSC (blank = this bank)</mat-label>
+                          <input matInput [(ngModel)]="request['victimIfsc']" maxlength="11" />
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>Victim's bank</mat-label>
+                          <input matInput [(ngModel)]="request['victimBankName']" maxlength="200" />
+                        </mat-form-field>
+                        @if (request['victimIfsc']) {
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>Send by</mat-label>
+                            <mat-select [(ngModel)]="request['transferChannel']">
+                              <mat-option value="NEFT">NEFT</mat-option>
+                              <mat-option value="IMPS">IMPS</mat-option>
+                              <mat-option value="RTGS">RTGS</mat-option>
+                            </mat-select>
+                          </mat-form-field>
+                        }
+                      </div>
+                      @if (r.status !== 'IN_POOL') {
+                        <div class="step__row">
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>IO name</mat-label>
+                            <input matInput [(ngModel)]="request['ioName']" maxlength="200" />
+                          </mat-form-field>
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>Police station</mat-label>
+                            <input matInput [(ngModel)]="request['ioPoliceStation']" maxlength="200" />
+                          </mat-form-field>
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>BNSS 106 notice no.</mat-label>
+                            <input matInput [(ngModel)]="request['bnssNoticeNo']" maxlength="100" />
+                          </mat-form-field>
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>Notice date</mat-label>
+                            <input matInput type="date" [(ngModel)]="request['bnssNoticeDate']" />
+                          </mat-form-field>
+                          <mat-checkbox [(ngModel)]="request['indemnityBondReceived']"
+                            >Indemnity bond received (Rs 10 stamp paper)</mat-checkbox
+                          >
+                        </div>
+                        <div class="step__row">
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>FIR no. (needed above ₹{{ r.firThreshold }})</mat-label>
+                            <input matInput [(ngModel)]="request['firNo']" maxlength="100" />
+                          </mat-form-field>
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>FIR date</mat-label>
+                            <input matInput type="date" [(ngModel)]="request['firDate']" />
+                          </mat-form-field>
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>Court order no.</mat-label>
+                            <input matInput [(ngModel)]="request['courtOrderNo']" maxlength="100" />
+                          </mat-form-field>
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>Court order date</mat-label>
+                            <input matInput type="date" [(ngModel)]="request['courtOrderDate']" />
+                          </mat-form-field>
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                            <mat-label>Court</mat-label>
+                            <input matInput [(ngModel)]="request['courtName']" maxlength="200" />
+                          </mat-form-field>
+                        </div>
+                      }
+                      <div class="i4c-actions">
+                        <button mat-stroked-button color="primary" (click)="saveRequest()" [disabled]="busy">
+                          <fa-icon icon="check"></fa-icon> Save
+                          {{ r.status === 'IN_POOL' ? 'refund account' : 'request' }}
+                        </button>
+                      </div>
+                    </div>
+                  }
+
+                  @if (r.status === 'REQUESTED') {
+                    <div class="step">
+                      <div class="step__title">3. Bank action (as on MRM)</div>
+                      <div class="step__row">
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="step__wide">
+                          <mat-label>Action</mat-label>
+                          <mat-select [(ngModel)]="action.action" (selectionChange)="action.reason = ''">
+                            @for (a of bankActions; track a.value) {
+                              <mat-option [value]="a.value">{{ a.label }}</mat-option>
+                            }
+                          </mat-select>
+                        </mat-form-field>
+                        @if (action.action === 'REFER_BACK_LEA') {
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="step__wide">
+                            <mat-label>Reason</mat-label>
+                            <mat-select [(ngModel)]="action.reason">
+                              @for (x of referBackReasons; track x.value) {
+                                <mat-option [value]="x.value">{{ x.label }}</mat-option>
+                              }
+                            </mat-select>
+                          </mat-form-field>
+                        } @else {
+                          <mat-form-field appearance="outline" subscriptSizing="dynamic" class="step__wide">
+                            <mat-label>Remarks{{ action.action === 'COMPLIED' ? '' : ' *' }}</mat-label>
+                            <input matInput [(ngModel)]="action.reason" maxlength="1000" />
+                          </mat-form-field>
+                        }
+                      </div>
+                      @if (action.action === 'COMPLIED') {
+                        @if (papers.length) {
+                          <div class="i4c-note">Still needed before compliance: {{ papers.join(', ') }}.</div>
+                        }
+                        <div class="sub">
+                          ₹{{ r.restorable_amount | number: '1.2-2' }} goes to {{ r.victim_name }} ({{
+                            r.victim_account_no
+                          }}{{ r.victim_ifsc ? ', ' + r.victim_ifsc : ', this bank' }}) once a second officer approves.
+                          @if (r.victim_ifsc && !r.poolConfigured) {
+                            <b class="err-text"
+                              >No restoration pool account is configured, so an outward restoration cannot be
+                              approved.</b
+                            >
+                          }
+                        </div>
+                      } @else if (action.action === 'NOT_COMPLIED' || action.action === 'REFER_BACK_LEA') {
+                        <div class="sub">
+                          MRM asks for the account's bank statement with this action; attach it on the Documents tab.
+                        </div>
+                      }
+                      <div class="i4c-actions">
+                        <button
+                          mat-flat-button
+                          [color]="action.action === 'COMPLIED' ? 'warn' : 'primary'"
+                          (click)="takeAction()"
+                          [disabled]="busy"
+                        >
+                          <fa-icon [icon]="action.action === 'COMPLIED' ? 'hand-holding-usd' : 'check'"></fa-icon>
+                          {{ action.action === 'COMPLIED' ? 'Raise restoration for approval' : 'Record bank action' }}
+                        </button>
+                      </div>
+                    </div>
+                  }
+
+                  @if (r.status === 'AWAITING_APPROVAL') {
+                    <div class="i4c-note">
+                      Restoration request #{{ r.action_request_id }} is waiting for a second officer on the Approvals
+                      page. On approval ₹{{ r.restorable_amount | number: '1.2-2' }} leaves {{ r.hold_account_no }} at
+                      once.
+                    </div>
+                  }
+
+                  @if (r.status === 'IN_POOL') {
+                    <div class="step">
+                      <div class="step__title">
+                        ₹{{ r.restored_amount | number: '1.2-2' }} is in the restoration pool
+                      </div>
+                      <div class="sub">
+                        It left the suspect account on approval. The outward {{ r.transfer_channel }} to
+                        {{ r.victim_account_no }} / {{ r.victim_ifsc }} has not gone through yet{{
+                          r.transfer_error ? ': ' + r.transfer_error : '.'
+                        }}
+                      </div>
+                      <div class="i4c-actions">
+                        <button mat-flat-button color="primary" (click)="retryOutward()" [disabled]="busy">
+                          <fa-icon icon="paper-plane"></fa-icon> Send to the victim's bank
+                        </button>
+                      </div>
+                    </div>
+                  }
+
+                  @if (r.status === 'TRANSFER_PENDING') {
+                    <div class="i4c-note">
+                      Outward transfer {{ r.fund_transfer_ref }} is {{ r.transfer_status }} (fund-transfer approval /
+                      NEFT batch). The I4C Hold Review job marks it restored once it settles.
+                    </div>
+                  }
+
+                  @if (r.status === 'RESTORED') {
+                    <div class="step">
+                      <div class="step__title">
+                        Restored ₹{{ r.restored_amount | number: '1.2-2' }} on
+                        {{ r.restored_at | date: 'dd MMM yyyy, HH:mm' }}
+                      </div>
+                      <div class="sub">
+                        On MRM, choose "Compliance of restoration order" and enter amount ₹{{
+                          r.restored_amount | number: '1.2-2'
+                        }}, transaction id <b>{{ r.utr }}</b> and this date and time.
+                      </div>
+                      <div class="i4c-actions">
+                        <button mat-flat-button color="primary" (click)="markMrm()" [disabled]="busy">
+                          <fa-icon icon="check"></fa-icon> Entered on MRM (close)
+                        </button>
+                      </div>
+                    </div>
+                  }
+                } @else {
+                  @if (r.status !== 'CLOSED') {
+                    <div class="step">
+                      <div class="step__title">Restored money received for our customer</div>
+                      <div class="step__row">
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>Amount (₹) *</mat-label>
+                          <input matInput type="number" min="0" [(ngModel)]="receipt.amount" />
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>UTR / transaction id *</mat-label>
+                          <input matInput [(ngModel)]="receipt.utr" maxlength="40" />
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>Credited on *</mat-label>
+                          <input matInput type="date" [(ngModel)]="receipt.receivedOn" />
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+                          <mat-label>Credited to account</mat-label>
+                          <input matInput [(ngModel)]="receipt.accountNo" maxlength="40" />
+                        </mat-form-field>
+                      </div>
+                      <div class="i4c-actions">
+                        <button mat-flat-button color="primary" (click)="saveReceipt()" [disabled]="busy">
+                          <fa-icon icon="check"></fa-icon> Record receipt
+                        </button>
+                        @if (r.status === 'RECEIVED') {
+                          <button mat-stroked-button (click)="markMrm()" [disabled]="busy">
+                            Entered on MRM (close)
+                          </button>
+                        }
+                      </div>
+                    </div>
+                    <div class="step">
+                      <div class="step__title">Or: why no (more) restoration is expected</div>
+                      <div class="step__row">
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="step__wide">
+                          <mat-label>Victim status</mat-label>
+                          <mat-select [(ngModel)]="victim.status">
+                            @for (v of victimStatuses; track v.value) {
+                              <mat-option [value]="v.value">{{ v.label }}</mat-option>
+                            }
+                          </mat-select>
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" subscriptSizing="dynamic" class="step__wide">
+                          <mat-label>Justification *</mat-label>
+                          <input matInput [(ngModel)]="victim.remarks" maxlength="1000" />
+                        </mat-form-field>
+                      </div>
+                      <div class="i4c-actions">
+                        <button
+                          mat-stroked-button
+                          (click)="saveVictimStatus()"
+                          [disabled]="busy || !victim.remarks.trim()"
+                        >
+                          <fa-icon icon="check"></fa-icon> Record and close
+                        </button>
+                      </div>
+                    </div>
+                  } @else {
+                    <div class="i4c-note">
+                      Case closed{{ r.victim_status ? ': ' + label(victimStatuses, r.victim_status) : '' }}.
+                    </div>
+                  }
+                }
+                @if (!isVictim && r.status === 'CLOSED') {
+                  <div class="i4c-note">
+                    Closed{{
+                      r.bank_action === 'NOT_COMPLIED' ? ': order not complied (' + r.bank_action_reason + ')' : ''
+                    }}.
+                  </div>
+                }
+              </div>
+            </div>
+          }
+
+          @if (tab === 'details') {
+            <div class="grid-2">
+              <div class="i4c-card">
+                <div class="i4c-card__head"><fa-icon icon="info-circle"></fa-icon> Request &amp; papers</div>
+                <div class="i4c-card__body">
+                  <dl class="i4c-kv">
+                    <dt>MR id</dt>
+                    <dd>{{ r.mrm_request_no || '-' }}</dd>
+                    <dt>Basis</dt>
+                    <dd>{{ label(bases, r.basis) }} {{ r.basis_remarks ? '(' + r.basis_remarks + ')' : '' }}</dd>
+                    <dt>Restorable</dt>
+                    <dd>{{ r.restorable_amount | number: '1.2-2' }}</dd>
+                    <dt>Victim</dt>
+                    <dd>
+                      {{ r.victim_name }} · {{ r.victim_account_no }} {{ r.victim_ifsc }} {{ r.victim_bank_name }}
+                    </dd>
+                    <dt>IO</dt>
+                    <dd>{{ r.io_name || '-' }} {{ r.io_police_station }}</dd>
+                    <dt>BNSS 106</dt>
+                    <dd>{{ r.bnss_notice_no || '-' }} {{ r.bnss_notice_date | date: 'dd MMM yyyy' }}</dd>
+                    <dt>Indemnity bond</dt>
+                    <dd>{{ r.indemnity_bond_received ? 'Received' : 'Not received' }}</dd>
+                    <dt>FIR</dt>
+                    <dd>{{ r.fir_no || '-' }} {{ r.fir_date | date: 'dd MMM yyyy' }}</dd>
+                    <dt>Court order</dt>
+                    <dd>
+                      {{ r.court_order_no || '-' }} {{ r.court_order_date | date: 'dd MMM yyyy' }} {{ r.court_name }}
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+              <div class="i4c-card">
+                <div class="i4c-card__head"><fa-icon icon="exchange-alt"></fa-icon> Money</div>
+                <div class="i4c-card__body">
+                  <dl class="i4c-kv">
+                    <dt>Bank action</dt>
+                    <dd>{{ r.bank_action }} {{ r.bank_action_reason ? '(' + r.bank_action_reason + ')' : '' }}</dd>
+                    <dt>Approval</dt>
+                    <dd>
+                      @if (r.actionRequest?.length) {
+                        #{{ r.actionRequest[0].id }} {{ r.actionRequest[0].status }}
+                        {{ r.actionRequest[0].checker_name || '' }}
+                        {{ r.actionRequest[0].failure_message || r.actionRequest[0].rejection_reason || '' }}
+                      } @else {
+                        -
+                      }
+                    </dd>
+                    <dt>Channel</dt>
+                    <dd>{{ r.transfer_channel || '-' }} {{ r.transfer_status || '' }}</dd>
+                    <dt>Pool transfer</dt>
+                    <dd>{{ r.pool_transfer_id || '-' }}</dd>
+                    <dt>Outward ref</dt>
+                    <dd>{{ r.fund_transfer_ref || '-' }}</dd>
+                    <dt>UTR / txn id</dt>
+                    <dd>{{ r.utr || r.received_utr || '-' }}</dd>
+                    <dt>Restored</dt>
+                    <dd>
+                      {{ r.restored_amount ? (r.restored_amount | number: '1.2-2') : '-' }}
+                      {{ r.restored_at | date: 'dd MMM yyyy, HH:mm' }}
+                    </dd>
+                    <dt>On MRM</dt>
+                    <dd>
+                      {{
+                        r.mrm_updated
+                          ? 'Yes, by ' + r.mrm_updated_by + ' ' + (r.mrm_updated_at | date: 'dd MMM yyyy')
+                          : 'Not yet'
+                      }}
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          }
+
+          @if (tab === 'documents') {
+            <div class="i4c-card">
+              <div class="i4c-card__body">
+                <mifosx-i4c-documents
+                  ownerType="RESTORATION"
+                  [ownerId]="r.id"
+                  [suggested]="
+                    isVictim
+                      ? ['BANK_STATEMENT', 'COURT_ORDER', 'OTHER']
+                      : ['BNSS_106_NOTICE', 'INDEMNITY_BOND', 'FIR', 'COURT_ORDER', 'BANK_STATEMENT', 'PAN']
+                  "
+                  [documents]="r.documents"
+                  [canUpload]="r.status !== 'CLOSED'"
+                  (changed)="open(r.id)"
+                ></mifosx-i4c-documents>
+              </div>
+            </div>
+          }
+        </div>
+
+        <div class="i4c-modal-footer">
+          <button class="footer-btn-close" (click)="close()">Close</button>
+        </div>
+      </div>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-restorations/i4c-restorations.component.scss

@@ -0,0 +1,21 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+@use '../i4c-cases' as *;
+
+@include i4c-skin;
+@include i4c-case-page;
+
+.highlight td {
+  background: #eff6ff;
+}
+
+.err-text {
+  color: #dc2626;
+}

src/app/cfcfrms/i4c/i4c-restorations/i4c-restorations.component.ts

@@ -0,0 +1,378 @@
+/**
+ * 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 { DatePipe, DecimalPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { I4cService, i4cErrorMessage } from '../i4c.service';
+import { ALL_DATES, I4cDateRange, I4cDateRangeComponent } from '../i4c-date-range/i4c-date-range.component';
+import { I4cDocumentsComponent } from '../i4c-documents/i4c-documents.component';
+
+export const MRM_BASES: { value: string; label: string }[] = [
+  { value: 'ATTRIBUTION', label: 'Restoration possible (attribution)' },
+  { value: 'PRO_RATA', label: 'Restoration possible (pro-rata distribution)' },
+  { value: 'NOT_POSSIBLE_ALREADY_REFUNDED', label: 'Not possible (already refunded)' },
+  { value: 'NOT_POSSIBLE_NO_BALANCE', label: 'Not possible (balance not available)' },
+  { value: 'NOT_POSSIBLE_OTHERS', label: 'Not possible (others)' }
+];
+
+export const MRM_STATUSES: { value: string; label: string }[] = [
+  { value: 'ASSESSED', label: 'Assessed' },
+  { value: 'REQUESTED', label: 'Victim request received' },
+  { value: 'AWAITING_APPROVAL', label: 'Awaiting checker' },
+  { value: 'IN_POOL', label: 'In restoration pool' },
+  { value: 'TRANSFER_PENDING', label: 'Outward transfer pending' },
+  { value: 'RESTORED', label: 'Restored' },
+  { value: 'AWAITED', label: 'Victim bank: awaited' },
+  { value: 'RECEIVED', label: 'Victim bank: received' },
+  { value: 'CLOSED', label: 'Closed' }
+];
+
+const BANK_ACTIONS = [
+  { value: 'COMPLIED', label: 'Compliance of restoration order (restore the money)' },
+  { value: 'NOT_COMPLIED', label: 'Restoration order not complied' },
+  { value: 'REFER_BACK_LEA', label: 'Refer back to LEA' },
+  { value: 'REFER_BACK_VICTIM_BANK', label: 'Refer back to victim bank (wrong refund account)' },
+  { value: 'CONSENSUS', label: 'Consensus request (several holds on the account)' }
+];
+
+const REFER_BACK_REASONS = [
+  { value: 'ISSUE_COURT_ORDER', label: 'Issue in court / police order' },
+  { value: 'ISSUE_FIR', label: 'Issue in FIR details' },
+  { value: 'ISSUE_ORDER_AND_FIR', label: 'Issue in order and FIR details' },
+  { value: 'ISSUE_INDEMNITY_BOND', label: 'Issue in indemnity bond' }
+];
+
+const VICTIM_STATUSES = [
+  { value: 'ALREADY_REFUNDED_BANK', label: 'Already refunded through the bank' },
+  { value: 'ALREADY_REFUNDED_POLICE_NOTICE', label: 'Already refunded (police notice)' },
+  { value: 'ALREADY_REFUNDED_COURT_ORDER', label: 'Already refunded (court order)' },
+  { value: 'DECLINED_REFUND', label: 'Victim declined to receive the refund' },
+  { value: 'DECLINED_TO_PURSUE', label: 'Victim declined to pursue the refund' },
+  { value: 'RECEIVED_THROUGH_COURT', label: 'Victim received refund through court order' },
+  { value: 'NOT_REACHABLE', label: 'Victim not reachable' }
+];
+
+/**
+ * MRM money restoration. As beneficiary bank: assess, record the victim's request and the IO's papers, take the bank
+ * action, and follow the money to the victim. As victim bank: record restored money received for our customer.
+ */
+@Component({
+  selector: 'mifosx-i4c-restorations',
+  templateUrl: './i4c-restorations.component.html',
+  styleUrls: ['./i4c-restorations.component.scss'],
+  imports: [
+    DatePipe,
+    DecimalPipe,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatProgressBarModule,
+    MatPaginatorModule,
+    FaIconComponent,
+    I4cDateRangeComponent,
+    I4cDocumentsComponent
+  ]
+})
+export class I4cRestorationsComponent implements OnInit {
+  private i4c = inject(I4cService);
+  private route = inject(ActivatedRoute);
+  private snackBar = inject(MatSnackBar);
+
+  readonly bases = MRM_BASES;
+  readonly statuses = MRM_STATUSES;
+  readonly bankActions = BANK_ACTIONS;
+  readonly referBackReasons = REFER_BACK_REASONS;
+  readonly victimStatuses = VICTIM_STATUSES;
+  readonly pageSizes = [
+    10,
+    20,
+    50,
+    100
+  ];
+
+  role = 'BENEFICIARY_BANK';
+  status = 'OPEN';
+  bankAction = '';
+  search = '';
+  dates: I4cDateRange = { ...ALL_DATES };
+  rows: any[] = [];
+  total = 0;
+  pageIndex = 0;
+  pageSize = 20;
+  loading = false;
+  error = '';
+  victimAck = '';
+
+  selected: any = null;
+  busy = false;
+  tab: 'workflow' | 'details' | 'documents' = 'workflow';
+  assessment = { basis: 'ATTRIBUTION', restorableAmount: null as number | null, remarks: '' };
+  request: Record<string, any> = {};
+  action = { action: 'COMPLIED', reason: '' };
+  receipt = { amount: null as number | null, utr: '', receivedOn: '', accountNo: '' };
+  victim = { status: 'ALREADY_REFUNDED_BANK', remarks: '' };
+  proRata: any = null;
+
+  ngOnInit(): void {
+    const open = Number(this.route.snapshot.queryParamMap.get('open'));
+    this.load();
+    if (open) {
+      this.open(open);
+    }
+  }
+
+  load(fromFirstPage = false): void {
+    if (fromFirstPage) {
+      this.pageIndex = 0;
+    }
+    this.loading = true;
+    this.error = '';
+    this.i4c
+      .restorations({
+        role: this.role,
+        status: this.status,
+        bankAction: this.bankAction,
+        search: this.search.trim(),
+        fromDate: this.dates.fromDate,
+        toDate: this.dates.toDate,
+        offset: this.pageIndex * this.pageSize,
+        limit: this.pageSize
+      })
+      .subscribe({
+        next: (page) => {
+          this.rows = page.pageItems;
+          this.total = page.totalFilteredRecords;
+          this.loading = false;
+        },
+        error: (e) => {
+          this.error = i4cErrorMessage(e);
+          this.loading = false;
+        }
+      });
+  }
+
+  setRole(r: string): void {
+    this.role = r;
+    this.load(true);
+  }
+
+  onPage(e: PageEvent): void {
+    this.pageIndex = e.pageIndex;
+    this.pageSize = e.pageSize;
+    this.load();
+  }
+
+  onDates(range: I4cDateRange): void {
+    this.dates = range;
+    this.load(true);
+  }
+
+  get hasFilters(): boolean {
+    return !!(this.status !== 'OPEN' || this.bankAction || this.search || this.dates.preset !== 'ALL');
+  }
+
+  clearFilters(): void {
+    this.status = 'OPEN';
+    this.bankAction = '';
+    this.search = '';
+    this.dates = { ...ALL_DATES };
+    this.load(true);
+  }
+
+  openVictimCase(): void {
+    if (!this.victimAck.trim()) {
+      return;
+    }
+    this.i4c.openVictimCase(this.victimAck.trim()).subscribe({
+      next: (r) => {
+        this.victimAck = '';
+        this.role = 'VICTIM_BANK';
+        this.load(true);
+        this.open(r.resourceId);
+      },
+      error: (e) => this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 7000 })
+    });
+  }
+
+  open(id: number): void {
+    this.i4c.restoration(id).subscribe({
+      next: (r) => {
+        const same = this.selected?.id === r.id;
+        this.selected = r;
+        if (!same) {
+          this.tab = 'workflow';
+          this.proRata = null;
+          this.assessment = {
+            basis: r.basis || 'ATTRIBUTION',
+            restorableAmount: r.restorable_amount ?? r.amount_held,
+            remarks: r.basis_remarks || ''
+          };
+          this.request = {
+            mrmRequestNo: r.mrm_request_no || '',
+            victimName: r.victim_name || '',
+            victimAccountNo: r.victim_account_no || '',
+            victimIfsc: r.victim_ifsc || '',
+            victimBankName: r.victim_bank_name || '',
+            transferChannel: r.transfer_channel && r.transfer_channel !== 'INTERNAL' ? r.transfer_channel : 'NEFT',
+            ioName: r.io_name || '',
+            ioPoliceStation: r.io_police_station || '',
+            firNo: r.fir_no || '',
+            firDate: r.fir_date || '',
+            courtOrderNo: r.court_order_no || '',
+            courtOrderDate: r.court_order_date || '',
+            courtName: r.court_name || '',
+            bnssNoticeNo: r.bnss_notice_no || '',
+            bnssNoticeDate: r.bnss_notice_date || '',
+            indemnityBondReceived: !!r.indemnity_bond_received
+          };
+          this.action = { action: 'COMPLIED', reason: '' };
+          this.receipt = { amount: null, utr: '', receivedOn: '', accountNo: r.victim_account_no || '' };
+          this.victim = { status: 'ALREADY_REFUNDED_BANK', remarks: '' };
+        }
+      },
+      error: (e) => this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 })
+    });
+  }
+
+  close(): void {
+    this.selected = null;
+  }
+
+  label(list: { value: string; label: string }[], v: string): string {
+    return list.find((x) => x.value === v)?.label || v || '-';
+  }
+
+  get isVictim(): boolean {
+    return this.selected?.role === 'VICTIM_BANK';
+  }
+
+  get possible(): boolean {
+    return this.assessment.basis === 'ATTRIBUTION' || this.assessment.basis === 'PRO_RATA';
+  }
+
+  /** Papers MRM needs for compliance, given what is recorded; mirrors the server's check. */
+  get papers(): string[] {
+    const r = this.selected;
+    if (!r) {
+      return [];
+    }
+    const has = (t: string) => (r.documents || []).some((d: any) => d.doc_type === t);
+    const out: string[] = [];
+    if (r.court_order_no) {
+      if (!has('COURT_ORDER')) {
+        out.push('court order copy');
+      }
+    } else {
+      if (!r.bnss_notice_no) {
+        out.push('BNSS 106 notice no.');
+      } else if (!has('BNSS_106_NOTICE')) {
+        out.push('BNSS 106 notice copy');
+      }
+      if (!r.indemnity_bond_received) {
+        out.push('indemnity bond received');
+      } else if (!has('INDEMNITY_BOND')) {
+        out.push('indemnity bond copy');
+      }
+      if (Number(r.restorable_amount) > Number(r.firThreshold)) {
+        if (!r.fir_no) {
+          out.push('FIR no. (above ₹' + r.firThreshold + ')');
+        } else if (!has('FIR')) {
+          out.push('FIR copy');
+        }
+      }
+    }
+    return out;
+  }
+
+  private run(obs: any, done: string): void {
+    this.busy = true;
+    obs.subscribe({
+      next: (r: any) => {
+        this.busy = false;
+        this.snackBar.open(done, 'OK', { duration: 5000 });
+        this.open(r?.id ?? r?.resourceId ?? this.selected.id);
+        this.load();
+      },
+      error: (e: any) => {
+        this.busy = false;
+        this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 8000 });
+      }
+    });
+  }
+
+  saveAssessment(): void {
+    this.run(
+      this.i4c.assessRestoration(this.selected.hold_id, {
+        basis: this.assessment.basis,
+        restorableAmount: this.possible ? this.assessment.restorableAmount : null,
+        remarks: this.assessment.remarks
+      }),
+      'Assessment saved. Enter the same on MRM (Money Distribution Process).'
+    );
+  }
+
+  saveRequest(): void {
+    this.run(this.i4c.recordRestorationRequest(this.selected.id, this.request), 'Victim request recorded.');
+  }
+
+  takeAction(): void {
+    this.run(
+      this.i4c.restorationStep(this.selected.id, 'bank-action', this.action),
+      this.action.action === 'COMPLIED'
+        ? 'Restoration raised. A second officer approves it on the Approvals page; the money then moves.'
+        : 'Bank action recorded. Enter the same on MRM.'
+    );
+  }
+
+  retryOutward(): void {
+    this.run(this.i4c.restorationStep(this.selected.id, 'retry-outward'), 'Outward transfer sent again.');
+  }
+
+  markMrm(): void {
+    this.run(this.i4c.restorationStep(this.selected.id, 'mrm-updated'), 'Marked as entered on MRM.');
+  }
+
+  saveReceipt(): void {
+    this.run(this.i4c.restorationStep(this.selected.id, 'receipt', this.receipt), 'Receipt recorded.');
+  }
+
+  saveVictimStatus(): void {
+    this.run(
+      this.i4c.restorationStep(this.selected.id, 'victim-status', this.victim),
+      'Victim status recorded; case closed.'
+    );
+  }
+
+  loadProRata(): void {
+    this.i4c.proRata(this.selected.hold_account_no).subscribe({
+      next: (p) => {
+        this.proRata = p;
+        const mine = (p.holds || []).find((h: any) => h.id === this.selected.hold_id);
+        if (mine) {
+          this.assessment.basis = 'PRO_RATA';
+          this.assessment.restorableAmount = Number(mine.share);
+        }
+      },
+      error: (e) => this.snackBar.open(i4cErrorMessage(e), 'Close', { duration: 6000 })
+    });
+  }
+}

src/app/cfcfrms/i4c/i4c-shell/i4c-shell.component.html

@@ -0,0 +1,215 @@
+<!--
+  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="i4c-shell">
+  <!-- Modern Navigation Bar with Live Status and Quick Actions -->
+  <header class="i4c-navbar">
+    <div class="i4c-navbar__brand">
+      <div class="i4c-navbar__icon-wrap">
+        <fa-icon icon="shield-alt"></fa-icon>
+      </div>
+      <div>
+        <div class="i4c-navbar__title">
+          <span>I4C Portal</span>
+          <span class="live-pill">
+            <span class="live-pill__dot"></span>
+            Live MHA Gateway
+          </span>
+        </div>
+        <div class="i4c-navbar__sub">National Cyber Crime Reporting &amp; Account Holds System</div>
+      </div>
+    </div>
+
+    <!-- Quick Actions -->
+    <div class="i4c-navbar__actions">
+      <button class="quick-lookup-btn" (click)="openLookup()">
+        <fa-icon icon="search"></fa-icon>
+        <span>Quick Lookup</span>
+      </button>
+    </div>
+  </header>
+
+  <!-- Modern Pill-Style Subnavigation Bar -->
+  <nav class="i4c-subnav">
+    <div class="i4c-subnav__links">
+      @for (link of links; track link.path) {
+        <a class="i4c-subnav__link" [routerLink]="['./', link.path]" routerLinkActive="i4c-subnav__link--active">
+          <fa-icon [icon]="link.icon" class="link-ic"></fa-icon>
+          <span>{{ link.label }}</span>
+          @if (link.path === 'approvals' && pendingApprovals > 0) {
+            <span class="pill-badge pill-badge--amber">{{ pendingApprovals }}</span>
+          }
+          @if (link.path === 'holds' && activeHolds > 0) {
+            <span class="pill-badge pill-badge--blue">{{ activeHolds }}</span>
+          }
+        </a>
+      }
+    </div>
+  </nav>
+
+  <!-- Outlet for child views -->
+  <main class="i4c-content">
+    <router-outlet></router-outlet>
+  </main>
+
+  <!-- ========================================================
+       MODERN POPUP WINDOW: QUICK LOOKUP MODAL
+       ======================================================== -->
+  @if (showLookupModal) {
+    <div class="i4c-modal-backdrop" (click)="closeLookup()">
+      <div class="i4c-modal-window i4c-modal-window--wide" (click)="$event.stopPropagation()">
+        <div class="i4c-modal-header">
+          <div class="i4c-modal-header__title">
+            <fa-icon icon="search"></fa-icon>
+            <div>
+              <span>Quick Search &amp; Lookup</span>
+              <div class="i4c-modal-header__sub">Instant search across I4C Complaints and Account Holds Register</div>
+            </div>
+          </div>
+          <button class="modal-close-btn" (click)="closeLookup()" aria-label="Close">
+            <fa-icon icon="times"></fa-icon>
+          </button>
+        </div>
+
+        <div class="i4c-modal-body">
+          <div class="lookup-search-box">
+            <div class="search-input-wrap">
+              <fa-icon icon="search" class="search-icon"></fa-icon>
+              <input
+                type="text"
+                class="modern-input"
+                placeholder="Enter acknowledgement no., customer account no., or job ID..."
+                [(ngModel)]="lookupQuery"
+                (keyup.enter)="performLookup()"
+                autofocus
+              />
+              @if (lookupQuery) {
+                <button class="clear-btn" (click)="lookupQuery = ''">
+                  <fa-icon icon="times"></fa-icon>
+                </button>
+              }
+            </div>
+            <button
+              class="search-submit-btn"
+              (click)="performLookup()"
+              [disabled]="lookupLoading || !lookupQuery.trim()"
+            >
+              @if (lookupLoading) {
+                <fa-icon icon="sync" animation="spin"></fa-icon>
+                <span>Searching...</span>
+              } @else {
+                <fa-icon icon="search"></fa-icon>
+                <span>Search</span>
+              }
+            </button>
+          </div>
+
+          @if (lookupError) {
+            <div class="i4c-error">{{ lookupError }}</div>
+          }
+
+          <!-- Search Results -->
+          @if (lookupSearched) {
+            <div class="lookup-results">
+              <!-- Complaints Section -->
+              <div class="results-section">
+                <div class="results-section__head">
+                  <fa-icon icon="inbox"></fa-icon>
+                  <span>Complaints from I4C</span>
+                  <span class="count-badge">{{ lookupResults.complaints.length }}</span>
+                </div>
+                @if (lookupResults.complaints.length > 0) {
+                  <div class="results-list">
+                    @for (c of lookupResults.complaints; track c.id) {
+                      <div class="result-item" (click)="goToComplaint(c.id)">
+                        <div class="result-item__main">
+                          <div class="result-item__title">
+                            <span class="ack-code">{{ c.acknowledgement_no }}</span>
+                            <span class="status-pill status-pill--{{ c.status?.toLowerCase() }}">{{ c.status }}</span>
+                          </div>
+                          <div class="result-item__sub">
+                            <span
+                              >Account: <b>{{ c.payer_account_number }}</b></span
+                            >
+                            <span>•</span>
+                            <span>Job: {{ c.job_id }}</span>
+                            <span>•</span>
+                            <span>Sub-cat: {{ c.sub_category }}</span>
+                          </div>
+                        </div>
+                        <div class="result-item__side">
+                          <span class="held-amt">Held: ₹{{ c.amount_held | number: '1.2-2' }}</span>
+                          <span class="open-link">Open Complaint <fa-icon icon="arrow-right"></fa-icon></span>
+                        </div>
+                      </div>
+                    }
+                  </div>
+                } @else {
+                  <div class="no-res">No complaints matched "{{ lookupQuery }}".</div>
+                }
+              </div>
+
+              <!-- Holds Section -->
+              <div class="results-section">
+                <div class="results-section__head">
+                  <fa-icon icon="lock"></fa-icon>
+                  <span>Holds Register</span>
+                  <span class="count-badge">{{ lookupResults.holds.length }}</span>
+                </div>
+                @if (lookupResults.holds.length > 0) {
+                  <div class="results-list">
+                    @for (h of lookupResults.holds; track h.id) {
+                      <div class="result-item" (click)="goToHold(h.account_no)">
+                        <div class="result-item__main">
+                          <div class="result-item__title">
+                            <span class="ack-code">Account: {{ h.account_no }}</span>
+                            <span class="status-pill status-pill--{{ h.status?.toLowerCase() }}">{{ h.status }}</span>
+                            @if (h.debit_frozen) {
+                              <span class="freeze-tag">DEBIT FROZEN</span>
+                            }
+                          </div>
+                          <div class="result-item__sub">
+                            <span
+                              >Customer: <b>{{ h.client_name || 'N/A' }}</b></span
+                            >
+                            <span>•</span>
+                            <span>Ack: {{ h.acknowledgement_no }}</span>
+                            <span>•</span>
+                            <span>Layer: {{ h.layer }}</span>
+                          </div>
+                        </div>
+                        <div class="result-item__side">
+                          <span class="held-amt">Held: ₹{{ h.amount_held | number: '1.2-2' }}</span>
+                          <span class="open-link">View in Holds <fa-icon icon="arrow-right"></fa-icon></span>
+                        </div>
+                      </div>
+                    }
+                  </div>
+                } @else {
+                  <div class="no-res">No holds matched "{{ lookupQuery }}".</div>
+                }
+              </div>
+            </div>
+          } @else {
+            <div class="lookup-hint">
+              <fa-icon icon="lightbulb" class="hint-icon"></fa-icon>
+              <span
+                >Type a 14-digit acknowledgement number, customer bank account number, or job ID to quickly locate
+                complaints or hold records.</span
+              >
+            </div>
+          }
+        </div>
+
+        <div class="i4c-modal-footer">
+          <button class="footer-btn-close" (click)="closeLookup()">Close</button>
+        </div>
+      </div>
+    </div>
+  }
+</div>

src/app/cfcfrms/i4c/i4c-shell/i4c-shell.component.scss

@@ -0,0 +1,473 @@
+/**
+ * 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/.
+ */
+
+@use '../i4c' as *;
+
+@include i4c-skin;
+
+.i4c-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Modern Top Header / Navbar */
+.i4c-navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  border-radius: 14px;
+  box-shadow: 0 10px 25px -5px rgb(15 23 42 / 20%);
+  color: #fff;
+
+  &__brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  &__icon-wrap {
+    width: 34px;
+    height: 34px;
+    border-radius: 9px;
+    background: linear-gradient(135deg, #2563eb, #3b82f6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    color: #fff;
+    box-shadow: 0 4px 10px rgb(37 99 235 / 35%);
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+  }
+
+  &__sub {
+    font-size: 10.5px;
+    color: #94a3b8;
+    margin-top: 1px;
+  }
+
+  .live-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 2px 7px;
+    border-radius: 9999px;
+    font-size: 10px;
+    font-weight: 700;
+    background: rgb(16 185 129 / 15%);
+    color: #34d399;
+    border: 1px solid rgb(16 185 129 / 30%);
+
+    &__dot {
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: #10b981;
+      box-shadow: 0 0 6px #10b981;
+      animation: pulse-dot 1.8s infinite;
+    }
+  }
+
+  .quick-lookup-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 12px;
+    border-radius: 9px;
+    background: rgb(255 255 255 / 10%);
+    color: #fff;
+    border: 1px solid rgb(255 255 255 / 18%);
+    font-size: 11.5px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+
+    &:hover {
+      background: rgb(255 255 255 / 20%);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 10px rgb(0 0 0 / 15%);
+    }
+
+    .kbd-shortcut {
+      padding: 1px 5px;
+      border-radius: 4px;
+      background: rgb(255 255 255 / 15%);
+      font-size: 9px;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: #93c5fd;
+    }
+  }
+}
+
+/* Modern Pill Navigation Bar */
+.i4c-subnav {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgb(15 23 42 / 3%);
+  overflow-x: auto;
+
+  &__links {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: 8px;
+    font-size: 11.5px;
+    font-weight: 600;
+    color: #475569;
+    text-decoration: none;
+    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    white-space: nowrap;
+
+    .link-ic {
+      font-size: 12px;
+      color: #64748b;
+      transition: color 0.2s;
+    }
+
+    &:hover {
+      color: #0f172a;
+      background: #f1f5f9;
+
+      .link-ic {
+        color: #2563eb;
+      }
+    }
+
+    &--active {
+      background: #2563eb;
+      color: #fff !important;
+      box-shadow: 0 3px 10px rgb(37 99 235 / 28%);
+
+      .link-ic {
+        color: #fff;
+      }
+
+      .pill-badge {
+        background: rgb(255 255 255 / 25%);
+        color: #fff;
+      }
+    }
+  }
+
+  .pill-badge {
+    padding: 1px 6px;
+    border-radius: 9999px;
+    font-size: 9.5px;
+    font-weight: 800;
+
+    &--amber {
+      background: #fef3c7;
+      color: #b45309;
+    }
+
+    &--blue {
+      background: #eff6ff;
+      color: #1d4ed8;
+    }
+  }
+}
+
+/* Quick Lookup Popup Modal styling */
+.lookup-search-box {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  .search-input-wrap {
+    flex: 1 1 auto;
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .search-icon {
+      position: absolute;
+      left: 11px;
+      color: #64748b;
+      font-size: 13px;
+    }
+
+    .modern-input {
+      width: 100%;
+      height: 38px;
+      padding: 0 32px 0 34px;
+      border-radius: 9px;
+      border: 1px solid #cbd5e1;
+      background: #f8fafc;
+      font-size: 12px;
+      color: #0f172a;
+      outline: none;
+      transition: all 0.2s;
+
+      &:focus {
+        background: #fff;
+        border-color: #2563eb;
+        box-shadow: 0 0 0 3px rgb(37 99 235 / 15%);
+      }
+    }
+
+    .clear-btn {
+      position: absolute;
+      right: 10px;
+      background: none;
+      border: none;
+      color: #94a3b8;
+      cursor: pointer;
+
+      &:hover {
+        color: #0f172a;
+      }
+    }
+  }
+
+  .search-submit-btn {
+    height: 38px;
+    padding: 0 14px;
+    border-radius: 9px;
+    background: #2563eb;
+    color: #fff;
+    border: none;
+    font-size: 12px;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover:not(:disabled) {
+      background: #1d4ed8;
+      box-shadow: 0 3px 10px rgb(37 99 235 / 30%);
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.lookup-hint {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: #f8fafc;
+  border: 1px dashed #cbd5e1;
+  color: #64748b;
+  font-size: 11.5px;
+
+  .hint-icon {
+    font-size: 16px;
+    color: #3b82f6;
+  }
+}
+
+.lookup-results {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.results-section {
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 700;
+    color: #1e293b;
+    margin-bottom: 10px;
+
+    fa-icon {
+      color: #2563eb;
+    }
+
+    .count-badge {
+      display: inline-block;
+      padding: 1px 7px;
+      border-radius: 9999px;
+      background: #e2e8f0;
+      font-size: 11px;
+      font-weight: 700;
+      color: #475569;
+    }
+  }
+
+  .results-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .result-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: #eff6ff;
+      border-color: #93c5fd;
+      transform: translateY(-1px);
+    }
+
+    &__main {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    &__title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .ack-code {
+        font-weight: 700;
+        color: #0f172a;
+        font-size: 14px;
+      }
+    }
+
+    &__sub {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: #64748b;
+    }
+
+    &__side {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 4px;
+
+      .held-amt {
+        font-weight: 700;
+        color: #0f172a;
+        font-size: 13px;
+      }
+
+      .open-link {
+        font-size: 11px;
+        font-weight: 600;
+        color: #2563eb;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      }
+    }
+  }
+
+  .no-res {
+    padding: 16px;
+    background: #f8fafc;
+    border-radius: 10px;
+    color: #94a3b8;
+    font-size: 13px;
+    text-align: center;
+  }
+}
+
+.status-pill {
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  background: #e2e8f0;
+  color: #475569;
+
+  &--processed,
+  &--active {
+    background: #dcfce7;
+    color: #166534;
+  }
+
+  &--retry,
+  &--failed {
+    background: #fee2e2;
+    color: #991b1b;
+  }
+
+  &--processing,
+  &--received {
+    background: #fef3c7;
+    color: #92400e;
+  }
+}
+
+.freeze-tag {
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 10px;
+  font-weight: 700;
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.footer-btn-close {
+  padding: 8px 18px;
+  border-radius: 10px;
+  background: #e2e8f0;
+  color: #334155;
+  border: none;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #cbd5e1;
+    color: #0f172a;
+  }
+}
+
+@keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+}

src/app/cfcfrms/i4c/i4c-shell/i4c-shell.component.ts

@@ -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/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { I4cService, i4cErrorMessage } from '../i4c.service';
+
+/**
+ * The live I4C (NCRP-CFCFRMS) integration: complaints I4C pushed to the bank, the holds placed for them, the
+ * approvals to release them, and every response sent back. Backed by /v1/i4c/admin on the CBS, never by the
+ * CFCFRMS demo mock.
+ */
+@Component({
+  selector: 'mifosx-i4c-shell',
+  templateUrl: './i4c-shell.component.html',
+  styleUrls: ['./i4c-shell.component.scss'],
+  imports: [
+    FormsModule,
+    RouterLink,
+    RouterLinkActive,
+    RouterOutlet,
+    MatButtonModule,
+    FaIconComponent
+  ]
+})
+export class I4cShellComponent implements OnInit {
+  private i4c = inject(I4cService);
+  private router = inject(Router);
+
+  readonly links = [
+    { path: 'dashboard', label: 'Dashboard', icon: 'chart-line' },
+    { path: 'requests', label: 'Complaints from I4C', icon: 'inbox' },
+    { path: 'holds', label: 'Holds Register', icon: 'lock' },
+    { path: 'approvals', label: 'Approvals', icon: 'user-check' },
+    { path: 'grievances', label: 'GRM Grievances', icon: 'balance-scale' },
+    { path: 'restorations', label: 'MRM Restorations', icon: 'hand-holding-usd' },
+    { path: 'mrm-report', label: 'MRM Balance Report', icon: 'file-csv' },
+    { path: 'outbox', label: 'Responses & API Log', icon: 'paper-plane' },
+    { path: 'bank-master', label: 'Bank Code Master', icon: 'university' },
+    { path: 'intimation-settings', label: 'Intimation Settings', icon: 'cog' }
+  ];
+
+  // Quick lookup popup modal state
+  showLookupModal = false;
+  lookupQuery = '';
+  lookupLoading = false;
+  lookupResults: { complaints: any[]; holds: any[] } = { complaints: [], holds: [] };
+  lookupSearched = false;
+  lookupError = '';
+
+  // Summary counts for pill badges
+  pendingApprovals = 0;
+  activeHolds = 0;
+
+  ngOnInit(): void {
+    this.refreshSummary();
+  }
+
+  refreshSummary(): void {
+    this.i4c.dashboard().subscribe({
+      next: (d) => {
+        this.pendingApprovals = d?.pendingApprovals || 0;
+        this.activeHolds = d?.activeHolds || 0;
+      },
+      error: () => {}
+    });
+  }
+
+  openLookup(): void {
+    this.showLookupModal = true;
+    this.lookupQuery = '';
+    this.lookupResults = { complaints: [], holds: [] };
+    this.lookupSearched = false;
+    this.lookupError = '';
+  }
+
+  closeLookup(): void {
+    this.showLookupModal = false;
+  }
+
+  performLookup(): void {
+    const q = this.lookupQuery.trim();
+    if (!q) {
+      return;
+    }
+    this.lookupLoading = true;
+    this.lookupSearched = true;
+    this.lookupError = '';
+    this.lookupResults = { complaints: [], holds: [] };
+
+    let completed = 0;
+    const checkDone = () => {
+      completed++;
+      if (completed >= 2) {
+        this.lookupLoading = false;
+      }
+    };
+
+    this.i4c.requests({ search: q, limit: 10 }).subscribe({
+      next: (rows) => {
+        this.lookupResults.complaints = rows?.pageItems || [];
+        checkDone();
+      },
+      error: (e) => {
+        this.lookupError = i4cErrorMessage(e);
+        checkDone();
+      }
+    });
+
+    this.i4c.holds({ search: q, limit: 10 }).subscribe({
+      next: (rows) => {
+        this.lookupResults.holds = rows?.pageItems || [];
+        checkDone();
+      },
+      error: (e) => {
+        checkDone();
+      }
+    });
+  }
+
+  goToComplaint(id: number): void {
+    this.closeLookup();
+    this.router.navigate([
+      '/cfcfrms/i4c/requests',
+      id
+    ]);
+  }
+
+  goToHold(accountNo: string): void {
+    this.closeLookup();
+    this.router.navigate(['/cfcfrms/i4c/holds'], { queryParams: { view: '' } });
+  }
+}

src/app/cfcfrms/i4c/i4c.service.ts

@@ -0,0 +1,384 @@
+/**
+ * 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, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+/** A hold the bank placed for an I4C complaint (m_i4c_hold). */
+export interface I4cHold {
+  id: number;
+  request_id: number;
+  incident_id: number;
+  acknowledgement_no: string;
+  account_type: 'SAVINGS' | 'CURRENT';
+  account_id: number;
+  account_no: string;
+  client_id?: number;
+  client_name?: string;
+  office_name?: string;
+  layer: number;
+  disputed_amount: number;
+  amount_held: number;
+  shortfall: number;
+  status: 'ACTIVE' | 'RELEASED' | 'NOT_HOLDABLE';
+  debit_frozen: boolean;
+  held_at: string;
+  review_due_on: string;
+  intimation_due_by?: string;
+  customer_intimated_at?: string;
+  intimation_mode?: string;
+  intimation_reference?: string;
+  intimated_by?: string;
+  released_at?: string;
+  release_reason_type?: string;
+  release_reference?: string;
+  pending_actions?: number;
+  transactions?: any[];
+  actions?: any[];
+  /** Every notice sent or recorded for this hold, newest first. */
+  intimationLog?: IntimationLogEntry[];
+  /** Channels switched on for automatic intimation, in the order they are tried. */
+  automaticChannels?: string[];
+  grievances?: any[];
+  restorations?: any[];
+  documents?: I4cDocument[];
+  released_amount?: number;
+  restored_amount?: number;
+  auto_intimation_attempts?: number;
+}
+
+export interface IntimationLogEntry {
+  id: number;
+  channel: string;
+  mode: 'AUTO' | 'MANUAL' | 'RESEND';
+  status: string;
+  destination_masked?: string;
+  provider?: string;
+  provider_reference?: string;
+  failure_reason?: string;
+  actor?: string;
+  created_at: string;
+}
+
+/** An automatic customer-intimation channel (m_i4c_intimation_channel). */
+export interface IntimationChannel {
+  channel: 'EMAIL' | 'SMS' | 'WHATSAPP';
+  enabled: boolean;
+  priority: number;
+  subject?: string;
+  body: string;
+  updated_by?: string;
+  updated_at?: string;
+}
+
+export interface IntimationSettings {
+  channels: IntimationChannel[];
+  placeholders: string[];
+  manualChannels: string[];
+}
+
+export interface IntimationResult {
+  outcome: 'SENT' | 'NO_CHANNEL_ENABLED' | 'NOT_DELIVERED' | 'ALREADY_INTIMATED' | 'NOTHING_HELD';
+  channel?: string;
+  destination?: string;
+  message: string;
+}
+
+export type I4cDocumentOwner = 'HOLD' | 'GRIEVANCE' | 'RESTORATION';
+
+/** A document attached to a hold, grievance or restoration (content downloaded separately). */
+export interface I4cDocument {
+  id: number;
+  doc_type: string;
+  file_name: string;
+  content_type: string;
+  size_bytes: number;
+  sha256: string;
+  remarks?: string;
+  uploaded_by: string;
+  uploaded_at: string;
+}
+
+export const DOCUMENT_TYPES: { value: string; label: string }[] = [
+  { value: 'IO_ORDER', label: 'IO order' },
+  { value: 'GRM_ORDER', label: 'GRM order (DGRO / SGRO)' },
+  { value: 'COURT_ORDER', label: 'Court order' },
+  { value: 'BNSS_106_NOTICE', label: 'Notice u/s 106 BNSS' },
+  { value: 'INDEMNITY_BOND', label: 'Indemnity bond' },
+  { value: 'FIR', label: 'FIR copy' },
+  { value: 'KYC', label: 'KYC document' },
+  { value: 'APPLICATION', label: "Customer's application" },
+  { value: 'PHOTO', label: 'Photograph' },
+  { value: 'BANK_STATEMENT', label: 'Bank statement' },
+  { value: 'EDD_REPORT', label: 'EDD report' },
+  { value: 'PAN', label: 'PAN card' },
+  { value: 'OTHER', label: 'Other' }
+];
+
+/** Save a downloaded file (CSV, document) under the given name. */
+export function saveBlob(blob: Blob, fileName: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+/** One page of an officer list, as every /i4c/admin list endpoint returns it. */
+export interface I4cPage<T> {
+  totalFilteredRecords: number;
+  pageItems: T[];
+}
+
+/** Query-string filters of a list; empty values are left out of the request. */
+export type I4cListParams = Record<string, string | number | boolean | null | undefined>;
+
+export interface HoldActionRequest {
+  action: 'RELEASE' | 'FREEZE' | 'UNFREEZE' | 'UNFREEZE_AND_RELEASE';
+  /** RELEASE only: how much to release; empty releases all. */
+  amount?: number | null;
+  reasonType: string;
+  orderReference?: string;
+  orderDate?: string;
+  authority?: string;
+  remarks?: string;
+}
+
+export const HOLD_REASON_TYPES: { value: string; label: string }[] = [
+  { value: 'IO_ORDER', label: 'Investigating Officer order' },
+  { value: 'GRM_DECISION', label: 'GRM decision (IO / DGRO / SGRO)' },
+  { value: 'MRM_RESTORATION', label: 'MRM money restoration' },
+  { value: 'COURT_ORDER', label: 'Court order' },
+  { value: 'LEA_DIRECTION', label: 'LEA direction' },
+  { value: 'REVIEW_90_DAYS', label: '90-day review (no direction received)' },
+  { value: 'WRONG_ACCOUNT', label: 'Wrong account reported' },
+  { value: 'OTHER', label: 'Other' }
+];
+
+/** Officer API of the I4C (NCRP-CFCFRMS) integration: /v1/i4c/admin/* on the CBS backend. */
+@Injectable({ providedIn: 'root' })
+export class I4cService {
+  private http = inject(HttpClient);
+  private base = '/i4c/admin';
+  private cases = '/i4c/cases';
+
+  dashboard(): Observable<any> {
+    return this.http.get<any>(`${this.base}/dashboard`);
+  }
+
+  /** Filters: status, search, subCategory, layer, response, fromDate, toDate, offset, limit. */
+  requests(query: I4cListParams = {}): Observable<I4cPage<any>> {
+    return this.http.get<I4cPage<any>>(`${this.base}/requests`, { params: this.params(query) });
+  }
+
+  request(id: number): Observable<any> {
+    return this.http.get<any>(`${this.base}/requests/${id}`);
+  }
+
+  reprocess(id: number): Observable<any> {
+    return this.http.post<any>(`${this.base}/requests/${id}/reprocess`, {});
+  }
+
+  /** Filters: view, search, accountType, intimation, frozen, layer, fromDate, toDate, offset, limit. */
+  holds(query: I4cListParams = {}): Observable<I4cPage<I4cHold>> {
+    return this.http.get<I4cPage<I4cHold>>(`${this.base}/holds`, { params: this.params(query) });
+  }
+
+  hold(id: number): Observable<I4cHold> {
+    return this.http.get<I4cHold>(`${this.base}/holds/${id}`);
+  }
+
+  requestHoldAction(holdId: number, body: HoldActionRequest): Observable<any> {
+    return this.http.post<any>(`${this.base}/holds/${holdId}/actions`, body);
+  }
+
+  recordIntimation(holdId: number, mode: string, reference?: string): Observable<any> {
+    return this.http.post<any>(`${this.base}/holds/${holdId}/intimation`, { mode, reference });
+  }
+
+  /** Filters: status, action, reasonType, search, fromDate, toDate, offset, limit. */
+  holdActions(query: I4cListParams = {}): Observable<I4cPage<any>> {
+    return this.http.get<I4cPage<any>>(`${this.base}/hold-actions`, { params: this.params(query) });
+  }
+
+  approveHoldAction(id: number): Observable<any> {
+    return this.http.post<any>(`${this.base}/hold-actions/${id}/approve`, {});
+  }
+
+  rejectHoldAction(id: number, reason: string): Observable<any> {
+    return this.http.post<any>(`${this.base}/hold-actions/${id}/reject`, { reason });
+  }
+
+  /** Filters: status, type (ACK / RESPONSE), search, fromDate, toDate, offset, limit. */
+  outbox(query: I4cListParams = {}): Observable<I4cPage<any>> {
+    return this.http.get<I4cPage<any>>(`${this.base}/outbox`, { params: this.params(query) });
+  }
+
+  retryOutbox(id: number): Observable<any> {
+    return this.http.post<any>(`${this.base}/outbox/${id}/retry`, {});
+  }
+
+  /** Filters: direction, failures, httpStatus, responseCode, search, fromDate, toDate, offset, limit. */
+  apiLog(query: I4cListParams = {}): Observable<I4cPage<any>> {
+    return this.http.get<I4cPage<any>>(`${this.base}/api-log`, { params: this.params(query) });
+  }
+
+  apiLogEntry(id: number): Observable<any> {
+    return this.http.get<any>(`${this.base}/api-log/${id}`);
+  }
+
+  /** Send the hold notice now on the switched-on automatic channels. */
+  sendIntimation(holdId: number): Observable<IntimationResult> {
+    return this.http.post<IntimationResult>(`${this.base}/holds/${holdId}/intimation/send`, {});
+  }
+
+  intimationChannels(): Observable<IntimationSettings> {
+    return this.http.get<IntimationSettings>(`${this.base}/intimation-channels`);
+  }
+
+  updateIntimationChannel(
+    channel: string,
+    body: { enabled?: boolean; priority?: number; subject?: string; body?: string }
+  ): Observable<IntimationChannel[]> {
+    return this.http.put<IntimationChannel[]>(`${this.base}/intimation-channels/${channel}`, body);
+  }
+
+  testIntimationChannel(channel: string, to: string): Observable<IntimationResult> {
+    return this.http.post<IntimationResult>(`${this.base}/intimation-channels/${channel}/test`, { to });
+  }
+
+  /** Filters: search, type, ifsc (KNOWN / UNKNOWN), offset, limit. */
+  bankMaster(query: I4cListParams = {}): Observable<I4cPage<any>> {
+    return this.http.get<I4cPage<any>>(`${this.base}/bank-master`, { params: this.params(query) });
+  }
+
+  // ── GRM / MRM (/v1/i4c/cases) ──────────────────────────────────────────
+
+  grievances(query: I4cListParams = {}): Observable<I4cPage<any>> {
+    return this.http.get<I4cPage<any>>(`${this.cases}/grievances`, { params: this.params(query) });
+  }
+
+  grievance(id: number): Observable<any> {
+    return this.http.get<any>(`${this.cases}/grievances/${id}`);
+  }
+
+  createGrievance(
+    holdId: number,
+    body: { customerRequest: string; customerReason?: string }
+  ): Observable<{ resourceId: number }> {
+    return this.http.post<{ resourceId: number }>(`${this.cases}/holds/${holdId}/grievances`, body);
+  }
+
+  /** step: edd, submit, nodal, events, investigation, decision, escalate, withdraw */
+  grievanceStep(id: number, step: string, body: Record<string, any>): Observable<any> {
+    return this.http.post<any>(`${this.cases}/grievances/${id}/${step}`, body);
+  }
+
+  raiseGrievanceAction(id: number): Observable<{ resourceId: number; actionRequestId: number | null }> {
+    return this.http.post<{ resourceId: number; actionRequestId: number | null }>(
+      `${this.cases}/grievances/${id}/action`,
+      {}
+    );
+  }
+
+  restorations(query: I4cListParams = {}): Observable<I4cPage<any>> {
+    return this.http.get<I4cPage<any>>(`${this.cases}/restorations`, { params: this.params(query) });
+  }
+
+  restoration(id: number): Observable<any> {
+    return this.http.get<any>(`${this.cases}/restorations/${id}`);
+  }
+
+  assessRestoration(
+    holdId: number,
+    body: { basis: string; restorableAmount?: number | null; remarks?: string }
+  ): Observable<{ resourceId: number }> {
+    return this.http.post<{ resourceId: number }>(`${this.cases}/holds/${holdId}/restorations`, body);
+  }
+
+  recordRestorationRequest(id: number, body: Record<string, any>): Observable<any> {
+    return this.http.put<any>(`${this.cases}/restorations/${id}/request`, body);
+  }
+
+  /** step: bank-action, retry-outward, mrm-updated, receipt, victim-status */
+  restorationStep(id: number, step: string, body: Record<string, any> = {}): Observable<any> {
+    return this.http.post<any>(`${this.cases}/restorations/${id}/${step}`, body);
+  }
+
+  openVictimCase(acknowledgementNo: string): Observable<{ resourceId: number }> {
+    return this.http.post<{ resourceId: number }>(`${this.cases}/victim-cases`, { acknowledgementNo });
+  }
+
+  proRata(accountNo: string, amount?: number | null): Observable<any> {
+    return this.http.get<any>(`${this.cases}/pro-rata`, { params: this.params({ accountNo, amount }) });
+  }
+
+  mrmBalanceReport(): Observable<any[]> {
+    return this.http.get<any[]>(`${this.cases}/mrm-balance-report`);
+  }
+
+  mrmBalanceReportCsv(): Observable<Blob> {
+    return this.http.get(`${this.cases}/mrm-balance-report.csv`, { responseType: 'blob' });
+  }
+
+  statementCsv(holdId: number, fromDate?: string, toDate?: string): Observable<Blob> {
+    return this.http.get(`${this.cases}/holds/${holdId}/statement.csv`, {
+      params: this.params({ fromDate, toDate }),
+      responseType: 'blob'
+    });
+  }
+
+  documents(ownerType: I4cDocumentOwner, ownerId: number): Observable<I4cDocument[]> {
+    return this.http.get<I4cDocument[]>(`${this.cases}/documents`, { params: this.params({ ownerType, ownerId }) });
+  }
+
+  uploadDocument(body: {
+    ownerType: I4cDocumentOwner;
+    ownerId: number;
+    docType: string;
+    fileName: string;
+    contentType: string;
+    content: string;
+    remarks?: string;
+  }): Observable<{ resourceId: number }> {
+    return this.http.post<{ resourceId: number }>(`${this.cases}/documents`, body);
+  }
+
+  downloadDocument(id: number): Observable<Blob> {
+    return this.http.get(`${this.cases}/documents/${id}/content`, { responseType: 'blob' });
+  }
+
+  private params(values: Record<string, any>): HttpParams {
+    let params = new HttpParams();
+    Object.entries(values).forEach(
+      ([
+        key,
+        value
+      ]) => {
+        if (value !== undefined && value !== null && value !== '') {
+          params = params.set(key, String(value));
+        }
+      }
+    );
+    return params;
+  }
+}
+
+/** Backend errors come as Fineract's { defaultUserMessage, errors[] }; this picks the sentence a user should read. */
+export function i4cErrorMessage(error: any): string {
+  const body = error?.error;
+  return (
+    body?.errors?.[0]?.defaultUserMessage ||
+    body?.defaultUserMessage ||
+    body?.developerMessage ||
+    error?.message ||
+    'Request failed'
+  );
+}