Share Product and Share Account views updated

2024-05-19 00:22:51 -06:00
parent fafdd0dd20
commit a41df49a3e
83 changed files with 1017 additions and 544 deletions
@@ -25,7 +25,7 @@ export class SharesAccountViewResolver implements Resolve<Object> {
   * @returns {Observable<any>}
   */
  resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const shareAccountId = route.paramMap.get('shareAccountId');
+    const shareAccountId = route.paramMap.get('shareAccountId') || route.parent.paramMap.get('shareAccountId');
    return this.sharesService.getSharesAccountData(shareAccountId, false);
  }

@@ -105,7 +105,7 @@ export class CreateSharesAccountComponent {
    const sharesAccount = {
      ...this.sharesAccount,
      clientId: this.sharesAccountTemplate.clientId,
-      charges: this.sharesAccount.charges.map((charge: any) => ({ chargeId: charge.chargeId, amount: charge.amount })),
+      charges: this.sharesAccount.charges.map((charge: any) => ({ chargeId: charge.id, amount: charge.amount })),
      applicationDate: this.dateUtils.formatDate(this.sharesAccount.applicationDate, dateFormat),
      submittedDate: this.dateUtils.formatDate(this.sharesAccount.submittedDate, dateFormat),
      unitPrice: this.sharesAccountTermsForm.get('unitPrice').value,
@@ -110,7 +110,7 @@ export class EditSharesAccountComponent {
    const sharesAccount = {
      ...this.sharesAccount,
      clientId: this.sharesAccountAndTemplate.clientId,
-      charges: this.sharesAccount.charges.map((charge: any) => ({ chargeId: charge.chargeId, amount: charge.amount })),
+      charges: this.sharesAccount.charges.map((charge: any) => ({ chargeId: charge.id, amount: charge.amount })),
      applicationDate: this.dateUtils.formatDate(this.sharesAccount.applicationDate, dateFormat),
      submittedDate: this.dateUtils.formatDate(this.sharesAccount.submittedDate, dateFormat),
      unitPrice: this.sharesAccountTermsForm.get('unitPrice').value,
@@ -20,7 +20,7 @@

      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button  [disabled]="!activateSharesAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!activateSharesAccountForm.valid">{{'labels.buttons.Submit' | translate}}</button>
      </mat-card-actions>

    </form>
@@ -27,7 +27,7 @@
          </mat-form-field>

          <mat-form-field>
-            <mat-label>{{'labels.inputs.Today's Price' | translate}}</mat-label>
+            <mat-label>{{'labels.inputs.Current Price' | translate}}</mat-label>
            <input matInput required formControlName="unitPrice">
          </mat-form-field>

@@ -37,7 +37,7 @@

      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button  [disabled]="!applySharesForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!applySharesForm.valid">{{'labels.buttons.Submit' | translate}}</button>
      </mat-card-actions>

    </form>
@@ -29,7 +29,7 @@

      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button  [disabled]="!approveSharesAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!approveSharesAccountForm.valid">{{'labels.buttons.Submit' | translate}}</button>
      </mat-card-actions>

    </form>
@@ -4,5 +4,5 @@
 </div>
 <mat-dialog-actions align="end">
  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button  [mat-dialog-close]="{ approve: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ approve: true }">{{'labels.buttons.Submit' | translate}}</button>
 </mat-dialog-actions>
@@ -29,7 +29,7 @@

      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!closeSharesAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!closeSharesAccountForm.valid">{{'labels.buttons.Submit' | translate}}</button>
      </mat-card-actions>

    </form>
@@ -27,7 +27,7 @@
          </mat-form-field>

          <mat-form-field>
-            <mat-label>{{"labels.inputs.Today's Price" | translate}}</mat-label>
+            <mat-label>{{"labels.inputs.Current Price" | translate}}</mat-label>
            <input matInput required formControlName="unitPrice">
          </mat-form-field>
        </div>
@@ -35,7 +35,7 @@

      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!redeemSharesForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!redeemSharesForm.valid">{{'labels.buttons.Submit' | translate}}</button>
      </mat-card-actions>

    </form>
@@ -29,7 +29,7 @@

      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn" [disabled]="!rejectSharesAccountForm.valid">{{'labels.buttons.Confirm' | translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!rejectSharesAccountForm.valid">{{'labels.buttons.Submit' | translate}}</button>
      </mat-card-actions>

    </form>
@@ -4,5 +4,5 @@
 </div>
 <mat-dialog-actions align="end">
  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ reject: true }">{{'labels.buttons.Confirm' | translate}}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ reject: true }">{{'labels.buttons.Submit' | translate}}</button>
 </mat-dialog-actions>
@@ -18,7 +18,7 @@

      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel' | translate}}</button>
-        <button mat-raised-button color="warn">{{'labels.buttons.Confirm' | translate}}</button>
+        <button mat-raised-button color="warn">{{'labels.buttons.Submit' | translate}}</button>
      </mat-card-actions>

    </form>
@@ -28,7 +28,7 @@
    <ng-container matColumnDef="chargeCalculationType">
      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </th>
      <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeCalculationType.value }}
+        {{ charge.chargeCalculationType.value | translateCatalog }}
      </td>
    </ng-container>

@@ -45,7 +45,7 @@
    <ng-container matColumnDef="chargeTimeType">
      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
      <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeTimeType.value }}
+        {{ charge.chargeTimeType.value | translateCatalog }}
      </td>
    </ng-container>

@@ -10,6 +10,7 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { TranslateService } from '@ngx-translate/core';

 /**
 * Shares Account Charges Step
@@ -42,7 +43,8 @@ export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
  /**
   * @param {MatDialog} dialog Mat Dialog
   */
-  constructor(public dialog: MatDialog) { }
+  constructor(private dialog: MatDialog,
+      private translateService: TranslateService) { }

  ngOnInit() {
    this.currencyCode.valueChanges.subscribe(() => {
@@ -80,15 +82,15 @@ export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
    const formfields: FormfieldBase[] = [
      new InputBase({
        controlName: 'amount',
-        label: 'Amount',
+        label: this.translateService.instant('labels.inputs.Amount'),
        value: charge.amount || charge.amountOrPercentage,
        type: 'number',
        required: false,
      }),
    ];
    const data = {
-      title: 'Edit Charge',
-      layout: { addButtonText: 'Confirm' },
+      title: this.translateService.instant('labels.heading.Edit Charge'),
+      layout: { addButtonText: 'Submit' },
      formfields: formfields
    };
    const editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
@@ -33,24 +33,19 @@
    <span fxFlex="60%">{{ sharesAccountTermsForm.get('currencyCode').value | find:[sharesAccountProductTemplate.currency]:'code':'displayLabel' }}</span>
  </div>

-  <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}</span>
-    <span fxFlex="60%">{{ sharesAccountTermsForm.get('decimal').value }}</span>
-  </div>
-
  <div fxFlexFill>
    <span fxFlex="40%">{{'labels.inputs.Total Number of Shares' | translate}}</span>
-    <span fxFlex="60%">{{ sharesAccount.requestedShares }}</span>
+    <span fxFlex="60%">{{ sharesAccount.requestedShares | formatNumber }}</span>
  </div>

  <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Today's Price' | translate}}</span>
-    <span fxFlex="60%">{{ sharesAccountTermsForm.get('unitPrice').value }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Current Price' | translate}}</span>
+    <span fxFlex="60%">{{ sharesAccountTermsForm.get('unitPrice').value | formatNumber }}</span>
  </div>

  <div fxFlexFill>
-    <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}</span>
-    <span fxFlex="60%">{{ sharesAccountTermsForm.get('currencyMultiple').value }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Amount' | translate}}</span>
+    <span fxFlex="60%">{{ (sharesAccount.requestedShares * sharesAccountTermsForm.get('unitPrice').value) | formatNumber }}</span>
  </div>

  <div fxFlexFill>
@@ -60,12 +55,12 @@

  <div fxFlexFill *ngIf="sharesAccount.minimumActivePeriod">
    <span fxFlex="40%">{{'labels.inputs.Minimum Active Period' | translate}}</span>
-    <span fxFlex="60%">{{sharesAccount.minimumActivePeriod}}&nbsp;{{sharesAccount.minimumActivePeriodFrequencyType | find:sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions:'id':'value'}}</span>
+    <span fxFlex="60%">{{sharesAccount.minimumActivePeriod}}&nbsp;{{sharesAccount.minimumActivePeriodFrequencyType | find:sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions:'id':'value' | translateCatalog}}</span>
  </div>

  <div fxFlexFill *ngIf="sharesAccount.lockinPeriodFrequency">
    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}</span>
-    <span fxFlex="60%">{{sharesAccount.lockinPeriodFrequency}}&nbsp;{{sharesAccount.lockinPeriodFrequencyType | find:sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value'}}</span>
+    <span fxFlex="60%">{{sharesAccount.lockinPeriodFrequency}}&nbsp;{{sharesAccount.lockinPeriodFrequencyType | find:sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value' | translateCatalog}}</span>
  </div>

  <div fxFlexFill>
@@ -75,7 +70,7 @@

  <div fxFlexFill>
    <span fxFlex="40%">{{'labels.inputs.Allow dividends for inactive clients' | translate}}</span>
-    <span fxFlex="60%">{{ sharesAccount.allowDividendCalculationForInactiveClients }}</span>
+    <span fxFlex="60%">{{ sharesAccount.allowDividendCalculationForInactiveClients | yesNo }}</span>
  </div>

  <div fxFlexFill *ngIf="sharesAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
@@ -96,7 +91,7 @@
      <ng-container matColumnDef="chargeCalculationType">
        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </th>
        <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value }}
+          {{ charge.chargeCalculationType.value | translateCatalog }}
        </td>
      </ng-container>

@@ -110,7 +105,7 @@
      <ng-container matColumnDef="chargeTimeType">
        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
        <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeTimeType.value }}
+          {{ charge.chargeTimeType.value | translateCatalog }}
        </td>
      </ng-container>

@@ -8,8 +8,8 @@
    </mat-form-field>

    <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
-      <input type="number" matInput formControlName="decimal">
+      <mat-label>{{"labels.inputs.Current Price" | translate}}</mat-label>
+      <input type="number" matInput formControlName="unitPrice">
    </mat-form-field>

    <mat-form-field fxFlex="48%">
@@ -19,22 +19,13 @@
        {{'labels.inputs.Total Number of Shares' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
      </mat-error>
    </mat-form-field>
-
-    <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Today's Price" | translate}}</mat-label>
-      <input type="number" matInput formControlName="unitPrice">
-    </mat-form-field>
-
-    <mat-form-field fxFlex="48%">
-      <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
-      <input type="number" matInput formControlName="currencyMultiple" >
-    </mat-form-field>
+    <span fxFlex="48%" *ngIf="currency">{{ calculateCurrenValue() | currency:currency.code:'symbol-narrow':'1.2-2' }}</span>

    <mat-form-field fxFlex="48%">
      <mat-label>{{'labels.inputs.Default Savings Account' | translate}}</mat-label>
      <mat-select formControlName="savingsAccountId" required>
        <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
-          {{ account.accountNo }}
+          {{ account.accountNo }} - {{ account.savingsProductName }}
        </mat-option>
      </mat-select>
      <mat-error>
@@ -68,7 +59,7 @@
      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
      <mat-select formControlName="minimumActivePeriodFrequencyType">
        <mat-option *ngFor="let minimumActivePeriodFrequencyType of minimumActivePeriodFrequencyTypeData" [value]="minimumActivePeriodFrequencyType.id">
-          {{ minimumActivePeriodFrequencyType.value }}
+          {{ minimumActivePeriodFrequencyType.value | translateCatalog }}
        </mat-option>
      </mat-select>
    </mat-form-field>
@@ -84,7 +75,7 @@
      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
      <mat-select formControlName="lockinPeriodFrequencyType">
        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
-          {{ lockinPeriodFrequencyType.value }}
+          {{ lockinPeriodFrequencyType.value | translateCatalog }}
        </mat-option>
      </mat-select>
    </mat-form-field>
@@ -2,6 +2,7 @@
 import { Component, OnChanges, OnInit, Input } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';

 /**
 * Shares Account Terms Step
@@ -33,6 +34,8 @@ export class SharesAccountTermsStepComponent implements OnChanges, OnInit {
  /** For Edit Shares Account Form */
  isSavingsPatched = false;

+  currency: Currency | null = null;
+
  /**
   * @param {FormBuilder} formBuilder Form Builder
   * @param {SettingsService} settingsService Settings Service
@@ -44,6 +47,7 @@ export class SharesAccountTermsStepComponent implements OnChanges, OnInit {

  ngOnChanges() {
    if (this.sharesAccountProductTemplate) {
+      this.currency = this.sharesAccountProductTemplate.currency;
      this.sharesAccountTermsForm.patchValue({
        'currencyCode': this.sharesAccountProductTemplate.currency.code,
        'decimal': this.sharesAccountProductTemplate.currency.decimalPlaces,
@@ -112,4 +116,11 @@ export class SharesAccountTermsStepComponent implements OnChanges, OnInit {
    return this.sharesAccountTermsForm.value;
  }

+  calculateCurrenValue(): number {
+    if (this.sharesAccountTermsForm.value.requestedShares && this.sharesAccountProductTemplate.currentMarketPrice) {
+      return this.sharesAccountProductTemplate.currentMarketPrice * this.sharesAccountTermsForm.value.requestedShares;
+    }
+    return 0;
+  }
+
 }
@@ -20,32 +20,58 @@

      <ng-container matColumnDef="paymentDueAt">
        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Due At' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value | translateCatalog }} </td>
      </ng-container>

      <ng-container matColumnDef="calculationType">
        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Calculation Type' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.chargeCalculationType.value}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.chargeCalculationType.value | translateCatalog}} </td>
      </ng-container>

      <ng-container matColumnDef="due">
        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Due' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amount}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.amount | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
      </ng-container>

      <ng-container matColumnDef="paid">
        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Paid' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountPaid}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.amountPaid | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
      </ng-container>

      <ng-container matColumnDef="waived">
        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Waived' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountWaived}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.amountWaived | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
      </ng-container>

      <ng-container matColumnDef="outstanding">
        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Outstanding' | translate}} </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountOutstanding}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.amountOutstanding | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+        <td mat-cell *matCellDef="let charge">
+          <span *ngIf="sharesAccountData.status.value === 'Submitted and pending approval'">
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
+              *mifosxHasPermission="'UPDATE_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
+              <i class="fa fa-pencil"></i>
+            </button>
+            <button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
+              *mifosxHasPermission="'DELETE_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
+              <i class="fa fa-trash"></i>
+            </button>
+          </span>
+          <span *ngIf="sharesAccountData.status.value === 'Active'">
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge"
+              *mifosxHasPermission="'PAY_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); payCharge(charge.id)">
+              <i class="fa fa-dollar"></i>
+            </button>
+            <button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge"
+              *mifosxHasPermission="'WAIVE_SHARESACCOUNTCHARGE'" (click)="routeEdit($event); waiveCharge(charge.id)">
+              <i class="fa fa-flag"></i>
+            </button>
+          </span>
+        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -4,7 +4,19 @@
  h3 {
    margin:1% auto;
  }
+  .action-button {
+      margin-left: auto;
+  }
  table {
    width: 100%;
+    .account-action-button{
+      min-width: 26px;
+      padding: 0 6px;
+      margin: 4px;
+      line-height: 25px;
+    }
+    .select-row:hover {
+      cursor: pointer;
+    }
  }
-}
+}
@@ -20,16 +20,7 @@ export class ChargesTabComponent implements OnInit {
  /** Data source for charges table. */
  dataSource: MatTableDataSource<any>;
  /** Columns to be displayed in charges table. */
-  displayedColumns: string[] = [
-    'name',
-    'feeOrPenalty',
-    'paymentDueAt',
-    'calculationType',
-    'due',
-    'paid',
-    'waived',
-    'outstanding',
-  ];
+  displayedColumns: string[] = ['name', 'feeOrPenalty', 'paymentDueAt', 'calculationType', 'due', 'paid', 'waived', 'outstanding', 'actions' ];

  /**
   * Retrieves shares account aata from `resolve`.
@@ -40,6 +31,7 @@ export class ChargesTabComponent implements OnInit {
      this.sharesAccountData = data.sharesAccountData;
      this.chargesData = this.sharesAccountData.charges;
    });
+    console.log(this.sharesAccountData);
  }

  ngOnInit() {
@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">

  <div class="m-b-10">
-    <h3>{{'labels.inputs.All Dividends' | translate}}</h3>
+    <h3>{{'labels.inputs.Dividends' | translate}}</h3>
  </div>

  <div class="mat-elevation-z1 m-b-25">
@@ -15,7 +15,7 @@

      <ng-container matColumnDef="amount">
        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
-        <td mat-cell *matCellDef="let dividend"> {{shareAccountData.currency.displaySymbol}}&nbsp;{{dividend.amount}} </td>
+        <td mat-cell *matCellDef="let dividend"> {{dividend.amount | currency:shareAccountData.currency.code:'symbol-narrow':'1.2-2'}} </td>
      </ng-container>

      <ng-container matColumnDef="transactionReference">
@@ -25,7 +25,7 @@

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Status' | translate}} </th>
-        <td mat-cell *matCellDef="let dividend"> {{dividend.status.value}} </td>
+        <td mat-cell *matCellDef="let dividend"> {{ 'labels.status.' + dividend.status.value | translate}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -0,0 +1,65 @@
+<div class="tab-container mat-typography">
+
+    <div class="shares-account-tables" fxLayout="row" fxLayoutGap="2%">
+
+        <div fxFlex="49%">
+            <h4 class="table-headers">{{'labels.heading.Shares Details' | translate}}</h4>
+            <table>
+                <tbody>
+                    <tr>
+                        <td>{{'labels.inputs.Activated On' | translate}}</td>
+                        <td *ngIf="sharesAccountData.timeline.activatedDate">
+                            {{sharesAccountData.timeline.activatedDate | dateFormat}}
+                        </td>
+                        <td *ngIf="!sharesAccountData.timeline.activatedDate">
+                            {{ 'labels.text.Not Activated' | translate}}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{{'labels.inputs.Currency' | translate}}</td>
+                        <td>{{sharesAccountData.currency.name}} [{{sharesAccountData.currency.code}}]</td>
+                    </tr>
+                    <tr>
+                        <td>{{'labels.inputs.External Id' | translate}}</td>
+                        <td *ngIf="sharesAccountData.externalId">
+                            <mifosx-external-identifier
+                                externalId="{{sharesAccountData.externalId}}"></mifosx-external-identifier>
+                        </td>
+                        <td *ngIf="!sharesAccountData.externalId">
+                            {{'labels.inputs.Unassigned' | translate}}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>{{'labels.inputs.Linked Savings Account(Dividend Posting)' | translate}}</td>
+                        <td *ngIf="sharesAccountData.savingsAccountNumber">
+                            <mifosx-account-number accountType="2"
+                                clientId="{{sharesAccountData.clientId}}" accountId="{{sharesAccountData.savingsAccountId}}"
+                                accountNo="{{sharesAccountData.savingsAccountNumber}}"></mifosx-account-number>
+                        </td>
+                        <td *ngIf="!sharesAccountData.savingsAccountNumber">
+                            {{'labels.inputs.Unassigned' | translate}}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div fxFlex="49%">
+            <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
+            <table>
+                <tbody>
+                    <tr>
+                        <td>{{'labels.inputs.Pending for Approval Shares' | translate}}</td>
+                        <td class="r-amount">{{sharesAccountData.summary.totalPendingForApprovalShares | formatNumber}}</td>
+                    </tr>
+                    <tr>
+                        <td>{{'labels.inputs.Approved Shares' | translate}}</td>
+                        <td class="r-amount">{{sharesAccountData.summary.totalApprovedShares | formatNumber}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+    </div>
+
+</div>
@@ -0,0 +1,23 @@
+.tab-container {
+    padding: 1%;
+    margin: 1%;
+
+    h3 {
+        margin: 1% auto;
+    }
+
+    .performance-history-container {
+        border: 1px solid;
+        padding: 1%;
+        margin-bottom: 20px;
+    }
+
+    table {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+}
+
+span {
+    margin: 0.5em 0;
+}
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneralTabComponent } from './general-tab.component';
+
+describe('GeneralTabComponent', () => {
+  let component: GeneralTabComponent;
+  let fixture: ComponentFixture<GeneralTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GeneralTabComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GeneralTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-general-tab',
+  templateUrl: './general-tab.component.html',
+  styleUrls: ['./general-tab.component.scss']
+})
+export class GeneralTabComponent implements OnInit {
+  /** Shares Account Data */
+  sharesAccountData: any;
+
+  /**
+   * Fetches shares account data from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { sharesAccountData: any }) => {
+      this.sharesAccountData = data.sharesAccountData;
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -1,4 +1,4 @@
-<mat-card class="shares-account-card">
+<mat-card class="account-card">

  <mat-card-header fxLayout="column" class="header">

@@ -6,119 +6,110 @@

      <div class="profile-image-container">
        <div>
-          <img mat-card-md-image class="profile-image"
-            matTooltip="{{ 'tooltips.Shares Account' | translate}}"
+          <img mat-card-md-image class="profile-image" matTooltip="{{ 'tooltips.Shares Account' | translate}}"
            src="assets/images/shares_account_placeholder.png">
        </div>
      </div>

      <div class="mat-typography account-card-title">
        <mat-card-title>
-          <h3>
-            <i class="fa fa-stop" [ngClass]="sharesAccountData.status.code | statusLookup" [matTooltip]="sharesAccountData.status.value"></i>
-            {{'labels.heading.Account Name' | translate}} : {{sharesAccountData.productName}}
-          </h3>
+          <div fxLayout="row" fxLayout.lt-md="column">
+
+            <div fxFlex="60%">
+              <h3>
+                <i class="fa fa-stop" [ngClass]="sharesAccountData.status.code | statusLookup"
+                  [matTooltip]="sharesAccountData.status.value"></i>
+                <span class="m-r-5">{{'labels.inputs.Share Product' | translate}} :</span>
+                <span class="m-r-5"><mifosx-long-text
+                    textValue="{{sharesAccountData.productName}}"></mifosx-long-text></span>
+                <mifosx-account-number accountNo="{{sharesAccountData.accountNo}}"
+                  display="left"></mifosx-account-number>
+              </h3>
+              <span class="shares-overview">
+                <span class="m-r-10">{{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}
+                  :</span>{{sharesAccountData.clientName || sharesAccountData.groupName}}
+                  <span class="m-l-10" *ngIf="sharesAccountData.clientAccountNo">
+                    <mifosx-account-number accountNo="{{sharesAccountData.clientAccountNo}}"></mifosx-account-number>
+                  </span>
+              </span>
+              <div>
+                <table class="account-overview">
+                  <tbody>
+                    <tr>
+                      <td>{{"labels.inputs.Current Market Price" | translate}} :</td>
+                      <td>{{sharesAccountData.currentMarketPrice | formatNumber}}</td>
+                    </tr>
+                    <tr *ngIf="sharesAccountData.lockinPeriod">
+                      <td>{{"labels.inputs.Lockin Period" | translate}} :</td>
+                      <td>
+                        {{sharesAccountData.lockinPeriod}} {{sharesAccountData.lockPeriodTypeEnum.value | translateCatalog}}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <span fxFlex="auto"></span>
+
+            <div fxFlex="4%">
+              <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Share account actions"
+                yPosition="below" *ngIf="buttonConfig.singleButtons.length > 0">
+                <mat-icon matListIcon class="actions-menu">
+                  <fa-icon icon="bars" size="sm"></fa-icon>
+                </mat-icon>
+              </button>
+            </div>
+          </div>
+
        </mat-card-title>
-        <mat-card-subtitle>
-          <p>
-            {{'labels.inputs.Account' | translate}} #: {{sharesAccountData.accountNo}} | {{'labels.inputs.Client Name' | translate}}: {{sharesAccountData.clientName}}<br/>
-            {{'labels.inputs.Current Market Price' | translate}}: {{sharesAccountData.currency.displaySymbol}}&nbsp;{{sharesAccountData.currentMarketPrice}}<br/>
-            {{'labels.inputs.Lockin Period' | translate}}: {{sharesAccountData.lockinPeriod ? sharesAccountData.lockinPeriod : 'N/A'}}
-            {{sharesAccountData.lockinPeriod ? sharesAccountData.lockPeriodTypeEnum.value : ''}}
-          </p>
-        </mat-card-subtitle>
      </div>

    </mat-card-title-group>

-    <mat-card-actions class="account-actions">
+    <mat-menu #accountMenu="matMenu">

-      <ng-container *ngFor="let button of buttonConfig.singleButtons">
-        <button mat-raised-button *mifosxHasPermission="button.taskPermissionName" (click)="doAction(button.name)">
-          <i class="{{button.icon}}"></i> {{button.name}}</button>
+      <ng-container *ngFor="let item of buttonConfig.singleButtons">
+        <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
+          <mat-icon matListIcon>
+            <fa-icon icon="{{item.icon}}" size="sm"></fa-icon>
+          </mat-icon>
+          <span>{{'labels.menus.' + item.name | translate}}</span>
+        </button>
      </ng-container>

      <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-raised-button [matMenuTriggerFor]="More">{{'labels.heading.More' | translate}}</button>
+        <button mat-menu-item [matMenuTriggerFor]="More">{{'labels.menus.More' | translate}}</button>
        <mat-menu #More="matMenu">
-        <span *ngFor="let option of buttonConfig.options">
-          <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">{{option.name}}</button>
-        </span>
+          <span *ngFor="let option of buttonConfig.options">
+            <button mat-menu-item *mifosxHasPermission="option.taskPermissionName"
+              (click)="doAction(option.name)">{{'labels.menus.' + option.name | translate}}</button>
+          </span>
        </mat-menu>
      </ng-container>

-    </mat-card-actions>
+    </mat-menu>

  </mat-card-header>

  <mat-card-content class="content">

-    <div class="shares-account-tables" fxLayout="row" fxLayoutGap="2%">
-
-      <div fxFlex="49%">
-        <h4 class="table-headers">{{'labels.heading.Shares Details' | translate}}</h4>
-        <table>
-          <tbody>
-            <tr>
-              <td>{{'labels.inputs.Activated On' | translate}}</td>
-              <td>{{sharesAccountData.timeline.activatedOnDate ? (sharesAccountData.timeline.activatedOnDate | dateFormat) : 'Not Activated'}}</td>
-            </tr>
-            <tr>
-              <td>{{'labels.inputs.Currency' | translate}}</td>
-              <td>{{sharesAccountData.currency.name}} [{{sharesAccountData.currency.code}}]</td>
-            </tr>
-            <tr>
-              <td>{{'labels.inputs.External Id' | translate}}</td>
-              <td *ngIf="sharesAccountData.externalId">
-                <mifosx-external-identifier externalId="{{sharesAccountData.externalId}}"></mifosx-external-identifier>
-              </td>
-              <td *ngIf="!sharesAccountData.externalId">
-                {{'labels.inputs.Unassigned' | translate}}
-              </td>
-            </tr>
-            <tr>
-              <td>{{'labels.inputs.Linked Savings Account(Dividend Posting)' | translate}}</td>
-              <td *ngIf="sharesAccountData.savingsAccountNumber">
-                <mifosx-account-number accountNo="{{sharesAccountData.savingsAccountNumber}}"></mifosx-account-number>
-              </td>
-              <td *ngIf="!sharesAccountData.savingsAccountNumber">
-                {{'labels.inputs.Unassigned' | translate}}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div fxFlex="49%">
-        <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
-        <table>
-          <tbody>
-            <tr>
-              <td>{{'labels.inputs.Approved Shares' | translate}}</td>
-              <td>{{sharesAccountData.summary.totalApprovedShares}}</td>
-            </tr>
-            <tr>
-              <td>{{'labels.inputs.Pending for Approval Shares' | translate}}</td>
-              <td>{{sharesAccountData.summary.totalPendingForApprovalShares}}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-    </div>
-
    <nav mat-tab-nav-bar class="navigation-tabs">
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+        [active]="general.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTPURCHASE'">
+        {{'labels.inputs.General' | translate}}
+      </a>
      <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-      [active]="transactions.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTPURCHASE'">
-      {{'labels.inputs.Transactions' | translate}}
+        [active]="transactions.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTPURCHASE'">
+        {{'labels.inputs.Transactions' | translate}}
      </a>
      <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-      [active]="charges.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTCHARGE'">
-      {{'labels.inputs.Charges' | translate}}
+        [active]="charges.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTCHARGE'">
+        {{'labels.inputs.Charges' | translate}}
      </a>
      <a mat-tab-link [routerLink]="['./dividends']" routerLinkActive #dividends="routerLinkActive"
-      [active]="dividends.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTDIVIDENDS'">
-      {{'labels.inputs.Dividends' | translate}}
+        [active]="dividends.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTDIVIDENDS'">
+        {{'labels.inputs.Dividends' | translate}}
      </a>
    </nav>

@@ -126,4 +117,4 @@

  </mat-card-content>

-</mat-card>
+</mat-card>
@@ -1,53 +1,8 @@
-.shares-account-card {
-  margin: 0 auto;
-  max-width: 80rem;
-  width: 90%;
-  padding: 0;
-  .header {
-    padding: 1%;
-    .header-title-group {
-      .account-card-title {
-        color: white;
-        width: 90%;
-        p {
-          color: white;
-        }
-      }
-    }
-    .profile-image-container {
-      margin: 1%;
-      .profile-image {
-        object-fit: cover;
-        border-radius: 20px;
-      }
-    }
-    .account-actions {
-      align-self: flex-end;
-      margin: 0 1%;
-      i {
-        margin-bottom: 2px;
-        margin-right: 4px;
-      }
-    }
-  }
-  .navigation-tabs {
-    background-color: #f2f2f2;
-    overflow: auto;
-  }
-  .content {
-    .shares-account-tables {
-      padding: 1%;
-      margin: 1%;
-      .table-headers {
-        margin: 0;
-        padding: 6px;
-      }
-      td {
-        padding: 3px;
-      }
-    } 
-  }
-  i, img:hover {
-    cursor: pointer;
-  }
+.shares-overview {
+  font-size: 14px;
 }
+
+.account-overview {
+  min-width: 60%;
+  font-weight: 400;
+}
@@ -27,6 +27,8 @@ export class SharesAccountViewComponent implements OnInit {
  /** Button Configurations */
  buttonConfig: SharesButtonsConfiguration;

+  entityType: string;
+
  /**
   * Fetches shares account data from `resolve`
   * @param {ActivatedRoute} route Activated Route
@@ -45,6 +47,13 @@ export class SharesAccountViewComponent implements OnInit {

  ngOnInit() {
    this.setConditionalButtons();
+    if (this.router.url.includes('clients')) {
+      this.entityType = 'Client';
+    } else if (this.router.url.includes('groups')) {
+      this.entityType = 'Group';
+    } else if (this.router.url.includes('centers')) {
+      this.entityType = 'Center';
+    }
  }

  /**
@@ -31,22 +31,22 @@ export class SharesButtonsConfiguration {
        this.buttonsArray = [
          {
            name: 'Apply Additional Shares',
-            icon: 'fa fa-arrow-right',
+            icon: 'arrow-right',
            taskPermissionName: 'APPLYADDITIONAL_SHAREACCOUNT'
          },
          {
            name: 'Approve Additional Shares',
-            icon: 'fa fa-arrow-right',
+            icon: 'arrow-right',
            taskPermissionName: 'APPROVEADDITIONAL_SHAREACCOUNT'
          },
          {
            name: 'Reject Additional Shares',
-            icon: 'fa fa-arrow-left',
+            icon: 'arrow-left',
            taskPermissionName: 'REJECTADDITIONAL_SHAREACCOUNT'
          },
          {
            name: 'Redeem Shares',
-            icon: 'fa fa-arrow-left',
+            icon: 'arrow-left',
            taskPermissionName: 'WITHDRAW_SAVINGSACCOUNT'
          }
        ];
@@ -55,12 +55,12 @@ export class SharesButtonsConfiguration {
        this.buttonsArray = [
          {
            name: 'Modify Application',
-            icon: 'fa fa-pencil ',
+            icon: 'pencil',
            taskPermissionName: 'UPDATE_SHAREACCOUNT'
          },
          {
            name: 'Approve',
-            icon: 'fa fa-check',
+            icon: 'check',
            taskPermissionName: 'APPROVE_SHAREACCOUNT'
          }
        ];
@@ -69,12 +69,12 @@ export class SharesButtonsConfiguration {
        this.buttonsArray = [
          {
            name: 'Undo Approval',
-            icon: 'fa fa-undo',
+            icon: 'undo',
            taskPermissionName: 'APPROVALUNDO_SHAREACCOUNT'
          },
          {
            name: 'Activate',
-            icon: 'fa fa-check',
+            icon: 'check',
            taskPermissionName: 'ACTIVATE_SHAREACCOUNT'
          }
        ];
@@ -16,6 +16,7 @@ import { SharesAccountViewResolver } from './common-resolvers/share-account-view
 import { ShareAccountActionsResolver } from './common-resolvers/share-account-actions.resolver';
 import { SharesAccountTemplateResolver } from './common-resolvers/shares-account-template.resolver';
 import { SharesAccountAndTemplateResolver } from './common-resolvers/share-account-and-template.resolver';
+import { GeneralTabComponent } from './shares-account-view/general-tab/general-tab.component';

 /** Shares Routes */
 const routes: Routes = [
@@ -42,6 +43,19 @@ const routes: Routes = [
              sharesAccountData: SharesAccountViewResolver
            },
            children: [
+              {
+                path: '',
+                redirectTo: 'general',
+                pathMatch: 'full'
+              },
+              {
+                path: 'general',
+                component: GeneralTabComponent,
+                data: { title: 'Shares Account General', breadcrumb: 'General', routeParamBreadcrumb: false },
+                resolve: {
+                  sharesAccountData: SharesAccountViewResolver
+                },
+              },
              {
                path: 'transactions',
                component: TransactionsTabComponent,
@@ -28,6 +28,7 @@ import { ApproveSharesComponent } from './shares-account-actions/approve-shares/
 import { ApproveShareDialogComponent } from './shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component';
 import { RejectSharesComponent } from './shares-account-actions/reject-shares/reject-shares.component';
 import { RejectShareDialogComponent } from './shares-account-actions/reject-shares/reject-share-dialog/reject-share-dialog.component';
+import { GeneralTabComponent } from './shares-account-view/general-tab/general-tab.component';

 /**
 * Shares Module
@@ -63,7 +64,8 @@ import { RejectShareDialogComponent } from './shares-account-actions/reject-shar
    ApproveSharesComponent,
    ApproveShareDialogComponent,
    RejectSharesComponent,
-    RejectShareDialogComponent
+    RejectShareDialogComponent,
+    GeneralTabComponent
  ],
  providers: [ ]
 })