feat: cashier denomination-wise opening & closing balance panels in all deposit/withdrawal forms
OVERVIEW
--------
Added real-time cashier cash position display inside the denomination breakdown
panel of all 4 transaction entry screens: Savings, Current Account, Recurring
Deposit, and Fixed Deposit. Shows opening balance at the top and projected
closing balance at the bottom after factoring in the current transaction.
BACKEND INTEGRATION
-------------------
- New CashierService (src/app/cashier/cashier.service.ts)
getCashierPositionForMe(asOfDate?) calls GET /cashreports/cashier-position/me
Returns denomination-wise opening cash position for the logged-in cashier user.
Non-cashier users receive empty denominations array; UI hides panels silently.
OPENING BALANCE CARD (top of denomination panel)
-------------------------------------------------
- Loaded on ngOnInit() via loadOpeningPosition() in all 4 component .ts files
- Notes and Coins displayed in separate labeled pill sections
- Each pill shows: Rs{value} x{count} format
- Card is hidden entirely if the logged-in user is not a cashier
CLOSING BALANCE CARD (below tally / Apply button)
--------------------------------------------------
- Computed getter closingDenoms() merges opening position with entered denominations
deposit: closingCount = openCount + enteredCount
withdrawal: closingCount = openCount - enteredCount
- Notes and Coins in separate labeled pill sections (identical format to opening)
- Entered/changed denominations (delta != 0): full opacity + bold font weight
- Untouched denominations (delta = 0): 38% opacity, clearly dimmed, no borders
- closingTotal = openingTotal +/- denominationTotal shown in card header
- Card turns green for positive closing balance, red for negative
COMPONENTS UPDATED
------------------
- savings-account-transactions (.ts / .html / .scss)
- current-account-transactions (.ts / .html / .scss)
- deposit-recurring-deposits-account (.ts / .html / .scss)
- fixed-deposits-cash-transaction (.ts / .html / .scss)
CASHIER MODULE (new - src/app/cashier/)
-----------------------------------------
Full cashier workspace module added to the app:
- cashier.service.ts API calls (position, transfers, settlement, etc.)
- cashier.module.ts Angular module declaration
- cashier-routing.module.ts Lazy-loaded routes
- cashier-position/ Cashier cash position dashboard
- cash-exchange-entry/ Cash exchange denomination entry
- cash-history/ Transaction history per cashier
- cash-settlement/ End-of-day cash settlement
- cash-transfer/ Vault-to-cashier cash transfer
- inter-cashier-transfer/ Transfer between cashier drawers
- reconciliation/ Cash reconciliation with GL
- closing-cash-report/ Closing balance report
- currency-exchange-detail/ Currency exchange breakdown
- excess-transaction-report/ Excess/short transaction report
Module wired into app.module.ts and shell nav (shell.component.html).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
555d9fb4b7
commit
7ccaffa7f1
@@ -0,0 +1,160 @@
|
||||
<!--
|
||||
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="cx">
|
||||
<header class="cx-head">
|
||||
<div>
|
||||
<div class="cx-eyebrow">CASHIER · CASH EXCHANGE</div>
|
||||
<h1 class="cx-title">Cash Exchange Entry</h1>
|
||||
<p class="cx-sub">Customer gives notes/coins and takes equal-value change. Net amount must be ₹0.</p>
|
||||
</div>
|
||||
<div class="cx-toolbar">
|
||||
<label class="cx-field">
|
||||
<span>Date</span>
|
||||
<input type="date" [value]="exchangeDate" (change)="exchangeDate = $any($event.target).value" />
|
||||
</label>
|
||||
<button type="button" class="cx-btn cx-btn--ghost" (click)="clear()"><mat-icon>undo</mat-icon> Clear</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="cx-cols">
|
||||
<!-- RECEIVED -->
|
||||
<section class="cx-col cx-col--received">
|
||||
<header class="cx-col-head">
|
||||
<mat-icon>south</mat-icon>
|
||||
<span class="cx-col-title">Received from customer</span>
|
||||
<span class="cx-col-total">₹{{ receivedTotal | number: '1.2-2' }}</span>
|
||||
</header>
|
||||
<div class="cx-list">
|
||||
@if (notes.length) {
|
||||
<div class="cx-subhead">Bank Notes</div>
|
||||
}
|
||||
@for (d of notes; track d.id) {
|
||||
<div class="cx-row">
|
||||
<span class="cx-chip">{{ d.label }}</span>
|
||||
<div class="cx-step">
|
||||
<button type="button" (click)="bump('r', d, -1)" [disabled]="countFor('r', d) === 0">−</button>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
[value]="countFor('r', d)"
|
||||
(input)="onChange('r', d, $any($event.target).value)"
|
||||
/>
|
||||
<button type="button" (click)="bump('r', d, 1)">+</button>
|
||||
</div>
|
||||
<span class="cx-amt" [class.cx-amt--zero]="countFor('r', d) === 0"
|
||||
>₹{{ subtotal('r', d) | number: '1.2-2' }}</span
|
||||
>
|
||||
</div>
|
||||
}
|
||||
@if (coins.length) {
|
||||
<div class="cx-subhead">Coins</div>
|
||||
}
|
||||
@for (d of coins; track d.id) {
|
||||
<div class="cx-row">
|
||||
<span class="cx-chip cx-chip--coin">{{ d.label }}</span>
|
||||
<div class="cx-step">
|
||||
<button type="button" (click)="bump('r', d, -1)" [disabled]="countFor('r', d) === 0">−</button>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
[value]="countFor('r', d)"
|
||||
(input)="onChange('r', d, $any($event.target).value)"
|
||||
/>
|
||||
<button type="button" (click)="bump('r', d, 1)">+</button>
|
||||
</div>
|
||||
<span class="cx-amt" [class.cx-amt--zero]="countFor('r', d) === 0"
|
||||
>₹{{ subtotal('r', d) | number: '1.2-2' }}</span
|
||||
>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- GIVEN -->
|
||||
<section class="cx-col cx-col--given">
|
||||
<header class="cx-col-head">
|
||||
<mat-icon>north</mat-icon>
|
||||
<span class="cx-col-title">Given to customer</span>
|
||||
<span class="cx-col-total">₹{{ givenTotal | number: '1.2-2' }}</span>
|
||||
</header>
|
||||
<div class="cx-list">
|
||||
@if (notes.length) {
|
||||
<div class="cx-subhead">Bank Notes</div>
|
||||
}
|
||||
@for (d of notes; track d.id) {
|
||||
<div class="cx-row">
|
||||
<span class="cx-chip">{{ d.label }}</span>
|
||||
<div class="cx-step">
|
||||
<button type="button" (click)="bump('g', d, -1)" [disabled]="countFor('g', d) === 0">−</button>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
[value]="countFor('g', d)"
|
||||
(input)="onChange('g', d, $any($event.target).value)"
|
||||
/>
|
||||
<button type="button" (click)="bump('g', d, 1)">+</button>
|
||||
</div>
|
||||
<span class="cx-amt" [class.cx-amt--zero]="countFor('g', d) === 0"
|
||||
>₹{{ subtotal('g', d) | number: '1.2-2' }}</span
|
||||
>
|
||||
</div>
|
||||
}
|
||||
@if (coins.length) {
|
||||
<div class="cx-subhead">Coins</div>
|
||||
}
|
||||
@for (d of coins; track d.id) {
|
||||
<div class="cx-row">
|
||||
<span class="cx-chip cx-chip--coin">{{ d.label }}</span>
|
||||
<div class="cx-step">
|
||||
<button type="button" (click)="bump('g', d, -1)" [disabled]="countFor('g', d) === 0">−</button>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
[value]="countFor('g', d)"
|
||||
(input)="onChange('g', d, $any($event.target).value)"
|
||||
/>
|
||||
<button type="button" (click)="bump('g', d, 1)">+</button>
|
||||
</div>
|
||||
<span class="cx-amt" [class.cx-amt--zero]="countFor('g', d) === 0"
|
||||
>₹{{ subtotal('g', d) | number: '1.2-2' }}</span
|
||||
>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="cx-summary">
|
||||
<div class="cx-sum">
|
||||
<span>Received</span><strong>₹{{ receivedTotal | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
<mat-icon>swap_horiz</mat-icon>
|
||||
<div class="cx-sum">
|
||||
<span>Given</span><strong>₹{{ givenTotal | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
<div class="cx-sum">
|
||||
<span>Difference</span>
|
||||
<strong [class.cx-bad]="difference !== 0" [class.cx-good]="matches">₹{{ difference | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (receivedTotal > 0 && !matches) {
|
||||
<div class="cx-warn"><mat-icon>warning</mat-icon> Received and Given totals must match (net ₹0).</div>
|
||||
}
|
||||
|
||||
<div class="cx-actions">
|
||||
<label class="cx-field cx-field--note">
|
||||
<span>Note</span>
|
||||
<input type="text" [value]="note" (input)="note = $any($event.target).value" placeholder="Optional" />
|
||||
</label>
|
||||
<button type="button" class="cx-btn cx-btn--primary" [disabled]="!matches || saving" (click)="submit()">
|
||||
<mat-icon>swap_horiz</mat-icon> Confirm Exchange
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user