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
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
6433ae068d
commit
51495f8eb8
@@ -191,6 +191,48 @@
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Morning vs Settled comparison (settlements only) -->
|
||||
@if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
|
||||
<div class="settle-compare-bar">
|
||||
<div class="settle-compare-item settle-compare-item--morning">
|
||||
<mat-icon>wb_sunny</mat-icon>
|
||||
<div>
|
||||
<span class="settle-compare-label">Morning Received</span>
|
||||
<strong>₹{{ detail.morningTotal | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<mat-icon class="settle-compare-arrow">arrow_forward</mat-icon>
|
||||
<div class="settle-compare-item settle-compare-item--settled">
|
||||
<mat-icon>account_balance_wallet</mat-icon>
|
||||
<div>
|
||||
<span class="settle-compare-label">This Settlement</span>
|
||||
<strong>₹{{ detail.row.amount | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="settle-compare-net"
|
||||
[class.settle-compare-net--pos]="detail.row.amount > detail.morningTotal"
|
||||
[class.settle-compare-net--neg]="detail.row.amount < detail.morningTotal"
|
||||
[class.settle-compare-net--zero]="detail.row.amount === detail.morningTotal"
|
||||
>
|
||||
<mat-icon>{{
|
||||
detail.row.amount === detail.morningTotal
|
||||
? 'check_circle'
|
||||
: detail.row.amount > detail.morningTotal
|
||||
? 'trending_up'
|
||||
: 'trending_down'
|
||||
}}</mat-icon>
|
||||
{{
|
||||
detail.row.amount === detail.morningTotal
|
||||
? 'Fully Settled'
|
||||
: (detail.row.amount - detail.morningTotal >= 0 ? '+' : '') +
|
||||
'₹' +
|
||||
(detail.row.amount - detail.morningTotal | number: '1.2-2')
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Denomination breakdown -->
|
||||
<div class="detail-denom-head">
|
||||
<mat-icon>payments</mat-icon>
|
||||
@@ -202,37 +244,102 @@
|
||||
} @else if (detail.denominations.length === 0) {
|
||||
<div class="pg-empty" style="padding: 20px 0">No denomination data recorded.</div>
|
||||
} @else {
|
||||
<table class="pg-table detail-denom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Denomination</th>
|
||||
<th style="text-align: center">Count</th>
|
||||
<th class="num">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (d of detail.denominations; track d.denominationValue) {
|
||||
<!-- Notes -->
|
||||
@if (notes(detail.denominations).length > 0) {
|
||||
<div class="detail-denom-kind-label">Notes</div>
|
||||
<table class="pg-table detail-denom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pg-chip">₹{{ d.denominationValue }}</span>
|
||||
</td>
|
||||
<td style="text-align: center; font-weight: 600">{{ d.count }}</td>
|
||||
<td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
|
||||
<th>Denomination</th>
|
||||
@if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
|
||||
<th class="num settle-detail-col-morning" title="Count received from vault this morning">Morning</th>
|
||||
}
|
||||
<th style="text-align: center">{{ detail.row.type === 'settlement' ? 'Settled' : 'Count' }}</th>
|
||||
<th class="num">Total</th>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="detail-denom-total">
|
||||
<td><strong>Total</strong></td>
|
||||
<td style="text-align: center">
|
||||
<strong>{{ totalCount(detail.denominations) }}</strong>
|
||||
</td>
|
||||
<td class="num">
|
||||
<strong>₹{{ detail.row.amount | number: '1.2-2' }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (d of notes(detail.denominations); track d.denominationValue) {
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pg-chip">₹{{ d.denominationValue }}</span>
|
||||
</td>
|
||||
@if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
|
||||
<td class="num settle-detail-morning">{{ d.morningCount || '—' }}</td>
|
||||
}
|
||||
<td style="text-align: center; font-weight: 600">{{ d.count }}</td>
|
||||
<td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="detail-denom-total">
|
||||
<td><strong>Subtotal</strong></td>
|
||||
@if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
|
||||
<td></td>
|
||||
}
|
||||
<td style="text-align: center">
|
||||
<strong>{{ totalCount(notes(detail.denominations)) }}</strong>
|
||||
</td>
|
||||
<td class="num">
|
||||
<strong>₹{{ subtotal(notes(detail.denominations)) | number: '1.2-2' }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
}
|
||||
|
||||
<!-- Coins -->
|
||||
@if (coins(detail.denominations).length > 0) {
|
||||
<div class="detail-denom-kind-label">Coins</div>
|
||||
<table class="pg-table detail-denom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Denomination</th>
|
||||
@if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
|
||||
<th class="num settle-detail-col-morning" title="Count received from vault this morning">Morning</th>
|
||||
}
|
||||
<th style="text-align: center">{{ detail.row.type === 'settlement' ? 'Settled' : 'Count' }}</th>
|
||||
<th class="num">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (d of coins(detail.denominations); track d.denominationValue) {
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pg-chip pg-chip--coin">₹{{ d.denominationValue }}</span>
|
||||
</td>
|
||||
@if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
|
||||
<td class="num settle-detail-morning">{{ d.morningCount || '—' }}</td>
|
||||
}
|
||||
<td style="text-align: center; font-weight: 600">{{ d.count }}</td>
|
||||
<td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="detail-denom-total">
|
||||
<td><strong>Subtotal</strong></td>
|
||||
@if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
|
||||
<td></td>
|
||||
}
|
||||
<td style="text-align: center">
|
||||
<strong>{{ totalCount(coins(detail.denominations)) }}</strong>
|
||||
</td>
|
||||
<td class="num">
|
||||
<strong>₹{{ subtotal(coins(detail.denominations)) | number: '1.2-2' }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
}
|
||||
|
||||
<!-- Grand total -->
|
||||
<div class="detail-denom-grand-total">
|
||||
<span>Grand Total</span>
|
||||
<span>{{ totalCount(detail.denominations) }} notes/coins</span>
|
||||
<span>₹{{ detail.row.amount | number: '1.2-2' }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -271,8 +271,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.detail-denom-kind-label {
|
||||
margin: 4px 20px 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.detail-denom-table {
|
||||
margin: 0 20px 20px;
|
||||
margin: 0 20px 12px;
|
||||
width: calc(100% - 40px);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
@@ -284,6 +293,25 @@
|
||||
border-top: 2px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.detail-denom-grand-total {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 20px 20px;
|
||||
padding: 10px 14px;
|
||||
background: #1e40af;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pg-chip--coin {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
border-color: #fcd34d;
|
||||
}
|
||||
|
||||
.pg-btn--danger {
|
||||
background: linear-gradient(135deg, #ef4444, #b91c1c);
|
||||
color: #fff;
|
||||
@@ -294,3 +322,117 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Settlement: Morning Received vs Settled comparison bar ── */
|
||||
.settle-compare-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 20px;
|
||||
background: linear-gradient(135deg, #fffbeb 0%, #f0fdf4 100%);
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.settle-compare-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&--morning mat-icon {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
&--settled mat-icon {
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
}
|
||||
|
||||
.settle-compare-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #64748b;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.settle-compare-arrow {
|
||||
color: #94a3b8;
|
||||
font-size: 18px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settle-compare-net {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
|
||||
mat-icon {
|
||||
font-size: 16px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&--zero {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
|
||||
mat-icon {
|
||||
color: #16a34a;
|
||||
}
|
||||
}
|
||||
|
||||
&--pos {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
|
||||
mat-icon {
|
||||
color: #2563eb;
|
||||
}
|
||||
}
|
||||
|
||||
&--neg {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
|
||||
mat-icon {
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Morning column in settlement detail table ── */
|
||||
.settle-detail-col-morning {
|
||||
color: #d97706;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.settle-detail-morning {
|
||||
color: #b45309;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -21,6 +21,7 @@ interface TxnRow {
|
||||
date: string;
|
||||
fromParty: string;
|
||||
toParty: string;
|
||||
fromCashierId?: number;
|
||||
amount: number;
|
||||
note: string;
|
||||
isReversed: boolean;
|
||||
@@ -35,6 +36,8 @@ interface TxnRow {
|
||||
interface DenomDetail {
|
||||
denominationId: number | null;
|
||||
denominationValue: number;
|
||||
kind: 'note' | 'coin';
|
||||
morningCount: number;
|
||||
count: number;
|
||||
totalAmount: number;
|
||||
}
|
||||
@@ -42,6 +45,7 @@ interface DenomDetail {
|
||||
interface DetailView {
|
||||
row: TxnRow;
|
||||
denominations: DenomDetail[];
|
||||
morningTotal: number;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
@@ -71,6 +75,8 @@ export class CashHistoryComponent implements OnInit {
|
||||
interCashier: TxnRow[] = [];
|
||||
loading = false;
|
||||
|
||||
private denomKindMap = new Map<number, 'note' | 'coin'>();
|
||||
|
||||
reversingId: number | null = null;
|
||||
reversingType: string | null = null;
|
||||
reverseReason = '';
|
||||
@@ -78,6 +84,12 @@ export class CashHistoryComponent implements OnInit {
|
||||
detail: DetailView | null = null;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.service
|
||||
.getActiveDenominations()
|
||||
.pipe(catchError(() => of([])))
|
||||
.subscribe((list: any[]) => {
|
||||
(list || []).forEach((d: any) => this.denomKindMap.set(d.id, d.kind === 'coin' ? 'coin' : 'note'));
|
||||
});
|
||||
this.load();
|
||||
}
|
||||
|
||||
@@ -107,6 +119,7 @@ export class CashHistoryComponent implements OnInit {
|
||||
id: s.id,
|
||||
date: s.settlementDate,
|
||||
fromParty: s.fromParty,
|
||||
fromCashierId: s.fromCashierId ?? undefined,
|
||||
toParty: s.toParty,
|
||||
amount: s.settlementAmount,
|
||||
note: s.note,
|
||||
@@ -138,7 +151,31 @@ export class CashHistoryComponent implements OnInit {
|
||||
}
|
||||
|
||||
viewDetail(row: TxnRow): void {
|
||||
this.detail = { row, denominations: [], loading: true };
|
||||
this.detail = { row, denominations: [], morningTotal: 0, loading: true };
|
||||
|
||||
if (row.type === 'settlement' && row.fromCashierId) {
|
||||
forkJoin({
|
||||
detail: this.service.getCashSettlementById(row.id).pipe(catchError(() => of(null))),
|
||||
morning: this.service.getCashierMorningBalance(row.fromCashierId, row.date).pipe(catchError(() => of(null)))
|
||||
}).subscribe(({ detail, morning }) => {
|
||||
if (!this.detail) return;
|
||||
const morningMap = new Map<number, number>();
|
||||
((morning?.denominations || []) as any[]).forEach((d: any) =>
|
||||
morningMap.set(d.denominationId, d.morningCount ?? 0)
|
||||
);
|
||||
this.detail.morningTotal = Number(morning?.totalMorning ?? 0);
|
||||
this.detail.denominations = ((detail?.details || []) as any[]).map((d: any) => ({
|
||||
denominationId: d.denominationId ?? null,
|
||||
denominationValue: d.denominationValue,
|
||||
kind: this.denomKindMap.get(d.denominationId) ?? (d.denominationValue <= 5 ? 'coin' : 'note'),
|
||||
morningCount: morningMap.get(d.denominationId) ?? 0,
|
||||
count: d.count,
|
||||
totalAmount: d.totalAmount
|
||||
}));
|
||||
this.detail.loading = false;
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let obs$;
|
||||
if (row.type === 'transfer') obs$ = this.service.getCashTransferById(row.id);
|
||||
@@ -147,9 +184,11 @@ export class CashHistoryComponent implements OnInit {
|
||||
|
||||
obs$.pipe(catchError(() => of(null))).subscribe((data: any) => {
|
||||
if (this.detail) {
|
||||
this.detail.denominations = (data?.details || []).map((d: any) => ({
|
||||
this.detail.denominations = ((data?.details || []) as any[]).map((d: any) => ({
|
||||
denominationId: d.denominationId ?? null,
|
||||
denominationValue: d.denominationValue,
|
||||
kind: this.denomKindMap.get(d.denominationId) ?? (d.denominationValue <= 5 ? 'coin' : 'note'),
|
||||
morningCount: 0,
|
||||
count: d.count,
|
||||
totalAmount: d.totalAmount
|
||||
}));
|
||||
@@ -200,6 +239,18 @@ export class CashHistoryComponent implements OnInit {
|
||||
return type === 'transfer' ? 'Cash Transfer' : type === 'settlement' ? 'Cash Settlement' : 'Inter-Cashier Transfer';
|
||||
}
|
||||
|
||||
notes(denoms: DenomDetail[]): DenomDetail[] {
|
||||
return denoms.filter((d) => d.kind === 'note').sort((a, b) => b.denominationValue - a.denominationValue);
|
||||
}
|
||||
|
||||
coins(denoms: DenomDetail[]): DenomDetail[] {
|
||||
return denoms.filter((d) => d.kind === 'coin').sort((a, b) => b.denominationValue - a.denominationValue);
|
||||
}
|
||||
|
||||
subtotal(denoms: DenomDetail[]): number {
|
||||
return denoms.reduce((s, d) => s + Number(d.totalAmount), 0);
|
||||
}
|
||||
|
||||
totalCount(denoms: DenomDetail[]): number {
|
||||
return denoms.reduce((s, d) => s + d.count, 0);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -171,8 +171,15 @@ export class CashTransferComponent implements OnInit {
|
||||
.map((d) => ({ denominationId: d.id, denominationValue: d.value, count: this.countFor(d) }))
|
||||
};
|
||||
this.service.createCashTransfer(payload).subscribe({
|
||||
next: () => {
|
||||
this.snackBar.open('Cash transfer recorded', 'Close', { duration: 3000 });
|
||||
next: (res: any) => {
|
||||
if (res?.glWarning) {
|
||||
this.snackBar.open(`Transfer saved (GL warning: ${res.glWarning})`, 'Close', {
|
||||
duration: 8000,
|
||||
panelClass: ['snack-warn']
|
||||
});
|
||||
} else {
|
||||
this.snackBar.open('Cash transfer recorded', 'Close', { duration: 3000 });
|
||||
}
|
||||
this.clear();
|
||||
this.note = '';
|
||||
this.fromParty = '';
|
||||
|
||||
@@ -58,11 +58,43 @@
|
||||
|
||||
@for (pos of results; track pos.cashierId) {
|
||||
<div class="pg-card" style="margin-bottom: 0">
|
||||
<!-- Header: cashier name + current total -->
|
||||
<div class="pos-header">
|
||||
<span class="pos-cashier">{{ pos.cashierName || labelForCashier(pos.cashierId) }}</span>
|
||||
<span class="pos-total">₹{{ pos.totalAmount | number: '1.2-2' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Morning vs Current comparison bar (only when morning data available) -->
|
||||
@if (pos.morningTotal > 0) {
|
||||
<div class="pos-compare-bar">
|
||||
<div class="pos-compare-item pos-compare-item--morning">
|
||||
<mat-icon>wb_sunny</mat-icon>
|
||||
<div>
|
||||
<span class="pos-compare-label">Morning Opening</span>
|
||||
<strong class="pos-compare-val">₹{{ pos.morningTotal | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<mat-icon class="pos-compare-arrow">arrow_forward</mat-icon>
|
||||
<div class="pos-compare-item pos-compare-item--current">
|
||||
<mat-icon>account_balance_wallet</mat-icon>
|
||||
<div>
|
||||
<span class="pos-compare-label">Current Position</span>
|
||||
<strong class="pos-compare-val">₹{{ pos.totalAmount | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pos-compare-delta"
|
||||
[class.pos-compare-delta--pos]="pos.totalAmount > pos.morningTotal"
|
||||
[class.pos-compare-delta--neg]="pos.totalAmount < pos.morningTotal"
|
||||
>
|
||||
<mat-icon>{{ pos.totalAmount >= pos.morningTotal ? 'trending_up' : 'trending_down' }}</mat-icon>
|
||||
{{ pos.totalAmount - pos.morningTotal >= 0 ? '+' : '' }}₹{{
|
||||
pos.totalAmount - pos.morningTotal | number: '1.2-2'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (pos.denominations.length === 0) {
|
||||
<div class="pg-empty">No balance.</div>
|
||||
}
|
||||
@@ -73,7 +105,10 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Denomination</th>
|
||||
<th style="text-align: center">Count</th>
|
||||
@if (pos.morningTotal > 0) {
|
||||
<th class="num pos-col-morning" title="Count received from vault this morning">Morning</th>
|
||||
}
|
||||
<th style="text-align: center">Current Count</th>
|
||||
<th class="num">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -83,6 +118,9 @@
|
||||
<td>
|
||||
<span class="pg-chip">₹{{ d.denominationValue }}</span>
|
||||
</td>
|
||||
@if (pos.morningTotal > 0) {
|
||||
<td class="num pos-morning-val">{{ d.morningCount || '—' }}</td>
|
||||
}
|
||||
<td style="text-align: center; font-weight: 700">{{ d.count }}</td>
|
||||
<td class="num">₹{{ d.amount | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
@@ -97,7 +135,10 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Denomination</th>
|
||||
<th style="text-align: center">Count</th>
|
||||
@if (pos.morningTotal > 0) {
|
||||
<th class="num pos-col-morning" title="Count received from vault this morning">Morning</th>
|
||||
}
|
||||
<th style="text-align: center">Current Count</th>
|
||||
<th class="num">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -107,6 +148,9 @@
|
||||
<td>
|
||||
<span class="pg-chip pg-chip--coin">₹{{ d.denominationValue }}</span>
|
||||
</td>
|
||||
@if (pos.morningTotal > 0) {
|
||||
<td class="num pos-morning-val">{{ d.morningCount || '—' }}</td>
|
||||
}
|
||||
<td style="text-align: center; font-weight: 700">{{ d.count }}</td>
|
||||
<td class="num">₹{{ d.amount | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
|
||||
@@ -27,3 +27,114 @@
|
||||
color: #0f4f3c;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ── Morning vs Current comparison bar ── */
|
||||
.pos-compare-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(135deg, #fffbeb 0%, #f0fdf4 100%);
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pos-compare-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
mat-icon {
|
||||
font-size: 20px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&--morning mat-icon {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
&--current mat-icon {
|
||||
color: #1e40af;
|
||||
}
|
||||
}
|
||||
|
||||
.pos-compare-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #64748b;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.pos-compare-val {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pos-compare-arrow {
|
||||
color: #94a3b8;
|
||||
font-size: 20px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pos-compare-delta {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&--pos {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
|
||||
mat-icon {
|
||||
color: #16a34a;
|
||||
}
|
||||
}
|
||||
|
||||
&--neg {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
|
||||
mat-icon {
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Morning column in position table ── */
|
||||
.pos-col-morning {
|
||||
color: #d97706;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pos-morning-val {
|
||||
color: #b45309;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pg-chip--coin {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
border-color: #fcd34d;
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { of } from 'rxjs';
|
||||
import { forkJoin, of } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { CashierService } from '../cashier.service';
|
||||
|
||||
@@ -21,6 +21,7 @@ interface DenomRow {
|
||||
denominationId: number;
|
||||
denominationValue: number;
|
||||
kind: string;
|
||||
morningCount: number;
|
||||
count: number;
|
||||
amount: number;
|
||||
}
|
||||
@@ -29,6 +30,7 @@ interface CashierPos {
|
||||
cashierName?: string;
|
||||
asOfDate: string;
|
||||
totalAmount: number;
|
||||
morningTotal: number;
|
||||
denominations: DenomRow[];
|
||||
}
|
||||
|
||||
@@ -91,17 +93,54 @@ export class CashierPositionComponent implements OnInit {
|
||||
this.loading = true;
|
||||
this.results = [];
|
||||
this.errorMsg = '';
|
||||
this.service
|
||||
.cashierPositionReport(this.selectedCashierId || undefined, this.asOfDate)
|
||||
.pipe(catchError(() => of(null)))
|
||||
.subscribe((data: any) => {
|
||||
|
||||
if (this.selectedCashierId) {
|
||||
forkJoin({
|
||||
position: this.service
|
||||
.cashierPositionReport(this.selectedCashierId, this.asOfDate)
|
||||
.pipe(catchError(() => of(null))),
|
||||
morning: this.service
|
||||
.getCashierMorningBalance(this.selectedCashierId, this.asOfDate)
|
||||
.pipe(catchError(() => of(null)))
|
||||
}).subscribe(({ position, morning }) => {
|
||||
this.loading = false;
|
||||
if (!data) {
|
||||
if (!position) {
|
||||
this.errorMsg = 'Failed to load position data.';
|
||||
return;
|
||||
}
|
||||
this.results = Array.isArray(data) ? data : [data];
|
||||
const morningMap = new Map<number, number>();
|
||||
((morning?.denominations || []) as any[]).forEach((d: any) =>
|
||||
morningMap.set(d.denominationId, d.morningCount ?? 0)
|
||||
);
|
||||
const morningTotal = Number(morning?.totalMorning ?? 0);
|
||||
const arr: any[] = Array.isArray(position) ? position : [position];
|
||||
this.results = arr.map((p: any) => ({
|
||||
...p,
|
||||
morningTotal,
|
||||
denominations: ((p.denominations || []) as any[]).map((d: any) => ({
|
||||
...d,
|
||||
morningCount: morningMap.get(d.denominationId) ?? 0
|
||||
}))
|
||||
}));
|
||||
});
|
||||
} else {
|
||||
this.service
|
||||
.cashierPositionReport(undefined, this.asOfDate)
|
||||
.pipe(catchError(() => of(null)))
|
||||
.subscribe((data: any) => {
|
||||
this.loading = false;
|
||||
if (!data) {
|
||||
this.errorMsg = 'Failed to load position data.';
|
||||
return;
|
||||
}
|
||||
const arr: any[] = Array.isArray(data) ? data : [data];
|
||||
this.results = arr.map((p: any) => ({
|
||||
...p,
|
||||
morningTotal: 0,
|
||||
denominations: ((p.denominations || []) as any[]).map((d: any) => ({ ...d, morningCount: 0 }))
|
||||
}));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
labelForCashier(id: number): string {
|
||||
|
||||
@@ -133,6 +133,11 @@ export class CashierService {
|
||||
return this.http.get('/cashreconciliation/check', { params });
|
||||
}
|
||||
|
||||
getCashierMorningBalance(cashierId: number, date: string): Observable<any> {
|
||||
const params = new HttpParams().set('cashierId', String(cashierId)).set('date', date);
|
||||
return this.http.get('/cashreports/cashier-morning', { params });
|
||||
}
|
||||
|
||||
getExpectedBalanceForMe(asOfDate?: string): Observable<any> {
|
||||
let params = new HttpParams();
|
||||
if (asOfDate) params = params.set('asOfDate', asOfDate);
|
||||
|
||||
@@ -69,6 +69,47 @@
|
||||
}
|
||||
|
||||
@if (!loadingExpected && rows.length > 0) {
|
||||
<!-- Morning Opening Balance 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>
|
||||
}
|
||||
|
||||
<div class="pg-card">
|
||||
@if (noteRows.length > 0) {
|
||||
<div class="pos-section-label">Notes</div>
|
||||
@@ -76,6 +117,7 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Denomination</th>
|
||||
<th class="num recon-col-morning" title="Cash received from vault this morning">Morning</th>
|
||||
<th style="text-align: center">Expected</th>
|
||||
<th style="text-align: center">Physical</th>
|
||||
<th class="num">Variance</th>
|
||||
@@ -87,6 +129,7 @@
|
||||
<td>
|
||||
<span class="pg-chip">₹{{ row.denominationValue }}</span>
|
||||
</td>
|
||||
<td class="num recon-morning">{{ row.morningCount || '—' }}</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">
|
||||
@@ -128,6 +171,7 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Denomination</th>
|
||||
<th class="num recon-col-morning" title="Cash received from vault this morning">Morning</th>
|
||||
<th style="text-align: center">Expected</th>
|
||||
<th style="text-align: center">Physical</th>
|
||||
<th class="num">Variance</th>
|
||||
@@ -139,6 +183,7 @@
|
||||
<td>
|
||||
<span class="pg-chip pg-chip--coin">₹{{ row.denominationValue }}</span>
|
||||
</td>
|
||||
<td class="num recon-morning">{{ row.morningCount || '—' }}</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">
|
||||
|
||||
@@ -111,3 +111,116 @@
|
||||
color: #92400e;
|
||||
}
|
||||
}
|
||||
|
||||
.pg-chip--coin {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
border-color: #fcd34d;
|
||||
}
|
||||
|
||||
/* ── Morning Opening Balance panel ── */
|
||||
.morning-panel {
|
||||
background: linear-gradient(135deg, #fffbeb 0%, #fef9ec 100%);
|
||||
border: 1px solid #fcd34d;
|
||||
border-radius: 10px;
|
||||
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 recon table ── */
|
||||
.recon-col-morning {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.recon-morning {
|
||||
color: #b45309;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ 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 { forkJoin, of } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { CashierService } from '../cashier.service';
|
||||
|
||||
@@ -23,6 +23,7 @@ interface DenomRow {
|
||||
denominationId: number;
|
||||
denominationValue: number;
|
||||
kind: string;
|
||||
morningCount: number;
|
||||
expectedCount: number;
|
||||
physicalCount: number;
|
||||
varianceCount: number;
|
||||
@@ -75,6 +76,7 @@ export class ReconciliationComponent implements OnInit {
|
||||
note = '';
|
||||
varianceReason = '';
|
||||
rows: DenomRow[] = [];
|
||||
morningTotal = 0;
|
||||
loadingExpected = false;
|
||||
saving = false;
|
||||
|
||||
@@ -120,21 +122,33 @@ export class ReconciliationComponent implements OnInit {
|
||||
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) => ({
|
||||
forkJoin({
|
||||
expected: this.service
|
||||
.getExpectedBalance(this.selectedCashierId, this.reconDate)
|
||||
.pipe(catchError(() => of(null))),
|
||||
morning: this.service
|
||||
.getCashierMorningBalance(this.selectedCashierId, this.reconDate)
|
||||
.pipe(catchError(() => of(null)))
|
||||
}).subscribe(({ expected, morning }) => {
|
||||
this.loadingExpected = false;
|
||||
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);
|
||||
if (!expected) return;
|
||||
this.rows = ((expected.denominations || []) as any[])
|
||||
.sort((a: any, b: any) => b.denominationValue - a.denominationValue)
|
||||
.map((d: any) => ({
|
||||
denominationId: d.denominationId || null,
|
||||
denominationValue: d.denominationValue,
|
||||
kind: d.kind || 'note',
|
||||
morningCount: morningMap.get(d.denominationId) ?? 0,
|
||||
expectedCount: d.expectedCount || 0,
|
||||
physicalCount: d.expectedCount || 0,
|
||||
varianceCount: 0
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
updatePhysical(row: DenomRow, raw: any): void {
|
||||
@@ -148,6 +162,12 @@ export class ReconciliationComponent implements OnInit {
|
||||
get coinRows(): DenomRow[] {
|
||||
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);
|
||||
}
|
||||
|
||||
get totalExpected(): number {
|
||||
return this.rows.reduce((s, r) => s + r.denominationValue * r.expectedCount, 0);
|
||||
|
||||
Reference in New Issue
Block a user