cbsnexora/src/app/cashier/account-register/account-register.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 ar-print">
  <header class="pg-head">
    <div>
      <div class="pg-eyebrow">REPORTS · ACCOUNT REGISTER</div>
      <h1 class="pg-title">Account Register</h1>
      <p class="pg-sub">
        Every account as it stood on the chosen date — which ones opened and closed that day, the balance each held
        then, and what it holds now.
      </p>
    </div>
    <div class="pg-toolbar ar-noprint">
      <button type="button" class="pg-btn" (click)="shiftDate(-1)" title="Previous day">
        <mat-icon>chevron_left</mat-icon>
      </button>
      <label class="pg-field">
        <span>As on date</span>
        <input type="date" [value]="date" (change)="date = $any($event.target).value; load()" />
      </label>
      <button type="button" class="pg-btn" (click)="shiftDate(1)" title="Next day">
        <mat-icon>chevron_right</mat-icon>
      </button>
      <button type="button" class="pg-btn" (click)="goToday()">Today</button>
      <button type="button" class="pg-btn pg-btn--primary" (click)="load()" [disabled]="loading">
        <mat-icon>refresh</mat-icon> Reload
      </button>
    </div>
  </header>

  <!-- Shown only on paper, where the toolbar is hidden and the date has to be stated. -->
  <p class="ar-printhead">Account Register as on {{ date }} · {{ section }}</p>

  <div class="db-filters ar-noprint">
    <label class="pg-field">
      <span>Section</span>
      <select [(ngModel)]="section" (change)="load()">
        @for (s of sections; track s.value) {
          <option [value]="s.value">{{ s.label }}</option>
        }
      </select>
    </label>
    <label class="pg-field ar-check">
      <span>Movement</span>
      <span class="ar-check__box">
        <input type="checkbox" [(ngModel)]="movementOnly" />
        Only accounts opened / closed on this date
      </span>
    </label>
    <label class="pg-field db-filters__search">
      <span>Search</span>
      <input type="text" [(ngModel)]="search" placeholder="Account no, client, product, status…" />
    </label>
    <button type="button" class="pg-btn" (click)="printRegister()" [disabled]="filteredRows.length === 0">
      <mat-icon>print</mat-icon> Print
    </button>
    <button type="button" class="pg-btn" (click)="exportCsv()" [disabled]="filteredRows.length === 0">
      <mat-icon>download</mat-icon> CSV
    </button>
  </div>

  @if (errorMsg) {
    <div class="pg-alert pg-alert--error">{{ errorMsg }}</div>
  }

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

  @if (!loading && loaded) {
    <!-- What actually happened that day, read before the list itself. -->
    <div class="ar-summary">
      <div class="ar-summary__item ar-summary__item--in">
        <span class="ar-summary__label">Accounts opened on {{ date }}</span>
        <span class="ar-summary__value">{{ openedCount }}</span>
      </div>
      <div class="ar-summary__item ar-summary__item--out">
        <span class="ar-summary__label">Accounts closed on {{ date }}</span>
        <span class="ar-summary__value">{{ closedCount }}</span>
      </div>
      <div class="ar-summary__item">
        <span class="ar-summary__label">Balance on {{ date }}</span>
        <span class="ar-summary__value">₹{{ shownBalanceOnDate | number: '1.2-2' }}</span>
      </div>
      <div class="ar-summary__item">
        <span class="ar-summary__label">Current balance</span>
        <span class="ar-summary__value">₹{{ shownCurrentBalance | number: '1.2-2' }}</span>
      </div>
    </div>
  }

  @if (!loading && loaded && filteredRows.length === 0) {
    <div class="pg-empty">
      <mat-icon>account_balance_wallet</mat-icon>
      <p>
        @if (movementOnly) {
          No account was opened or closed on {{ date }}.
        } @else {
          No accounts existed on {{ date }}.
        }
      </p>
    </div>
  }

  @if (filteredRows.length > 0) {
    <div class="pg-card">
      <table class="pg-table">
        <thead>
          <tr>
            <th>Account No</th>
            <th>Section</th>
            <th>Client</th>
            <th>Product</th>
            <th>Status</th>
            <th>Opened</th>
            <th>Closed</th>
            <th class="num">Balance on {{ date }}</th>
            <th class="num">Current Balance</th>
          </tr>
        </thead>
        <tbody>
          @for (r of filteredRows; track r.section + r.accountId) {
            <tr [class.ar-row--opened]="r.openedOnDate" [class.ar-row--closed]="r.closedOnDate">
              <td>
                <span class="pg-chip">{{ r.accountNo }}</span>
                @if (r.openedOnDate) {
                  <span class="ar-tag ar-tag--in">OPENED</span>
                }
                @if (r.closedOnDate) {
                  <span class="ar-tag ar-tag--out">CLOSED</span>
                }
              </td>
              <td>{{ r.section }}</td>
              <td>{{ r.clientName ?? '—' }}</td>
              <td>{{ r.productName ?? '—' }}</td>
              <td>
                <span [class]="statusClass(r.status)">{{ r.status }}</span>
              </td>
              <td>{{ r.openedOn ?? '—' }}</td>
              <td>{{ r.closedOn ?? '—' }}</td>
              <td class="num">₹{{ r.balanceOnDate | number: '1.2-2' }}</td>
              <td class="num">
                ₹{{ r.currentBalance | number: '1.2-2' }}
                @if (r.section === 'SHARE' && r.sharesHeld) {
                  <span class="db-muted">· {{ r.sharesHeld }} sh</span>
                }
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="7">
              {{ filteredRows.length }} account(s) · {{ openedCount }} opened · {{ closedCount }} closed
            </td>
            <td class="num">₹{{ shownBalanceOnDate | number: '1.2-2' }}</td>
            <td class="num">₹{{ shownCurrentBalance | number: '1.2-2' }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
  }
</div>