feat(cashier): morning opening balance panel across settlement, reconciliation, position & history

- Cash Settlement form: morning panel (denomination pills) + Morning column in denomination table
- Reconciliation form: morning panel (denomination pills) + Morning column in denomination table
- Cashier Position Report: Morning vs Current comparison bar + Morning column (single-cashier mode)
- Cash History – Settlement detail panel: Morning Received vs Settled comparison bar + Morning column
- Cash History – denomination Notes/Coins separation in detail panel for all transaction types
- CashierService: added getCashierMorningBalance() calling GET /cashreports/cashier-morning
- All morning data loaded via forkJoin alongside existing API calls (no extra loading states)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jaanu423
2026-05-31 08:54:27 +05:30
co-authored by Claude Sonnet 4.6
parent 6433ae068d
commit 51495f8eb8
14 changed files with 912 additions and 60 deletions
@@ -182,6 +182,45 @@
</div>
}
<!-- Morning Opening Balance summary panel -->
@if (morningTotal > 0) {
<div class="morning-panel">
<div class="morning-panel__head">
<mat-icon>wb_sunny</mat-icon>
<span>Morning Opening Balance <em>(Cash received from vault today)</em></span>
<strong class="morning-panel__total">₹{{ morningTotal | number: '1.2-2' }}</strong>
</div>
<div class="morning-panel__body">
@if (noteRows.length > 0) {
<div class="morning-panel__section-label">Notes — ₹{{ morningNoteTotal | number: '1.0-0' }}</div>
<div class="morning-panel__pills">
@for (row of noteRows; track row.denominationId) {
@if (row.morningCount > 0) {
<span class="morning-pill"
>₹{{ row.denominationValue }}<span class="morning-pill__x">×{{ row.morningCount }}</span></span
>
}
}
</div>
}
@if (coinRows.length > 0) {
<div class="morning-panel__section-label morning-panel__section-label--coin">
Coins — ₹{{ morningCoinTotal | number: '1.0-0' }}
</div>
<div class="morning-panel__pills">
@for (row of coinRows; track row.denominationId) {
@if (row.morningCount > 0) {
<span class="morning-pill morning-pill--coin"
>₹{{ row.denominationValue }}<span class="morning-pill__x">×{{ row.morningCount }}</span></span
>
}
}
</div>
}
</div>
</div>
}
<!-- Denomination table -->
@if (rows.length > 0) {
<div class="pg-card">
@@ -192,6 +231,7 @@
<thead>
<tr>
<th>Denomination</th>
<th class="num settle-col-morning" title="What cashier received from vault this morning">Morning</th>
<th class="num">System Expected</th>
<th style="text-align: center">Physical Count</th>
<th class="num">Variance</th>
@@ -203,6 +243,7 @@
<td>
<span class="pg-chip">₹{{ row.denominationValue }}</span>
</td>
<td class="num settle-morning">{{ row.morningCount || '—' }}</td>
<td class="num settle-expected">{{ row.expectedCount }}</td>
<td style="text-align: center">
<div class="pg-step" style="margin: 0 auto">
@@ -224,9 +265,9 @@
>
{{ varianceFor(row) > 0 ? '+' : '' }}{{ varianceFor(row) }}
@if (varianceFor(row) !== 0) {
<span class="settle-var-amt">
(₹{{ varianceFor(row) * row.denominationValue | number: '1.0-0' }})
</span>
<span class="settle-var-amt"
>(₹{{ varianceFor(row) * row.denominationValue | number: '1.0-0' }})</span
>
}
</td>
</tr>
@@ -242,6 +283,7 @@
<thead>
<tr>
<th>Denomination</th>
<th class="num settle-col-morning" title="What cashier received from vault this morning">Morning</th>
<th class="num">System Expected</th>
<th style="text-align: center">Physical Count</th>
<th class="num">Variance</th>
@@ -253,6 +295,7 @@
<td>
<span class="pg-chip pg-chip--coin">₹{{ row.denominationValue }}</span>
</td>
<td class="num settle-morning">{{ row.morningCount || '—' }}</td>
<td class="num settle-expected">{{ row.expectedCount }}</td>
<td style="text-align: center">
<div class="pg-step" style="margin: 0 auto">
@@ -274,9 +317,9 @@
>
{{ varianceFor(row) > 0 ? '+' : '' }}{{ varianceFor(row) }}
@if (varianceFor(row) !== 0) {
<span class="settle-var-amt">
(₹{{ varianceFor(row) * row.denominationValue | number: '1.0-0' }})
</span>
<span class="settle-var-amt"
>(₹{{ varianceFor(row) * row.denominationValue | number: '1.0-0' }})</span
>
}
</td>
</tr>
@@ -293,3 +293,111 @@
font-weight: 600;
}
}
/* ── Morning Opening Balance panel ── */
.morning-panel {
background: linear-gradient(135deg, #fffbeb 0%, #fef9ec 100%);
border: 1px solid #fcd34d;
border-radius: 10px;
margin-bottom: 16px;
overflow: hidden;
&__head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid #fde68a;
mat-icon {
color: #d97706;
font-size: 20px;
height: 20px;
width: 20px;
flex-shrink: 0;
}
span {
flex: 1;
font-size: 13px;
font-weight: 600;
color: #78350f;
em {
font-weight: 400;
opacity: 0.75;
font-style: normal;
font-size: 12px;
}
}
}
&__total {
font-size: 15px;
font-weight: 800;
color: #92400e;
white-space: nowrap;
}
&__body {
padding: 10px 16px 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
&__section-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #92400e;
margin-bottom: 2px;
&--coin {
color: #78350f;
}
}
}
.morning-panel__pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 4px;
}
.morning-pill {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px 9px;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: #92400e;
&--coin {
background: #fff7ed;
border-color: #fdba74;
color: #7c2d12;
}
}
.morning-pill__x {
font-weight: 400;
opacity: 0.75;
margin-left: 1px;
}
/* ── Morning column in settle table ── */
.settle-col-morning {
color: #d97706;
}
.settle-morning {
color: #b45309;
font-weight: 600;
}
@@ -25,6 +25,7 @@ interface SettleDenomRow {
denominationId: number;
denominationValue: number;
kind: 'note' | 'coin';
morningCount: number;
expectedCount: number;
physicalCount: number;
}
@@ -77,6 +78,7 @@ export class CashSettlementComponent implements OnInit {
supervisorChecking = false;
rows: SettleDenomRow[] = [];
morningTotal = 0;
settlementDate = '';
// Vault teller to deposit TO
@@ -128,8 +130,9 @@ export class CashSettlementComponent implements OnInit {
.pipe(catchError(() => of({ alreadySettled: false }))),
recon: this.service
.checkReconciliation(cashierId, this.settlementDate)
.pipe(catchError(() => of({ reconciled: false })))
}).subscribe(({ expected, check, recon }) => {
.pipe(catchError(() => of({ reconciled: false }))),
morning: this.service.getCashierMorningBalance(cashierId, this.settlementDate).pipe(catchError(() => of(null)))
}).subscribe(({ expected, check, recon, morning }) => {
this.supervisorChecking = false;
if (check?.alreadySettled) {
this.pageState = 'already-settled';
@@ -139,6 +142,13 @@ export class CashSettlementComponent implements OnInit {
this.pageState = 'needs-reconciliation';
return;
}
// Build denomination → morningCount map
const morningMap = new Map<number, number>();
((morning?.denominations || []) as any[]).forEach((d: any) =>
morningMap.set(d.denominationId, d.morningCount ?? 0)
);
this.morningTotal = Number(morning?.totalMorning ?? 0);
this.rows = ((expected?.denominations as any[]) || [])
.filter((d: any) => (d.expectedCount ?? 0) > 0)
.sort((a: any, b: any) => b.denominationValue - a.denominationValue)
@@ -146,6 +156,7 @@ export class CashSettlementComponent implements OnInit {
denominationId: d.denominationId,
denominationValue: d.denominationValue,
kind: (d.kind ?? 'note') as 'note' | 'coin',
morningCount: morningMap.get(d.denominationId) ?? 0,
expectedCount: d.expectedCount,
physicalCount: d.expectedCount
}));
@@ -187,6 +198,12 @@ export class CashSettlementComponent implements OnInit {
get coinRows(): SettleDenomRow[] {
return this.rows.filter((r) => r.kind === 'coin');
}
get morningNoteTotal(): number {
return this.noteRows.reduce((s, r) => s + r.morningCount * r.denominationValue, 0);
}
get morningCoinTotal(): number {
return this.coinRows.reduce((s, r) => s + r.morningCount * r.denominationValue, 0);
}
varianceFor(row: SettleDenomRow): number {
return row.physicalCount - row.expectedCount;