cbsnexora/src/app/cashier/branch-cash-position/branch-cash-position.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">BRANCH OPERATIONS · BRANCH CASH POSITION</div>
      <h1 class="pg-title">Branch Cash Position</h1>
      <p class="pg-sub">
        The notes and coins the branch holds, denomination by denomination: the vault plus every cashier's drawer. Cash
        moving between the vault and a cashier nets out; deposits, withdrawals and exchanges change it.
      </p>
    </div>
  </header>

  <div class="pg-toolbar pg-toolbar--mat">
    <mat-form-field appearance="outline" subscriptSizing="dynamic">
      <mat-label>As of Date</mat-label>
      <input matInput type="date" [value]="asOfDate" (change)="onDateChange($any($event.target).value)" />
    </mat-form-field>
    <button type="button" class="pg-btn pg-btn--primary" (click)="load()" [disabled]="loading">
      <mat-icon>refresh</mat-icon> Refresh
    </button>
  </div>

  @if (errorMsg) {
    <div class="pg-empty bcp-error">{{ errorMsg }}</div>
  }
  @if (loading) {
    <div class="pg-empty">Loading…</div>
  }

  @if (position; as p) {
    <div class="bcp-totals">
      <div class="bcp-total">
        <span>Branch</span><strong>{{ p.officeName }}</strong>
      </div>
      <div class="bcp-total">
        <span>Vault</span><strong>₹{{ p.vaultAmount | number: '1.2-2' }}</strong>
      </div>
      <div class="bcp-total">
        <span>Cashiers' drawers</span><strong>₹{{ p.cashiersAmount | number: '1.2-2' }}</strong>
      </div>
      <div class="bcp-total bcp-total--main">
        <span>Bank total</span><strong>₹{{ p.totalAmount | number: '1.2-2' }}</strong>
      </div>
    </div>

    @if (!p.vaultHasBreakdown) {
      <div class="pg-empty bcp-note">
        No vault denomination breakdown was recorded on or before {{ p.asOfDate }}, so the vault column reads 0. Open
        the business day with a note/coin count to start tracking it.
      </div>
    }

    <ng-template #table let-rows let-label="label" let-coin="coin">
      @if (rows.length > 0) {
        <div class="pos-section-label" [class.pos-section-label--coin]="coin">{{ label }}</div>
        <table class="pg-table">
          <thead>
            <tr>
              <th>Denomination</th>
              <th class="num">Vault</th>
              <th class="num">Cashiers</th>
              <th class="num">Bank total (count)</th>
              <th class="num">Bank total (₹)</th>
              <th class="num">Exchange today</th>
            </tr>
          </thead>
          <tbody>
            @for (d of rows; track d.denominationId) {
              <tr>
                <td>
                  <span class="pg-chip" [class.pg-chip--coin]="coin">₹{{ d.denominationValue }}</span>
                </td>
                <td class="num">{{ d.vaultCount }}</td>
                <td class="num">{{ d.cashierCount }}</td>
                <td class="num bcp-strong">{{ d.totalCount }}</td>
                <td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
                <td
                  class="num bcp-move"
                  [class.bcp-move--in]="d.exchangeNet > 0"
                  [class.bcp-move--out]="d.exchangeNet < 0"
                >
                  {{ movement(d.exchangeNet) }}
                </td>
              </tr>
            }
          </tbody>
        </table>
      }
    </ng-template>

    <div class="pg-card bcp-card">
      <ng-container
        *ngTemplateOutlet="table; context: { $implicit: notes(), label: 'Notes', coin: false }"
      ></ng-container>
      <ng-container
        *ngTemplateOutlet="table; context: { $implicit: coins(), label: 'Coins', coin: true }"
      ></ng-container>
    </div>

    <p class="bcp-foot">
      <strong>Exchange today</strong> is the notes taken in less the notes given out by cash exchanges on
      {{ p.asOfDate }}. It is already part of the Cashiers column; it is shown beside the total so a change in the mix
      can be seen.
    </p>
  }
</div>