432 lines
13 KiB
TypeScript
432 lines
13 KiB
TypeScript
/**
|
|
* 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/.
|
|
*/
|
|
|
|
/** Angular Imports */
|
|
import { Component, OnInit, ElementRef, ViewChild, inject } from '@angular/core';
|
|
import { ActivatedRoute } from '@angular/router';
|
|
import { UntypedFormBuilder, Validators } from '@angular/forms';
|
|
import { CurrencyPipe } from '@angular/common';
|
|
import { MatIcon } from '@angular/material/icon';
|
|
import { DateFormatPipe } from '../../../pipes/date-format.pipe';
|
|
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
|
import { isSettledShareTransaction } from 'app/shares/share-transactions.util';
|
|
|
|
/**
|
|
* Share Account Passbook — a printable, chronological (oldest-first) ledger of every
|
|
* Purchase/Redeem entry, mirroring PassbookTabComponent (Savings) but for share holdings:
|
|
* shares purchased/redeemed instead of amount deposited/withdrawn, plus the Board Resolution
|
|
* Number / Date of Meeting on redeem rows.
|
|
*/
|
|
@Component({
|
|
selector: 'mifosx-shares-passbook-tab',
|
|
templateUrl: './passbook-tab.component.html',
|
|
styleUrls: ['./passbook-tab.component.scss'],
|
|
standalone: true,
|
|
imports: [
|
|
...STANDALONE_SHARED_IMPORTS,
|
|
MatIcon,
|
|
DateFormatPipe,
|
|
CurrencyPipe
|
|
]
|
|
})
|
|
export class SharesPassbookTabComponent implements OnInit {
|
|
private route = inject(ActivatedRoute);
|
|
private formBuilder = inject(UntypedFormBuilder);
|
|
|
|
@ViewChild('passbookContent') passbookContent: ElementRef;
|
|
|
|
/** Account data */
|
|
accountNo = '';
|
|
clientName = '';
|
|
productName = '';
|
|
currency: any = null;
|
|
status = '';
|
|
activatedOnDate: any = null;
|
|
resolutionNumber = '';
|
|
resolutionDate: any = null;
|
|
savingsAccountNumber = '';
|
|
totalApprovedShares = 0;
|
|
currentMarketPrice = 0;
|
|
|
|
/** Transactions */
|
|
allTransactions: any[] = [];
|
|
filteredTransactions: any[] = [];
|
|
|
|
/** Date range form */
|
|
minDate = new Date(2000, 0, 1);
|
|
maxDate = new Date();
|
|
dateRangeForm: any;
|
|
isFiltered = false;
|
|
|
|
get currentValue(): number {
|
|
return this.totalApprovedShares * this.currentMarketPrice;
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.route.parent.data.subscribe((data: { sharesAccountData: any }) => {
|
|
const account = data.sharesAccountData;
|
|
this.accountNo = account.accountNo || '';
|
|
this.clientName = account.clientName || '';
|
|
this.productName = account.productName || '';
|
|
this.currency = account.currency || null;
|
|
this.status = account.status?.value || '';
|
|
this.activatedOnDate = account.timeline?.activatedDate || null;
|
|
this.resolutionNumber = account.resolutionNumber || '';
|
|
this.resolutionDate = account.resolutionDate || null;
|
|
this.savingsAccountNumber = account.savingsAccountNumber || '';
|
|
this.totalApprovedShares = account.summary?.totalApprovedShares || 0;
|
|
this.currentMarketPrice = account.currentMarketPrice || 0;
|
|
|
|
const transactions = (account.purchasedShares || []).filter(isSettledShareTransaction);
|
|
this.allTransactions = this.recalculateRunningBalances(this.sortAscending(transactions));
|
|
this.filteredTransactions = [...this.allTransactions];
|
|
});
|
|
|
|
this.dateRangeForm = this.formBuilder.group({
|
|
fromDate: [
|
|
'',
|
|
Validators.required
|
|
],
|
|
toDate: [
|
|
'',
|
|
Validators.required
|
|
]
|
|
});
|
|
}
|
|
|
|
isRedeem(transaction: any): boolean {
|
|
return transaction.type?.value === 'Redeem';
|
|
}
|
|
|
|
filterTransactions(): void {
|
|
const fromDate = this.dateRangeForm.value.fromDate;
|
|
const toDate = this.dateRangeForm.value.toDate;
|
|
|
|
if (!fromDate || !toDate) return;
|
|
|
|
const from = new Date(fromDate).getTime();
|
|
const to = new Date(toDate).getTime();
|
|
|
|
this.filteredTransactions = this.allTransactions.filter((txn: any) => {
|
|
const txnDate = this.getTransactionDateAsTime(txn.purchasedDate);
|
|
return txnDate >= from && txnDate <= to;
|
|
});
|
|
this.isFiltered = true;
|
|
}
|
|
|
|
clearFilter(): void {
|
|
this.dateRangeForm.reset();
|
|
this.filteredTransactions = [...this.allTransactions];
|
|
this.isFiltered = false;
|
|
}
|
|
|
|
private getTransactionDateAsTime(date: any): number {
|
|
if (Array.isArray(date) && date.length >= 3) {
|
|
return new Date(date[0], date[1] - 1, date[2]).getTime();
|
|
}
|
|
return new Date(date).getTime();
|
|
}
|
|
|
|
printPassbook(): void {
|
|
const source = this.passbookContent?.nativeElement as HTMLElement;
|
|
if (!source) return;
|
|
|
|
/** Work on a copy so the on-screen passbook is untouched */
|
|
const clone = source.cloneNode(true) as HTMLElement;
|
|
clone.querySelectorAll('.no-print').forEach((el: Element) => el.remove());
|
|
|
|
/** Material icon fonts are not available in the popup, so swap them for inline SVG */
|
|
clone.querySelectorAll('mat-icon, .mat-icon').forEach((el: Element) => {
|
|
const insideLogo = !!el.closest('.bank-logo-circle');
|
|
if (insideLogo) {
|
|
el.outerHTML = SharesPassbookTabComponent.BANK_LOGO_SVG;
|
|
} else {
|
|
el.remove();
|
|
}
|
|
});
|
|
|
|
const printWindow = window.open('', 'SharePassbook', 'height=800,width=1200');
|
|
if (!printWindow) return;
|
|
|
|
printWindow.document.write(`
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Share Account Passbook - ${this.accountNo}</title>
|
|
<style>${SharesPassbookTabComponent.PRINT_STYLES}</style>
|
|
</head>
|
|
<body>
|
|
<div class="statement-print-page">${clone.outerHTML}</div>
|
|
<script>
|
|
window.onafterprint = function () { window.close(); };
|
|
window.addEventListener('load', function () { window.focus(); window.print(); });
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`);
|
|
printWindow.document.close();
|
|
printWindow.focus();
|
|
}
|
|
|
|
/** Material "account_balance" glyph, inlined so the print window needs no icon font */
|
|
private static readonly BANK_LOGO_SVG = `
|
|
<svg class="bank-logo-svg" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true">
|
|
<path d="M4 10h3v7H4zM10.5 10h3v7h-3zM2 19h20v3H2zM17 10h3v7h-3zM12 1L2 6v2h20V6z" />
|
|
</svg>`;
|
|
|
|
/**
|
|
* Mirrors passbook-tab.component.scss so the printed passbook looks like the
|
|
* on-screen one. Kept in sync manually - component styles are scoped and are
|
|
* not reachable from the popup window. Landscape, because the share ledger
|
|
* carries nine columns including the Resolution No. / Meeting column.
|
|
*/
|
|
private static readonly PRINT_STYLES = `
|
|
@page { size: A4 landscape; margin: 8mm; }
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
color: #333;
|
|
background: #fff;
|
|
}
|
|
|
|
.statement-print-page { padding: 0; }
|
|
|
|
.statement-wrapper {
|
|
background: #fff;
|
|
border: 1px solid #d0d7e3;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Bank header */
|
|
.bank-header {
|
|
background: #1a3a6b;
|
|
padding: 14px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 4px solid #c8a951;
|
|
}
|
|
|
|
.bank-logo-area { display: flex; align-items: center; gap: 12px; }
|
|
|
|
.bank-logo-circle {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: #c8a951;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bank-logo-svg { fill: #1a3a6b; display: block; }
|
|
|
|
.bank-name-block .bank-title {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.bank-name-block .bank-subtitle {
|
|
color: #c8a951;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
letter-spacing: 1.5px;
|
|
text-transform: uppercase;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.statement-label { text-align: right; }
|
|
|
|
.statement-label .stmt-label-text {
|
|
color: #c8a951;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.statement-label .stmt-period {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-size: 10px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
/* Account details band */
|
|
.account-details-band {
|
|
background: #f0f3f9;
|
|
border-bottom: 1px solid #d0d7e3;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.account-details-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px 24px;
|
|
}
|
|
|
|
.detail-block .detail-label {
|
|
font-size: 8.5px;
|
|
font-weight: 700;
|
|
color: #7a8aaa;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.detail-block .detail-value { font-size: 12px; color: #222; }
|
|
.detail-block .detail-value.bold { font-weight: 600; }
|
|
.detail-block .detail-value.mono { font-family: 'Courier New', monospace; letter-spacing: 1px; }
|
|
|
|
.detail-block .detail-value.status-badge {
|
|
display: inline-block;
|
|
padding: 1px 8px;
|
|
border-radius: 10px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
background: #eee;
|
|
color: #555;
|
|
}
|
|
|
|
.detail-block .detail-value.status-badge.active { background: #d4edda; color: #155724; }
|
|
|
|
/* Share summary strip */
|
|
.balance-summary-strip {
|
|
display: flex;
|
|
align-items: stretch;
|
|
background: #1a3a6b;
|
|
}
|
|
|
|
.balance-box { flex: 1; padding: 10px 18px; text-align: center; }
|
|
|
|
.balance-box .balance-box-label {
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.balance-box .balance-box-value { font-size: 15px; font-weight: 700; color: #c8a951; }
|
|
|
|
.balance-divider { width: 1px; background: rgba(255, 255, 255, 0.15); margin: 6px 0; }
|
|
|
|
/* Ledger table - no horizontal scroll on paper, the landscape page holds every column */
|
|
.statement-table-scroll { width: 100%; overflow: visible; }
|
|
|
|
.statement-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
|
|
|
|
.statement-table thead { display: table-header-group; }
|
|
.statement-table tfoot { display: table-row-group; }
|
|
.statement-table tr { page-break-inside: avoid; break-inside: avoid; }
|
|
|
|
.statement-table thead tr {
|
|
background: #e8edf5;
|
|
border-top: 1px solid #d0d7e3;
|
|
border-bottom: 2px solid #1a3a6b;
|
|
}
|
|
|
|
.statement-table thead th {
|
|
padding: 8px 9px;
|
|
font-size: 9.5px;
|
|
font-weight: 700;
|
|
color: #1a3a6b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.statement-table tbody tr { border-bottom: 1px solid #e8ecf3; }
|
|
.statement-table tbody tr:nth-child(even) { background: #f4f7fb; }
|
|
.statement-table tbody td { padding: 6px 9px; vertical-align: middle; color: #333; }
|
|
|
|
.statement-table tfoot .total-row { background: #e8edf5; border-top: 2px solid #1a3a6b; }
|
|
.statement-table tfoot .total-row td { padding: 8px 9px; }
|
|
|
|
/* Column widths */
|
|
.col-sr { width: 32px; }
|
|
.col-date { width: 96px; white-space: nowrap; }
|
|
.col-desc { width: auto; min-width: 140px; }
|
|
.col-ref { width: 70px; white-space: nowrap; }
|
|
.col-amount { width: 108px; white-space: nowrap; }
|
|
.col-balance { width: 96px; white-space: nowrap; }
|
|
.col-resolution { width: 170px; white-space: nowrap; padding-left: 14px; }
|
|
|
|
/* Share movement colors */
|
|
.debit-amount { color: #c0392b; font-weight: 500; }
|
|
.credit-amount { color: #1a7a3f; font-weight: 500; }
|
|
.balance-amount { color: #1a3a6b; font-weight: 600; font-family: 'Courier New', monospace; }
|
|
|
|
.total-label {
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
color: #1a3a6b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.closing-balance {
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
color: #1a3a6b;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
/* Misc */
|
|
.txn-desc { font-weight: 500; }
|
|
.text-right { text-align: right; }
|
|
.text-center { text-align: center; }
|
|
.text-left { text-align: left; }
|
|
.text-muted { color: #999; }
|
|
.mono { font-family: 'Courier New', monospace; font-size: 10px; }
|
|
|
|
/* No data */
|
|
.no-data-block { padding: 40px; text-align: center; color: #aaa; font-size: 13px; }
|
|
|
|
/* Footer */
|
|
.statement-footer {
|
|
background: #f0f3f9;
|
|
border-top: 1px solid #d0d7e3;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.statement-footer .footer-note {
|
|
font-size: 9px;
|
|
color: #888;
|
|
margin-bottom: 3px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.statement-footer .footer-meta { font-size: 9px; color: #aaa; letter-spacing: 0.3px; }
|
|
`;
|
|
|
|
private recalculateRunningBalances(transactions: any[]): any[] {
|
|
let balance = 0;
|
|
return transactions.map((txn) => {
|
|
const shares = Number(txn.numberOfShares) || 0;
|
|
balance += this.isRedeem(txn) ? -shares : shares;
|
|
return { ...txn, runningBalance: balance };
|
|
});
|
|
}
|
|
|
|
private sortAscending(transactions: any[]): any[] {
|
|
return [...transactions].sort((a, b) => {
|
|
const dateA = this.getTransactionDateAsTime(a.purchasedDate);
|
|
const dateB = this.getTransactionDateAsTime(b.purchasedDate);
|
|
if (dateA !== dateB) return dateA - dateB;
|
|
return (a.id as number) - (b.id as number);
|
|
});
|
|
}
|
|
}
|