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">
+        <!-- Notes -->
-          <thead>
+        @if (notes(detail.denominations).length > 0) {
-            <tr>
+          <div class="detail-denom-kind-label">Notes</div>
-              <th>Denomination</th>
+          <table class="pg-table detail-denom-table">
-              <th style="text-align: center">Count</th>
+            <thead>
-              <th class="num">Total</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (d of detail.denominations; track d.denominationValue) {
               <tr>
-                <td>
+                <th>Denomination</th>
-                  <span class="pg-chip">₹{{ d.denominationValue }}</span>
+                @if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
-                </td>
+                  <th class="num settle-detail-col-morning" title="Count received from vault this morning">Morning</th>
-                <td style="text-align: center; font-weight: 600">{{ d.count }}</td>
+                }
-                <td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
+                <th style="text-align: center">{{ detail.row.type === 'settlement' ? 'Settled' : 'Count' }}</th>
+                <th class="num">Total</th>
               </tr>
-            }
+            </thead>
-          </tbody>
+            <tbody>
-          <tfoot>
+              @for (d of notes(detail.denominations); track d.denominationValue) {
-            <tr class="detail-denom-total">
+                <tr>
-              <td><strong>Total</strong></td>
+                  <td>
-              <td style="text-align: center">
+                    <span class="pg-chip">₹{{ d.denominationValue }}</span>
-                <strong>{{ totalCount(detail.denominations) }}</strong>
+                  </td>
-              </td>
+                  @if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
-              <td class="num">
+                    <td class="num settle-detail-morning">{{ d.morningCount || '—' }}</td>
-                <strong>₹{{ detail.row.amount | number: '1.2-2' }}</strong>
+                  }
-              </td>
+                  <td style="text-align: center; font-weight: 600">{{ d.count }}</td>
-            </tr>
+                  <td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
-          </tfoot>
+                </tr>
-        </table>
+              }
+            </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);
   }

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

@@ -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">
+                      <span class="settle-var-amt"
-                        (₹{{ varianceFor(row) * row.denominationValue | number: '1.0-0' }})
+                        >(₹{{ varianceFor(row) * row.denominationValue | number: '1.0-0' }})</span
-                      </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">
+                      <span class="settle-var-amt"
-                        (₹{{ varianceFor(row) * row.denominationValue | number: '1.0-0' }})
+                        >(₹{{ varianceFor(row) * row.denominationValue | number: '1.0-0' }})</span
-                      </span>
+                      >
                     }
                   </td>
                 </tr>

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

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

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

@@ -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 })))
+        .pipe(catchError(() => of({ reconciled: false }))),
-    }).subscribe(({ expected, check, recon }) => {
+      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;

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

@@ -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: () => {
+      next: (res: any) => {
-        this.snackBar.open('Cash transfer recorded', 'Close', { duration: 3000 });
+        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 = '';

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)
+    if (this.selectedCashierId) {
-      .pipe(catchError(() => of(null)))
+      forkJoin({
-      .subscribe((data: any) => {
+        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 {

src/app/cashier/cashier.service.ts

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

src/app/cashier/reconciliation/reconciliation.component.html

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

src/app/cashier/reconciliation/reconciliation.component.scss

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

src/app/cashier/reconciliation/reconciliation.component.ts

@@ -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
+    forkJoin({
-      .getExpectedBalance(this.selectedCashierId, this.reconDate)
+      expected: this.service
-      .pipe(catchError(() => of(null)))
+        .getExpectedBalance(this.selectedCashierId, this.reconDate)
-      .subscribe((data: any) => {
+        .pipe(catchError(() => of(null))),
-        this.loadingExpected = false;
+      morning: this.service
-        if (!data) return;
+        .getCashierMorningBalance(this.selectedCashierId, this.reconDate)
-        this.rows = (data.denominations || []).map((d: any) => ({
+        .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);