226 lines
9.2 KiB
HTML
226 lines
9.2 KiB
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>
|
|
}
|
|
@if (resolutionDate) {
|
|
<div class="detail-block">
|
|
<div class="detail-label">Resolution Date</div>
|
|
<div class="detail-value">{{ resolutionDate | dateFormat }}</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) {
|
|
<div class="statement-table-scroll">
|
|
<table class="statement-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-sr text-center">#</th>
|
|
<th class="col-date text-left">Date</th>
|
|
<th class="col-desc text-left">Description</th>
|
|
<th class="col-ref text-center">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 (₹)</th>
|
|
<th class="col-resolution text-left">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 text-left">{{ txn.purchasedDate | dateFormat }}</td>
|
|
<td class="col-desc text-left">
|
|
<span class="txn-desc">{{ txn.type.value }} ({{ txn.status.value }})</span>
|
|
</td>
|
|
<td class="col-ref text-center 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-resolution text-left">
|
|
<!-- The transaction's own resolution wherever it has one: a redeem always carries
|
|
one, and so does an additional-share purchase, authorised by its own board
|
|
meeting rather than the one the account was opened under. Only the original
|
|
application falls back to the account's resolution, having none of its own. -->
|
|
@if (txn.resolutionNumber) {
|
|
{{ txn.resolutionNumber }}
|
|
@if (txn.meetingDate) {
|
|
({{ txn.meetingDate | dateFormat }})
|
|
}
|
|
} @else {
|
|
{{ resolutionNumber || '—' }}
|
|
@if (resolutionDate) {
|
|
({{ resolutionDate | dateFormat }})
|
|
}
|
|
}
|
|
</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>
|
|
</div>
|
|
} @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 }} | Account No: {{ accountNo }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|