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

Fixes: #217

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;
+    });
+  }
+
+}