fix: Display issues

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html

@@ -1,25 +1,25 @@
 <div class="layout-row-wrap responsive-column">
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Details' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Product' | translate }}</span>
     <span class="flex-60">{{
       fixedDepositAccountData.productId | find: fixedDepositsAccountTemplate.productOptions : 'id' : 'name'
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Submitted On' | translate }}</span>
     <span class="flex-60">{{ fixedDepositAccountData.submittedOnDate | dateFormat }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositAccountData.externalId">
+  <div class="layout-row flex-100" *ngIf="fixedDepositAccountData.externalId">
     <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
     <span class="flex-60">{{ fixedDepositAccountData.externalId }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Field Officer' | translate }}</span>
     <span class="flex-60">{{
       (fixedDepositAccountData.fieldOfficerId
@@ -28,28 +28,28 @@
     }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Currency' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Currency' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
     <span class="flex-60">{{ fixedDepositsAccountProductTemplate.currency.code }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Currency Multiple' | translate }}</span>
     <span class="flex-60">{{ fixedDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}</span>
     <span class="flex-60">{{ fixedDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Terms' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Fixed Deposit Amount' | translate }}:</span>
     <span class="flex-60">{{
       fixedDepositAccountData.depositAmount
@@ -57,7 +57,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Deposit Period' | translate }}:</span>
     <span class="flex-60"
       >{{ fixedDepositAccountData.depositPeriod }}
@@ -69,7 +69,7 @@
     >
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
     <span class="flex-60">{{
       fixedDepositAccountData.interestCompoundingPeriodType
@@ -78,7 +78,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
     <span class="flex-60">{{
       fixedDepositAccountData.interestPostingPeriodType
@@ -87,7 +87,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
     <span class="flex-60">{{
       fixedDepositAccountData.interestCalculationType
@@ -96,7 +96,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
     <span class="flex-60">{{
       fixedDepositAccountData.interestCalculationDaysInYearType
@@ -105,10 +105,10 @@
     }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Settings' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Settings' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill" *ngIf="fixedDepositAccountData.lockinPeriodFrequency">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100" *ngIf="fixedDepositAccountData.lockinPeriodFrequency">
     <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
     <span class="flex-60"
       >{{ fixedDepositAccountData.lockinPeriodFrequency }}
@@ -120,7 +120,7 @@
     >
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate.minDepositTerm">
+  <div class="layout-row flex-100" *ngIf="fixedDepositsAccountProductTemplate.minDepositTerm">
     <span class="flex-40">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
     <span class="flex-60"
       >{{ fixedDepositsAccountProductTemplate.minDepositTerm }}
@@ -128,7 +128,7 @@
     >
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm">
+  <div class="layout-row flex-100" *ngIf="fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm">
     <span class="flex-40">{{ 'labels.inputs.In Multiples Of' | translate }}:</span>
     <span class="flex-60"
       >{{ fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm }}
@@ -136,7 +136,7 @@
     >
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate.maxDepositTerm">
+  <div class="layout-row flex-100" *ngIf="fixedDepositsAccountProductTemplate.maxDepositTerm">
     <span class="flex-40">{{ 'labels.inputs.Maximum Deposit Term' | translate }}</span>
     <span class="flex-60"
       >{{ fixedDepositsAccountProductTemplate.maxDepositTerm }}
@@ -144,12 +144,12 @@
     >
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Transfer Interest to Savings Account' | translate }}?</span>
     <span class="flex-60">{{ fixedDepositAccountData.transferInterestToSavings | yesNo }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositAccountData.transferInterestToSavings">
+  <div class="layout-row flex-100" *ngIf="fixedDepositAccountData.transferInterestToSavings">
     <span class="flex-40">{{ 'labels.inputs.Linked Savings Account' | translate }}</span>
     <span class="flex-60">{{
       fixedDepositAccountData.linkAccountId
@@ -157,7 +157,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositAccountData.maturityInstructionId">
+  <div class="layout-row flex-100" *ngIf="fixedDepositAccountData.maturityInstructionId">
     <span class="flex-40">{{ 'labels.inputs.Maturity Instructions' | translate }}</span>
     <span class="flex-60">{{
       fixedDepositAccountData.maturityInstructionId
@@ -166,12 +166,12 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}:</span>
     <span class="flex-60">{{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate.preClosurePenalApplicable">
+  <div class="layout-row flex-100" *ngIf="fixedDepositsAccountProductTemplate.preClosurePenalApplicable">
     <span class="flex-40">{{ 'labels.inputs.Penal Interest' | translate }} (%):</span>
     <span class="flex-60">{{
       fixedDepositsAccountProductTemplate.preClosurePenalInterest +
@@ -181,171 +181,169 @@
     }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate.withHoldTax">
+  <div class="layout-row flex-100" *ngIf="fixedDepositsAccountProductTemplate.withHoldTax">
     <span class="flex-40">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
     <span class="flex-60">{{ fixedDepositAccountData.withHoldTax | yesNo }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Interest Rate Chart' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Interest Rate Chart' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="margin-b layout-column flex-fill">
-    <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate?.accountChart.name">
-      <span class="flex-40">{{ 'labels.inputs.name' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.name }}</span>
-    </div>
-
-    <div class="flex-fill">
-      <span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
-    </div>
-
-    <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
-      <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
-    </div>
-
-    <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">
-      <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.description }}</span>
-    </div>
-
-    <div class="flex-fill">
-      <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
-      <span class="flex-60">{{
-        fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
-      }}</span>
-    </div>
-
-    <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
-      <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">
-          {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
-            chartSlab.periodType.value | translateKey: 'catalogs'
-          }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">
-          {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
-      </ng-container>
-
-      <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-          <button
-            mat-button
-            color="primary"
-            (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
-          >
-            <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-              <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              {{ 'labels.buttons.View Incentives' | translate }}
-            </span>
-            <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-              <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              {{ 'labels.buttons.Hide Incentives' | translate }}
-            </span>
-          </button>
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="incentives">
-        <td
-          mat-cell
-          *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-          [attr.colspan]="chartSlabsDisplayedColumns.length"
-        >
-          <div
-            class="layout-row-wrap flex-fill incentives"
-            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
-          >
-            <mat-card class="layout-row-wrap flex-fill">
-              <h4 class="m-b-10 flex-13">
-                {{ 'labels.heading.Incentives' | translate }}
-              </h4>
-
-              <table
-                class="flex-fill mat-elevation-z1"
-                mat-table
-                [dataSource]="chartSlab.incentives"
-                *ngIf="chartSlab.incentives.length"
-              >
-                <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.entityType.value }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.attributeName.value }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.conditionType.value | titlecase }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                    {{ incentive.attributeValueDesc }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.incentiveType.value }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.amount | formatNumber }}
-                  </td>
-                </ng-container>
-
-                <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
-              </table>
-            </mat-card>
-          </div>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
-    </table>
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100" *ngIf="fixedDepositsAccountProductTemplate?.accountChart.name">
+    <span class="flex-40">{{ 'labels.inputs.name' | translate }}:</span>
+    <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.name }}</span>
   </div>
 
-  <div *ngIf="fixedDepositAccountData.charges.length" class="layout-row-wrap responsive-column flex-fill">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
+  <div class="layout-row flex-100">
+    <span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
+    <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+  </div>
 
-    <mat-divider class="flex-fill"></mat-divider>
-    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="fixedDepositAccountData.charges">
+  <div class="layout-row flex-100" *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
+    <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
+    <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
+  </div>
+
+  <div class="layout-row flex-100" *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">
+    <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
+    <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.description }}</span>
+  </div>
+
+  <div class="layout-row flex-100">
+    <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
+    <span class="flex-60">{{
+      fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
+    }}</span>
+  </div>
+
+  <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
+    <ng-container matColumnDef="period">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">
+        {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
+          chartSlab.periodType.value | translateKey: 'catalogs'
+        }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amountRange">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">
+        {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="interest">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
+        <button
+          mat-button
+          color="primary"
+          (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+        >
+          <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.View Incentives' | translate }}
+          </span>
+          <span *ngIf="expandChartSlabIndex === chartSlabIndex">
+            <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.Hide Incentives' | translate }}
+          </span>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="incentives">
+      <td
+        mat-cell
+        *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+        [attr.colspan]="chartSlabsDisplayedColumns.length"
+      >
+        <div
+          class="layout-row-wrap flex-100 incentives"
+          [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+        >
+          <mat-card class="layout-row-wrap flex-100">
+            <h4 class="m-b-10 flex-13">
+              {{ 'labels.heading.Incentives' | translate }}
+            </h4>
+
+            <table
+              class="flex-100 mat-elevation-z1"
+              mat-table
+              [dataSource]="chartSlab.incentives"
+              *ngIf="chartSlab.incentives.length"
+            >
+              <ng-container matColumnDef="entityType">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.entityType.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="attributeName">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.attributeName.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="conditionType">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.conditionType.value | titlecase }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="attributeValue">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
+                  {{ incentive.attributeValueDesc }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="incentiveType">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.incentiveType.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="amount">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.amount | formatNumber }}
+                </td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
+              <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
+            </table>
+          </mat-card>
+        </div>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
+  </table>
+
+  <div *ngIf="fixedDepositAccountData.charges.length" class="layout-row-wrap responsive-column flex-100">
+    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Charges' | translate }}</h3>
+
+    <mat-divider class="flex-100"></mat-divider>
+    <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="fixedDepositAccountData.charges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html

@@ -14,68 +14,70 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <div class="flex-60">
-            <h3>
-              <i
-                class="fa fa-stop"
-                [ngClass]="fixedDepositsAccountData.status.code | statusLookup"
-                [matTooltip]="fixedDepositsAccountData.status.value"
-              ></i>
-              {{ 'labels.inputs.Fixed Deposit Product' | translate }} :
-              {{ fixedDepositsAccountData.depositProductName }}
-              <mifosx-account-number accountNo="{{ fixedDepositsAccountData.accountNo }}"></mifosx-account-number>
-            </h3>
-            <span class="account-overview">
-              <span class="m-r-10">{{ 'labels.text.' + entityType | translate }} :</span>
-              {{ fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName }}
-              <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">
-                <mifosx-account-number
-                  accountNo="{{ fixedDepositsAccountData.clientAccountNo }}"
-                ></mifosx-account-number>
+          <div class="layout-row responsive-column">
+            <div class="flex-60">
+              <h3>
+                <i
+                  class="fa fa-stop"
+                  [ngClass]="fixedDepositsAccountData.status.code | statusLookup"
+                  [matTooltip]="fixedDepositsAccountData.status.value"
+                ></i>
+                {{ 'labels.inputs.Fixed Deposit Product' | translate }} :
+                {{ fixedDepositsAccountData.depositProductName }}
+                <mifosx-account-number accountNo="{{ fixedDepositsAccountData.accountNo }}"></mifosx-account-number>
+              </h3>
+              <span class="account-overview">
+                <span class="m-r-10">{{ 'labels.text.' + entityType | translate }} :</span>
+                {{ fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName }}
+                <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">
+                  <mifosx-account-number
+                    accountNo="{{ fixedDepositsAccountData.clientAccountNo }}"
+                  ></mifosx-account-number>
+                </span>
               </span>
-            </span>
-          </div>
+            </div>
 
-          <div
-            *ngIf="
-              !fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval
-            "
-            class="layout-column flex-30"
-          >
-            <h3 class="flex-100">{{ 'labels.heading.Account Overview' | translate }}</h3>
-            <table class="account-overview flex-100">
-              <tbody>
-                <tr>
-                  <td class="flex-70">{{ 'labels.inputs.Current Balance' | translate }}</td>
-                  <td class="r-amount flex-30">
-                    {{
-                      fixedDepositsAccountData.summary.accountBalance
-                        | currency: currency.code : 'symbol-narrow' : '1.2-2'
-                    }}
-                  </td>
-                </tr>
-                <tr>
-                  <td class="flex-70">{{ 'labels.inputs.Deposit Amount' | translate }}</td>
-                  <td class="r-amount flex-30">
-                    {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <span class="flex-auto"></span>
-          <div class="flex-5">
-            <button
-              mat-icon-button
-              [matMenuTriggerFor]="accountMenu"
-              aria-label="Fixed Deposit account actions"
-              yPosition="below"
+            <div
+              *ngIf="
+                !fixedDepositsAccountData.status.rejected &&
+                !fixedDepositsAccountData.status.submittedAndPendingApproval
+              "
+              class="flex-30"
             >
-              <mat-icon matListIcon class="actions-menu">
-                <fa-icon icon="bars" size="sm"></fa-icon>
-              </mat-icon>
-            </button>
+              <h3 class="flex-100">{{ 'labels.heading.Account Overview' | translate }}</h3>
+              <table class="account-overview flex-100">
+                <tbody>
+                  <tr>
+                    <td class="flex-70">{{ 'labels.inputs.Current Balance' | translate }}</td>
+                    <td class="r-amount flex-30">
+                      {{
+                        fixedDepositsAccountData.summary.accountBalance
+                          | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                      }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="flex-70">{{ 'labels.inputs.Deposit Amount' | translate }}</td>
+                    <td class="r-amount flex-30">
+                      {{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div class="flex-5">
+              <button
+                mat-icon-button
+                [matMenuTriggerFor]="accountMenu"
+                aria-label="Fixed Deposit account actions"
+                yPosition="below"
+              >
+                <mat-icon matListIcon class="actions-menu">
+                  <fa-icon icon="bars" size="sm"></fa-icon>
+                </mat-icon>
+              </button>
+            </div>
           </div>
         </mat-card-title>
       </div>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="activateFixedDepositsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field class="flex-fill" (click)="activatedOnDatePicker.open()">
+        <mat-form-field class="flex-100" (click)="activatedOnDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
           <input
             matInput

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/undo-approval-fixed-deposits-account/undo-approval-fixed-deposits-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="undoApprovalFixedDepositsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field class="flex-fill">
+        <mat-form-field class="flex-100">
           <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="activateRecurringDepositsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field class="flex-fill" (click)="activatedOnDatePicker.open()">
+        <mat-form-field class="flex-100" (click)="activatedOnDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
           <input
             matInput

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/undo-approval-recurring-deposits-account/undo-approval-recurring-deposits-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="undoApprovalRecurringDepositsAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field class="flex-fill">
+        <mat-form-field class="flex-100">
           <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html

@@ -1,20 +1,20 @@
 <div class="layout-row-wrap responsive-column">
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Details' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Product' | translate }}</span>
     <span class="flex-60">{{
       recurringDepositAccountData.productId | find: recurringDepositsAccountTemplate.productOptions : 'id' : 'name'
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Submitted On' | translate }}</span>
     <span class="flex-60">{{ recurringDepositAccountData.submittedOnDate | dateFormat }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Field Officer' | translate }}</span>
     <span class="flex-60">{{
       recurringDepositAccountData.fieldOfficerId
@@ -22,27 +22,27 @@
     }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Currency' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Currency' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
     <span class="flex-60">{{ recurringDepositsAccountProductTemplate.currency.code }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}</span>
     <span class="flex-60">{{ recurringDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Currency In Multiples Of' | translate }}</span>
     <span class="flex-60">{{ recurringDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill">
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Terms' | translate }}</h3>
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositAccountData.interestCompoundingPeriodType
@@ -51,7 +51,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositAccountData.interestPostingPeriodType
@@ -60,7 +60,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositAccountData.interestCalculationType
@@ -69,7 +69,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositAccountData.interestCalculationDaysInYearType
@@ -78,10 +78,10 @@
     }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Settings' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Settings' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill" *ngIf="recurringDepositAccountData.lockinPeriodFrequency">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100" *ngIf="recurringDepositAccountData.lockinPeriodFrequency">
     <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
     <span class="flex-60"
       >{{ recurringDepositAccountData.lockinPeriodFrequency }}
@@ -93,12 +93,12 @@
     >
   </div>
 
-  <div class="flex-fill" *ngIf="recurringDepositAccountData.mandatoryRecommendedDepositAmount">
+  <div class="layout-row flex-100" *ngIf="recurringDepositAccountData.mandatoryRecommendedDepositAmount">
     <span class="flex-40">{{ 'labels.inputs.Recurring Deposit Amount' | translate }}:</span>
     <span class="flex-60">{{ recurringDepositAccountData.mandatoryRecommendedDepositAmount | formatNumber }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Deposit Period' | translate }}:</span>
     <span class="flex-60"
       >{{ recurringDepositAccountData.depositPeriod }}
@@ -110,18 +110,18 @@
     >
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Deposit Frequency Same as Group/Center meeting' | translate }}:</span>
     <span class="flex-60">{{ recurringDepositsAccountProductTemplate.isCalendarInherited | yesNo }}</span>
   </div>
 
   <ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
-    <div class="flex-fill">
+    <div class="layout-row flex-100">
       <span class="flex-40">{{ 'labels.inputs.Deposit Start Date' | translate }}:</span>
       <span class="flex-60">{{ recurringDepositAccountData.expectedFirstDepositOnDate | dateFormat }}</span>
     </div>
 
-    <div class="flex-fill">
+    <div class="layout-row flex-100">
       <span class="flex-40">{{ 'labels.inputs.Deposit Frequency' | translate }}:</span>
       <span *ngIf="recurringDepositAccountData.recurringFrequency" class="flex-60"
         >{{ recurringDepositAccountData.recurringFrequency }}
@@ -134,7 +134,7 @@
     </div>
   </ng-container>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
     <span class="flex-60"
       >{{
@@ -151,7 +151,7 @@
     >
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.In Multiples Of' | translate }}:</span>
     <span class="flex-60"
       >{{
@@ -168,7 +168,7 @@
     >
   </div>
 
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Maximum Deposit Term' | translate }}</span>
     <span class="flex-60"
       >{{
@@ -185,166 +185,164 @@
     >
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Interest Rate Chart' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Interest Rate Chart' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="margin-b layout-column flex-fill">
-    <div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
-      <span class="flex-40">{{ 'labels.inputs.name' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.name }}</span>
-    </div>
-
-    <div class="flex-fill">
-      <span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
-    </div>
-
-    <div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
-      <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
-    </div>
-
-    <div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
-      <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
-    </div>
-
-    <div class="flex-fill">
-      <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
-      <span class="flex-60">{{
-        recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
-      }}</span>
-    </div>
-
-    <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
-      <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">
-          {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
-            chartSlab.periodType.value | translateKey: 'catalogs'
-          }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">
-          {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
-      </ng-container>
-
-      <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-          <button
-            mat-button
-            color="primary"
-            (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
-          >
-            <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-              <fa-icon icon="eye" class="m-r-10"></fa-icon>
-              {{ 'labels.buttons.View Incentives' | translate }}
-            </span>
-            <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-              <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-              {{ 'labels.buttons.Hide Incentives' | translate }}
-            </span>
-          </button>
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="incentives">
-        <td
-          mat-cell
-          *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-          [attr.colspan]="chartSlabsDisplayedColumns.length"
-        >
-          <div
-            class="layout-row-wrap flex-fill incentives"
-            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
-          >
-            <mat-card class="layout-row-wrap flex-fill">
-              <h4 class="m-b-10 flex-13">
-                {{ 'labels.heading.Incentives' | translate }}
-              </h4>
-
-              <table
-                class="flex-fill mat-elevation-z1"
-                mat-table
-                [dataSource]="chartSlab.incentives"
-                *ngIf="chartSlab.incentives.length"
-              >
-                <ng-container matColumnDef="entityType">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.entityType.value }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="attributeName">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.attributeName.value }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="conditionType">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.conditionType.value | titlecase }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="attributeValue">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                    {{ incentive.attributeValueDesc }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="incentiveType">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.incentiveType.value }}
-                  </td>
-                </ng-container>
-
-                <ng-container matColumnDef="amount">
-                  <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
-                  <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.amount }}
-                  </td>
-                </ng-container>
-
-                <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
-              </table>
-            </mat-card>
-          </div>
-        </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
-    </table>
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
+    <span class="flex-40">{{ 'labels.inputs.name' | translate }}:</span>
+    <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.name }}</span>
   </div>
 
-  <div *ngIf="recurringDepositAccountData.charges.length" class="layout-row-wrap responsive-column flex-fill">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
+  <div class="layout-row flex-100">
+    <span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
+    <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
+  </div>
 
-    <mat-divider class="flex-fill"></mat-divider>
-    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="recurringDepositAccountData.charges">
+  <div class="layout-row flex-100" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
+    <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
+    <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
+  </div>
+
+  <div class="layout-row flex-100" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
+    <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
+    <span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
+  </div>
+
+  <div class="layout-row flex-100">
+    <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
+    <span class="flex-60">{{
+      recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
+    }}</span>
+  </div>
+
+  <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
+    <ng-container matColumnDef="period">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">
+        {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }}&nbsp;{{
+          chartSlab.periodType.value | translateKey: 'catalogs'
+        }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amountRange">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">
+        {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="interest">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+      <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
+        <button
+          mat-button
+          color="primary"
+          (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+        >
+          <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.View Incentives' | translate }}
+          </span>
+          <span *ngIf="expandChartSlabIndex === chartSlabIndex">
+            <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.Hide Incentives' | translate }}
+          </span>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="incentives">
+      <td
+        mat-cell
+        *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+        [attr.colspan]="chartSlabsDisplayedColumns.length"
+      >
+        <div
+          class="layout-row-wrap flex-100 incentives"
+          [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+        >
+          <mat-card class="layout-row-wrap flex-100">
+            <h4 class="m-b-10 flex-13">
+              {{ 'labels.heading.Incentives' | translate }}
+            </h4>
+
+            <table
+              class="flex-100 mat-elevation-z1"
+              mat-table
+              [dataSource]="chartSlab.incentives"
+              *ngIf="chartSlab.incentives.length"
+            >
+              <ng-container matColumnDef="entityType">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.entityType.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="attributeName">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.attributeName.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="conditionType">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.conditionType.value | titlecase }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="attributeValue">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
+                  {{ incentive.attributeValueDesc }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="incentiveType">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.incentiveType.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="amount">
+                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.amount }}
+                </td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
+              <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
+            </table>
+          </mat-card>
+        </div>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
+  </table>
+
+  <div *ngIf="recurringDepositAccountData.charges.length" class="layout-row-wrap responsive-column flex-100">
+    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Charges' | translate }}</h3>
+
+    <mat-divider class="flex-100"></mat-divider>
+    <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="recurringDepositAccountData.charges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html

@@ -32,15 +32,15 @@
     </mat-form-field>
 
     <h4 class="mat-h4 flex-98">{{ 'labels.heading.Recurring Deposit Details' | translate }}</h4>
-
-    <mat-form-field class="flex-48">
-      <mat-label>{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</mat-label>
-      <input type="number" matInput formControlName="mandatoryRecommendedDepositAmount" required />
-      <mat-error>
-        {{ 'labels.inputs.Recurring Deposit Amount' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    <mifosx-input-amount
+      [currency]="currency"
+      [isRequired]="true"
+      *ngIf="currency"
+      class="flex-48"
+      [inputFormControl]="recurringDepositAccountSettingsForm.controls.mandatoryRecommendedDepositAmount"
+      [inputLabel]="'Recurring Deposit Amount'"
+    >
+    </mifosx-input-amount>
 
     <h4 class="mat-h4 flex-98">{{ 'labels.heading.Deposit Period' | translate }}</h4>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts

@@ -2,6 +2,7 @@
 import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';
 
 /** Custom Services */
 
@@ -32,6 +33,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
   preClosurePenalInterestOnTypeData: any;
   /** Tax Group */
   taxGroup: any;
+  currency: Currency | null = null;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
@@ -50,6 +52,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
       ? this.recurringDepositsAccountProductTemplate
       : this.recurringDepositsAccountTemplate;
     if (recurringDepositsAccount) {
+      this.currency = recurringDepositsAccount.currency;
       this.recurringDepositAccountSettingsForm.patchValue({
         isMandatoryDeposit: recurringDepositsAccount.isMandatoryDeposit,
         adjustAdvanceTowardsFuturePayments: recurringDepositsAccount.adjustAdvanceTowardsFuturePayments,

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html

@@ -14,74 +14,76 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <div class="flex-60">
-            <h3>
-              <i
-                class="fa fa-stop"
-                [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
-                [matTooltip]="recurringDepositsAccountData.status.value"
-              ></i>
-              {{ 'labels.inputs.Recurring Deposit' | translate }} :
-              {{ recurringDepositsAccountData.depositProductName }}
-              <mifosx-account-number accountNo="{{ recurringDepositsAccountData.accountNo }}"></mifosx-account-number>
-            </h3>
-            <span class="account-overview">
-              {{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }}:
-              {{ recurringDepositsAccountData.clientName || recurringDepositsAccountData.groupName }}
-              <span class="m-l-10" *ngIf="recurringDepositsAccountData.clientAccountNo">
-                <mifosx-account-number
-                  accountNo="{{ recurringDepositsAccountData.clientAccountNo }}"
-                ></mifosx-account-number>
+          <div class="layout-row responsive-column">
+            <div class="flex-60">
+              <h3>
+                <i
+                  class="fa fa-stop"
+                  [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
+                  [matTooltip]="recurringDepositsAccountData.status.value"
+                ></i>
+                {{ 'labels.inputs.Recurring Deposit' | translate }} :
+                {{ recurringDepositsAccountData.depositProductName }}
+                <mifosx-account-number accountNo="{{ recurringDepositsAccountData.accountNo }}"></mifosx-account-number>
+              </h3>
+              <span class="account-overview">
+                {{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }}:
+                {{ recurringDepositsAccountData.clientName || recurringDepositsAccountData.groupName }}
+                <span class="m-l-10" *ngIf="recurringDepositsAccountData.clientAccountNo">
+                  <mifosx-account-number
+                    accountNo="{{ recurringDepositsAccountData.clientAccountNo }}"
+                  ></mifosx-account-number>
+                </span>
               </span>
-            </span>
-          </div>
+            </div>
 
-          <div
-            *ngIf="
-              !recurringDepositsAccountData.status.rejected &&
-              !recurringDepositsAccountData.status.submittedAndPendingApproval
-            "
-          >
-            <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
-            <table class="account-overview">
-              <tbody>
-                <tr>
-                  <td>{{ 'labels.inputs.Current Balance' | translate }}</td>
-                  <td class="r-amount">
-                    {{
-                      recurringDepositsAccountData.summary.accountBalance
-                        | currency: currency.code : 'symbol-narrow' : '1.2-2'
-                    }}
-                  </td>
-                </tr>
-                <tr>
-                  <td>{{ 'labels.inputs.Deposit Amount' | translate }}</td>
-                  <td class="r-amount">
-                    {{
-                      recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
-                    }}
-                  </td>
-                </tr>
-                <tr>
-                  <td>{{ 'labels.inputs.Deposit Period' | translate }}</td>
-                  <td class="r-amount">{{ recurringDepositsAccountData.depositPeriod | number }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <span class="flex-auto"></span>
-          <div class="flex-5">
-            <button
-              mat-icon-button
-              [matMenuTriggerFor]="accountMenu"
-              aria-label="Loan account actions"
-              yPosition="below"
+            <div
+              class="flex-30"
+              *ngIf="
+                !recurringDepositsAccountData.status.rejected &&
+                !recurringDepositsAccountData.status.submittedAndPendingApproval
+              "
             >
-              <mat-icon matListIcon class="actions-menu">
-                <fa-icon icon="bars" size="sm"></fa-icon>
-              </mat-icon>
-            </button>
+              <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
+              <table class="account-overview">
+                <tbody>
+                  <tr>
+                    <td>{{ 'labels.inputs.Current Balance' | translate }}</td>
+                    <td class="r-amount">
+                      {{
+                        recurringDepositsAccountData.summary.accountBalance
+                          | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                      }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>{{ 'labels.inputs.Deposit Amount' | translate }}</td>
+                    <td class="r-amount">
+                      {{
+                        recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                      }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>{{ 'labels.inputs.Deposit Period' | translate }}</td>
+                    <td class="r-amount">{{ recurringDepositsAccountData.depositPeriod | number }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div class="flex-5">
+              <button
+                mat-icon-button
+                [matMenuTriggerFor]="accountMenu"
+                aria-label="Loan account actions"
+                yPosition="below"
+              >
+                <mat-icon matListIcon class="actions-menu">
+                  <fa-icon icon="bars" size="sm"></fa-icon>
+                </mat-icon>
+              </button>
+            </div>
           </div>
         </mat-card-title>
       </div>