fix: Display issues

This commit is contained in:
Jose Alberto Hernandez
2025-06-16 13:18:18 -05:00
parent d748bfb0f5
commit a4f1155404
8 changed files with 223 additions and 202 deletions
@@ -1,9 +1,7 @@
<div class="tab-container mat-typography">
<div class="header-row">
<h3 class="mat-subheading-2">
{{ 'labels.heading.Identities' | translate }}
</h3>
<h3>{{ 'labels.heading.Identities' | translate }}</h3>
<div class="layout-row align-flex-end">
<button
mat-raised-button
color="primary"
@@ -19,8 +19,8 @@
>
<mat-divider class="flex-98"></mat-divider>
<div class="flex-fill layout-row-wrap responsive-column gap-2percent" [formGroupName]="chartIndex">
<div class="flex-98 layout-row align-end">
<div class="flex-fill layout-row-wrap responsive-column" [formGroupName]="chartIndex">
<div class="flex-100" align="end">
<button
type="button"
mat-icon-button
@@ -33,12 +33,17 @@
</button>
</div>
<mat-form-field class="flex-fill flex-32">
<mat-form-field class="flex-28 m-r-5">
<mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
<input matInput formControlName="name" required />
</mat-form-field>
<mat-form-field class="flex-fill flex-31" (click)="validFromDatePicker.open()">
<mat-form-field class="flex-70">
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
<textarea matInput formControlName="description" required></textarea>
</mat-form-field>
<mat-form-field class="flex-48 m-r-5" (click)="validFromDatePicker.open()">
<mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
<input
matInput
@@ -56,19 +61,14 @@
</mat-error>
</mat-form-field>
<mat-form-field class="flex-fill" (click)="endDatePicker.open()">
<mat-form-field class="flex-48 m-r-5" (click)="endDatePicker.open()">
<mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate" />
<mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
<mat-datepicker #endDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field class="flex-fill">
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
<textarea matInput formControlName="description" required></textarea>
</mat-form-field>
<div class="flex-31 layout-row align-between align-items-center">
<div class="flex-100 layout-row align-between align-items-center">
<mat-checkbox labelPosition="before" formControlName="isPrimaryGroupingByAmount">
{{ 'labels.inputs.Is primary grouping by amount?' | translate }}
</mat-checkbox>
@@ -16,8 +16,8 @@
>
<mat-divider class="flex-98"></mat-divider>
<div class="flex-fill layout-row-wrap responsive-column gap-2percent" [formGroupName]="chartIndex">
<div class="flex-98 layout-row align-end">
<div class="flex-fill layout-row-wrap responsive-column" [formGroupName]="chartIndex">
<div class="flex-100" align="end">
<button
type="button"
mat-icon-button
@@ -30,18 +30,18 @@
</button>
</div>
<mat-form-field class="flex-fill flex-32">
<mat-form-field class="flex-28 m-r-5">
<mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
<input
matInput
formControlName="name"
matTooltip="{{ 'tooltips.The name is a unique identifier for the chart' | translate }}"
required
/>
<input matInput formControlName="name" required />
</mat-form-field>
<mat-form-field class="flex-fill flex-31" (click)="validFromDatePicker.open()">
<mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
<mat-form-field class="flex-70">
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
<textarea matInput formControlName="description" required></textarea>
</mat-form-field>
<mat-form-field class="flex-48 m-r-5" (click)="validFromDatePicker.open()">
<mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
<input
matInput
[min]="minDate"
@@ -53,27 +53,18 @@
<mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
<mat-datepicker #validFromDatePicker></mat-datepicker>
<mat-error>
{{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
{{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field class="flex-fill flex-31" (click)="endDatePicker.open()">
<mat-form-field class="flex-48 m-r-5" (click)="endDatePicker.open()">
<mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate" />
<mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
<mat-datepicker #endDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field class="flex-fill flex-65">
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
<textarea
matInput
formControlName="description"
matTooltip="{{ 'tooltips.The description is used to provide additional information' | translate }}"
></textarea>
</mat-form-field>
<div class="flex-31 layout-row align-between align-items-center">
<mat-checkbox labelPosition="before" formControlName="isPrimaryGroupingByAmount">
{{ 'labels.inputs.Is primary grouping by amount?' | translate }}
@@ -1,49 +1,49 @@
<div class="responsive-column">
<h2 class="mat-h2 flex-fill">{{ savingProduct.name }}</h2>
<h2 class="mat-h2 flex-100">{{ savingProduct.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 layout-row">
<mat-divider class="flex-100"></mat-divider>
<div class="flex-100 layout-row">
<span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
<span class="flex-60">{{ savingProduct.shortName }}</span>
</div>
<div class="flex-fill layout-row" *ngIf="savingProduct.description">
<div class="flex-100 layout-row" *ngIf="savingProduct.description">
<span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
<span class="flex-60">{{ savingProduct.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 layout-row">
<mat-divider class="flex-100"></mat-divider>
<div class="flex-100 layout-row">
<span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
<span class="flex-60">{{
savingProduct.currencyCode | find: savingProductsTemplate.currencyOptions : 'code' : '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">{{ savingProduct.digitsAfterDecimal }}</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">{{ savingProduct.inMultiplesOf }}</span>
</div>
<h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Terms' | translate }}</h3>
<h3 class="mat-h3 flex-100">{{ 'labels.inputs.Terms' | translate }}</h3>
<mat-divider class="flex-fill"></mat-divider>
<div class="flex-fill layout-row">
<mat-divider class="flex-100"></mat-divider>
<div class="flex-100 layout-row">
<span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
<span class="flex-60">{{ savingProduct.nominalAnnualInterestRate | formatNumber }} %</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">{{
savingProduct.interestCompoundingPeriodType
@@ -52,7 +52,7 @@
}}</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">{{
savingProduct.interestPostingPeriodType
@@ -61,7 +61,7 @@
}}</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">{{
savingProduct.interestCalculationType
@@ -70,7 +70,7 @@
}}</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">{{
savingProduct.interestCalculationDaysInYearType
@@ -79,15 +79,15 @@
}}</span>
</div>
<h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Settings' | translate }}</h3>
<h3 class="mat-h3 flex-100">{{ 'labels.inputs.Settings' | translate }}</h3>
<mat-divider class="flex-fill"></mat-divider>
<div class="flex-fill layout-row" *ngIf="savingProduct.minRequiredOpeningBalance">
<mat-divider class="flex-100"></mat-divider>
<div class="flex-100 layout-row" *ngIf="savingProduct.minRequiredOpeningBalance">
<span class="flex-40">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
<span class="flex-60">{{ savingProduct.minRequiredOpeningBalance | formatNumber }}</span>
</div>
<div class="flex-fill layout-row" *ngIf="savingProduct.lockinPeriodFrequency">
<div class="flex-100 layout-row" *ngIf="savingProduct.lockinPeriodFrequency">
<span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
<span class="flex-60">{{
savingProduct.lockinPeriodFrequency +
@@ -97,64 +97,64 @@
}}</span>
</div>
<div class="flex-fill layout-row">
<div class="flex-100 layout-row">
<span class="flex-40">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
<span class="flex-60">{{ savingProduct.withdrawalFeeForTransfers | yesNo }}</span>
</div>
<div class="flex-fill layout-row" *ngIf="savingProduct.minBalanceForInterestCalculation">
<div class="flex-100 layout-row" *ngIf="savingProduct.minBalanceForInterestCalculation">
<span class="flex-40">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}:</span>
<span class="flex-60">{{ savingProduct.minBalanceForInterestCalculation | formatNumber }}</span>
</div>
<div class="flex-fill layout-row">
<div class="flex-100 layout-row">
<span class="flex-40">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
<span class="flex-60">{{ savingProduct.enforceMinRequiredBalance | yesNo }}</span>
</div>
<div class="flex-fill layout-row" *ngIf="savingProduct.minRequiredBalance">
<div class="flex-100 layout-row" *ngIf="savingProduct.minRequiredBalance">
<span class="flex-40">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
<span class="flex-60">{{ savingProduct.minRequiredBalance | 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">{{ savingProduct.withHoldTax | yesNo }}</span>
</div>
<div class="flex-fill layout-row" *ngIf="savingProduct.withHoldTax">
<div class="flex-100 layout-row" *ngIf="savingProduct.withHoldTax">
<span class="flex-40">{{ 'labels.inputs.Tax Group' | translate }}:</span>
<span class="flex-60">{{
savingProduct.taxGroupId | find: savingProductsTemplate.taxGroupOptions : 'id' : 'name'
}}</span>
</div>
<div class="flex-fill layout-row">
<div class="flex-100 layout-row">
<span class="flex-40">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
<span class="flex-60">{{ savingProduct.allowOverdraft | yesNo }}</span>
</div>
<div class="flex-fill layout-row" *ngIf="savingProduct.minOverdraftForInterestCalculation">
<div class="flex-100 layout-row" *ngIf="savingProduct.minOverdraftForInterestCalculation">
<span class="flex-40">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
<span class="flex-60">{{ savingProduct.minOverdraftForInterestCalculation | formatNumber }}</span>
</div>
<div class="flex-fill layout-row" *ngIf="savingProduct.nominalAnnualInterestRateOverdraft">
<div class="flex-100 layout-row" *ngIf="savingProduct.nominalAnnualInterestRateOverdraft">
<span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
<span class="flex-60">{{ savingProduct.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
</div>
<div class="flex-fill layout-row" *ngIf="savingProduct.overdraftLimit">
<div class="flex-100 layout-row" *ngIf="savingProduct.overdraftLimit">
<span class="flex-40">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
<span class="flex-60">{{ savingProduct.overdraftLimit | formatNumber }}</span>
</div>
<div class="flex-fill layout-row">
<div class="flex-100 layout-row">
<span class="flex-40">{{ 'labels.inputs.Enable Dormancy Tracking' | translate }}:</span>
<span class="flex-60">{{ savingProduct.isDormancyTrackingActive | yesNo }}</span>
</div>
<div *ngIf="savingProduct.isDormancyTrackingActive" class="layout-row-wrap responsive-column flex-fill">
<div *ngIf="savingProduct.isDormancyTrackingActive" class="layout-row-wrap responsive-column flex-100">
<span class="flex-40">{{ 'labels.inputs.Number of Days to Inactive sub-status' | translate }}:</span>
<span class="flex-60">{{ savingProduct.daysToInactive }}</span>
<span class="flex-40">{{ 'labels.inputs.Number of Days to Dormant sub-status' | translate }}:</span>
@@ -163,11 +163,11 @@
<span class="flex-60">{{ savingProduct.daysToEscheat }}</span>
</div>
<div *ngIf="savingProduct.charges.length" class="layout-row-wrap responsive-column flex-fill">
<h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Charges' | translate }}</h3>
<div *ngIf="savingProduct.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]="savingProduct.charges">
<mat-divider class="flex-100"></mat-divider>
<table class="flex-100 mat-elevation-z1" mat-table [dataSource]="savingProduct.charges">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
<td mat-cell *matCellDef="let charge">
@@ -201,14 +201,11 @@
</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>
<mifosx-view-savings-accounting-details
class="flex-100"
[accountingRule]="accountingRule"
[accountingMappings]="accountingMappings"
>
<mat-divider class="flex-100"></mat-divider>
<mifosx-view-savings-accounting-details [accountingRule]="accountingRule" [accountingMappings]="accountingMappings">
</mifosx-view-savings-accounting-details>
<div
@@ -218,19 +215,19 @@
savingProduct.feeToIncomeAccountMappings?.length ||
savingProduct.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="savingProduct.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]="savingProduct.paymentChannelToFundSourceMappings"
>
@@ -256,10 +253,10 @@
</table>
</div>
<div *ngIf="savingProduct.feeToIncomeAccountMappings?.length" class="flex-fill layout-row-wrap responsive-column">
<h4 class="mat-h4 flex-fill">{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
<div *ngIf="savingProduct.feeToIncomeAccountMappings?.length" class="flex-100 layout-row-wrap responsive-column">
<h4 class="mat-h4 flex-100">{{ 'labels.heading.Fees to Specific Income Accounts' | translate }}</h4>
<table class="flex-fill mat-elevation-z1" mat-table [dataSource]="savingProduct.feeToIncomeAccountMappings">
<table class="flex-100 mat-elevation-z1" mat-table [dataSource]="savingProduct.feeToIncomeAccountMappings">
<ng-container matColumnDef="chargeId">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
<td mat-cell *matCellDef="let feesIncome">
@@ -284,11 +281,11 @@
<div
*ngIf="savingProduct.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="flex-fill mat-elevation-z1" mat-table [dataSource]="savingProduct.penaltyToIncomeAccountMappings">
<table class="flex-100 mat-elevation-z1" mat-table [dataSource]="savingProduct.penaltyToIncomeAccountMappings">
<ng-container matColumnDef="chargeId">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
<td mat-cell *matCellDef="let penaltyIncome">
@@ -44,6 +44,7 @@ export class SavingProductPreviewStepComponent implements OnInit, OnChanges {
setCurrentValues(): void {
this.accountingRule = this.accounting.getAccountingRuleFrom(this.savingProduct.accountingRule);
if (this.isCashOrAccrualAccounting()) {
const assetAccountData = this.savingProductsTemplate.accountingMappingOptions.assetAccountOptions || [];
const incomeAccountData = this.savingProductsTemplate.accountingMappingOptions.incomeAccountOptions || [];
@@ -102,10 +103,10 @@ export class SavingProductPreviewStepComponent implements OnInit, OnChanges {
}
isCashOrAccrualAccounting(): boolean {
return this.accounting.isAccrualAccountingRuleId(this.savingProduct.accountingRule);
return this.accounting.isCashOrAccrualAccounting(this.accountingRule);
}
isAccrualAccounting(): boolean {
return this.accounting.isAccrualAccounting(this.savingProduct.accountingRule);
return this.accounting.isAccrualAccounting(this.accountingRule);
}
}
@@ -1,5 +1,11 @@
<div class="layout-row align-end gap-2px responsive-column container m-b-20">
<button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
<button
mat-raised-button
color="primary"
class="m-t-20"
[routerLink]="['../edit']"
*mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'"
>
<fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
</button>
</div>
@@ -1,114 +1,142 @@
<div class="layout-row-wrap responsive-column">
<div *ngIf="accountingRule" class="layout-row-wrap responsive-column flex-fill flex-98">
<div *ngIf="accountingRule" class="layout-row responsive-column flex-100">
<span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
<span class="flex-60">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
</div>
<div *ngIf="isCashOrAccrualAccounting()" class="layout-row-wrap responsive-column flex-fill">
<h4 class="mat-h4 flex-fill">{{ 'labels.heading.Assets' | translate }}</h4>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Saving reference'"
[glAccount]="accountingMappings.savingsReferenceAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Overdraft portfolio'"
*ngIf="accountingMappings.overdraftPortfolioControl"
[glAccount]="accountingMappings.overdraftPortfolioControl"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Fees Receivable'"
*ngIf="isAccrualAccounting()"
[glAccount]="accountingMappings.feeReceivableAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Penalties Receivable'"
*ngIf="isAccrualAccounting()"
[glAccount]="accountingMappings.penaltyReceivableAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<div class="layout-row-wrap responsive-column flex-100">
<div *ngIf="isCashOrAccrualAccounting()" class="layout-row-wrap responsive-column flex-100">
<h4 class="mat-h4 flex-100">{{ 'labels.heading.Assets' | translate }}</h4>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Saving reference'"
[glAccount]="accountingMappings.savingsReferenceAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Overdraft portfolio'"
*ngIf="accountingMappings.overdraftPortfolioControl"
[glAccount]="accountingMappings.overdraftPortfolioControl"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Fees Receivable'"
*ngIf="isAccrualAccounting()"
[glAccount]="accountingMappings.feeReceivableAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Penalties Receivable'"
*ngIf="isAccrualAccounting()"
[glAccount]="accountingMappings.penaltyReceivableAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<h4 class="mat-h4 flex-fill">{{ 'labels.heading.Liabilities' | translate }}</h4>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Saving control'"
[glAccount]="accountingMappings.savingsControlAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Savings transfers in suspense'"
[glAccount]="accountingMappings.transfersInSuspenseAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Interest Payable'"
*ngIf="isAccrualAccounting()"
[glAccount]="accountingMappings.interestPayableAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Escheat liability'"
*ngIf="accountingMappings.escheatLiabilityAccount"
[glAccount]="accountingMappings.escheatLiabilityAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<h4 class="mat-h4 flex-100">{{ 'labels.heading.Liabilities' | translate }}</h4>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Saving control'"
[glAccount]="accountingMappings.savingsControlAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Savings transfers in suspense'"
[glAccount]="accountingMappings.transfersInSuspenseAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Interest Payable'"
*ngIf="isAccrualAccounting()"
[glAccount]="accountingMappings.interestPayableAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Escheat liability'"
*ngIf="accountingMappings.escheatLiabilityAccount"
[glAccount]="accountingMappings.escheatLiabilityAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<h4 class="mat-h4 flex-fill">{{ 'labels.heading.Income' | translate }}</h4>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Income from fees'"
[glAccount]="accountingMappings.incomeFromFeeAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Income from penalties'"
[glAccount]="accountingMappings.incomeFromPenaltyAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Income from Interest'"
*ngIf="accountingMappings.incomeFromInterest"
[glAccount]="accountingMappings.incomeFromInterest"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<h4 class="mat-h4 flex-100">{{ 'labels.heading.Income' | translate }}</h4>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Income from fees'"
[glAccount]="accountingMappings.incomeFromFeeAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Income from penalties'"
[glAccount]="accountingMappings.incomeFromPenaltyAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Income from Interest'"
*ngIf="accountingMappings.incomeFromInterest"
[glAccount]="accountingMappings.incomeFromInterest"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<h4 class="mat-h4 flex-fill">{{ 'labels.heading.Expenses' | translate }}</h4>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Interest on savings'"
[glAccount]="accountingMappings.interestOnSavingsAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Write-off'"
*ngIf="accountingMappings.writeOffAccount"
[glAccount]="accountingMappings.writeOffAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
<h4 class="mat-h4 flex-100">{{ 'labels.heading.Expenses' | translate }}</h4>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Interest on savings'"
[glAccount]="accountingMappings.interestOnSavingsAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
<div class="flex-100 layout-row-wrap responsive-column">
<mifosx-gl-account-display
class="flex-100"
[accountTitle]="'Write-off'"
*ngIf="accountingMappings.writeOffAccount"
[glAccount]="accountingMappings.writeOffAccount"
[withTitle]="'40%'"
>
</mifosx-gl-account-display>
</div>
</div>
</div>
</div>
@@ -1,4 +1,4 @@
<mat-form-field>
<mat-form-field class="flex-100">
<mat-label>{{ label }}</mat-label>
<input
matInput