feat: cashier denomination-wise opening & closing balance panels in all deposit/withdrawal forms

OVERVIEW
--------
Added real-time cashier cash position display inside the denomination breakdown
panel of all 4 transaction entry screens: Savings, Current Account, Recurring
Deposit, and Fixed Deposit. Shows opening balance at the top and projected
closing balance at the bottom after factoring in the current transaction.

BACKEND INTEGRATION
-------------------
- New CashierService (src/app/cashier/cashier.service.ts)
  getCashierPositionForMe(asOfDate?) calls GET /cashreports/cashier-position/me
  Returns denomination-wise opening cash position for the logged-in cashier user.
  Non-cashier users receive empty denominations array; UI hides panels silently.

OPENING BALANCE CARD (top of denomination panel)
-------------------------------------------------
- Loaded on ngOnInit() via loadOpeningPosition() in all 4 component .ts files
- Notes and Coins displayed in separate labeled pill sections
- Each pill shows: Rs{value} x{count} format
- Card is hidden entirely if the logged-in user is not a cashier

CLOSING BALANCE CARD (below tally / Apply button)
--------------------------------------------------
- Computed getter closingDenoms() merges opening position with entered denominations
  deposit:    closingCount = openCount + enteredCount
  withdrawal: closingCount = openCount - enteredCount
- Notes and Coins in separate labeled pill sections (identical format to opening)
- Entered/changed denominations (delta != 0): full opacity + bold font weight
- Untouched denominations (delta = 0): 38% opacity, clearly dimmed, no borders
- closingTotal = openingTotal +/- denominationTotal shown in card header
- Card turns green for positive closing balance, red for negative

COMPONENTS UPDATED
------------------
- savings-account-transactions       (.ts / .html / .scss)
- current-account-transactions       (.ts / .html / .scss)
- deposit-recurring-deposits-account (.ts / .html / .scss)
- fixed-deposits-cash-transaction    (.ts / .html / .scss)

CASHIER MODULE (new - src/app/cashier/)
-----------------------------------------
Full cashier workspace module added to the app:
- cashier.service.ts          API calls (position, transfers, settlement, etc.)
- cashier.module.ts           Angular module declaration
- cashier-routing.module.ts   Lazy-loaded routes
- cashier-position/           Cashier cash position dashboard
- cash-exchange-entry/        Cash exchange denomination entry
- cash-history/               Transaction history per cashier
- cash-settlement/            End-of-day cash settlement
- cash-transfer/              Vault-to-cashier cash transfer
- inter-cashier-transfer/     Transfer between cashier drawers
- reconciliation/             Cash reconciliation with GL
- closing-cash-report/        Closing balance report
- currency-exchange-detail/   Currency exchange breakdown
- excess-transaction-report/  Excess/short transaction report
Module wired into app.module.ts and shell nav (shell.component.html).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -0,0 +1,120 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="pg">
+  <header class="pg-head">
+    <div>
+      <div class="pg-eyebrow">CASHIER · CASH TRANSFER</div>
+      <h1 class="pg-title">Cash Transfer</h1>
+      <p class="pg-sub">Move cash denomination-wise from one party to another (e.g. Vault → Cashier for opening).</p>
+    </div>
+    <button type="button" class="pg-btn pg-btn--ghost" (click)="clear()"><mat-icon>undo</mat-icon> Clear</button>
+  </header>
+
+  <div class="pg-toolbar pg-toolbar--mat">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>From (Teller / Head)</mat-label>
+      <mat-select [value]="fromTellerId" (selectionChange)="onTellerSelect($event.value)">
+        @for (t of tellers; track t.id) {
+          <mat-option [value]="t.id">{{ t.name }}</mat-option>
+        }
+        @if (tellers.length === 0) {
+          <mat-option [value]="null" disabled>No tellers configured</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>To (Cashier)</mat-label>
+      <mat-select [value]="toCashierId" (selectionChange)="onCashierSelect($event.value)" [disabled]="!fromTellerId">
+        @for (c of cashiers; track c.id) {
+          <mat-option [value]="c.id">{{ c.label }}</mat-option>
+        }
+        @if (fromTellerId && cashiers.length === 0 && !loadingCashiers) {
+          <mat-option [value]="null" disabled>No cashiers for this teller</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
+      <mat-label>Date</mat-label>
+      <input matInput type="date" [value]="transferDate" (change)="transferDate = $any($event.target).value" />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="pg-note-field">
+      <mat-label>Note</mat-label>
+      <input matInput type="text" [value]="note" (input)="note = $any($event.target).value" placeholder="Optional" />
+    </mat-form-field>
+  </div>
+
+  <div class="pg-card">
+    <table class="pg-table">
+      <thead>
+        <tr>
+          <th>Denomination</th>
+          <th style="text-align: center">Count</th>
+          <th class="num">Amount</th>
+        </tr>
+      </thead>
+      <tbody>
+        @if (notes.length) {
+          <tr class="pg-section">
+            <td colspan="3">Bank Notes</td>
+          </tr>
+        }
+        @for (d of notes; track d.id) {
+          <tr>
+            <td>
+              <span class="pg-chip">{{ d.label }}</span>
+            </td>
+            <td style="display: flex; justify-content: center">
+              <div class="pg-step">
+                <button type="button" (click)="bump(d, -1)" [disabled]="countFor(d) === 0">−</button>
+                <input type="number" min="0" [value]="countFor(d)" (input)="onChange(d, $any($event.target).value)" />
+                <button type="button" (click)="bump(d, 1)">+</button>
+              </div>
+            </td>
+            <td class="num">₹{{ subtotal(d) | number: '1.2-2' }}</td>
+          </tr>
+        }
+        @if (coins.length) {
+          <tr class="pg-section">
+            <td colspan="3">Coins</td>
+          </tr>
+        }
+        @for (d of coins; track d.id) {
+          <tr>
+            <td>
+              <span class="pg-chip pg-chip--coin">{{ d.label }}</span>
+            </td>
+            <td style="display: flex; justify-content: center">
+              <div class="pg-step">
+                <button type="button" (click)="bump(d, -1)" [disabled]="countFor(d) === 0">−</button>
+                <input type="number" min="0" [value]="countFor(d)" (input)="onChange(d, $any($event.target).value)" />
+                <button type="button" (click)="bump(d, 1)">+</button>
+              </div>
+            </td>
+            <td class="num">₹{{ subtotal(d) | number: '1.2-2' }}</td>
+          </tr>
+        }
+        @if (denoms.length === 0) {
+          <tr>
+            <td colspan="3" class="pg-empty">No active denominations. Add some in Cash Denomination.</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+
+  <div class="pg-total-bar">
+    Total to transfer: <strong>₹{{ total | number: '1.2-2' }}</strong>
+    <button type="button" class="pg-btn pg-btn--primary" [disabled]="!valid || saving" (click)="submit()">
+      <mat-icon>swap_horiz</mat-icon> Record Transfer
+    </button>
+  </div>
+</div>