Use of Decimals to Display user setting to format numbers (#1695)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/account-transfers/view-account-transfer/view-account-transfer.component.html

@@ -12,7 +12,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Transaction Amount:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.currency.displaySymbol }} {{ viewAccountTransferData.transferAmount | number }} ({{ viewAccountTransferData.currency.code }})</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.currency.displaySymbol }} {{ viewAccountTransferData.transferAmount | formatNumber }} ({{ viewAccountTransferData.currency.code }})</span>
         </div>
 
         <div fxFlexFill>

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -125,12 +125,12 @@
 
     <ng-container matColumnDef="debit">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit </th>
-      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ journalEntry.amount | number }} </span></td>
+      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'DEBIT'"> {{ journalEntry.amount | formatNumber }} </span></td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit </th>
-      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ journalEntry.amount | number }} </span></td>
+      <td mat-cell *matCellDef="let journalEntry"><span *ngIf="journalEntry.entryType.value === 'CREDIT'"> {{ journalEntry.amount | formatNumber }} </span></td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/accounting/view-journal-entry/view-journal-entry.component.html

@@ -45,7 +45,7 @@
         <span *ngIf="data.journalEntry.entryType.value === 'DEBIT'">Debit</span>
       </th>
       <td>
-        {{ data.journalEntry.currency.displaySymbol }} {{ data.journalEntry.amount | number }}
+        {{ data.journalEntry.currency.displaySymbol }} {{ data.journalEntry.amount | formatNumber }}
       </td>
     </tr>
 

src/app/accounting/view-transaction/view-transaction.component.html

@@ -81,12 +81,12 @@
 
     <ng-container matColumnDef="debit">
       <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Debit </th>
-      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | number }} </span></td>
+      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }} </span></td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
       <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Credit </th>
-      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | number }} </span></td>
+      <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }} </span></td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/clients/clients-view/charges/view-charge/view-charge.component.html

@@ -104,7 +104,7 @@
 
         <ng-container matColumnDef="amount">
           <th mat-header-cell *matHeaderCellDef> Amount </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.amount | number }} </td>
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.amount | formatNumber }} </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html

@@ -36,7 +36,7 @@
 
       <ng-container matColumnDef="score">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Score </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.score | number }} </td>
+        <td mat-cell *matCellDef="let survey"> {{ survey.score | formatNumber }} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/clients/clients-view/general-tab/general-tab.component.html

@@ -9,13 +9,13 @@
             <p>
               No. Of Loan Cycles :{{clientSummary?.loanCycle}} <br />
               No. of Active Loans :{{clientSummary?.activeLoans}} <br />
-              Last Loan Amount :{{clientSummary?.lastLoanAmount | number}} <br />
+              Last Loan Amount :{{clientSummary?.lastLoanAmount | formatNumber}} <br />
             </p>
           </td>
           <td>
             <p>
               No. of Active Savings :{{clientSummary?.activeSavings}} <br />
-              Total Savings :{{clientSummary?.totalSavings | number}} <br />
+              Total Savings :{{clientSummary?.totalSavings | formatNumber}} <br />
             </p>
           </td>
         </tr>
@@ -54,22 +54,22 @@
 
     <ng-container matColumnDef="Due">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Due </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amount | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amount | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Paid">
       <th mat-header-cell class="r-amount" *matHeaderCellDef>Paid </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountPaid | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountPaid | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Waived">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Waived </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountWaived | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountWaived | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Outstanding">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Outstanding </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountOutstanding | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountOutstanding | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
@@ -128,12 +128,12 @@
     </ng-container>
     <ng-container matColumnDef="Loan Balance">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Loan Balance </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.loanBalance | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.loanBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Amount Paid">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Amount Paid </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountPaid | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.amountPaid | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Type">
@@ -203,12 +203,12 @@
 
     <ng-container matColumnDef="Loan Balance">
       <th mat-header-cell class="r-amount" *matHeaderCellDef>Loan Balance </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.loanBalance | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.loanBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Amount Paid">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Amount Paid </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Type">
@@ -265,7 +265,7 @@
 
     <ng-container matColumnDef="Balance">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
@@ -363,7 +363,7 @@
 
     <ng-container matColumnDef="Balance">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
@@ -455,7 +455,7 @@
 
     <ng-container matColumnDef="Balance">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
-      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let element"> {{element.accountBalance | formatNumber}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Actions">
@@ -640,17 +640,17 @@
 
     <ng-container matColumnDef="Quantity">
       <th mat-header-cell class="r-amount" *matHeaderCellDef>Quantity</th>
-      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.quantity | number }}</td>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.quantity | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="Total Value">
       <th mat-header-cell class="r-amount" *matHeaderCellDef>Total Value</th>
-      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.basePrice*element.quantity | number}}</td>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.basePrice*element.quantity | formatNumber}}</td>
     </ng-container>
 
     <ng-container matColumnDef="Total Collateral Value">
       <th mat-header-cell class="r-amount" *matHeaderCellDef>Total Collateral Value</th>
-      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.pctToBase*element.basePrice*element.quantity/100 | number}}</td>
+      <td mat-cell class="r-amount" *matCellDef="let element">{{ element.pctToBase*element.basePrice*element.quantity/100 | formatNumber}}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="collateralsColumns"></tr>

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

@@ -122,19 +122,19 @@
             <tr>
               <td>Maturity Amount</td>
               <td>
-                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.maturityAmount | number}}</span>
+                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.maturityAmount | formatNumber}}</span>
               </td>
             </tr>
             <tr>
               <td>Recurring Deposit Amount</td>
               <td>
-                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | number}}</span>
+                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | formatNumber}}</span>
               </td>
             </tr>
             <tr>
               <td>Deposits till Date</td>
               <td><span
-                  *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalDeposits | number}}</span>
+                  *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalDeposits | formatNumber}}</span>
                 <span
                   *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
               </td>
@@ -142,7 +142,7 @@
             <tr>
               <td>Withdrwals till Date</td>
               <td><span
-                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalWithdrawals | number}}</span>
+                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalWithdrawals | formatNumber}}</span>
                 <span
                   *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
               </td>
@@ -150,7 +150,7 @@
 
             <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
               <td >Interest Earned</td>
-              <td><span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalInterestEarned| number}}</span>
+              <td><span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalInterestEarned| formatNumber}}</span>
               </td>
             </tr>
 

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html

@@ -244,7 +244,7 @@
 
         <ng-container matColumnDef="amount">
           <th mat-header-cell *matHeaderCellDef> Amount </th>
-          <td mat-cell *matCellDef="let charge"> {{ charge.amount| number }} </td>
+          <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
         </ng-container>
 
         <ng-container matColumnDef="collectedon">

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html

@@ -104,7 +104,7 @@
 
     <ng-container matColumnDef="amount">
       <th mat-header-cell *matHeaderCellDef> Amount </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.amount| number }} </td>
+      <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="collectedon">

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html

@@ -244,7 +244,7 @@
 
       <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef> Amount </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.amount| number }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="collectedon">

src/app/loans/loans-view/account-details/account-details.component.html

@@ -93,7 +93,7 @@
 
         <div fxFlexFill *ngIf="loanDetails.canDefineInstallmentAmount">
             <span fxFlex="50%"> Fixed EMI amount</span>
-            <span fxFlex="50%"> {{loanDetails.fixedEmiAmount | number}} </span>
+            <span fxFlex="50%"> {{loanDetails.fixedEmiAmount | formatNumber}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isTopup">
@@ -108,7 +108,7 @@
 
         <div fxFlexFill *ngIf="loanDetails.isTopup">
             <span fxFlex="50%"> Topup closure amount</span>
-            <span fxFlex="50%"> {{loanDetails.topupAmount| number}} </span>
+            <span fxFlex="50%"> {{loanDetails.topupAmount| formatNumber}} </span>
         </div>
 
         <div fxFlexFill>

src/app/loans/loans-view/charges-tab/charges-tab.component.html

@@ -51,7 +51,7 @@
     <ng-container matColumnDef="outstanding">
       <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Outstanding </th>
       <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{
-        charge.amountOutstanding| number }} </td>
+        charge.amountOutstanding| formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">

src/app/loans/loans-view/general-tab/general-tab.component.html

@@ -10,7 +10,7 @@
               <b>Number of Repayments :</b>
             </td>
             <td fxFlex="25%" class="left">
-              {{loanDetails?.numberOfRepayments | number}}
+              {{loanDetails?.numberOfRepayments | formatNumber}}
             </td>
             <td fxFlex="25%">
               <b>Maturity Date :</b>

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html

@@ -25,7 +25,7 @@
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
-              {{ dataObject.principalPortion | number }}
+              {{ dataObject.principalPortion | formatNumber }}
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
@@ -33,7 +33,7 @@
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
-              {{ dataObject.interestPortion | number }}
+              {{ dataObject.interestPortion | formatNumber }}
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
@@ -41,7 +41,7 @@
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
-              {{ dataObject.feeChargesPortion | number }}
+              {{ dataObject.feeChargesPortion | formatNumber }}
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
@@ -49,7 +49,7 @@
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
-              {{ dataObject.penaltyChargesPortion | number }}
+              {{ dataObject.penaltyChargesPortion | formatNumber }}
             </div>
           </div>
 

src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html

@@ -25,7 +25,7 @@
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
-              {{ prepayData.principalPortion | number }}
+              {{ prepayData.principalPortion | formatNumber }}
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
@@ -33,7 +33,7 @@
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
-              {{ prepayData.interestPortion | number }}
+              {{ prepayData.interestPortion | formatNumber }}
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
@@ -41,7 +41,7 @@
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
-              {{ prepayData.feeChargesPortion | number }}
+              {{ prepayData.feeChargesPortion | formatNumber }}
             </div>
 
             <div fxFlex="50%" class="mat-body-strong">
@@ -49,7 +49,7 @@
             </div>
 
             <div fxFlex="50%" class="r-amount right-label">
-              {{ prepayData.penaltyChargesPortion | number }}
+              {{ prepayData.penaltyChargesPortion | formatNumber }}
             </div>
           </div>
 

src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html

@@ -43,18 +43,18 @@
             <tr>
               <td>Approved Amount</td>
               <td>
-                <span>{{dataObject.approvedPrincipal | number}}</span>
+                <span>{{dataObject.approvedPrincipal | formatNumber}}</span>
               </td>
             </tr>
             <tr>
               <td>Disburse Amount</td>
               <td>
-                <span>{{dataObject.principal | number}}</span>
+                <span>{{dataObject.principal | formatNumber}}</span>
               </td>
             </tr>
             <tr>
               <td>Arrears By</td>
-              <td>{{dataObject.summary.totalOverdue | number}}
+              <td>{{dataObject.summary.totalOverdue | formatNumber}}
                 <span *ngIf="dataObject.summary.totalOverdue < 0">Not Provided</span>
               </td>
             </tr>

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html

@@ -2,7 +2,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Maximum allowed outstanding balance:</span>
-    <span fxFlex="60%">{{ loanDetails.maxOutstandingLoanBalance | number }}</span>
+    <span fxFlex="60%">{{ loanDetails.maxOutstandingLoanBalance | formatNumber }}</span>
   </div>
 
   <h3>Loan Tranche Details</h3>

src/app/loans/loans-view/loans-view.component.html

@@ -31,26 +31,26 @@
               </span>
               <span class="loans-overview"
                 *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.pastDueDays > 0">
-                Past Due Days : {{loanDetailsData?.delinquent.pastDueDays | number}}<br />
+                Past Due Days : {{loanDetailsData?.delinquent.pastDueDays | formatNumber}}<br />
               </span>
               <span class="loans-overview" *ngIf="loanDetailsData.delinquent && loanDetailsData.delinquent.delinquentDays > 0
                 && loanDetailsData.delinquent.pastDueDays != loanDetailsData.delinquent.delinquentDays">
-                Delinquent Days : {{loanDetailsData?.delinquent.delinquentDays | number}}
+                Delinquent Days : {{loanDetailsData?.delinquent.delinquentDays | formatNumber}}
               </span>
             </div>
 
             <div *ngIf="loanDetailsData.summary" class="loans-overview mat-typography" fxFlex="40%">
               <h3> Loan Account OverView </h3>
               <span>Current Balance: {{loanDetailsData.currency.displaySymbol}}
-                {{loanDetailsData.summary.totalOutstanding | number}}</span><br>
-              <span *ngIf="loanDetailsData.inArrears">Arrears By: {{loanDetailsData.summary.totalOverdue | number}}
+                {{loanDetailsData.summary.totalOutstanding | formatNumber}}</span><br>
+              <span *ngIf="loanDetailsData.inArrears">Arrears By: {{loanDetailsData.summary.totalOverdue | formatNumber}}
                 <span *ngIf="!(loanDetailsData.summary.totalOverdue>=0)">Not Provided</span>
               </span><br>
               <span *ngIf="loanDetailsData.inArrears">Arrears Since: {{loanDetailsData.summary.overdueSinceDate |
                 dateFormat}}
               </span>
               <span *ngIf="loanDetailsData.totalOverpaid && loanDetailsData.totalOverpaid > 0">
-                Overpaid By: {{loanDetailsData.currency.displaySymbol}} {{loanDetailsData.totalOverpaid | number}}
+                Overpaid By: {{loanDetailsData.currency.displaySymbol}} {{loanDetailsData.totalOverpaid | formatNumber}}
               </span>
             </div>
 

src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.html

@@ -10,38 +10,38 @@
 
     <ng-container matColumnDef="principalDue">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Principal Due </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.principalDue | number }} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalPrincipalExpected | number }} </b> </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.principalDue | formatNumber }} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalPrincipalExpected | formatNumber }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="balanceOfLoan">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Balance Of Loan </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | number }} </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | formatNumber }} </td>
       <td mat-footer-cell *matFooterCellDef> &nbsp; </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Interest </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.interestOriginalDue | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalInterestCharged | number }} </b> </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.interestOriginalDue | formatNumber}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalInterestCharged | formatNumber }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="fees">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Fees </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.feeChargesDue | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalFeeChargesCharged | number }} </b> </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.feeChargesDue | formatNumber}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalFeeChargesCharged | formatNumber }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="penalties">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Penalties </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.penaltyChargesDue | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalPenaltyChargesCharged | number }} </b> </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.penaltyChargesDue | formatNumber}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalPenaltyChargesCharged | formatNumber }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="outstanding">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Outstanding </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | number}} </td>
-      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalRepaymentExpected | number }} </b> </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | formatNumber}} </td>
+      <td mat-footer-cell *matFooterCellDef> <b> {{ originalScheduleDetails.totalRepaymentExpected | formatNumber }} </b> </td>
     </ng-container>
 
     <!-- Header row first group -->

src/app/loans/loans-view/overdue-charges-tab/overdue-charges-tab.component.html

@@ -14,7 +14,7 @@
 
     <ng-container matColumnDef="amount">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount </th>
-      <td mat-cell *matCellDef="let charge"> {{ charge.amount| number }} </td>
+      <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="collectedon">

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html

@@ -36,62 +36,62 @@
 
     <ng-container matColumnDef="balanceOfLoan">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance Of Loan </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalLoanBalanceOutstanding | number }} </td>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalLoanBalanceOutstanding | formatNumber }} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
     </ng-container>
 
     <ng-container matColumnDef="principalDue">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Principal Due </th>
-      <td mat-cell class="check r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalDue | number }} </td>
+      <td mat-cell class="check r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.principalDue | formatNumber }} </td>
       <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency }}</b>  </td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Interest </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.interestOriginalDue | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.interestOriginalDue | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="fees">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Fees </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.feeChargesDue | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.feeChargesDue | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="penalties">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Penalties </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.penaltyChargesDue | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.penaltyChargesDue | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPenaltyChargesCharged | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="due">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Due </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalDueForPeriod | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalDueForPeriod | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="paid">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Paid </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidForPeriod | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidForPeriod | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepayment | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="inadvance">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> In advance </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidInAdvanceForPeriod | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidInAdvanceForPeriod | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidInAdvance | currency }} </b> </td>
     </ng-container>
 
     <ng-container matColumnDef="late">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Late </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidLateForPeriod | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalPaidLateForPeriod | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPaidLate | currency }} </b> </td>
     </ng-container>
 
     <ng-container *ngIf="isWaived">
       <ng-container matColumnDef="waived">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Waived </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalWaivedForPeriod | number}} </td>
+        <td mat-cell class="r-amount" *matCellDef="let ele" [ngClass]="installmentStyle(ele)"> {{ ele.totalWaivedForPeriod | formatNumber}} </td>
         <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalWaived | currency }} </b> </td>
       </ng-container>
     </ng-container>
@@ -106,7 +106,7 @@
 
     <ng-container matColumnDef="outstanding">
       <th mat-header-cell class="r-amount" *matHeaderCellDef> Outstanding </th>
-      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | number}} </td>
+      <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.totalOutstandingForPeriod | formatNumber}} </td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalOutstanding | currency }} </b> </td>
     </ng-container>
 
@@ -152,25 +152,25 @@
 
       <ng-container matColumnDef="balanceOfLoan">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance Of Loan </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | number }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.principalLoanBalanceOutstanding | formatNumber }} </td>
         <td mat-footer-cell class="r-amount" *matFooterCellDef> &nbsp; </td>
       </ng-container>
 
       <ng-container matColumnDef="principalDue">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Principal Due </th>
-        <td mat-cell class="check r-amount" *matCellDef="let ele"> {{ ele.principalDue | number }} </td>
+        <td mat-cell class="check r-amount" *matCellDef="let ele"> {{ ele.principalDue | formatNumber }} </td>
         <td mat-footer-cell class="check r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalPrincipalExpected | currency }}</b>  </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Interest </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.interestOriginalDue | number}} </td>
+        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.interestOriginalDue | formatNumber}} </td>
         <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalInterestCharged | currency }} </b> </td>
       </ng-container>
 
       <ng-container matColumnDef="fees">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Fees </th>
-        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.feeChargesDue | number}} </td>
+        <td mat-cell class="r-amount" *matCellDef="let ele"> {{ ele.feeChargesDue | formatNumber}} </td>
         <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalFeeChargesCharged | currency }} </b> </td>
       </ng-container>
 
@@ -178,10 +178,10 @@
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Installment Amount </th>
         <td mat-cell class="r-amount" *matCellDef="let ele">
           <span *ngIf="!ele.changed">
-            {{ ele.totalDueForPeriod | number}}
+            {{ ele.totalDueForPeriod | formatNumber}}
           </span>
           <span *ngIf="ele.changed" class="amount-changed">
-            <b>{{ ele.totalDueForPeriod | number}}</b>
+            <b>{{ ele.totalDueForPeriod | formatNumber}}</b>
           </span>
         </td>
         <td mat-footer-cell class="r-amount" *matFooterCellDef> <b> {{ repaymentScheduleDetails.totalRepaymentExpected | currency }} </b> </td>

src/app/loans/loans-view/transactions-tab/transactions-tab.component.html

@@ -41,32 +41,32 @@
 
       <ng-container matColumnDef="amount">
         <th mat-header-cell class="center" *matHeaderCellDef> Amount </th>
-        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.amount | number }} </td>
+        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.amount | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="principal">
         <th mat-header-cell class="center" *matHeaderCellDef> Breakdown </th>
-        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.principalPortion | number }} </td>
+        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.principalPortion | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
         <th mat-header-cell *matHeaderCellDef> </th>
-        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.interestPortion | number }} </td>
+        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.interestPortion | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="fee">
         <th mat-header-cell *matHeaderCellDef>  </th>
-        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.feeChargesPortion | number }} </td>
+        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.feeChargesPortion | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="penalties">
         <th mat-header-cell *matHeaderCellDef>  </th>
-        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.penaltyChargesPortion | number }} </td>
+        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.penaltyChargesPortion | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="loanBalance">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Loan Balance </th>
-        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.outstandingLoanBalance | number }} </td>
+        <td mat-cell class="r-amount td-min-space" *matCellDef="let transaction" [ngClass]="loanTransactionColor(transaction)"> {{ transaction.outstandingLoanBalance | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">

src/app/loans/loans-view/view-charge/view-charge.component.html

@@ -101,7 +101,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amount | number }}
+          {{ chargeData.amount | formatNumber }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -109,7 +109,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountPaid | number }}
+          {{ chargeData.amountPaid | formatNumber }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -117,7 +117,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountWaived | number }}
+          {{ chargeData.amountWaived | formatNumber }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -125,7 +125,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountOutstanding | number }}
+          {{ chargeData.amountOutstanding | formatNumber }}
         </div>
 
       </div>

src/app/organization/standing-instructions-history/standing-instructions-history.component.html

@@ -3,9 +3,9 @@
   <mat-card *ngIf="!isCollapsed">
 
     <form [formGroup]="instructionForm" (ngSubmit)="search()">
-      
+
       <mat-card-content>
-        
+
         <div fxLayout="column">
 
           <mat-form-field>
@@ -54,7 +54,7 @@
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #toDatePicker></mat-datepicker>
           </mat-form-field>
-          
+
         </div>
 
       </mat-card-content>
@@ -70,7 +70,7 @@
     </form>
 
   </mat-card>
-  
+
 </div>
 
 <div class="container output" *ngIf="isCollapsed">
@@ -112,7 +112,7 @@
 
       <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount </th>
-        <td mat-cell *matCellDef="let instruction"> {{ instruction.amount | number }} </td>
+        <td mat-cell *matCellDef="let instruction"> {{ instruction.amount | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">

src/app/organization/tellers/cashiers/transactions/transactions.component.html

@@ -46,7 +46,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
-            {{ cashierData.netCash | number }} [{{currencySelector.value}}]
+            {{ cashierData.netCash | formatNumber }} [{{currencySelector.value}}]
           </div>
 
         </div>
@@ -94,23 +94,23 @@
         </ng-container>
 
         <ng-container matColumnDef="allocation">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Allocation ({{cashierData.sumCashAllocation | number}}) </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Allocate Cash" ? (transaction.txnAmount | number) : '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Allocation ({{cashierData.sumCashAllocation | formatNumber}}) </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Allocate Cash" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="cashIn">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash In ({{cashierData.sumInwardCash | number}})  </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash In" ? (transaction.txnAmount | number) : '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash In ({{cashierData.sumInwardCash | formatNumber}})  </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash In" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="cashOut">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Out ({{cashierData.sumOutwardCash | number}}) </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash Out" ? (transaction.txnAmount | number) : '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Out ({{cashierData.sumOutwardCash | formatNumber}}) </th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash Out" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="settlement">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Settlement ({{cashierData.sumCashSettlement | number}})</th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Settle Cash" ? (transaction.txnAmount | number) : '-' }} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Settlement ({{cashierData.sumCashSettlement | formatNumber}})</th>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Settle Cash" ? (transaction.txnAmount | formatNumber) : '-' }} </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/pipes/format-number.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FormatNumberPipe } from './format-number.pipe';
+
+describe('FormatNumberPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FormatNumberPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/format-number.pipe.ts

@@ -0,0 +1,24 @@
+import { DecimalPipe } from '@angular/common';
+import { Pipe, PipeTransform } from '@angular/core';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Pipe({
+  name: 'formatNumber'
+})
+export class FormatNumberPipe implements PipeTransform {
+
+  constructor(private decimalFormat: DecimalPipe,
+    private settingsService: SettingsService) {
+  }
+
+  transform(value: string | number, ...args: unknown[]): string {
+    if (!value) {
+     return '';
+    }
+    const locale = this.settingsService.language.code;
+    const decimals = this.settingsService.decimals;
+    const format = `1.${decimals}-${decimals}`;
+    return this.decimalFormat.transform(value, format, locale);
+  }
+
+}

src/app/pipes/pipes.module.ts

@@ -9,13 +9,14 @@ import { UrlToStringPipe } from './url-to-string.pipe';
 import { DateFormatPipe } from './date-format.pipe';
 import { DatetimeFormatPipe } from './datetime-format.pipe';
 import { ExternalIdentifierPipe } from './external-identifier.pipe';
+import { FormatNumberPipe } from './format-number.pipe';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe],
-  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe],
-  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe]
+  declarations: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe ],
+  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe ],
+  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe, ExternalIdentifierPipe, FormatNumberPipe ]
 })
 export class PipesModule { }

src/app/products/charges/charges.component.html

@@ -42,7 +42,7 @@
 
       <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount </th>
-        <td mat-cell *matCellDef="let charge" class="r-amount"> {{ charge.amount | number }} </td>
+        <td mat-cell *matCellDef="let charge" class="r-amount"> {{ charge.amount | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="penalty">

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

@@ -46,7 +46,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Currency in Multiples Of:</span>
-          <span fxFlex="60%">{{ fixedDepositProductData.currency.inMultiplesOf | number}}</span>
+          <span fxFlex="60%">{{ fixedDepositProductData.currency.inMultiplesOf | formatNumber}}</span>
         </div>
 
         <h3 class="mat-h3" fxFlexFill>Terms</h3>
@@ -125,7 +125,7 @@
 
         <div fxFlexFill *ngIf="fixedDepositProductData.minBalanceForInterestCalculation">
           <span fxFlex="40%">Balance Required For Interest Calculation:</span>
-          <span fxFlex="60%">{{ fixedDepositProductData.minBalanceForInterestCalculation | number }}</span>
+          <span fxFlex="60%">{{ fixedDepositProductData.minBalanceForInterestCalculation | formatNumber }}</span>
         </div>
 
         <div fxFlexFill>
@@ -329,7 +329,7 @@
             <ng-container matColumnDef="amount">
               <th mat-header-cell *matHeaderCellDef> Amount </th>
               <td mat-cell *matCellDef="let charge">
-                {{ charge.amount | number }}
+                {{ charge.amount | formatNumber }}
               </td>
             </ng-container>
 

src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.html

@@ -52,7 +52,7 @@
 
           <ng-container matColumnDef="interestRate">
             <th mat-header-cell *matHeaderCellDef matTooltip="Annualised Interest rate" mat-sort-header> Interest Rate </th>
-            <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.interestRate | number }} </td>
+            <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.interestRate | formatNumber }} </td>
           </ng-container>
 
           <ng-container matColumnDef="isDifferential">

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

@@ -75,9 +75,9 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Principal:</span>
-    <span fxFlex="60%">{{ loanProduct.principal | number }}
-      (Min {{ (loanProduct.minPrincipal ? loanProduct.minPrincipal : loanProduct.principal) | number }}
-      : Max {{ (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal) | number }})
+    <span fxFlex="60%">{{ loanProduct.principal | formatNumber }}
+      (Min {{ (loanProduct.minPrincipal ? loanProduct.minPrincipal : loanProduct.principal) | formatNumber }}
+      : Max {{ (loanProduct.maxPrincipal ? loanProduct.maxPrincipal : loanProduct.principal) | formatNumber }})
     </span>
   </div>
 
@@ -88,9 +88,9 @@
 
   <div fxFlexFill *ngIf="loanProduct.allowApprovedDisbursedAmountsOverApplied">
     <span fxFlex="40%">Over Applied Amount:</span>
-    <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'percentage'">{{ loanProduct.overAppliedNumber | number
+    <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'percentage'">{{ loanProduct.overAppliedNumber | formatNumber
       }} %</span>
-    <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'flat'">{{ loanProduct.overAppliedNumber | number }} {{
+    <span fxFlex="60%" *ngIf="loanProduct.overAppliedCalculationType === 'flat'">{{ loanProduct.overAppliedNumber | formatNumber }} {{
       loanProduct.currencyCode }}</span>
   </div>
 

src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html

@@ -26,7 +26,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ taxComponentData.percentage | number }} %
+          {{ taxComponentData.percentage | formatNumber }} %
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="taxComponentData.debitAccountType">

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

@@ -47,7 +47,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Currency in Multiples Of:</span>
-          <span fxFlex="60%">{{ recurringDepositProduct.currency.inMultiplesOf | number}}</span>
+          <span fxFlex="60%">{{ recurringDepositProduct.currency.inMultiplesOf | formatNumber}}</span>
         </div>
 
         <h3 class="mat-h3" fxFlexFill>Terms</h3>
@@ -330,7 +330,7 @@
             <ng-container matColumnDef="amount">
               <th mat-header-cell *matHeaderCellDef> Amount </th>
               <td mat-cell *matCellDef="let charge">
-                {{ charge.amount | number }}
+                {{ charge.amount | formatNumber }}
               </td>
             </ng-container>
 

src/app/savings/savings-account-view/savings-account-view.component.html

@@ -113,7 +113,7 @@
               <td>Interest On Overdraft</td>
               <td>
                 {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalOverdraftInterestDerived
-                | number}}</td>
+                | formatNumber}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
               <td>Overdraft Interest Not Posted</td>
@@ -122,7 +122,7 @@
             </tr>
             <tr>
               <td>Nominal Interest Rate</td>
-              <td>{{savingsAccountData.nominalAnnualInterestRate | number}} %</td>
+              <td>{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
             </tr>
             <tr>
               <td>Interest Compounding Period</td>
@@ -167,28 +167,28 @@
             </tr>
             <tr *ngIf="savingsAccountData.annualFee">
               <td>Annual Fee</td>
-              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.annualFee.amount | number}}
+              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.annualFee.amount | formatNumber}}
               </td>
             </tr>
             <tr *ngIf="savingsAccountData.allowOverdraft">
               <td>Over Draft Limit</td>
-              <td>{{savingsAccountData.overdraftLimit | number}}</td>
+              <td>{{savingsAccountData.overdraftLimit | formatNumber}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.allowOverdraft">
               <td>Min Overdraft Required for Interest Calculation</td>
-              <td>{{savingsAccountData.minOverdraftForInterestCalculation | number}}</td>
+              <td>{{savingsAccountData.minOverdraftForInterestCalculation | formatNumber}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
               <td>Min Balance Required for Interest Calculation</td>
-              <td>{{savingsAccountData.minBalanceForInterestCalculation | number}}</td>
+              <td>{{savingsAccountData.minBalanceForInterestCalculation | formatNumber}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.minRequiredBalance">
               <td>Minimum Required Balance</td>
-              <td>{{savingsAccountData.minRequiredBalance | number}}</td>
+              <td>{{savingsAccountData.minRequiredBalance | formatNumber}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
               <td>Enforce Minimum Required Balance</td>
-              <td>{{savingsAccountData.enforceMinRequiredBalance | number}}</td>
+              <td>{{savingsAccountData.enforceMinRequiredBalance | formatNumber}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
               <td>Interest Recalculation Date</td>
@@ -196,7 +196,7 @@
             </tr>
             <tr *ngIf="savingsAccountData.onHoldFunds">
               <td>On Hold Funds</td>
-              <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | number}}</a></td>
+              <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | formatNumber}}</a></td>
             </tr>
             <tr *ngIf="savingsAccountData.withHoldTax">
               <td>Withhold Tax Group</td>
@@ -255,7 +255,7 @@
               </tr>
               <tr>
                 <td>Nominal Interest Rate</td>
-                <td>{{savingsAccountData.nominalAnnualInterestRate | number}} %</td>
+                <td>{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
               </tr>
             </tbody>
           </table>
@@ -291,7 +291,7 @@
               <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
                 <td>Total Interest Earned</td>
                 <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned
-                  | number}}</td>
+                  | formatNumber}}</td>
               </tr>
             </tbody>
           </table>

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -31,17 +31,17 @@
 
       <ng-container matColumnDef="debit">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Debit </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ isDebit(transaction.transactionType) ? (transaction.amount | number) : 'N/A'}} </td>
+        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Credit </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ !isDebit(transaction.transactionType) ? (transaction.amount | number) : 'N/A' }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ !isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
         <th mat-header-cell class="r-amount" *matHeaderCellDef> Balance </th>
-        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ transaction.runningBalance | number }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let transaction"> {{ transaction.runningBalance | formatNumber }} </td>
       </ng-container>
 
       <ng-container matColumnDef="viewReciept">

src/app/savings/savings-account-view/view-charge/view-charge.component.html

@@ -91,7 +91,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amount | number }}
+          {{ chargeData.amount | formatNumber }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -99,7 +99,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountPaid | number }}
+          {{ chargeData.amountPaid | formatNumber }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -107,7 +107,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountWaived | number }}
+          {{ chargeData.amountWaived | formatNumber }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -115,7 +115,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.amountOutstanding | number }}
+          {{ chargeData.amountOutstanding | formatNumber }}
         </div>
 
       </div>

src/app/settings/settings.component.html

@@ -15,21 +15,6 @@
 
       <div fxLayout="column">
 
-        <mat-form-field>
-          <mat-label>Name of the Organization</mat-label>
-          <input matInput>
-        </mat-form-field>
-
-        <mat-form-field>
-          <mat-label>Description</mat-label>
-          <textarea matInput></textarea>
-        </mat-form-field>
-
-        <mat-form-field>
-          <mat-label>Summary</mat-label>
-          <textarea matInput></textarea>
-        </mat-form-field>
-
         <mat-form-field>
           <mat-label>Default Language</mat-label>
           <mat-select [formControl]="language" [compareWith]="compareOptions">
@@ -48,6 +33,15 @@
           </mat-select>
         </mat-form-field>
 
+        <mat-form-field>
+          <mat-label>Decimals to Display</mat-label>
+          <mat-select [formControl]="decimalsToDisplay">
+            <mat-option *ngFor="let decimalOpt of decimals" [value]="decimalOpt">
+              {{ decimalOpt }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
       </div>
 
     </mat-expansion-panel>

src/app/settings/settings.component.ts

@@ -34,6 +34,18 @@ export class SettingsComponent implements OnInit {
     'MM-dd-yy',
     'yyyy-MM-dd'
   ];
+    /** Decimals. */
+    decimals: string[] = [
+      '0',
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+   ];
   /** Placeholder for fonts. */
   fonts: any;
 
@@ -41,6 +53,8 @@ export class SettingsComponent implements OnInit {
   language = new FormControl('');
   /** Date Format Setting */
   dateFormat =  new FormControl('');
+  /** Decimals to Display Setting */
+  decimalsToDisplay =  new FormControl('');
 
   /**
    * @param {SettingsService} settingsService Settings Service
@@ -50,6 +64,7 @@ export class SettingsComponent implements OnInit {
   ngOnInit() {
     this.language.patchValue(this.settingsService.language);
     this.dateFormat.patchValue(this.settingsService.dateFormat);
+    this.decimalsToDisplay.patchValue(this.settingsService.decimals);
     this.buildDependencies();
   }
 
@@ -63,6 +78,9 @@ export class SettingsComponent implements OnInit {
     this.dateFormat.valueChanges.subscribe((dateFormat: string) => {
       this.settingsService.setDateFormat(dateFormat);
     });
+    this.decimalsToDisplay.valueChanges.subscribe((decimals: string) => {
+      this.settingsService.setDecimalToDisplay(decimals);
+    });
   }
 
   /**

src/app/settings/settings.service.ts

@@ -40,6 +40,14 @@ export class SettingsService {
     localStorage.setItem('mifosXLanguage', JSON.stringify(language));
   }
 
+  /**
+   * Sets decimals to Display throughout the app.
+   * @param {string} decimals.
+   */
+  setDecimalToDisplay(decimals: string) {
+    localStorage.setItem('mifosXDecimalsToDisplay', decimals);
+  }
+
   setDefaultLanguage() {
     const defaultLanguage = environment.defaultLanguage ? environment.defaultLanguage : 'en-US';
     this.setLanguage({
@@ -113,6 +121,16 @@ export class SettingsService {
     return JSON.parse(localStorage.getItem('mifosXLanguage'));
   }
 
+  /**
+   * Returns Decimals to Display setting
+   */
+  get decimals() {
+    if (!localStorage.getItem('mifosXDecimalsToDisplay')) {
+      return '2';
+    }
+    return localStorage.getItem('mifosXDecimalsToDisplay');
+  }
+
   /**
    * Returns list of default server
    */

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -30,7 +30,7 @@
           {{dataObject.data[0].row[i] | datetimeFormat}}
         </span>
         <span *ngSwitchCase="'INTEGER' || 'DECIMAL'">
-          {{dataObject.data[0].row[i] | number}}
+          {{dataObject.data[0].row[i] | formatNumber}}
         </span>
         <span *ngSwitchCase="'TEXT'" class="long-text">
           {{dataObject.data[0].row[i]}}

src/app/system/manage-jobs/cob-workflow/cob-workflow.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { SystemService } from 'app/system/system.service';
 
 @Component({
@@ -7,10 +7,10 @@ import { SystemService } from 'app/system/system.service';
   styleUrls: ['./cob-workflow.component.scss']
 })
 export class CobWorkflowComponent implements OnInit, OnDestroy {
-
+  /** Wait time between API status calls 30 seg */
   waitTime = 30000;
-
-  isCatchUpRunning = false;
+  /** Process running flag */
+  @Input() isCatchUpRunning = true;
   /** Timer to refetch COB Catch-Up status every 5 seconds */
   timer: any;
 
@@ -18,6 +18,7 @@ export class CobWorkflowComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     setTimeout(() => { this.getCOBCatchUpStatus(); }, this.waitTime);
+    this.getCOBCatchUpStatus();
   }
 
   ngOnDestroy() {

src/app/system/manage-jobs/manage-jobs.component.html

@@ -1,6 +1,6 @@
 <mat-card class="container-card">
   <mat-card-content>
-    <mat-tab-group #tabGroup mat-align-tabs="center">
+    <mat-tab-group #tabGroup mat-align-tabs="center" (selectedTabChange)="onJobTabChange($event)">
       <mat-tab label="Scheduler Jobs">
         <mifosx-manage-scheduler-jobs></mifosx-manage-scheduler-jobs>
       </mat-tab>
@@ -8,7 +8,7 @@
         <mifosx-workflow-jobs></mifosx-workflow-jobs>
       </mat-tab>
       <mat-tab label="COB">
-        <mifosx-cob-workflow></mifosx-cob-workflow>
+        <mifosx-cob-workflow [isCatchUpRunning]="isCatchUpRunning"></mifosx-cob-workflow>
       </mat-tab>
     </mat-tab-group>
 

src/app/system/manage-jobs/manage-jobs.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { MatTabChangeEvent } from '@angular/material/tabs';
+import { SystemService } from '../system.service';
 
 @Component({
   selector: 'mifosx-manage-jobs',
@@ -6,10 +8,20 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./manage-jobs.component.scss']
 })
 export class ManageJobsComponent implements OnInit {
+  /** Process running flag */
+  isCatchUpRunning = true;
 
-  constructor() { }
+  constructor(private systemService: SystemService) { }
 
   ngOnInit(): void {
   }
 
+  onJobTabChange(event: MatTabChangeEvent) {
+    if (event.index === 2) {
+      this.systemService.getCOBCatchUpStatus().subscribe((response: any) => {
+        this.isCatchUpRunning = response.isCatchUpRunning;
+      });
+    }
+  }
+
 }

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html

@@ -2,7 +2,7 @@
     <div #schedulerStatus>
     <h2 class="no-m">Scheduler Status:<span class="m-l-20 m-r-20">{{ schedulerActive ? 'Active' : 'Inactive' }}</span></h2>
     </div>
-    <button mat-raised-button class="suspend">
+    <button mat-raised-button class="suspend" (click)="suspendScheduler()" *ngIf="schedulerActive">
       <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
       Suspend
     </button>

src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html

@@ -49,7 +49,7 @@
 
         <ng-container matColumnDef="amount">
           <th mat-header-cell *matHeaderCellDef> Amount </th>
-          <td mat-cell *matCellDef="let loan"> {{ loan.principal | number}} </td>
+          <td mat-cell *matCellDef="let loan"> {{ loan.principal | formatNumber}} </td>
         </ng-container>
 
         <ng-container matColumnDef="loanPurpose">

src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html

@@ -45,7 +45,7 @@
 
     <ng-container matColumnDef="principal">
       <th mat-header-cell *matHeaderCellDef> Principal </th>
-      <td mat-cell *matCellDef="let loan"> {{loan.principal | number}} </td>
+      <td mat-cell *matCellDef="let loan"> {{loan.principal | formatNumber}} </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>