fix: Display issues

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -169,7 +169,7 @@
 
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
-      <input matInput type="number" formControlName="mobileNo" />
+      <input matInput type="text" formControlName="mobileNo" />
     </mat-form-field>
 
     <mat-form-field class="flex-48">

src/app/clients/edit-client/edit-client.component.html

@@ -156,7 +156,7 @@
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
-            <input matInput type="number" formControlName="mobileNo" />
+            <input matInput type="text" formControlName="mobileNo" />
           </mat-form-field>
 
           <mat-form-field class="flex-48">

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>

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html

@@ -1,44 +1,44 @@
 <div class="layout-row-wrap responsive-column">
-  <h2 class="mat-h2 flex-fill">{{ fixedDepositProduct.name }}</h2>
+  <h2 class="mat-h2 flex-100">{{ fixedDepositProduct.name }}</h2>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Details' | translate }}</h3>
+  <mat-divider class="flex-100"></mat-divider>
+  <h3 class="mat-h3 flex-100">{{ 'labels.inputs.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.Short Name' | translate }}:</span>
     <span class="flex-60">{{ fixedDepositProduct.shortName }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositProduct.description">
+  <div class="layout-row flex-100" *ngIf="fixedDepositProduct.description">
     <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
     <span class="flex-60">{{ fixedDepositProduct.description }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Currency' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.inputs.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">{{
       fixedDepositProduct.currencyCode | find: fixedDepositProductsTemplate.currencyOptions : 'code' : 'name'
     }}</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">{{ fixedDepositProduct.digitsAfterDecimal }}</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">{{ fixedDepositProduct.inMultiplesOf }}</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.Deposit Amount' | translate }}:</span>
     <span class="flex-60">{{
       fixedDepositProduct.depositAmount +
@@ -54,7 +54,7 @@
     }}</span>
   </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">{{
       fixedDepositProduct.interestCompoundingPeriodType
@@ -62,7 +62,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">{{
       fixedDepositProduct.interestPostingPeriodType
@@ -70,7 +70,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">{{
       fixedDepositProduct.interestCalculationType
@@ -78,7 +78,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">{{
       fixedDepositProduct.interestCalculationDaysInYearType
@@ -86,10 +86,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="fixedDepositProduct.lockinPeriodFrequency">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100" *ngIf="fixedDepositProduct.lockinPeriodFrequency">
     <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
     <span class="flex-60">{{
       fixedDepositProduct.lockinPeriodFrequency +
@@ -99,7 +99,7 @@
     }}</span>
   </div>
 
-  <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">{{
       fixedDepositProduct.minDepositTerm +
@@ -109,7 +109,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositProduct.inMultiplesOfDepositTerm">
+  <div class="layout-row flex-100" *ngIf="fixedDepositProduct.inMultiplesOfDepositTerm">
     <span class="flex-40">{{ 'labels.inputs.And thereafter, in Multiples of' | translate }}:</span>
     <span class="flex-60">{{
       fixedDepositProduct.inMultiplesOfDepositTerm +
@@ -119,7 +119,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositProduct.maxDepositTerm">
+  <div class="layout-row flex-100" *ngIf="fixedDepositProduct.maxDepositTerm">
     <span class="flex-40">{{ 'labels.inputs.Maximum Deposit Term' | translate }}:</span>
     <span class="flex-60">{{
       fixedDepositProduct.maxDepositTerm +
@@ -129,12 +129,12 @@
     }}</span>
   </div>
   <!-- For Pre-mature closure -->
-  <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">{{ fixedDepositProduct.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositProduct.preClosurePenalApplicable">
+  <div class="layout-row flex-100" *ngIf="fixedDepositProduct.preClosurePenalApplicable">
     <span class="flex-40">{{ 'labels.inputs.Penal Interest' | translate }} (%):</span>
     <span class="flex-60">{{
       fixedDepositProduct.preClosurePenalInterest +
@@ -145,53 +145,53 @@
     }}</span>
   </div>
   <!--  -->
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
     <span class="flex-60">{{ fixedDepositProduct.withHoldTax | yesNo }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="fixedDepositProduct.withHoldTax">
+  <div class="layout-row flex-100" *ngIf="fixedDepositProduct.withHoldTax">
     <span class="flex-40">{{ 'labels.inputs.Tax Group' | translate }}:</span>
     <span class="flex-60">{{
       fixedDepositProduct.taxGroupId | find: fixedDepositProductsTemplate.taxGroupOptions : 'id' : 'name'
     }}</span>
   </div>
 
-  <div class="layout-row-wrap responsive-column flex-fill" *ngIf="fixedDepositProduct.charts.length !== 0">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
+  <div class="layout-row-wrap responsive-column flex-100" *ngIf="fixedDepositProduct.charts.length !== 0">
+    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
 
-    <mat-divider class="flex-fill"></mat-divider>
+    <mat-divider class="flex-100"></mat-divider>
     <div
       *ngFor="let chart of fixedDepositProduct.charts; let chartIndex = index"
-      class="layout-row-wrap responsive-column flex-fill"
+      class="layout-row-wrap responsive-column flex-100"
     >
-      <div class="flex-fill" *ngIf="chart.name">
+      <div class="layout-row flex-100" *ngIf="chart.name">
         <span class="flex-40">{{ 'labels.inputs.Name' | translate }}:</span>
         <span class="flex-60">{{ chart.name }}</span>
       </div>
 
-      <div class="flex-fill" *ngIf="chart.description">
+      <div class="layout-row flex-100" *ngIf="chart.description">
         <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
         <span class="flex-60">{{ chart.description }}</span>
       </div>
 
-      <div class="flex-fill">
+      <div class="layout-row flex-100">
         <span class="flex-40">{{ 'labels.inputs.From Date' | translate }}:</span>
         <span class="flex-60">{{ chart.fromDate | dateFormat }}</span>
       </div>
 
-      <div class="flex-fill" *ngIf="chart.endDate">
+      <div class="layout-row flex-100" *ngIf="chart.endDate">
         <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
         <span class="flex-60">{{ chart.endDate | dateFormat }}</span>
       </div>
 
-      <div class="flex-fill">
+      <div class="flex-100">
         <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
         <span class="flex-60">{{ fixedDepositProduct.isPrimaryGroupingByAmount | yesNo }}</span>
       </div>
 
       <table
-        class="mat-elevation-z1 flex-fill"
+        class="mat-elevation-z1 flex-100"
         mat-table
         [dataSource]="chart.chartSlabs"
         *ngIf="chart.chartSlabs.length !== 0"
@@ -262,15 +262,15 @@
             [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length"
           >
             <div
-              class="layout-row-wrap flex-fill incentives"
+              class="layout-row-wrap flex-100 incentives"
               [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'"
             >
-              <mat-card class="layout-row-wrap flex-fill">
+              <mat-card class="layout-row-wrap flex-100">
                 <h4 class="mat-h4 flex-23">
                   {{ 'labels.heading.Incentives' | translate }}
                 </h4>
 
-                <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
+                <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
                   <ng-container matColumnDef="entityType">
                     <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
@@ -350,15 +350,15 @@
         <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
       </table>
 
-      <mat-divider class="flex-fill"></mat-divider>
+      <mat-divider class="flex-100"></mat-divider>
     </div>
   </div>
 
-  <div *ngIf="fixedDepositProduct.charges.length" class="layout-row-wrap responsive-column flex-fill">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
+  <div *ngIf="fixedDepositProduct.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-fill"></mat-divider>
-    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="fixedDepositProduct.charges">
+    <mat-divider class="flex-100"></mat-divider>
+    <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="fixedDepositProduct.charges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
@@ -392,9 +392,9 @@
     </table>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Accounting' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Accounting' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
+  <mat-divider class="flex-100"></mat-divider>
   <mifosx-view-savings-accounting-details
     *ngIf="!isNoneAccounting()"
     [accountingRule]="accountingRule"
@@ -409,18 +409,18 @@
         fixedDepositProduct.feeToIncomeAccountMappings?.length ||
         fixedDepositProduct.penaltyToIncomeAccountMappings?.length)
     "
-    class="layout-row-wrap responsive-column flex-fill"
+    class="layout-row-wrap responsive-column flex-100"
   >
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
+    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
 
-    <mat-divider class="flex-fill"></mat-divider>
+    <mat-divider class="flex-100"></mat-divider>
     <div
       *ngIf="fixedDepositProduct.paymentChannelToFundSourceMappings?.length"
-      class="flex-fill layout-row-wrap responsive-column"
+      class="flex-100 layout-row-wrap responsive-column"
     >
-      <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Fund Sources for Payment Channels' | translate }}</h4>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Fund Sources for Payment Channels' | translate }}</h4>
       <table
-        class="mat-elevation-z1 flex-fill"
+        class="mat-elevation-z1 flex-100"
         mat-table
         [dataSource]="fixedDepositProduct.paymentChannelToFundSourceMappings"
       >
@@ -450,11 +450,11 @@
 
     <div
       *ngIf="fixedDepositProduct.feeToIncomeAccountMappings?.length"
-      class="flex-fill layout-row-wrap responsive-column"
+      class="flex-100 layout-row-wrap responsive-column"
     >
-      <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
 
-      <table class="mat-elevation-z1 flex-fill" mat-table [dataSource]="fixedDepositProduct.feeToIncomeAccountMappings">
+      <table class="mat-elevation-z1 flex-100" mat-table [dataSource]="fixedDepositProduct.feeToIncomeAccountMappings">
         <ng-container matColumnDef="chargeId">
           <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
           <td mat-cell *matCellDef="let feesIncome">
@@ -479,12 +479,12 @@
 
     <div
       *ngIf="fixedDepositProduct.penaltyToIncomeAccountMappings?.length"
-      class="flex-fill layout-row-wrap responsive-column"
+      class="flex-100 layout-row-wrap responsive-column"
     >
-      <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
 
       <table
-        class="mat-elevation-z1 flex-fill"
+        class="mat-elevation-z1 flex-100"
         mat-table
         [dataSource]="fixedDepositProduct.penaltyToIncomeAccountMappings"
       >

src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.html

@@ -1,4 +1,4 @@
-<div class="layout-row align-end gap-2px responsive-column container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-t-20 m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -8,50 +8,50 @@
   <mat-card>
     <mat-card-content>
       <div class="responsive-column">
-        <h2 class="mat-h2 flex-fill">{{ fixedDepositProductData.name }}</h2>
+        <h2 class="mat-h2 flex-100">{{ fixedDepositProductData.name }}</h2>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Details' | translate }}</h3>
+        <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.shortName }}</span>
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.description">
+        <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.description">
           <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.description }}</span>
         </div>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Currency' | translate }}</h3>
+        <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Currency' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.heading.Currency' | translate }}:</span>
           <span class="flex-60"
             >({{ fixedDepositProductData.currency.code }}) {{ fixedDepositProductData.currency.name }}</span
           >
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.currency.decimalPlaces }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.currency.inMultiplesOf | formatNumber }}</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 [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Deposit Amount' | translate }}:</span>
           <span class="flex-60">{{
             fixedDepositProductData.depositAmount +
@@ -67,31 +67,31 @@
           }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.interestCompoundingPeriodType.value }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.interestPostingPeriodType.value }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Interest Calculated Using' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.interestCalculationType.value }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.interestCalculationDaysInYearType.value }}</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 [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.lockinPeriodFrequency">
+        <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.lockinPeriodFrequency">
           <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
           <span class="flex-60">
             {{ fixedDepositProductData.lockinPeriodFrequency }}
@@ -99,7 +99,7 @@
           >
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.minDepositTerm">
+        <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.minDepositTerm">
           <span class="flex-40">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
           <span class="flex-60" *ngIf="fixedDepositProductData.minDepositTerm !== undefined"
             >{{ fixedDepositProductData.minDepositTerm }}
@@ -108,7 +108,7 @@
           >
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.maxDepositTerm">
+        <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.maxDepositTerm">
           <span class="flex-40">{{ 'labels.inputs.Maximum Deposit Term' | translate }}:</span>
           <span class="flex-60" *ngIf="fixedDepositProductData.maxDepositTerm !== undefined"
             >{{ fixedDepositProductData.maxDepositTerm }}
@@ -117,7 +117,7 @@
           >
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.inMultiplesOfDepositTerm">
+        <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.inMultiplesOfDepositTerm">
           <span class="flex-40">{{ 'labels.inputs.Deposit Term In multiple of' | translate }}:</span>
           <span class="flex-60"
             >{{ fixedDepositProductData.inMultiplesOfDepositTerm }}
@@ -126,12 +126,12 @@
           >
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.preClosurePenalApplicable | yesNo }}</span>
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.preClosurePenalApplicable">
+        <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.preClosurePenalApplicable">
           <span class="flex-40">{{ 'labels.inputs.Penal Interest' | translate }} (%):</span>
           <span class="flex-60"
             >{{ fixedDepositProductData.preClosurePenalInterest }} &nbsp; &nbsp; % &nbsp; &nbsp; On &nbsp;&nbsp;
@@ -139,54 +139,54 @@
           >
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.minBalanceForInterestCalculation">
+        <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.minBalanceForInterestCalculation">
           <span class="flex-40">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.minBalanceForInterestCalculation | formatNumber }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.withHoldTax | yesNo }}</span>
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.withHoldTax">
+        <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.withHoldTax">
           <span class="flex-40">{{ 'labels.inputs.Withhold Tax group' | translate }}:</span>
           <span class="flex-60">{{ fixedDepositProductData.taxGroup.name }}</span>
         </div>
 
-        <div *ngIf="fixedDepositProductData.activeChart" class="responsive-column flex-fill">
-          <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Interest Rate Chart' | translate }}</h3>
+        <div *ngIf="fixedDepositProductData.activeChart" class="responsive-column flex-100">
+          <h3 class="mat-h3 flex-100">{{ 'labels.heading.Interest Rate Chart' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
-          <div class="responsive-column flex-fill">
-            <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.activeChart.name">
+          <div class="responsive-column flex-100">
+            <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.activeChart.name">
               <span class="flex-40">{{ 'labels.inputs.Name' | translate }}:</span>
               <span class="flex-60">{{ fixedDepositProductData.activeChart.name }}</span>
             </div>
 
-            <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.activeChart.description">
+            <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.activeChart.description">
               <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
               <span class="flex-60">{{ fixedDepositProductData.activeChart.description }}</span>
             </div>
 
-            <div class="flex-fill layout-row">
+            <div class="flex-100 layout-row">
               <span class="flex-40">{{ 'labels.inputs.From Date' | translate }}:</span>
               <span class="flex-60">{{ fixedDepositProductData.activeChart.fromDate | dateFormat }}</span>
             </div>
 
-            <div class="flex-fill layout-row" *ngIf="fixedDepositProductData.activeChart.endDate">
+            <div class="flex-100 layout-row" *ngIf="fixedDepositProductData.activeChart.endDate">
               <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
               <span class="flex-60">{{ fixedDepositProductData.activeChart.endDate | dateFormat }}</span>
             </div>
 
-            <div class="flex-fill layout-row">
+            <div class="flex-100 layout-row">
               <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
               <span class="flex-60">{{ fixedDepositProductData.activeChart.isPrimaryGroupingByAmount | yesNo }}</span>
             </div>
 
             <table
-              class="mat-elevation-z1 flex-fill"
+              class="mat-elevation-z1 flex-100"
               mat-table
               [dataSource]="fixedDepositProductData.activeChart.chartSlabs"
               multiTemplateDataRows
@@ -251,15 +251,15 @@
                   [attr.colspan]="chartSlabsDisplayedColumns.length"
                 >
                   <div
-                    class="incentives flex-fill layout-row-wrap"
+                    class="incentives flex-100 layout-row-wrap"
                     [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
                   >
-                    <mat-card class="layout-row-wrap flex-fill">
+                    <mat-card class="layout-row-wrap flex-100">
                       <h4 class="mat-h4 flex-23">
                         {{ 'labels.heading.Incentives' | translate }}
                       </h4>
 
-                      <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
+                      <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
                         <ng-container matColumnDef="entityType">
                           <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
@@ -348,11 +348,11 @@
           </div>
         </div>
 
-        <div *ngIf="fixedDepositProductData.charges.length" class="layout-row-wrap responsive-column flex-fill">
-          <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Charges' | translate }}</h3>
+        <div *ngIf="fixedDepositProductData.charges.length" class="layout-row-wrap responsive-column flex-100">
+          <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Charges' | translate }}</h3>
 
-          <mat-divider class="flex-fill"></mat-divider>
-          <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="fixedDepositProductData.charges">
+          <mat-divider class="flex-100"></mat-divider>
+          <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="fixedDepositProductData.charges">
             <ng-container matColumnDef="name">
               <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
               <td mat-cell *matCellDef="let charge">
@@ -386,7 +386,7 @@
           </table>
         </div>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Accounting' | translate }}</h3>
+        <h3 class="mat-h3 flex-100">{{ 'labels.heading.Accounting' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
@@ -398,7 +398,7 @@
         </mifosx-view-savings-accounting-details>
 
         <div
-          class="flex-fill layout-row-wrap layout-lt-md-column"
+          class="flex-100 layout-row-wrap layout-lt-md-column"
           *ngIf="
             fixedDepositProductData.advancedAccountingRules &&
             (fixedDepositProductData.paymentChannelToFundSourceMappings?.length ||
@@ -406,7 +406,7 @@
               fixedDepositProductData.penaltyToIncomeAccountMappings?.length)
           "
         >
-          <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
+          <h3 class="mat-h3 flex-100">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
@@ -414,14 +414,14 @@
 
           <div
             *ngIf="fixedDepositProductData.paymentChannelToFundSourceMappings?.length"
-            class="flex-fill layout-row-wrap layout-xs-column"
+            class="flex-100 layout-row-wrap layout-xs-column"
           >
-            <h4 class="mat-h4 flex-fill">
+            <h4 class="mat-h4 flex-100">
               {{ 'labels.inputs.Configure Fund Sources for Payment Channels' | translate }}
             </h4>
 
             <table
-              class="mat-elevation-z1 flex-fill"
+              class="mat-elevation-z1 flex-100"
               mat-table
               [dataSource]="fixedDepositProductData.paymentChannelToFundSourceMappings"
             >
@@ -446,12 +446,12 @@
 
           <div
             *ngIf="fixedDepositProductData.feeToIncomeAccountMappings?.length"
-            class="flex-fill layout-row-wrap layout-xs-column"
+            class="flex-100 layout-row-wrap layout-xs-column"
           >
-            <h4 class="mat-h4 flex-fill">{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
+            <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
 
             <table
-              class="mat-elevation-z1 flex-fill"
+              class="mat-elevation-z1 flex-100"
               mat-table
               [dataSource]="fixedDepositProductData.feeToIncomeAccountMappings"
             >
@@ -476,12 +476,12 @@
 
           <div
             *ngIf="fixedDepositProductData.penaltyToIncomeAccountMappings?.length"
-            class="flex-fill layout-row-wrap layout-xs-column"
+            class="flex-100 layout-row-wrap layout-xs-column"
           >
-            <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
+            <h4 class="mat-h4 flex-100">{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
 
             <table
-              class="mat-elevation-z1 flex-fill"
+              class="mat-elevation-z1 flex-100"
               mat-table
               [dataSource]="fixedDepositProductData.penaltyToIncomeAccountMappings"
             >

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html

@@ -1,44 +1,44 @@
 <div class="layout-row-wrap responsive-column">
-  <h2 class="mat-h2 flex-fill">{{ recurringDepositProduct.name }}</h2>
+  <h2 class="mat-h2 flex-100">{{ recurringDepositProduct.name }}</h2>
 
-  <mat-divider class="flex-fill"></mat-divider>
-  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Details' | translate }}</h3>
+  <mat-divider class="flex-100"></mat-divider>
+  <h3 class="mat-h3 flex-100">{{ 'labels.inputs.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.Short Name' | translate }}:</span>
     <span class="flex-60">{{ recurringDepositProduct.shortName }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="recurringDepositProduct.description">
+  <div class="layout-row flex-100" *ngIf="recurringDepositProduct.description">
     <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
     <span class="flex-60">{{ recurringDepositProduct.description }}</span>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Currency' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.inputs.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">{{
       recurringDepositProduct.currencyCode | find: recurringDepositProductsTemplate.currencyOptions : 'code' : 'name'
     }}</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">{{ recurringDepositProduct.digitsAfterDecimal }}</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">{{ recurringDepositProduct.inMultiplesOf }}</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.Deposit Amount' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositProduct.depositAmount +
@@ -54,7 +54,7 @@
     }}</span>
   </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">{{
       recurringDepositProduct.interestCompoundingPeriodType
@@ -62,7 +62,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill">
+  <div class="flex-100">
     <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositProduct.interestPostingPeriodType
@@ -70,7 +70,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">{{
       recurringDepositProduct.interestCalculationType
@@ -78,7 +78,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">{{
       recurringDepositProduct.interestCalculationDaysInYearType
@@ -86,10 +86,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="recurringDepositProduct.lockinPeriodFrequency">
+  <mat-divider class="flex-100"></mat-divider>
+  <div class="layout-row flex-100" *ngIf="recurringDepositProduct.lockinPeriodFrequency">
     <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositProduct.lockinPeriodFrequency +
@@ -99,7 +99,7 @@
     }}</span>
   </div>
 
-  <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">{{
       recurringDepositProduct.minDepositTerm +
@@ -109,7 +109,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="recurringDepositProduct.inMultiplesOfDepositTerm">
+  <div class="layout-row flex-100" *ngIf="recurringDepositProduct.inMultiplesOfDepositTerm">
     <span class="flex-40">{{ 'labels.inputs.And thereafter, in Multiples of' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositProduct.inMultiplesOfDepositTerm +
@@ -119,7 +119,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="recurringDepositProduct.maxDepositTerm">
+  <div class="layout-row flex-100" *ngIf="recurringDepositProduct.maxDepositTerm">
     <span class="flex-40">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositProduct.maxDepositTerm +
@@ -129,12 +129,12 @@
     }}</span>
   </div>
   <!-- For Pre-mature closure -->
-  <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">{{ recurringDepositProduct.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="recurringDepositProduct.preClosurePenalApplicable">
+  <div class="layout-row flex-100" *ngIf="recurringDepositProduct.preClosurePenalApplicable">
     <span class="flex-40">{{ 'labels.inputs.Penal Interest' | translate }} (%):</span>
     <span class="flex-60">{{
       recurringDepositProduct.preClosurePenalInterest +
@@ -145,7 +145,7 @@
     }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="recurringDepositProduct.isMandatoryDeposit !== undefined">
+  <div class="layout-row flex-100" *ngIf="recurringDepositProduct.isMandatoryDeposit !== undefined">
     <span class="flex-40">{{ 'labels.inputs.Recurring Deposit Type' | translate }}:</span>
     <span class="flex-60" *ngIf="recurringDepositProduct.isMandatoryDeposit">
       {{ 'labels.text.Mandatory' | translate }}
@@ -155,53 +155,53 @@
     </span>
   </div>
   <!--  -->
-  <div class="flex-fill">
+  <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
     <span class="flex-60">{{ recurringDepositProduct.withHoldTax | yesNo }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="recurringDepositProduct.withHoldTax">
+  <div class="layout-row flex-100" *ngIf="recurringDepositProduct.withHoldTax">
     <span class="flex-40">{{ 'labels.inputs.Tax Group' | translate }}:</span>
     <span class="flex-60">{{
       recurringDepositProduct.taxGroupId | find: recurringDepositProductsTemplate.taxGroupOptions : 'id' : 'name'
     }}</span>
   </div>
 
-  <div class="layout-row-wrap responsive-column flex-fill" *ngIf="recurringDepositProduct.charts.length !== 0">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
+  <div class="layout-row-wrap responsive-column flex-100" *ngIf="recurringDepositProduct.charts.length !== 0">
+    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
 
-    <mat-divider class="flex-fill"></mat-divider>
+    <mat-divider class="flex-100"></mat-divider>
     <div
       *ngFor="let chart of recurringDepositProduct.charts; let chartIndex = index"
-      class="flex-fill layout-row-wrap layout-xs-column"
+      class="flex-100 layout-row-wrap layout-xs-column"
     >
-      <div class="flex-fill" *ngIf="chart.name">
+      <div class="layout-row flex-100" *ngIf="chart.name">
         <span class="flex-40">{{ 'labels.inputs.Name' | translate }}:</span>
         <span class="flex-60">{{ chart.name }}</span>
       </div>
 
-      <div class="flex-fill">
+      <div class="layout-row flex-100">
         <span class="flex-40">{{ 'labels.inputs.From Date' | translate }}:</span>
         <span class="flex-60">{{ chart.fromDate | dateFormat }}</span>
       </div>
 
-      <div class="flex-fill" *ngIf="chart.endDate">
+      <div class="layout-row flex-100" *ngIf="chart.endDate">
         <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
         <span class="flex-60">{{ chart.endDate | dateFormat }}</span>
       </div>
 
-      <div class="flex-fill" *ngIf="chart.description">
+      <div class="layout-row flex-100" *ngIf="chart.description">
         <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
         <span class="flex-60">{{ chart.description }}</span>
       </div>
 
-      <div class="flex-fill">
+      <div class="layout-row flex-100">
         <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
         <span class="flex-60">{{ recurringDepositProduct.isPrimaryGroupingByAmount | yesNo }}</span>
       </div>
 
       <table
-        class="mat-elevation-z1 flex-fill"
+        class="mat-elevation-z1 flex-100"
         mat-table
         [dataSource]="chart.chartSlabs"
         *ngIf="chart.chartSlabs.length !== 0"
@@ -271,15 +271,15 @@
             [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length"
           >
             <div
-              class="layout-row-wrap flex-fill incentives"
+              class="layout-row-wrap flex-100 incentives"
               [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'"
             >
-              <mat-card class="layout-row-wrap flex-fill">
+              <mat-card class="layout-row-wrap flex-100">
                 <h4 class="mat-h4 flex-23">
                   {{ 'labels.heading.Incentives' | translate }}
                 </h4>
 
-                <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
+                <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
                   <ng-container matColumnDef="entityType">
                     <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                     <td mat-cell *matCellDef="let incentive">
@@ -362,15 +362,15 @@
         <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
       </table>
 
-      <mat-divider class="flex-fill"></mat-divider>
+      <mat-divider class="flex-100"></mat-divider>
     </div>
   </div>
 
-  <div *ngIf="recurringDepositProduct.charges.length" class="layout-row-wrap responsive-column flex-fill">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
+  <div *ngIf="recurringDepositProduct.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-fill"></mat-divider>
-    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.charges">
+    <mat-divider class="flex-100"></mat-divider>
+    <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.charges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
@@ -404,9 +404,9 @@
     </table>
   </div>
 
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Accounting' | translate }}</h3>
+  <h3 class="mat-h3 flex-100">{{ 'labels.heading.Accounting' | translate }}</h3>
 
-  <mat-divider class="flex-fill"></mat-divider>
+  <mat-divider class="flex-100"></mat-divider>
   <mifosx-view-savings-accounting-details
     *ngIf="!isNoneAccounting()"
     [accountingRule]="accountingRule"
@@ -421,19 +421,19 @@
         recurringDepositProduct.feeToIncomeAccountMappings?.length ||
         recurringDepositProduct.penaltyToIncomeAccountMappings?.length)
     "
-    class="layout-row-wrap responsive-column flex-fill"
+    class="layout-row-wrap responsive-column flex-100"
   >
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
+    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
 
-    <mat-divider class="flex-fill"></mat-divider>
+    <mat-divider class="flex-100"></mat-divider>
     <div
       *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length"
-      class="flex-fill layout-row-wrap responsive-column"
+      class="flex-100 layout-row-wrap responsive-column"
     >
-      <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Fund Sources for Payment Channels' | translate }}</h4>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Fund Sources for Payment Channels' | translate }}</h4>
 
       <table
-        class="mat-elevation-z1 flex-fill"
+        class="mat-elevation-z1 flex-100"
         mat-table
         [dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings"
       >
@@ -464,12 +464,12 @@
 
     <div
       *ngIf="recurringDepositProduct.feeToIncomeAccountMappings?.length"
-      class="flex-fill layout-row-wrap responsive-column"
+      class="flex-100 layout-row-wrap responsive-column"
     >
-      <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
 
       <table
-        class="mat-elevation-z1 flex-fill"
+        class="mat-elevation-z1 flex-100"
         mat-table
         [dataSource]="recurringDepositProduct.feeToIncomeAccountMappings"
       >
@@ -497,12 +497,12 @@
 
     <div
       *ngIf="recurringDepositProduct.penaltyToIncomeAccountMappings?.length"
-      class="flex-fill layout-row-wrap responsive-column"
+      class="flex-100 layout-row-wrap responsive-column"
     >
-      <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
+      <h4 class="mat-h4 flex-100">{{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}</h4>
 
       <table
-        class="mat-elevation-z1 flex-fill"
+        class="mat-elevation-z1 flex-100"
         mat-table
         [dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings"
       >

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.scss

@@ -1,3 +1,6 @@
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
+
 h2,
 h3,
 h4 {
@@ -45,3 +48,9 @@ mat-divider {
 .margin-t {
   margin-top: 1em;
 }
+
+.mat-h3 {
+  margin-top: 10px !important;
+  font-weight: 300;
+  color: $status-approved;
+}

src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.html

@@ -1,4 +1,4 @@
-<div class="layout-row align-end gap-2px responsive-column container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-t-20 m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -9,50 +9,50 @@
   <mat-card>
     <mat-card-content>
       <div class="responsive-column">
-        <h2 class="mat-h2 flex-fill">{{ recurringDepositProduct.name }}</h2>
+        <h2 class="mat-h2 flex-100">{{ recurringDepositProduct.name }}</h2>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Details' | translate }}</h3>
+        <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
           <span class="flex-60">{{ recurringDepositProduct.shortName }}</span>
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.description">
+        <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.description">
           <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
           <span class="flex-60">{{ recurringDepositProduct.description }}</span>
         </div>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Currency' | translate }}</h3>
+        <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Currency' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.heading.Currency' | translate }}:</span>
           <span class="flex-60"
             >({{ recurringDepositProduct.currency.code }}) {{ recurringDepositProduct.currency.name }}</span
           >
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
           <span class="flex-60">{{ recurringDepositProduct.currency.decimalPlaces }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
           <span class="flex-60">{{ recurringDepositProduct.currency.inMultiplesOf | formatNumber }}</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 [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Deposit Amount' | translate }}:</span>
           <span class="flex-60">{{
             recurringDepositProduct.depositAmount +
@@ -68,31 +68,31 @@
           }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
           <span class="flex-60">{{ recurringDepositProduct.interestCompoundingPeriodType.value }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
           <span class="flex-60">{{ recurringDepositProduct.interestPostingPeriodType.value }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
           <span class="flex-60">{{ recurringDepositProduct.interestCalculationType.value }}</span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
           <span class="flex-60">{{ recurringDepositProduct.interestCalculationDaysInYearType.value }}</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 [inset]="true"></mat-divider>
 
-        <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.lockinPeriodFrequency">
+        <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.lockinPeriodFrequency">
           <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
           <span class="flex-60" *ngIf="recurringDepositProduct.lockinPeriodFrequency !== undefined">
             {{ recurringDepositProduct.lockinPeriodFrequency }}
@@ -100,7 +100,7 @@
           >
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.minDepositTerm">
+        <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.minDepositTerm">
           <span class="flex-40">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
           <span class="flex-60" *ngIf="recurringDepositProduct.minDepositTerm !== undefined"
             >{{ recurringDepositProduct.minDepositTerm }}
@@ -109,7 +109,7 @@
           >
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.maxDepositTerm">
+        <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.maxDepositTerm">
           <span class="flex-40">{{ 'labels.inputs.Maximum Deposit Term' | translate }}:</span>
           <span class="flex-60" *ngIf="recurringDepositProduct.maxDepositTerm !== undefined"
             >{{ recurringDepositProduct.maxDepositTerm }}
@@ -118,7 +118,7 @@
           >
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.inMultipleOfDepositTerm">
+        <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.inMultipleOfDepositTerm">
           <span class="flex-40">{{ 'labels.inputs.Deposit Term In multiple of' | translate }}:</span>
           <span class="flex-60" *ngIf="recurringDepositProduct.inMultipleOfDepositTerm !== undefined"
             >{{ recurringDepositProduct.inMultipleOfDepositTerm }}
@@ -127,7 +127,7 @@
           >
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.isMandatoryDeposit !== undefined">
+        <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.isMandatoryDeposit !== undefined">
           <span class="flex-40">{{ 'labels.inputs.Recurring Deposit Type' | translate }}:</span>
           <span class="flex-60" *ngIf="recurringDepositProduct.isMandatoryDeposit">
             {{ 'labels.text.Mandatory' | translate }}
@@ -137,7 +137,7 @@
           </span>
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.preClosurePenalInterest">
+        <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.preClosurePenalInterest">
           <span class="flex-40">{{ 'labels.inputs.Apply penal interest (less)' | translate }}:</span>
           <span class="flex-60"
             ><span class="m-r-5">{{ recurringDepositProduct.preClosurePenalInterest }}</span
@@ -146,49 +146,49 @@
           </span>
         </div>
 
-        <div class="flex-fill layout-row">
+        <div class="flex-100 layout-row">
           <span class="flex-40">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
           <span class="flex-60">{{ recurringDepositProduct.withHoldTax | yesNo }}</span>
         </div>
 
-        <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.withHoldTax">
+        <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.withHoldTax">
           <span class="flex-40">{{ 'labels.inputs.Withhold Tax group' | translate }}:</span>
           <span class="flex-60">{{ recurringDepositProduct.taxGroup.name }}</span>
         </div>
 
-        <div *ngIf="recurringDepositProduct.activeChart" class="layout-row-wrap responsive-column flex-fill">
-          <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
+        <div *ngIf="recurringDepositProduct.activeChart" class="layout-row-wrap responsive-column flex-100">
+          <h3 class="mat-h3 flex-100">{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
-          <div class="layout-row-wrap responsive-column flex-fill">
-            <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.activeChart.name">
+          <div class="layout-row-wrap responsive-column flex-100">
+            <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.activeChart.name">
               <span class="flex-40">{{ 'labels.inputs.Name' | translate }}:</span>
               <span class="flex-60">{{ recurringDepositProduct.activeChart.name }}</span>
             </div>
 
-            <div class="flex-fill layout-row">
+            <div class="flex-100 layout-row">
               <span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
               <span class="flex-60">{{ recurringDepositProduct.activeChart.fromDate | dateFormat }}</span>
             </div>
 
-            <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.activeChart.endDate">
+            <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.activeChart.endDate">
               <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
               <span class="flex-60">{{ recurringDepositProduct.activeChart.endDate | dateFormat }}</span>
             </div>
 
-            <div class="flex-fill layout-row" *ngIf="recurringDepositProduct.activeChart.description">
+            <div class="flex-100 layout-row" *ngIf="recurringDepositProduct.activeChart.description">
               <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
               <span class="flex-60">{{ recurringDepositProduct.activeChart.description }}</span>
             </div>
 
-            <div class="flex-fill layout-row">
+            <div class="flex-100 layout-row">
               <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
               <span class="flex-60">{{ recurringDepositProduct.activeChart.isPrimaryGroupingByAmount | yesNo }}</span>
             </div>
 
             <table
-              class="mat-elevation-z1 flex-fill"
+              class="mat-elevation-z1 flex-100"
               mat-table
               [dataSource]="recurringDepositProduct.activeChart.chartSlabs"
               multiTemplateDataRows
@@ -255,15 +255,15 @@
                   [attr.colspan]="chartSlabsDisplayedColumns.length"
                 >
                   <div
-                    class="incentives flex-fill layout-row-wrap"
+                    class="incentives flex-100 layout-row-wrap"
                     [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
                   >
-                    <mat-card class="layout-row-wrap flex-fill">
+                    <mat-card class="layout-row-wrap flex-100">
                       <h4 class="mat-h4 flex-23">
                         {{ 'labels.heading.Incentives' | translate }}
                       </h4>
 
-                      <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
+                      <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
                         <ng-container matColumnDef="entityType">
                           <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                           <td mat-cell *matCellDef="let incentive">
@@ -363,12 +363,12 @@
           </div>
         </div>
 
-        <div *ngIf="recurringDepositProduct.charges.length" class="layout-row-wrap responsive-column flex-fill">
-          <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
+        <div *ngIf="recurringDepositProduct.charges.length" class="layout-row-wrap responsive-column flex-100">
+          <h3 class="mat-h3 flex-100">{{ 'labels.heading.Charges' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
-          <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.charges">
+          <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.charges">
             <ng-container matColumnDef="name">
               <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
               <td mat-cell *matCellDef="let charge">
@@ -402,7 +402,7 @@
           </table>
         </div>
 
-        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Accounting' | translate }}</h3>
+        <h3 class="mat-h3 flex-100">{{ 'labels.heading.Accounting' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
@@ -414,27 +414,27 @@
         </mifosx-view-savings-accounting-details>
 
         <div
-          class="flex-fill layout-row-wrap layout-column.lt-md"
+          class="flex-100 layout-row-wrap layout-column.lt-md"
           *ngIf="
             recurringDepositProduct.paymentChannelToFundSourceMappings?.length ||
             recurringDepositProduct.feeToIncomeAccountMappings?.length ||
             recurringDepositProduct.penaltyToIncomeAccountMappings?.length
           "
         >
-          <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Advanced Accounting Rules' | translate }}</h3>
+          <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Advanced Accounting Rules' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <div
             *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length"
-            class="flex-fill layout-row-wrap layout-xs-column"
+            class="flex-100 layout-row-wrap layout-xs-column"
           >
-            <h4 class="mat-h4 flex-fill">
+            <h4 class="mat-h4 flex-100">
               {{ 'labels.inputs.Configure Fund Sources for Payment Channels' | translate }}
             </h4>
 
             <table
-              class="mat-elevation-z1 flex-fill"
+              class="mat-elevation-z1 flex-100"
               mat-table
               [dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings"
             >
@@ -459,12 +459,12 @@
 
           <div
             *ngIf="recurringDepositProduct.feeToIncomeAccountMappings?.length"
-            class="flex-fill layout-row-wrap layout-xs-column"
+            class="flex-100 layout-row-wrap layout-xs-column"
           >
-            <h4 class="mat-h4 flex-fill">{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
+            <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
 
             <table
-              class="mat-elevation-z1 flex-fill"
+              class="mat-elevation-z1 flex-100"
               mat-table
               [dataSource]="recurringDepositProduct.feeToIncomeAccountMappings"
             >
@@ -489,12 +489,12 @@
 
           <div
             *ngIf="recurringDepositProduct.penaltyToIncomeAccountMappings?.length"
-            class="flex-fill layout-row-wrap layout-xs-column"
+            class="flex-100 layout-row-wrap layout-xs-column"
           >
-            <h4 class="mat-h4 flex-fill">{{ 'labels.inputs.Penalties to Specific Income Accounts' | translate }}</h4>
+            <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Penalties to Specific Income Accounts' | translate }}</h4>
 
             <table
-              class="mat-elevation-z1 flex-fill"
+              class="mat-elevation-z1 flex-100"
               mat-table
               [dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings"
             >

src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html

@@ -1,11 +1,13 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <h2 mat-title *ngIf="transactionType.holdamount">{{ 'labels.heading.Hold Amount' | translate }}</h2>
-    <h2 mat-title *ngIf="transactionType.blockaccount">{{ 'labels.heading.Block Savings Account' | translate }}</h2>
+    <mat-card-title *ngIf="transactionType.holdamount">{{ 'labels.heading.Hold Amount' | translate }}</mat-card-title>
+    <mat-card-title *ngIf="transactionType.blockaccount">{{
+      'labels.heading.Block Savings Account' | translate
+    }}</mat-card-title>
 
     <form [formGroup]="manageSavingsAccountForm" (ngSubmit)="submit()">
-      <mat-card-content class="layout-column">
-        <mat-form-field>
+      <mat-card-content class="layout-row">
+        <mat-form-field class="flex-100">
           <mat-label>{{ 'labels.inputs.Reason' | translate }}</mat-label>
           <mat-select required formControlName="reasonForBlock">
             <mat-option *ngFor="let codeValue of reasonOptions" [value]="codeValue.id">
@@ -18,7 +20,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field class="flex-fill" (click)="transactionDatePicker.open()" *ngIf="transactionType.holdamount">
+        <mat-form-field class="flex-100" (click)="transactionDatePicker.open()" *ngIf="transactionType.holdamount">
           <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
           <input
             matInput
@@ -37,6 +39,7 @@
         </mat-form-field>
 
         <mifosx-input-amount
+          class="flex-100"
           [currency]="currency"
           [isRequired]="true"
           *ngIf="transactionType.holdamount"

src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html

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

src/app/system/codes/view-code/view-code.component.html

@@ -21,7 +21,9 @@
 
 <div class="container">
   <mat-card>
-    <mat-card-title>{{ codeData.name }}</mat-card-title>
+    <mat-card-title class="m-t-20 m-l-20"
+      ><h4>{{ codeData.name }}</h4></mat-card-title
+    >
 
     <form [formGroup]="codeValuesForm">
       <mat-card-content>

src/assets/styles/_misc.scss

@@ -72,3 +72,10 @@ div {
     grow 4s linear infinite,
     move 4s linear infinite;
 }
+
+mat-card-title {
+  font-weight: 600;
+  font-size: x-large;
+  padding-left: 20px;
+  padding-top: 20px;
+}