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:
Jaanu423
2026-05-28 17:39:31 +05:30
co-authored by Claude Sonnet 4.6
parent 555d9fb4b7
commit 7ccaffa7f1
43 changed files with 5302 additions and 8 deletions
@@ -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>
@@ -0,0 +1,336 @@
/**
* 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/.
*/
:host {
display: block;
}
.cx {
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.cx-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.cx-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
color: #0f4f3c;
}
.cx-title {
font-size: 26px;
font-weight: 600;
margin: 4px 0 2px;
color: #1a1a1a;
}
.cx-sub {
font-size: 13px;
color: #64748b;
margin: 0;
}
.cx-toolbar {
display: flex;
align-items: flex-end;
gap: 10px;
}
.cx-field {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: #64748b;
input {
height: 36px;
padding: 0 10px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 13px;
color: #0d1b2a;
}
&--note {
flex: 1 1 auto;
}
}
.cx-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.cx-col {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
}
.cx-col-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
color: #fff;
mat-icon {
font-size: 18px;
height: 18px;
width: 18px;
}
.cx-col-title {
flex: 1 1 auto;
font-weight: 700;
font-size: 13px;
}
.cx-col-total {
font-weight: 800;
font-variant-numeric: tabular-nums;
}
}
.cx-col--received .cx-col-head {
background: linear-gradient(135deg, #047857, #059669);
}
.cx-col--given .cx-col-head {
background: linear-gradient(135deg, #b45309, #d97706);
}
.cx-list {
padding: 6px 0;
max-height: 360px;
overflow-y: auto;
}
.cx-subhead {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #94a3b8;
padding: 8px 14px 4px;
}
.cx-row {
display: grid;
grid-template-columns: 64px 1fr 96px;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-bottom: 1px dotted #eef2f7;
}
.cx-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
height: 26px;
padding: 0 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
background: linear-gradient(135deg, #ecfeff, #cffafe);
color: #155e75;
border: 1px solid #a5f3fc;
&--coin {
border-radius: 50%;
min-width: 34px;
width: 34px;
height: 34px;
padding: 0;
background: linear-gradient(135deg, #fef9c3, #fde68a);
color: #854d0e;
border: 1px solid #fcd34d;
}
}
.cx-step {
display: flex;
align-items: stretch;
height: 30px;
width: 120px;
border: 1px solid #e2e8f0;
border-radius: 7px;
overflow: hidden;
button {
width: 30px;
background: #f8fafc;
border: none;
font-size: 16px;
font-weight: 700;
color: #475569;
cursor: pointer;
&:disabled {
opacity: 0.4;
cursor: not-allowed;
}
}
input {
flex: 1 1 auto;
width: 100%;
border: none;
outline: none;
text-align: center;
font-size: 13px;
font-weight: 700;
color: #0d1b2a;
appearance: textfield;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
}
}
.cx-amt {
text-align: right;
font-size: 13px;
font-weight: 700;
color: #0d1b2a;
font-variant-numeric: tabular-nums;
&--zero {
color: #cbd5e1;
font-weight: 600;
}
}
.cx-summary {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
padding: 14px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
mat-icon {
color: #94a3b8;
}
}
.cx-sum {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
span {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
}
strong {
font-size: 16px;
font-weight: 800;
color: #0d1b2a;
font-variant-numeric: tabular-nums;
}
}
.cx-bad {
color: #b91c1c;
}
.cx-good {
color: #047857;
}
.cx-warn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 8px;
background: #fffbeb;
border: 1px solid #fde68a;
color: #92400e;
font-size: 13px;
mat-icon {
font-size: 18px;
height: 18px;
width: 18px;
}
}
.cx-actions {
display: flex;
align-items: flex-end;
gap: 12px;
}
.cx-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
mat-icon {
font-size: 18px;
height: 18px;
width: 18px;
}
&--ghost {
background: #fff;
border-color: #e2e8f0;
color: #475569;
}
&--primary {
background: linear-gradient(135deg, #1f7a4d, #0f4f3c);
color: #fff;
&:disabled {
opacity: 0.45;
cursor: not-allowed;
}
}
}
@media (width <= 820px) {
.cx-cols {
grid-template-columns: 1fr;
}
}
@@ -0,0 +1,142 @@
/**
* 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 { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { CashierService } from '../cashier.service';
interface Denom {
id: number;
value: number;
kind: 'note' | 'coin';
label: string;
}
/** Cashier cash-exchange entry: customer gives some denominations and takes equal-value change (net 0). */
@Component({
selector: 'mifosx-cash-exchange-entry',
templateUrl: './cash-exchange-entry.component.html',
styleUrls: ['./cash-exchange-entry.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
MatIconModule,
MatSnackBarModule
]
})
export class CashExchangeEntryComponent implements OnInit {
private service = inject(CashierService);
private snackBar = inject(MatSnackBar);
notes: Denom[] = [];
coins: Denom[] = [];
receivedCounts: Record<number, number> = {};
givenCounts: Record<number, number> = {};
exchangeDate = '';
note = '';
saving = false;
/** All denominations (notes then coins) — used for totals and the submit payload. */
get denoms(): Denom[] {
return [
...this.notes,
...this.coins
];
}
ngOnInit(): void {
const d = new Date();
this.exchangeDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
this.service.getActiveDenominations().subscribe({
next: (list) => {
const rows: Denom[] = (list || []).map((x) => ({
id: x.id,
value: x.denomination,
kind: x.kind,
label: '₹' + x.denomination
}));
this.notes = rows.filter((r) => r.kind === 'note').sort((a, b) => b.value - a.value);
this.coins = rows.filter((r) => r.kind === 'coin').sort((a, b) => b.value - a.value);
},
error: () => {
this.notes = [];
this.coins = [];
}
});
}
countFor(side: 'r' | 'g', d: Denom): number {
return (side === 'r' ? this.receivedCounts : this.givenCounts)[d.id] || 0;
}
subtotal(side: 'r' | 'g', d: Denom): number {
return this.countFor(side, d) * d.value;
}
onChange(side: 'r' | 'g', d: Denom, raw: any): void {
(side === 'r' ? this.receivedCounts : this.givenCounts)[d.id] = Math.max(0, Math.floor(Number(raw) || 0));
}
bump(side: 'r' | 'g', d: Denom, delta: number): void {
const map = side === 'r' ? this.receivedCounts : this.givenCounts;
map[d.id] = Math.max(0, (map[d.id] || 0) + delta);
}
get receivedTotal(): number {
return this.denoms.reduce((s, d) => s + this.subtotal('r', d), 0);
}
get givenTotal(): number {
return this.denoms.reduce((s, d) => s + this.subtotal('g', d), 0);
}
get difference(): number {
return this.receivedTotal - this.givenTotal;
}
get matches(): boolean {
return this.receivedTotal > 0 && this.receivedTotal === this.givenTotal;
}
clear(): void {
this.receivedCounts = {};
this.givenCounts = {};
}
submit(): void {
if (!this.matches || this.saving) {
return;
}
this.saving = true;
const build = (side: 'r' | 'g') =>
this.denoms
.filter((d) => this.countFor(side, d) > 0)
.map((d) => ({ denominationId: d.id, denominationValue: d.value, count: this.countFor(side, d) }));
const payload = {
exchangeDate: this.exchangeDate,
note: this.note || null,
received: build('r'),
given: build('g')
};
this.service.createCashExchange(payload).subscribe({
next: () => {
this.snackBar.open('Cash exchange recorded', 'Close', { duration: 3000 });
this.clear();
this.note = '';
this.saving = false;
},
error: () => {
this.saving = false;
}
});
}
}