feat: current account details step and client general tab updates

This commit is contained in:
Nitesh Yadav
2026-04-29 15:10:26 +05:30
parent 0d3d83799b
commit f2a5035c8b
5 changed files with 147 additions and 25 deletions
@@ -7,7 +7,6 @@
-->
<div class="general-tab-container mat-typography">
<!-- Performance History - KPI Stat Cards -->
<section class="performance-section">
<h3 class="performance-title">{{ 'labels.heading.Performance History' | translate }}</h3>
@@ -164,7 +163,9 @@
<td mat-footer-cell *matFooterCellDef [attr.colspan]="openSavingsColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">{{ 'labels.messages.No Active Saving Accounts Available' | translate }}</p>
<p class="table-empty-state__text">
{{ 'labels.messages.No Active Saving Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
@@ -211,7 +212,9 @@
<td mat-footer-cell *matFooterCellDef [attr.colspan]="closedSavingsColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">{{ 'labels.messages.No Closed Saving Accounts Available' | translate }}</p>
<p class="table-empty-state__text">
{{ 'labels.messages.No Closed Saving Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
@@ -233,6 +236,89 @@
}
</section>
<!-- Current Accounts -->
@if (currentAccounts?.length > 0) {
<section class="account-section">
<div class="section-header">
<div class="section-header__left">
<i class="fa fa-credit-card section-header__icon"></i>
<h3 class="section-header__title">Current Accounts</h3>
<span class="section-header__badge">{{ currentAccounts?.length || 0 }}</span>
</div>
</div>
<div class="table-wrapper">
<table mat-table [dataSource]="currentAccounts">
<ng-container matColumnDef="Account No">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
<td mat-cell *matCellDef="let element">
<i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
<mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
</td>
</ng-container>
<ng-container matColumnDef="Saving Account">
<th mat-header-cell *matHeaderCellDef>Current Account Product</th>
<td mat-cell *matCellDef="let element">
<mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
</td>
</ng-container>
<ng-container matColumnDef="Last Active">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
</ng-container>
<ng-container matColumnDef="Balance">
<th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
<td mat-cell class="r-amount" *matCellDef="let element">
{{ element.accountBalance | currency: element.currency?.code || 'INR' : 'symbol-narrow' : '1.2-2' }}
</td>
</ng-container>
<ng-container matColumnDef="Actions">
<th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
<td mat-cell class="center" *matCellDef="let element">
@if (element.status.submittedAndPendingApproval) {
<button
class="account-action-button"
mat-raised-button
color="primary"
(click)="routeEdit($event)"
[routerLink]="['../', 'current-accounts', element.id, 'actions', 'Approve']"
>
<i class="fa fa-check"></i>
</button>
}
<button
class="account-action-button"
mat-raised-button
color="primary"
(click)="routeEdit($event)"
[routerLink]="['../', 'current-accounts', element.id, 'general']"
>
<i class="fa fa-eye"></i>
</button>
</td>
</ng-container>
<ng-container matColumnDef="no-data">
<td mat-footer-cell *matFooterCellDef [attr.colspan]="openSavingsColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">No Active Current Accounts Available</p>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: openSavingsColumns"
[routerLink]="['../', 'current-accounts', row.id, 'general']"
></tr>
<tr mat-footer-row *matFooterRowDef="currentAccounts?.length === 0 ? ['no-data'] : []"></tr>
</table>
</div>
</section>
}
<!-- Upcoming Charges -->
<section class="account-section">
<div class="section-header">
@@ -258,7 +344,8 @@
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
<td mat-cell *matCellDef="let element">
<i class="fa fa-stop" [ngClass]="!(element.isWaived || element.isPaid) | statusLookup"></i> {{ element.name }}
<i class="fa fa-stop" [ngClass]="!(element.isWaived || element.isPaid) | statusLookup"></i>
{{ element.name }}
</td>
</ng-container>
@@ -322,7 +409,11 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="upcomingChargesColumns"></tr>
<tr mat-row *matRowDef="let row; columns: upcomingChargesColumns" [routerLink]="['../', 'charges', row.id]"></tr>
<tr
mat-row
*matRowDef="let row; columns: upcomingChargesColumns"
[routerLink]="['../', 'charges', row.id]"
></tr>
<tr mat-footer-row *matFooterRowDef="upcomingCharges?.length === 0 ? ['no-data'] : []"></tr>
</table>
</div>
@@ -407,7 +498,9 @@
<td mat-footer-cell *matFooterCellDef [attr.colspan]="openSavingsColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">{{ 'labels.messages.No Active Fixed Deposit Accounts Available' | translate }}</p>
<p class="table-empty-state__text">
{{ 'labels.messages.No Active Fixed Deposit Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
@@ -454,7 +547,9 @@
<td mat-footer-cell *matFooterCellDef [attr.colspan]="closedSavingsColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">{{ 'labels.messages.No Closed Fixed Deposit Accounts Available' | translate }}</p>
<p class="table-empty-state__text">
{{ 'labels.messages.No Closed Fixed Deposit Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
@@ -559,7 +654,9 @@
<td mat-footer-cell *matFooterCellDef [attr.colspan]="openSavingsColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">{{ 'labels.messages.No Active Recurring Deposit Accounts Available' | translate }}</p>
<p class="table-empty-state__text">
{{ 'labels.messages.No Active Recurring Deposit Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
@@ -607,7 +704,9 @@
<td mat-footer-cell *matFooterCellDef [attr.colspan]="closedSavingsColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">{{ 'labels.messages.No Closed Recurring Deposit Accounts Available' | translate }}</p>
<p class="table-empty-state__text">
{{ 'labels.messages.No Closed Recurring Deposit Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
@@ -775,7 +874,9 @@
<td mat-footer-cell *matFooterCellDef [attr.colspan]="openLoansColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">{{ 'labels.messages.No Active Loan Accounts Available' | translate }}</p>
<p class="table-empty-state__text">
{{ 'labels.messages.No Active Loan Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
@@ -867,7 +968,9 @@
<td mat-footer-cell *matFooterCellDef [attr.colspan]="closedLoansColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">{{ 'labels.messages.No Closed Loan Accounts Available' | translate }}</p>
<p class="table-empty-state__text">
{{ 'labels.messages.No Closed Loan Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
@@ -924,7 +1027,8 @@
<th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Total Value' | translate }}</th>
<td mat-cell class="r-amount" *matCellDef="let element">
{{
element.basePrice * element.quantity | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2'
element.basePrice * element.quantity
| currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2'
}}
</td>
</ng-container>
@@ -1043,7 +1147,9 @@
<td mat-footer-cell *matFooterCellDef [attr.colspan]="openSharesColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">{{ 'labels.messages.No Active Share Accounts Available' | translate }}</p>
<p class="table-empty-state__text">
{{ 'labels.messages.No Active Share Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
@@ -1094,7 +1200,9 @@
<td mat-footer-cell *matFooterCellDef [attr.colspan]="closedSharesColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">{{ 'labels.messages.No Closed Share Accounts Available' | translate }}</p>
<p class="table-empty-state__text">
{{ 'labels.messages.No Closed Share Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
@@ -1123,4 +1231,4 @@
<embed [src]="pdfUrl" type="application/pdf" width="100%" height="600px" />
</div>
</div>
</div>
</div>