cbsnexora/src/app/current-accounts/current-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" (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 Passbook' | translate }}
      </button>
    </form>
  </div>

  <!-- Bank Statement -->
  <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">{{ bankName }}</div>
          <div class="bank-subtitle">{{ bankSubtitle }}</div>
        </div>
      </div>
      <div class="statement-label">
        <div class="stmt-label-text">STATEMENT OF ACCOUNT</div>
        <div class="stmt-period">As on: {{ maxDate | dateFormat }}</div>
      </div>
    </div>

    <!-- Branch line — IFSC/MICR are how a UCB customer identifies which branch issued this, and are
         needed for NEFT/RTGS/cheque printing, so a real passbook always carries them. -->
    @if (branchName || ifscCode || micrCode) {
      <div class="branch-line">
        @if (branchName) {
          <span>{{ branchName }} Branch</span>
        }
        @if (branchAddress) {
          <span>{{ branchAddress }}</span>
        }
        @if (ifscCode) {
          <span>IFSC: {{ ifscCode }}</span>
        }
        @if (micrCode) {
          <span>MICR: {{ micrCode }}</span>
        }
      </div>
    }

    <!-- Account Details -->
    <div class="account-details-band">
      <div class="account-details-grid">
        <div class="detail-block">
          <div class="detail-label">Account Holder</div>
          <div class="detail-value bold">{{ clientName | uppercase }}</div>
        </div>
        <div class="detail-block">
          <div class="detail-label">Account Number</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">Interest Rate (p.a.)</div>
          <div class="detail-value">{{ interestRate }}%</div>
        </div>
      </div>
    </div>

    <!-- Balance Summary Strip -->
    <div class="balance-summary-strip">
      <div class="balance-box">
        <div class="balance-box-label">Current Balance</div>
        <div class="balance-box-value">{{ accountBalance | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}</div>
      </div>
      <div class="balance-divider"></div>
      <div class="balance-box">
        <div class="balance-box-label">Available Balance</div>
        <div class="balance-box-value">
          {{ availableBalance | 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">Debit (Dr)</th>
            <th class="col-amount text-right">Credit (Cr)</th>
            <th class="col-balance text-right">Balance (&#8377;)</th>
          </tr>
        </thead>
        <tbody>
          @for (txn of filteredTransactions; track txn.id; let i = $index) {
            <tr
              [class.reversed-row]="txn.reversed"
              [class.debit-row]="isDebit(txn.transactionType) && !txn.reversed"
              [class.credit-row]="!isDebit(txn.transactionType) && !txn.reversed"
            >
              <td class="col-sr text-center">{{ i + 1 }}</td>
              <td class="col-date">{{ txn.date | dateFormat }}</td>
              <td class="col-desc">
                <span class="txn-desc">{{ txn.transactionType.value }}</span>
                @if (txn.reversed) {
                  <span class="reversed-badge">REVERSED</span>
                }
              </td>
              <td class="col-ref text-muted mono">{{ txn.id }}</td>
              <td class="col-amount text-right debit-amount">
                @if (isDebit(txn.transactionType)) {
                  {{ txn.amount | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
                }
              </td>
              <td class="col-amount text-right credit-amount">
                @if (!isDebit(txn.transactionType)) {
                  {{ txn.amount | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
                }
              </td>
              <td class="col-balance text-right balance-amount">
                {{ txn.runningBalance | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr class="total-row">
            <td colspan="4" class="text-right total-label">Closing Balance</td>
            <td class="text-right total-label"></td>
            <td class="text-right total-label"></td>
            <td class="text-right closing-balance">
              {{ accountBalance | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
            </td>
          </tr>
        </tfoot>
      </table>
    } @else {
      <div class="no-data-block">
        <mat-icon>inbox</mat-icon>
        <p>
          {{
            isFiltered
              ? ('labels.text.No transactions found for the selected date range.' | translate)
              : 'No transactions found.'
          }}
        </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>