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/cashier-position/cashier-position.component.html

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

src/app/cashier/cashier-position/cashier-position.component.scss

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

src/app/cashier/cashier-position/cashier-position.component.ts

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