DDS: approvals tab, vouchers, payout & close, Sundry GL search, closure tab, fixes
This commit is contained in:
tarunmalviya
@@ -0,0 +1,557 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="dav-page">
|
||||
@if (isLoading) {
|
||||
<div class="dav-card dav-state">
|
||||
<mat-spinner diameter="32"></mat-spinner>
|
||||
<span>Loading account…</span>
|
||||
</div>
|
||||
} @else if (!account) {
|
||||
<div class="dav-card dav-state">
|
||||
<fa-icon icon="inbox" size="2x"></fa-icon>
|
||||
<span>DDS account not found</span>
|
||||
<button class="dav-btn" (click)="back()"><fa-icon icon="arrow-left"></fa-icon> DDS Accounts</button>
|
||||
</div>
|
||||
} @else {
|
||||
<!-- Banner, as the savings account page opens -->
|
||||
<div class="dav-banner">
|
||||
<div class="dav-banner__icon"><fa-icon icon="coins"></fa-icon></div>
|
||||
<div class="dav-banner__text">
|
||||
<span class="dav-pill" [ngClass]="'dav-pill--' + (account.status || '').toLowerCase()"
|
||||
>● {{ account.status }}</span
|
||||
>
|
||||
<h2 class="dav-banner__title">{{ account.subType }}</h2>
|
||||
<div class="dav-banner__meta">
|
||||
<span class="dav-banner__label">Account Number</span>
|
||||
<span class="dav-banner__value dav-mono">{{ account.accountNo }}</span>
|
||||
<span class="dav-banner__label">Client Name</span>
|
||||
<span class="dav-banner__value">{{ account.clientName || account.partyName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dav-banner__boxes">
|
||||
<div class="dav-box">
|
||||
<span class="dav-box__label">Current Balance</span>
|
||||
<span class="dav-box__value">₹{{ account.currentBalance || 0 | formatNumber }}</span>
|
||||
</div>
|
||||
<div class="dav-box">
|
||||
<span class="dav-box__label">Maturity Amount</span>
|
||||
<span class="dav-box__value">₹{{ account.maturityAmount || 0 | formatNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dav-banner__actions">
|
||||
<button class="dav-icon-btn" (click)="back()" matTooltip="Back to DDS Accounts">
|
||||
<fa-icon icon="arrow-left"></fa-icon>
|
||||
</button>
|
||||
<button class="dav-icon-btn" (click)="openInPartyMaster()" matTooltip="Open in DDS Party Master">
|
||||
<fa-icon icon="pen"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="dav-tabs">
|
||||
<button class="dav-tab" [class.dav-tab--on]="tab === 'general'" (click)="tab = 'general'">
|
||||
<fa-icon icon="info-circle"></fa-icon> General
|
||||
</button>
|
||||
<button class="dav-tab" [class.dav-tab--on]="tab === 'transactions'" (click)="tab = 'transactions'">
|
||||
<fa-icon icon="exchange-alt"></fa-icon> Transactions
|
||||
</button>
|
||||
<button class="dav-tab" [class.dav-tab--on]="tab === 'passbook'" (click)="tab = 'passbook'">
|
||||
<fa-icon icon="book"></fa-icon> Passbook
|
||||
</button>
|
||||
<button class="dav-tab" [class.dav-tab--on]="tab === 'nominees'" (click)="tab = 'nominees'">
|
||||
<fa-icon icon="user"></fa-icon> Nominees
|
||||
</button>
|
||||
@if (account.status === 'CLOSED') {
|
||||
<button class="dav-tab" [class.dav-tab--on]="tab === 'closure'" (click)="tab = 'closure'">
|
||||
<fa-icon icon="lock"></fa-icon> Closure
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Closure: how a closed account was closed and where its money went -->
|
||||
@if (tab === 'closure') {
|
||||
@if (!closure) {
|
||||
<div class="dav-card">
|
||||
<div class="dav-row"><span>Loading closure details…</span></div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="dav-columns">
|
||||
<div class="dav-column">
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> How It Closed</div>
|
||||
<div class="dav-row">
|
||||
<span>Type</span>
|
||||
<strong>
|
||||
{{ closureLabels[closure.closureType] || closure.closureType }}
|
||||
@if (closure.withinLockin) {
|
||||
<em class="dav-closure-tag">within lock-in</em>
|
||||
}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Closed On</span><strong>{{ closure.closeDate | date: 'dd MMMM yyyy' }}</strong>
|
||||
</div>
|
||||
@if (closure.paidOutBy) {
|
||||
<div class="dav-row">
|
||||
<span>Paid Out By</span><strong>{{ closure.paidOutBy }}</strong>
|
||||
</div>
|
||||
}
|
||||
<div class="dav-row">
|
||||
<span>Closed By</span><strong>{{ closure.closedBy || '—' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Approved By</span><strong>{{ closure.approvedBy || '—' }}</strong>
|
||||
</div>
|
||||
@if (closure.lockinOverrideReason) {
|
||||
<div class="dav-row">
|
||||
<span>Reason</span><strong>{{ closure.lockinOverrideReason }}</strong>
|
||||
</div>
|
||||
}
|
||||
@if (closure.shortfallBorneBy) {
|
||||
<div class="dav-row">
|
||||
<span>Cost Borne By</span>
|
||||
<strong>{{
|
||||
closure.shortfallBorneBy === 'AGENT' ? 'Agent — ' + closure.agentCode : 'Customer'
|
||||
}}</strong>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> The Money</div>
|
||||
<div class="dav-row">
|
||||
<span>Balance at Close</span><strong>₹{{ closure.balanceAtClose || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
@if (closure.interestRecovered > 0) {
|
||||
<div class="dav-row">
|
||||
<span>Interest Recovered</span
|
||||
><strong class="dav-dr">− ₹{{ closure.interestRecovered | formatNumber }}</strong>
|
||||
</div>
|
||||
}
|
||||
@if (closure.interestToppedUpByAgent > 0) {
|
||||
<div class="dav-row">
|
||||
<span>Interest Funded by Agent</span
|
||||
><strong class="dav-cr">+ ₹{{ closure.interestToppedUpByAgent | formatNumber }}</strong>
|
||||
</div>
|
||||
}
|
||||
<div class="dav-row dav-closure-total">
|
||||
<span>Paid Out</span><strong>₹{{ closure.paidOut || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
@if (closure.closureType === 'PREMATURE') {
|
||||
<div class="dav-row">
|
||||
<span>Agent Penalty ({{ closure.agentCode }})</span
|
||||
><strong>₹{{ closure.agentCommissionPenalty || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dav-column">
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> Where It Went</div>
|
||||
@if (closure.destination === 'OWN_ACCOUNT') {
|
||||
<div class="dav-row"><span>Paid Into</span><strong>Customer's own account</strong></div>
|
||||
<div class="dav-row">
|
||||
<span>Account</span><strong class="dav-mono">{{ closure.creditedAccount?.accountNo }}</strong>
|
||||
</div>
|
||||
@if (closure.creditedAccount?.productName) {
|
||||
<div class="dav-row">
|
||||
<span>Product</span><strong>{{ closure.creditedAccount.productName }}</strong>
|
||||
</div>
|
||||
}
|
||||
@if (closure.creditedAccount?.owner) {
|
||||
<div class="dav-row">
|
||||
<span>Holder</span><strong>{{ closure.creditedAccount.owner }}</strong>
|
||||
</div>
|
||||
}
|
||||
} @else if (closure.destination === 'SUNDRY') {
|
||||
<div class="dav-row"><span>Parked In</span><strong>Sundry (customer has no account here)</strong></div>
|
||||
<div class="dav-row">
|
||||
<span>GL Account</span
|
||||
><strong class="dav-mono">{{ closure.sundryGl?.glCode }} · {{ closure.sundryGl?.glName }}</strong>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="dav-row"><span>Paid Out</span><strong>Nothing - the balance was nil</strong></div>
|
||||
}
|
||||
@if (closure.voucherNo) {
|
||||
<div class="dav-row">
|
||||
<span>Voucher</span><strong class="dav-mono">{{ closure.voucherNo }}</strong>
|
||||
</div>
|
||||
}
|
||||
@if (closure.payoutDate) {
|
||||
<div class="dav-row">
|
||||
<span>Paid On</span><strong>{{ closure.payoutDate | date: 'dd MMMM yyyy' }}</strong>
|
||||
</div>
|
||||
}
|
||||
@if (closure.passbookNote) {
|
||||
<div class="dav-row">
|
||||
<span>Passbook Note</span><strong>{{ closure.passbookNote }}</strong>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (closure.ledgerEntries?.length) {
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> Ledger Entry</div>
|
||||
<div class="dav-row">
|
||||
<span>Transaction ID</span><strong class="dav-mono">{{ closure.ledgerTransactionId }}</strong>
|
||||
</div>
|
||||
@for (leg of closure.ledgerEntries; track $index) {
|
||||
<div class="dav-row">
|
||||
<span>{{ leg.glCode }} · {{ leg.glName }}</span>
|
||||
<strong [class.dav-dr]="leg.side === 'DR'" [class.dav-cr]="leg.side === 'CR'">
|
||||
{{ leg.side }} ₹{{ leg.amount | formatNumber }}
|
||||
</strong>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<!-- General -->
|
||||
@if (tab === 'general') {
|
||||
<div class="dav-columns">
|
||||
<div class="dav-column">
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> DDS Details</div>
|
||||
<div class="dav-row">
|
||||
<span>Account Number</span><strong class="dav-mono">{{ account.accountNo }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Party Code</span><strong>{{ account.partyCode }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Client Name</span><strong>{{ account.clientName }} ({{ account.clientId }})</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Agent</span><strong>{{ account.agentCode }} · {{ account.agentName }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Branch</span><strong>{{ account.officeName }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Product</span><strong>{{ account.subType }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Opened On</span><strong>{{ account.openingDate | date: 'dd MMMM yyyy' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Matures On</span><strong>{{ account.maturityDate | date: 'dd MMMM yyyy' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Daily Deposit</span><strong>₹{{ account.dailyDepositAmount || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Term</span><strong>{{ account.month }} months · {{ account.days }} days</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Interest Rate</span><strong>{{ account.interestRate }} %</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Currency</span><strong>Indian Rupee <em class="dav-mono">[INR]</em></strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> Performance History</div>
|
||||
<div class="dav-row">
|
||||
<span>Total Collected</span><strong class="dav-cr">₹{{ totalOf('PARTY_TRAN') | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Total Interest Earned</span><strong>₹{{ interestEarned | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Total Paid Out</span><strong class="dav-dr">₹{{ totalDebitsAll | formatNumber }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dav-column">
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> Account Summary</div>
|
||||
<div class="dav-row">
|
||||
<span>Collected to Date</span><strong>₹{{ account.collectedToDate || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Expected to Date</span><strong>₹{{ account.expectedToDate || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Standing</span>
|
||||
<strong>
|
||||
@if (account.advanceDays > 0) {
|
||||
{{ account.advanceDays }} days ahead
|
||||
} @else if (account.arrearsDays > 0) {
|
||||
<span class="dav-dr">{{ account.arrearsDays }} days behind</span>
|
||||
} @else {
|
||||
Up to date
|
||||
}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Instalments Due</span><strong>{{ account.instalmentsDue ?? 0 }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Interest Earned</span><strong>₹{{ interestEarned | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Interest Calculated, Not Posted</span
|
||||
><strong>₹{{ account.interestCalc || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row"><span>Interest Calculated Using</span><strong>Daily Balance</strong></div>
|
||||
<div class="dav-row"><span>Days in Year</span><strong>365 Days</strong></div>
|
||||
<div class="dav-row">
|
||||
<span>Last Interest Date</span
|
||||
><strong>{{ account.interestDate ? (account.interestDate | date: 'dd MMMM yyyy') : '—' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Last Transaction Date</span
|
||||
><strong>{{ lastTransactionDate ? (lastTransactionDate | date: 'dd MMMM yyyy') : '—' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Maturity Amount</span><strong>₹{{ account.maturityAmount || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Lien</span>
|
||||
<strong>{{ account.lien ? 'Yes — ₹' + (account.amountHeldUnderLien || 0) : 'No' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Freeze</span><strong>{{ account.freezeCode || 'Normal' }}</strong>
|
||||
</div>
|
||||
@if (account.closeDate) {
|
||||
<div class="dav-row">
|
||||
<span>Closed On</span><strong>{{ account.closeDate | date: 'dd MMMM yyyy' }}</strong>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Transactions -->
|
||||
@if (tab === 'transactions') {
|
||||
<div class="dav-card">
|
||||
<div class="dav-toolbar">
|
||||
<div class="dav-datepick">
|
||||
<span>From</span>
|
||||
<input type="date" [formControl]="fromDateControl" [max]="today" />
|
||||
</div>
|
||||
<div class="dav-datepick">
|
||||
<span>To</span>
|
||||
<input type="date" [formControl]="toDateControl" [max]="today" />
|
||||
</div>
|
||||
<button class="dav-btn" (click)="showToday()"><fa-icon icon="clock"></fa-icon> Today</button>
|
||||
@if (hasDateFilters) {
|
||||
<button class="dav-btn" (click)="clearDateFilters()"><fa-icon icon="times"></fa-icon> Clear</button>
|
||||
}
|
||||
<div class="dav-totals">
|
||||
<span class="dav-cr">Credits ₹{{ totalCredits | formatNumber }}</span>
|
||||
<span class="dav-dr">Debits ₹{{ totalDebits | formatNumber }}</span>
|
||||
</div>
|
||||
<button class="dav-btn dav-btn--primary" (click)="exportCsv()" [disabled]="shownTransactions.length === 0">
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (shownTransactions.length === 0) {
|
||||
<div class="dav-state">
|
||||
<fa-icon icon="inbox" size="2x"></fa-icon>
|
||||
<span>{{
|
||||
hasDateFilters
|
||||
? 'Nothing moved on this account in these dates'
|
||||
: 'Nothing has been credited to this account yet'
|
||||
}}</span>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="dav-table-wrap">
|
||||
<table class="dav-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>ID</th>
|
||||
<th>Transaction Date</th>
|
||||
<th>Transaction Type</th>
|
||||
<th>Voucher</th>
|
||||
<th>Description</th>
|
||||
<th class="dav-right">Debit</th>
|
||||
<th class="dav-right">Credit</th>
|
||||
<th class="dav-right">Balance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (txn of shownTransactions; track txn.id; let i = $index) {
|
||||
<tr>
|
||||
<td>{{ i + 1 }}</td>
|
||||
<td>{{ txn.id }}</td>
|
||||
<td>{{ txn.transactionDate | date: 'dd MMMM yyyy' }}</td>
|
||||
<td>{{ label(txn.transactionType) }}</td>
|
||||
<td class="dav-mono">{{ txn.voucherNo || '—' }}</td>
|
||||
<td class="dav-desc">{{ txn.description }}</td>
|
||||
<td class="dav-right">
|
||||
{{ txn.direction === 'DEBIT' ? '₹' + (txn.amount | formatNumber) : 'N/A' }}
|
||||
</td>
|
||||
<td class="dav-right">
|
||||
{{ txn.direction === 'CREDIT' ? '₹' + (txn.amount | formatNumber) : 'N/A' }}
|
||||
</td>
|
||||
<td class="dav-right">
|
||||
<strong>₹{{ txn.balanceAfterTransaction || 0 | formatNumber }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Passbook: the same entries oldest first, the way a passbook is written up, and printable -->
|
||||
@if (tab === 'passbook') {
|
||||
<div class="dav-card">
|
||||
<div class="dav-toolbar dav-noprint">
|
||||
<div class="dav-datepick">
|
||||
<span>From</span>
|
||||
<input type="date" [formControl]="fromDateControl" [max]="today" />
|
||||
</div>
|
||||
<div class="dav-datepick">
|
||||
<span>To</span>
|
||||
<input type="date" [formControl]="toDateControl" [max]="today" />
|
||||
</div>
|
||||
@if (hasDateFilters) {
|
||||
<button class="dav-btn" (click)="clearDateFilters()"><fa-icon icon="times"></fa-icon> Clear</button>
|
||||
}
|
||||
<button class="dav-btn dav-btn--primary dav-push" (click)="printPassbook()">
|
||||
<fa-icon icon="print"></fa-icon> Print
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dav-passbook" id="dds-passbook">
|
||||
<div class="dav-pb-head">
|
||||
<div>
|
||||
<div class="dav-pb-title">DDS Passbook</div>
|
||||
<div class="dav-pb-sub">{{ account.officeName }}</div>
|
||||
</div>
|
||||
<div class="dav-pb-grid">
|
||||
<span>Account No</span><strong class="dav-mono">{{ account.accountNo }}</strong> <span>Party Code</span
|
||||
><strong>{{ account.partyCode }}</strong> <span>Name</span
|
||||
><strong>{{ account.clientName || account.partyName }}</strong> <span>Product</span
|
||||
><strong>{{ account.subType }} · {{ account.interestRate }} %</strong> <span>Opened On</span
|
||||
><strong>{{ account.openingDate | date: 'dd/MM/yyyy' }}</strong> <span>Agent</span
|
||||
><strong>{{ account.agentCode }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (passbookEntries.length === 0) {
|
||||
<div class="dav-state">
|
||||
<span>{{ hasDateFilters ? 'No entries in these dates' : 'No entries yet' }}</span>
|
||||
</div>
|
||||
} @else {
|
||||
<table class="dav-table dav-pb-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Voucher</th>
|
||||
<th>Particulars</th>
|
||||
<th class="dav-right">Withdrawals</th>
|
||||
<th class="dav-right">Deposits</th>
|
||||
<th class="dav-right">Balance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (txn of passbookEntries; track txn.id) {
|
||||
<tr>
|
||||
<td>{{ txn.transactionDate | date: 'dd/MM/yyyy' }}</td>
|
||||
<td class="dav-mono">{{ txn.voucherNo || '' }}</td>
|
||||
<td>
|
||||
{{ label(txn.transactionType) }}
|
||||
@if (txn.description) {
|
||||
<span class="dav-pb-note">{{ txn.description }}</span>
|
||||
}
|
||||
</td>
|
||||
<td class="dav-right">{{ txn.direction === 'DEBIT' ? (txn.amount | formatNumber) : '' }}</td>
|
||||
<td class="dav-right">{{ txn.direction === 'CREDIT' ? (txn.amount | formatNumber) : '' }}</td>
|
||||
<td class="dav-right">
|
||||
<strong>{{ txn.balanceAfterTransaction || 0 | formatNumber }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3"><strong>Total</strong></td>
|
||||
<td class="dav-right">
|
||||
<strong>{{ totalDebits | formatNumber }}</strong>
|
||||
</td>
|
||||
<td class="dav-right">
|
||||
<strong>{{ totalCredits | formatNumber }}</strong>
|
||||
</td>
|
||||
<td class="dav-right">
|
||||
<strong>{{ passbookClosingBalance | formatNumber }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Nominees -->
|
||||
@if (tab === 'nominees') {
|
||||
<div class="dav-card">
|
||||
@if (!account.nominees || account.nominees.length === 0) {
|
||||
<div class="dav-state">
|
||||
<fa-icon icon="user" size="2x"></fa-icon>
|
||||
<span>No nominee on this account</span>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="dav-table-wrap">
|
||||
<table class="dav-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Relation</th>
|
||||
<th>Gender</th>
|
||||
<th>Mobile</th>
|
||||
<th>Birth Date</th>
|
||||
<th>Nominated On</th>
|
||||
<th>Guardian</th>
|
||||
<th class="dav-right">{{ account.nomineeSplitMode === 'Sequence' ? 'Order' : 'Share %' }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (nominee of account.nominees; track nominee.id; let i = $index) {
|
||||
<tr>
|
||||
<td>{{ i + 1 }}</td>
|
||||
<td>
|
||||
<strong>{{ nominee.name }}</strong>
|
||||
</td>
|
||||
<td>{{ nominee.relation }}</td>
|
||||
<td>{{ nominee.gender }}</td>
|
||||
<td>{{ nominee.mobileNo || '—' }}</td>
|
||||
<td>{{ nominee.birthDate ? (nominee.birthDate | date: 'dd MMM yyyy') : '—' }}</td>
|
||||
<td>{{ nominee.nominationDate ? (nominee.nominationDate | date: 'dd MMM yyyy') : '—' }}</td>
|
||||
<td>{{ nominee.guardianName || '—' }}</td>
|
||||
<td class="dav-right">
|
||||
{{ account.nomineeSplitMode === 'Sequence' ? nominee.sequenceNo : (nominee.sharePercent ?? '—') }}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,459 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/* One DDS account's page, laid out the way the savings account page is: a banner, tabs, cards. */
|
||||
|
||||
.dav-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
|
||||
.dav-mono {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.dav-cr {
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.dav-dr {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.dav-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
/* ── Banner ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.dav-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
border-radius: 16px;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #1e3a8a 0%, #2d3fb4 55%, #5b47d6 100%);
|
||||
box-shadow: 0 8px 24px rgb(30 58 138 / 25%);
|
||||
}
|
||||
|
||||
.dav-banner__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 1.3rem;
|
||||
background: rgb(255 255 255 / 16%);
|
||||
border: 1px solid rgb(255 255 255 / 25%);
|
||||
}
|
||||
|
||||
.dav-banner__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dav-pill {
|
||||
align-self: flex-start;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
background: rgb(16 185 129 / 25%);
|
||||
color: #a7f3d0;
|
||||
border: 1px solid rgb(167 243 208 / 40%);
|
||||
}
|
||||
|
||||
.dav-pill--closed {
|
||||
background: rgb(148 163 184 / 25%);
|
||||
color: #e2e8f0;
|
||||
border-color: rgb(226 232 240 / 40%);
|
||||
}
|
||||
|
||||
.dav-banner__title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dav-banner__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 6px 12px;
|
||||
}
|
||||
|
||||
.dav-banner__label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(255 255 255 / 60%);
|
||||
}
|
||||
|
||||
.dav-banner__value {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dav-banner__boxes {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dav-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 10px 18px;
|
||||
border-radius: 12px;
|
||||
background: rgb(255 255 255 / 12%);
|
||||
border: 1px solid rgb(255 255 255 / 25%);
|
||||
}
|
||||
|
||||
.dav-box__label {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
}
|
||||
|
||||
.dav-box__value {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.dav-banner__actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dav-icon-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgb(255 255 255 / 35%);
|
||||
background: rgb(255 255 255 / 12%);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgb(255 255 255 / 22%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Tabs ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.dav-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
border: 1px solid rgb(0 0 0 / 7%);
|
||||
}
|
||||
|
||||
.dav-tab {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px 16px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
.dav-tab--on {
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #1d4ed8, #2563eb);
|
||||
box-shadow: 0 4px 12px rgb(37 99 235 / 30%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #1d4ed8, #2563eb);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Cards ────────────────────────────────────────────────────────────── */
|
||||
|
||||
.dav-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.dav-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dav-card {
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
border: 1px solid rgb(0 0 0 / 7%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dav-card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 20px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 7%);
|
||||
}
|
||||
|
||||
.dav-card__dot {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #2563eb, #1e40af);
|
||||
}
|
||||
|
||||
.dav-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px dashed rgb(0 0 0 / 7%);
|
||||
font-size: 0.92rem;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
strong {
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.dav-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 48px 16px;
|
||||
color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
/* ── Transactions ─────────────────────────────────────────────────────── */
|
||||
|
||||
.dav-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 14px 20px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 7%);
|
||||
}
|
||||
|
||||
.dav-datepick {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
span {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(0 0 0 / 15%);
|
||||
font: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.dav-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(0 0 0 / 15%);
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.dav-btn--primary {
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
background: linear-gradient(90deg, #1d4ed8, #2563eb);
|
||||
}
|
||||
|
||||
.dav-totals {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.dav-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.dav-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.92rem;
|
||||
|
||||
th {
|
||||
padding: 14px 16px;
|
||||
text-align: left;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: #475569;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 8%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 5%);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background: #f8fafc;
|
||||
}
|
||||
}
|
||||
|
||||
.dav-desc {
|
||||
max-width: 320px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
}
|
||||
|
||||
@media (width <= 720px) {
|
||||
.dav-page {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.dav-banner__boxes {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dav-tab {
|
||||
font-size: 0.85rem;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Passbook ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.dav-push {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.dav-passbook {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dav-pb-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px 32px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid #1e3a8a;
|
||||
}
|
||||
|
||||
.dav-pb-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
|
||||
.dav-pb-sub {
|
||||
font-size: 0.85rem;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
}
|
||||
|
||||
.dav-pb-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 4px 16px;
|
||||
font-size: 0.88rem;
|
||||
|
||||
span {
|
||||
color: rgb(0 0 0 / 55%);
|
||||
}
|
||||
}
|
||||
|
||||
.dav-pb-table {
|
||||
tfoot td {
|
||||
padding: 14px 16px;
|
||||
border-top: 2px solid rgb(0 0 0 / 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.dav-pb-note {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
/* Closure tab */
|
||||
.dav-closure-tag {
|
||||
margin-left: 8px;
|
||||
padding: 1px 8px;
|
||||
border-radius: 999px;
|
||||
background: #fff3e0;
|
||||
color: #e65100;
|
||||
font-size: 0.75rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.dav-closure-total {
|
||||
border-top: 1px solid rgb(0 0 0 / 10%);
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -0,0 +1,297 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
||||
import { NgClass } from '@angular/common';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { forkJoin, of } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { FormatNumberPipe } from 'app/pipes/format-number.pipe';
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
|
||||
/** What each DDS transaction type is called on screen. */
|
||||
const TRANSACTION_LABELS: Record<string, string> = {
|
||||
PARTY_TRAN: 'Collection',
|
||||
INTEREST_POST: 'Interest',
|
||||
OD_INTEREST_POST: 'OD Interest',
|
||||
MATURITY_PAYOUT: 'Maturity Payout',
|
||||
PREMATURE_PAYOUT: 'Premature Payout',
|
||||
PREMATURE_INT_RECOVERY: 'Interest Recovered (Premature)',
|
||||
PREMATURE_AGENT_TOP_UP: 'Interest Funded by Agent',
|
||||
WITHDRAW_DEPOSITE: 'Transfer (Withdraw Deposite)',
|
||||
TRANSFER: 'Transfer'
|
||||
};
|
||||
|
||||
/**
|
||||
* One DDS account and everything that has moved on it, as the savings account page shows a savings
|
||||
* account: the account's terms and where it stands, then its transactions with the balance after
|
||||
* each, narrowed to a day or a range.
|
||||
*
|
||||
* Read-only. The account is changed from DDS Party Master; its money moves through collections, the
|
||||
* cashier and the batch runs.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-dds-account-view',
|
||||
templateUrl: './dds-account-view.component.html',
|
||||
styleUrls: ['./dds-account-view.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
ReactiveFormsModule,
|
||||
NgClass,
|
||||
FaIconComponent,
|
||||
MatTooltipModule,
|
||||
MatProgressSpinnerModule,
|
||||
FormatNumberPipe
|
||||
]
|
||||
})
|
||||
export class DdsAccountViewComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private organizationService = inject(OrganizationService);
|
||||
|
||||
isLoading = true;
|
||||
account: any = null;
|
||||
private transactions: any[] = [];
|
||||
|
||||
/** The page's tabs, as the savings account page has them - only those that apply to DDS. */
|
||||
tab: 'general' | 'transactions' | 'passbook' | 'nominees' | 'closure' = 'general';
|
||||
|
||||
/** How a closed account was closed - read only for closed accounts, for the Closure tab. */
|
||||
closure: any = null;
|
||||
|
||||
/** What each kind of closure is called on screen. */
|
||||
readonly closureLabels: Record<string, string> = {
|
||||
PREMATURE: 'Premature Close',
|
||||
MATURITY_PAYOUT_AND_CLOSE: 'Maturity Payout & Close',
|
||||
MATURITY_PAYOUT_THEN_CLOSE: 'Maturity Payout, then Closed',
|
||||
MATURITY_AUTO_CLOSE: 'Maturity Auto Close (night job)',
|
||||
CLOSED_NIL_BALANCE: 'Closed with nil balance'
|
||||
};
|
||||
|
||||
/** The passbook reads oldest first, as it is written up. */
|
||||
get passbookEntries(): any[] {
|
||||
return [...this.shownTransactions].reverse();
|
||||
}
|
||||
|
||||
/** The balance after the last entry shown. */
|
||||
get passbookClosingBalance(): number {
|
||||
const entries = this.passbookEntries;
|
||||
return entries.length > 0 ? Number(entries[entries.length - 1].balanceAfterTransaction || 0) : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prints the passbook alone. It is copied into a window of its own with only its own styles, so the
|
||||
* page's menus, banner and tabs do not come out on the paper.
|
||||
*/
|
||||
printPassbook(): void {
|
||||
const passbook = document.getElementById('dds-passbook');
|
||||
const popup = window.open('', '_blank', 'width=900,height=700');
|
||||
if (!passbook || !popup) {
|
||||
return;
|
||||
}
|
||||
popup.document.write(`<html><head><title>${this.account?.accountNo || 'DDS'} Passbook</title><style>
|
||||
body { font-family: Arial, sans-serif; margin: 24px; color: #111; }
|
||||
.dav-pb-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
|
||||
.dav-pb-title { font-size: 20px; font-weight: 700; }
|
||||
.dav-pb-sub { color: #555; }
|
||||
.dav-pb-grid { display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-size: 13px; }
|
||||
.dav-pb-grid span { color: #555; }
|
||||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
th, td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
|
||||
.dav-right { text-align: right; }
|
||||
.dav-pb-note { display: block; font-size: 11px; color: #555; }
|
||||
</style></head><body>${passbook.innerHTML}</body></html>`);
|
||||
popup.document.close();
|
||||
popup.focus();
|
||||
popup.print();
|
||||
}
|
||||
|
||||
fromDateControl = new FormControl('');
|
||||
toDateControl = new FormControl('');
|
||||
|
||||
readonly today = new Date().toISOString().split('T')[0];
|
||||
|
||||
ngOnInit(): void {
|
||||
const partyId = this.route.snapshot.paramMap.get('partyId');
|
||||
if (!partyId) {
|
||||
this.isLoading = false;
|
||||
return;
|
||||
}
|
||||
forkJoin({
|
||||
account: this.organizationService.getParty(partyId).pipe(catchError(() => of(null))),
|
||||
transactions: this.organizationService.getPartyTransactionsOfParty(partyId).pipe(catchError(() => of([])))
|
||||
}).subscribe(({ account, transactions }) => {
|
||||
this.account = account;
|
||||
if (account?.status === 'CLOSED') {
|
||||
this.organizationService.getPartyClosure(partyId).subscribe({
|
||||
next: (closure: any) => (this.closure = closure),
|
||||
error: () => (this.closure = null)
|
||||
});
|
||||
}
|
||||
// Newest first, and within a day the later entry first - the order a passbook is read back in.
|
||||
this.transactions = (Array.isArray(transactions) ? transactions : []).sort(
|
||||
(a: any, b: any) =>
|
||||
String(b.transactionDate).localeCompare(String(a.transactionDate)) || Number(b.id) - Number(a.id)
|
||||
);
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** The transactions in the chosen range - all of them when no range is set. */
|
||||
get shownTransactions(): any[] {
|
||||
const from = this.fromDateControl.value;
|
||||
const to = this.toDateControl.value;
|
||||
return this.transactions.filter((txn: any) => {
|
||||
const day = String(txn.transactionDate || '');
|
||||
if (from && day < String(from)) {
|
||||
return false;
|
||||
}
|
||||
if (to && day > String(to)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
get totalCredits(): number {
|
||||
return this.sumOf('CREDIT');
|
||||
}
|
||||
|
||||
get totalDebits(): number {
|
||||
return this.sumOf('DEBIT');
|
||||
}
|
||||
|
||||
private sumOf(direction: string): number {
|
||||
return this.shownTransactions
|
||||
.filter((txn: any) => txn.direction === direction)
|
||||
.reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
|
||||
}
|
||||
|
||||
/** Everything of one type ever credited, whatever the date filter says - for the summary cards. */
|
||||
totalOf(type: string): number {
|
||||
return this.transactions
|
||||
.filter((txn: any) => txn.transactionType === type && txn.direction === 'CREDIT')
|
||||
.reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
|
||||
}
|
||||
|
||||
/** Interest credited, less any taken back on an early closure. */
|
||||
get interestEarned(): number {
|
||||
const recovered = this.transactions
|
||||
.filter((txn: any) => txn.transactionType === 'PREMATURE_INT_RECOVERY')
|
||||
.reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
|
||||
return (
|
||||
this.totalOf('INTEREST_POST') +
|
||||
this.totalOf('OD_INTEREST_POST') +
|
||||
this.totalOf('PREMATURE_AGENT_TOP_UP') -
|
||||
recovered
|
||||
);
|
||||
}
|
||||
|
||||
/** Money that has left the account - payouts, withdrawals, transfers out. */
|
||||
get totalDebitsAll(): number {
|
||||
return this.transactions
|
||||
.filter((txn: any) => txn.direction === 'DEBIT' && txn.transactionType !== 'PREMATURE_INT_RECOVERY')
|
||||
.reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
|
||||
}
|
||||
|
||||
get lastTransactionDate(): string | null {
|
||||
return this.transactions.length > 0 ? this.transactions[0].transactionDate : null;
|
||||
}
|
||||
|
||||
/** The rows on screen, as a spreadsheet the branch can keep or send on. */
|
||||
exportCsv(): void {
|
||||
const header = [
|
||||
'#',
|
||||
'ID',
|
||||
'Transaction Date',
|
||||
'Transaction Type',
|
||||
'Voucher',
|
||||
'Description',
|
||||
'Account',
|
||||
'Debit',
|
||||
'Credit',
|
||||
'Balance'
|
||||
];
|
||||
const quote = (value: any) => `"${String(value ?? '').replace(/"/g, '""')}"`;
|
||||
const lines = this.shownTransactions.map((txn: any, index: number) =>
|
||||
[
|
||||
index + 1,
|
||||
txn.id,
|
||||
txn.transactionDate,
|
||||
this.label(txn.transactionType),
|
||||
txn.voucherNo,
|
||||
txn.description,
|
||||
txn.accountNo,
|
||||
txn.direction === 'DEBIT' ? txn.amount : '',
|
||||
txn.direction === 'CREDIT' ? txn.amount : '',
|
||||
txn.balanceAfterTransaction
|
||||
]
|
||||
.map(quote)
|
||||
.join(',')
|
||||
);
|
||||
const blob = new Blob(
|
||||
[[
|
||||
header.map(quote).join(','),
|
||||
...lines
|
||||
].join('\r\n')],
|
||||
{ type: 'text/csv;charset=utf-8' }
|
||||
);
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `${this.account?.accountNo || 'dds-account'}-transactions.csv`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(link.href);
|
||||
}
|
||||
|
||||
get hasDateFilters(): boolean {
|
||||
return !!(this.fromDateControl.value || this.toDateControl.value);
|
||||
}
|
||||
|
||||
showToday(): void {
|
||||
this.fromDateControl.setValue(this.today);
|
||||
this.toDateControl.setValue(this.today);
|
||||
}
|
||||
|
||||
clearDateFilters(): void {
|
||||
this.fromDateControl.setValue('');
|
||||
this.toDateControl.setValue('');
|
||||
}
|
||||
|
||||
label(type: string): string {
|
||||
return TRANSACTION_LABELS[type] || String(type || '').replace(/_/g, ' ');
|
||||
}
|
||||
|
||||
statusClass(): string {
|
||||
switch (this.account?.status) {
|
||||
case 'ACTIVE':
|
||||
return 'status--active';
|
||||
case 'CLOSED':
|
||||
return 'status--closed';
|
||||
default:
|
||||
return 'status--default';
|
||||
}
|
||||
}
|
||||
|
||||
back(): void {
|
||||
this.router.navigate(['/accounts/dds-accounts']);
|
||||
}
|
||||
|
||||
openInPartyMaster(): void {
|
||||
this.router.navigate([
|
||||
'/accounts/dds',
|
||||
this.account.id,
|
||||
'edit'
|
||||
]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="acl-page">
|
||||
<!-- Header -->
|
||||
<div class="acl-header accent--rd">
|
||||
<div class="acl-header__icon">
|
||||
<fa-icon icon="coins"></fa-icon>
|
||||
</div>
|
||||
<div class="acl-header__text">
|
||||
<h2 class="acl-header__title">DDS Accounts</h2>
|
||||
<span class="acl-header__count">
|
||||
@if (isLoading) {
|
||||
Loading...
|
||||
} @else {
|
||||
{{ allCount }} accounts · {{ activeCount }} active · {{ closedCount }} closed
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="acl-search-wrap">
|
||||
<div class="acl-search">
|
||||
<fa-icon icon="search" class="acl-search__icon"></fa-icon>
|
||||
<input
|
||||
[formControl]="searchControl"
|
||||
class="acl-search__input"
|
||||
[placeholder]="
|
||||
searchType === 'accountNo' ? 'Search by account number or party code…' : 'Search by client name…'
|
||||
"
|
||||
/>
|
||||
@if (searchControl.value) {
|
||||
<button class="acl-search__clear" (click)="clearSearch()">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<button
|
||||
class="acl-btn acl-btn--toggle"
|
||||
(click)="toggleSearchType()"
|
||||
[matTooltip]="'Switch to ' + (searchType === 'accountNo' ? 'client name' : 'account number') + ' search'"
|
||||
>
|
||||
<fa-icon icon="exchange-alt"></fa-icon>
|
||||
{{ searchType === 'accountNo' ? 'Acct No' : 'Client' }}
|
||||
</button>
|
||||
<button class="acl-btn acl-btn--icon" (click)="loadAccounts()" matTooltip="Refresh">
|
||||
<fa-icon icon="sync-alt"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Status: all accounts, only the open ones, or only the closed -->
|
||||
<div class="dds-status-filter" role="tablist">
|
||||
<button
|
||||
type="button"
|
||||
class="dds-status-filter__btn"
|
||||
[class.is-on]="statusFilter === 'ALL'"
|
||||
(click)="setStatusFilter('ALL')"
|
||||
>
|
||||
All <span class="dds-status-filter__count">{{ allCount }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="dds-status-filter__btn dds-status-filter__btn--active"
|
||||
[class.is-on]="statusFilter === 'ACTIVE'"
|
||||
(click)="setStatusFilter('ACTIVE')"
|
||||
>
|
||||
Active <span class="dds-status-filter__count">{{ activeCount }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="dds-status-filter__btn dds-status-filter__btn--closed"
|
||||
[class.is-on]="statusFilter === 'CLOSED'"
|
||||
(click)="setStatusFilter('CLOSED')"
|
||||
>
|
||||
Closed <span class="dds-status-filter__count">{{ closedCount }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Date Filters: by the day the account was opened -->
|
||||
<div class="acl-filters">
|
||||
<div class="acl-filters__group">
|
||||
<div class="acl-datepick">
|
||||
<span class="acl-datepick__label">Opened From</span>
|
||||
<input type="date" class="acl-datepick__input" [formControl]="fromDateControl" [max]="today" />
|
||||
</div>
|
||||
<div class="acl-filters__arrow">
|
||||
<fa-icon icon="arrow-right"></fa-icon>
|
||||
</div>
|
||||
<div class="acl-datepick">
|
||||
<span class="acl-datepick__label">To</span>
|
||||
<input type="date" class="acl-datepick__input" [formControl]="toDateControl" [max]="today" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acl-filters__sep"></div>
|
||||
|
||||
<div class="acl-datepick acl-datepick--ason">
|
||||
<span class="acl-datepick__label">
|
||||
<fa-icon icon="clock"></fa-icon>
|
||||
As On Date
|
||||
</span>
|
||||
<input type="date" class="acl-datepick__input" [formControl]="asOnDateControl" [max]="today" />
|
||||
</div>
|
||||
|
||||
@if (hasDateFilters) {
|
||||
<button class="acl-filters__clear" (click)="clearDateFilters()">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
Clear
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="acl-card">
|
||||
@if (isLoading) {
|
||||
<div class="acl-state acl-state--loading">
|
||||
<mat-spinner diameter="32"></mat-spinner>
|
||||
<span>Loading accounts…</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!isLoading && rows.length === 0) {
|
||||
<div class="acl-state acl-state--empty">
|
||||
<div class="acl-state__icon">
|
||||
<fa-icon icon="inbox"></fa-icon>
|
||||
</div>
|
||||
<p class="acl-state__title">No DDS accounts found</p>
|
||||
<p class="acl-state__sub">Try adjusting your search</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!isLoading && rows.length > 0) {
|
||||
<div class="acl-table-wrap">
|
||||
<table mat-table [dataSource]="rows" class="acl-table">
|
||||
<ng-container matColumnDef="accountNo">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th">Account No</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td">
|
||||
<span class="acl-acct-no">{{ row.accountNo }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="depositType">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Type</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
|
||||
<span class="acl-type-badge dtype--rd">DDS</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="clientName">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th">Client</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td">
|
||||
<div class="acl-client">
|
||||
<div class="acl-client__avatar">{{ (row.clientName || row.partyName || '?')[0] }}</div>
|
||||
<span class="acl-client__name">{{ row.clientName || row.partyName }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="productName">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th">Product</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td">
|
||||
<span class="acl-product">{{ row.subType }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="balance">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--right">Balance</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--right">
|
||||
<span class="acl-balance">₹ {{ row.currentBalance || 0 | formatNumber }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Status</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
|
||||
<span class="acl-status" [ngClass]="getStatusClass(row)">{{ row.status }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Actions</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
|
||||
<button class="acl-view-btn" (click)="$event.stopPropagation(); viewAccount(row)" matTooltip="View">
|
||||
<fa-icon icon="eye"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns" class="acl-header-row"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="acl-row" (click)="viewAccount(row)"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<mat-paginator
|
||||
[length]="totalRecords"
|
||||
[pageSize]="pageSize"
|
||||
[pageIndex]="pageIndex"
|
||||
[pageSizeOptions]="[10, 20, 50, 100]"
|
||||
(page)="onPageChange($event)"
|
||||
class="acl-paginator"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,56 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/* All / Active / Closed - which DDS accounts the list shows. */
|
||||
.dds-status-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 0 0 12px;
|
||||
|
||||
&__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 14px;
|
||||
border: 1px solid rgb(0 0 0 / 12%);
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: rgb(0 0 0 / 70%);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-on {
|
||||
border-color: #1565c0;
|
||||
background: #e3f2fd;
|
||||
color: #0d47a1;
|
||||
}
|
||||
|
||||
&--active.is-on {
|
||||
border-color: #2e7d32;
|
||||
background: #e8f5e9;
|
||||
color: #1b5e20;
|
||||
}
|
||||
|
||||
&--closed.is-on {
|
||||
border-color: #c62828;
|
||||
background: #ffebee;
|
||||
color: #b71c1c;
|
||||
}
|
||||
}
|
||||
|
||||
&__count {
|
||||
min-width: 22px;
|
||||
padding: 0 6px;
|
||||
border-radius: 999px;
|
||||
background: rgb(0 0 0 / 8%);
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
||||
import { NgClass } from '@angular/common';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import {
|
||||
MatCell,
|
||||
MatCellDef,
|
||||
MatColumnDef,
|
||||
MatHeaderCell,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderRow,
|
||||
MatHeaderRowDef,
|
||||
MatRow,
|
||||
MatRowDef,
|
||||
MatTable
|
||||
} from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { Subject, merge } from 'rxjs';
|
||||
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { FormatNumberPipe } from 'app/pipes/format-number.pipe';
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
|
||||
/**
|
||||
* The DDS accounts, listed the way Savings Accounts lists savings: account number, client, product,
|
||||
* balance and status, searched by account number or client and narrowed by opening date. Each opens
|
||||
* onto the account's own page and its transactions.
|
||||
*
|
||||
* Read-only. Accounts are opened and changed from DDS Party Master; money moves through collections,
|
||||
* the cashier and the batch runs.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-dds-accounts',
|
||||
templateUrl: './dds-accounts.component.html',
|
||||
// The Savings Accounts list's own look, so the two screens read as one family.
|
||||
styleUrls: [
|
||||
'../../accounts/accounts-list/accounts-list.component.scss',
|
||||
'./dds-accounts.component.scss'
|
||||
],
|
||||
standalone: true,
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
ReactiveFormsModule,
|
||||
NgClass,
|
||||
FaIconComponent,
|
||||
MatTable,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
MatCellDef,
|
||||
MatCell,
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow,
|
||||
MatPaginator,
|
||||
MatTooltipModule,
|
||||
MatProgressSpinnerModule,
|
||||
FormatNumberPipe
|
||||
]
|
||||
})
|
||||
export class DdsAccountsComponent implements OnInit, OnDestroy {
|
||||
private organizationService = inject(OrganizationService);
|
||||
private router = inject(Router);
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
displayedColumns = [
|
||||
'accountNo',
|
||||
'depositType',
|
||||
'clientName',
|
||||
'productName',
|
||||
'balance',
|
||||
'status',
|
||||
'actions'
|
||||
];
|
||||
|
||||
/** Every DDS account, fetched once; search, dates and paging work on this. */
|
||||
private allAccounts: any[] = [];
|
||||
/** The accounts matching the search and dates, whatever their status - what the status counts read. */
|
||||
private beforeStatus: any[] = [];
|
||||
/** The accounts matching the search, dates and status, before paging. */
|
||||
private matching: any[] = [];
|
||||
|
||||
/** Which accounts are shown: all of them, only the open ones, or only the closed. */
|
||||
statusFilter: 'ALL' | 'ACTIVE' | 'CLOSED' = 'ALL';
|
||||
/** The page on screen. */
|
||||
rows: any[] = [];
|
||||
|
||||
pageSize = 20;
|
||||
pageIndex = 0;
|
||||
isLoading = false;
|
||||
|
||||
searchControl = new FormControl('');
|
||||
searchType: 'accountNo' | 'clientName' = 'accountNo';
|
||||
fromDateControl = new FormControl('');
|
||||
toDateControl = new FormControl('');
|
||||
asOnDateControl = new FormControl('');
|
||||
|
||||
readonly today = new Date().toISOString().split('T')[0];
|
||||
|
||||
get totalRecords(): number {
|
||||
return this.matching.length;
|
||||
}
|
||||
|
||||
get activeCount(): number {
|
||||
return this.beforeStatus.filter((account) => account.status === 'ACTIVE').length;
|
||||
}
|
||||
|
||||
get closedCount(): number {
|
||||
return this.beforeStatus.filter((account) => account.status === 'CLOSED').length;
|
||||
}
|
||||
|
||||
get allCount(): number {
|
||||
return this.beforeStatus.length;
|
||||
}
|
||||
|
||||
setStatusFilter(status: 'ALL' | 'ACTIVE' | 'CLOSED'): void {
|
||||
this.statusFilter = status;
|
||||
this.pageIndex = 0;
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
get hasDateFilters(): boolean {
|
||||
return !!((this.fromDateControl.value && this.toDateControl.value) || this.asOnDateControl.value);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadAccounts();
|
||||
|
||||
this.searchControl.valueChanges
|
||||
.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
this.pageIndex = 0;
|
||||
this.applyFilters();
|
||||
});
|
||||
merge(this.fromDateControl.valueChanges, this.toDateControl.valueChanges, this.asOnDateControl.valueChanges)
|
||||
.pipe(debounceTime(300), takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
this.pageIndex = 0;
|
||||
this.applyFilters();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
loadAccounts(): void {
|
||||
this.isLoading = true;
|
||||
this.organizationService
|
||||
.getParties()
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (parties: any) => {
|
||||
// Newest first, as the savings list shows them.
|
||||
this.allAccounts = (Array.isArray(parties) ? parties : parties?.pageItems || []).sort(
|
||||
(a: any, b: any) => Number(b.id) - Number(a.id)
|
||||
);
|
||||
this.isLoading = false;
|
||||
this.applyFilters();
|
||||
},
|
||||
error: () => {
|
||||
this.allAccounts = [];
|
||||
this.isLoading = false;
|
||||
this.applyFilters();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Search by account number or client, and by the day the account was opened. */
|
||||
private applyFilters(): void {
|
||||
const term = String(this.searchControl.value || '')
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
const fromVal = this.fromDateControl.value;
|
||||
const toVal = this.toDateControl.value;
|
||||
const bothDates = !!(fromVal && toVal);
|
||||
const asOn = this.asOnDateControl.value;
|
||||
|
||||
this.beforeStatus = this.allAccounts.filter((account: any) => {
|
||||
if (term) {
|
||||
const haystack =
|
||||
this.searchType === 'accountNo'
|
||||
? `${account.accountNo || ''} ${account.partyCode || ''}`
|
||||
: `${account.clientName || ''} ${account.partyName || ''}`;
|
||||
if (!haystack.toLowerCase().includes(term)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const opened = String(account.openingDate || '');
|
||||
if (bothDates && opened && (opened < String(fromVal) || opened > String(toVal))) {
|
||||
return false;
|
||||
}
|
||||
// As on a date: the accounts that had been opened by then.
|
||||
if (asOn && opened && opened > String(asOn)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.matching =
|
||||
this.statusFilter === 'ALL'
|
||||
? this.beforeStatus
|
||||
: this.beforeStatus.filter((account: any) => account.status === this.statusFilter);
|
||||
this.showPage();
|
||||
}
|
||||
|
||||
private showPage(): void {
|
||||
const start = this.pageIndex * this.pageSize;
|
||||
this.rows = this.matching.slice(start, start + this.pageSize);
|
||||
}
|
||||
|
||||
onPageChange(event: PageEvent): void {
|
||||
this.pageIndex = event.pageIndex;
|
||||
this.pageSize = event.pageSize;
|
||||
this.showPage();
|
||||
}
|
||||
|
||||
toggleSearchType(): void {
|
||||
this.searchType = this.searchType === 'accountNo' ? 'clientName' : 'accountNo';
|
||||
this.pageIndex = 0;
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
clearSearch(): void {
|
||||
this.searchControl.setValue('');
|
||||
}
|
||||
|
||||
clearDateFilters(): void {
|
||||
this.fromDateControl.setValue('', { emitEvent: false });
|
||||
this.toDateControl.setValue('', { emitEvent: false });
|
||||
this.asOnDateControl.setValue('', { emitEvent: false });
|
||||
this.pageIndex = 0;
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
viewAccount(account: any): void {
|
||||
this.router.navigate([
|
||||
'/accounts/dds-accounts',
|
||||
account.id
|
||||
]);
|
||||
}
|
||||
|
||||
getStatusClass(account: any): string {
|
||||
switch (account?.status) {
|
||||
case 'ACTIVE':
|
||||
return 'status--active';
|
||||
case 'CLOSED':
|
||||
return 'status--closed';
|
||||
default:
|
||||
return 'status--default';
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user