cbsnexora/src/app/shares/shares-account-view/passbook-tab/passbook-tab.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="passbook-container">
  <!-- Filter Bar -->
  <div class="passbook-filter-bar no-print">
    <form [formGroup]="dateRangeForm" class="passbook-filter-form">
      <mat-form-field appearance="outline" class="passbook-date-field" (click)="fromDatePicker.open()">
        <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" formControlName="fromDate" />
        <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #fromDatePicker></mat-datepicker>
      </mat-form-field>

      <mat-form-field appearance="outline" class="passbook-date-field" (click)="toDatePicker.open()">
        <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" formControlName="toDate" />
        <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #toDatePicker></mat-datepicker>
      </mat-form-field>

      <button
        mat-raised-button
        color="primary"
        type="button"
        [disabled]="!dateRangeForm.valid"
        (click)="filterTransactions()"
      >
        <mat-icon>filter_list</mat-icon>
        {{ 'labels.buttons.Filter' | translate }}
      </button>

      @if (isFiltered) {
        <button mat-stroked-button type="button" (click)="clearFilter()">
          <mat-icon>clear</mat-icon>
          {{ 'labels.buttons.Clear' | translate }}
        </button>
      }

      <span class="passbook-filter-spacer"></span>

      <button mat-raised-button color="accent" type="button" (click)="printPassbook()">
        <mat-icon>print</mat-icon>
        {{ 'labels.buttons.Print' | translate }}
      </button>
    </form>
  </div>

  <!-- Share Passbook -->
  <div class="statement-wrapper" #passbookContent>
    <!-- Bank Header -->
    <div class="bank-header">
      <div class="bank-logo-area">
        <div class="bank-logo-circle">
          <mat-icon>account_balance</mat-icon>
        </div>
        <div class="bank-name-block">
          <div class="bank-title">LincPay Co-operative Bank Ltd.</div>
          <div class="bank-subtitle">Share Account Passbook</div>
        </div>
      </div>
      <div class="statement-label">
        <div class="stmt-label-text">SHARE HOLDING STATEMENT</div>
        <div class="stmt-period">As on: {{ maxDate | dateFormat }}</div>
      </div>
    </div>

    <!-- Account Details -->
    <div class="account-details-band">
      <div class="account-details-grid">
        <div class="detail-block">
          <div class="detail-label">Member Name</div>
          <div class="detail-value bold">{{ clientName | uppercase }}</div>
        </div>
        <div class="detail-block">
          <div class="detail-label">Share Account No.</div>
          <div class="detail-value mono bold">{{ accountNo }}</div>
        </div>
        <div class="detail-block">
          <div class="detail-label">Product</div>
          <div class="detail-value">{{ productName }}</div>
        </div>
        <div class="detail-block">
          <div class="detail-label">Account Opening Date</div>
          <div class="detail-value">{{ activatedOnDate | dateFormat }}</div>
        </div>
        <div class="detail-block">
          <div class="detail-label">Status</div>
          <div class="detail-value status-badge" [class.active]="status === 'Active'">{{ status }}</div>
        </div>
        <div class="detail-block">
          <div class="detail-label">Linked Savings A/C No.</div>
          <div class="detail-value mono">{{ savingsAccountNumber || '—' }}</div>
        </div>
        @if (resolutionNumber) {
          <div class="detail-block">
            <div class="detail-label">Resolution No.</div>
            <div class="detail-value">{{ resolutionNumber }}</div>
          </div>
        }
      </div>
    </div>

    <!-- Balance Summary Strip -->
    <div class="balance-summary-strip">
      <div class="balance-box">
        <div class="balance-box-label">Approved Shares</div>
        <div class="balance-box-value">{{ totalApprovedShares }}</div>
      </div>
      <div class="balance-divider"></div>
      <div class="balance-box">
        <div class="balance-box-label">Share Value</div>
        <div class="balance-box-value">
          {{ currentMarketPrice | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
        </div>
      </div>
      <div class="balance-divider"></div>
      <div class="balance-box">
        <div class="balance-box-label">Current Value</div>
        <div class="balance-box-value">{{ currentValue | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}</div>
      </div>
      <div class="balance-divider"></div>
      <div class="balance-box">
        <div class="balance-box-label">Total Transactions</div>
        <div class="balance-box-value">{{ filteredTransactions.length }}</div>
      </div>
    </div>

    <!-- Transactions Table -->
    @if (filteredTransactions.length > 0) {
      <table class="statement-table">
        <thead>
          <tr>
            <th class="col-sr">#</th>
            <th class="col-date">Date</th>
            <th class="col-desc">Description</th>
            <th class="col-ref">Ref No.</th>
            <th class="col-amount text-right">Shares Purchased</th>
            <th class="col-amount text-right">Shares Redeemed</th>
            <th class="col-balance text-right">Share Balance</th>
            <th class="col-amount text-right">Amount (&#8377;)</th>
            <th class="col-desc">Resolution No. / Meeting</th>
          </tr>
        </thead>
        <tbody>
          @for (txn of filteredTransactions; track txn.id; let i = $index) {
            <tr [class.debit-row]="isRedeem(txn)" [class.credit-row]="!isRedeem(txn)">
              <td class="col-sr text-center">{{ i + 1 }}</td>
              <td class="col-date">{{ txn.purchasedDate | dateFormat }}</td>
              <td class="col-desc">
                <span class="txn-desc">{{ txn.type.value }} ({{ txn.status.value }})</span>
              </td>
              <td class="col-ref text-muted mono">{{ txn.id }}</td>
              <td class="col-amount text-right credit-amount">
                @if (!isRedeem(txn)) {
                  {{ txn.numberOfShares }}
                }
              </td>
              <td class="col-amount text-right debit-amount">
                @if (isRedeem(txn)) {
                  {{ txn.numberOfShares }}
                }
              </td>
              <td class="col-balance text-right balance-amount">{{ txn.runningBalance }}</td>
              <td class="col-amount text-right">
                {{ txn.amount | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
              </td>
              <td class="col-desc">
                @if (isRedeem(txn)) {
                  {{ txn.resolutionNumber || '—' }}
                  @if (txn.meetingDate) {
                    ({{ txn.meetingDate | dateFormat }})
                  }
                } @else {
                  —
                }
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr class="total-row">
            <td colspan="6" class="text-right total-label">Closing Share Balance</td>
            <td class="text-right closing-balance">{{ totalApprovedShares }}</td>
            <td colspan="2"></td>
          </tr>
        </tfoot>
      </table>
    } @else {
      <div class="no-data-block">
        <mat-icon>inbox</mat-icon>
        <p>No transactions found for the selected date range.</p>
      </div>
    }

    <!-- Statement Footer -->
    <div class="statement-footer">
      <div class="footer-note">
        This is a computer-generated statement and does not require a signature. For queries, contact your branch or
        call customer care.
      </div>
      <div class="footer-meta">Generated on: {{ maxDate | dateFormat }} &nbsp;|&nbsp; Account No: {{ accountNo }}</div>
    </div>
  </div>
</div>