feat: add groups view page (general-tab) (#784)

Fixes: #217

src/app/groups/common-resolvers/group-account.resolver.ts

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { GroupsService } from '../groups.service';
+
+/**
+ * Group Accounts data resolver.
+ */
+@Injectable()
+export class GroupAccountsResolver implements Resolve<Object> {
+
+  /**
+   * @param {GroupsService} GroupsService Groups service.
+   */
+  constructor(private groupsService: GroupsService) { }
+
+  /**
+   * Returns the Group's Acccounts data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const groupId = route.parent.paramMap.get('groupId');
+    return this.groupsService.getGroupAccountsData(groupId);
+  }
+
+}

src/app/groups/common-resolvers/group-client-members.resolver.ts

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { GroupsService } from '../groups.service';
+
+/**
+ * Groups Client Members data resolver.
+ */
+@Injectable()
+export class GroupClientMembersResolver implements Resolve<Object> {
+
+  /**
+   * @param {GroupsService} GroupsService Groups service.
+   */
+  constructor(private groupsService: GroupsService) { }
+
+  /**
+   * Returns the Group's Client Members data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const groupId = route.parent.paramMap.get('groupId');
+    return this.groupsService.getGroupClientMembers(groupId);
+  }
+
+}

src/app/groups/common-resolvers/group-summary.resolver.ts

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { GroupsService } from '../groups.service';
+
+/**
+ * Group Summary resolver.
+ */
+@Injectable()
+export class GroupSummaryResolver implements Resolve<Object> {
+
+  /**
+   * @param {GroupsService} GroupsService Groups service.
+   */
+  constructor(private groupsService: GroupsService) { }
+
+  /**
+   * Returns the Group Summary data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const groupId = route.parent.paramMap.get('groupId');
+    return this.groupsService.getGroupSummary(groupId);
+  }
+
+}

src/app/groups/common-resolvers/group-view.resolver.ts

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { GroupsService } from '../groups.service';
+
+/**
+ * Groups data resolver.
+ */
+@Injectable()
+export class GroupViewResolver implements Resolve<Object> {
+
+  /**
+   * @param {GroupsService} GroupsService Groups service.
+   */
+  constructor(private groupsService: GroupsService) { }
+
+  /**
+   * Returns the Groups data.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const groupId = route.paramMap.get('groupId');
+    return this.groupsService.getGroupData(groupId);
+  }
+
+}

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

@@ -10,14 +10,48 @@ import { extract } from '../core/i18n/i18n.service';
 
 /** Custom Imports */
 import { GroupsComponent } from './groups.component';
+import { GroupsViewComponent } from './groups-view/groups-view.component';
+import { GeneralTabComponent } from './groups-view/general-tab/general-tab.component';
+
+/** Custom Resolvers */
+import { GroupViewResolver } from './common-resolvers/group-view.resolver';
+import { GroupAccountsResolver } from './common-resolvers/group-account.resolver';
+import { GroupSummaryResolver } from './common-resolvers/group-summary.resolver';
+import { GroupClientMembersResolver } from './common-resolvers/group-client-members.resolver';
 
 /** Groups Routes */
 const routes: Routes = [
   Route.withShell([
     {
       path: 'groups',
-      component: GroupsComponent,
-      data: { title: extract('Groups'), breadcrumb: 'Groups' }
+      data: { title: extract('Groups'), breadcrumb: 'Groups', routeParamBreadcrumb: false },
+      children: [
+        {
+          path: '',
+          component: GroupsComponent,
+        },
+        {
+          path: ':groupId',
+          component: GroupsViewComponent,
+          data: { title: extract('View Group'), routeParamBreadcrumb: 'groupId' },
+          resolve: {
+            groupViewData: GroupViewResolver,
+
+          },
+          children: [
+            {
+              path: 'general',
+              component: GeneralTabComponent,
+              data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+              resolve: {
+                groupAccountsData: GroupAccountsResolver,
+                groupClientMembers: GroupClientMembersResolver,
+                groupSummary: GroupSummaryResolver
+              }
+            }
+          ]
+        }
+      ]
     }
   ])
 ];
@@ -30,6 +64,9 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
-  providers: []
+  providers: [GroupViewResolver,
+              GroupAccountsResolver,
+              GroupSummaryResolver,
+              GroupClientMembersResolver]
 })
 export class GroupsRoutingModule { }

src/app/groups/groups-view/general-tab/general-tab.component.html

@@ -0,0 +1,289 @@
+<div class="tab-container mat-typography">
+
+  <h3>Group Details</h3>
+
+  <div fxLayout="row" fxLayoutGap="32px" class="group-details-container">
+    <p>
+      Active Client Loans: {{groupSummary?.activeClientLoans}}<br/>
+      Active Client Borrowers: {{groupSummary?.activeClientBorrowers}}<br/>
+      Active Overdue Client Loans: {{groupSummary?.overdueClientLoans}}<br/>
+    </p>
+    <p>
+      Active Group Loans: {{groupSummary?.activeGroupLoans}}<br/>
+      Active Group Borrowers: {{groupSummary?.activeGroupBorrowers}}<br/>
+      Active Overdue Group Loans: {{groupSummary?.overdueGroupLoans}}<br/>
+    </p>
+    <p>
+      Active Clients: {{groupSummary?.activeClients}}<br/>
+    </p>
+  </div>
+
+  <!-- Client Members Table -->
+  <div *ngIf="groupClientMembers">
+
+    <h3>Client Members</h3>
+
+    <table mat-table [dataSource]="groupClientMembers"
+      class="mat-elevation-z1">
+
+      <ng-container matColumnDef="Name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let element">
+          <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
+          {{element.displayName}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Account No">
+        <th mat-header-cell *matHeaderCellDef> Account No. </th>
+        <td mat-cell *matCellDef="let element"> {{element.accountNo}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Office">
+        <th mat-header-cell *matHeaderCellDef> Office </th>
+        <td mat-cell *matCellDef="let element"> {{element.officeName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="JLG Loan Application">
+        <th mat-header-cell *matHeaderCellDef> JLG Loan Application </th>
+        <td mat-cell *matCellDef="let element">
+          <div class="m-l-30" *ngIf="element.status.code !== 'clientStatusType.closed'">
+            <button class="account-action-button" mat-raised-button color="primary">
+              <i class="fa fa-plus" matTooltip="New Loan Application"></i>
+            </button>
+          </div>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="clientMemberColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: clientMemberColumns;" [routerLink]="['/clients', row.id, 'general']" class="select-row"></tr>
+
+    </table>
+
+  </div>
+
+  <div *ngIf="loanAccounts">
+
+    <div fxLayout="row" fxLayoutAlign="start" class="table-header">
+      <div class="m-b-10">
+        <h3>Loan Accounts</h3>
+      </div>
+      <div *ngIf="(loanAccounts|accountsFilter:'loan':'closed').length" class="action-button m-b-10" fxLayoutGap="25px">
+        <button mat-raised-button class="f-right" color="primary"
+      (click)="toggleLoanAccountsOverview()">{{showClosedLoanAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+      </div>
+    </div>
+
+    <!-- Open Loan Accounts Table -->
+    <table *ngIf="!showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan'"
+      class="mat-elevation-z1">
+
+      <ng-container matColumnDef="Account No">
+        <th mat-header-cell *matHeaderCellDef> Account No. </th>
+        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
+            [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"
+            [matTooltip]="element.inArrears?'Active Overdue':element.status.value"></i>
+          {{element.accountNo}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Loan Account">
+        <th mat-header-cell *matHeaderCellDef> Loan Account </th>
+        <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Original Loan">
+        <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+        <td mat-cell *matCellDef="let element"> {{element.originalLoan}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Loan Balance">
+        <th mat-header-cell *matHeaderCellDef> Loan Balance </th>
+        <td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Amount Paid">
+        <th mat-header-cell *matHeaderCellDef> Amount Paid </th>
+        <td mat-cell *matCellDef="let element"> {{element.amountPaid}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Type">
+        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <td mat-cell *matCellDef="let element">
+          <i class="fa fa-large" [ngClass]="(element.loanType.value==='Individual')?'fa-user':'fa-group'"
+          [matTooltip]="(element.loanType.value==='Individual')?'Individual':'Group'"></i>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Actions">
+        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let element">
+          <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+            <i class="fa fa-dollar" matTooltip="Make Repayment"></i>
+          </button>
+          <button *ngIf="element.status.pendingApproval" class="account-action-button" mat-raised-button color="primary">
+            <i class="fa fa-check" matTooltip="Approve"></i>
+          </button>
+          <button *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid"
+            class="account-action-button" mat-raised-button color="primary">
+            <i class="fa fa-flag" matTooltip="Disburse"></i>
+          </button>
+          <button *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid"
+            class="account-action-button" mat-raised-button color="primary">
+            <i class="fa fa-exchange" matTooltip="Transfer Funds"></i>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: openLoansColumns;"></tr>
+
+    </table>
+
+    <!-- Closed Loan Accounts Table-->
+    <table *ngIf="showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan':'closed'"
+      class="mat-elevation-z1">
+
+      <ng-container matColumnDef="Account No">
+        <th mat-header-cell *matHeaderCellDef> Account No. </th>
+        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
+            [ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"
+            [matTooltip]="element.inArrears?'Active Overdue':element.status.value"></i>
+          {{element.accountNo}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Loan Account">
+        <th mat-header-cell *matHeaderCellDef> Loan Account </th>
+        <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Original Loan">
+        <th mat-header-cell *matHeaderCellDef> Original Loan </th>
+        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Loan Balance">
+        <th mat-header-cell *matHeaderCellDef>Loan Balance </th>
+        <td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Amount Paid">
+        <th mat-header-cell *matHeaderCellDef> Amount Paid </th>
+        <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Type">
+        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <td mat-cell *matCellDef="let element">
+          <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'"
+          [matTooltip]="(element.loanType.value==='Individual')?'Individual':'Group'"></i>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Closed Date">
+        <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: closedLoansColumns;"></tr>
+
+    </table>
+
+  </div>
+
+  <div *ngIf="savingAccounts">
+
+    <div fxLayout="row" fxLayoutAlign="start" class="table-header">
+      <div class="m-b-10">
+        <h3>Saving Accounts</h3>
+      </div>
+      <div class="action-button m-b-10" fxLayoutGap="25px">
+        <button *ngIf="(savingAccounts|accountsFilter:'saving':'closed').length" mat-raised-button class="f-right" color="primary"
+        (click)="toggleSavingAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
+      </div>
+    </div>
+
+    <!-- Open Savings Accounts Table -->
+    <table *ngIf="!showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving'"
+      class="mat-elevation-z1">
+
+      <ng-container matColumnDef="Account No">
+        <th mat-header-cell *matHeaderCellDef> Account No. </th>
+        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
+          {{element.accountNo}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Saving Account">
+        <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+        <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Last Active">
+        <th mat-header-cell *matHeaderCellDef> Last Active </th>
+        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Balance">
+        <th mat-header-cell *matHeaderCellDef> Balance </th>
+        <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Actions">
+        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let element">
+          <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+            <i class="fa fa-arrow-up" matTooltip="Deposit"></i>
+          </button>
+          <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+            <i class="fa fa-arrow-down" matTooltip="Withdraw"></i>
+          </button>
+          <button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
+            color="primary">
+            <i class="fa fa-check" matTooltip="Approve"></i>
+          </button>
+          <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+            class="account-action-button" mat-raised-button color="primary">
+            <i class="fa fa-undo" matTooltip="Undo Approval"></i>
+          </button>
+          <button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
+            class="account-action-button" mat-raised-button color="primary">
+            <i class="fa fa-check-circle" matTooltip="Activate"></i>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: openSavingsColumns;"></tr>
+
+    </table>
+
+    <!-- Closed Saving Accounts Table -->
+    <table *ngIf="showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving':'closed'"
+      class="mat-elevation-z1">
+
+      <ng-container matColumnDef="Account No">
+        <th mat-header-cell *matHeaderCellDef> Account No. </th>
+        <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
+          {{element.accountNo}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Saving Account">
+        <th mat-header-cell *matHeaderCellDef> Saving Account </th>
+        <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Closed Date">
+        <th mat-header-cell *matHeaderCellDef> Closed Date </th>
+        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"></tr>
+
+    </table>
+
+  </div>
+
+</div>

src/app/groups/groups-view/general-tab/general-tab.component.scss

@@ -0,0 +1,33 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+  h3 {
+    margin:1% auto;
+  }
+  .group-details-container {
+    border: 1px solid;
+    padding: 1%;
+    margin-bottom: 30px;
+  }
+  .table-header {
+    .action-button{
+      margin-left: auto;
+    }
+  }
+  table {
+    width: 100%;
+    .account-action-button{
+      min-width: 26px;
+      padding: 0 6px;
+      margin: 4px;
+      line-height: 25px;
+    }
+    tr.select-row:hover {
+      cursor: pointer;
+    }
+    margin-bottom: 30px;
+  }
+  i:hover {
+    cursor: pointer;
+  }
+}

src/app/groups/groups-view/general-tab/general-tab.component.spec.ts

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

src/app/groups/groups-view/general-tab/general-tab.component.ts

@@ -0,0 +1,68 @@
+/** Angular Imports */
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+/**
+ * Groups View General Tab Component.
+ */
+@Component({
+  selector: 'mifosx-general-tab',
+  templateUrl: './general-tab.component.html',
+  styleUrls: ['./general-tab.component.scss']
+})
+export class GeneralTabComponent {
+
+  /** Group's all accounts data */
+  groupAccountData: any;
+  /** Group's loan accounts data */
+  loanAccounts: any;
+  /** Group's savings accounts data */
+  savingAccounts: any;
+  /** Group Summary */
+  groupSummary: any;
+  /** Group's Client Members */
+  groupClientMembers: any;
+  /** Columns to be Displayed for client members table */
+  clientMemberColumns: string[] = ['Name', 'Account No', 'Office', 'JLG Loan Application'];
+  /** Columns to be displayed for open loan accounts table */
+  openLoansColumns: string[] = ['Account No', 'Loan Account', 'Original Loan', 'Loan Balance', 'Amount Paid', 'Type', 'Actions'];
+  /** Columns to be displayed for closed loan accounts table */
+  closedLoansColumns: string[] = ['Account No', 'Loan Account', 'Original Loan', 'Loan Balance', 'Amount Paid', 'Type', 'Closed Date'];
+  /** Columns to be displayed for open savings accounts table */
+  openSavingsColumns: string[] = ['Account No', 'Saving Account', 'Last Active', 'Balance', 'Actions'];
+  /** Columns to be displayed for closed accounts table */
+  closedSavingsColumns: string[] = ['Account No', 'Saving Account', 'Closed Date'];
+  /** Boolean for toggling loan accounts table */
+  showClosedLoanAccounts = false;
+  /** Boolean for toggling savings accounts table */
+  showClosedSavingAccounts = false;
+
+  /**
+   * Fetches group's related data from `resolve`
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { groupAccountsData: any, groupClientMembers: any, groupSummary: any }) => {
+      this.groupAccountData = data.groupAccountsData;
+      this.savingAccounts = data.groupAccountsData.savingsAccounts;
+      this.loanAccounts = data.groupAccountsData.loanAccounts;
+      this.groupSummary = data.groupSummary[0];
+      this.groupClientMembers = data.groupClientMembers;
+    });
+  }
+
+  /**
+   * Toggles loan accounts table.
+   */
+  toggleLoanAccountsOverview() {
+    this.showClosedLoanAccounts = !this.showClosedLoanAccounts;
+  }
+
+  /**
+   * Toggles savings account table.
+   */
+  toggleSavingAccountsOverview() {
+    this.showClosedSavingAccounts = !this.showClosedSavingAccounts;
+  }
+
+}

src/app/groups/groups-view/groups-view.component-theme.scss

@@ -0,0 +1,12 @@
+@import "~@angular/material/theming";
+
+@mixin groups-view-component-theme($theme) {
+  $primary: map-get($theme, primary);
+  mifosx-groups-view {
+    .group-card {
+      .header {
+        background-color: mat-color($primary, 500);
+      }
+    }
+  } 
+}

src/app/groups/groups-view/groups-view.component.html

@@ -0,0 +1,109 @@
+<mat-card class="group-card">
+
+  <mat-card-header fxLayout="column" class="header">
+
+    <mat-card-title-group class="header-title-group">
+
+      <div class="profile-image-container">
+        <div>
+          <img mat-card-md-image class="profile-image"
+            src="../../../assets/images/group_placeholder.png">
+        </div>
+      </div>
+
+      <div class="mat-typography group-card-title">
+        <mat-card-title>
+          <h3>
+            <i class="fa fa-stop" [ngClass]="groupViewData.status.code|statusLookup" [matTooltip]="groupViewData.status.value"></i>
+            Group Name : {{groupViewData.name}}
+          </h3>
+        </mat-card-title>
+        <mat-card-subtitle>
+          <p>
+            Group #: {{groupViewData.id}} | Center Name: {{groupViewData.centerName}} | Staff: {{groupViewData.staffName}}<br/>
+            Office Name: {{groupViewData.officeName}}<br/>
+            Activation Date : {{(groupViewData.activationDate)?(groupViewData.activationDate|date) :'Not Activated'}}<br/>
+            <span *ngIf="!groupViewData.active">
+             Closure Date: {{groupViewData.timeline.closedOnDate | date}}
+            </span>
+          </p>
+        </mat-card-subtitle>
+      </div>
+
+      <div class="group-meeting" fxLayoutAlign="start start">
+        <div *ngIf="groupViewData.collectionMeetingCalendar; else unassigned">
+          <p>
+             Next Meeting on: {{groupViewData.collectionMeetingCalendar?.recentEligibleMeetingDate | date}}   
+             <i class="fa fa-calendar"></i><br/>
+             Meeting Frequency: {{groupViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
+          </p>
+        </div>
+        <ng-template #unassigned>
+          <div>
+            <p>
+              Next Meeting on: Unassigned   
+              <i class="fa fa-calendar"></i><br/>
+              Meeting Frequency: N/A
+          </p>
+        </div>
+        </ng-template>
+      </div>
+
+    </mat-card-title-group>
+
+    <mat-card-actions class="group-actions" *ngIf="!(groupViewData.status.value==='Closed')">
+
+        <span *ngIf="!(groupViewData.status.value==='Active')">
+          <button mat-raised-button  *mifosxHasPermission="'UPDATE_GROUP'">
+            <i class="fa fa-check-sign"></i>Activate</button>
+        </span>
+        <button mat-raised-button *mifosxHasPermission="'UPDATE_GROUP'">
+          <i class="fa fa-edit"></i>Edit</button>
+        <button mat-raised-button *mifosxHasPermission="'CREATE_CLIENT'">
+          <i class="fa fa-plus"></i>Add Clients</button>
+        <button mat-raised-button *mifosxHasPermission="'ASSOCIATECLIENTS_GROUP'">
+          <i class="fa fa-exchange"></i>Transfer Clients</button>
+        <button mat-raised-button *mifosxHasPermission="'TRANSFERCLIENTS_GROUP'">
+          <i class="fa fa-user"></i>Manage Clients</button>
+
+        <button mat-raised-button *ngIf="groupViewData.active" [matMenuTriggerFor]="LoanApplications">
+          <i class="fa fa-file"></i>Loan Applications</button>
+        <mat-menu #LoanApplications="matMenu">
+          <span *ngIf="groupViewData.clientMembers">
+            <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">Bulk JLG Loan Application</button></span>
+          <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'">Group Saving Application</button>
+          <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'">Group Loan Application</button>
+        </mat-menu>
+
+        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+        <mat-menu #More="matMenu">
+          <span *ngIf="groupViewData.collectionMeetingCalendar">
+            <button mat-menu-item *mifosxHasPermission="'SAVEORUPDATEATTENDANCE_MEETING'">Attendance</button></span>
+          <span *ngIf="!groupViewData.staffId">
+            <button mat-menu-item *mifosxHasPermission="'ASSIGNSTAFF_GROUP'">Assign Staff</button></span>
+          <span *ngIf="groupViewData.staffId">
+            <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_GROUP'">Unassign Staff</button></span>
+          <span *ngIf="!(groupViewData.centerId || groupViewData.collectionMeetingCalendar) && groupViewData.status.value==='Active'">
+            <button mat-menu-item *mifosxHasPermission="'CREATE_MEETING'">Attatch Meeting</button></span>
+          <button mat-menu-item *mifosxHasPermission="'CLOSE_GROUP'">Close</button>
+          <button mat-menu-item *mifosxHasPermission="'DELETE_GROUP'">Delete</button>
+        </mat-menu>
+
+    </mat-card-actions>
+
+  </mat-card-header>
+
+  <mat-card-content>
+
+    <nav mat-tab-nav-bar class="navigation-tabs">
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+      [active]="general.isActive">
+        General
+      </a>
+    </nav>
+
+    <router-outlet></router-outlet>
+
+  </mat-card-content>
+
+</mat-card>

src/app/groups/groups-view/groups-view.component.scss

@@ -0,0 +1,51 @@
+.group-card {
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
+  .header {
+    padding: 1%;
+    .header-title-group {
+      .group-card-title {
+        color: white;
+        width: 90%;
+        p {
+          color: white;
+        }
+      }
+    }
+    .profile-image-container {
+      margin: 1%;
+      .profile-image {
+        object-fit: cover;
+        border-radius: 20px;
+      }
+    }
+    .group-meeting {
+      align-self: flex-end;
+      width: 300px;
+      height: 140px;
+      div, ng-template > div {
+        background-color: #0a6aac;
+        p {
+          color: white;
+          padding-inline: 10px;
+        }
+      }
+    }
+    .group-actions {
+      align-self: flex-end;
+      margin: 0 1%;
+      i {
+        margin-bottom: 2px;
+        margin-right: 4px;
+      }
+    }
+  }
+  .navigation-tabs {
+    overflow: auto;
+  }
+  i:hover {
+    cursor: pointer;
+  }
+}

src/app/groups/groups-view/groups-view.component.spec.ts

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

src/app/groups/groups-view/groups-view.component.ts

@@ -0,0 +1,28 @@
+/** Angular Imports */
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+/**
+ * Groups View Component.
+ */
+@Component({
+  selector: 'mifosx-groups-view',
+  templateUrl: './groups-view.component.html',
+  styleUrls: ['./groups-view.component.scss']
+})
+export class GroupsViewComponent {
+
+  /** Group view data */
+  groupViewData: any;
+
+  /**
+   * Fetches group data from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { groupViewData: any }) => {
+      this.groupViewData = data.groupViewData;
+    });
+  }
+
+}

src/app/groups/groups.component.html

@@ -45,7 +45,7 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[ ]"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id,'general']" class="select-row"></tr>
 
   </table>
 

src/app/groups/groups.component.scss

@@ -2,9 +2,14 @@
   .action-button{
     margin-left: auto;
   }
-
   .search-button{
     min-width: 30px;
     margin: 4px;
   }
 }
+
+table {
+  tr.select-row:hover {
+    cursor: pointer;
+  }
+}

src/app/groups/groups.module.ts

@@ -6,9 +6,12 @@ import { DatePipe } from '@angular/common';
 import { GroupsRoutingModule } from './groups-routing.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { PipesModule } from '../pipes/pipes.module';
+import { DirectivesModule } from '../directives/directives.module';
 
 /** Custom Components */
 import { GroupsComponent } from './groups.component';
+import { GroupsViewComponent } from './groups-view/groups-view.component';
+import { GeneralTabComponent } from './groups-view/general-tab/general-tab.component';
 
 /**
  * Groups Module
@@ -18,11 +21,14 @@ import { GroupsComponent } from './groups.component';
 @NgModule({
   imports: [
     SharedModule,
-    GroupsRoutingModule,
-    PipesModule
+    PipesModule,
+    DirectivesModule,
+    GroupsRoutingModule
   ],
   declarations: [
-    GroupsComponent
+    GroupsComponent,
+    GroupsViewComponent,
+    GeneralTabComponent
   ],
   providers: [DatePipe]
 })

src/app/groups/groups.service.ts

@@ -4,6 +4,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 /**
  * Groups service.
@@ -51,4 +52,41 @@ export class GroupsService {
         return this.http.get('/groups', { params: httpParams } );
     }
 
+    /**
+     * @param groupId Group Id of group to get data for.
+     * @returns {Observable<any>} Group data.
+     */
+    getGroupData(groupId: string): Observable<any> {
+      const httpParams = new HttpParams().set('associations', 'all');
+      return this.http.get(`/groups/${groupId}`, { params: httpParams });
+    }
+
+    /**
+     * @param groupId Group Id of group to get data for.
+     * @returns {Observable<any>} Group Summary data.
+     */
+    getGroupSummary(groupId: string): Observable<any> {
+      const httpParams = new HttpParams().set('R_groupId', groupId)
+        .set('genericResultSet', 'false');
+      return this.http.get(`/runreports/GroupSummaryCounts`, { params: httpParams });
+    }
+
+    /**
+     * @param groupId Group Id of group to get data for.
+     * @returns {Observable<any>} Group Client Members data.
+     */
+    getGroupClientMembers(groupId: string): Observable<any> {
+      const httpParams = new HttpParams().set('associations', 'clientMembers');
+      return this.http.get(`/groups/${groupId}`, { params: httpParams })
+              .pipe(map((group: any) => group.clientMembers));
+    }
+
+    /**
+     * @param groupId Group Id of group to get data for.
+     * @returns {Observable<any>} Group Accounts data.
+     */
+    getGroupAccountsData(groupId: string): Observable<any> {
+      return this.http.get(`/groups/${groupId}/accounts`);
+    }
+
 }

src/theme/custom/denim-yellowgreen.scss

@@ -1,6 +1,8 @@
 @import '~@angular/material/theming';
 // Plus imports for other components in your app.
 @import '../../app/clients/clients-view/clients-view.component-theme.scss';
+@import '../../app/groups/groups-view/groups-view.component-theme.scss';
+
 // Custom material palette
 $mat-denim: (
   100: #5ba2ec,
@@ -46,3 +48,4 @@ $mifosx-app-theme: mat-light-theme($mifosx-app-primary, $mifosx-app-accent, $mif
 // that you are using.
 @include angular-material-theme($mifosx-app-theme);
 @include clients-view-component-theme($mifosx-app-theme);
+@include groups-view-component-theme($mifosx-app-theme);

src/theme/custom/pictonblue-yellowgreen.scss

@@ -1,6 +1,8 @@
 @import '~@angular/material/theming';
 // Plus imports for other components in your app.
 @import '../../app/clients/clients-view/clients-view.component-theme.scss';
+@import '../../app/groups/groups-view/groups-view.component-theme.scss';
+
 // Custom material palette
 $mat-picton-blue: (
   100: #6ce0ff,
@@ -45,4 +47,5 @@ $mifosx-app-theme: mat-light-theme($mifosx-app-primary, $mifosx-app-accent, $mif
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 @include angular-material-theme($mifosx-app-theme);
-@include clients-view-component-theme($mifosx-app-theme);
+@include clients-view-component-theme($mifosx-app-theme);
+@include groups-view-component-theme($mifosx-app-theme);