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

<!--
  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">
    @if (tellers.length === 1) {
      <mat-form-field appearance="outline" subscriptSizing="dynamic">
        <mat-label>From (Teller / Head)</mat-label>
        <input matInput type="text" [value]="fromParty" readonly />
      </mat-form-field>
    } @else {
      <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)="onDateChange($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>

  <!-- What the vault actually has, before anyone starts counting a handout it can't cover. -->
  @if (fromTellerId && !loadingVault) {
    @if (vaultHasBreakdown) {
      <div class="ct-vault-banner">
        <mat-icon>account_balance</mat-icon>
        Vault available: <strong>₹{{ vaultTotalAvailable | number: '1.2-2' }}</strong>
      </div>
    } @else {
      <div class="ct-vault-banner ct-vault-banner--warn">
        <mat-icon>warning</mat-icon>
        No denomination breakdown recorded for this vault — per-note availability can't be checked, only the total
        opening balance.
      </div>
    }
  }

  <div class="pg-card">
    <table class="pg-table">
      <thead>
        <tr>
          <th>Denomination</th>
          <th class="num">Available</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="4">Bank Notes</td>
          </tr>
        }
        @for (d of notes; track d.id) {
          <tr [class.ct-row--over]="exceedsAvailable(d)">
            <td>
              <span class="pg-chip">{{ d.label }}</span>
            </td>
            <td class="num" [class.ct-available--over]="exceedsAvailable(d)">
              {{ vaultHasBreakdown ? availableFor(d) : '—' }}
            </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="4">Coins</td>
          </tr>
        }
        @for (d of coins; track d.id) {
          <tr [class.ct-row--over]="exceedsAvailable(d)">
            <td>
              <span class="pg-chip pg-chip--coin">{{ d.label }}</span>
            </td>
            <td class="num" [class.ct-available--over]="exceedsAvailable(d)">
              {{ vaultHasBreakdown ? availableFor(d) : '—' }}
            </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="4" class="pg-empty">No active denominations. Add some in Cash Denomination.</td>
          </tr>
        }
      </tbody>
    </table>
  </div>

  @if (anyDenomExceedsAvailable) {
    <div class="ct-limit-warn">
      One or more notes/coins above are counted higher than the vault currently holds — reduce them before recording the
      transfer.
    </div>
  } @else if (exceedsVaultTotal) {
    <div class="ct-limit-warn">
      Total exceeds what the vault has available (₹{{ vaultTotalAvailable | number: '1.2-2' }}).
    </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>