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 ({{ transfersTotal }})">
      <div class="pg-tab-body">
        <ng-container *ngTemplateOutlet="txnTable; context: { rows: transfers }"></ng-container>
        <mat-paginator
          [length]="transfersTotal"
          [pageSize]="pageSize"
          [pageSizeOptions]="pageSizeOptions"
          showFirstLastButtons
          (page)="onPageChange('transfers', $event)"
        ></mat-paginator>
      </div>
    </mat-tab>

    <mat-tab label="Settlements ({{ settlementsTotal }})">
      <div class="pg-tab-body">
        <ng-container *ngTemplateOutlet="txnTable; context: { rows: settlements }"></ng-container>
        <mat-paginator
          [length]="settlementsTotal"
          [pageSize]="pageSize"
          [pageSizeOptions]="pageSizeOptions"
          showFirstLastButtons
          (page)="onPageChange('settlements', $event)"
        ></mat-paginator>
      </div>
    </mat-tab>

    <mat-tab label="Inter-Cashier ({{ interTotal }})">
      <div class="pg-tab-body">
        <ng-container *ngTemplateOutlet="txnTable; context: { rows: interCashier }"></ng-container>
        <mat-paginator
          [length]="interTotal"
          [pageSize]="pageSize"
          [pageSizeOptions]="pageSizeOptions"
          showFirstLastButtons
          (page)="onPageChange('inter', $event)"
        ></mat-paginator>
      </div>
    </mat-tab>

    <mat-tab label="Cash Exchanges ({{ exchangesTotal }})">
      <div class="pg-tab-body">
        <ng-container *ngTemplateOutlet="txnTable; context: { rows: exchanges }"></ng-container>
        <mat-paginator
          [length]="exchangesTotal"
          [pageSize]="pageSize"
          [pageSizeOptions]="pageSizeOptions"
          showFirstLastButtons
          (page)="onPageChange('exchanges', $event)"
        ></mat-paginator>
      </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 class="td-note">{{ 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">
                <div class="action-btns">
                  <button
                    type="button"
                    class="pg-btn pg-btn--ghost btn-sm btn-view"
                    title="View details"
                    (click)="viewDetail(r)"
                  >
                    <mat-icon>visibility</mat-icon>
                  </button>
                  @if (!r.isReversed) {
                    <button type="button" class="pg-btn pg-btn--ghost btn-sm" title="Reverse" (click)="startReverse(r)">
                      <mat-icon>undo</mat-icon>
                    </button>
                  }
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
</ng-template>

<!-- ── Detail Overlay ── -->
@if (detail) {
  <div class="detail-overlay" (click)="closeDetail()">
    <div class="detail-panel" (click)="$event.stopPropagation()">
      <!-- Header -->
      <div class="detail-panel__head">
        <div class="detail-panel__title">
          <mat-icon>{{
            detail.row.type === 'settlement'
              ? 'account_balance_wallet'
              : detail.row.type === 'exchange'
                ? 'currency_exchange'
                : 'swap_horiz'
          }}</mat-icon>
          <div>
            <span class="detail-panel__type">{{ typeLabel(detail.row.type) }}</span>
            <span class="detail-panel__id">#{{ detail.row.id }}</span>
          </div>
        </div>
        <button type="button" class="detail-panel__close" (click)="closeDetail()">
          <mat-icon>close</mat-icon>
        </button>
      </div>

      <!-- Meta grid -->
      <div class="detail-meta">
        <div class="detail-meta__item">
          <span class="detail-meta__label">From</span>
          <span class="detail-meta__val">{{ detail.row.fromParty || '—' }}</span>
        </div>
        <div class="detail-meta__item">
          <span class="detail-meta__label">To</span>
          <span class="detail-meta__val">{{ detail.row.toParty || '—' }}</span>
        </div>
        <div class="detail-meta__item">
          <span class="detail-meta__label">Date</span>
          <span class="detail-meta__val">{{ detail.row.date }}</span>
        </div>
        <div class="detail-meta__item">
          <span class="detail-meta__label">Total Amount</span>
          <span class="detail-meta__val detail-meta__val--amount">₹{{ detail.row.amount | number: '1.2-2' }}</span>
        </div>
        <div class="detail-meta__item">
          <span class="detail-meta__label">Performed By</span>
          <span class="detail-meta__val">{{ detail.row.performedByUsername || '—' }}</span>
        </div>
        <div class="detail-meta__item">
          <span class="detail-meta__label">Created At</span>
          <span class="detail-meta__val">{{ detail.row.createdAt || '—' }}</span>
        </div>
        <div class="detail-meta__item detail-meta__item--full">
          <span class="detail-meta__label">Note</span>
          <span class="detail-meta__val">{{ detail.row.note || '—' }}</span>
        </div>
        <div class="detail-meta__item">
          <span class="detail-meta__label">Status</span>
          <span
            class="badge"
            [class.badge-active]="!detail.row.isReversed"
            [class.badge-reversed]="detail.row.isReversed"
          >
            {{ detail.row.isReversed ? 'Reversed' : 'Active' }}
          </span>
        </div>
      </div>

      <!-- Reversal info (if reversed) -->
      @if (detail.row.isReversed) {
        <div class="detail-reversal">
          <mat-icon>undo</mat-icon>
          <div>
            <strong>Reversed</strong>
            @if (detail.row.reversedAt) {
              <span> on {{ detail.row.reversedAt }}</span>
            }
            @if (detail.row.reverseReason) {
              <span class="detail-reversal__reason"> — {{ detail.row.reverseReason }}</span>
            }
          </div>
        </div>
      }

      <!-- Morning vs Settled comparison (settlements only) -->
      @if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
        <div class="settle-compare-bar">
          <div class="settle-compare-item settle-compare-item--morning">
            <mat-icon>wb_sunny</mat-icon>
            <div>
              <span class="settle-compare-label">Morning Received</span>
              <strong>₹{{ detail.morningTotal | number: '1.2-2' }}</strong>
            </div>
          </div>
          <mat-icon class="settle-compare-arrow">arrow_forward</mat-icon>
          <div class="settle-compare-item settle-compare-item--settled">
            <mat-icon>account_balance_wallet</mat-icon>
            <div>
              <span class="settle-compare-label">This Settlement</span>
              <strong>₹{{ detail.row.amount | number: '1.2-2' }}</strong>
            </div>
          </div>
          <div
            class="settle-compare-net"
            [class.settle-compare-net--pos]="detail.row.amount > detail.morningTotal"
            [class.settle-compare-net--neg]="detail.row.amount < detail.morningTotal"
            [class.settle-compare-net--zero]="detail.row.amount === detail.morningTotal"
          >
            <mat-icon>{{
              detail.row.amount === detail.morningTotal
                ? 'check_circle'
                : detail.row.amount > detail.morningTotal
                  ? 'trending_up'
                  : 'trending_down'
            }}</mat-icon>
            {{
              detail.row.amount === detail.morningTotal
                ? 'Fully Settled'
                : (detail.row.amount - detail.morningTotal >= 0 ? '+' : '') +
                  '₹' +
                  (detail.row.amount - detail.morningTotal | number: '1.2-2')
            }}
          </div>
        </div>
      }

      <!-- Denomination breakdown -->
      <div class="detail-denom-head">
        <mat-icon>payments</mat-icon>
        Denomination Breakdown
      </div>

      @if (detail.loading) {
        <div class="pg-empty" style="padding: 20px 0">Loading denomination details…</div>
      } @else if (
        detail.row.type === 'exchange' &&
        detail.receivedDenominations.length === 0 &&
        detail.givenDenominations.length === 0
      ) {
        <div class="pg-empty" style="padding: 20px 0">No denomination data recorded.</div>
      } @else if (detail.row.type !== 'exchange' && detail.denominations.length === 0) {
        <div class="pg-empty" style="padding: 20px 0">No denomination data recorded.</div>
      } @else if (detail.row.type === 'exchange') {
        <!-- RECEIVED from customer -->
        <div class="cx-dir-label cx-dir-label--received"><mat-icon>south</mat-icon> Received from Customer</div>
        @if (notes(detail.receivedDenominations).length > 0) {
          <div class="detail-denom-kind-label">Notes</div>
          <table class="pg-table detail-denom-table">
            <thead>
              <tr>
                <th>Denomination</th>
                <th style="text-align: center">Count</th>
                <th class="num">Total</th>
              </tr>
            </thead>
            <tbody>
              @for (d of notes(detail.receivedDenominations); track d.denominationValue) {
                <tr>
                  <td>
                    <span class="pg-chip">₹{{ d.denominationValue }}</span>
                  </td>
                  <td style="text-align: center; font-weight: 600">{{ d.count }}</td>
                  <td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
                </tr>
              }
            </tbody>
            <tfoot>
              <tr class="detail-denom-total">
                <td><strong>Subtotal</strong></td>
                <td style="text-align: center">
                  <strong>{{ totalCount(notes(detail.receivedDenominations)) }}</strong>
                </td>
                <td class="num">
                  <strong>₹{{ subtotal(notes(detail.receivedDenominations)) | number: '1.2-2' }}</strong>
                </td>
              </tr>
            </tfoot>
          </table>
        }
        @if (coins(detail.receivedDenominations).length > 0) {
          <div class="detail-denom-kind-label">Coins</div>
          <table class="pg-table detail-denom-table">
            <thead>
              <tr>
                <th>Denomination</th>
                <th style="text-align: center">Count</th>
                <th class="num">Total</th>
              </tr>
            </thead>
            <tbody>
              @for (d of coins(detail.receivedDenominations); track d.denominationValue) {
                <tr>
                  <td>
                    <span class="pg-chip pg-chip--coin">₹{{ d.denominationValue }}</span>
                  </td>
                  <td style="text-align: center; font-weight: 600">{{ d.count }}</td>
                  <td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
                </tr>
              }
            </tbody>
            <tfoot>
              <tr class="detail-denom-total">
                <td><strong>Subtotal</strong></td>
                <td style="text-align: center">
                  <strong>{{ totalCount(coins(detail.receivedDenominations)) }}</strong>
                </td>
                <td class="num">
                  <strong>₹{{ subtotal(coins(detail.receivedDenominations)) | number: '1.2-2' }}</strong>
                </td>
              </tr>
            </tfoot>
          </table>
        }

        <!-- GIVEN to customer -->
        <div class="cx-dir-label cx-dir-label--given"><mat-icon>north</mat-icon> Given to Customer</div>
        @if (notes(detail.givenDenominations).length > 0) {
          <div class="detail-denom-kind-label">Notes</div>
          <table class="pg-table detail-denom-table">
            <thead>
              <tr>
                <th>Denomination</th>
                <th style="text-align: center">Count</th>
                <th class="num">Total</th>
              </tr>
            </thead>
            <tbody>
              @for (d of notes(detail.givenDenominations); track d.denominationValue) {
                <tr>
                  <td>
                    <span class="pg-chip">₹{{ d.denominationValue }}</span>
                  </td>
                  <td style="text-align: center; font-weight: 600">{{ d.count }}</td>
                  <td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
                </tr>
              }
            </tbody>
            <tfoot>
              <tr class="detail-denom-total">
                <td><strong>Subtotal</strong></td>
                <td style="text-align: center">
                  <strong>{{ totalCount(notes(detail.givenDenominations)) }}</strong>
                </td>
                <td class="num">
                  <strong>₹{{ subtotal(notes(detail.givenDenominations)) | number: '1.2-2' }}</strong>
                </td>
              </tr>
            </tfoot>
          </table>
        }
        @if (coins(detail.givenDenominations).length > 0) {
          <div class="detail-denom-kind-label">Coins</div>
          <table class="pg-table detail-denom-table">
            <thead>
              <tr>
                <th>Denomination</th>
                <th style="text-align: center">Count</th>
                <th class="num">Total</th>
              </tr>
            </thead>
            <tbody>
              @for (d of coins(detail.givenDenominations); track d.denominationValue) {
                <tr>
                  <td>
                    <span class="pg-chip pg-chip--coin">₹{{ d.denominationValue }}</span>
                  </td>
                  <td style="text-align: center; font-weight: 600">{{ d.count }}</td>
                  <td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
                </tr>
              }
            </tbody>
            <tfoot>
              <tr class="detail-denom-total">
                <td><strong>Subtotal</strong></td>
                <td style="text-align: center">
                  <strong>{{ totalCount(coins(detail.givenDenominations)) }}</strong>
                </td>
                <td class="num">
                  <strong>₹{{ subtotal(coins(detail.givenDenominations)) | number: '1.2-2' }}</strong>
                </td>
              </tr>
            </tfoot>
          </table>
        }

        <!-- Grand total -->
        <div class="detail-denom-grand-total">
          <span>Grand Total</span>
          <span>{{ totalCount(detail.receivedDenominations) }} notes/coins</span>
          <span>₹{{ detail.row.amount | number: '1.2-2' }}</span>
        </div>
      } @else {
        <!-- Notes -->
        @if (notes(detail.denominations).length > 0) {
          <div class="detail-denom-kind-label">Notes</div>
          <table class="pg-table detail-denom-table">
            <thead>
              <tr>
                <th>Denomination</th>
                @if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
                  <th class="num settle-detail-col-morning" title="Count received from vault this morning">Morning</th>
                }
                <th style="text-align: center">{{ detail.row.type === 'settlement' ? 'Settled' : 'Count' }}</th>
                <th class="num">Total</th>
              </tr>
            </thead>
            <tbody>
              @for (d of notes(detail.denominations); track d.denominationValue) {
                <tr>
                  <td>
                    <span class="pg-chip">₹{{ d.denominationValue }}</span>
                  </td>
                  @if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
                    <td class="num settle-detail-morning">{{ d.morningCount || '—' }}</td>
                  }
                  <td style="text-align: center; font-weight: 600">{{ d.count }}</td>
                  <td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
                </tr>
              }
            </tbody>
            <tfoot>
              <tr class="detail-denom-total">
                <td><strong>Subtotal</strong></td>
                @if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
                  <td></td>
                }
                <td style="text-align: center">
                  <strong>{{ totalCount(notes(detail.denominations)) }}</strong>
                </td>
                <td class="num">
                  <strong>₹{{ subtotal(notes(detail.denominations)) | number: '1.2-2' }}</strong>
                </td>
              </tr>
            </tfoot>
          </table>
        }

        <!-- Coins -->
        @if (coins(detail.denominations).length > 0) {
          <div class="detail-denom-kind-label">Coins</div>
          <table class="pg-table detail-denom-table">
            <thead>
              <tr>
                <th>Denomination</th>
                @if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
                  <th class="num settle-detail-col-morning" title="Count received from vault this morning">Morning</th>
                }
                <th style="text-align: center">{{ detail.row.type === 'settlement' ? 'Settled' : 'Count' }}</th>
                <th class="num">Total</th>
              </tr>
            </thead>
            <tbody>
              @for (d of coins(detail.denominations); track d.denominationValue) {
                <tr>
                  <td>
                    <span class="pg-chip pg-chip--coin">₹{{ d.denominationValue }}</span>
                  </td>
                  @if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
                    <td class="num settle-detail-morning">{{ d.morningCount || '—' }}</td>
                  }
                  <td style="text-align: center; font-weight: 600">{{ d.count }}</td>
                  <td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
                </tr>
              }
            </tbody>
            <tfoot>
              <tr class="detail-denom-total">
                <td><strong>Subtotal</strong></td>
                @if (detail.row.type === 'settlement' && detail.morningTotal > 0) {
                  <td></td>
                }
                <td style="text-align: center">
                  <strong>{{ totalCount(coins(detail.denominations)) }}</strong>
                </td>
                <td class="num">
                  <strong>₹{{ subtotal(coins(detail.denominations)) | number: '1.2-2' }}</strong>
                </td>
              </tr>
            </tfoot>
          </table>
        }

        <!-- Grand total -->
        <div class="detail-denom-grand-total">
          <span>Grand Total</span>
          <span>{{ totalCount(detail.denominations) }} notes/coins</span>
          <span>₹{{ detail.row.amount | number: '1.2-2' }}</span>
        </div>
      }
    </div>
  </div>
}