feat: Nexora UI upgrade for Current Account, FD, and RD account views
- Current Account: hero header with navy gradient, pill tabs, Nexora card layout for general tab, txn-tab/chg-tab table styles, bank statement passbook - Fixed Deposits: fd-* prefixed hero header, KPI tiles, pill tab nav, nx-card general tab layout, txn-tab transactions, chg-tab charges - Recurring Deposits: rd-* prefixed hero header with three KPI tiles, pill tab nav, nx-card general tab layout, txn-tab transactions, chg-tab charges - Fix: removed broken FA4-format icon references from action menu buttons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jaanu423
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
ad6f629c3f
commit
b7d009b22a
+197
-182
@@ -6,196 +6,211 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="fixed-deposits-account-tables layout-row gap-2percent">
|
||||
<div class="flex-49 layout-column gap-4percent">
|
||||
<div>
|
||||
<h4 class="table-headers">{{ 'labels.heading.Fixed Deposit Details' | translate }}</h4>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.External Id' | translate }}</td>
|
||||
<td>
|
||||
@if (fixedDepositsAccountData.externalId) {
|
||||
<span>
|
||||
<mifosx-external-identifier
|
||||
externalId="{{ fixedDepositsAccountData.externalId }}"
|
||||
completed="true"
|
||||
></mifosx-external-identifier>
|
||||
</span>
|
||||
}
|
||||
@if (!fixedDepositsAccountData.externalId) {
|
||||
<span>
|
||||
{{ 'labels.inputs.Not Available' | translate }}
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Activated On' | translate }}</td>
|
||||
<td>
|
||||
{{
|
||||
fixedDepositsAccountData.timeline.activatedOnDate
|
||||
? (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat)
|
||||
: ('labels.text.Not Activated' | translate)
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
@if (fixedDepositsAccountData.timeline.closedOnDate) {
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Closed On' | translate }}</td>
|
||||
<td>{{ fixedDepositsAccountData.timeline.closedOnDate | dateFormat }}</td>
|
||||
</tr>
|
||||
}
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Field Officer' | translate }}</td>
|
||||
<td>
|
||||
{{
|
||||
fixedDepositsAccountData.fieldOfficerName
|
||||
? fixedDepositsAccountData.fieldOfficerName
|
||||
: ('Unassigned' | translateKey: 'inputs')
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Maturity Date' | translate }}</td>
|
||||
<td>
|
||||
{{ fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) : 'N/A' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Deposit Period' | translate }}</td>
|
||||
<td>
|
||||
{{ fixedDepositsAccountData.depositPeriod }} {{
|
||||
fixedDepositsAccountData.depositPeriodFrequency.value | translateKey: 'catalogs'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
@if (fixedDepositsAccountData.withHoldTax) {
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Tax Group' | translate }}</td>
|
||||
<td>{{ fixedDepositsAccountData.taxGroup.name }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (fixedDepositsAccountData.onAccountClosure) {
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Maturity Instructions' | translate }}</td>
|
||||
<td>{{ fixedDepositsAccountData.onAccountClosure.value | translateKey: 'catalogs' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="gt-grid">
|
||||
<!-- ─── Left Column ──────────────────────────────────────────────── -->
|
||||
<div class="gt-col">
|
||||
<!-- Fixed Deposit Details -->
|
||||
<div class="nx-card">
|
||||
<div class="nx-card__head">
|
||||
<span class="nx-card__ico"><fa-icon icon="file-alt"></fa-icon></span>
|
||||
<h3 class="nx-card__title">{{ 'labels.heading.Fixed Deposit Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="nx-card__body">
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.External Id' | translate }}</span>
|
||||
<span class="nx-row__value">
|
||||
@if (fixedDepositsAccountData.externalId) {
|
||||
<mifosx-external-identifier
|
||||
externalId="{{ fixedDepositsAccountData.externalId }}"
|
||||
completed="true"
|
||||
></mifosx-external-identifier>
|
||||
} @else {
|
||||
<span class="nx-muted">{{ 'labels.inputs.Not Available' | translate }}</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Activated On' | translate }}</span>
|
||||
<span class="nx-row__value">
|
||||
{{
|
||||
fixedDepositsAccountData.timeline.activatedOnDate
|
||||
? (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat)
|
||||
: ('labels.text.Not Activated' | translate)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
@if (fixedDepositsAccountData.timeline.closedOnDate) {
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Closed On' | translate }}</span>
|
||||
<span class="nx-row__value">{{ fixedDepositsAccountData.timeline.closedOnDate | dateFormat }}</span>
|
||||
</div>
|
||||
}
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Field Officer' | translate }}</span>
|
||||
<span class="nx-row__value">
|
||||
{{
|
||||
fixedDepositsAccountData.fieldOfficerName
|
||||
? fixedDepositsAccountData.fieldOfficerName
|
||||
: ('Unassigned' | translateKey: 'inputs')
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Maturity Date' | translate }}</span>
|
||||
<span class="nx-row__value">
|
||||
{{ fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) : 'N/A' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Deposit Period' | translate }}</span>
|
||||
<span class="nx-row__value">
|
||||
{{ fixedDepositsAccountData.depositPeriod }} {{
|
||||
fixedDepositsAccountData.depositPeriodFrequency.value | translateKey: 'catalogs'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
@if (fixedDepositsAccountData.withHoldTax) {
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Tax Group' | translate }}</span>
|
||||
<span class="nx-row__value">{{ fixedDepositsAccountData.taxGroup.name }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (fixedDepositsAccountData.onAccountClosure) {
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Maturity Instructions' | translate }}</span>
|
||||
<span class="nx-row__value">{{
|
||||
fixedDepositsAccountData.onAccountClosure.value | translateKey: 'catalogs'
|
||||
}}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="table-headers">{{ 'labels.heading.Interest Details' | translate }}</h4>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Interest Rate' | translate }}</td>
|
||||
<td>{{ fixedDepositsAccountData.nominalAnnualInterestRate }} %</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Interest Compounding Period' | translate }}</td>
|
||||
<td>{{ fixedDepositsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Interest Posting Period' | translate }}</td>
|
||||
<td>{{ fixedDepositsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Interest Calculated Using' | translate }}</td>
|
||||
<td>{{ fixedDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.No. of Days in Year' | translate }}</td>
|
||||
<td>{{ fixedDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}</td>
|
||||
</tr>
|
||||
@if (fixedDepositsAccountData.preClosurePenalApplicable) {
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Pre-cloure Penal' | translate }}</td>
|
||||
<td>
|
||||
{{ fixedDepositsAccountData.preClosurePenalInterest }} % on
|
||||
{{ fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Interest Details -->
|
||||
<div class="nx-card">
|
||||
<div class="nx-card__head">
|
||||
<span class="nx-card__ico"><fa-icon icon="percentage"></fa-icon></span>
|
||||
<h3 class="nx-card__title">{{ 'labels.heading.Interest Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="nx-card__body">
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Interest Rate' | translate }}</span>
|
||||
<span class="nx-row__value">{{ fixedDepositsAccountData.nominalAnnualInterestRate }} %</span>
|
||||
</div>
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Interest Compounding Period' | translate }}</span>
|
||||
<span class="nx-row__value">{{
|
||||
fixedDepositsAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Interest Posting Period' | translate }}</span>
|
||||
<span class="nx-row__value">{{
|
||||
fixedDepositsAccountData.interestPostingPeriodType.value | translateKey: 'catalogs'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Interest Calculated Using' | translate }}</span>
|
||||
<span class="nx-row__value">{{
|
||||
fixedDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.No. of Days in Year' | translate }}</span>
|
||||
<span class="nx-row__value">{{
|
||||
fixedDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs'
|
||||
}}</span>
|
||||
</div>
|
||||
@if (fixedDepositsAccountData.preClosurePenalApplicable) {
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Pre-cloure Penal' | translate }}</span>
|
||||
<span class="nx-row__value">
|
||||
{{ fixedDepositsAccountData.preClosurePenalInterest }} % on
|
||||
{{ fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-49">
|
||||
<!-- ─── Right Column ─────────────────────────────────────────────── -->
|
||||
<div class="gt-col">
|
||||
@if (!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval) {
|
||||
<div>
|
||||
<h4 class="table-headers">{{ 'labels.heading.Performance History' | translate }}</h4>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
|
||||
<td class="r-amount">
|
||||
{{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
|
||||
<td class="r-amount">
|
||||
{{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
|
||||
</td>
|
||||
</tr>
|
||||
@if (fixedDepositsAccountData.summary.totalDeposits) {
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Total Deposits' | translate }}</td>
|
||||
<td class="r-amount">
|
||||
{{
|
||||
fixedDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@if (fixedDepositsAccountData.summary.totalWithdrawals) {
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Total Withdrawals' | translate }}</td>
|
||||
<td class="r-amount">
|
||||
{{
|
||||
fixedDepositsAccountData.summary.totalWithdrawals
|
||||
| currency: currency.code : 'symbol-narrow' : '1.2-2'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@if (fixedDepositsAccountData.summary.totalInterestEarned >= 0) {
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Total Interest Earned' | translate }}</td>
|
||||
<td class="r-amount">
|
||||
{{
|
||||
fixedDepositsAccountData.summary.totalInterestEarned
|
||||
| currency: currency.code : 'symbol-narrow' : '1.2-2'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Performance History -->
|
||||
<div class="nx-card">
|
||||
<div class="nx-card__head">
|
||||
<span class="nx-card__ico"><fa-icon icon="chart-bar"></fa-icon></span>
|
||||
<h3 class="nx-card__title">{{ 'labels.heading.Performance History' | translate }}</h3>
|
||||
</div>
|
||||
<div class="nx-card__body">
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Principal Amount' | translate }}</span>
|
||||
<span class="nx-row__value nx-row__value--amount">
|
||||
{{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Maturity Amount' | translate }}</span>
|
||||
<span class="nx-row__value nx-row__value--amount nx-row__value--positive">
|
||||
{{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
|
||||
</span>
|
||||
</div>
|
||||
@if (fixedDepositsAccountData.summary.totalDeposits) {
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Total Deposits' | translate }}</span>
|
||||
<span class="nx-row__value nx-row__value--amount">
|
||||
{{
|
||||
fixedDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
@if (fixedDepositsAccountData.summary.totalWithdrawals) {
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Total Withdrawals' | translate }}</span>
|
||||
<span class="nx-row__value nx-row__value--amount nx-row__value--negative">
|
||||
{{
|
||||
fixedDepositsAccountData.summary.totalWithdrawals
|
||||
| currency: currency.code : 'symbol-narrow' : '1.2-2'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
@if (fixedDepositsAccountData.summary.totalInterestEarned >= 0) {
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Total Interest Earned' | translate }}</span>
|
||||
<span class="nx-row__value nx-row__value--amount nx-row__value--positive">
|
||||
{{
|
||||
fixedDepositsAccountData.summary.totalInterestEarned
|
||||
| currency: currency.code : 'symbol-narrow' : '1.2-2'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div>
|
||||
<h4 class="table-headers">{{ 'labels.heading.Other Details' | translate }}</h4>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Principal Amount' | translate }}</td>
|
||||
<td class="r-amount">
|
||||
{{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'labels.inputs.Maturity Amount' | translate }}</td>
|
||||
<td class="r-amount">
|
||||
{{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Other Details (pending/rejected) -->
|
||||
<div class="nx-card">
|
||||
<div class="nx-card__head">
|
||||
<span class="nx-card__ico"><fa-icon icon="info-circle"></fa-icon></span>
|
||||
<h3 class="nx-card__title">{{ 'labels.heading.Other Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="nx-card__body">
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Principal Amount' | translate }}</span>
|
||||
<span class="nx-row__value nx-row__value--amount">
|
||||
{{ fixedDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="nx-row">
|
||||
<span class="nx-row__label">{{ 'labels.inputs.Maturity Amount' | translate }}</span>
|
||||
<span class="nx-row__value nx-row__value--amount">
|
||||
{{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user