cbsnexora/src/app/cashier/vault-position/vault-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 · VAULT POSITION</div>
      <h1 class="pg-title">Vault Position</h1>
      <p class="pg-sub">
        Denomination-wise stock a vault currently holds — the branch's own opening breakdown, plus whatever has been
        settled back into it, minus whatever it has handed out to cashiers since.
      </p>
    </div>
  </header>

  <div class="pg-toolbar pg-toolbar--mat">
    @if (tellers.length === 1) {
      <mat-form-field appearance="outline" subscriptSizing="dynamic">
        <mat-label>Vault</mat-label>
        <input matInput type="text" [value]="tellers[0].name" readonly />
      </mat-form-field>
    } @else {
      <mat-form-field appearance="outline" subscriptSizing="dynamic">
        <mat-label>Vault (optional)</mat-label>
        <mat-select [value]="selectedTellerId" (selectionChange)="selectedTellerId = $event.value">
          <mat-option [value]="null">All Vaults</mat-option>
          @for (t of tellers; track t.id) {
            <mat-option [value]="t.id">{{ t.name }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
    }

    <mat-form-field appearance="outline" subscriptSizing="dynamic">
      <mat-label>As of Date</mat-label>
      <input matInput type="date" [value]="asOfDate" (change)="asOfDate = $any($event.target).value" />
    </mat-form-field>

    <button type="button" class="pg-btn pg-btn--primary" (click)="load()" [disabled]="loading">
      <mat-icon>bar_chart</mat-icon> Load Position
    </button>
  </div>

  @if (errorMsg) {
    <div class="pg-empty" style="color: #dc2626">{{ errorMsg }}</div>
  }

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

  @for (pos of results; track pos.tellerId) {
    <div class="pg-card" style="margin-bottom: 14px">
      <div class="pos-header">
        <span class="pos-cashier">{{ pos.tellerName || labelForTeller(pos.tellerId) }}</span>
        <span class="pos-total">₹{{ pos.totalAmount | number: '1.2-2' }}</span>
      </div>

      @if (!pos.hasBreakdown) {
        <div class="pg-empty">
          No denomination breakdown was recorded for this vault's opening day on or before {{ pos.asOfDate }}. Open (or
          re-open) the business day with a note/coin count to start tracking its stock.
        </div>
      } @else {
        @if (pos.anchorDate && pos.anchorDate !== pos.asOfDate) {
          <div class="pg-empty" style="padding: 8px 14px; text-align: left">
            Carried forward from the opening breakdown recorded on {{ pos.anchorDate }}.
          </div>
        }

        @if (pos.denominations.length === 0) {
          <div class="pg-empty">No stock — everything opened for this vault has been handed out.</div>
        }

        @if (notes(pos).length > 0) {
          <div class="pos-section-label">Notes</div>
          <table class="pg-table">
            <thead>
              <tr>
                <th>Denomination</th>
                <th style="text-align: center">Current Count</th>
                <th class="num">Amount</th>
              </tr>
            </thead>
            <tbody>
              @for (d of notes(pos); track d.denominationId) {
                <tr>
                  <td>
                    <span class="pg-chip">₹{{ d.denominationValue }}</span>
                  </td>
                  <td style="text-align: center; font-weight: 700">{{ d.count }}</td>
                  <td class="num">₹{{ d.amount | number: '1.2-2' }}</td>
                </tr>
              }
            </tbody>
          </table>
        }

        @if (coins(pos).length > 0) {
          <div class="pos-section-label pos-section-label--coin">Coins</div>
          <table class="pg-table">
            <thead>
              <tr>
                <th>Denomination</th>
                <th style="text-align: center">Current Count</th>
                <th class="num">Amount</th>
              </tr>
            </thead>
            <tbody>
              @for (d of coins(pos); track d.denominationId) {
                <tr>
                  <td>
                    <span class="pg-chip pg-chip--coin">₹{{ d.denominationValue }}</span>
                  </td>
                  <td style="text-align: center; font-weight: 700">{{ d.count }}</td>
                  <td class="num">₹{{ d.amount | number: '1.2-2' }}</td>
                </tr>
              }
            </tbody>
          </table>
        }
      }
    </div>
  }

  @if (!loading && results.length === 0 && !errorMsg) {
    <div class="pg-empty">Select filters and click "Load Position".</div>
  }
</div>