fix: glim, gsim account create (#2375)

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

@@ -52,10 +52,18 @@
         [loansAccountProductTemplate]="loansAccountProductTemplate"
         [loansAccountTemplate]="loansAccountTemplate"
         [loansAccountFormValid]="loansAccountFormValid"
-        [activeClientMembers]="activeClientMembers"
       >
       </mifosx-loans-account-charges-step>
     </mat-step>
+    <mat-step>
+      <ng-template matStepLabel>{{ 'labels.heading.Active Client Members' | translate }}</ng-template>
+
+      <mifosx-loans-active-client-members
+        [activeClientMembers]="activeClientMembers"
+        [loansAccountFormValid]="loansAccountFormValid"
+      >
+      </mifosx-loans-active-client-members>
+    </mat-step>
 
     <mat-step state="repayment" *ngIf="loansAccountFormValid" completed>
       <ng-template matStepLabel>{{ 'labels.inputs.REPAYMENT SCHEDULE' | translate }}</ng-template>

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

@@ -10,6 +10,7 @@ import { ClientsService } from 'app/clients/clients.service';
 
 /** Step Components */
 import { LoansAccountDetailsStepComponent } from '../../loans-account-stepper/loans-account-details-step/loans-account-details-step.component';
+import { LoansActiveClientMembersComponent } from '../../loans-account-stepper/loans-active-client-members/loans-active-client-members.component';
 import { LoansAccountTermsStepComponent } from '../../loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component';
 import { LoansAccountChargesStepComponent } from '../../loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component';
 import { LoansAccountDatatableStepComponent } from '../../loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component';
@@ -26,6 +27,8 @@ export class CreateGlimAccountComponent {
   @ViewChild(LoansAccountTermsStepComponent, { static: true }) loansAccountTermsStep: LoansAccountTermsStepComponent;
   @ViewChild(LoansAccountChargesStepComponent, { static: true })
   loansAccountChargesStep: LoansAccountChargesStepComponent;
+  @ViewChild(LoansActiveClientMembersComponent, { static: true })
+  loansActiveClientMembers: LoansActiveClientMembersComponent;
   /** Get handle on dtloan tags in the template */
   @ViewChildren('dtloan') loanDatatables: QueryList<LoansAccountDatatableStepComponent>;
 
@@ -128,7 +131,10 @@ export class CreateGlimAccountComponent {
   /** Checks whether all the forms in different steps are valid or not */
   get loansAccountFormValid() {
     return (
-      this.loansAccountDetailsForm.valid && this.loansAccountTermsForm.valid && this.loansAccountChargesStep.isValid
+      this.loansAccountDetailsForm.valid &&
+      this.loansAccountTermsForm.valid &&
+      // this.loansAccountChargesStep.isValid &&
+      this.loansActiveClientMembers.isValid
     );
   }
 
@@ -139,7 +145,7 @@ export class CreateGlimAccountComponent {
 
   /** Retrieves Data of all forms except Currency to submit the data */
   get loansAccount() {
-    this.selectedMembers = this.loansAccountChargesStep.selectedClientMembers;
+    this.selectedMembers = this.loansActiveClientMembers.selectedClientMembers;
     return {
       ...this.loansAccountDetailsStep.loansAccountDetails,
       ...this.loansAccountTermsStep.loansAccountTerms,

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html

@@ -132,60 +132,6 @@
     <tr mat-header-row *matHeaderRowDef="overdueChargesDisplayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns"></tr>
   </table>
-
-  <div fxFlex="98%" *ngIf="activeClientMembers">
-    <table fxFlex="98%" mat-table [dataSource]="dataSource">
-      <!-- Check Column -->
-      <ng-container matColumnDef="check">
-        <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
-        </td>
-      </ng-container>
-
-      <!-- Position Column -->
-      <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
-      </ng-container>
-
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
-      </ng-container>
-
-      <!-- Weight Column -->
-      <ng-container matColumnDef="purpose">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Purpose' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <mat-form-field>
-            <mat-label>{{ 'labels.inputs.Select Purpose' | translate }}</mat-label>
-            <mat-select [(ngModel)]="element.loanPurposeId">
-              <mat-option *ngFor="let purpose of loanPurposeOptions" [value]="purpose.id">
-                {{ purpose.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </td>
-      </ng-container>
-
-      <!-- Symbol Column -->
-      <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <mat-form-field>
-            <input type="number" matInput [(ngModel)]="element.principal" />
-          </mat-form-field>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
-    </table>
-  </div>
 </div>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
@@ -193,7 +139,7 @@
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}
   </button>
-  <button mat-raised-button matStepperNext [disabled]="!loansAccountFormValid">
+  <button mat-raised-button matStepperNext>
     {{ 'labels.buttons.Next' | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts

@@ -264,10 +264,9 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
   }
 
   get isValid() {
-    return (
-      !this.activeClientMembers ||
-      this.selectedClientMembers?.selectedMembers?.reduce((acc: any, cur: any) => acc + (cur.principal ?? 0), 0) > 0
-    );
+    return true;
+    // !this.activeClientMembers ||
+    // this.selectedClientMembers?.selectedMembers?.reduce((acc: any, cur: any) => acc + (cur.principal ?? 0), 0) > 0
   }
 
   /**

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts

@@ -241,10 +241,13 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
 
     if (this.loansAccountTermsData) {
       if (this.loansAccountTermsData.loanProductId) {
+        let formattedDate = null;
+        if (this.loansAccountTermsData.expectedFirstRepaymentOnDate) {
+          const repaymentDate = new Date(this.loansAccountTermsData.expectedFirstRepaymentOnDate);
+          formattedDate = this.formatDateToDDMMYYYY(repaymentDate);
+        }
         this.loansAccountTermsForm.patchValue({
-          repaymentsStartingFromDate:
-            this.loansAccountTermsData.expectedFirstRepaymentOnDate &&
-            new Date(this.loansAccountTermsData.expectedFirstRepaymentOnDate)
+          repaymentsStartingFromDate: this.loansAccountTermsData.expectedFirstRepaymentOnDate && formattedDate
         });
       }
       this.loansAccountTermsForm.patchValue({
@@ -284,6 +287,12 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   allowAddDisbursementDetails() {
     return this.multiDisburseLoan && !this.loansAccountTermsData.disallowExpectedDisbursements;
   }
+  formatDateToDDMMYYYY(date: Date): string {
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const year = date.getFullYear();
+    return `${day}-${month}-${year}`;
+  }
 
   /** Custom Validators for the form */
   setCustomValidators() {

src/app/loans/loans-account-stepper/loans-active-client-members/loans-active-client-members.component.html

@@ -0,0 +1,67 @@
+<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="activeClientMembers">
+  <table fxFlex="98%" mat-table [dataSource]="dataSource">
+    <!-- Check Column -->
+    <ng-container matColumnDef="check">
+      <th mat-header-cell *matHeaderCellDef>
+        <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
+      </th>
+      <td mat-cell *matCellDef="let element">
+        <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
+      </td>
+    </ng-container>
+
+    <!-- Position Column -->
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.id }}</td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="purpose">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Loan Purpose' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <mat-form-field>
+          <mat-label>{{ 'labels.inputs.Select Purpose' | translate }}</mat-label>
+          <mat-select [(ngModel)]="element.loanPurposeId">
+            <mat-option *ngFor="let purpose of loanPurposeOptions" [value]="purpose.id">
+              {{ purpose.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="amount">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Original Loan' | translate }}</th>
+      <td mat-cell *matCellDef="let element">
+        <mat-form-field>
+          <input type="number" matInput [(ngModel)]="element.principal" />
+        </mat-form-field>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
+  </table>
+</div>
+
+<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <button mat-raised-button matStepperPrevious>
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Previous' | translate }}
+  </button>
+  <button mat-raised-button matStepperNext [disabled]="!loansAccountFormValid">
+    {{ 'labels.buttons.Next' | translate }}
+    <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+  </button>
+  <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
+    {{ 'labels.buttons.Cancel' | translate }}
+  </button>
+</div>

src/app/loans/loans-account-stepper/loans-active-client-members/loans-active-client-members.component.scss

@@ -0,0 +1,36 @@
+table {
+  width: 100%;
+}
+
+.mat-elevation-z1 {
+  margin: 1em 0 1.5em;
+}
+
+.margin-t {
+  margin-top: 1em;
+}
+
+h4 {
+  font-weight: 500;
+  margin: 1em 0;
+}
+
+h3 {
+  font-weight: 500;
+}
+
+mat-divider {
+  margin: 1em 0;
+}
+
+.margin-v {
+  margin: 1em 0;
+}
+
+.margin-b {
+  margin: 0 0 1em;
+}
+
+.tableName {
+  padding-left: 2%;
+}

src/app/loans/loans-account-stepper/loans-active-client-members/loans-active-client-members.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoansActiveClientMembersComponent } from './loans-active-client-members.component';
+
+describe('LoansActiveClientMembersComponent', () => {
+  let component: LoansActiveClientMembersComponent;
+  let fixture: ComponentFixture<LoansActiveClientMembersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LoansActiveClientMembersComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LoansActiveClientMembersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loans/loans-account-stepper/loans-active-client-members/loans-active-client-members.component.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-loans-active-client-members',
+  templateUrl: './loans-active-client-members.component.html',
+  styleUrls: ['./loans-active-client-members.component.scss']
+})
+export class LoansActiveClientMembersComponent implements OnInit {
+  loanId: any = null;
+  @Input() activeClientMembers?: any;
+  @Input() loansAccountFormValid: boolean;
+
+  constructor(private route: ActivatedRoute) {
+    this.loanId = this.route.snapshot.params['loanId'];
+  }
+  dataSource: any;
+  /** Check for select all the Clients List */
+  selectAllItems = false;
+  /** Loan Purpose Options */
+  loanPurposeOptions: string[] = [];
+  /** Table Displayed Columns */
+  displayedColumn: string[] = [
+    'check',
+    'id',
+    'name',
+    'purpose',
+    'amount'
+  ];
+
+  ngOnInit(): void {
+    // console.log("Active Client Members in LoansActiveClientMembersComponent:", this.activeClientMembers);
+
+    this.dataSource = new MatTableDataSource<any>(this.activeClientMembers);
+  }
+
+  get isValid() {
+    // console.log("LoansActiveClientMembersComponent isValid:", this.selectedClientMembers?.selectedMembers?.reduce((acc: any, cur: any) => acc + (cur.principal ?? 0), 0) > 0);
+    return (
+      !this.activeClientMembers ||
+      this.selectedClientMembers?.selectedMembers?.reduce((acc: any, cur: any) => acc + (cur.principal ?? 0), 0) > 0
+    );
+  }
+  get selectedClientMembers() {
+    return { selectedMembers: this.activeClientMembers.filter((item: any) => item.selected) };
+  }
+
+  /** Toggle all checks */
+  toggleSelects() {
+    for (const member of this.activeClientMembers) {
+      member.selected = this.selectAllItems;
+    }
+  }
+
+  /** Check if all the checks are selected */
+  toggleSelect() {
+    const len = this.activeClientMembers.length;
+    this.selectAllItems =
+      len === 0 ? false : this.activeClientMembers.filter((item: any) => item.selected).length === len;
+  }
+}

src/app/loans/loans.module.ts

@@ -80,6 +80,7 @@ import { LoanReagingComponent } from './loans-view/loan-account-actions/loan-rea
 import { LoanReamortizeComponent } from './loans-view/loan-account-actions/loan-reamortize/loan-reamortize.component';
 import { LoanTermVariationsTabComponent } from './loans-view/loan-term-variations-tab/loan-term-variations-tab.component';
 import { AddInterestPauseComponent } from './loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component';
+import { LoansActiveClientMembersComponent } from './loans-account-stepper/loans-active-client-members/loans-active-client-members.component';
 
 /**
  * Loans Module
@@ -163,7 +164,8 @@ import { AddInterestPauseComponent } from './loans-view/loan-account-actions/add
     LoanReagingComponent,
     LoanReamortizeComponent,
     LoanTermVariationsTabComponent,
-    AddInterestPauseComponent
+    AddInterestPauseComponent,
+    LoansActiveClientMembersComponent
   ],
   providers: []
 })

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

@@ -50,6 +50,13 @@
       </mifosx-savings-account-charges-step>
     </mat-step>
 
+    <mat-step>
+      <ng-template matStepLabel>{{ 'labels.heading.Active Client Members' | translate }}</ng-template>
+
+      <mifosx-savings-active-client-members [activeClientMembers]="activeClientMembers">
+      </mifosx-savings-active-client-members>
+    </mat-step>
+
     <mat-step *ngIf="savingsAccountFormValid" completed>
       <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
 

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

@@ -6,6 +6,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { SavingsAccountDetailsStepComponent } from '../../savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
 import { SavingsAccountTermsStepComponent } from '../../savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component';
 import { SavingsAccountChargesStepComponent } from '../../savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component';
+import { SavingsActiveClientMembersComponent } from '../../savings-account-stepper/savings-active-client-members/savings-active-client-members.component';
 
 /** Custom Services */
 import { SavingsService } from '../../savings.service';
@@ -39,6 +40,9 @@ export class CreateGsimAccountComponent {
   /** Savings Account Charges Step */
   @ViewChild(SavingsAccountChargesStepComponent, { static: true })
   savingsAccountChargesStep: SavingsAccountChargesStepComponent;
+  /** Savings Active Client Members */
+  @ViewChild(SavingsActiveClientMembersComponent, { static: true })
+  savingsActiveClientMembers: SavingsActiveClientMembersComponent;
 
   /**
    * Fetches savings account template from `resolve`
@@ -105,7 +109,7 @@ export class CreateGsimAccountComponent {
    * Retrieves savings account object.
    */
   get savingsAccount() {
-    this.selectedMembers = this.savingsAccountChargesStep.selectedClientMembers;
+    this.selectedMembers = this.savingsActiveClientMembers.selectedClientMembers;
     return {
       ...this.savingsAccountDetailsStep.savingsAccountDetails,
       ...this.savingsAccountTermsStep.savingsAccountTerms,

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html

@@ -124,47 +124,14 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
-  <div fxFlex="98%" *ngIf="activeClientMembers">
-    <table fxFlex="98%" mat-table [dataSource]="dataSource">
-      <!-- Check Column -->
-      <ng-container matColumnDef="check">
-        <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
-        </td>
-      </ng-container>
-
-      <!-- Position Column -->
-      <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
-      </ng-container>
-
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
-    </table>
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Previous' | translate }}
+    </button>
+    <button mat-raised-button matStepperNext>
+      {{ 'labels.buttons.Next' | translate }}
+      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+    </button>
   </div>
 </div>
-
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Previous' | translate }}
-  </button>
-  <button
-    mat-raised-button
-    matStepperNext
-    [disabled]="activeClientMembers ? selectedClientMembers.selectedMembers.length === 0 : false"
-  >
-    {{ 'labels.buttons.Next' | translate }}
-    <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-  </button>
-</div>

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.ts

@@ -81,7 +81,6 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
       } else {
         this.chargesDataSource = [];
       }
-      this.dataSource = new MatTableDataSource<any>(this.activeClientMembers);
     }
   }
 
@@ -226,24 +225,4 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
   get savingsAccountCharges() {
     return { charges: this.chargesDataSource };
   }
-
-  get selectedClientMembers() {
-    return {
-      selectedMembers: this.activeClientMembers ? this.activeClientMembers.filter((item: any) => item.selected) : []
-    };
-  }
-
-  /** Toggle all checks */
-  toggleSelects() {
-    for (const member of this.activeClientMembers) {
-      member.selected = this.selectAllItems;
-    }
-  }
-
-  /** Check if all the checks are selected */
-  toggleSelect() {
-    const len = this.activeClientMembers.length;
-    this.selectAllItems =
-      len === 0 ? false : this.activeClientMembers.filter((item: any) => item.selected).length === len;
-  }
 }

src/app/savings/savings-account-stepper/savings-active-client-members/savings-active-client-members.component.html

@@ -0,0 +1,40 @@
+<div *ngIf="activeClientMembers">
+  <table fxFlex="98%" mat-table [dataSource]="dataSource">
+    <!-- Check Column -->
+
+    <ng-container matColumnDef="check">
+      <th mat-header-cell *matHeaderCellDef>
+        <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
+      </th>
+      <td mat-cell *matCellDef="let element">
+        <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
+      </td>
+    </ng-container>
+
+    <!-- Position Column -->
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.id }}</td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
+      <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
+  </table>
+</div>
+
+<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <button mat-raised-button matStepperPrevious>
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+    {{ 'labels.buttons.Previous' | translate }}
+  </button>
+  <button mat-raised-button matStepperNext [disabled]="selectedClientMembers.selectedMembers.length === 0">
+    {{ 'labels.buttons.Next' | translate }}
+    <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+  </button>
+</div>

src/app/savings/savings-account-stepper/savings-active-client-members/savings-active-client-members.component.scss

@@ -0,0 +1,11 @@
+table {
+  width: 100%;
+}
+
+.mat-elevation-z1 {
+  margin: 1em 0 1.5em;
+}
+
+.margin-t {
+  margin-top: 1em;
+}

src/app/savings/savings-account-stepper/savings-active-client-members/savings-active-client-members.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SavingsActiveClientMembersComponent } from './savings-active-client-members.component';
+
+describe('SavingsActiveClientMembersComponent', () => {
+  let component: SavingsActiveClientMembersComponent;
+  let fixture: ComponentFixture<SavingsActiveClientMembersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SavingsActiveClientMembersComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SavingsActiveClientMembersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/savings/savings-account-stepper/savings-active-client-members/savings-active-client-members.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+
+@Component({
+  selector: 'mifosx-savings-active-client-members',
+  templateUrl: './savings-active-client-members.component.html',
+  styleUrls: ['./savings-active-client-members.component.scss']
+})
+export class SavingsActiveClientMembersComponent implements OnInit {
+  @Input() activeClientMembers?: any;
+  selectAllItems = false;
+  displayedColumn: string[] = [
+    'check',
+    'id',
+    'name'
+  ];
+
+  constructor() {}
+
+  dataSource: any;
+  ngOnInit(): void {
+    console.log('Active Client Members in LoansActiveClientMembersComponent:', this.activeClientMembers);
+    this.dataSource = new MatTableDataSource<any>(this.activeClientMembers);
+  }
+  get selectedClientMembers() {
+    return { selectedMembers: this.activeClientMembers.filter((item: any) => item.selected) };
+  }
+
+  /** Toggle all checks */
+  toggleSelects() {
+    for (const member of this.activeClientMembers) {
+      member.selected = this.selectAllItems;
+    }
+  }
+
+  /** Check if all the checks are selected */
+  toggleSelect() {
+    const len = this.activeClientMembers.length;
+    this.selectAllItems =
+      len === 0 ? false : this.activeClientMembers.filter((item: any) => item.selected).length === len;
+  }
+}

src/app/savings/savings.module.ts

@@ -53,6 +53,7 @@ import { DatatableTransactionTabComponent } from './savings-account-view/transac
 import { SavingsTransactionGeneralTabComponent } from './savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component';
 import { SavingsTransactionDatatableTabComponent } from './savings-account-view/transactions/view-transaction/savings-transaction-datatable-tab/savings-transaction-datatable-tab.component';
 import { GeneralTabComponent } from './savings-account-view/general-tab/general-tab.component';
+import { SavingsActiveClientMembersComponent } from './savings-account-stepper/savings-active-client-members/savings-active-client-members.component';
 
 /**
  * Savings Module
@@ -111,7 +112,8 @@ import { GeneralTabComponent } from './savings-account-view/general-tab/general-
     DatatableTransactionTabComponent,
     SavingsTransactionGeneralTabComponent,
     SavingsTransactionDatatableTabComponent,
-    GeneralTabComponent
+    GeneralTabComponent,
+    SavingsActiveClientMembersComponent
   ],
   providers: []
 })

src/assets/translations/en-US.json

@@ -804,6 +804,7 @@
       "Accounts linked to Financial Activities": "Accounts linked to Financial Activities",
       "Accruals": "Accruals",
       "Active Asset Transfer": "Active Asset Transfer",
+      "Active Client Members": "Active Client Members",
       "AdHocQuery": "AdHocQuery",
       "Add Account": "Add Account",
       "Add Currency Form": "Add Currency Form",