CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: cashier denomination-wise opening & closing balance panels in all deposit/withdrawal forms

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/app/cashier/cash-history/cash-history.component.html
+106
View File
@@ -0,0 +1,106 @@
<!--
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 · HISTORY</div>
<h1 class="pg-title">Cash Movement History</h1>
<p class="pg-sub">All transfers, settlements, and inter-cashier movements. Reverse any active transaction.</p>
</div>
<button type="button" class="pg-btn pg-btn--ghost" (click)="load()"><mat-icon>refresh</mat-icon> Refresh</button>
</header>
<!-- Reversal confirm panel -->
@if (reversingId !== null) {
<div class="reverse-panel">
<mat-icon class="reverse-icon">warning</mat-icon>
<span
>Reverse <strong>#{{ reversingId }}</strong
>? This cannot be undone.</span
>
<input class="reverse-reason" type="text" [(ngModel)]="reverseReason" placeholder="Reason (optional)" />
<button type="button" class="pg-btn pg-btn--danger" (click)="confirmReverse()">Confirm Reversal</button>
<button type="button" class="pg-btn pg-btn--ghost" (click)="cancelReverse()">Cancel</button>
</div>
}
@if (loading) {
<div class="pg-empty">Loading…</div>
}
<mat-tab-group animationDuration="150ms">
<mat-tab label="Cash Transfers ({{ transfers.length }})">
<div class="pg-tab-body">
<ng-container *ngTemplateOutlet="txnTable; context: { rows: transfers }"></ng-container>
</div>
</mat-tab>
<mat-tab label="Settlements ({{ settlements.length }})">
<div class="pg-tab-body">
<ng-container *ngTemplateOutlet="txnTable; context: { rows: settlements }"></ng-container>
</div>
</mat-tab>
<mat-tab label="Inter-Cashier ({{ interCashier.length }})">
<div class="pg-tab-body">
<ng-container *ngTemplateOutlet="txnTable; context: { rows: interCashier }"></ng-container>
</div>
</mat-tab>
</mat-tab-group>
</div>
<ng-template #txnTable let-rows="rows">
@if (rows.length === 0 && !loading) {
<div class="pg-empty">No records.</div>
}
@if (rows.length > 0) {
<div class="pg-card" style="margin-top: 16px">
<table class="pg-table">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>From</th>
<th>To</th>
<th class="num">Amount</th>
<th>Note</th>
<th>By</th>
<th style="text-align: center">Status</th>
<th style="text-align: center">Action</th>
</tr>
</thead>
<tbody>
@for (r of rows; track r.id) {
<tr [class.row-reversed]="r.isReversed">
<td>{{ r.id }}</td>
<td>{{ r.date }}</td>
<td>{{ r.fromParty }}</td>
<td>{{ r.toParty }}</td>
<td class="num">₹{{ r.amount | number: '1.2-2' }}</td>
<td>{{ r.note || '—' }}</td>
<td>{{ r.performedByUsername || '—' }}</td>
<td style="text-align: center">
<span class="badge" [class.badge-active]="!r.isReversed" [class.badge-reversed]="r.isReversed">
{{ r.isReversed ? 'Reversed' : 'Active' }}
</span>
</td>
<td style="text-align: center">
@if (!r.isReversed) {
<button type="button" class="pg-btn pg-btn--ghost btn-sm" (click)="startReverse(r)">
<mat-icon>undo</mat-icon>
</button>
}
</td>
</tr>
}
</tbody>
</table>
</div>
}
</ng-template>
src/app/cashier/cash-history/cash-history.component.scss
+91
View File
@@ -0,0 +1,91 @@
/**
* 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: 0;
}
.row-reversed td {
opacity: 0.5;
text-decoration: line-through;
}
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.badge-active {
background: #dcfce7;
color: #15803d;
}
.badge-reversed {
background: #fee2e2;
color: #991b1b;
}
.btn-sm {
height: 28px;
padding: 0 8px;
font-size: 12px;
mat-icon {
font-size: 16px;
height: 16px;
width: 16px;
}
}
.reverse-panel {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 10px;
flex-wrap: wrap;
font-size: 13px;
color: #92400e;
.reverse-icon {
color: #f59e0b;
font-size: 20px;
height: 20px;
width: 20px;
}
.reverse-reason {
flex: 1 1 200px;
height: 34px;
padding: 0 10px;
border: 1px solid #fcd34d;
border-radius: 7px;
font-size: 13px;
font-family: inherit;
background: #fff;
color: #1a1a1a;
}
}
.pg-btn--danger {
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #fff;
border: none;
&:disabled {
opacity: 0.45;
cursor: not-allowed;
}
}
src/app/cashier/cash-history/cash-history.component.ts
+146
View File
@@ -0,0 +1,146 @@
/**
* 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 { MatTabsModule } from '@angular/material/tabs';
import { forkJoin, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { CashierService } from '../cashier.service';
interface TxnRow {
id: number;
date: string;
fromParty: string;
toParty: string;
amount: number;
note: string;
isReversed: boolean;
performedByUsername: string;
createdAt: string;
type: 'transfer' | 'settlement' | 'inter';
}
/** Unified history of all cash movements with reversal support. */
@Component({
selector: 'mifosx-cash-history',
templateUrl: './cash-history.component.html',
styleUrls: [
'../cashier-shared.scss',
'./cash-history.component.scss'
],
standalone: true,
imports: [
CommonModule,
FormsModule,
MatIconModule,
MatSnackBarModule,
MatTabsModule
]
})
export class CashHistoryComponent implements OnInit {
private service = inject(CashierService);
private snackBar = inject(MatSnackBar);
transfers: TxnRow[] = [];
settlements: TxnRow[] = [];
interCashier: TxnRow[] = [];
loading = false;
reversingId: number | null = null;
reversingType: string | null = null;
reverseReason = '';
ngOnInit(): void {
this.load();
}
load(): void {
this.loading = true;
forkJoin({
transfers: this.service.getCashTransfers().pipe(catchError(() => of([]))),
settlements: this.service.getCashSettlements().pipe(catchError(() => of([]))),
inter: this.service.getInterCashierTransfers().pipe(catchError(() => of([])))
}).subscribe(({ transfers, settlements, inter }) => {
this.transfers = (transfers as any[]).map((t) => ({
id: t.id,
date: t.transferDate,
fromParty: t.fromParty,
toParty: t.toParty,
amount: t.transferAmount,
note: t.note,
isReversed: t.isReversed,
performedByUsername: t.performedByUsername,
createdAt: t.createdAt,
type: 'transfer'
}));
this.settlements = (settlements as any[]).map((s) => ({
id: s.id,
date: s.settlementDate,
fromParty: s.fromParty,
toParty: s.toParty,
amount: s.settlementAmount,
note: s.note,
isReversed: s.isReversed,
performedByUsername: s.performedByUsername,
createdAt: s.createdAt,
type: 'settlement'
}));
this.interCashier = (inter as any[]).map((i) => ({
id: i.id,
date: i.transferDate,
fromParty: i.fromParty,
toParty: i.toParty,
amount: i.transferAmount,
note: i.note,
isReversed: i.isReversed,
performedByUsername: i.performedByUsername,
createdAt: i.createdAt,
type: 'inter'
}));
this.loading = false;
});
}
startReverse(row: TxnRow): void {
this.reversingId = row.id;
this.reversingType = row.type;
this.reverseReason = '';
}
cancelReverse(): void {
this.reversingId = null;
this.reversingType = null;
this.reverseReason = '';
}
confirmReverse(): void {
if (!this.reversingId || !this.reversingType) return;
const id = this.reversingId;
const type = this.reversingType;
const reason = this.reverseReason;
this.cancelReverse();
let obs$;
if (type === 'transfer') obs$ = this.service.reverseCashTransfer(id, reason);
else if (type === 'settlement') obs$ = this.service.reverseCashSettlement(id, reason);
else obs$ = this.service.reverseInterCashierTransfer(id, reason);
obs$.pipe(catchError(() => of(null))).subscribe((res: any) => {
if (res?.reversed) {
this.snackBar.open('Transaction reversed successfully', 'Close', { duration: 3000 });
this.load();
} else {
this.snackBar.open('Reversal failed', 'Close', { duration: 3000 });
}
});
}
}