cbsnexora/src/app/shares/reports/share-account-statement/share-account-statement.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="cert-root">
  <div class="cert-head">
    <div class="cert-head-l">
      <fa-icon icon="file-invoice" class="cert-head-ic"></fa-icon>
      <div>
        <h2 class="cert-head-t">Share Account Statement</h2>
        <div class="cert-head-s">
          One member's share account, movement by movement, with the holding each movement left behind.
        </div>
      </div>
    </div>
    <div class="cert-head-r">
      <button class="cert-cta-btn" (click)="exportCsv()" [disabled]="loading || !lines.length">
        <fa-icon icon="file-alt"></fa-icon> Export CSV
      </button>
      <button class="cert-cta-btn" (click)="print()" [disabled]="loading || !lines.length">
        <fa-icon icon="print"></fa-icon> Print
      </button>
    </div>
  </div>

  <!-- Account picker -->
  <div class="cert-filters">
    <div class="cert-filter" style="flex: 2 1 320px; position: relative">
      <label>Share account</label>
      <div class="cert-input-ic">
        <fa-icon icon="search"></fa-icon>
        <input
          type="text"
          [ngModel]="accountSearch"
          (ngModelChange)="onAccountSearch($event)"
          placeholder="Search member name or share account number"
        />
      </div>
      @if (accountOptions.length && !selectedAccountId) {
        <div class="srep-picker">
          @for (opt of accountOptions; track opt.id) {
            <button type="button" class="srep-picker-item" (click)="selectAccount(opt)">
              <span class="srep-picker-name">{{ opt.clientName }}</span>
              <span class="srep-picker-meta srep-mono">{{ opt.accountNo }}</span>
              <span class="srep-picker-meta">{{ opt.productName }}</span>
            </button>
          }
        </div>
      }
    </div>

    <div class="cert-filter">
      <label>From</label>
      <input type="date" [(ngModel)]="fromDate" (change)="load()" [disabled]="!selectedAccountId" />
    </div>
    <div class="cert-filter">
      <label>To</label>
      <input type="date" [(ngModel)]="toDate" (change)="load()" [disabled]="!selectedAccountId" />
    </div>
    <div class="cert-filter">
      <label>&nbsp;</label>
      <button class="cert-cta-btn" (click)="clearPeriod()" [disabled]="!selectedAccountId">Full history</button>
    </div>
  </div>

  @if (!selectedAccountId) {
    <div class="srep-state">Search for a member or share account number above to open its statement.</div>
  } @else if (loading) {
    <div class="srep-state">Loading statement…</div>
  } @else if (loadError) {
    <div class="srep-state srep-state--error"><fa-icon icon="exclamation-circle"></fa-icon> {{ loadError }}</div>
  } @else if (account) {
    <!-- Statement header -->
    <div class="srep-stmt-head">
      <div class="srep-stmt-grid">
        <div>
          <div class="srep-stmt-l">Member</div>
          <div class="srep-stmt-v">{{ account.clientName }}</div>
        </div>
        <div>
          <div class="srep-stmt-l">Membership No</div>
          <div class="srep-stmt-v srep-mono">{{ account.cifNumber || '—' }}</div>
        </div>
        <div>
          <div class="srep-stmt-l">Share A/c No</div>
          <div class="srep-stmt-v srep-mono">{{ account.accountNo }}</div>
        </div>
        <div>
          <div class="srep-stmt-l">Product</div>
          <div class="srep-stmt-v">{{ account.productName }}</div>
        </div>
        <div>
          <div class="srep-stmt-l">Branch</div>
          <div class="srep-stmt-v">{{ account.officeName || '—' }}</div>
        </div>
        <div>
          <div class="srep-stmt-l">Status</div>
          <div class="srep-stmt-v">
            <span class="srep-pill" [ngClass]="statusClass(account.statusEnum)">{{
              statusLabel(account.statusEnum)
            }}</span>
          </div>
        </div>
        <div>
          <div class="srep-stmt-l">Linked Savings</div>
          <div class="srep-stmt-v srep-mono">{{ account.linkedSavingsAccountNo || 'Not linked' }}</div>
        </div>
        <div>
          <div class="srep-stmt-l">Activated</div>
          <div class="srep-stmt-v">{{ account.activatedDate || '—' }}</div>
        </div>
      </div>
      <button class="cert-cta-btn srep-no-print" (click)="openAccount()">
        <fa-icon icon="external-link-alt"></fa-icon> Open account
      </button>
    </div>

    @if (totals) {
      <div class="cert-kpis">
        <div class="cert-kpi cert-kpi--green">
          <fa-icon icon="coins" class="cert-kpi-ic"></fa-icon>
          <div>
            <div class="cert-kpi-n">{{ totals.closingShares | number }}</div>
            <div class="cert-kpi-l">Closing Shares</div>
          </div>
        </div>
        <div class="cert-kpi cert-kpi--teal">
          <fa-icon icon="balance-scale" class="cert-kpi-ic"></fa-icon>
          <div>
            <div class="cert-kpi-n">₹{{ totals.closingValue | number: '1.2-2' }}</div>
            <div class="cert-kpi-l">Closing Value</div>
          </div>
        </div>
        <div class="cert-kpi cert-kpi--blue">
          <fa-icon icon="arrow-up" class="cert-kpi-ic"></fa-icon>
          <div>
            <div class="cert-kpi-n">{{ totals.sharesIn | number }}</div>
            <div class="cert-kpi-l">Shares Purchased</div>
          </div>
        </div>
        <div class="cert-kpi cert-kpi--amber">
          <fa-icon icon="arrow-down" class="cert-kpi-ic"></fa-icon>
          <div>
            <div class="cert-kpi-n">{{ totals.sharesOut | number }}</div>
            <div class="cert-kpi-l">Shares Redeemed</div>
          </div>
        </div>
      </div>
    }

    @if (!lines.length) {
      <div class="srep-state">
        No settled movement on this account{{ fromDate || toDate ? ' in the selected period' : '' }}.
      </div>
    } @else {
      <div class="srep-table-wrap">
        <table class="srep-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Particulars</th>
              <th>Board Resolution</th>
              <th>Funded By</th>
              <th class="srep-num">Shares In</th>
              <th class="srep-num">Shares Out</th>
              <th class="srep-num">Unit Price</th>
              <th class="srep-num">Amount</th>
              <th class="srep-num">Balance Shares</th>
              <th class="srep-num">Balance Value</th>
            </tr>
          </thead>
          <tbody>
            @for (line of lines; track line.transactionId) {
              <tr>
                <td>{{ line.transactionDate }}</td>
                <td>
                  <span class="srep-pill" [ngClass]="typeClass(line.typeEnum)">{{ typeLabel(line.typeEnum) }}</span>
                </td>
                <td class="srep-mono">{{ line.resolutionNumber || '—' }}</td>
                <td>{{ funding(line.fundingSource) }}</td>
                <td class="srep-num">{{ line.sharesIn ? (line.sharesIn | number) : '' }}</td>
                <td class="srep-num">{{ line.sharesOut ? (line.sharesOut | number) : '' }}</td>
                <td class="srep-num">{{ line.unitPrice | number: '1.2-2' }}</td>
                <td class="srep-num">{{ line.amount | number: '1.2-2' }}</td>
                <td class="srep-num">{{ line.balanceShares | number }}</td>
                <td class="srep-num">₹{{ line.balanceValue | number: '1.2-2' }}</td>
              </tr>
            }
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4">Closing balance</td>
              <td class="srep-num">{{ totals?.sharesIn | number }}</td>
              <td class="srep-num">{{ totals?.sharesOut | number }}</td>
              <td class="srep-num"></td>
              <td class="srep-num"></td>
              <td class="srep-num">{{ totals?.closingShares | number }}</td>
              <td class="srep-num">₹{{ totals?.closingValue | number: '1.2-2' }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    }
  }
</div>