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>

src/app/cashier/cash-history/cash-history.component.html

@@ -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>

src/app/cashier/cash-history/cash-history.component.scss

@@ -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;
+}

src/app/cashier/cash-history/cash-history.component.ts

@@ -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);
   }