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
@@ -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'
          }
        ];