pending account terminate feature develop

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

@@ -115,11 +115,10 @@ export class CheckerInboxComponent implements OnInit {
    */
   constructor() {
     this.route.data.subscribe((data: { makerCheckerResource: any; makerCheckerTemplate: any }) => {
-      this.searchData = data.makerCheckerResource;
-      if (this.searchData.length > 0) {
-        this.checkerData = true;
-      }
-      this.makerCheckerTemplate = data.makerCheckerTemplate;
+      const raw = data.makerCheckerResource;
+      this.searchData = Array.isArray(raw) ? raw : (raw?.pageItems ?? []);
+      this.checkerData = this.searchData.length > 0;
+      this.makerCheckerTemplate = data.makerCheckerTemplate ?? {};
       this.dataSource = new MatTableDataSource(this.searchData);
       this.selection = new SelectionModel(true, []);
     });

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

@@ -82,8 +82,10 @@ export class PendingAccountComponent {
 
   constructor() {
     this.route.data.subscribe((data: { pendingAccountsData: any }) => {
-      // status 100 = submitted and pending approval only; exclude active/approved/etc.
-      const items = (data.pendingAccountsData?.pageItems || []).filter((a: any) => a.status?.id === 100);
+      // status 100 = submitted and pending approval only; exclude terminated accounts
+      const items = (data.pendingAccountsData?.pageItems || []).filter(
+        (a: any) => a.status?.id === 100 && !a.terminateTrue
+      );
       this.showData = items.length > 0;
       this.dataSource = new MatTableDataSource(items);
       this.selection = new SelectionModel(true, []);

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

@@ -0,0 +1,75 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="cv-tab-content">
+  @if (showData) {
+    <div class="cv-action-bar">
+      <mat-form-field appearance="outline" class="cv-search-field">
+        <mat-icon matPrefix>search</mat-icon>
+        <input matInput placeholder="Search accounts..." (keyup)="applyFilter($event.target['value'])" />
+      </mat-form-field>
+    </div>
+
+    <div class="table-container">
+      <table mat-table [dataSource]="dataSource" class="modern-table">
+        <ng-container matColumnDef="accountNo">
+          <th mat-header-cell *matHeaderCellDef>Account No</th>
+          <td mat-cell *matCellDef="let row" class="cell-mono">{{ row.accountNo }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="clientName">
+          <th mat-header-cell *matHeaderCellDef>Client Name</th>
+          <td mat-cell *matCellDef="let row">{{ row.clientName }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="productName">
+          <th mat-header-cell *matHeaderCellDef>Product</th>
+          <td mat-cell *matCellDef="let row">{{ row.savingsProductName || row.productName }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="accountType">
+          <th mat-header-cell *matHeaderCellDef>Type</th>
+          <td mat-cell *matCellDef="let row">{{ row.accountType }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="officeName">
+          <th mat-header-cell *matHeaderCellDef>Office</th>
+          <td mat-cell *matCellDef="let row">{{ row.officeName }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="submittedOnDate">
+          <th mat-header-cell *matHeaderCellDef>Submitted On</th>
+          <td mat-cell *matCellDef="let row">{{ formatDate(row.timeline?.submittedOnDate || row.submittedOnDate) }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef>Status</th>
+          <td mat-cell *matCellDef="let row">
+            <span class="status-badge status-badge--terminated">Terminated</span>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: displayedColumns"
+          (click)="navigateToAccount(row)"
+          class="table-row"
+        ></tr>
+      </table>
+    </div>
+  }
+
+  @if (!showData) {
+    <div class="empty-state">
+      <i class="fas fa-times-circle empty-icon"></i>
+      <p class="empty-title">No terminated accounts</p>
+      <p class="empty-text">Accounts marked for termination will appear here.</p>
+    </div>
+  }
+</div>

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

@@ -0,0 +1,17 @@
+/**
+ * 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/.
+ */
+
+.status-badge--terminated {
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}

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

@@ -0,0 +1,106 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { MatIcon } from '@angular/material/icon';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+@Component({
+  selector: 'mifosx-terminated-account',
+  templateUrl: './terminated-account.component.html',
+  styleUrls: ['./terminated-account.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatIcon
+  ]
+})
+export class TerminatedAccountComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
+  dataSource: MatTableDataSource<any>;
+  showData = false;
+
+  displayedColumns: string[] = [
+    'accountNo',
+    'clientName',
+    'productName',
+    'accountType',
+    'officeName',
+    'submittedOnDate',
+    'status'
+  ];
+
+  constructor() {
+    this.route.data.subscribe((data: { terminatedAccountsData: any }) => {
+      const items = data.terminatedAccountsData?.pageItems || [];
+      this.showData = items.length > 0;
+      this.dataSource = new MatTableDataSource(items);
+    });
+  }
+
+  navigateToAccount(account: any): void {
+    const clientId = account.clientId;
+    const accountId = account.id;
+    const depositTypeId = account.depositType?.id;
+    if (account.accountType === 'Current') {
+      this.router.navigate([`/clients/${clientId}/current-accounts/${accountId}`]);
+    } else if (depositTypeId === 200) {
+      this.router.navigate([`/clients/${clientId}/fixed-deposits-accounts/${accountId}`]);
+    } else if (depositTypeId === 300) {
+      this.router.navigate([`/clients/${clientId}/recurring-deposits-accounts/${accountId}`]);
+    } else {
+      this.router.navigate([`/clients/${clientId}/savings-accounts/${accountId}`]);
+    }
+  }
+
+  applyFilter(filterValue: string = '') {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  formatDate(date: any): string {
+    if (!date) return '';
+    if (Array.isArray(date)) {
+      return new Date(date[0], date[1] - 1, date[2]).toLocaleDateString('en-IN', {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric'
+      });
+    }
+    const d = new Date(date);
+    return isNaN(d.getTime())
+      ? date
+      : d.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
+  }
+}