cbsnexora/src/app/cashier/cash-history/cash-history.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 · HISTORY</div>
      <h1 class="pg-title">Cash Movement History</h1>
      <p class="pg-sub">All transfers, settlements, and inter-cashier movements. Reverse any active transaction.</p>
    </div>
    <button type="button" class="pg-btn pg-btn--ghost" (click)="load()"><mat-icon>refresh</mat-icon> Refresh</button>
  </header>

  <!-- Reversal confirm panel -->
  @if (reversingId !== null) {
    <div class="reverse-panel">
      <mat-icon class="reverse-icon">warning</mat-icon>
      <span
        >Reverse <strong>#{{ reversingId }}</strong
        >? This cannot be undone.</span
      >
      <input class="reverse-reason" type="text" [(ngModel)]="reverseReason" placeholder="Reason (optional)" />
      <button type="button" class="pg-btn pg-btn--danger" (click)="confirmReverse()">Confirm Reversal</button>
      <button type="button" class="pg-btn pg-btn--ghost" (click)="cancelReverse()">Cancel</button>
    </div>
  }

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

  <mat-tab-group animationDuration="150ms">
    <mat-tab label="Cash Transfers ({{ transfers.length }})">
      <div class="pg-tab-body">
        <ng-container *ngTemplateOutlet="txnTable; context: { rows: transfers }"></ng-container>
      </div>
    </mat-tab>

    <mat-tab label="Settlements ({{ settlements.length }})">
      <div class="pg-tab-body">
        <ng-container *ngTemplateOutlet="txnTable; context: { rows: settlements }"></ng-container>
      </div>
    </mat-tab>

    <mat-tab label="Inter-Cashier ({{ interCashier.length }})">
      <div class="pg-tab-body">
        <ng-container *ngTemplateOutlet="txnTable; context: { rows: interCashier }"></ng-container>
      </div>
    </mat-tab>
  </mat-tab-group>
</div>

<ng-template #txnTable let-rows="rows">
  @if (rows.length === 0 && !loading) {
    <div class="pg-empty">No records.</div>
  }
  @if (rows.length > 0) {
    <div class="pg-card" style="margin-top: 16px">
      <table class="pg-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Date</th>
            <th>From</th>
            <th>To</th>
            <th class="num">Amount</th>
            <th>Note</th>
            <th>By</th>
            <th style="text-align: center">Status</th>
            <th style="text-align: center">Action</th>
          </tr>
        </thead>
        <tbody>
          @for (r of rows; track r.id) {
            <tr [class.row-reversed]="r.isReversed">
              <td>{{ r.id }}</td>
              <td>{{ r.date }}</td>
              <td>{{ r.fromParty }}</td>
              <td>{{ r.toParty }}</td>
              <td class="num">₹{{ r.amount | number: '1.2-2' }}</td>
              <td>{{ r.note || '—' }}</td>
              <td>{{ r.performedByUsername || '—' }}</td>
              <td style="text-align: center">
                <span class="badge" [class.badge-active]="!r.isReversed" [class.badge-reversed]="r.isReversed">
                  {{ r.isReversed ? 'Reversed' : 'Active' }}
                </span>
              </td>
              <td style="text-align: center">
                @if (!r.isReversed) {
                  <button type="button" class="pg-btn pg-btn--ghost btn-sm" (click)="startReverse(r)">
                    <mat-icon>undo</mat-icon>
                  </button>
                }
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
</ng-template>