WEB-747 Unable to approve or activate the GSIM account from group level (#3184)

src/app/loans/glim-account/glim-account.component.html

@@ -43,10 +43,47 @@
         <td mat-cell *matCellDef="let element">{{ element.parentPrincipalAmount }}</td>
       </ng-container>
 
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          @if (element.status) {
+            <span [ngClass]="element.status.code | statusLookup">
+              {{ element.status.value }}
+            </span>
+          }
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          @if (element.status?.submittedAndPendingApproval) {
+            <button
+              mat-raised-button
+              color="primary"
+              (click)="routeEdit($event)"
+              [routerLink]="['/loans-accounts', element.childLoanId, 'actions', 'Approve']"
+            >
+              <i class="fa fa-check"></i> {{ 'buttons.Approve' | translate }}
+            </button>
+          }
+          @if (element.status?.waitingForDisbursal) {
+            <button
+              mat-raised-button
+              color="primary"
+              (click)="routeEdit($event)"
+              [routerLink]="['/loans-accounts', element.childLoanId, 'actions', 'Disburse']"
+            >
+              <i class="fa fa-flag"></i> {{ 'buttons.Disburse' | translate }}
+            </button>
+          }
+        </td>
+      </ng-container>
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr
         mat-row
-        [routerLink]="['../../', row.childLoanId, 'general']"
+        [routerLink]="['/loans-accounts', row.childLoanId, 'general']"
         *matRowDef="let row; columns: displayedColumns"
       ></tr>
     </table>

src/app/loans/glim-account/glim-account.component.ts

@@ -24,6 +24,8 @@ import {
 } from '@angular/material/table';
 
 import { ActivatedRoute, RouterLink } from '@angular/router';
+import { NgClass } from '@angular/common';
+import { StatusLookupPipe } from 'app/pipes/status-lookup.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -44,7 +46,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     MatHeaderRowDef,
     MatHeaderRow,
     MatRowDef,
-    MatRow
+    MatRow,
+    NgClass,
+    StatusLookupPipe
   ]
 })
 export class GlimAccountComponent implements OnInit {
@@ -58,7 +62,9 @@ export class GlimAccountComponent implements OnInit {
     'clientName',
     'loanAccountNumber',
     'clientPrincipalLoan',
-    'groupPrincipalLoan'
+    'groupPrincipalLoan',
+    'status',
+    'actions'
   ];
   /** Data source for charge overview table. */
   dataSource: MatTableDataSource<any>;
@@ -89,4 +95,12 @@ export class GlimAccountComponent implements OnInit {
   setLoanClientChargeOverview() {
     this.dataSource = new MatTableDataSource(this.glimOverviewData);
   }
+
+  /**
+   * Stops the propagation to view pages.
+   * @param $event
+   */
+  routeEdit($event: MouseEvent) {
+    $event.stopPropagation();
+  }
 }

src/app/savings/gsim-account/gsim-account.component.html

@@ -10,6 +10,45 @@
   <div class="content-container">
     <h2>{{ 'labels.heading.GSIM Account Overview' | translate }}</h2>
 
+    <!-- Group Summary Card -->
+    @if (savingAccountData) {
+      <mat-card class="m-b-20">
+        <mat-card-header>
+          <mat-card-title>{{ 'labels.heading.Group Summary' | translate }}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <div class="layout-row layout-wrap">
+            <div class="flex-50 m-b-10">
+              <strong>{{ 'labels.inputs.Group' | translate }}:</strong>
+              {{ groupsData?.groupName || ('labels.inputs.N/A' | translate) }}
+            </div>
+            <div class="flex-50 m-b-10">
+              <strong>{{ 'labels.inputs.Account Number' | translate }}:</strong>
+              {{ savingAccountData.accountNo }}
+            </div>
+            <div class="flex-50 m-b-10">
+              <strong>{{ 'labels.inputs.Product' | translate }}:</strong>
+              {{ savingAccountData.savingsProductName }}
+            </div>
+            <div class="flex-50 m-b-10">
+              <strong>{{ 'labels.inputs.Status' | translate }}:</strong>
+              <span [ngClass]="savingAccountData.status.code | statusLookup">
+                {{ savingAccountData.status.value }}
+              </span>
+            </div>
+            @if (savingAccountData.summary) {
+              <div class="flex-50 m-b-10">
+                <strong>{{ 'labels.inputs.Total Balance' | translate }}:</strong>
+                {{ savingAccountData.summary.accountBalance | number: '1.2-2' }}
+              </div>
+            }
+          </div>
+        </mat-card-content>
+      </mat-card>
+    }
+
+    <h3>{{ 'labels.heading.Member Accounts' | translate }}</h3>
+
     <table mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="clientDetails">
         <th mat-header-cell *matHeaderCellDef>
@@ -47,7 +86,7 @@
               mat-raised-button
               color="primary"
               (click)="routeEdit($event)"
-              [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Deposit']"
+              [routerLink]="['/savings-accounts', element.id, 'actions', 'Deposit']"
             >
               <i class="fa fa-arrow-up" matTooltip="{{ 'tooltips.Deposit' | translate }}"></i>
             </button>
@@ -58,7 +97,7 @@
               mat-raised-button
               color="primary"
               (click)="routeEdit($event)"
-              [routerLink]="['../', 'savings-accounts', element.id, 'actions', 'Withdrawal']"
+              [routerLink]="['/savings-accounts', element.id, 'actions', 'Withdrawal']"
             >
               <i class="fa fa-arrow-down" matTooltip="{{ 'tooltips.Withdraw' | translate }}"></i>
             </button>
@@ -69,40 +108,40 @@
               mat-raised-button
               color="primary"
               (click)="routeEdit($event)"
-              [routerLink]="['../../../', 'savings-accounts', element.id, 'actions', 'Approve']"
+              [routerLink]="['/savings-accounts', element.id, 'actions', 'Approve']"
             >
               <i class="fa fa-check" matTooltip="{{ 'tooltips.Approve' | translate }}"></i>
             </button>
           }
-          @if (!element.status.submittedAndPendingApproval && !element.status.active) {
+          @if (element.status.approved && !element.status.active) {
             <button
               class="account-action-button"
               mat-raised-button
               color="primary"
               (click)="routeEdit($event)"
-              [routerLink]="['../../../', 'savings-accounts', element.id, 'actions', 'Undo Approval']"
-            >
-              <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approval' | translate }}"></i>
-            </button>
-          }
-          @if (!element.status.submittedAndPendingApproval && !element.status.active) {
-            <button
-              class="account-action-button"
-              mat-raised-button
-              color="primary"
-              (click)="routeEdit($event)"
-              [routerLink]="['../../', element.id, 'actions', 'Activate']"
+              [routerLink]="['/savings-accounts', element.id, 'actions', 'Activate']"
             >
               <i class="fa fa-check-circle" matTooltip="{{ 'tooltips.Activate' | translate }}"></i>
             </button>
           }
+          @if (element.status.approved && !element.status.active) {
+            <button
+              class="account-action-button"
+              mat-raised-button
+              color="primary"
+              (click)="routeEdit($event)"
+              [routerLink]="['/savings-accounts', element.id, 'actions', 'Undo Approval']"
+            >
+              <i class="fa fa-undo" matTooltip="{{ 'tooltips.Undo Approval' | translate }}"></i>
+            </button>
+          }
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr
         mat-row
-        [routerLink]="['../../', row.id, 'transactions']"
+        [routerLink]="['/savings-accounts', row.id, 'transactions']"
         *matRowDef="let row; columns: displayedColumns"
       ></tr>
     </table>

src/app/savings/gsim-account/gsim-account.component.ts

@@ -25,9 +25,26 @@ import {
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { NgClass } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
+import { MatCard, MatCardHeader, MatCardTitle, MatCardContent } from '@angular/material/card';
 import { StatusLookupPipe } from '../../pipes/status-lookup.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
+interface SavingAccount {
+  accountNo: string;
+  savingsProductName?: string;
+  status: {
+    code: string;
+    value: string;
+  };
+  summary?: {
+    accountBalance: number;
+  };
+}
+
+interface GroupData {
+  groupName?: string;
+}
+
 /**
  * GSIM Accounts Overview component.
  */
@@ -50,6 +67,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     MatRowDef,
     MatRow,
     MatPaginator,
+    MatCard,
+    MatCardHeader,
+    MatCardTitle,
+    MatCardContent,
     StatusLookupPipe
   ]
 })
@@ -70,9 +91,9 @@ export class GsimAccountComponent implements OnInit {
   /** Charge Overview data */
   gsimOverviewData: any;
 
-  savingAccountData: any;
+  savingAccountData: SavingAccount | null = null;
 
-  groupsData: any;
+  groupsData: GroupData | null = null;
 
   /** Paginator for charge overview table. */
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;