KYC management: stage-wise notices, pagination, RD base chart
This commit is contained in:
+852
@@ -0,0 +1,852 @@
|
||||
<!--
|
||||
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="bkd">
|
||||
<div class="bkd-head">
|
||||
<div class="bkd-head-left">
|
||||
<div class="bkd-head-ic"><fa-icon icon="balance-scale"></fa-icon></div>
|
||||
<div>
|
||||
<h2 class="bkd-title">ALM Time-Bucket Breakdown</h2>
|
||||
<p class="bkd-sub">Day-wise breakdown of FD / RD / Loan from the as-on date</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bkd-head-actions">
|
||||
@if (view === 'config') {
|
||||
<button type="button" class="bkd-btn" [class.bkd-btn-on]="editMode" (click)="toggleEdit()">
|
||||
{{ editMode ? 'Done editing lines' : 'Edit lines' }}
|
||||
</button>
|
||||
<button type="button" class="bkd-btn" (click)="reset()">Reset to RBI defaults</button>
|
||||
}
|
||||
<button class="bkd-close" (click)="close()" matTooltip="Close" aria-label="Close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bkd-tabs" role="tablist">
|
||||
<button type="button" role="tab" class="bkd-tab" [class.on]="view === 'days'" (click)="view = 'days'">
|
||||
Day-wise breakdown
|
||||
</button>
|
||||
<button type="button" role="tab" class="bkd-tab" [class.on]="view === 'config'" (click)="view = 'config'">
|
||||
Configuration table
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bkd-body">
|
||||
@if (view === 'config') {
|
||||
<p class="bkd-note">
|
||||
<fa-icon icon="info-circle"></fa-icon> Each line shows which bucket its money goes to. You can change the
|
||||
<strong>%</strong> and the rule. Changes are saved in this browser straight away. Hover over a line name to see
|
||||
why it is slotted that way.
|
||||
</p>
|
||||
|
||||
@if (problemCount > 0) {
|
||||
<p class="bkd-warn bkd-banner">
|
||||
{{ problemCount }} line(s) have a % total that is not 100 or is not filled in yet. See the red or yellow
|
||||
totals below.
|
||||
</p>
|
||||
}
|
||||
}
|
||||
|
||||
@if (view === 'config') {
|
||||
<!-- The date the figures are as on, and how they are read -->
|
||||
<div class="bkd-toolbar">
|
||||
<label>
|
||||
<span>As-on date</span>
|
||||
<input type="date" [(ngModel)]="asOnIso" (ngModelChange)="loadBreakdown()" aria-label="As-on date" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Amount unit</span>
|
||||
<select [(ngModel)]="unit" aria-label="Unit">
|
||||
@for (u of units; track u.value) {
|
||||
<option [value]="u.value">{{ u.label }}</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
<div class="bkd-toolbar-state">
|
||||
@if (loading) {
|
||||
<span>Loading data from accounts…</span>
|
||||
} @else if (loadError) {
|
||||
<span class="bkd-warn">{{ loadError }}</span>
|
||||
} @else if (breakdown) {
|
||||
<span class="bkd-ok"> FD, RD and Loan data as on {{ breakdown.asOnDate }}. </span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (view === 'days') {
|
||||
<section class="bkd-days-view">
|
||||
<h4 class="bkd-h4 bkd-h4-first">1. Select</h4>
|
||||
<div class="bkd-modes" role="tablist">
|
||||
<button type="button" class="bkd-mode" [class.on]="selectBy === 'types'" (click)="setSelectBy('types')">
|
||||
By account type
|
||||
</button>
|
||||
<button type="button" class="bkd-mode" [class.on]="selectBy === 'accounts'" (click)="setSelectBy('accounts')">
|
||||
Individual accounts
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (selectBy === 'types') {
|
||||
<p class="bkd-days-intro">Tick one or more. You can pick from both sides together.</p>
|
||||
@for (grp of pickGroups; track grp.side) {
|
||||
<div class="bkd-pick-group">
|
||||
<div
|
||||
class="bkd-pick-title"
|
||||
[class.bkd-pick-liab]="grp.side === 'liability'"
|
||||
[class.bkd-pick-asset]="grp.side === 'asset'"
|
||||
>
|
||||
{{ grp.title }}
|
||||
</div>
|
||||
<div class="bkd-pick-list">
|
||||
@for (t of grp.items; track t.value) {
|
||||
<button
|
||||
type="button"
|
||||
class="bkd-pick-opt"
|
||||
[class.on]="isTypePicked(t.value)"
|
||||
role="checkbox"
|
||||
[attr.aria-checked]="isTypePicked(t.value)"
|
||||
(click)="toggleType(t.value)"
|
||||
>
|
||||
<span class="bkd-pick-box">{{ isTypePicked(t.value) ? '✓' : '' }}</span>
|
||||
{{ t.label }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="bkd-pick-actions">
|
||||
<button type="button" class="bkd-link" (click)="selectAllTypes()">Select all</button>
|
||||
<button type="button" class="bkd-link" (click)="clearTypes()">Clear</button>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="bkd-search">
|
||||
<input
|
||||
type="text"
|
||||
[(ngModel)]="searchText"
|
||||
(ngModelChange)="onSearchInput()"
|
||||
placeholder="Search by account number or customer name"
|
||||
aria-label="Search accounts"
|
||||
/>
|
||||
<select [(ngModel)]="searchKind" (ngModelChange)="onSearchInput()" aria-label="Kind of account">
|
||||
<option value="">All accounts</option>
|
||||
<option value="FD">FD</option>
|
||||
<option value="RD">RD</option>
|
||||
<option value="LOAN">Loan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@if (searching) {
|
||||
<p class="bkd-days-note">Searching…</p>
|
||||
} @else if (searchError) {
|
||||
<p class="bkd-warn">{{ searchError }}</p>
|
||||
} @else if (searchText.trim().length < 2) {
|
||||
<p class="bkd-days-note">Type at least 2 characters of an account number or a customer name.</p>
|
||||
} @else if (!searchResults.length) {
|
||||
<p class="bkd-days-note">No accounts found.</p>
|
||||
}
|
||||
|
||||
@if (searchResults.length) {
|
||||
<div class="bkd-hits">
|
||||
@for (hit of searchResults; track hit.kind + '-' + hit.id) {
|
||||
<button type="button" class="bkd-hit" [class.picked]="isPicked(hit)" (click)="pick(hit)">
|
||||
<span class="bkd-hit-kind">{{ hit.kind }}</span>
|
||||
<span class="bkd-hit-main">
|
||||
<strong>{{ hit.accountNo }}</strong> · {{ hit.customer }}
|
||||
<small
|
||||
>{{ hit.product }}
|
||||
@if (hit.date) {
|
||||
· matures {{ hit.date | date: 'dd-MMM-yyyy' }}
|
||||
}
|
||||
</small>
|
||||
</span>
|
||||
<span class="bkd-hit-amt">{{ amountText(hit.amount) }}</span>
|
||||
<span class="bkd-hit-state">{{ isPicked(hit) ? 'Selected' : 'Select' }}</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (picked.length) {
|
||||
<div class="bkd-picked">
|
||||
<strong>Selected ({{ picked.length }})</strong>
|
||||
@for (p of picked; track p.kind + '-' + p.id) {
|
||||
<span class="bkd-pill-sel">
|
||||
{{ p.kind }} {{ p.accountNo }}
|
||||
<button type="button" (click)="unpick(p)" aria-label="Remove">✕</button>
|
||||
</span>
|
||||
}
|
||||
<button type="button" class="bkd-link" (click)="clearPicked()">Clear all</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<h4 class="bkd-h4">2. Date and unit</h4>
|
||||
<div class="bkd-submit-row">
|
||||
<label>
|
||||
<span>As-on date</span>
|
||||
<input type="date" [(ngModel)]="asOnIso" (ngModelChange)="onAsOnChange()" aria-label="As-on date" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Amount unit</span>
|
||||
<select [(ngModel)]="unit" aria-label="Amount unit">
|
||||
@for (u of units; track u.value) {
|
||||
<option [value]="u.value">{{ u.label }}</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
<button type="button" class="bkd-btn bkd-btn-on bkd-submit" [disabled]="!canSubmit" (click)="submitReport()">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (reportShown && selectBy === 'types') {
|
||||
<section class="bkd-report-out">
|
||||
<h4 class="bkd-h4 bkd-report-title">
|
||||
{{ typeColumns.length }} account {{ typeColumns.length === 1 ? 'type' : 'types' }}
|
||||
<small>as on {{ asOnIso }} · Amounts in {{ unitWord }}</small>
|
||||
</h4>
|
||||
@if (loading) {
|
||||
<p class="bkd-days-note">Loading data from accounts…</p>
|
||||
}
|
||||
@if (loadError) {
|
||||
<p class="bkd-warn">{{ loadError }}</p>
|
||||
}
|
||||
@if (breakdown) {
|
||||
@for (c of typeColumns; track c.value) {
|
||||
@if (c.notice) {
|
||||
<p class="bkd-warn bkd-banner">{{ c.label }}: {{ c.notice }}</p>
|
||||
}
|
||||
}
|
||||
<div class="bkd-acc-wrap bkd-matrix-wrap">
|
||||
<table class="bkd-tbl bkd-matrix">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bucket</th>
|
||||
<th>Days</th>
|
||||
<th>Dates</th>
|
||||
@for (c of typeColumns; track c.value) {
|
||||
<th
|
||||
class="bkd-num"
|
||||
[class.bkd-pick-liab]="c.side === 'liability'"
|
||||
[class.bkd-pick-asset]="c.side === 'asset'"
|
||||
>
|
||||
{{ c.label }}
|
||||
</th>
|
||||
}
|
||||
@if (typeHasLiability && typeHasAsset) {
|
||||
<th class="bkd-num bkd-pick-liab">Liabilities total</th>
|
||||
<th class="bkd-num bkd-pick-asset">Assets total</th>
|
||||
} @else if (typeColumns.length > 1) {
|
||||
<th class="bkd-num">Total</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (r of typeMatrix; track r.label) {
|
||||
<tr [class.bkd-dim]="!r.liab && !r.asset">
|
||||
<td class="bkd-b-name">{{ r.label }}</td>
|
||||
<td>{{ r.days }}</td>
|
||||
<td>{{ r.dates }}</td>
|
||||
@for (v of r.cells; track $index) {
|
||||
<td class="bkd-num">{{ amountText(v) }}</td>
|
||||
}
|
||||
@if (typeHasLiability && typeHasAsset) {
|
||||
<td class="bkd-num">{{ amountText(r.liab) }}</td>
|
||||
<td class="bkd-num">{{ amountText(r.asset) }}</td>
|
||||
} @else if (typeColumns.length > 1) {
|
||||
<td class="bkd-num">{{ amountText(r.liab + r.asset) }}</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3">Total</td>
|
||||
@for (c of typeColumns; track c.value) {
|
||||
<td class="bkd-num">{{ amountText(c.total) }}</td>
|
||||
}
|
||||
@if (typeHasLiability && typeHasAsset) {
|
||||
<td class="bkd-num">{{ amountText(liabilityGrandTotal) }}</td>
|
||||
<td class="bkd-num">{{ amountText(assetGrandTotal) }}</td>
|
||||
} @else if (typeColumns.length > 1) {
|
||||
<td class="bkd-num">{{ amountText(liabilityGrandTotal + assetGrandTotal) }}</td>
|
||||
}
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<p class="bkd-days-note">
|
||||
Deposits and term loans are slotted by their own dates: a deposit once on its maturity date, a loan once
|
||||
for each unpaid instalment on its due date. Anything already due goes in the first bucket (a loan
|
||||
instalment follows the Overdue rule). CC / OD and NPA loans are divided by the bucket-wise % set for
|
||||
them in the Configuration table. Deposit amounts are balances, loan amounts are principal; interest is a
|
||||
separate line of the statement.
|
||||
</p>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
|
||||
@if (reportShown && selectBy === 'accounts') {
|
||||
<section class="bkd-report-out">
|
||||
<h4 class="bkd-h4 bkd-report-title">
|
||||
{{ picked.length }} {{ picked.length === 1 ? 'account' : 'accounts' }}
|
||||
<small>as on {{ asOnIso }} · Amounts in {{ unitWord }}</small>
|
||||
</h4>
|
||||
@if (reportLoading) {
|
||||
<p class="bkd-days-note">Loading…</p>
|
||||
}
|
||||
@if (reportError) {
|
||||
<p class="bkd-warn">{{ reportError }}</p>
|
||||
}
|
||||
@if (report; as rep) {
|
||||
<table class="bkd-tbl bkd-focus-tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bucket</th>
|
||||
<th>Days</th>
|
||||
<th>Dates</th>
|
||||
<th class="bkd-num">Amount</th>
|
||||
<th class="bkd-num">%</th>
|
||||
<th class="bkd-num">Entries</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (r of reportBuckets; track r.label) {
|
||||
<tr [class.bkd-dim]="!r.amount">
|
||||
<td class="bkd-b-name">{{ r.label }}</td>
|
||||
<td>{{ r.days }}</td>
|
||||
<td>{{ r.dates }}</td>
|
||||
<td class="bkd-num">{{ amountText(r.amount) }}</td>
|
||||
<td class="bkd-num">{{ r.amount ? (r.pct | number: '1.0-1') + '%' : '' }}</td>
|
||||
<td class="bkd-num">{{ r.count || '' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3">Total</td>
|
||||
<td class="bkd-num">{{ amountText(rep.total) }}</td>
|
||||
<td class="bkd-num">{{ rep.total ? '100%' : '' }}</td>
|
||||
<td class="bkd-num">{{ rep.count }}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<p class="bkd-days-note">
|
||||
A deposit counts once, on its maturity date; a loan counts once for each unpaid instalment, on its due
|
||||
date. Anything already due goes in the first bucket (a loan instalment follows the Overdue rule).
|
||||
Deposit amounts are balances, loan amounts are the principal of each instalment; interest is a separate
|
||||
line of the statement.
|
||||
</p>
|
||||
|
||||
<h4 class="bkd-h4">Each entry</h4>
|
||||
<div class="bkd-acc-wrap">
|
||||
<table class="bkd-tbl bkd-acc">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account</th>
|
||||
<th>Customer</th>
|
||||
<th>Product</th>
|
||||
<th>Due / maturity date</th>
|
||||
<th class="bkd-num">Days</th>
|
||||
<th>Bucket</th>
|
||||
<th>Status</th>
|
||||
<th class="bkd-num">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (r of rep.rows; track $index) {
|
||||
<tr>
|
||||
<td class="bkd-b-name">
|
||||
{{ r.kind }} {{ r.accountNo }}
|
||||
@if (r.installment) {
|
||||
<span class="bkd-b-hint">instalment {{ r.installment }}</span>
|
||||
}
|
||||
</td>
|
||||
<td>{{ r.customer }}</td>
|
||||
<td>
|
||||
{{ r.product }}
|
||||
@if (r.note) {
|
||||
<div class="bkd-warn">{{ r.note }}</div>
|
||||
}
|
||||
</td>
|
||||
<td>{{ r.date ? (r.date | date: 'dd-MMM-yyyy') : '—' }}</td>
|
||||
<td class="bkd-num">{{ r.days === null ? '' : r.days }}</td>
|
||||
<td>{{ bucketName(r.bucket) }}</td>
|
||||
<td>{{ r.status }}</td>
|
||||
<td class="bkd-num">{{ amountText(r.amount) }}</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr>
|
||||
<td colspan="8" class="bkd-empty">Nothing to show for these accounts on this date.</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
</section>
|
||||
} @else {
|
||||
<section class="bkd-setup">
|
||||
<div class="bkd-range-head">
|
||||
<h4 class="bkd-h4 bkd-h4-first">Bucket ranges</h4>
|
||||
<button type="button" class="bkd-btn bkd-btn-sm" [class.bkd-btn-on]="rangeEdit" (click)="toggleRangeEdit()">
|
||||
{{ rangeEdit ? 'Done' : 'Edit' }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="bkd-days-intro">
|
||||
@if (rangeEdit) {
|
||||
Change the Start / End of a bucket, or add and remove buckets. When you change the End of a bucket, the
|
||||
Start of the next one and its heading change with it.
|
||||
} @else {
|
||||
Start and End of each bucket. Click Edit to change, add or remove buckets.
|
||||
}
|
||||
</p>
|
||||
<table class="bkd-tbl bkd-range">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Start</th>
|
||||
<th>End</th>
|
||||
<th>Heading</th>
|
||||
<th>Days / Dates</th>
|
||||
@if (rangeEdit) {
|
||||
<th></th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (b of cfg.buckets; track $index) {
|
||||
<tr>
|
||||
<td class="bkd-range-n">{{ $index + 1 }}</td>
|
||||
<td>
|
||||
@if (fromOf($index); as f) {
|
||||
@if (rangeEdit) {
|
||||
<span class="bkd-span-edit">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
[ngModel]="f.n"
|
||||
(ngModelChange)="setFrom($index, { n: $event })"
|
||||
aria-label="Start"
|
||||
/>
|
||||
<select
|
||||
[ngModel]="f.unit"
|
||||
(ngModelChange)="setFrom($index, { unit: $event })"
|
||||
aria-label="Start unit"
|
||||
>
|
||||
<option value="day">d</option>
|
||||
<option value="month">m</option>
|
||||
<option value="year">y</option>
|
||||
</select>
|
||||
</span>
|
||||
} @else {
|
||||
<span class="bkd-range-val">{{ f.n }} {{ unitLetter(f.unit) }}</span>
|
||||
}
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
@if (b.upTo; as t) {
|
||||
@if (rangeEdit) {
|
||||
<span class="bkd-span-edit">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
[ngModel]="t.n"
|
||||
(ngModelChange)="setTo($index, { n: $event })"
|
||||
aria-label="End"
|
||||
/>
|
||||
<select
|
||||
[ngModel]="t.unit"
|
||||
(ngModelChange)="setTo($index, { unit: $event })"
|
||||
aria-label="End unit"
|
||||
>
|
||||
<option value="day">d</option>
|
||||
<option value="month">m</option>
|
||||
<option value="year">y</option>
|
||||
</select>
|
||||
</span>
|
||||
} @else {
|
||||
<span class="bkd-range-val">{{ t.n }} {{ unitLetter(t.unit) }}</span>
|
||||
}
|
||||
} @else {
|
||||
<span class="bkd-none">end</span>
|
||||
}
|
||||
</td>
|
||||
<td class="bkd-b-name">
|
||||
{{ b.label }}
|
||||
@if (rangeProblem($index); as problem) {
|
||||
<div class="bkd-warn">{{ problem }}</div>
|
||||
}
|
||||
</td>
|
||||
<td class="bkd-b-hint">
|
||||
@if (windows[$index]; as w) {
|
||||
{{ dayRange(w) }} · {{ dateRange(w) }}
|
||||
}
|
||||
</td>
|
||||
@if (rangeEdit) {
|
||||
<td>
|
||||
@if (cfg.buckets.length > 2) {
|
||||
<button
|
||||
type="button"
|
||||
class="bkd-x"
|
||||
(click)="removeBucket($index)"
|
||||
matTooltip="Remove this bucket"
|
||||
aria-label="Remove bucket"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@if (rangeEdit) {
|
||||
<!-- A bucket the rules did not have yesterday: add it here, it lands in date order -->
|
||||
<div class="bkd-addbucket">
|
||||
<span class="bkd-addbucket-title">+ Add a bucket ending at:</span>
|
||||
<span class="bkd-span-edit">
|
||||
<input type="number" min="1" [(ngModel)]="newEnd.n" aria-label="End of the new bucket" />
|
||||
<select [(ngModel)]="newEnd.unit" aria-label="Unit of the new bucket">
|
||||
<option value="day">d</option>
|
||||
<option value="month">m</option>
|
||||
<option value="year">y</option>
|
||||
</select>
|
||||
</span>
|
||||
<button type="button" class="bkd-btn bkd-btn-sm" (click)="addBucket()">Add</button>
|
||||
<span class="bkd-b-hint">
|
||||
It is placed in the right position automatically and splits the bucket it falls inside into two.
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="bkd-calc">
|
||||
<label>
|
||||
<span>Check a maturity date</span>
|
||||
<input type="date" [(ngModel)]="maturityIso" aria-label="Maturity date" />
|
||||
</label>
|
||||
@if (dayCheck; as c) {
|
||||
<div class="bkd-calc-out">
|
||||
@if (c.due) {
|
||||
<strong>Already due</strong> ({{ -c.days }} days ago) → <strong>{{ c.bucket }}</strong>
|
||||
} @else {
|
||||
<strong>{{ c.days }} days left</strong> → <strong>{{ c.bucket }}</strong>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<div class="bkd-calc-out bkd-none">Pick a maturity date and its bucket will show here.</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ The configuration table, laid out like the filed statement ═══ -->
|
||||
@for (sec of sections; track sec.side) {
|
||||
<div class="bkd-sheet-wrap">
|
||||
<table class="bkd-sheet">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="3" rowspan="2" class="s-title">{{ sec.title }}</th>
|
||||
<th [attr.colspan]="cfg.buckets.length" class="s-span">RESIDUAL MATURITY</th>
|
||||
<th rowspan="2" class="s-total-h">Total</th>
|
||||
@if (editMode) {
|
||||
<th rowspan="2" class="s-tools-h">Line</th>
|
||||
}
|
||||
</tr>
|
||||
<tr>
|
||||
@for (b of cfg.buckets; track $index) {
|
||||
<th class="s-bucket">{{ b.label }}</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (item of itemsOf(sec.side); track item.id) {
|
||||
@if (item.header) {
|
||||
<tr class="s-head">
|
||||
<td class="s-ref">
|
||||
@if (editMode) {
|
||||
<input type="text" [(ngModel)]="item.ref" (ngModelChange)="changed()" aria-label="Number" />
|
||||
} @else {
|
||||
{{ item.ref }}
|
||||
}
|
||||
</td>
|
||||
<td colspan="2" class="s-name">
|
||||
@if (editMode) {
|
||||
<input type="text" [(ngModel)]="item.name" (ngModelChange)="changed()" aria-label="Naam" />
|
||||
} @else {
|
||||
{{ item.name }}
|
||||
}
|
||||
</td>
|
||||
<td [attr.colspan]="cfg.buckets.length + 1" class="s-head-fill"></td>
|
||||
@if (editMode) {
|
||||
<td class="s-tools">
|
||||
<button type="button" class="bkd-x" (click)="removeLine(item)" aria-label="Hatayein">
|
||||
✕
|
||||
</button>
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
} @else {
|
||||
<tr [class.s-off]="item.included === false">
|
||||
<td class="s-ref">
|
||||
@if (editMode) {
|
||||
<input type="text" [(ngModel)]="item.ref" (ngModelChange)="changed()" aria-label="Number" />
|
||||
} @else {
|
||||
{{ item.ref }}
|
||||
}
|
||||
</td>
|
||||
<td
|
||||
class="s-name"
|
||||
[class.s-sub]="item.level === 1"
|
||||
[matTooltip]="item.reason"
|
||||
matTooltipPosition="above"
|
||||
>
|
||||
@if (editMode) {
|
||||
<input type="text" [(ngModel)]="item.name" (ngModelChange)="changed()" aria-label="Naam" />
|
||||
} @else {
|
||||
{{ item.name }}
|
||||
}
|
||||
</td>
|
||||
<td class="s-rule">
|
||||
<select
|
||||
[ngModel]="item.rule"
|
||||
(ngModelChange)="ruleChanged(item, $event)"
|
||||
aria-label="Rule"
|
||||
[matTooltip]="item.reason"
|
||||
>
|
||||
@for (r of ruleOptions; track r.value) {
|
||||
<option [value]="r.value">{{ r.label }}</option>
|
||||
}
|
||||
</select>
|
||||
@if (item.rule === 'maturity' || item.rule === 'behavioural') {
|
||||
<!-- Which accounts fill a due-date line, or give a percentage-split line its total -->
|
||||
<select
|
||||
class="s-src"
|
||||
[(ngModel)]="item.source"
|
||||
(ngModelChange)="changed()"
|
||||
aria-label="Which accounts the amount comes from"
|
||||
matTooltip="Which accounts the amount of this line comes from"
|
||||
>
|
||||
@for (o of sourceOptions; track o.value) {
|
||||
<option [value]="o.value">{{ o.label }}</option>
|
||||
}
|
||||
</select>
|
||||
}
|
||||
</td>
|
||||
|
||||
@if (item.rule === 'maturity') {
|
||||
@if (autoAmounts(item); as amounts) {
|
||||
<!-- Filled by the accounts themselves, each in the bucket of its own date -->
|
||||
@for (v of amounts; track $index) {
|
||||
<td class="s-auto" [class.s-auto-zero]="!v">{{ amountText(v) }}</td>
|
||||
}
|
||||
<td class="s-tot s-auto-total" [matTooltip]="autoAccounts(item) + ' accounts'">
|
||||
{{ amountText(autoTotal(amounts)) }}
|
||||
</td>
|
||||
} @else {
|
||||
<td [attr.colspan]="cfg.buckets.length" class="s-due">
|
||||
@if (!item.source) {
|
||||
This line has to be filled by hand: it has no account source yet
|
||||
} @else if (loading) {
|
||||
Data aa raha hai…
|
||||
} @else {
|
||||
No data came from the accounts
|
||||
}
|
||||
</td>
|
||||
<td class="s-tot">—</td>
|
||||
}
|
||||
} @else if (item.rule === 'fixed') {
|
||||
<!-- A fixed line sits in one bucket: click the bucket it should move to -->
|
||||
@for (b of cfg.buckets; track $index) {
|
||||
<td
|
||||
class="s-cell s-pick"
|
||||
[class.s-cell-on]="share(item, $index) !== null"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
[attr.aria-label]="'Put it in ' + b.label"
|
||||
[matTooltip]="share(item, $index) !== null ? b.label : 'Yahan le jaayein: ' + b.label"
|
||||
(click)="setFixed(item, $index)"
|
||||
(keydown.enter)="setFixed(item, $index)"
|
||||
(keydown.space)="setFixed(item, $index); $event.preventDefault()"
|
||||
>
|
||||
{{ share(item, $index) !== null ? '100%' : '' }}
|
||||
</td>
|
||||
}
|
||||
} @else {
|
||||
@for (b of cfg.buckets; track $index) {
|
||||
<td class="s-cell s-cell-input" [class.s-cell-on]="share(item, $index) !== null">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
step="any"
|
||||
placeholder="%"
|
||||
[ngModel]="share(item, $index)"
|
||||
(ngModelChange)="setShare(item, $index, $event)"
|
||||
[attr.aria-label]="b.label"
|
||||
/>
|
||||
</td>
|
||||
}
|
||||
<td
|
||||
class="s-tot"
|
||||
[class.s-tot-ok]="rowState(item) === 'ok'"
|
||||
[class.s-tot-bad]="rowState(item) === 'bad'"
|
||||
[class.s-tot-todo]="rowState(item) === 'todo'"
|
||||
>
|
||||
{{ rowState(item) === 'todo' ? 'fill in' : rowTotal(item) + '%' }}
|
||||
</td>
|
||||
}
|
||||
|
||||
@if (editMode) {
|
||||
<td class="s-tools">
|
||||
<label class="s-incl" matTooltip="Show in report">
|
||||
<input
|
||||
type="checkbox"
|
||||
[ngModel]="item.included !== false"
|
||||
(ngModelChange)="item.included = $event; changed()"
|
||||
aria-label="In report"
|
||||
/>
|
||||
</label>
|
||||
<button type="button" class="bkd-x" (click)="removeLine(item)" aria-label="Hatayein">
|
||||
✕
|
||||
</button>
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
@if (editMode) {
|
||||
<button type="button" class="bkd-btn bkd-btn-sm s-add" (click)="addLine(sec.side)">
|
||||
+ Add {{ sec.title === 'OUTFLOWS' ? 'an Outflow' : 'an Inflow' }} line
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (editMode) {
|
||||
<div class="bkd-bucket-edit">
|
||||
<div class="bkd-editor-sub">Bucket names and day span</div>
|
||||
@for (b of cfg.buckets; track $index) {
|
||||
<div class="bkd-bucket-edit-row">
|
||||
<span class="bkd-step-n">{{ $index + 1 }}</span>
|
||||
<input type="text" [(ngModel)]="b.label" (ngModelChange)="changed()" aria-label="Bucket name" />
|
||||
<input type="text" [(ngModel)]="b.hint" (ngModelChange)="changed()" aria-label="Bucket description" />
|
||||
<div class="bkd-span">
|
||||
@if (b.upTo) {
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
[(ngModel)]="b.upTo.n"
|
||||
(ngModelChange)="bucketsChanged()"
|
||||
aria-label="How far it reaches"
|
||||
/>
|
||||
<select [(ngModel)]="b.upTo.unit" (ngModelChange)="bucketsChanged()" aria-label="Unit">
|
||||
<option value="day">d</option>
|
||||
<option value="month">m</option>
|
||||
<option value="year">y</option>
|
||||
</select>
|
||||
} @else {
|
||||
<span class="bkd-none">No end</span>
|
||||
}
|
||||
<label class="bkd-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
[ngModel]="!b.upTo"
|
||||
(ngModelChange)="setOpenEnded(b, $event)"
|
||||
aria-label="No end"
|
||||
/>
|
||||
No end
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (cfg.overdue; as o) {
|
||||
<div class="bkd-editor-sub bkd-overdue-title">Overdue (due but not received): which bucket</div>
|
||||
<div class="bkd-overdue">
|
||||
<label>
|
||||
<span>Overdue less than a month</span>
|
||||
<select [(ngModel)]="o.recent" (ngModelChange)="bucketsChanged()" aria-label="Recent overdue bucket">
|
||||
@for (b of cfg.buckets; track $index) {
|
||||
<option [ngValue]="$index">{{ b.label }}</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Overdue more than a month</span>
|
||||
<select [(ngModel)]="o.old" (ngModelChange)="bucketsChanged()" aria-label="Old overdue bucket">
|
||||
@for (b of cfg.buckets; track $index) {
|
||||
<option [ngValue]="$index">{{ b.label }}</option>
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- What the accounts could not put in a date bucket, so nothing is silently left out -->
|
||||
@if (breakdown; as b) {
|
||||
<section class="bkd-apart-box">
|
||||
<h4 class="bkd-h4">Shown separately (not slotted by date)</h4>
|
||||
<ul class="bkd-apart">
|
||||
@for (n of b.notSlotted; track n.key) {
|
||||
<li>
|
||||
<strong>{{ n.label }}</strong> — {{ n.accounts }} loan, outstanding
|
||||
{{ amountText(n.outstanding) }}
|
||||
<div class="bkd-b-hint">{{ n.why }}</div>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
<ul class="bkd-notes">
|
||||
@for (note of b.notes; track note) {
|
||||
<li>{{ note }}</li>
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
}
|
||||
|
||||
<!-- ═══ What the report will show ═══ -->
|
||||
<section class="bkd-report">
|
||||
<h3 class="bkd-h3">What the report will show</h3>
|
||||
<div class="bkd-report-card">
|
||||
<div class="r-title">Statement of Structural Liquidity as on {{ asOnIso }}</div>
|
||||
<div class="r-sub">( Amounts in {{ unitWord }} )</div>
|
||||
</div>
|
||||
<ul class="bkd-report-list">
|
||||
<li>
|
||||
Two tables, <strong>OUTFLOWS</strong> and <strong>INFLOWS</strong>, with the lines above. Each line’s amount
|
||||
sits in its bucket, with a <strong>Total</strong> in the last column.
|
||||
</li>
|
||||
<li><strong>A. TOTAL OUTFLOWS</strong> — the sum of all outflow lines, bucket by bucket.</li>
|
||||
<li><strong>B. TOTAL INFLOWS</strong> — the sum of all inflow lines, bucket by bucket.</li>
|
||||
<li><strong>C. MISMATCH (B − A)</strong> — inflow minus outflow, in each bucket.</li>
|
||||
<li>
|
||||
<strong>D. CUMULATIVE MISMATCH</strong> — running total of C, from the first bucket up to that bucket.
|
||||
</li>
|
||||
<li><strong>E. C as % to A</strong> — mismatch divided by outflow, times 100.</li>
|
||||
@for (l of cfg.limits; track $index) {
|
||||
<li class="bkd-limit">
|
||||
<strong>{{ cfg.buckets[l.bucket]?.label }}</strong
|
||||
>: negative mismatch must not exceed {{ l.pct }}%. The report shows it in red when it does.
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
<p class="bkd-days-note">
|
||||
Where the amount comes from: <strong>By due date</strong> lines take their data from FD, RD and Loan accounts.
|
||||
<strong>Fixed</strong>, <strong>Split</strong> and <strong>By study</strong> lines take the ledger (GL)
|
||||
balance and apply the % above. Lines with no register have to be filled in by hand.
|
||||
</p>
|
||||
</section>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user