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
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
555d9fb4b7
commit
7ccaffa7f1
@@ -0,0 +1,248 @@
|
||||
<!--
|
||||
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="pg">
|
||||
<header class="pg-head">
|
||||
<div>
|
||||
<div class="pg-eyebrow">CASHIER · RECONCILIATION</div>
|
||||
<h1 class="pg-title">Cash Reconciliation</h1>
|
||||
<p class="pg-sub">Compare physical denomination count with system expected balance. Highlights variance.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<mat-tab-group animationDuration="150ms">
|
||||
<!-- ── Entry Tab ── -->
|
||||
<mat-tab label="New Reconciliation">
|
||||
<div class="pg-tab-body">
|
||||
<div class="pg-toolbar pg-toolbar--mat">
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>Teller</mat-label>
|
||||
<mat-select [value]="selectedTellerId" (selectionChange)="onTellerSelect($event.value)">
|
||||
@for (t of tellers; track t.id) {
|
||||
<mat-option [value]="t.id">{{ t.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>Cashier</mat-label>
|
||||
<mat-select
|
||||
[value]="selectedCashierId"
|
||||
(selectionChange)="onCashierSelect($event.value)"
|
||||
[disabled]="!selectedTellerId"
|
||||
>
|
||||
@for (c of cashiers; track c.id) {
|
||||
<mat-option [value]="c.id">{{ c.label }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="date"
|
||||
[value]="reconDate"
|
||||
(change)="reconDate = $any($event.target).value; fetchExpected()"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="pg-note-field">
|
||||
<mat-label>Note</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="text"
|
||||
[value]="note"
|
||||
(input)="note = $any($event.target).value"
|
||||
placeholder="Optional"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@if (loadingExpected) {
|
||||
<div class="pg-empty">Loading expected balances…</div>
|
||||
}
|
||||
|
||||
@if (!loadingExpected && rows.length > 0) {
|
||||
<div class="pg-card">
|
||||
@if (noteRows.length > 0) {
|
||||
<div class="pos-section-label">Notes</div>
|
||||
<table class="pg-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Denomination</th>
|
||||
<th style="text-align: center">Expected</th>
|
||||
<th style="text-align: center">Physical</th>
|
||||
<th class="num">Variance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of noteRows; track row.denominationId) {
|
||||
<tr [class.row-excess]="row.varianceCount > 0" [class.row-short]="row.varianceCount < 0">
|
||||
<td>
|
||||
<span class="pg-chip">₹{{ row.denominationValue }}</span>
|
||||
</td>
|
||||
<td style="text-align: center; color: #64748b; font-weight: 600">{{ row.expectedCount }}</td>
|
||||
<td style="text-align: center">
|
||||
<div class="pg-step" style="margin: 0 auto">
|
||||
<button
|
||||
type="button"
|
||||
(click)="updatePhysical(row, row.physicalCount - 1)"
|
||||
[disabled]="row.physicalCount === 0"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
[value]="row.physicalCount"
|
||||
(input)="updatePhysical(row, $any($event.target).value)"
|
||||
/>
|
||||
<button type="button" (click)="updatePhysical(row, row.physicalCount + 1)">+</button>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="num"
|
||||
[style.color]="
|
||||
row.varianceCount > 0 ? '#16a34a' : row.varianceCount < 0 ? '#dc2626' : '#94a3b8'
|
||||
"
|
||||
>
|
||||
{{ row.varianceCount > 0 ? '+' : '' }}{{ row.varianceCount }} (₹{{
|
||||
row.varianceCount * row.denominationValue | number: '1.0-0'
|
||||
}})
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
@if (coinRows.length > 0) {
|
||||
<div class="pos-section-label pos-section-label--coin">Coins</div>
|
||||
<table class="pg-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Denomination</th>
|
||||
<th style="text-align: center">Expected</th>
|
||||
<th style="text-align: center">Physical</th>
|
||||
<th class="num">Variance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of coinRows; track row.denominationId) {
|
||||
<tr [class.row-excess]="row.varianceCount > 0" [class.row-short]="row.varianceCount < 0">
|
||||
<td>
|
||||
<span class="pg-chip pg-chip--coin">₹{{ row.denominationValue }}</span>
|
||||
</td>
|
||||
<td style="text-align: center; color: #64748b; font-weight: 600">{{ row.expectedCount }}</td>
|
||||
<td style="text-align: center">
|
||||
<div class="pg-step" style="margin: 0 auto">
|
||||
<button
|
||||
type="button"
|
||||
(click)="updatePhysical(row, row.physicalCount - 1)"
|
||||
[disabled]="row.physicalCount === 0"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
[value]="row.physicalCount"
|
||||
(input)="updatePhysical(row, $any($event.target).value)"
|
||||
/>
|
||||
<button type="button" (click)="updatePhysical(row, row.physicalCount + 1)">+</button>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="num"
|
||||
[style.color]="
|
||||
row.varianceCount > 0 ? '#16a34a' : row.varianceCount < 0 ? '#dc2626' : '#94a3b8'
|
||||
"
|
||||
>
|
||||
{{ row.varianceCount > 0 ? '+' : '' }}{{ row.varianceCount }} (₹{{
|
||||
row.varianceCount * row.denominationValue | number: '1.0-0'
|
||||
}})
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="pg-total-bar">
|
||||
<span>
|
||||
Expected: <strong>₹{{ totalExpected | number: '1.2-2' }}</strong> | Physical:
|
||||
<strong>₹{{ totalPhysical | number: '1.2-2' }}</strong> | Variance:
|
||||
<strong [style.color]="totalVariance === 0 ? '#16a34a' : '#dc2626'">
|
||||
{{ totalVariance >= 0 ? '+' : '' }}₹{{ totalVariance | number: '1.2-2' }}
|
||||
</strong>
|
||||
<span class="badge" [ngClass]="statusClass(statusLabel)">{{ statusLabel }}</span>
|
||||
</span>
|
||||
<button type="button" class="pg-btn pg-btn--primary" [disabled]="!valid || saving" (click)="submit()">
|
||||
<mat-icon>save</mat-icon> Save Reconciliation
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!loadingExpected && rows.length === 0 && selectedCashierId) {
|
||||
<div class="pg-empty">No balance data found for this cashier.</div>
|
||||
}
|
||||
@if (!selectedCashierId) {
|
||||
<div class="pg-empty">Select a teller and cashier to load expected balances.</div>
|
||||
}
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<!-- ── History Tab ── -->
|
||||
<mat-tab label="History">
|
||||
<div class="pg-tab-body">
|
||||
@if (loadingHistory) {
|
||||
<div class="pg-empty">Loading…</div>
|
||||
}
|
||||
@if (!loadingHistory && history.length === 0) {
|
||||
<div class="pg-empty">No reconciliation records yet.</div>
|
||||
}
|
||||
@if (!loadingHistory && history.length > 0) {
|
||||
<div class="pg-card">
|
||||
<table class="pg-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Cashier</th>
|
||||
<th class="num">Expected</th>
|
||||
<th class="num">Physical</th>
|
||||
<th class="num">Variance</th>
|
||||
<th style="text-align: center">Status</th>
|
||||
<th>By</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (r of history; track r.id) {
|
||||
<tr>
|
||||
<td>{{ r.reconDate }}</td>
|
||||
<td>{{ r.cashierName || r.cashierId }}</td>
|
||||
<td class="num">₹{{ r.expectedAmount | number: '1.2-2' }}</td>
|
||||
<td class="num">₹{{ r.physicalAmount | number: '1.2-2' }}</td>
|
||||
<td class="num" [style.color]="r.variance > 0 ? '#16a34a' : r.variance < 0 ? '#dc2626' : '#94a3b8'">
|
||||
{{ r.variance >= 0 ? '+' : '' }}₹{{ r.variance | number: '1.2-2' }}
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<span class="badge" [ngClass]="statusClass(r.status)">{{ r.status }}</span>
|
||||
</td>
|
||||
<td>{{ r.performedByUsername }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.pg-tab-body {
|
||||
padding: 16px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.row-excess td {
|
||||
background: #f0fdf4 !important;
|
||||
}
|
||||
|
||||
.row-short td {
|
||||
background: #fef2f2 !important;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.badge-ok {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.badge-excess {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.badge-short {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* 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 { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { of } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { CashierService } from '../cashier.service';
|
||||
|
||||
interface DenomRow {
|
||||
denominationId: number;
|
||||
denominationValue: number;
|
||||
kind: string;
|
||||
expectedCount: number;
|
||||
physicalCount: number;
|
||||
varianceCount: number;
|
||||
}
|
||||
|
||||
interface ReconRecord {
|
||||
id: number;
|
||||
reconDate: string;
|
||||
cashierId: number;
|
||||
cashierName: string;
|
||||
expectedAmount: number;
|
||||
physicalAmount: number;
|
||||
variance: number;
|
||||
status: 'OK' | 'SHORT' | 'EXCESS';
|
||||
performedByUsername: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
/** Denomination-wise reconciliation — expected vs physical count per cashier. */
|
||||
@Component({
|
||||
selector: 'mifosx-reconciliation',
|
||||
templateUrl: './reconciliation.component.html',
|
||||
styleUrls: [
|
||||
'../cashier-shared.scss',
|
||||
'./reconciliation.component.scss'
|
||||
],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatIconModule,
|
||||
MatSnackBarModule,
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
MatInputModule,
|
||||
MatTabsModule
|
||||
]
|
||||
})
|
||||
export class ReconciliationComponent implements OnInit {
|
||||
private service = inject(CashierService);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
|
||||
// ── Entry form ──
|
||||
tellers: { id: number; name: string }[] = [];
|
||||
cashiers: { id: number; label: string }[] = [];
|
||||
selectedTellerId: number | null = null;
|
||||
selectedCashierId: number | null = null;
|
||||
cashierName = '';
|
||||
reconDate = '';
|
||||
note = '';
|
||||
rows: DenomRow[] = [];
|
||||
loadingExpected = false;
|
||||
saving = false;
|
||||
|
||||
// ── History list ──
|
||||
history: ReconRecord[] = [];
|
||||
loadingHistory = false;
|
||||
|
||||
ngOnInit(): void {
|
||||
const d = new Date();
|
||||
this.reconDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
this.service
|
||||
.getTellers()
|
||||
.pipe(catchError(() => of([] as any[])))
|
||||
.subscribe((list) => {
|
||||
this.tellers = (list || []).map((t: any) => ({ id: t.id, name: t.name }));
|
||||
});
|
||||
this.loadHistory();
|
||||
}
|
||||
|
||||
onTellerSelect(tellerId: number): void {
|
||||
this.selectedTellerId = tellerId;
|
||||
this.selectedCashierId = null;
|
||||
this.cashierName = '';
|
||||
this.cashiers = [];
|
||||
this.rows = [];
|
||||
if (!tellerId) return;
|
||||
this.service
|
||||
.getCashiersForTeller(tellerId)
|
||||
.pipe(catchError(() => of({ cashiers: [] })))
|
||||
.subscribe((r: any) => {
|
||||
this.cashiers = (r?.cashiers || []).map((c: any) => ({ id: c.id, label: c.staffName }));
|
||||
});
|
||||
}
|
||||
|
||||
onCashierSelect(cashierId: number): void {
|
||||
this.selectedCashierId = cashierId;
|
||||
const c = this.cashiers.find((x) => x.id === cashierId);
|
||||
this.cashierName = c ? c.label : '';
|
||||
this.rows = [];
|
||||
this.fetchExpected();
|
||||
}
|
||||
|
||||
fetchExpected(): void {
|
||||
if (!this.selectedCashierId) return;
|
||||
this.loadingExpected = true;
|
||||
this.service
|
||||
.getExpectedBalance(this.selectedCashierId, this.reconDate)
|
||||
.pipe(catchError(() => of(null)))
|
||||
.subscribe((data: any) => {
|
||||
this.loadingExpected = false;
|
||||
if (!data) return;
|
||||
this.rows = (data.denominations || []).map((d: any) => ({
|
||||
denominationId: d.denominationId || null,
|
||||
denominationValue: d.denominationValue,
|
||||
kind: d.kind || 'note',
|
||||
expectedCount: d.expectedCount || 0,
|
||||
physicalCount: d.expectedCount || 0,
|
||||
varianceCount: 0
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
updatePhysical(row: DenomRow, raw: any): void {
|
||||
row.physicalCount = Math.max(0, Math.floor(Number(raw) || 0));
|
||||
row.varianceCount = row.physicalCount - row.expectedCount;
|
||||
}
|
||||
|
||||
get noteRows(): DenomRow[] {
|
||||
return this.rows.filter((r) => r.kind !== 'coin');
|
||||
}
|
||||
get coinRows(): DenomRow[] {
|
||||
return this.rows.filter((r) => r.kind === 'coin');
|
||||
}
|
||||
|
||||
get totalExpected(): number {
|
||||
return this.rows.reduce((s, r) => s + r.denominationValue * r.expectedCount, 0);
|
||||
}
|
||||
get totalPhysical(): number {
|
||||
return this.rows.reduce((s, r) => s + r.denominationValue * r.physicalCount, 0);
|
||||
}
|
||||
get totalVariance(): number {
|
||||
return this.totalPhysical - this.totalExpected;
|
||||
}
|
||||
get statusLabel(): string {
|
||||
const v = this.totalVariance;
|
||||
return v === 0 ? 'OK' : v > 0 ? 'EXCESS' : 'SHORT';
|
||||
}
|
||||
get valid(): boolean {
|
||||
return !!this.selectedCashierId && this.rows.length > 0;
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
if (!this.valid || this.saving) return;
|
||||
this.saving = true;
|
||||
const payload = {
|
||||
cashierId: this.selectedCashierId,
|
||||
tellerId: this.selectedTellerId,
|
||||
cashierName: this.cashierName,
|
||||
reconDate: this.reconDate,
|
||||
note: this.note || null,
|
||||
denominations: this.rows.map((r) => ({
|
||||
denominationId: r.denominationId,
|
||||
denominationValue: r.denominationValue,
|
||||
expectedCount: r.expectedCount,
|
||||
physicalCount: r.physicalCount
|
||||
}))
|
||||
};
|
||||
this.service.createReconciliation(payload).subscribe({
|
||||
next: (res: any) => {
|
||||
const status = res?.status || 'OK';
|
||||
this.snackBar.open(`Reconciliation saved — Status: ${status}`, 'Close', {
|
||||
duration: 4000,
|
||||
panelClass: status === 'OK' ? ['snack-ok'] : ['snack-warn']
|
||||
});
|
||||
this.rows = [];
|
||||
this.note = '';
|
||||
this.saving = false;
|
||||
this.loadHistory();
|
||||
},
|
||||
error: () => {
|
||||
this.saving = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadHistory(): void {
|
||||
this.loadingHistory = true;
|
||||
this.service
|
||||
.getReconciliations()
|
||||
.pipe(catchError(() => of([])))
|
||||
.subscribe((list: any[]) => {
|
||||
this.history = list || [];
|
||||
this.loadingHistory = false;
|
||||
});
|
||||
}
|
||||
|
||||
statusClass(status: string): string {
|
||||
return status === 'OK' ? 'badge-ok' : status === 'EXCESS' ? 'badge-excess' : 'badge-short';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user