diff --git a/src/app/cashier/cashier.service.ts b/src/app/cashier/cashier.service.ts index bab2c1ff7..3078701f8 100644 --- a/src/app/cashier/cashier.service.ts +++ b/src/app/cashier/cashier.service.ts @@ -391,20 +391,17 @@ export class CashierService { } /** - * Approved share-collection receipts that name no member yet. + * Everything an Apply screen needs, in one call: `own` is this member's own unapplied receipts, + * ready to tick; `rows` is every other Share Collection receipt still available — unclaimed GL + * deposits and receipts linked to another member — which attach by voucher instead. * - * A receipt taken straight into a GL account carries no member of its own, so it is never - * attributed automatically. This lists them so the counter can see the voucher they just raised - * and attach it deliberately, instead of being told there is nothing to apply. + * One request rather than two: both lists come from the same table under the same filters, and + * splitting them across endpoints only meant the same rows were fetched twice and, where they + * overlapped, drawn twice on the same screen. */ - getUnattributedShareCollections(): Observable { - return this.http.get('/shareadvancecollection/unattributed'); - } - - /** Receipts still sitting in Share Sundry, optionally for a single member. */ - getUnappliedShareAdvances(clientId?: number): Observable { - const suffix = clientId ? `?clientId=${clientId}` : ''; - return this.http.get(`/shareadvancecollection${suffix}`); + getShareCollectionReceipts(clientId?: number): Observable { + const params = clientId ? new HttpParams().set('clientId', String(clientId)) : undefined; + return this.http.get('/shareadvancecollection/unattributed', { params }); } /** Moves a receipt out of Sundry into share capital for an activated account. */ diff --git a/src/app/core/shell/shell.component.html b/src/app/core/shell/shell.component.html index aa9516dbe..3351e3022 100644 --- a/src/app/core/shell/shell.component.html +++ b/src/app/core/shell/shell.component.html @@ -1353,6 +1353,9 @@ +
diff --git a/src/app/shares/common-resolvers/share-account-actions.resolver.ts b/src/app/shares/common-resolvers/share-account-actions.resolver.ts index 21749db82..24679e699 100644 --- a/src/app/shares/common-resolvers/share-account-actions.resolver.ts +++ b/src/app/shares/common-resolvers/share-account-actions.resolver.ts @@ -32,7 +32,6 @@ export class ShareAccountActionsResolver { const actionName = route.paramMap.get('name'); const shareAccountId = route.paramMap.get('shareAccountId') || route.parent.parent.paramMap.get('shareAccountId'); switch (actionName) { - case 'Apply Additional Shares': case 'Redeem Shares': case 'Approve Additional Shares': case 'Reject Additional Shares': diff --git a/src/app/shares/reports/share-product-summary/share-product-summary.component.html b/src/app/shares/reports/share-product-summary/share-product-summary.component.html new file mode 100644 index 000000000..5ef7dcd6b --- /dev/null +++ b/src/app/shares/reports/share-product-summary/share-product-summary.component.html @@ -0,0 +1,168 @@ + + +
+
+
+ +
+

Share Product Summary

+
+ Every share class against its own authorised capital — shares issued, shares remaining, and the + distinctive-number range issued so far. "Issued" means paid up, not merely allotted. +
+
+
+
+ + +
+
+ + @if (rows.length) { +
+
+ +
+
{{ totals.authorisedShares | number }}
+
Authorised Shares (all classes)
+
+
+
+ +
+
{{ totals.issuedShares | number }}
+
Shares Issued (paid up)
+
+
+
+ +
+
₹{{ totals.issuedCapital | number: '1.2-2' }}
+
Share Capital Issued
+
+
+
+ +
+
{{ totals.unpaidShares | number }}
+
Allotted, Unpaid
+
+
+
+ } + + @if (loading) { +
Loading product summary…
+ } @else if (loadError) { +
{{ loadError }}
+ } @else if (!rows.length) { +
No share product is configured.
+ } @else { +
+ + + + + + + + + + + + + + + + + @for (row of rows; track row.productId) { + + + + + + + + + + + + + } + + + + + + + + + + + + +
Share ClassUnit PriceAuthorisedIssued (Paid Up)AvailableUtilisationAllotted, UnpaidDistinctive RangeAccountsMin / Nominal / Max
+ {{ row.productName }} + @if (row.productShortName) { +
{{ row.productShortName }}
+ } + 		{{ row.unitPrice | number: '1.2-2' }} + {{ row.authorisedShares | number }} +
+ ₹{{ row.authorisedCapital | number: '1.0-0' }} +
+ 		+ {{ row.issuedShares | number }} +
+ ₹{{ row.issuedCapital | number: '1.0-0' }} +
+ 		{{ row.availableShares | number }} +
+
+
+
+ {{ utilisationPercent(row) | number: '1.0-1' }}% +
+ 		+ @if (row.unpaidShares) { + {{ row.unpaidShares | number }} +
+ ₹{{ row.unpaidAmount | number: '1.0-0' }} · {{ row.unpaidAccounts }} + {{ row.unpaidAccounts === 1 ? 'account' : 'accounts' }} +
+ } @else { + 0 + } + 		{{ distinctiveRange(row) }} + {{ row.accountCount | number }} +
+ {{ row.memberCount | number }} {{ row.memberCount === 1 ? 'member' : 'members' }} +
+ 		+ {{ row.minimumClientShares ?? '—' }} / {{ row.nominalClientShares ?? '—' }} / + {{ row.maximumClientShares ?? '—' }} +
Total — {{ rows.length | number }} share classes{{ totals.authorisedShares | number }}{{ totals.issuedShares | number }}{{ totals.unpaidShares | number }}
+
+ + @if (totals.unpaidShares) { +
+ + + {{ totals.unpaidShares | number }} shares across every class are allotted but not yet paid for — + ₹{{ totals.unpaidAmount | number: '1.2-2' }} in all. They are excluded from "Issued" above; see Final + Balance for which members they belong to. + +
+ } + } +
diff --git a/src/app/shares/reports/share-product-summary/share-product-summary.component.ts b/src/app/shares/reports/share-product-summary/share-product-summary.component.ts new file mode 100644 index 000000000..c2ac6ba91 --- /dev/null +++ b/src/app/shares/reports/share-product-summary/share-product-summary.component.ts @@ -0,0 +1,168 @@ +/** + * 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/. + */ + +import { Component, OnInit, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; +import { of } from 'rxjs'; +import { catchError } from 'rxjs/operators'; + +import { SharesService } from '../../shares.service'; +import { shareReportCsv, shareReportPrint } from '../share-report.util'; + +interface ProductSummaryRow { + productId: number; + productName: string; + productShortName: string; + unitPrice: number; + minimumClientShares: number; + nominalClientShares: number; + maximumClientShares: number; + authorisedShares: number; + authorisedCapital: number; + issuedShares: number; + issuedCapital: number; + availableShares: number; + unpaidAccounts: number; + unpaidShares: number; + unpaidAmount: number; + distinctiveFrom: number | null; + distinctiveTo: number | null; + accountCount: number; + memberCount: number; +} + +/** + * Share Product Summary — every share class measured against its own authorised capital: how many + * shares are issued, how many remain, and the distinctive-number range issued so far. + * + *

+ * "Issued" is paid-up shares — settled purchases less redemptions, computed the same way every other + * report in this suite computes them — not {@code m_share_product.totalsubscribed_shares}. That + * platform column counts an allotment the moment it is submitted, before any money has necessarily + * arrived, so it runs ahead of what the society has actually received. A board reading this page is + * reading the same figure the GL Share Capital account would show, not a subscription count. + */ +@Component({ + selector: 'mifosx-share-product-summary', + templateUrl: './share-product-summary.component.html', + styleUrls: [ + '../../../letter-mgmt/certificates/certificates.shared.scss', + '../share-report.shared.scss' + ], + imports: [ + CommonModule, + FaIconComponent + ] +}) +export class ShareProductSummaryComponent implements OnInit { + private sharesService = inject(SharesService); + + loading = true; + loadError = ''; + rows: ProductSummaryRow[] = []; + + ngOnInit(): void { + this.load(); + } + + load(): void { + this.loading = true; + this.loadError = ''; + this.sharesService + .getShareProductSummary() + .pipe( + catchError((err: any) => { + this.loadError = this.readError(err, 'The product summary could not be loaded.'); + return of(null); + }) + ) + .subscribe((res: any) => { + this.rows = res?.rows || []; + this.loading = false; + }); + } + + /** How much of a product's authorised capital is actually issued, for the progress bar. */ + utilisationPercent(row: ProductSummaryRow): number { + if (!row.authorisedShares) { + return 0; + } + const pct = (row.issuedShares / row.authorisedShares) * 100; + return Math.max(0, Math.min(100, pct)); + } + + distinctiveRange(row: ProductSummaryRow): string { + if (!row.distinctiveFrom || !row.distinctiveTo) { + return 'None allotted yet'; + } + return `${row.distinctiveFrom} – ${row.distinctiveTo}`; + } + + get totals() { + return { + authorisedShares: this.rows.reduce((sum, r) => sum + Number(r.authorisedShares || 0), 0), + authorisedCapital: this.rows.reduce((sum, r) => sum + Number(r.authorisedCapital || 0), 0), + issuedShares: this.rows.reduce((sum, r) => sum + Number(r.issuedShares || 0), 0), + issuedCapital: this.rows.reduce((sum, r) => sum + Number(r.issuedCapital || 0), 0), + unpaidShares: this.rows.reduce((sum, r) => sum + Number(r.unpaidShares || 0), 0), + unpaidAmount: this.rows.reduce((sum, r) => sum + Number(r.unpaidAmount || 0), 0) + }; + } + + exportCsv(): void { + shareReportCsv( + 'share-product-summary', + [ + 'Product', + 'Unit Price', + 'Authorised Shares', + 'Authorised Capital', + 'Issued Shares', + 'Issued Capital', + 'Available Shares', + 'Unpaid Accounts', + 'Unpaid Shares', + 'Unpaid Amount', + 'Distinctive Range', + 'Accounts', + 'Members', + 'Min / Nominal / Max Per Member' + ], + this.rows.map((r) => [ + r.productName, + r.unitPrice, + r.authorisedShares, + r.authorisedCapital, + r.issuedShares, + r.issuedCapital, + r.availableShares, + r.unpaidAccounts, + r.unpaidShares, + r.unpaidAmount, + this.distinctiveRange(r), + r.accountCount, + r.memberCount, + `${r.minimumClientShares ?? '—'} / ${r.nominalClientShares ?? '—'} / ${r.maximumClientShares ?? '—'}` + ]) + ); + } + + print(): void { + shareReportPrint(); + } + + private readError(err: any, fallback: string): string { + return ( + err?.error?.errors?.[0]?.defaultUserMessage || + err?.error?.defaultUserMessage || + err?.error?.developerMessage || + fallback + ); + } +} diff --git a/src/app/shares/reports/share-report.shared.scss b/src/app/shares/reports/share-report.shared.scss index 26eabff50..b837ce60f 100644 --- a/src/app/shares/reports/share-report.shared.scss +++ b/src/app/shares/reports/share-report.shared.scss @@ -278,6 +278,23 @@ $srep-muted: #64748b; font-weight: 500; } +/* A share class's own authorised-vs-issued fraction, read at a glance rather than only in the two + numbers beside it. */ +.product-utilisation-bar { + width: 100%; + min-width: 90px; + height: 6px; + border-radius: 999px; + background: $srep-border-soft; + overflow: hidden; +} + +.product-utilisation-fill { + height: 100%; + border-radius: 999px; + background: linear-gradient(90deg, #2563eb, #059669); +} + /* Something the reader has to know before trusting the number above it — an exclusion, a gap, a figure that will not reconcile until someone acts. Loud enough to be read, not an error. */ .srep-warn { diff --git a/src/app/shares/share-dialog.shared.scss b/src/app/shares/share-dialog.shared.scss new file mode 100644 index 000000000..710f215b4 --- /dev/null +++ b/src/app/shares/share-dialog.shared.scss @@ -0,0 +1,996 @@ +/** + * 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/. + */ + +// Shared chrome for Apply Collection and Apply Additional Shares dialogs. +// Each component @uses this, so every rule is emitted once per component +// and stays scoped to it -- nothing here leaks into the global stylesheet. + +/* ── Design tokens ─────────────────────────────────────────────────────── */ + +$primary: #1e3a8a; +$primary-mid: #2448b0; +$accent: #2563eb; +$accent-soft: #eff6ff; +$accent-border: #bfdbfe; + +$text-main: #0f172a; +$text-sub: #334155; +$text-muted: #64748b; +$border-color: #e2e8f0; +$bg-page: #f8fafc; +$bg-white: #fff; + +$success: #059669; +$success-bg: #ecfdf5; +$success-border: #6ee7b7; + +$danger: #dc2626; +$danger-bg: #fef2f2; +$danger-border: #fca5a5; + +/* ── Utilities ─────────────────────────────────────────────────────────── */ + +.mono { + font-family: 'Roboto Mono', 'Courier New', monospace; + font-variant-numeric: tabular-nums; +} + +/* ── Dialog wrapper ────────────────────────────────────────────────────── */ + +.dialog-wrapper { + display: flex; + flex-direction: column; + max-height: 88vh; + background: $bg-white; + border-radius: 14px; + overflow: hidden; +} + +/* ── Header ────────────────────────────────────────────────────────────── */ + +.dialog-header { + display: flex; + flex: none; + align-items: center; + gap: 0.85rem; + padding: 1.1rem 1.5rem; + background: linear-gradient(135deg, $primary 0%, $primary-mid 60%, #3b5fc0 100%); + color: #fff; + + .header-icon { + display: flex; + align-items: center; + justify-content: center; + flex: none; + width: 38px; + height: 38px; + border-radius: 9px; + background: rgb(255 255 255 / 15%); + border: 1px solid rgb(255 255 255 / 20%); + + mat-icon { + font-size: 20px; + width: 20px; + height: 20px; + color: #fff; + } + } + + .header-text { + flex: 1; + min-width: 0; + + h2 { + margin: 0; + font-size: 1.08rem; + font-weight: 700; + letter-spacing: 0.01em; + } + + p { + margin: 0.18rem 0 0; + font-size: 0.78rem; + opacity: 0.78; + } + } + + .header-close { + color: rgb(255 255 255 / 80%); + flex: none; + + &:hover { + color: #fff; + background: rgb(255 255 255 / 12%) !important; + } + } +} + +/* ── Body ──────────────────────────────────────────────────────────────── */ + +.dialog-body { + display: flex; + flex: 1 1 auto; + flex-direction: column; + gap: 1.1rem; + min-height: 0; + max-height: none !important; + padding: 1.4rem 1.5rem !important; + overflow-y: auto; + background: $bg-page; + + &::-webkit-scrollbar { + width: 5px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background: #cbd5e1; + border-radius: 99px; + } +} + +.state-block { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + padding: 2rem 0; + color: $text-muted; + font-size: 0.85rem; +} + +/* ═══════════════════════════════════════════════════════════════════════ + Collection Summary Card (sc-* prefix) + ═══════════════════════════════════════════════════════════════════════ */ + +.sc-card { + border: 1px solid $accent-border; + border-radius: 10px; + background: $bg-white; + // No overflow:hidden — it clips row content in certain flex contexts + box-shadow: 0 2px 8px rgb(37 99 235 / 8%); +} + +/* ── Each item row (Share / Entry Fee) ─────────────────────────────────── */ + +.sc-row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 0.85rem 1.15rem; + background: $bg-white; + border-left: 4px solid transparent; + transition: + background 0.15s, + border-color 0.2s; + + &.sc-sep { + border-top: 1px solid $border-color; + } + + &.sc-ok { + background: $success-bg; + border-left-color: $success; + } + + &.sc-bad { + background: $danger-bg; + border-left-color: $danger; + } +} + +/* Left side: label + required amount */ +.sc-left { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.18rem; +} + +.sc-label { + display: block; + font-size: 0.86rem; + font-weight: 700; + color: $text-main; + line-height: 1.3; + min-height: 1em; // guarantees height even if content is empty +} + +.sc-sub { + display: block; + font-size: 0.72rem; + color: $text-muted; + line-height: 1.35; + min-height: 1em; + + b { + font-weight: 600; + color: $text-sub; + } +} + +/* Right side: collected amount + badge */ +.sc-right { + display: flex; + align-items: center; + gap: 0.5rem; + flex: none; +} + +.sc-val { + font-family: 'Roboto Mono', 'Courier New', monospace; + font-variant-numeric: tabular-nums; + font-size: 0.96rem; + font-weight: 700; + color: $text-muted; + letter-spacing: -0.01em; + transition: color 0.2s; + + &.sc-val-ok { + color: $success; + } + + &.sc-val-bad { + color: $danger; + } +} + +.sc-tag { + display: inline-flex; + align-items: center; + padding: 0.15rem 0.5rem; + border-radius: 99px; + font-size: 0.68rem; + font-weight: 700; + white-space: nowrap; + + &.sc-tag-ok { + background: $success-bg; + color: $success; + border: 1px solid $success-border; + } + + &.sc-tag-bad { + background: $danger-bg; + color: $danger; + border: 1px solid $danger-border; + } +} + +/* ── Total row ─────────────────────────────────────────────────────────── */ + +.sc-total-row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 0.8rem 1.15rem; + border-top: 1px solid $border-color; + background: $bg-page; + transition: background 0.2s; + + &.sc-total-ok { + background: $success-bg; + } +} + +.sc-total-lbl { + font-size: 0.82rem; + font-weight: 800; + color: $text-main; + letter-spacing: 0.01em; +} + +.sc-total-nums { + display: flex; + align-items: center; + gap: 0.45rem; + flex: none; +} + +.sc-total-req { + font-family: 'Roboto Mono', 'Courier New', monospace; + font-size: 0.78rem; + font-weight: 500; + color: $text-muted; +} + +.sc-arrow { + font-size: 0.8rem; + color: #94a3b8; + font-weight: 300; +} + +.sc-total-got { + font-family: 'Roboto Mono', 'Courier New', monospace; + font-variant-numeric: tabular-nums; + font-size: 1rem; + font-weight: 800; + color: $text-muted; + letter-spacing: -0.02em; + transition: color 0.2s; + + &.sc-total-got-ok { + color: $success; + } +} + +.sc-status-pill { + display: inline-flex; + align-items: center; + padding: 0.2rem 0.65rem; + border-radius: 99px; + font-size: 0.68rem; + font-weight: 800; + letter-spacing: 0.04em; + white-space: nowrap; + transition: all 0.2s; + + &.sc-pill-ok { + background: $success; + color: #fff; + box-shadow: 0 2px 6px rgb(5 150 105 / 30%); + } + + &.sc-pill-pending { + background: $border-color; + color: $text-muted; + } +} + +/* ═══════════════════════════════════════════════════════════════════════ */ + +/* ── Receipt step slots ────────────────────────────────────────────────── */ + +.slot { + display: flex; + flex-direction: column; + gap: 0.75rem; + padding: 1.1rem 1.25rem; + border: 1px solid $border-color; + border-radius: 10px; + background: $bg-white; + box-shadow: 0 1px 4px rgb(15 23 42 / 4%); + transition: box-shadow 0.2s; + + &:hover { + box-shadow: 0 3px 12px rgb(15 23 42 / 7%); + } +} + +.slot-head { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.slot-step { + display: flex; + align-items: center; + justify-content: center; + flex: none; + width: 26px; + height: 26px; + border-radius: 50%; + background: linear-gradient(135deg, $primary 0%, $accent 100%); + color: #fff; + font-size: 0.72rem; + font-weight: 800; + box-shadow: 0 2px 6px rgb(37 99 235 / 30%); +} + +.slot-title { + flex: 1; + min-width: 0; + + h3 { + margin: 0; + font-size: 0.9rem; + font-weight: 700; + color: $text-main; + } + + p { + margin: 0.12rem 0 0; + font-size: 0.72rem; + color: $text-muted; + } +} + +.slot-search { + display: inline-flex; + align-items: center; + gap: 0.3rem; + flex: none; + padding: 0.38rem 0.72rem; + border: 1.5px solid $accent-border; + border-radius: 7px; + background: $accent-soft; + color: $accent; + font-size: 0.74rem; + font-weight: 700; + cursor: pointer; + transition: all 0.15s; + + mat-icon { + width: 15px; + height: 15px; + font-size: 15px; + } + + &:hover { + background: $accent; + border-color: $accent; + color: #fff; + box-shadow: 0 2px 8px rgb(37 99 235 / 25%); + } +} + +/* ── Pickable option list ───────────────────────────────────────────────── */ + +.options { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 0.35rem; + max-height: 210px; + overflow-y: auto; + + &::-webkit-scrollbar { + width: 4px; + } + + &::-webkit-scrollbar-thumb { + background: #cbd5e1; + border-radius: 99px; + } +} + +.option { + display: flex; + align-items: center; + gap: 0.7rem; + padding: 0.72rem 0.9rem; + border: 1.5px solid $border-color; + border-radius: 7px; + cursor: pointer; + background: $bg-white; + transition: all 0.14s; + + &:hover { + border-color: $accent; + background: $accent-soft; + box-shadow: 0 2px 6px rgb(37 99 235 / 10%); + } + + &.option-busy { + opacity: 0.6; + pointer-events: none; + } +} + +.option-radio { + flex: none; + width: 14px; + height: 14px; + border: 2px solid #cbd5e1; + border-radius: 50%; + transition: border-color 0.14s; + + .option:hover & { + border-color: $accent; + } +} + +.option-main { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.1rem; +} + +.option-voucher { + font-size: 0.81rem; + font-weight: 700; + color: $text-main; +} + +.option-meta { + font-size: 0.7rem; + color: $text-muted; +} + +.option-desc { + font-size: 0.7rem; + color: $text-muted; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.option-amount { + flex: none; + font-size: 0.85rem; + font-weight: 700; + color: $text-main; +} + +.option-info { + display: flex; + align-items: center; + justify-content: center; + flex: none; + width: 26px; + height: 26px; + padding: 0; + border: 1px solid $border-color; + border-radius: 5px; + background: transparent; + color: $text-muted; + cursor: pointer; + transition: all 0.14s; + + mat-icon { + width: 16px; + height: 16px; + font-size: 16px; + } + + &:hover { + color: $accent; + border-color: $accent; + background: $accent-soft; + } +} + +/* ── Chosen receipt ─────────────────────────────────────────────────────── */ + +.chosen { + display: flex; + align-items: center; + gap: 0.8rem; + padding: 0.75rem 1rem; + border: 2px solid $success-border; + border-radius: 9px; + background: $success-bg; + box-shadow: 0 2px 8px rgb(5 150 105 / 10%); + + &.chosen-short { + border-color: $danger-border; + background: $danger-bg; + box-shadow: 0 2px 8px rgb(220 38 38 / 8%); + } +} + +.chosen-badge { + display: flex; + align-items: center; + justify-content: center; + flex: none; + width: 30px; + height: 30px; + border-radius: 7px; + background: $success; + + .chosen-short & { + background: $danger; + } + + mat-icon { + font-size: 17px; + width: 17px; + height: 17px; + color: #fff; + } +} + +.chosen-main { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.1rem; +} + +.chosen-voucher { + font-size: 0.84rem; + font-weight: 700; + color: $text-main; +} + +.chosen-gl { + font-size: 0.7rem; + color: $text-muted; +} + +.chosen-amount { + flex: none; + font-size: 0.95rem; + font-weight: 800; + color: $text-main; + font-family: 'Roboto Mono', 'Courier New', monospace; +} + +.chosen-clear { + display: flex; + align-items: center; + justify-content: center; + flex: none; + width: 26px; + height: 26px; + padding: 0; + border: 1px solid $danger-border; + border-radius: 5px; + background: transparent; + color: #f87171; + cursor: pointer; + transition: all 0.14s; + + mat-icon { + width: 15px; + height: 15px; + font-size: 15px; + } + + &:hover { + color: $danger; + background: $danger-bg; + border-color: $danger; + } +} + +/* ── Slot notes ─────────────────────────────────────────────────────────── */ + +.slot-note { + margin: 0; + font-size: 0.74rem; + font-weight: 500; + + &.note-good { + color: $success; + } + + &.note-bad { + color: $danger; + font-weight: 700; + } + + &.note-muted { + color: $text-muted; + } +} + +.slot-empty { + margin: 0; + padding: 0.8rem 1rem; + border: 1.5px dashed $border-color; + border-radius: 7px; + background: $bg-page; + font-size: 0.75rem; + line-height: 1.55; + color: $text-muted; +} + +/* ── Error alert ─────────────────────────────────────────────────────────── */ + +.alert { + display: flex; + align-items: flex-start; + gap: 0.5rem; + padding: 0.7rem 0.9rem; + border: 1.5px solid $danger-border; + border-radius: 7px; + background: $danger-bg; + color: $danger; + font-size: 0.76rem; + line-height: 1.45; + + mat-icon { + flex: none; + width: 17px; + height: 17px; + font-size: 17px; + margin-top: 1px; + } +} + +/* ── Footer ─────────────────────────────────────────────────────────────── */ + +.dialog-actions { + display: flex; + flex: none; + justify-content: flex-end; + align-items: center; + gap: 0.75rem; + min-height: 0; + padding: 1rem 1.5rem !important; + margin: 0 !important; + border-top: 1px solid $border-color; + background: $bg-white; + box-shadow: 0 -2px 8px rgb(15 23 42 / 5%); + + // Both buttons: same height, same border-radius, same font + button { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 0.3rem !important; + height: 40px !important; + min-width: 110px !important; + padding: 0 1.1rem !important; + border-radius: 8px !important; + font-weight: 600 !important; + font-size: 0.85rem !important; + line-height: 1 !important; + letter-spacing: 0.01em !important; + + // Icon inside button — vertically center it and size it correctly + mat-icon { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 18px !important; + height: 18px !important; + font-size: 18px !important; + line-height: 1 !important; + vertical-align: middle !important; + margin: 0 !important; + flex: none; + } + + mat-spinner { + flex: none; + } + } + + // Stroked cancel button + [mat-stroked-button] { + border-color: $border-color !important; + color: $text-sub !important; + + &:hover { + border-color: #94a3b8 !important; + background: $bg-page !important; + } + } + + // Primary action button (enabled) + [mat-flat-button][color='primary']:not([disabled]) { + background: linear-gradient(135deg, $accent 0%, #1d4ed8 100%) !important; + box-shadow: 0 2px 8px rgb(37 99 235 / 28%) !important; + color: #fff !important; + + &:hover { + box-shadow: 0 4px 14px rgb(37 99 235 / 40%) !important; + transform: translateY(-1px) !important; + } + + &:active { + transform: translateY(0) !important; + } + } + + // Primary action button (disabled) + [mat-flat-button][color='primary'][disabled] { + background: #e2e8f0 !important; + color: #94a3b8 !important; + box-shadow: none !important; + } +} + +/* ── Form fields (in search popup) ─────────────────────────────────────── */ + +.field { + display: flex; + flex-direction: column; + gap: 0.35rem; + + > span { + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: $text-muted; + } + + select, + input { + padding: 0.55rem 0.7rem; + border: 1.5px solid $border-color; + border-radius: 7px; + font-size: 0.82rem; + color: $text-main; + background: #fff; + outline: none; + transition: + border-color 0.14s, + box-shadow 0.14s; + + &:hover { + border-color: #94a3b8; + } + + &:focus { + border-color: $accent; + box-shadow: 0 0 0 3px rgb(37 99 235 / 12%); + } + } +} + +/* ── Sub-popups ─────────────────────────────────────────────────────────── */ + +.overlay { + position: fixed; + inset: 0; + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; + padding: 1.5rem; + background: rgb(15 23 42 / 55%); + backdrop-filter: blur(2px); +} + +.popup { + display: flex; + flex-direction: column; + width: 100%; + max-width: 460px; + max-height: 80vh; + border-radius: 12px; + background: #fff; + overflow: hidden; + box-shadow: 0 20px 50px -8px rgb(15 23 42 / 30%); + animation: popup-in 0.15s cubic-bezier(0.22, 1, 0.36, 1); +} + +@keyframes popup-in { + from { + opacity: 0; + transform: scale(0.96) translateY(8px); + } + + to { + opacity: 1; + transform: none; + } +} + +.popup-head { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.85rem 0.85rem 0.85rem 1.2rem; + border-bottom: 1px solid $border-color; + background: $bg-page; + + h3 { + flex: 1; + margin: 0; + font-size: 0.92rem; + font-weight: 700; + color: $text-main; + } +} + +.popup-body { + display: flex; + flex-direction: column; + gap: 0.85rem; + padding: 1.2rem; + overflow-y: auto; +} + +.popup-foot { + display: flex; + justify-content: flex-end; + gap: 0.6rem; + padding: 0.8rem 1.2rem; + border-top: 1px solid $border-color; + background: $bg-page; +} + +/* ── Receipt detail popup ───────────────────────────────────────────────── */ + +.detail-list { + display: flex; + flex-direction: column; + gap: 0; + margin: 0; + border: 1px solid $border-color; + border-radius: 8px; + overflow: hidden; + + > div { + display: flex; + border-bottom: 1px solid $border-color; + + &:last-child { + border-bottom: none; + } + } + + dt { + flex: none; + width: 110px; + padding: 0.6rem 0.9rem; + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + color: $text-muted; + background: $bg-page; + border-right: 1px solid $border-color; + } + + dd { + flex: 1; + min-width: 0; + margin: 0; + padding: 0.6rem 0.9rem; + font-size: 0.8rem; + color: $text-main; + word-break: break-word; + } +} + +.detail-heading { + margin: 0.4rem 0 0.1rem; + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: $text-muted; +} + +.gl-table { + width: 100%; + border-collapse: collapse; + font-size: 0.76rem; + border: 1px solid $border-color; + border-radius: 7px; + overflow: hidden; + + th, + td { + padding: 0.45rem 0.6rem; + border-bottom: 1px solid $border-color; + text-align: left; + } + + tbody tr:last-child td { + border-bottom: none; + } + + th { + font-size: 0.64rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + color: $text-muted; + background: $bg-page; + } + + tbody tr:hover { + background: $accent-soft; + } + + .num { + text-align: right; + } +} diff --git a/src/app/shares/share-receipt-option.ts b/src/app/shares/share-receipt-option.ts new file mode 100644 index 000000000..3218b0efa --- /dev/null +++ b/src/app/shares/share-receipt-option.ts @@ -0,0 +1,85 @@ +/** + * 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/. + */ + +/** + * One Share Collection receipt the counter can choose, in a single shape whatever it came from. + * + * {@code GET /shareadvancecollection/unattributed} answers with two differently-shaped lists — the + * member's own receipts under {@code own}, and every other receipt still going spare under + * {@code rows} — and normalising both to this on arrival is what lets a screen show one plain list + * of vouchers instead of two tables whose difference a counter has to understand before they can + * pick anything. + * + * Shared by the two screens that settle a share purchase (the first application's Apply Collection + * dialog and the Apply Additional Shares dialog) so a receipt reads identically on both. + */ +export interface ReceiptOption { + /** Stable identity for tracking and comparison; unique across both source lists. */ + key: string; + /** + * The {@code m_share_advance_collection} row behind this receipt, or null while it is still only + * a voucher number. A null one is attached to the member on first pick. + */ + collectionId: number | null; + voucherNo: string; + glAccountNo: string; + glAccountName: string; + date: string; + amount: number; + description: string; + cashierName: string; +} + +/** + * A receipt that already has an {@code m_share_advance_collection} row — ready to settle as-is. + * + * Also the shape {@code GET /shareadvancecollection/by-voucher} answers with, so a receipt found by + * number arrives here too, already attached. + */ +export function receiptFromOwn(row: any): ReceiptOption { + return { + key: `c${row.id}`, + collectionId: Number(row.id), + voucherNo: row.voucher_no || row.receipt_no || '', + glAccountNo: row.gl_code || '', + glAccountName: '', + date: String(row.collection_date || '').slice(0, 10), + amount: Number(row.amount || 0), + description: row.note || '', + cashierName: row.collected_by_name || '' + }; +} + +/** A receipt that is still only a voucher, attached to the member when it is picked. */ +export function receiptFromUnattached(row: any): ReceiptOption { + return { + key: `v${row.id}`, + collectionId: null, + voucherNo: row.voucherNo || '', + glAccountNo: row.glAccountNo || '', + glAccountName: row.glAccountName || '', + date: String(row.txnDate || '').slice(0, 10), + amount: Number(row.amount || 0), + description: row.description || '', + cashierName: row.cashierName || '' + }; +} + +/** + * The GL account a receipt sits in, named where the name is known and coded where it is not. + * + * An attached receipt carries only its {@code gl_code}, so the name is looked up in whatever GL + * account list the screen already loaded for its voucher search rather than fetched again. + */ +export function receiptGlLabel(option: ReceiptOption, glAccounts: any[]): string { + const name = option.glAccountName || glAccounts.find((gl) => gl.gl_code === option.glAccountNo)?.name || ''; + if (!option.glAccountNo) { + return name || '—'; + } + return name ? `${option.glAccountNo} — ${name}` : option.glAccountNo; +} diff --git a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html index 45cc66466..0299ae92f 100644 --- a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html +++ b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html @@ -6,692 +6,367 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -

- - -
-
- add_card +
+
+
+ trending_up +
+
+

Apply Additional Shares

+

+ Share account {{ data.accountNo }} +

+
+ +
+ + +
+
+
+ Shares +
-
-

{{ 'Apply Additional Shares' | translate }}

-

Purchase additional share tranches via cash receipts or savings debit

+
+ Unit Price + {{ unitPrice | number: '1.2-2' }} +
+
+ Total Amount + {{ amount | number: '1.2-2' }}
+
-
- - -
-
- assignment - Application & Resolution Details -
- -
- - - {{ 'labels.inputs.Request Date' | translate }} - - - - @if (applySharesForm.controls.requestedDate.hasError('required')) { - - {{ 'labels.inputs.Request Date' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - - - - - {{ 'labels.inputs.Resolution Number' | translate }} - - @if (applySharesForm.controls.resolutionNumber.hasError('required')) { - - {{ 'labels.inputs.Resolution Number' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - - - - - {{ 'labels.inputs.Resolution Date' | translate }} - - - - @if (applySharesForm.controls.resolutionDate.hasError('required')) { - - {{ 'labels.inputs.Resolution Date' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - -
+ + +
+
+ 1 +
+

Board Resolution

+

The meeting that authorised this tranche, not the one the account was opened under.

+
- -
-
- calculate - Share Purchase Calculation -
+
+ + + +
+
-
- - - {{ 'labels.inputs.Total No. of Shares' | translate }} - - @if (applySharesForm.controls.requestedShares.hasError('required')) { - - {{ 'labels.inputs.Requested Shares' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - - - - - {{ 'labels.inputs.Current Price' | translate }} - - per share - - - -
- {{ 'labels.inputs.Amount' | translate }} - {{ amount | number: '1.2-2' }} - {{ applySharesForm.get('requestedShares').value || 0 }} shares × - {{ sharesAccountData?.currentMarketPrice || 0 }} -
-
+ +
+
+ 2 +
+

Funding

+

Approval posts Dr Sundry / Cr Share Capital either way.

+ @if (funding === 'CASH') { + + } +
- -
-
- account_balance_wallet - {{ 'labels.inputs.Payment Option' | translate }} +
+ + +
+ + @if (funding === 'CASH') { + @if (loadingReceipts) { +
+ + Loading receipts…
- -
-
-
- payments -
-
- Apply Collection (Cash) - Link receipts paid at counter sitting in Share Sundry -
- @if (paymentMode === 'CASH') { - check_circle - } + } @else if (receipt) { +
+
+ {{ shortfall > 0 ? 'warning' : 'check_circle' }}
- -
-
- account_balance -
-
- Debit from Savings - Direct debit from member's linked savings account -
- @if (paymentMode === 'SAVINGS') { - check_circle - } +
+ {{ receipt.voucherNo }} + {{ glLabel(receipt) }}
-
-
- - - @if (paymentMode === 'CASH') { -
-
- - - Select the one receipt that covers this payment. Click - visibility on any row to view full details popup. - -
- - - - - - @if (unattributed.length) { -
-
- person_add - Unattached Share Collection Receipts — Attach to This Tranche -
-
- - - - - - - - - - - - - @for (u of unattributed; track u.id) { - - - - - - - - - } - -
Voucher NoDateDeposited ToDescriptionAmountAction
- {{ u.voucherNo }} - @if (isOwnClientVoucher(u)) { - This member's receipt - } - {{ u.txnDate }}{{ u.glAccountNo }} — {{ u.glAccountName }}{{ u.description || '—' }}{{ u.amount | number: '1.2-2' }} - -
-
-
- } - - @if (voucherError) { -
- error_outline - {{ voucherError }} -
- } - - -
- @if (loadingVouchers) { -
- - Loading member receipts… -
- } @else if (vouchers.length === 0) { -
- receipt_long -
- No unapplied receipts found for this member. -

- Collect cash at Cashier › Transaction Entry as a deposit to Share Sundry GL. Once - posted, it will appear here. -

-
-
- } @else { -
- -
-
- receipt - Vouchers / Receipts - {{ vouchers.length }} -
-
- - -
- - - - - - - - - - - - - - - @for (v of vouchers; track v.id) { - - - - - - - - - - } - -
#Voucher / Receipt NoDateDescriptionCollected ByAmountDetail
- - - {{ v.voucher_no || v.receipt_no }} - {{ v.collection_date }}{{ v.note || 'Share Collection' }} - - person_outline - {{ v.collected_by_name || 'System' }} - - - {{ v.amount | number: '1.2-2' }} - - -
-
- - -
-
- - {{ selectedVoucherIds.length }} of - {{ vouchers.length }} receipts selected - - -
- Selected Total: - {{ selectedVoucherTotal | number: '1.2-2' }} - / - Target {{ amount | number: '1.2-2' }} -
-
- - -
- @if (selectedVoucherIds.length === 0) { - - info Tick at least 1 receipt - - } @else if (voucherShortfall > 0) { - - warning Shortfall {{ voucherShortfall | number: '1.2-2' }} - - } @else { - check_circle Fully Funded - } -
-
-
- - @if (selectedVoucherIds.length > 0 && voucherShortfall > 0) { -
- error_outline - - Selected total {{ selectedVoucherTotal | number: '1.2-2' }} is - {{ voucherShortfall | number: '1.2-2' }} short of tranche target - {{ amount | number: '1.2-2' }}. Tick another receipt or collect balance. - -
- } - } -
+ @if (shortfall > 0) { +

+ Short by {{ shortfall | number: '1.2-2' }} — this receipt does not cover {{ amount | number: '1.2-2' }}. +

+ } @else { +

Covers the {{ amount | number: '1.2-2' }} tranche.

+ } + } @else if (available.length) { +
    + @for (option of available; track option.key) { +
  • + +
    + {{ option.voucherNo }} + {{ option.date }} · {{ glLabel(option) }} + @if (option.description) { + {{ option.description }} + } +
    + {{ option.amount | number: '1.2-2' }} + @if (attaching === option.key) { + + } @else if (option.collectionId !== null) { + + } +
    • + } +
+ } @else { +

+ No Share Collection receipt is waiting. Collect the cash at Cashier › Transaction Entry with entry + type Share Collection, or find an earlier voucher by number. +

} + } - - @if (paymentMode === 'SAVINGS') { -
-
- - - The tranche amount will be automatically debited from the member's linked savings account into Share - Sundry upon submission. + @if (funding === 'SAVINGS') { + @if (checkingSavings) { +
+ + Checking the linked savings account… +
+ } @else if (savings) { +
+
+ {{ savings.eligible ? 'check_circle' : 'warning' }} +
+
+ + @if (savings.savingsAccountNo) { + Savings {{ savings.savingsAccountNo }} + } @else { + Linked savings account + } + + + {{ savings.eligible ? 'Debited into Share Sundry on submit.' : savings.reason }}
- - @if (checkingSavings) { -
- - Checking linked savings account eligibility… -
- } @else if (savingsEligibility) { -
- @if (savingsEligibility.savingsAccountNo) { -
- Savings Account No. - {{ savingsEligibility.savingsAccountNo }} -
-
- Available Balance - {{ savingsEligibility.savingsBalance | number: '1.2-2' }} -
- } -
- Amount to Debit - {{ amount | number: '1.2-2' }} -
-
- - @if (!savingsEligibility.eligible) { -
- error_outline - {{ savingsEligibility.reason }} -
- } + @if (savings.savingsBalance !== null) { + {{ savings.savingsBalance | number: '1.2-2' }} }
+ } @else { +

Enter the number of shares to check the member's balance.

} + } +
+ + @if (errorMsg) { +
+ error_outline + {{ errorMsg }} +
+ } + + + + + + +
+ + +@if (searchOpen) { +
+
+
+

Find a receipt

+ +
+ +
+ + + @if (errorMsg) { -
+
error_outline {{ errorMsg }}
} - - -
- schedule - - Submitting records a request for approval. Shares are issued and funds moved out of Share Sundry only upon - manager approval. - -
- - - - - - - - - - -
- - -@if (viewingVoucherDetail) { -
-
-
-
- receipt_long - Voucher Details - {{ - viewingVoucherDetail.voucher_no || viewingVoucherDetail.receipt_no - }} -
-
-
-
-
- Voucher / Receipt No - {{ - viewingVoucherDetail.voucher_no || viewingVoucherDetail.receipt_no || '—' - }} -
- -
- Receipt Reference - {{ viewingVoucherDetail.receipt_no || '—' }} -
- -
- Client Name - {{ - viewingVoucherDetail.client_name || sharesAccountData?.clientName || 'Member' - }} -
- -
- Client ID - {{ - viewingVoucherDetail.client_id || sharesAccountData?.clientId || '—' - }} -
- -
- Collection Date - {{ viewingVoucherDetail.collection_date || '—' }} -
- -
- Status - {{ viewingVoucherDetail.status || 'UNAPPLIED' }} -
- -
- Collected By - {{ viewingVoucherDetail.collected_by_name || 'System Administrator' }} -
- -
- Receipt Amount - {{ viewingVoucherDetail.amount | number: '1.2-2' }} -
- -
- Full Note / Description -
- {{ viewingVoucherDetail.note || 'Share collection deposit to Share Sundry GL' }} -
-
- - -
- GL Entry (this receipt's actual posting) - @if (loadingGlEntries) { -
Loading…
- } @else if (voucherGlEntries.length === 0) { -
No GL posting recorded for this receipt.
- } @else { - - - - - - - - - - @for (leg of voucherGlEntries; track leg.glCode + leg.drCr) { - - - - - - } - -
GL AccountDr / CrAmount
{{ leg.glCode }} — {{ leg.accountName }} - - {{ leg.drCr }} - - {{ leg.amount | number: '1.2-2' }}
- } -
-
-
- -
+
+ - - -
+
} - -@if (voucherSearchOpen) { -
-
-
-
- search - Search a Voucher -
- -
+ -
-

- For a receipt not already listed above — one taken on an earlier day, or a slip the member is holding. -

- -
-
- - +
+
+
+
Date
+
{{ viewing.date }}
- -
- -
- - +
+
Amount
+
{{ viewing.amount | number: '1.2-2' }}
+
+
+
GL Account
+
{{ glLabel(viewing) }}
+
+ @if (viewing.cashierName) { +
+
Collected By
+
{{ viewing.cashierName }}
-
-
+ } + @if (viewing.description) { +
+
Description
+
{{ viewing.description }}
+
+ } +
- @if (voucherError) { -
- error_outline - {{ voucherError }} -
+

Journal Entries

+ @if (loadingGlEntries) { +
+ } @else if (viewingGlEntries?.length) { + + + + + + + + + + @for (entry of viewingGlEntries; track $index) { + + + + + + } + +
AccountDebitCredit
+ {{ entry.glCode }} {{ entry.accountName }} + {{ entry.drCr === 'Dr' ? (entry.amount | number: '1.2-2') : '' }}{{ entry.drCr === 'Cr' ? (entry.amount | number: '1.2-2') : '' }}
+ } @else { +

No journal entries are recorded against this receipt.

}
-
- -
+
+ +
} diff --git a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.scss b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.scss index 7e7360995..ce4264083 100644 --- a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.scss +++ b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.scss @@ -6,1179 +6,195 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -// Modern Color Tokens -$primary: #1e3a8a; -$primary-light: #eff6ff; -$primary-border: #bfdbfe; -$accent-blue: #2563eb; -$text-main: #0f172a; -$text-muted: #64748b; -$border-color: #e2e8f0; -$border-light: #f1f5f9; -$bg-surface: #fff; -$bg-slate: #f8fafc; +// Dialog chrome, receipt list, chosen state and popups come from the shared +// partial. Only what is unique to a tranche request lives below. +@use '../../share-dialog.shared' as *; -$success: #059669; -$success-bg: #ecfdf5; -$success-border: #a7f3d0; - -$warning: #d97706; -$warning-bg: #fffbeb; -$warning-border: #fde68a; - -$danger: #dc2626; -$danger-bg: #fef2f2; -$danger-border: #fecaca; - -.action-container { - max-width: 72rem; - margin: 0.75rem auto; - padding: 0 0.5rem; -} - -.action-card { - border-radius: 12px; - border: 1px solid $border-color; - background: $bg-surface; - box-shadow: 0 4px 16px -4px rgb(15 23 42 / 6%); - overflow: hidden; -} - -/* Compact Header */ -.card-header-banner { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 1rem; - background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); - color: #fff; - - .header-icon-box { - display: flex; - align-items: center; - justify-content: center; - width: 34px; - height: 34px; - background: rgb(255 255 255 / 20%); - border-radius: 8px; - - mat-icon { - font-size: 20px; - width: 20px; - height: 20px; - color: #fff; - } - } - - .header-text { - h2 { - margin: 0; - font-size: 1.05rem; - font-weight: 700; - color: #fff; - } - - p { - margin: 1px 0 0; - font-size: 0.78rem; - color: rgb(255 255 255 / 85%); - } - } -} - -.card-body { - padding: 0.85rem !important; -} - -/* Form Sections */ -.form-section { - background: $bg-surface; - border: 1px solid $border-light; - border-radius: 10px; - padding: 0.75rem 0.85rem; - margin-bottom: 0.65rem; - - &.financial-section { - background: $bg-slate; - border-color: $border-color; - } -} - -.section-title { - display: flex; - align-items: center; - gap: 0.4rem; - font-size: 0.85rem; - font-weight: 700; - color: $text-main; - margin-bottom: 0.65rem; - padding-bottom: 0.35rem; - border-bottom: 1px solid $border-light; - - .sec-icon { - font-size: 18px; - width: 18px; - height: 18px; - color: $accent-blue; - } -} - -/* Compact Form Grids */ -.form-grid { - display: grid; - gap: 0.65rem; - - &.form-grid-3 { - grid-template-columns: repeat(3, 1fr); - - @media (width <= 680px) { - grid-template-columns: 1fr; - } - } -} - -.align-items-center { - align-items: center; -} - -mat-form-field { +:host { + display: block; width: 100%; } -.shares-count-input { - text-align: left; +/* ── Shares sub-header (sits between dialog-header and dialog-body, never scrolls) ── */ + +.shares-subheader { + display: flex; + flex: none; // same as header/footer — doesn't participate in body flex growth + padding: 0.85rem 1.5rem; + background: #f1f5f9; + border-bottom: 1px solid $border-color; } -// Disabled read-back field (auto-filled market price) — right-aligned so the figure sits right -// next to its "per share" suffix instead of stranded at the far left of an otherwise-empty field. -.price-input { - text-align: right; +/* ── Shares / Price / Amount strip ─────────────────────────────────────── */ + +.shares-strip { + display: flex; + width: 100%; + border: 1px solid $accent-border; + border-radius: 10px; + overflow: hidden; + background: $bg-white; + box-shadow: 0 2px 8px rgb(37 99 235 / 7%); } -// Material fades a disabled outline field almost to invisibility by default, which next to the -// enabled "Total No. of Shares" field (a solid dark border) reads as a missing box rather than a -// deliberately read-only one. Matched back to the same border weight and label/value contrast. -.price-field ::ng-deep { - .mdc-notched-outline__leading, - .mdc-notched-outline__notch, - .mdc-notched-outline__trailing { - border-color: $border-color !important; - opacity: 1 !important; - } - - .mdc-floating-label { - color: $text-muted !important; - } - - input:disabled { - color: $text-main !important; - -webkit-text-fill-color: $text-main !important; - } -} - -.currency-label { - color: $text-muted; - font-size: 0.8rem; - white-space: nowrap; - margin-left: 0.35rem; -} - -/* Financial Stat Display Card */ -.amount-display-card { +.shares-cell { + flex: 1; display: flex; flex-direction: column; - justify-content: center; - background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); - border: 1px solid $primary-border; - border-radius: 8px; - padding: 0.45rem 0.75rem; - height: 48px; - box-sizing: border-box; + gap: 0.3rem; + padding: 0.9rem 1.1rem; + background: $bg-white; + border-right: 1px solid $border-color; - .amount-label { - font-size: 0.65rem; - text-transform: uppercase; - letter-spacing: 0.05em; - color: #1e40af; - font-weight: 700; + &:last-child { + border-right: none; } - .amount-value { - font-size: 1.1rem; - font-weight: 700; - color: #1e3a8a; - font-family: 'Courier New', monospace; - line-height: 1.1; + &.shares-cell-input { + // editable cell — slight highlight + background: #fafcff; } - .amount-subtext { - font-size: 0.65rem; - color: #3b82f6; - } -} + &.shares-cell-total { + background: $accent-soft; -/* Payment Option Radio Cards */ -.payment-card-group { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 0.65rem; - - @media (width <= 580px) { - grid-template-columns: 1fr; - } -} - -.payment-card-option { - display: flex; - align-items: center; - gap: 0.65rem; - padding: 0.65rem 0.75rem; - border: 1.5px solid $border-color; - border-radius: 10px; - background: $bg-surface; - cursor: pointer; - user-select: none; - transition: all 0.15s ease; - - .option-icon-box { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border-radius: 8px; - background: $bg-slate; - color: $text-muted; - - mat-icon { - font-size: 18px; - width: 18px; - height: 18px; - } - } - - .option-content { - display: flex; - flex-direction: column; - - .option-title { - font-size: 0.82rem; - font-weight: 600; - color: $text-main; + .shares-label { + color: $accent; } - .option-desc { - font-size: 0.72rem; - color: $text-muted; - } - } - - .selected-check { - margin-left: auto; - font-size: 18px; - width: 18px; - height: 18px; - color: $accent-blue; - } - - &:hover { - border-color: #93c5fd; - background: #f8fafc; - } - - &.active { - border-color: $accent-blue; - background: $primary-light; - - .option-icon-box { - background: $accent-blue; - color: #fff; + .shares-value { + color: $primary; } } } -/* Funding Panel */ -.funding-panel { - border: 1px solid $border-color; - border-radius: 10px; - padding: 0.75rem; - background: #fcfdfe; - margin-top: 0.4rem; - margin-bottom: 0.65rem; -} - -.funding-intro-banner { - display: flex; - align-items: center; - gap: 0.5rem; - background: #f0f9ff; - border: 1px solid #bae6fd; - border-radius: 6px; - padding: 0.45rem 0.65rem; - font-size: 0.78rem; - color: #0369a1; - margin-bottom: 0.65rem; - - .banner-icon { - font-size: 16px; - width: 16px; - height: 16px; - color: #0284c7; - flex-shrink: 0; - } - - .inline-icon { - font-size: 14px; - width: 14px; - height: 14px; - vertical-align: middle; - } -} - -.voucher-search-toggle-btn { - display: inline-flex; - align-items: center; - gap: 6px; - font-size: 0.82rem; - font-weight: 600; - color: $accent-blue; - border-color: $primary-border; - margin-bottom: 1rem; - - mat-icon { - font-size: 17px; - width: 17px; - height: 17px; - } -} - -.voucher-search-hint { - font-size: 0.8rem; - color: $text-muted; - margin: 0 0 0.85rem; -} - -// The shared .lookup-toolbar normally goes two-column above its own breakpoint of BROWSER width, -// which says nothing about how wide this popup itself is -- at the popup's width, two columns crowd -// the GL Account select against the voucher input. Single column reads better at this popup's width. -.voucher-search-dialog .lookup-toolbar { - grid-template-columns: 1fr; -} - -/* Lookup Toolbar */ -.lookup-toolbar { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0.65rem; - background: $bg-slate; - padding: 0.65rem; - border-radius: 8px; - border: 1px solid $border-color; - margin-bottom: 0.65rem; - - @media (width <= 600px) { - grid-template-columns: 1fr; - } -} - -.toolbar-label { - display: flex; - align-items: center; - gap: 4px; - font-size: 0.72rem; - font-weight: 600; +.shares-label { + display: block; + font-size: 0.63rem; + font-weight: 700; text-transform: uppercase; + letter-spacing: 0.08em; color: $text-muted; - margin-bottom: 4px; - - .mini-icon { - font-size: 14px; - width: 14px; - height: 14px; - } + line-height: 1.3; } -.custom-select { - width: 100%; - height: 34px; - padding: 0 0.65rem; - border: 1px solid #cbd5e1; - border-radius: 6px; - font-size: 0.8rem; +.shares-value { + display: block; + font-size: 1.05rem; + font-weight: 700; color: $text-main; - background: #fff; + letter-spacing: -0.01em; + line-height: 1.3; +} + +/* ── Inline number input inside the strip ──────────────────────────────── */ + +.req-input { + width: 100%; + padding: 0; + border: none; + background: transparent; + font-size: 1.05rem; + font-weight: 700; + color: $text-main; + letter-spacing: -0.01em; &:focus { outline: none; - border-color: $accent-blue; + } + + &::placeholder { + color: #cbd5e1; + font-weight: 400; + } + + // Remove browser number arrows + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + appearance: none; + margin: 0; } } -.lookup-input-group { +/* ── Board resolution fields ────────────────────────────────────────────── */ + +.field-row { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.85rem; + + @media (width <= 560px) { + grid-template-columns: 1fr; + } +} + +/* ── Cash / Savings funding selector ───────────────────────────────────── */ + +.funding-choice { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.75rem; +} + +.funding-btn { display: flex; - gap: 0.4rem; - - .lookup-input { - flex: 1; - height: 34px; - padding: 0 0.65rem; - border: 1px solid #cbd5e1; - border-radius: 6px; - font-size: 0.8rem; - color: $text-main; - background: #fff; - - &:focus { - outline: none; - border-color: $accent-blue; - } - } - - .find-btn { - height: 34px; - border-radius: 6px; - padding: 0 0.75rem; - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 0.8rem; - - mat-icon { - font-size: 16px; - width: 16px; - height: 16px; - } - } -} - -/* Vouchers Array Card & Table */ -.vouchers-card { - border: 1px solid $border-color; - border-radius: 8px; - background: #fff; - overflow: hidden; -} - -.vouchers-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0.75rem; - background: #f1f5f9; - border-bottom: 1px solid $border-color; - - .vouchers-title { - display: flex; - align-items: center; - gap: 0.4rem; - font-size: 0.84rem; - font-weight: 700; - color: $text-main; - - .v-icon { - font-size: 16px; - width: 16px; - height: 16px; - color: $accent-blue; - } - - .badge-count { - background: $accent-blue; - color: #fff; - font-size: 0.7rem; - font-weight: 700; - padding: 0 6px; - border-radius: 999px; - } - } - - .select-all-btn { - font-size: 0.75rem; - color: $accent-blue; - font-weight: 600; - - mat-icon { - font-size: 16px; - width: 16px; - height: 16px; - margin-right: 2px; - } - } -} - -.table-responsive { - width: 100%; - overflow-x: auto; -} - -/* Unattached share-collection receipts. Set apart in amber so it never reads as this member's own - settled list above: these belong to nobody until somebody attaches one. */ -.unattributed-section { - margin: 0 0 0.75rem; - padding: 0.65rem; - border: 1px solid $warning-border; - border-radius: 8px; - background: $warning-bg; - - .section-title { - border-bottom: none; - margin-bottom: 0.5rem; - padding-bottom: 0; - - &.text-amber { - color: $warning; - - .sec-icon { - color: $warning; - } - } - } - - .unattributed-table { - background: $bg-surface; - - .col-attach { - width: 96px; - } - } - - .attach-btn { - height: 28px; - line-height: 28px; - font-size: 0.75rem; - padding: 0 0.65rem; - } - - // A row already linked to the member whose screen this is -- the same voucher is also sitting, - // pre-loaded and tickable, in the Vouchers/Receipts table below. This is not a duplicate to - // clear up; it is the same receipt shown two ways for two different purposes (find it here, - // select it there), so the row is called out instead of removed. - .own-client-row { - background: $success-bg; - - &:hover { - background: $success-bg; - } - - .voucher-badge { - border-color: $success-border; - } - } - - .own-client-badge { - display: block; - margin-top: 2px; - font-size: 0.65rem; - font-weight: 700; - color: $success; - } -} - -.receipt-table { - width: 100%; - border-collapse: separate; - border-spacing: 0; - font-size: 0.78rem; - - th { - background: $bg-slate; - color: $text-muted; - font-size: 0.7rem; - font-weight: 700; - text-transform: uppercase; - padding: 0.5rem 0.65rem; - border-bottom: 1px solid $border-color; - } - - td { - padding: 0.45rem 0.65rem; - border-bottom: 1px solid $border-light; - vertical-align: middle; - } - - .receipt-row { - cursor: pointer; - transition: background 0.12s ease; - - &:hover { - background: #f8fafc; - } - - &.selected { - background: #eff6ff; - - .voucher-badge { - background: #dbeafe; - color: #1e40af; - border-color: #bfdbfe; - } - } - } - - .col-checkbox { - width: 36px; - } - - .col-actions { - width: 44px; - } - - .custom-checkbox { - width: 16px; - height: 16px; - accent-color: $accent-blue; - cursor: pointer; - } - - .voucher-badge { - display: inline-block; - background: #f1f5f9; - color: #334155; - padding: 2px 6px; - border-radius: 4px; - border: 1px solid #cbd5e1; - font-weight: 600; - font-size: 0.78rem; - } - - .desc-cell { - color: $text-muted; - max-width: 160px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .user-chip { - display: inline-flex; - align-items: center; - gap: 3px; - background: $bg-slate; - border: 1px solid $border-color; - padding: 1px 6px; - border-radius: 999px; - font-size: 0.72rem; - color: $text-muted; - - .chip-icon { - font-size: 12px; - width: 12px; - height: 12px; - } - } - - .amount-cell { - color: $text-main; - font-size: 0.84rem; - } - - .view-detail-btn { - width: 28px; - height: 28px; - line-height: 28px; - - .eye-icon { - font-size: 18px; - width: 18px; - height: 18px; - color: $accent-blue; - } - } -} - -/* Vouchers Footer Bar */ -.vouchers-footer { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0.75rem; - background: $bg-slate; - border-top: 1.5px solid #cbd5e1; - flex-wrap: wrap; - gap: 0.5rem; - - .selected-summary { - display: flex; - align-items: center; - gap: 1rem; - flex-wrap: wrap; - - .summary-text { - font-size: 0.78rem; - color: $text-muted; - } - - .summary-amounts { - display: flex; - align-items: center; - gap: 0.3rem; - font-size: 0.8rem; - - .total-label { - color: $text-muted; - } - - .total-value { - color: $primary; - font-family: 'Courier New', monospace; - } - - .target-divider { - color: $text-muted; - } - - .target-value { - color: $text-muted; - } - } - } -} - -/* Coverage Status Badges */ -.coverage-status { - .status-badge { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 3px 10px; - border-radius: 999px; - font-size: 0.72rem; - font-weight: 700; - - mat-icon { - font-size: 14px; - width: 14px; - height: 14px; - } - - &.badge-neutral { - background: #f1f5f9; - color: #64748b; - border: 1px solid #cbd5e1; - } - - &.badge-warning { - background: $warning-bg; - color: $warning; - border: 1px solid $warning-border; - } - - &.badge-success { - background: $success-bg; - color: $success; - border: 1px solid $success-border; - } - } -} - -/* Savings Panel Details */ -.savings-card { - background: #fff; - border: 1px solid $border-color; - border-radius: 8px; - padding: 0.65rem 0.85rem; -} - -.savings-row { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.35rem 0; - - .lbl { - font-size: 0.78rem; - color: $text-muted; - } - - .val { - font-size: 0.82rem; - color: $text-main; - } - - &.savings-row-total { - border-top: 1px dashed $border-color; - margin-top: 0.2rem; - padding-top: 0.5rem; - - .lbl { - font-weight: 600; - color: $text-main; - } - - .val { - font-size: 0.95rem; - font-weight: 700; - } - } -} - -/* Alert Boxes */ -.alert-box { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 0.75rem; - border-radius: 8px; - font-size: 0.78rem; + flex-direction: column; + align-items: flex-start; + gap: 0.2rem; + padding: 0.85rem 1rem; + border: 2px solid $border-color; + border-radius: 10px; + background: $bg-white; + text-align: left; + cursor: pointer; + transition: all 0.15s ease; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); mat-icon { - font-size: 18px; - width: 18px; - height: 18px; - flex-shrink: 0; + width: 22px; + height: 22px; + font-size: 22px; + color: $text-muted; + transition: color 0.15s; + margin-bottom: 0.15rem; } - &.alert-error { - background: $danger-bg; - color: $danger; - border: 1px solid $danger-border; - } - - &.alert-warning { - background: $warning-bg; - color: #92400e; - border: 1px solid $warning-border; - } -} - -/* Pending Notice Banner */ -.pending-notice { - display: flex; - align-items: center; - gap: 0.5rem; - background: #f8fafc; - border: 1px solid $border-color; - border-radius: 8px; - padding: 0.5rem 0.75rem; - font-size: 0.76rem; - color: $text-muted; - - .notice-icon { - font-size: 16px; - width: 16px; - height: 16px; - color: $accent-blue; - flex-shrink: 0; - } -} - -/* Action Buttons Bar */ -.card-actions-bar { - display: flex; - justify-content: flex-end; - align-items: center; - gap: 0.65rem; - padding: 0.75rem 1rem !important; - background: $bg-slate; - border-top: 1px solid $border-color; - - .action-btn { - height: 36px; - padding: 0 1.25rem; - border-radius: 6px; - font-size: 0.82rem; - font-weight: 600; + &:hover { + border-color: $accent; + background: $accent-soft; + box-shadow: 0 2px 8px rgb(37 99 235 / 12%); + transform: translateY(-1px); mat-icon { - font-size: 16px; - width: 16px; - height: 16px; - margin-right: 4px; + color: $accent; + } + } + + &:active { + transform: translateY(0); + } + + &.funding-on { + border-color: $accent; + background: linear-gradient(135deg, $accent-soft 0%, #e0eaff 100%); + box-shadow: 0 2px 10px rgb(37 99 235 / 18%); + + mat-icon, + .funding-name { + color: $primary; } } } -/* POPUP MODAL DIALOG STYLES */ -.modal-backdrop { - position: fixed; - inset: 0; - background: rgb(15 23 42 / 50%); - backdrop-filter: blur(4px); - z-index: 1000; - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; +.funding-name { + font-size: 0.88rem; + font-weight: 700; + color: $text-main; + letter-spacing: 0.01em; } -.voucher-modal-dialog { - background: #fff; - border-radius: 12px; - width: 100%; - max-width: 36rem; - box-shadow: 0 20px 40px -10px rgb(15 23 42 / 25%); - border: 1px solid $border-color; - overflow: hidden; - animation: modal-scale-in 0.2s ease-out; - - .modal-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.85rem 1.25rem; - background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); - color: #fff; - - .header-title { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.95rem; - font-weight: 700; - - .m-icon { - font-size: 20px; - width: 20px; - height: 20px; - } - - .modal-badge { - background: rgb(255 255 255 / 20%); - padding: 2px 8px; - border-radius: 6px; - font-size: 0.8rem; - } - } - - .close-btn { - color: #fff; - width: 32px; - height: 32px; - line-height: 32px; - } - } - - .modal-body { - padding: 1rem 1.25rem; - max-height: 70vh; - overflow-y: auto; - } - - .detail-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 0.75rem; - - @media (width <= 480px) { - grid-template-columns: 1fr; - } - } - - .detail-item { - display: flex; - flex-direction: column; - gap: 2px; - background: $bg-slate; - padding: 0.5rem 0.75rem; - border-radius: 8px; - border: 1px solid $border-light; - - .detail-label { - font-size: 0.7rem; - text-transform: uppercase; - letter-spacing: 0.04em; - color: $text-muted; - font-weight: 600; - } - - .detail-val { - font-size: 0.84rem; - color: $text-main; - } - - &.full-width { - grid-column: 1 / -1; - } - - &.highlight-amount-box { - background: $primary-light; - border-color: $primary-border; - - .detail-label { - color: #1e40af; - } - - .amount-val { - font-size: 1.25rem; - font-weight: 700; - color: #1e3a8a; - } - } - } - - .status-pill { - display: inline-block; - padding: 2px 8px; - border-radius: 999px; - font-size: 0.72rem; - font-weight: 700; - width: fit-content; - - &.status-unapplied { - background: $success-bg; - color: $success; - border: 1px solid $success-border; - } - } - - .note-box { - background: #fff; - border: 1px solid $border-color; - border-radius: 6px; - padding: 0.5rem 0.65rem; - font-size: 0.8rem; - color: $text-main; - line-height: 1.4; - margin-top: 4px; - white-space: pre-wrap; - } - - .gl-entries-loading, - .gl-entries-empty { - font-size: 0.8rem; - color: $text-muted; - padding: 0.5rem 0; - } - - .gl-entries-table { - width: 100%; - border-collapse: collapse; - margin-top: 4px; - font-size: 0.8rem; - background: #fff; - border: 1px solid $border-color; - border-radius: 6px; - overflow: hidden; - - th { - background: $bg-slate; - color: $text-muted; - font-size: 0.68rem; - text-transform: uppercase; - letter-spacing: 0.04em; - font-weight: 700; - padding: 0.4rem 0.6rem; - border-bottom: 1px solid $border-color; - } - - td { - padding: 0.4rem 0.6rem; - border-bottom: 1px solid $border-light; - color: $text-main; - } - - tr:last-child td { - border-bottom: none; - } - } - - .drcr-pill { - display: inline-block; - padding: 1px 8px; - border-radius: 999px; - font-size: 0.68rem; - font-weight: 700; - - &.drcr-pill--dr { - background: $danger-bg; - color: $danger; - border: 1px solid $danger-border; - } - - &.drcr-pill--cr { - background: $success-bg; - color: $success; - border: 1px solid $success-border; - } - } - - .modal-footer { - display: flex; - justify-content: flex-end; - gap: 0.65rem; - padding: 0.75rem 1.25rem; - background: $bg-slate; - border-top: 1px solid $border-color; - - .modal-action-btn { - mat-icon { - font-size: 18px; - width: 18px; - height: 18px; - margin-right: 4px; - } - } - } -} - -@keyframes modal-scale-in { - from { - opacity: 0; - transform: scale(0.95); - } - - to { - opacity: 1; - transform: scale(1); - } -} - -.ta-left { - text-align: left; -} - -.ta-right { - text-align: right; -} - -.ta-center { - text-align: center; -} - -.font-mono { - font-family: 'Courier New', monospace; -} - -.font-semibold { - font-weight: 600; -} - -.font-accent { - font-family: - system-ui, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - sans-serif; -} - -.font-success { - color: $success !important; -} - -.mt-8 { - margin-top: 8px; -} - -.mt-10 { - margin-top: 10px; -} - -.mt-12 { - margin-top: 12px; -} - -.animate-fade-in { - animation: fade-in 0.2s ease-in-out; -} - -@keyframes fade-in { - from { - opacity: 0; - } - - to { - opacity: 1; - } +.funding-hint { + font-size: 0.7rem; + color: $text-muted; + line-height: 1.3; } diff --git a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.ts b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.ts index 099c1031f..b4b046b49 100644 --- a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.ts +++ b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.ts @@ -6,155 +6,116 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/** Angular Imports */ import { Component, OnInit, inject } from '@angular/core'; -import { UntypedFormGroup, UntypedFormBuilder, Validators, FormsModule } from '@angular/forms'; -import { ActivatedRoute, Router } from '@angular/router'; -import { MatRadioModule } from '@angular/material/radio'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog'; +import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { Subject, of } from 'rxjs'; import { catchError, debounceTime, distinctUntilChanged } from 'rxjs/operators'; -import { of } from 'rxjs'; -/** Custom Services */ import { SharesService } from 'app/shares/shares.service'; import { CashierService } from 'app/cashier/cashier.service'; import { SettingsService } from 'app/settings/settings.service'; import { Dates } from 'app/core/utils/dates'; -import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; +import { ReceiptOption, receiptFromOwn, receiptFromUnattached, receiptGlLabel } from 'app/shares/share-receipt-option'; + +/** Where the money for this tranche comes from. */ +export type FundingSource = 'CASH' | 'SAVINGS'; /** * Apply Additional Shares. * - * A member buying a further tranche of shares, which — like the account's first application — is - * only a request until it is approved. Two things have to be captured that the bare share count - * does not carry: - * - *
    - *
  • the board resolution authorising this particular tranche, which is its own meeting and its - * own number, not the one the account was opened under;
    • - *
  • where the money is coming from, because a tranche nobody has paid for cannot be approved.
    • - *
+ * A member buying a further tranche, which — like the account's first application — is only a + * request until it is approved. Two things have to be captured that the bare share count does not + * carry: the board resolution authorising this particular tranche (its own meeting, its own number, + * not the one the account was opened under), and where the money is coming from, because a tranche + * nobody has paid for cannot be approved. * * Both funding routes converge on the Share Sundry holding account, so approval posts the same * Dr Sundry / Cr Share Capital pair either way: * *
    - *
  • Cash — the member already paid at the counter; the cashier's receipts put the money - * into Sundry at that point. Submitting only reserves those receipts against this tranche. - * More than one can be ticked, because a member often pays in instalments and no single - * receipt covers the tranche. They are checked here rather than at approval, while the member - * is still at the counter to make up any shortfall.
    • + *
  • Cash — the member already paid at the counter and the cashier's receipt put the money + * into Sundry then. Submitting only reserves that receipt against this tranche. One receipt + * funds one tranche; it is checked here rather than at approval, while the member is still at + * the counter to make up any shortfall.
    • *
  • Savings — the member's savings are debited into Sundry on submit, so their balance * drops immediately. Approval then moves it out to share capital.
    • *
+ * + * Deliberately the same screen as the first application's Apply Collection dialog — same numbered + * steps, same receipt list, same voucher search — because it settles the same receipts for the same + * person, and two different designs for that were only ever two things to learn. */ @Component({ selector: 'mifosx-apply-shares', templateUrl: './apply-shares.component.html', styleUrls: ['./apply-shares.component.scss'], + standalone: true, imports: [ - ...STANDALONE_SHARED_IMPORTS, + CommonModule, FormsModule, - MatRadioModule, - MatProgressSpinnerModule, - MatIconModule + MatDialogModule, + MatButtonModule, + MatIconModule, + MatProgressSpinnerModule ] }) export class ApplySharesComponent implements OnInit { - private formBuilder = inject(UntypedFormBuilder); private sharesService = inject(SharesService); private cashierService = inject(CashierService); - private dateUtils = inject(Dates); - private route = inject(ActivatedRoute); - private router = inject(Router); private settingsService = inject(SettingsService); + private dateUtils = inject(Dates); - /** Shares account data. */ - sharesAccountData: any; + public dialogRef = inject(MatDialogRef); + public data = inject<{ + shareAccountId: number; + clientId: number; + accountNo: string; + unitPrice: number; + }>(MAT_DIALOG_DATA); - /** Minimum date allowed. */ - minDate = new Date(2000, 0, 1); - /** Maximum date allowed. */ - maxDate = new Date(); - /** Apply Share Account form. */ - applySharesForm: UntypedFormGroup; - /** Shares Account Id */ - accountId: any; - - /** Submission in flight, so the form cannot be posted twice. */ submitting = false; - /** Anything that stopped the submission, shown above the buttons. */ errorMsg = ''; - /** - * The member's unapplied Share Sundry receipts, and which of them fund this tranche. - * - * Several, because a member often pays one tranche in instalments — ₹600 today, the ₹400 balance - * tomorrow — and neither receipt covers it alone. They are submitted together as one settlement - * rather than sending the member back to the counter for a single combined receipt. - */ - vouchers: any[] = []; - selectedVoucherIds: number[] = []; - loadingVouchers = false; - lookingUpVoucher = false; - voucherError = ''; + // ── The tranche ───────────────────────────────────────────────────────────────────────────── - /** - * Whether the voucher-search popup is open. - * - * The GL Account / Voucher No lookup is for the exception — a receipt the unattributed list and - * this member's own list do not carry — so it sits behind a button rather than on screen whether - * or not anyone needs it, exactly like the receipt-detail popup already does for the same reason. - */ - voucherSearchOpen = false; + /** How many shares this tranche is for. */ + requestedShares: number | null = null; - openVoucherSearch(): void { - this.voucherError = ''; - this.voucherSearchOpen = true; + /** The product's current market price. Read-only: the tranche's value and its GL posting must + * never be able to disagree because somebody typed over the price. */ + unitPrice = 0; + + /** Both as yyyy-MM-dd, the value a native date input reads and writes. */ + requestedDate = ''; + resolutionDate = ''; + resolutionNumber = ''; + + /** Shares x unit price — what this tranche is worth, and what has to be funded. */ + get amount(): number { + return (Number(this.requestedShares) || 0) * this.unitPrice; } - closeVoucherSearch(): void { - this.voucherSearchOpen = false; - this.voucherError = ''; - } + // ── Funding ───────────────────────────────────────────────────────────────────────────────── - /** Voucher / Receipt No shown in the "Find Specific Voucher" box. Mirrors whichever receipt is - * ticked below (see {@link toggleVoucher}) so a tick is visibly confirmed up there too, and - * carries whatever the counter has typed in when they search by hand instead. */ - voucherNo = ''; + funding: FundingSource | null = null; - /** - * Share-collection receipts that are approved but belong to nobody yet. - * - * A receipt paid straight into a GL account names no member of its own — a GL account is nobody's - * account — so it is never attributed automatically, and never filtered by this member's client id - * (the cashier's typed description is free text and can easily be wrong; nothing here is trusted - * to match a member by parsing it). Listing it is not attribution: it only makes the voucher - * findable, so a counter that tagged a receipt "Share Collection" moments ago is not told there is - * nothing to fund this tranche with. Attaching it below is still a deliberate click against the - * member on screen. - */ - unattributed: any[] = []; + /** Every Share Collection receipt that can fund this tranche, from both server lists, in one pool. */ + available: ReceiptOption[] = []; + loadingReceipts = false; - /** GL account the deposit was posted to — required, and always picked by hand. Never resolved - * from a share product's accounting setup, so a broken or missing product mapping can never - * make a genuine voucher unreachable. */ - glAccountNo = ''; - glAccounts: any[] = []; - loadingGlAccounts = true; + /** The one receipt funding this tranche. One receipt, one tranche. */ + receipt: ReceiptOption | null = null; - /** Currently selected voucher for viewing in the detail popup. */ - viewingVoucherDetail: any = null; - - /** The receipt's own real Dr/Cr GL legs, fetched fresh per voucher — never the GL Account - * dropdown above (that is just what the by-voucher search box is currently set to, which can - * name a completely different account than the one this specific receipt actually sits in). */ - voucherGlEntries: { glCode: string; accountName: string; drCr: string; amount: number }[] = []; - loadingGlEntries = false; + /** Key of the receipt currently being attached to this member, so only its own row shows a spinner. */ + attaching: string | null = null; /** What the member's savings can cover, for the savings route. */ - savingsEligibility: { + savings: { eligible: boolean; reason: string | null; savingsAccountNo: string | null; @@ -162,314 +123,136 @@ export class ApplySharesComponent implements OnInit { } | null = null; checkingSavings = false; - constructor() { - this.accountId = this.route.parent.snapshot.params['shareAccountId']; - this.route.data.subscribe((data: { shareAccountActionData: any }) => { - this.sharesAccountData = data.shareAccountActionData; + /** Re-checks the savings verdict as the share count settles, rather than on every keystroke of + * "1000" — which asks four times and lets the answers land out of order. */ + private sharesChanged = new Subject(); + + ngOnInit(): void { + this.unitPrice = Number(this.data.unitPrice) || 0; + // Opens on the business date rather than blank: a tranche is recorded the day it is taken, and + // asking a clerk to type that in is asking them to retype what the system already knows. + this.requestedDate = this.isoOf(this.settingsService.businessDate); + + this.sharesChanged.pipe(debounceTime(400), distinctUntilChanged()).subscribe(() => { + if (this.funding === 'SAVINGS') { + this.checkSavings(); + } }); - } - - ngOnInit() { - this.maxDate = this.settingsService.businessDate; - this.createApplySharesAccountForm(); - this.applySharesForm.get('unitPrice').patchValue(this.sharesAccountData.currentMarketPrice || ''); - this.applySharesForm.get('amount').patchValue(this.amount || ''); + // Needed only by the voucher search, which is the exception path -- loaded quietly in the + // background so opening that popup never waits on a request. this.cashierService .getShareAdvanceGlAccounts() .pipe(catchError(() => of(null))) .subscribe((res: any) => { this.glAccounts = res?.glAccounts || []; - // Auto-picked only when there is exactly one live candidate -- the backend already narrowed - // this list to accounts that actually hold an eligible receipt today, so a single option is - // unambiguous. Two or more still means the counter chooses by hand: picking "whichever - // sorts first" among several real candidates is the same blind guess that used to land on - // Cash at Vault, just with a shorter, filtered list to guess from. - if (this.glAccounts.length === 1 && !this.glAccountNo) { - this.glAccountNo = this.glAccounts[0].gl_code; - } this.loadingGlAccounts = false; }); } - setPaymentMode(mode: string): void { - this.applySharesForm.get('paymentMode')?.setValue(mode); + onSharesChange(): void { + // The verdict is cleared the moment the amount changes rather than when the re-check returns, so + // a stale "can cover it" is never on screen beside a larger amount. The chosen receipt stays -- + // it is the receipt the member actually holds, and the shortfall line below re-reads against the + // new amount on its own. + this.savings = null; + this.errorMsg = ''; + this.sharesChanged.next(Number(this.requestedShares) || 0); } - openVoucherDetail(voucher: any, event?: Event): void { - if (event) { - event.stopPropagation(); + chooseFunding(source: FundingSource): void { + if (this.funding === source) { + return; + } + this.funding = source; + this.receipt = null; + this.savings = null; + this.errorMsg = ''; + if (source === 'SAVINGS') { + this.checkSavings(); + } else if (!this.available.length) { + this.loadReceipts(); } - this.viewingVoucherDetail = voucher; - this.voucherGlEntries = []; - this.loadingGlEntries = true; - this.cashierService - .getShareAdvanceGlEntries(voucher.id) - .pipe(catchError(() => of(null))) - .subscribe((res: any) => { - this.voucherGlEntries = res?.entries || []; - this.loadingGlEntries = false; - }); - } - - closeVoucherDetail(): void { - this.viewingVoucherDetail = null; - this.voucherGlEntries = []; } /** - * Creates the apply shares form. + * Loads every Share Collection receipt that could fund this tranche — the member's own, and the + * ones still belonging to nobody — as one list. * - * The request date opens on the business date rather than blank: an additional-share request is - * recorded the day it is taken, and a clerk who has to fill that in by hand is being asked to - * retype what the system already knows. - */ - createApplySharesAccountForm() { - this.applySharesForm = this.formBuilder.group({ - requestedDate: [ - this.settingsService.businessDate, - Validators.required - ], - requestedShares: [ - '', - Validators.required - ], - unitPrice: [{ value: '', disabled: true }], - // Disabled, not readonly: the amount is derived from shares x price and must never be a - // figure somebody typed, or the tranche's value and its GL posting could disagree. - amount: [{ value: '', disabled: true }], - resolutionNumber: [ - '', - Validators.required - ], - resolutionDate: [ - '', - Validators.required - ], - paymentMode: [ - '', - Validators.required - ] - }); - - // Recompute as the share count is typed, so the clerk can read the amount back to the member - // before committing to a funding route. - this.applySharesForm.get('requestedShares').valueChanges.subscribe(() => { - this.applySharesForm.get('amount').patchValue(this.amount || ''); - // A savings verdict is cleared the moment the amount changes rather than when the re-check - // returns, so a stale "can cover it" is never on screen beside a larger amount. The ticked - // vouchers stay: they are the receipts the member actually holds, and the running total below - // shows against the new amount whether they still cover it. - this.voucherError = ''; - this.savingsEligibility = null; - }); - - // Debounced separately from the clearing above: the check is a server round-trip, and firing it - // on every keystroke of "1000" asks four times and lets the answers land out of order. - this.applySharesForm - .get('requestedShares') - .valueChanges.pipe(debounceTime(400), distinctUntilChanged()) - .subscribe(() => { - if (this.paymentMode === 'SAVINGS') { - this.checkSavings(); - } - }); - - this.applySharesForm.get('paymentMode').valueChanges.subscribe((mode: string) => { - this.vouchers = []; - this.selectedVoucherIds = []; - this.voucherError = ''; - this.voucherNo = ''; - this.errorMsg = ''; - this.savingsEligibility = null; - if (mode === 'SAVINGS') { - this.checkSavings(); - } else if (mode === 'CASH') { - this.loadVouchers(); - } - }); - } - - /** Shares x unit price — what this tranche is worth, and what has to be funded. */ - get amount(): number { - const shares = Number(this.applySharesForm?.get('requestedShares')?.value) || 0; - const price = Number(this.applySharesForm?.get('unitPrice')?.value) || 0; - return shares * price; - } - - get paymentMode(): string { - return this.applySharesForm?.get('paymentMode')?.value || ''; - } - - /** - * Loads the member's unapplied Share Sundry receipts so they can be ticked off. - * - * Deliberately nothing ticked, not even when a single receipt is listed — which receipt funds the - * tranche is a choice the person applying it makes, not one they inherit from a pre-ticked radio + * Nothing is pre-selected, not even when a single receipt is listed: which receipt funds the + * tranche is a choice the person applying it makes, not one they inherit from a pre-ticked row * they never looked at. */ - private loadVouchers(): void { - this.loadingVouchers = true; + private loadReceipts(): void { + this.loadingReceipts = true; this.cashierService - .getUnappliedShareAdvances(this.sharesAccountData.clientId) + .getShareCollectionReceipts(this.data.clientId) .pipe( catchError((err: any) => { - this.voucherError = this.readError(err, 'Could not load the member’s receipts.'); - this.loadingVouchers = false; + this.errorMsg = this.readError(err, 'Could not load the available receipts.'); + this.loadingReceipts = false; return of(null); }) ) .subscribe((res: any) => { - this.loadingVouchers = false; + this.loadingReceipts = false; if (!res) { return; } - this.vouchers = res.unappliedCollections || []; - }); - - this.cashierService - .getUnattributedShareCollections() - .pipe(catchError(() => of(null))) - .subscribe((res: any) => (this.unattributed = res?.rows || [])); - } - - /** - * Attaches one of the unattributed share-collection receipts to this member's tranche. - * - * Goes straight to {@link resolveVoucher} rather than through {@link lookupVoucher}: a row already - * sitting in this list is either a fresh cashier deposit (which does carry its own GL account) or - * an existing, already-adopted {@code m_share_advance_collection} row (the "linked to …" ones), - * whose GL account can genuinely come back blank — its subquery reads the posting the ORIGINAL - * adoption made, which a clerk-disbursement-funded receipt does not always leave behind cleanly. - * Either way the backend needs no GL account to resolve a voucher it can already find by number, so - * a blank one here must never block the click the way it rightly blocks a hand-typed search with - * nothing chosen yet. - */ - attachUnattributedVoucher(row: any): void { - if (this.lookingUpVoucher || this.submitting) { - return; - } - this.resolveVoucher(row.voucherNo, row.glAccountNo || ''); - } - - isVoucherSelected(id: number): boolean { - return this.selectedVoucherIds.includes(id); - } - - /** - * Whether an unattributed-list row is already linked to the member this screen belongs to. - * - * Such a row also appears, pre-loaded and ready to tick, in the Vouchers/Receipts table below — - * that is not a bug to hide, it is the same receipt reachable two ways. This only flags it so the - * counter understands why it shows up here too, rather than reading it as an unrelated stray - * voucher that happens to look identical. - */ - isOwnClientVoucher(u: any): boolean { - return u?.linkedClientId != null && Number(u.linkedClientId) === Number(this.sharesAccountData.clientId); - } - - /** - * One receipt funds one tranche — no combining instalments here (unlike the first-application - * Apply Collection dialog, which still allows several). Picking a different receipt replaces the - * current one rather than adding to it, so {@link selectedVoucherIds} never holds more than one id. - */ - toggleVoucher(id: number): void { - const wasSelected = this.isVoucherSelected(id); - this.selectedVoucherIds = wasSelected ? [] : [id]; - this.voucherError = ''; - if (wasSelected) { - this.voucherNo = ''; - return; - } - // The GL Account and Find Specific Voucher fields above follow whichever receipt is ticked -- - // their own actual GL account and voucher number (see gl_code / voucher_no on the row), not left - // showing an unrelated value or blank once a receipt that plainly has them is already chosen. - const voucher = this.vouchers.find((v) => v.id === id); - if (voucher?.gl_code) { - this.glAccountNo = voucher.gl_code; - } - this.voucherNo = voucher?.voucher_no || voucher?.receipt_no || ''; - } - - /** - * What the ticked receipts come to. - * - * Shown live, because the submission only goes through when the total covers the tranche, and - * adding the rows up by eye is exactly what leads to a rejected submission. - */ - get selectedVoucherTotal(): number { - return this.vouchers.filter((v) => this.isVoucherSelected(v.id)).reduce((sum, v) => sum + Number(v.amount || 0), 0); - } - - /** - * Resolves a voucher number the member quotes and adds it to the list. - * - * Kept alongside the tick list rather than replacing it: the member usually quotes the number on - * the slip in their hand, which is faster than finding it among their receipts. The lookup is not - * restricted to this member — any receipt found this way can be attached here, whichever member it - * was originally recorded against. - */ - lookupVoucher(): void { - const trimmed = this.voucherNo.trim(); - const glAccountNo = this.glAccountNo.trim(); - // A hand-typed search genuinely needs both fields: an empty GL account here means nothing has - // been chosen yet, not that one isn't needed — unlike {@link attachUnattributedVoucher}, which - // already knows exactly which receipt it means and never has this ambiguity. - if (!trimmed || !glAccountNo || this.lookingUpVoucher) { - return; - } - this.resolveVoucher(trimmed, glAccountNo); - } - - /** - * Resolves a voucher number (with whatever GL account, if any, is known for it) and adds the - * receipt it finds to the list, selected. - * - * Shared by {@link lookupVoucher} (a hand-typed search, where both fields are guaranteed non-blank - * by the Find button's own disabled state) and {@link attachUnattributedVoucher} (a click on a row - * already on screen, whose GL account can legitimately be blank) — the actual lookup and its - * bookkeeping afterwards are identical either way. - */ - private resolveVoucher(voucherNo: string, glAccountNo: string): void { - this.lookingUpVoucher = true; - this.voucherError = ''; - - this.cashierService - .getShareAdvanceByVoucher(voucherNo, glAccountNo, this.sharesAccountData.clientId) - .pipe( - catchError((err: any) => { - this.voucherError = this.readError(err, `Voucher ${voucherNo} could not be found.`); - this.lookingUpVoucher = false; - return of(null); - }) - ) - .subscribe((res: any) => { - this.lookingUpVoucher = false; - if (!res) { - return; - } - // No client-match check here by deliberate choice: any receipt can be attached to any - // share account, regardless of which member it was originally recorded against. - // Replaces the selection rather than adding to it — one receipt funds one tranche here, so - // finding a voucher by number is a different way to pick THE receipt, not a second one. - this.vouchers = [ - res, - ...this.vouchers.filter((v) => v.id !== res.id) + this.available = [ + ...(res.own || []).map((row: any) => receiptFromOwn(row)), + ...(res.rows || []).map((row: any) => receiptFromUnattached(row)) ]; - this.selectedVoucherIds = [res.id]; - this.voucherNo = res.voucher_no || res.receipt_no || voucherNo; - if (res.gl_code) { - this.glAccountNo = res.gl_code; - } - // Once attached it belongs to this member, so it leaves the unattributed list rather than - // sitting there inviting a second, conflicting attachment. - this.unattributed = this.unattributed.filter((u) => u.voucherNo !== voucherNo); - // Found it -- the popup has done its job, so it closes rather than sitting open over a - // receipt that now already shows, ticked, in the table behind it. - this.voucherSearchOpen = false; }); } + /** + * Chooses the receipt funding this tranche, attaching it to this member first if it is still only + * a voucher number. + * + * A receipt paid straight into a GL account names no member — a GL account is nobody's account — + * so it has to be attributed before it can fund anything. That attribution is exactly the + * by-voucher lookup a hand-typed number already runs; doing it on the pick makes it one deliberate + * choice against a member on screen, rather than an Attach in one table and a tick in another. + */ + pick(option: ReceiptOption): void { + if (this.attaching || this.submitting) { + return; + } + if (this.receipt?.key === option.key) { + this.receipt = null; + return; + } + if (option.collectionId !== null) { + this.receipt = option; + return; + } + + this.attaching = option.key; + this.errorMsg = ''; + this.findVoucher(option.voucherNo, option.glAccountNo).subscribe((res) => { + this.attaching = null; + if (!res) { + return; + } + // Attached now, so it takes its real row's place in the pool -- picking it again must never + // run the attach a second time. + const attached = receiptFromOwn(res); + this.available = this.available.map((entry) => (entry.key === option.key ? attached : entry)); + this.receipt = attached; + }); + } + + clearReceipt(): void { + this.receipt = null; + } + + /** What the chosen receipt is still missing, zero once it covers the tranche. */ + get shortfall(): number { + const short = this.amount - Number(this.receipt?.amount || 0); + return this.receipt && short > 0 ? short : 0; + } + /** * Whether the member's savings can cover this tranche. * @@ -478,104 +261,215 @@ export class ApplySharesComponent implements OnInit { * submission will be valued at. Deciding it in the browser would let the two drift apart. */ private checkSavings(): void { - const shares = Number(this.applySharesForm.get('requestedShares').value) || 0; + const shares = Number(this.requestedShares) || 0; this.checkingSavings = true; this.sharesService - .getAdditionalSharesSavingsEligibility(this.accountId, shares) + .getAdditionalSharesSavingsEligibility(String(this.data.shareAccountId), shares) .pipe(catchError(() => of(null))) .subscribe((res: any) => { this.checkingSavings = false; - if (!res) { - this.savingsEligibility = { - eligible: false, - reason: 'Could not check the savings account linked to this share account.', - savingsAccountNo: null, - savingsBalance: null - }; - return; - } - this.savingsEligibility = { - eligible: !!res.eligible, - reason: res.reason ?? null, - savingsAccountNo: res.savingsAccountNo ?? null, - savingsBalance: res.savingsBalance == null ? null : Number(res.savingsBalance) - }; + this.savings = res + ? { + eligible: !!res.eligible, + reason: res.reason ?? null, + savingsAccountNo: res.savingsAccountNo ?? null, + savingsBalance: res.savingsBalance == null ? null : Number(res.savingsBalance) + } + : { + eligible: false, + reason: 'Could not check the savings account linked to this share account.', + savingsAccountNo: null, + savingsBalance: null + }; }); } /** - * Whether the chosen funding route is ready — receipts that between them cover the tranche, or - * savings that can cover it. + * Whether the chosen funding route is ready — a receipt that covers the tranche, or savings that + * can. * - * The total is checked here rather than only on submit, so a part-paid tranche is visibly short - * at the counter instead of being refused after the member has left. + * Checked here rather than only on submit, so a part-paid tranche is visibly short at the counter + * instead of being refused after the member has left. */ get fundingReady(): boolean { - if (this.paymentMode === 'CASH') { - return this.selectedVoucherIds.length > 0 && this.selectedVoucherTotal >= this.amount; + if (this.funding === 'CASH') { + return !!this.receipt && this.shortfall === 0; } - if (this.paymentMode === 'SAVINGS') { - return !!this.savingsEligibility?.eligible; + if (this.funding === 'SAVINGS') { + return !!this.savings?.eligible; } return false; } - /** The shortfall to tell the member about, or zero when the ticked receipts cover the tranche. */ - get voucherShortfall(): number { - const short = this.amount - this.selectedVoucherTotal; - return short > 0 ? short : 0; + get canSubmit(): boolean { + return ( + this.amount > 0 && + !!this.requestedDate && + !!this.resolutionNumber.trim() && + !!this.resolutionDate && + this.fundingReady && + !this.submitting + ); } - get canSubmit(): boolean { - return this.applySharesForm.valid && this.amount > 0 && this.fundingReady && !this.submitting; + // ── Voucher search, for a receipt the list does not carry ─────────────────────────────────── + + searchOpen = false; + searchVoucherNo = ''; + searchGlAccountNo = ''; + searching = false; + + /** GL accounts, for the search only — a voucher is found by number *and* the account it sits in. */ + glAccounts: any[] = []; + loadingGlAccounts = true; + + openSearch(): void { + this.searchOpen = true; + this.searchVoucherNo = ''; + this.searchGlAccountNo = this.glAccounts.length === 1 ? this.glAccounts[0].gl_code : ''; + this.errorMsg = ''; } + closeSearch(): void { + this.searchOpen = false; + this.errorMsg = ''; + } + + runSearch(): void { + const voucher = this.searchVoucherNo.trim(); + const glAccountNo = this.searchGlAccountNo.trim(); + // Both fields are genuinely needed: a blank GL account here means nothing has been chosen yet, + // not that none is required. + if (!voucher || !glAccountNo || this.searching) { + return; + } + this.searching = true; + this.errorMsg = ''; + this.findVoucher(voucher, glAccountNo).subscribe((res) => { + this.searching = false; + if (!res) { + return; + } + const found = receiptFromOwn(res); + this.available = [ + found, + ...this.available.filter((entry) => entry.key !== found.key && entry.voucherNo !== found.voucherNo) + ]; + this.receipt = found; + this.searchOpen = false; + }); + } + + private findVoucher(voucher: string, glAccountNo: string) { + // No client-match check: any receipt can fund any share account, regardless of which member it + // was first recorded against. + return this.cashierService.getShareAdvanceByVoucher(voucher, glAccountNo, this.data.clientId).pipe( + catchError((err: any) => { + this.errorMsg = this.readError(err, `Voucher ${voucher} could not be found in that GL account.`); + return of(null); + }) + ); + } + + // ── A receipt's own GL entries ────────────────────────────────────────────────────────────── + + viewing: ReceiptOption | null = null; + + /** The receipt's own real Dr/Cr legs, read under its own transaction id — never the GL account + * picked in the search box, which is unrelated screen state naming a different account. */ + viewingGlEntries: any[] | null = null; + loadingGlEntries = false; + + openDetail(option: ReceiptOption, event: Event): void { + event.stopPropagation(); + if (option.collectionId === null) { + return; + } + this.viewing = option; + this.viewingGlEntries = null; + this.loadingGlEntries = true; + this.cashierService + .getShareAdvanceGlEntries(option.collectionId) + .pipe(catchError(() => of(null))) + .subscribe((res: any) => { + this.viewingGlEntries = res?.entries || []; + this.loadingGlEntries = false; + }); + } + + closeDetail(): void { + this.viewing = null; + this.viewingGlEntries = null; + } + + // ── Submission ────────────────────────────────────────────────────────────────────────────── + /** * Records the request. Nothing is issued here — the tranche sits pending until it is approved, * which is what moves the money out of Sundry into share capital. */ - submit() { + submit(): void { if (!this.canSubmit) { return; } this.submitting = true; this.errorMsg = ''; - const formValue = this.applySharesForm.value; - const locale = this.settingsService.language.code; const dateFormat = this.settingsService.dateFormat; - - const data: any = { - requestedShares: formValue.requestedShares, - requestedDate: this.dateUtils.formatDate(formValue.requestedDate, dateFormat), - unitPrice: this.applySharesForm.get('unitPrice').value, - resolutionNumber: formValue.resolutionNumber, - meetingDate: this.dateUtils.formatDate(formValue.resolutionDate, dateFormat), - fundingSource: formValue.paymentMode, + const payload: any = { + requestedShares: this.requestedShares, + requestedDate: this.dateUtils.formatDate(this.dateOf(this.requestedDate), dateFormat), + unitPrice: this.unitPrice, + resolutionNumber: this.resolutionNumber.trim(), + meetingDate: this.dateUtils.formatDate(this.dateOf(this.resolutionDate), dateFormat), + fundingSource: this.funding, dateFormat, - locale + locale: this.settingsService.language.code }; - if (formValue.paymentMode === 'CASH') { - // First receipt leads, the rest ride along; the server settles them as one funding. - const [ - leadId, - ...additionalCollectionIds - ] = this.selectedVoucherIds; - data.advanceCollectionId = leadId; - if (additionalCollectionIds.length > 0) { - data.additionalCollectionIds = additionalCollectionIds; - } + if (this.funding === 'CASH' && this.receipt) { + payload.advanceCollectionId = this.receipt.collectionId; } - this.sharesService.executeSharesAccountCommand(this.accountId, 'applyadditionalshares', data).subscribe({ - next: () => { - this.router.navigate(['../../'], { relativeTo: this.route }); - }, - error: (err: any) => { - this.submitting = false; - this.errorMsg = this.readError(err, 'The additional-share request could not be submitted.'); - } - }); + this.sharesService + .executeSharesAccountCommand(String(this.data.shareAccountId), 'applyadditionalshares', payload) + .subscribe({ + next: (res: any) => { + this.dialogRef.close(res || true); + }, + error: (err: any) => { + this.submitting = false; + this.errorMsg = this.readError(err, 'The additional-share request could not be submitted.'); + } + }); + } + + // ── Helpers ───────────────────────────────────────────────────────────────────────────────── + + /** The GL account a receipt sits in, named from the list the voucher search already loaded. */ + glLabel(option: ReceiptOption): string { + return receiptGlLabel(option, this.glAccounts); + } + + /** A Date as the yyyy-MM-dd a native date input reads, in local time. */ + private isoOf(date: Date): string { + const local = new Date(date); + return `${local.getFullYear()}-${String(local.getMonth() + 1).padStart(2, '0')}-${String(local.getDate()).padStart(2, '0')}`; + } + + /** + * A yyyy-MM-dd back into a local Date. + * + * Built from the parts rather than {@code new Date(iso)}, which reads the string as UTC midnight + * and so lands on the previous day for anyone west of Greenwich — a request dated a day early is + * not something a date picker should be able to produce. + */ + private dateOf(iso: string): Date { + const [ + year, + month, + day + ] = iso.split('-').map(Number); + return new Date(year, month - 1, day); } private readError(err: any, fallback: string): string { diff --git a/src/app/shares/shares-account-actions/shares-account-actions.component.html b/src/app/shares/shares-account-actions/shares-account-actions.component.html index cd62cb4e5..bad4bae7c 100644 --- a/src/app/shares/shares-account-actions/shares-account-actions.component.html +++ b/src/app/shares/shares-account-actions/shares-account-actions.component.html @@ -21,9 +21,6 @@ @if (actions['Undo Approval']) { } -@if (actions['Apply Additional Shares']) { - -} @if (actions['Redeem Shares']) { } diff --git a/src/app/shares/shares-account-actions/shares-account-actions.component.ts b/src/app/shares/shares-account-actions/shares-account-actions.component.ts index ac6457cf2..5b64c4c0b 100644 --- a/src/app/shares/shares-account-actions/shares-account-actions.component.ts +++ b/src/app/shares/shares-account-actions/shares-account-actions.component.ts @@ -17,7 +17,6 @@ import { RejectSharesAccountComponent } from './reject-shares-account/reject-sha import { CloseSharesAccountComponent } from './close-shares-account/close-shares-account.component'; import { ActivateSharesAccountComponent } from './activate-shares-account/activate-shares-account.component'; import { UndoApprovalSharesAccountComponent } from './undo-approval-shares-account/undo-approval-shares-account.component'; -import { ApplySharesComponent } from './apply-shares/apply-shares.component'; import { RedeemSharesComponent } from './redeem-shares/redeem-shares.component'; import { ApproveSharesComponent } from './approve-shares/approve-shares.component'; import { RejectSharesComponent } from './reject-shares/reject-shares.component'; @@ -37,7 +36,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; CloseSharesAccountComponent, ActivateSharesAccountComponent, UndoApprovalSharesAccountComponent, - ApplySharesComponent, RedeemSharesComponent, ApproveSharesComponent, RejectSharesComponent @@ -55,7 +53,6 @@ export class SharesAccountActionsComponent { Close: boolean; Activate: boolean; 'Undo Approval': boolean; - 'Apply Additional Shares': boolean; 'Redeem Shares': boolean; 'Approve Additional Shares': boolean; 'Reject Additional Shares': boolean; @@ -65,7 +62,6 @@ export class SharesAccountActionsComponent { Close: false, Activate: false, 'Undo Approval': false, - 'Apply Additional Shares': false, 'Redeem Shares': false, 'Approve Additional Shares': false, 'Reject Additional Shares': false diff --git a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.html b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.html index 9e35e3841..4a91e4673 100644 --- a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.html +++ b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.html @@ -7,408 +7,270 @@ -->
- -
-
+
+
account_balance_wallet
-
-

Apply Share Advance Collection

+
+

Apply Share Collection

- Settling share account {{ data.accountNo }} + Share account {{ data.accountNo }}

-
- -
- - - Tick the receipts that make up this payment to settle share account {{ data.accountNo }}. Multiple receipts can be selected for instalment payments. Click - visibility to view full receipt popup details. - -
- - - @if (requirement) { -
-
- calculate - Tranche Requirement -
- -
-
- Shares Value - {{ requirement.shareAmount | number: '1.2-2' }} + @if (loading) { +
+ + Loading receipts… +
+ } @else { + @if (requirement) { +
+ +
+
+ Share Collection + Required: {{ requirement.shareAmount | number: '1.2-2' }} +
+
+ + {{ shareReceipt ? (shareReceipt.amount | number: '1.2-2') : '—' }} + + @if (shareShortfall > 0) { + -{{ shareShortfall | number: '1.2-2' }} + } @else if (shareReceipt && shareShortfall === 0) { + ✓ Covered + } +
- @if (requirement.chargeAmount > 0) { - + -
- Entry Fee - {{ requirement.chargeAmount | number: '1.2-2' }} + + @if (hasFee) { +
+
+ Entry Fee + Required: {{ requirement.chargeAmount | number: '1.2-2' }} +
+
+ + {{ chargeReceipt ? (chargeReceipt.amount | number: '1.2-2') : '—' }} + + @if (feeShortfall > 0) { + -{{ feeShortfall | number: '1.2-2' }} + } @else if (chargeReceipt && feeShortfall === 0) { + ✓ Covered + } +
} - = -
- Total Required - {{ requirement.required | number: '1.2-2' }} -
-
- - @if (selectedIds.length > 0) { -
- @if (shortfall === 0) { - - check_circle Share receipts fully covered + +
+ Total Payable +
+ {{ requirement.required | number: '1.2-2' }} + → + + {{ + (shareReceipt?.amount || 0) + (hasFee && chargeReceipt ? chargeReceipt.amount || 0 : 0) + | number: '1.2-2' + }} - } @else { - - warning {{ selectedTotal | number: '1.2-2' }} of - {{ shareRequired | number: '1.2-2' }} collected — {{ shortfall | number: '1.2-2' }} short + + {{ canApply ? '✓ Ready' : 'Pending' }} - } -
- } -
- } - - -
- -
- - - @if (requirement && requirement.chargeAmount > 0) { -
-
- assignment_turned_in - Entry Fee Receipt — Verification Only (No GL Entry) -
- - @if (chargeReceipt) { -
- {{ chargeShortfall > 0 ? 'error_outline' : 'check_circle' }} - - {{ chargeReceipt.voucher_no || chargeReceipt.receipt_no }} - — {{ chargeReceipt.amount | number: '1.2-2' }} - @if (chargeShortfall > 0) { - (short by {{ chargeShortfall | number: '1.2-2' }}) - } @else { - — Entry fee verified - } - - -
- } @else { -
-
- - -
- -
- -
- - -
-
-
-
- Leave this blank if the entry fee was already paid as part of the main share receipt above. -
- } -
- } - - - @if (unattributed.length) { -
-
- person_add - Unattached Share Collection Receipts — Attach to {{ data.accountNo }} -
-
- - - - - - - - - - - - - @for (u of unattributed; track u.id) { - - - - - - - - - } - -
Voucher NoDateDeposited ToDescriptionAmountAction
- {{ u.voucherNo }} - @if (isOwnClientVoucher(u)) { - This member's receipt - } - {{ u.txnDate }}{{ u.glAccountNo }} — {{ u.glAccountName }}{{ u.description || '—' }}{{ u.amount | number: '1.2-2' }} - -
-
-
- } - - @if (errorMsg) { -
- error_outline - {{ errorMsg }} -
- } - - -
- @if (loading) { -
- - Loading member receipts… -
- } @else if (receipts.length === 0) { -
- receipt_long -
- No unapplied receipt found for this member today. -

- If cash was taken on an earlier day, enter that voucher number above. Otherwise collect cash first at - Cashier › Transaction Entry into Share Sundry GL. -

-
-
- } @else { -
- -
-
- receipt - Member Unapplied Receipts - {{ receipts.length }} -
- - @if (receipts.length > 1) { -
- -
- } -
- - -
- - - - - - - - - - - - - - @for (r of receipts; track r.id) { - - - - - - - - - - } - -
- @if (receipts.length > 1) { - - } @else { - # - } - Voucher / Receipt NoDateDescriptionCollected ByAmountDetail
- - - {{ r.voucher_no || r.receipt_no }} - {{ r.collection_date }}{{ r.note || 'Share Collection' }} - - person_outline - {{ r.collected_by_name || 'System' }} - - - {{ r.amount | number: '1.2-2' }} - - -
-
- - -
-
- - {{ selectedIds.length }} of {{ receipts.length }} receipts selected - - -
- Selected Total: - {{ selectedTotal | number: '1.2-2' }} - / - Required {{ shareRequired | number: '1.2-2' }} -
-
- -
- @if (selectedIds.length === 0) { - info Tick at least 1 receipt - } @else if (shortfall > 0) { - - warning Shortfall {{ shortfall | number: '1.2-2' }} - - } @else { - check_circle Fully Covered - }
} -
+ + +
+
+ 1 +
+

Share Collection Receipt

+

Posts Dr Sundry / Cr Share Capital.

+
+ +
+ + @if (shareReceipt) { +
+
+ {{ shareShortfall > 0 ? 'warning' : 'check_circle' }} +
+
+ {{ shareReceipt.voucherNo }} + {{ glLabel(shareReceipt) }} +
+ {{ shareReceipt.amount | number: '1.2-2' }} + +
+ @if (shareShortfall > 0) { +

+ Short by {{ shareShortfall | number: '1.2-2' }} — this receipt does not cover + {{ shareRequired | number: '1.2-2' }}. +

+ } @else if (requirement) { +

Covers the {{ shareRequired | number: '1.2-2' }} payable.

+ } + } @else { + @if (optionsFor('share').length) { +
    + @for (option of optionsFor('share'); track option.key) { +
  • + +
    + {{ option.voucherNo }} + {{ option.date }} · {{ glLabel(option) }} + @if (option.description) { + {{ option.description }} + } +
    + {{ option.amount | number: '1.2-2' }} + @if (attaching === option.key) { + + } @else if (option.collectionId !== null) { + + } +
    • + } +
+ } @else { +

+ No Share Collection receipt is waiting. Collect the cash at Cashier › Transaction Entry with + entry type Share Collection, or find an earlier voucher by number. +

+ } + } +
+ + + @if (hasFee) { +
+
+ 2 +
+

Entry Fee Receipt

+

Verification only — no GL entry is posted for it.

+
+ +
+ + @if (chargeReceipt) { +
+
+ {{ feeShortfall > 0 ? 'warning' : 'check_circle' }} +
+
+ {{ chargeReceipt.voucherNo }} + {{ glLabel(chargeReceipt) }} +
+ {{ chargeReceipt.amount | number: '1.2-2' }} + +
+ @if (feeShortfall > 0) { +

+ Short by {{ feeShortfall | number: '1.2-2' }} — the fee is + {{ requirement!.chargeAmount | number: '1.2-2' }}. +

+ } @else { +

Entry fee verified.

+ } + } @else { + @if (optionsFor('fee').length) { +
    + @for (option of optionsFor('fee'); track option.key) { +
  • + +
    + {{ option.voucherNo }} + {{ option.date }} · {{ glLabel(option) }} + @if (option.description) { + {{ option.description }} + } +
    + {{ option.amount | number: '1.2-2' }} + @if (attaching === option.key) { + + } @else if (option.collectionId !== null) { + + } +
    • + } +
+ } @else { +

No separate fee receipt is waiting — find one by voucher number.

+ } +

+ Leave this empty if the fee was already collected inside the share receipt above. +

+ } +
+ } + + @if (errorMsg) { +
+ error_outline + {{ errorMsg }} +
+ } + } - - - - +
- -@if (viewingReceiptDetail) { -
-
-
-
- receipt_long - Receipt Details - {{ - viewingReceiptDetail.voucher_no || viewingReceiptDetail.receipt_no - }} -
- -
+ -
-
-
- Voucher / Receipt No - {{ - viewingReceiptDetail.voucher_no || viewingReceiptDetail.receipt_no || '—' - }} -
- -
- Receipt Reference - {{ viewingReceiptDetail.receipt_no || '—' }} -
- -
- Client ID - {{ viewingReceiptDetail.client_id || data?.clientId || '—' }} -
- -
- Collection Date - {{ viewingReceiptDetail.collection_date || '—' }} -
- -
- Status - {{ viewingReceiptDetail.status || 'UNAPPLIED' }} -
- -
- Collected By - {{ viewingReceiptDetail.collected_by_name || 'System' }} -
- -
- GL Entries — What This Receipt Actually Posted - @if (loadingReceiptGlEntries) { -
- - Loading the ledger entries… -
- } @else if (!viewingReceiptGlEntries?.length) { -
No posted GL entries found for this receipt yet.
- } @else { - - - - - - - - - - @for (e of viewingReceiptGlEntries; track e.glCode) { - - - - - - } - -
GL AccountDr / CrAmount
{{ e.glCode }} — {{ e.accountName }} - {{ - e.drCr - }} - {{ e.amount | number: '1.2-2' }}
+
+ -
- Receipt Amount - {{ viewingReceiptDetail.amount | number: '1.2-2' }} -
- -
- Full Note / Description -
- {{ viewingReceiptDetail.note || 'Share collection deposit to Share Sundry GL' }} -
-
-
-
- -
- - - -
-
-
-} - - -@if (voucherSearchOpen) { -
-
-
-
- search - Search a Voucher -
- -
- -
-

- For a receipt not already listed above — one taken on an earlier day, or a slip the member is holding. -

- -
-
- - -
- -
- -
- - -
-
-
+ @if (errorMsg) { -
+
error_outline {{ errorMsg }}
}
-
- +
+ + +
+
+
+} + + +@if (viewing) { +
+
+
+

+ Voucher {{ viewing.voucherNo }} +

+ +
+ +
+
+
+
Date
+
{{ viewing.date }}
+
+
+
Amount
+
{{ viewing.amount | number: '1.2-2' }}
+
+
+
GL Account
+
{{ glLabel(viewing) }}
+
+ @if (viewing.cashierName) { +
+
Collected By
+
{{ viewing.cashierName }}
+
+ } + @if (viewing.description) { +
+
Description
+
{{ viewing.description }}
+
+ } +
+ +

Journal Entries

+ @if (loadingGlEntries) { +
+ } @else if (viewingGlEntries?.length) { + + + + + + + + + + @for (entry of viewingGlEntries; track $index) { + + + + + + } + +
AccountDebitCredit
+ {{ entry.glCode }} {{ entry.accountName }} + {{ entry.drCr === 'Dr' ? (entry.amount | number: '1.2-2') : '' }}{{ entry.drCr === 'Cr' ? (entry.amount | number: '1.2-2') : '' }}
+ } @else { +

No journal entries are recorded against this receipt.

+ }
+ +
+ +
} diff --git a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.scss b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.scss index e0ff13114..6252c63cb 100644 --- a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.scss +++ b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.scss @@ -6,1064 +6,12 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -// Modern Color Tokens -$primary: #1e3a8a; -$primary-light: #eff6ff; -$primary-border: #bfdbfe; -$accent-blue: #2563eb; -$text-main: #0f172a; -$text-muted: #64748b; -$border-color: #e2e8f0; -$border-light: #f1f5f9; -$bg-surface: #fff; -$bg-slate: #f8fafc; - -$success: #059669; -$success-bg: #ecfdf5; -$success-border: #a7f3d0; - -$warning: #d97706; -$warning-bg: #fffbeb; -$warning-border: #fde68a; - -$danger: #dc2626; -$danger-bg: #fef2f2; -$danger-border: #fecaca; +// Everything this dialog looks like lives in the shared partial, which its sibling Apply Additional +// Shares dialog uses too -- the two settle the same receipts for the same person and are meant to be +// the same screen. +@use '../../share-dialog.shared' as *; :host { display: block; width: 100%; } - -.dialog-wrapper { - margin: -24px; - display: flex; - flex-direction: column; - background: #fff; - border-radius: 16px; - overflow: hidden; -} - -/* Header Banner - Spacious & Premium */ -.dialog-header-banner { - display: flex; - align-items: center; - gap: 1rem; - padding: 1.1rem 1.5rem; - background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); - color: #fff; - - .header-icon-box { - display: flex; - align-items: center; - justify-content: center; - width: 42px; - height: 42px; - background: rgb(255 255 255 / 20%); - border-radius: 10px; - backdrop-filter: blur(4px); - - mat-icon { - font-size: 24px; - width: 24px; - height: 24px; - color: #fff; - } - } - - .header-text { - flex: 1; - - h2 { - margin: 0; - font-size: 1.25rem; - font-weight: 700; - letter-spacing: -0.01em; - color: #fff; - } - - p { - margin: 2px 0 0; - font-size: 0.85rem; - color: rgb(255 255 255 / 88%); - } - } - - .close-header-btn { - color: #fff; - width: 36px; - height: 36px; - line-height: 36px; - border-radius: 8px; - - &:hover { - background: rgb(255 255 255 / 15%); - } - } -} - -.dialog-body { - padding: 1.25rem 1.5rem !important; - max-height: 76vh; - overflow-y: auto; - box-sizing: border-box; - - /* Custom Scrollbar */ - &::-webkit-scrollbar { - width: 6px; - } - - &::-webkit-scrollbar-thumb { - background: #cbd5e1; - border-radius: 999px; - } -} - -/* Intro Callout */ -.dialog-intro-banner { - display: flex; - align-items: flex-start; - gap: 0.65rem; - background: #f0f9ff; - border: 1px solid #bae6fd; - border-radius: 10px; - padding: 0.75rem 1rem; - font-size: 0.84rem; - color: #0369a1; - margin-bottom: 1rem; - - .banner-icon { - font-size: 20px; - width: 20px; - height: 20px; - color: #0284c7; - margin-top: 1px; - flex-shrink: 0; - } - - .inline-icon { - font-size: 15px; - width: 15px; - height: 15px; - vertical-align: middle; - } -} - -/* Requirement Summary Stat Card */ -.requirement-summary-card { - background: $bg-slate; - border: 1px solid $border-color; - border-radius: 12px; - padding: 1rem 1.25rem; - margin-bottom: 1rem; - - .req-header { - display: flex; - align-items: center; - gap: 0.4rem; - font-size: 0.88rem; - font-weight: 700; - color: $text-main; - margin-bottom: 0.65rem; - padding-bottom: 0.35rem; - border-bottom: 1px solid $border-light; - - .req-icon { - font-size: 18px; - width: 18px; - height: 18px; - color: $accent-blue; - } - } - - .req-metrics { - display: flex; - align-items: center; - gap: 1rem; - flex-wrap: wrap; - - .metric-item { - display: flex; - flex-direction: column; - - .m-label { - font-size: 0.72rem; - text-transform: uppercase; - letter-spacing: 0.04em; - color: $text-muted; - font-weight: 600; - } - - .m-val { - font-size: 0.98rem; - color: $text-main; - } - - &.highlight-total { - background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); - border: 1px solid $primary-border; - border-radius: 8px; - padding: 0.35rem 0.85rem; - - .m-label { - color: #1e40af; - } - - .m-val { - color: #1e3a8a; - font-size: 1.1rem; - } - } - } - - .metric-plus, - .metric-equals { - font-size: 1.1rem; - font-weight: 700; - color: $text-muted; - } - } - - .req-status-bar { - border-top: 1px solid $border-light; - padding-top: 0.5rem; - margin-top: 0.5rem; - } -} - -/* Search Sections */ -.search-section { - margin-bottom: 1rem; - - .section-label { - display: flex; - align-items: center; - gap: 0.4rem; - font-size: 0.88rem; - font-weight: 700; - color: $text-main; - margin-bottom: 0.5rem; - - .sec-icon { - font-size: 18px; - width: 18px; - height: 18px; - color: $accent-blue; - } - } -} - -.voucher-search-toggle-btn { - display: inline-flex; - align-items: center; - gap: 6px; - font-size: 0.82rem; - font-weight: 600; - color: $accent-blue; - border-color: $primary-border; - - mat-icon { - font-size: 17px; - width: 17px; - height: 17px; - } -} - -.voucher-search-hint { - font-size: 0.8rem; - color: $text-muted; - margin: 0 0 0.85rem; -} - -// The shared .lookup-toolbar normally goes two-column above 680px of BROWSER width, which says -// nothing about how wide this popup itself is -- at the popup's own ~36rem, two columns crowd the -// GL Account select against the voucher input. Single column reads better at this popup's width, -// full stop, rather than reintroducing a container query for one dialog. -.voucher-search-dialog .lookup-toolbar { - grid-template-columns: 1fr; -} - -/* Lookup Toolbar - Wide Layout */ -.lookup-toolbar { - display: grid; - grid-template-columns: 1.2fr 1fr; - gap: 1rem; - background: $bg-slate; - padding: 0.85rem 1rem; - border-radius: 10px; - border: 1px solid $border-color; - - @media (width <= 680px) { - grid-template-columns: 1fr; - } -} - -.toolbar-label { - display: flex; - align-items: center; - gap: 4px; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.04em; - color: $text-muted; - margin-bottom: 5px; - - .mini-icon { - font-size: 15px; - width: 15px; - height: 15px; - } -} - -.custom-select { - width: 100%; - height: 38px; - padding: 0 0.75rem; - border: 1px solid #cbd5e1; - border-radius: 8px; - font-size: 0.88rem; - color: $text-main; - background: #fff; - box-sizing: border-box; - - &:focus { - outline: none; - border-color: $accent-blue; - box-shadow: 0 0 0 3px rgb(37 99 235 / 10%); - } -} - -.lookup-input-group { - display: flex; - gap: 0.5rem; - - .lookup-input { - flex: 1; - height: 38px; - padding: 0 0.75rem; - border: 1px solid #cbd5e1; - border-radius: 8px; - font-size: 0.88rem; - color: $text-main; - background: #fff; - box-sizing: border-box; - - &:focus { - outline: none; - border-color: $accent-blue; - box-shadow: 0 0 0 3px rgb(37 99 235 / 10%); - } - } - - .find-btn { - height: 38px; - border-radius: 8px; - padding: 0 1rem; - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 0.85rem; - font-weight: 600; - - mat-icon { - font-size: 18px; - width: 18px; - height: 18px; - } - } -} - -.charge-receipt-found { - display: flex; - align-items: center; - gap: 0.75rem; - background: $success-bg; - border: 1px solid $success-border; - border-radius: 10px; - padding: 0.65rem 1rem; - font-size: 0.85rem; - color: $success; - - &.short { - background: $danger-bg; - border-color: $danger-border; - color: $danger; - } - - mat-icon { - font-size: 20px; - width: 20px; - height: 20px; - flex-shrink: 0; - } - - .change-btn { - margin-left: auto; - font-size: 0.8rem; - height: 32px; - line-height: 32px; - padding: 0 0.85rem; - } -} - -.charge-receipt-hint { - font-size: 0.76rem; - color: $text-muted; - margin-top: 4px; -} - -/* Unattributed Section */ -.unattributed-section { - background: #fffdf5; - border: 1px solid $warning-border; - border-radius: 10px; - padding: 0.85rem; - margin-bottom: 1rem; - - .attach-btn { - height: 30px; - line-height: 30px; - font-size: 0.78rem; - padding: 0 0.75rem; - } - - // A row already linked to the member this dialog is settling -- the same voucher also sits, - // pre-loaded and tickable, in the Member Unapplied Receipts table below. Called out rather than - // removed, since it is the same receipt reachable two ways for two different purposes. - .own-client-row { - background: $success-bg; - - &:hover { - background: $success-bg; - } - - .voucher-badge { - border-color: $success-border; - } - } - - .own-client-badge { - display: block; - margin-top: 2px; - font-size: 0.65rem; - font-weight: 700; - color: $success; - } -} - -/* Vouchers Array Card & Table */ -.vouchers-card { - border: 1px solid $border-color; - border-radius: 10px; - background: #fff; - overflow: hidden; - box-shadow: 0 1px 3px rgb(0 0 0 / 5%); -} - -.vouchers-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.65rem 1rem; - background: #f1f5f9; - border-bottom: 1px solid $border-color; - - .vouchers-title { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.9rem; - font-weight: 700; - color: $text-main; - - .v-icon { - font-size: 18px; - width: 18px; - height: 18px; - color: $accent-blue; - } - - .badge-count { - background: $accent-blue; - color: #fff; - font-size: 0.75rem; - font-weight: 700; - padding: 1px 8px; - border-radius: 999px; - } - } - - .select-all-btn { - font-size: 0.8rem; - color: $accent-blue; - font-weight: 600; - - mat-icon { - font-size: 18px; - width: 18px; - height: 18px; - margin-right: 4px; - } - } -} - -.table-responsive { - width: 100%; - overflow-x: auto; -} - -.receipt-table { - width: 100%; - border-collapse: separate; - border-spacing: 0; - font-size: 0.84rem; - - th { - background: $bg-slate; - color: $text-muted; - font-size: 0.72rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.04em; - padding: 0.65rem 0.85rem; - border-bottom: 1px solid $border-color; - } - - td { - padding: 0.6rem 0.85rem; - border-bottom: 1px solid $border-light; - vertical-align: middle; - } - - .receipt-row { - cursor: pointer; - transition: background 0.12s ease; - - &:hover { - background: #f8fafc; - } - - &.selected { - background: #eff6ff; - - .voucher-badge { - background: #dbeafe; - color: #1e40af; - border-color: #bfdbfe; - } - } - } - - .col-checkbox { - width: 40px; - } - - .col-actions { - width: 48px; - } - - .custom-checkbox { - width: 17px; - height: 17px; - accent-color: $accent-blue; - cursor: pointer; - } - - .voucher-badge { - display: inline-block; - background: #f1f5f9; - color: #334155; - padding: 3px 8px; - border-radius: 6px; - border: 1px solid #cbd5e1; - font-weight: 600; - font-size: 0.82rem; - } - - .desc-cell { - color: $text-muted; - max-width: 200px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .user-chip { - display: inline-flex; - align-items: center; - gap: 4px; - background: $bg-slate; - border: 1px solid $border-color; - padding: 2px 8px; - border-radius: 999px; - font-size: 0.78rem; - color: $text-muted; - - .chip-icon { - font-size: 13px; - width: 13px; - height: 13px; - } - } - - .amount-cell { - color: $text-main; - font-size: 0.9rem; - } - - .view-detail-btn { - width: 32px; - height: 32px; - line-height: 32px; - - .eye-icon { - font-size: 20px; - width: 20px; - height: 20px; - color: $accent-blue; - } - } -} - -/* Footer & Status Badges */ -.vouchers-footer { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.65rem 1rem; - background: $bg-slate; - border-top: 1.5px solid #cbd5e1; - flex-wrap: wrap; - gap: 0.75rem; - - .selected-summary { - display: flex; - align-items: center; - gap: 1.25rem; - flex-wrap: wrap; - - .summary-text { - font-size: 0.82rem; - color: $text-muted; - } - - .summary-amounts { - display: flex; - align-items: center; - gap: 0.4rem; - font-size: 0.85rem; - - .total-label { - color: $text-muted; - } - - .total-value { - color: $primary; - font-family: 'Courier New', monospace; - } - - .target-divider { - color: $text-muted; - } - - .target-value { - color: $text-muted; - } - } - } -} - -.coverage-status { - .status-badge { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 4px 12px; - border-radius: 999px; - font-size: 0.78rem; - font-weight: 700; - - mat-icon { - font-size: 16px; - width: 16px; - height: 16px; - } - - &.badge-neutral { - background: #f1f5f9; - color: #64748b; - border: 1px solid #cbd5e1; - } - - &.badge-warning { - background: $warning-bg; - color: $warning; - border: 1px solid $warning-border; - } - - &.badge-success { - background: $success-bg; - color: $success; - border: 1px solid $success-border; - } - } -} - -.funding-loading, -.funding-empty { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 1rem; - font-size: 0.85rem; - background: $bg-slate; - border: 1px solid $border-color; - border-radius: 10px; - color: $text-muted; -} - -/* Alert Boxes */ -.alert-box { - display: flex; - align-items: center; - gap: 0.65rem; - padding: 0.65rem 1rem; - border-radius: 10px; - font-size: 0.84rem; - - mat-icon { - font-size: 20px; - width: 20px; - height: 20px; - flex-shrink: 0; - } - - &.alert-error { - background: $danger-bg; - color: $danger; - border: 1px solid $danger-border; - } -} - -/* Dialog Actions Bar */ -.dialog-actions-bar { - display: flex; - justify-content: flex-end; - align-items: center; - gap: 0.75rem; - padding: 0.85rem 1.5rem !important; - background: $bg-slate; - border-top: 1px solid $border-color; - - .action-btn { - height: 40px; - padding: 0 1.5rem; - border-radius: 8px; - font-size: 0.88rem; - font-weight: 600; - - mat-icon { - font-size: 18px; - width: 18px; - height: 18px; - margin-right: 4px; - } - } -} - -/* POPUP MODAL DIALOG STYLES */ -.modal-backdrop { - position: fixed; - inset: 0; - background: rgb(15 23 42 / 55%); - backdrop-filter: blur(4px); - z-index: 2000; - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; -} - -.voucher-modal-dialog { - background: #fff; - border-radius: 14px; - width: 100%; - max-width: 36rem; - box-shadow: 0 25px 50px -12px rgb(15 23 42 / 30%); - border: 1px solid $border-color; - overflow: hidden; - animation: modal-scale-in 0.2s ease-out; - - .modal-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem 1.25rem; - background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); - color: #fff; - - .header-title { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 1rem; - font-weight: 700; - - .m-icon { - font-size: 22px; - width: 22px; - height: 22px; - } - - .modal-badge { - background: rgb(255 255 255 / 20%); - padding: 2px 8px; - border-radius: 6px; - font-size: 0.82rem; - } - } - - .close-btn { - color: #fff; - width: 32px; - height: 32px; - line-height: 32px; - } - } - - .modal-body { - padding: 1.25rem; - max-height: 70vh; - overflow-y: auto; - } - - .detail-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 0.85rem; - - @media (width <= 480px) { - grid-template-columns: 1fr; - } - } - - .detail-item { - display: flex; - flex-direction: column; - gap: 2px; - background: $bg-slate; - padding: 0.6rem 0.85rem; - border-radius: 8px; - border: 1px solid $border-light; - - .detail-label { - font-size: 0.72rem; - text-transform: uppercase; - letter-spacing: 0.04em; - color: $text-muted; - font-weight: 600; - } - - .detail-val { - font-size: 0.88rem; - color: $text-main; - } - - &.full-width { - grid-column: 1 / -1; - } - - &.highlight-amount-box { - background: $primary-light; - border-color: $primary-border; - - .detail-label { - color: #1e40af; - } - - .amount-val { - font-size: 1.35rem; - font-weight: 700; - color: #1e3a8a; - } - } - } - - /* The receipt's own real Dr/Cr GL legs -- what this deposit actually posted, never the GL account - currently picked in the by-voucher search box, which is unrelated screen state. */ - .gl-entries-loading, - .gl-entries-empty { - display: flex; - align-items: center; - gap: 0.4rem; - font-size: 0.8rem; - color: $text-muted; - margin-top: 4px; - } - - .gl-entries-table { - width: 100%; - border-collapse: collapse; - margin-top: 6px; - font-size: 0.82rem; - - th { - text-align: left; - font-size: 0.68rem; - text-transform: uppercase; - letter-spacing: 0.04em; - color: $text-muted; - font-weight: 700; - padding: 4px 8px; - border-bottom: 1px solid $border-color; - } - - td { - padding: 6px 8px; - color: $text-main; - border-bottom: 1px solid $border-light; - } - - tbody tr:last-child td { - border-bottom: none; - } - } - - .drcr-badge { - display: inline-block; - padding: 1px 8px; - border-radius: 999px; - font-size: 0.7rem; - font-weight: 700; - - &.dr { - background: $danger-bg; - color: $danger; - border: 1px solid $danger-border; - } - - &.cr { - background: $success-bg; - color: $success; - border: 1px solid $success-border; - } - } - - .status-pill { - display: inline-block; - padding: 2px 8px; - border-radius: 999px; - font-size: 0.75rem; - font-weight: 700; - width: fit-content; - - &.status-unapplied { - background: $success-bg; - color: $success; - border: 1px solid $success-border; - } - } - - .note-box { - background: #fff; - border: 1px solid $border-color; - border-radius: 8px; - padding: 0.65rem; - font-size: 0.84rem; - color: $text-main; - line-height: 1.45; - margin-top: 4px; - white-space: pre-wrap; - } - - .modal-footer { - display: flex; - justify-content: flex-end; - gap: 0.75rem; - padding: 0.85rem 1.25rem; - background: $bg-slate; - border-top: 1px solid $border-color; - - .modal-action-btn { - mat-icon { - font-size: 18px; - width: 18px; - height: 18px; - margin-right: 4px; - } - } - } -} - -@keyframes modal-scale-in { - from { - opacity: 0; - transform: scale(0.95); - } - - to { - opacity: 1; - transform: scale(1); - } -} - -.ta-left { - text-align: left; -} - -.ta-right { - text-align: right; -} - -.ta-center { - text-align: center; -} - -.font-mono { - font-family: 'Courier New', monospace; -} - -.font-semibold { - font-weight: 600; -} - -.font-accent { - font-family: - system-ui, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - sans-serif; -} - -.font-warning { - color: $warning !important; -} - -.mt-6 { - margin-top: 6px; -} - -.mt-8 { - margin-top: 8px; -} - -.text-amber { - color: #b45309; -} - -.animate-fade-in { - animation: fade-in 0.2s ease-in-out; -} - -@keyframes fade-in { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} diff --git a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.ts b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.ts index 51298aee5..1fe74f803 100644 --- a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.ts +++ b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.ts @@ -16,23 +16,29 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { catchError } from 'rxjs/operators'; import { of } from 'rxjs'; import { CashierService } from 'app/cashier/cashier.service'; -import { SettingsService } from 'app/settings/settings.service'; -import { Dates } from 'app/core/utils/dates'; +import { ReceiptOption, receiptFromOwn, receiptFromUnattached, receiptGlLabel } from 'app/shares/share-receipt-option'; + +/** Which of the two receipt slots a pick, a search or a clear is meant for. */ +export type ReceiptSlot = 'share' | 'fee'; /** - * Applies a Share Advance receipt to an activated share account. + * Applies Share Advance receipts to an activated share account. * - * The member's cash is already sitting in the Share Sundry liability from the cashier's advance - * collection. Applying a receipt here posts Dr Sundry / Cr Share Capital (+ Cr Income from Fees - * when an entry fee applies) and reveals the purchase entry in the transactions and passbook. + * The member's cash is already sitting in the Share Sundry liability from the cashier's collection. + * Settling here posts Dr Sundry / Cr Share Capital and reveals the purchase in the transactions and + * the passbook. * - * The list shows the member's unapplied receipts for the business date, since a member settling an - * application at the counter has almost always paid for it today, and an older unapplied receipt of - * theirs is more likely money taken for something else. Nothing in it is ticked for the clerk — see - * {@link ngOnInit}. + * Two receipts settle an application and no more: one for the share value, and — when the product + * charges one — one for the entry fee. They are chosen in two separate slots because they are two + * different things: the share receipt is money that moves into share capital, while the fee receipt + * only proves the fee was already collected and is never posted a second time (its money was + * recognised as income by the cashier's own entry). Picking both out of one ticked list was what + * made that distinction invisible. * - * A receipt outside that narrow list is reached by voucher number through {@link lookupVoucher} — - * cash taken on an earlier day, or a slip the member is holding that is quicker to type than to find. + * Every available receipt is offered in both slots, whether it already names this member or is a + * voucher paid straight into a GL account. A voucher that names nobody yet is attached to this + * member at the moment it is picked, so the counter does an Attach-then-tick as a single click + * rather than as two steps in two different tables. */ @Component({ selector: 'mifosx-apply-collection-dialog', @@ -50,138 +56,62 @@ import { Dates } from 'app/core/utils/dates'; }) export class ApplyCollectionDialogComponent implements OnInit { private cashierService = inject(CashierService); - private settingsService = inject(SettingsService); - private dateUtils = inject(Dates); - - loading = true; - submitting = false; - errorMsg = ''; - receipts: any[] = []; - - /** - * Receipts chosen for this settlement, in the order they were picked. - * - * More than one because a member often pays an application in instalments — ₹4,500 today, the - * ₹500 balance tomorrow — and neither receipt settles the account on its own. They are applied - * together as a single settlement rather than forcing the member back to the counter for a fresh - * receipt covering the whole amount. - */ - selectedIds: number[] = []; - - /** Voucher number quoted by the member, for a receipt the list does not show. */ - voucherNo = ''; - lookingUp = false; - - /** - * Whether the voucher-search popup is open. - * - * The GL Account / Voucher No lookup is for the exception — a receipt the unattributed list and - * the member's own list do not carry — so it sits behind a button rather than on screen whether or - * not anyone needs it, exactly like the receipt-detail popup already does for the same reason. - */ - voucherSearchOpen = false; - - openVoucherSearch(): void { - this.errorMsg = ''; - this.voucherSearchOpen = true; - } - - closeVoucherSearch(): void { - this.voucherSearchOpen = false; - this.errorMsg = ''; - } - - /** GL account the deposit was posted to — required, and always picked by hand. Never resolved - * from a share product's accounting setup, so a broken or missing product mapping can never - * make a genuine voucher unreachable. */ - glAccountNo = ''; - glAccounts: any[] = []; - loadingGlAccounts = true; - - /** A second, separately-tracked receipt search for the entry fee — a member sometimes pays the - * share value and the fee as two separate receipts, posted to two different GL accounts, so one - * voucher search covering only the share value would never reach the fee on its own. - * - * Kept entirely apart from {@link receipts}/{@link selectedIds}: this receipt is sent to the - * server as its own field (see {@link apply}) so it is never swept into the Sundry-side sum and - * never gets a GL entry of its own — it is proof the fee was paid, not money that needs to move, - * since it never sat in Sundry in the first place. */ - chargeVoucherNo = ''; - chargeGlAccountNo = ''; - lookingUpCharge = false; - chargeReceipt: any = null; - - /** What this account needs before a collection can be applied — fetched up front so the counter - * knows the full figure (and that it may take two receipts) before a search ever comes up short. */ - requirement: { shareAmount: number; chargeAmount: number; required: number } | null = null; - loadingRequirement = true; - - /** - * Share-collection receipts that are approved but belong to nobody yet. - * - *

- * A receipt paid straight into a GL account names no member — a GL account is nobody's account — - * so it is never attributed on its own. Listing it here is not attribution: it only makes the - * voucher findable, so a counter that tagged a receipt "Share Collection" ten minutes ago is not - * told there is nothing to apply. Attaching it is still a click a person makes against a member - * they can see. - */ - unattributed: any[] = []; public dialogRef = inject(MatDialogRef); public data = inject<{ shareAccountId: number; clientId: number; accountNo: string }>(MAT_DIALOG_DATA); + loading = true; + submitting = false; + errorMsg = ''; + + /** Every receipt that can be picked, from both server lists, in one pool. */ + available: ReceiptOption[] = []; + + /** The receipt covering the share value. Required — nothing settles without it. */ + shareReceipt: ReceiptOption | null = null; + + /** The receipt covering the entry fee. Verification only: never posted to a GL account. */ + chargeReceipt: ReceiptOption | null = null; + + /** What this account needs before a collection can be applied, fetched up front. */ + requirement: { shareAmount: number; chargeAmount: number; required: number } | null = null; + + /** Key of the receipt currently being attached to this member, so only its own row shows a spinner. */ + attaching: string | null = null; + ngOnInit(): void { + // One call for both lists -- the member's own receipts and every other Share Collection receipt + // still available. They come from the same table under the same filters, so asking twice only + // ever fetched the same rows twice. this.cashierService - .getUnappliedShareAdvances(this.data.clientId) + .getShareCollectionReceipts(this.data.clientId) .pipe( catchError((err) => { - this.errorMsg = this.readError(err, 'Could not load the member’s receipts.'); + this.errorMsg = this.readError(err, 'Could not load the available receipts.'); this.loading = false; return of(null); }) ) .subscribe((res: any) => { if (res) { - const today = this.dateUtils.formatDate(this.settingsService.businessDate, 'yyyy-MM-dd'); - this.receipts = (res.unappliedCollections || []).filter( - (receipt: any) => this.collectionDateOf(receipt) === today - ); - // Deliberately nothing ticked, not even when a single receipt is listed. Applying a - // collection turns the member's money into share capital, so which receipt it comes out of - // should be a choice the clerk made rather than one they inherited from a pre-ticked box - // and never looked at. + this.available = [ + ...(res.own || []).map((row: any) => receiptFromOwn(row)), + ...(res.rows || []).map((row: any) => receiptFromUnattached(row)) + ]; + // Nothing pre-selected, not even when a single receipt is listed. Settling turns the + // member's money into share capital, so which receipt it comes out of should be a choice + // somebody made rather than one they inherited and never looked at. } this.loading = false; }); - this.cashierService - .getUnattributedShareCollections() - .pipe(catchError(() => of(null))) - .subscribe((res: any) => (this.unattributed = res?.rows || [])); - + // Needed only by the voucher search, which is the exception path -- loaded quietly in the + // background so opening that popup never waits on a request. this.cashierService .getShareAdvanceGlAccounts() - .pipe( - catchError((err) => { - this.errorMsg = this.readError(err, 'Could not load the GL account list.'); - this.loadingGlAccounts = false; - return of(null); - }) - ) + .pipe(catchError(() => of(null))) .subscribe((res: any) => { this.glAccounts = res?.glAccounts || []; - // Auto-picked only when it is genuinely the only option. The list now carries every - // postable GL account again (see the backend's own comment), so picking index 0 whenever - // one loads would silently select whichever account sorts first by gl_code -- Cash at - // Vault, almost always -- the exact bug this was fixed for once already. Two or more - // candidates always means the counter chooses by hand. - if (this.glAccounts.length === 1 && !this.glAccountNo) { - this.glAccountNo = this.glAccounts[0].gl_code; - } - if (this.glAccounts.length === 1 && !this.chargeGlAccountNo) { - this.chargeGlAccountNo = this.glAccounts[0].gl_code; - } this.loadingGlAccounts = false; }); @@ -196,100 +126,80 @@ export class ApplyCollectionDialogComponent implements OnInit { required: Number(res.required || 0) }; } - this.loadingRequirement = false; }); } - /** Receipt object currently being viewed in detail popup. */ - viewingReceiptDetail: any = null; + // ── The two slots ─────────────────────────────────────────────────────────────────────────── - /** - * The receipt's own real Dr/Cr GL legs, under its own {@code gl_transaction_id} — never the GL - * account currently picked in the by-voucher search box above, which is unrelated screen state - * that can name a completely different account than the one this receipt actually sits in. - */ - viewingReceiptGlEntries: any[] | null = null; - loadingReceiptGlEntries = false; - - openReceiptDetail(receipt: any, event?: Event): void { - if (event) { - event.stopPropagation(); - } - this.viewingReceiptDetail = receipt; - this.viewingReceiptGlEntries = null; - this.loadingReceiptGlEntries = true; - this.cashierService - .getShareAdvanceGlEntries(receipt.id) - .pipe(catchError(() => of(null))) - .subscribe((res: any) => { - this.viewingReceiptGlEntries = res?.entries || []; - this.loadingReceiptGlEntries = false; - }); + /** Receipts offered for a slot: everything available except whatever the other slot already holds. */ + optionsFor(slot: ReceiptSlot): ReceiptOption[] { + const taken = slot === 'share' ? this.chargeReceipt : this.shareReceipt; + return taken ? this.available.filter((option) => option.key !== taken.key) : this.available; } - closeReceiptDetail(): void { - this.viewingReceiptDetail = null; - this.viewingReceiptGlEntries = null; + selected(slot: ReceiptSlot): ReceiptOption | null { + return slot === 'share' ? this.shareReceipt : this.chargeReceipt; } - toggleAll(): void { - if (this.isAllSelected()) { - this.selectedIds = []; - } else { - this.selectedIds = this.receipts.map((r) => r.id); - } - this.syncLookupFieldsToSelection(); + isPicked(slot: ReceiptSlot, option: ReceiptOption): boolean { + return this.selected(slot)?.key === option.key; } /** - * Mirrors a ticked receipt's own GL account and voucher number into the Share Receipt Lookup - * fields above, so a tick is visibly confirmed rather than leaving those fields blank while the - * table below shows the real selection. Particularly worth seeing across instalments, where two - * receipts making up one settlement can sit in two different GL accounts, exactly like this - * member's own 200902 and 400105 receipts do. + * Chooses a receipt for a slot, attaching it to this member first if it is still only a voucher + * number. * - * Shows the most recently ticked receipt when several are selected — there is no single GL - * account to show once more than one is chosen, and the most recent tick is the one the counter - * just made. Clears both fields once nothing is ticked. + * A receipt paid straight into a GL account names no member — a GL account is nobody's account — + * so it has to be attributed before it can settle anything. That attribution is exactly the + * by-voucher lookup a hand-typed voucher number already runs; doing it on the pick means the + * counter makes one deliberate choice against a member they can see, instead of an Attach in one + * table followed by a tick in another. */ - private syncLookupFieldsToSelection(): void { - if (!this.selectedIds.length) { - this.glAccountNo = ''; - this.voucherNo = ''; + pick(slot: ReceiptSlot, option: ReceiptOption): void { + if (this.attaching || this.submitting) { return; } - const lastId = this.selectedIds[this.selectedIds.length - 1]; - const receipt = this.receipts.find((r) => r.id === lastId); - if (receipt) { - this.glAccountNo = receipt.gl_code || this.glAccountNo; - this.voucherNo = receipt.voucher_no || receipt.receipt_no || ''; + if (this.isPicked(slot, option)) { + this.clear(slot); + return; + } + if (option.collectionId !== null) { + this.assign(slot, option); + return; + } + + this.attaching = option.key; + this.errorMsg = ''; + this.findVoucher(option.voucherNo, option.glAccountNo).subscribe((res) => { + this.attaching = null; + if (!res) { + return; + } + // Attached now, so it takes its real row's place in the pool -- picking it a second time (or + // in the other slot) must never run the attach again. + const attached = receiptFromOwn(res); + this.available = this.available.map((entry) => (entry.key === option.key ? attached : entry)); + this.assign(slot, attached); + }); + } + + clear(slot: ReceiptSlot): void { + this.assign(slot, null); + } + + private assign(slot: ReceiptSlot, option: ReceiptOption | null): void { + if (slot === 'share') { + this.shareReceipt = option; + } else { + this.chargeReceipt = option; } } - /** - * Whether an unattributed-list row is already linked to the member this dialog is settling. - * - * Such a row also appears, pre-loaded, in the Member Unapplied Receipts table below — that is not - * a duplicate to clear up, it is the same receipt reachable two ways. This only flags it so the - * counter understands why it shows up here too, rather than reading it as an unrelated stray - * voucher that happens to look identical. - */ - isOwnClientVoucher(u: any): boolean { - return u?.linkedClientId != null && Number(u.linkedClientId) === Number(this.data.clientId); - } - - isAllSelected(): boolean { - return this.receipts.length > 0 && this.selectedIds.length === this.receipts.length; - } - - isSomeSelected(): boolean { - return this.selectedIds.length > 0 && this.selectedIds.length < this.receipts.length; - } + // ── What still has to be covered ──────────────────────────────────────────────────────────── /** - * What the share receipts still need to reach — the share value alone once the entry fee has its - * own verified receipt, otherwise the combined share-plus-fee total, matching exactly what the - * server checks the Sundry-side receipts against in {@link apply}. + * What the share receipt has to reach — the share value alone once the fee has its own receipt, + * otherwise the combined share-plus-fee total, matching exactly what the server checks. */ get shareRequired(): number { if (!this.requirement) { @@ -298,20 +208,19 @@ export class ApplyCollectionDialogComponent implements OnInit { return this.chargeReceipt ? this.requirement.shareAmount : this.requirement.required; } - /** What the share receipts are still missing, zero once fully covered. */ - get shortfall(): number { - const short = this.shareRequired - this.selectedTotal; - return short > 0 ? short : 0; + /** What the chosen share receipt is still missing, zero once it covers the requirement. */ + get shareShortfall(): number { + const short = this.shareRequired - Number(this.shareReceipt?.amount || 0); + return this.shareReceipt && short > 0 ? short : 0; } - /** Whether a verified entry fee receipt still needs to be found — false when there is no fee, or - * when the fee was already folded into the share receipt(s) above. */ - get chargeUnverified(): boolean { - return !!this.requirement && this.requirement.chargeAmount > 0 && !this.chargeReceipt; + /** Whether this product charges an entry fee at all. */ + get hasFee(): boolean { + return !!this.requirement && this.requirement.chargeAmount > 0; } - /** Whether the found entry fee receipt actually covers the fee. */ - get chargeShortfall(): number { + /** What the chosen fee receipt is still missing, zero once it covers the fee. */ + get feeShortfall(): number { if (!this.requirement || !this.chargeReceipt) { return 0; } @@ -320,209 +229,129 @@ export class ApplyCollectionDialogComponent implements OnInit { } /** - * A receipt's collection date as {@code yyyy-MM-dd}. + * Whether the settlement can go through. * - * Normalises both shapes the API can send — that string, or Fineract's {@code [yyyy, m, d]} array - * — rather than assuming one, so the filter cannot silently match nothing if the serialiser - * behind this endpoint changes. + * Blocked on a shortfall rather than letting the server reject it: the figures are all on screen + * already, so a submission that can only come back as an error is a round trip nobody needed. */ - private collectionDateOf(receipt: any): string { - const raw = receipt?.collection_date ?? receipt?.collectionDate; - if (Array.isArray(raw) && raw.length >= 3) { - const [ - year, - month, - day - ] = raw; - return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`; - } - return typeof raw === 'string' ? raw.slice(0, 10) : ''; + get canApply(): boolean { + return !!this.shareReceipt && this.shareShortfall === 0 && this.feeShortfall === 0 && !this.submitting; } - isSelected(id: number): boolean { - return this.selectedIds.includes(id); + // ── Voucher search, for a receipt the list does not carry ─────────────────────────────────── + + /** Slot the open search popup is searching for, or null while it is closed. */ + searchFor: ReceiptSlot | null = null; + searchVoucherNo = ''; + searchGlAccountNo = ''; + searching = false; + + /** GL accounts, for the search only — a voucher is found by number *and* the account it sits in. */ + glAccounts: any[] = []; + loadingGlAccounts = true; + + openSearch(slot: ReceiptSlot): void { + this.searchFor = slot; + this.searchVoucherNo = ''; + this.searchGlAccountNo = this.glAccounts.length === 1 ? this.glAccounts[0].gl_code : ''; + this.errorMsg = ''; } - toggle(id: number): void { - this.selectedIds = this.isSelected(id) ? this.selectedIds.filter((x) => x !== id) : [ - ...this.selectedIds, - id - ]; - this.syncLookupFieldsToSelection(); + closeSearch(): void { + this.searchFor = null; + this.errorMsg = ''; } - /** - * What the selected receipts come to. - * - * Shown live as receipts are ticked, because the settlement only goes through when the total - * covers the account — checking that by adding up the rows by eye is exactly what leads to a - * rejected submission. - */ - get selectedTotal(): number { - return this.receipts.filter((r) => this.isSelected(r.id)).reduce((sum, r) => sum + Number(r.amount || 0), 0); - } - - /** - * Resolves the voucher number the member quotes into a receipt and adds it to the list. - * - * The list is deliberately narrow — this member, today, unapplied — so the search is how a - * receipt outside that gets settled: one taken yesterday, or one the member holds a slip for that - * is quicker to type than to find. The lookup itself is not restricted to this member, so a - * voucher belonging to somebody else is surfaced here as a clear mismatch rather than failing - * later inside apply(). - */ - /** - * Attaches one of the unattributed share-collection receipts to this member. - * - *

- * Goes straight to {@link resolveVoucher} rather than through {@link lookupVoucher}: a row already - * on this list is either a fresh cashier deposit (which does carry its own GL account) or an - * already-adopted {@code m_share_advance_collection} row (the "linked to …" ones), whose GL account - * can legitimately come back blank — its subquery reads the posting the original adoption made, - * which a clerk-disbursement-funded receipt does not always leave behind cleanly. Either way the - * backend needs no GL account to resolve a voucher it can already find by number, so a blank one - * here must never block the click the way it rightly blocks a hand-typed search with nothing chosen - * yet. The list never decides whose money it is; the click does. - */ - attachUnattributed(row: any): void { - if (this.lookingUp || this.submitting) { + runSearch(): void { + const voucher = this.searchVoucherNo.trim(); + const glAccountNo = this.searchGlAccountNo.trim(); + const slot = this.searchFor; + // Both fields are genuinely needed: a blank GL account here means nothing has been chosen yet, + // not that none is required. + if (!voucher || !glAccountNo || !slot || this.searching) { return; } - this.resolveVoucher(row.voucherNo, row.glAccountNo || ''); - } - - lookupVoucher(): void { - const voucher = this.voucherNo.trim(); - const glAccountNo = this.glAccountNo.trim(); - // A hand-typed search genuinely needs both fields: an empty GL account here means nothing has - // been chosen yet, not that one isn't needed — unlike {@link attachUnattributed}, which already - // knows exactly which receipt it means and never has this ambiguity. - if (!voucher || !glAccountNo || this.lookingUp) { - return; - } - this.resolveVoucher(voucher, glAccountNo); - } - - /** - * Resolves a voucher number (with whatever GL account, if any, is known for it) and adds the - * receipt it finds to the table, ticked. - * - * Shared by {@link lookupVoucher} (a hand-typed search, where both fields are guaranteed non-blank - * by the Find button's own disabled state) and {@link attachUnattributed} (a click on a row already - * on screen, whose GL account can legitimately be blank) — the actual lookup and its bookkeeping - * afterwards are identical either way. - */ - private resolveVoucher(voucher: string, glAccountNo: string): void { - this.lookingUp = true; + this.searching = true; this.errorMsg = ''; this.findVoucher(voucher, glAccountNo).subscribe((res) => { - this.lookingUp = false; + this.searching = false; if (!res) { return; } - // Added to the table (replacing any stale copy) and ticked, unlike the listed receipts which - // are left for the clerk: attaching a specific voucher IS the deliberate choice of that - // receipt, so making them tick it again would be asking the same question twice. - this.receipts = [ - res, - ...this.receipts.filter((r) => r.id !== res.id) + const found = receiptFromOwn(res); + this.available = [ + found, + ...this.available.filter((entry) => entry.key !== found.key && entry.voucherNo !== found.voucherNo) ]; - if (!this.isSelected(res.id)) { - this.selectedIds = [ - ...this.selectedIds, - res.id - ]; - } - // Once attached it belongs to this member, so it leaves the unattributed list rather than - // sitting there inviting a second, conflicting attachment. - this.unattributed = this.unattributed.filter((u) => u.voucherNo !== voucher); - // Cleared, not left showing this voucher: an instalment payment often means searching for a - // second receipt right after this one, and the box should be ready for that number, not still - // holding the one just added. - this.voucherNo = ''; - // The GL Account picker still follows this receipt, exactly as it does when an already-listed - // receipt is ticked — res.gl_code is this receipt's own real GL account (see findByVoucher()'s - // subquery on the server), not whatever the search box happened to hold before this search. - if (res.gl_code) { - this.glAccountNo = res.gl_code; - } - // Found it -- the popup has done its job, so it closes rather than sitting open over a - // receipt that now already shows, ticked, in the table behind it. - this.voucherSearchOpen = false; + this.assign(slot, found); + this.searchFor = null; }); } - /** - * Same lookup as {@link lookupVoucher}, against its own GL account and voucher fields — for a - * receipt that covers the entry fee rather than the share value. - * - * Deliberately NOT added to {@link receipts}/{@link selectedIds}: this receipt is kept on its own - * ({@link chargeReceipt}) and sent to the server as a distinct field, so it is never swept into the - * Sundry-side total and never gets a settlement GL entry of its own — it proves the fee was paid, - * it does not move money that never sat in Sundry to begin with. - */ - lookupChargeVoucher(): void { - const voucher = this.chargeVoucherNo.trim(); - const glAccountNo = this.chargeGlAccountNo.trim(); - if (!voucher || !glAccountNo || this.lookingUpCharge) { - return; - } - this.lookingUpCharge = true; - this.errorMsg = ''; - this.findVoucher(voucher, glAccountNo).subscribe((res) => { - this.lookingUpCharge = false; - if (!res) { - return; - } - this.chargeReceipt = res; - this.chargeVoucherNo = ''; - }); - } - - /** Clears a wrongly-found entry fee receipt so a different voucher can be searched instead. */ - clearChargeReceipt(): void { - this.chargeReceipt = null; - } - - /** - * Resolves one voucher number into the receipt it names, common to both lookups above. Each caller - * decides what to do with the result — added to the shared table for a share receipt, kept on its - * own for the entry fee — since the two are never allowed to mix into the same sum. - */ private findVoucher(voucher: string, glAccountNo: string) { - // No client-match check here by deliberate choice: any receipt can be attached to any share - // account, regardless of which member it was originally recorded against. + // No client-match check: any receipt can settle any share account, regardless of which member it + // was first recorded against. return this.cashierService.getShareAdvanceByVoucher(voucher, glAccountNo, this.data.clientId).pipe( catchError((err) => { - this.errorMsg = this.readError(err, `Voucher ${voucher} could not be found.`); + this.errorMsg = this.readError(err, `Voucher ${voucher} could not be found in that GL account.`); return of(null); }) ); } + // ── A receipt's own GL entries ────────────────────────────────────────────────────────────── + + viewing: ReceiptOption | null = null; + + /** + * The receipt's own real Dr/Cr legs, read under its own {@code gl_transaction_id} — never the GL + * account picked in a search box, which is unrelated screen state naming a different account. + */ + viewingGlEntries: any[] | null = null; + loadingGlEntries = false; + + openDetail(option: ReceiptOption, event: Event): void { + event.stopPropagation(); + if (option.collectionId === null) { + return; + } + this.viewing = option; + this.viewingGlEntries = null; + this.loadingGlEntries = true; + this.cashierService + .getShareAdvanceGlEntries(option.collectionId) + .pipe(catchError(() => of(null))) + .subscribe((res: any) => { + this.viewingGlEntries = res?.entries || []; + this.loadingGlEntries = false; + }); + } + + closeDetail(): void { + this.viewing = null; + this.viewingGlEntries = null; + } + + // ── Submission ────────────────────────────────────────────────────────────────────────────── + apply(): void { - if (this.selectedIds.length === 0 || this.submitting) { + if (!this.canApply || !this.shareReceipt) { return; } this.submitting = true; this.errorMsg = ''; - // The first receipt leads on the URL; the rest ride along in the body, and the server settles - // them as one transaction. The entry fee receipt, when one was found, rides along as its own - // field — never folded into additionalCollectionIds, so the server never sums it into the - // Sundry-side total or posts a GL entry for it. - const [ - leadId, - ...additionalCollectionIds - ] = this.selectedIds; - - const data: any = { shareAccountId: this.data.shareAccountId, additionalCollectionIds }; + // The share receipt leads on the URL and is the only one the server sums into the Sundry-side + // total. The fee receipt rides along as its own field so it is never added to that total and + // never gets a GL entry of its own -- its money was already recognised as income when the + // cashier took it. + const payload: any = { shareAccountId: this.data.shareAccountId, additionalCollectionIds: [] }; if (this.chargeReceipt) { - data.chargeCollectionId = this.chargeReceipt.id; + payload.chargeCollectionId = this.chargeReceipt.collectionId; } this.cashierService - .applyShareAdvance(leadId, data) + .applyShareAdvance(this.shareReceipt.collectionId as number, payload) .pipe( catchError((err) => { this.errorMsg = this.readError(err, 'Applying the collection failed.'); @@ -537,6 +366,11 @@ export class ApplyCollectionDialogComponent implements OnInit { }); } + /** The GL account a receipt sits in, named from the list the voucher search already loaded. */ + glLabel(option: ReceiptOption): string { + return receiptGlLabel(option, this.glAccounts); + } + private readError(err: any, fallback: string): string { return ( err?.error?.errors?.[0]?.defaultUserMessage || diff --git a/src/app/shares/shares-account-view/shares-account-view.component.ts b/src/app/shares/shares-account-view/shares-account-view.component.ts index d97a3125c..1b90ad39e 100644 --- a/src/app/shares/shares-account-view/shares-account-view.component.ts +++ b/src/app/shares/shares-account-view/shares-account-view.component.ts @@ -15,6 +15,7 @@ import { MatDialog } from '@angular/material/dialog'; import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component'; import { ShareCertificateDialogComponent } from './share-certificate-dialog/share-certificate-dialog.component'; import { ApplyCollectionDialogComponent } from './apply-collection-dialog/apply-collection-dialog.component'; +import { ApplySharesComponent } from '../shares-account-actions/apply-shares/apply-shares.component'; /** Custom Services */ import { SharesService } from '../shares.service'; @@ -175,7 +176,6 @@ export class SharesAccountViewComponent implements OnInit { case 'Close': case 'Activate': case 'Undo Approval': - case 'Apply Additional Shares': case 'Redeem Shares': case 'Approve Additional Shares': case 'Reject Additional Shares': @@ -190,6 +190,9 @@ export class SharesAccountViewComponent implements OnInit { case 'Apply Collection': this.applyCollection(); break; + case 'Apply Additional Shares': + this.applyAdditionalShares(); + break; case 'Share Certificate': this.viewShareCertificate(); break; @@ -206,8 +209,10 @@ export class SharesAccountViewComponent implements OnInit { */ private applyCollection() { const dialogRef = this.dialog.open(ApplyCollectionDialogComponent, { - width: '820px', - maxWidth: '92vw', + // Two receipt slots and a requirement strip, nothing wider -- the screen used to carry a + // multi-tick table plus a second, separate attach table, which is what needed 820px. + width: '780px', + maxWidth: '96vw', panelClass: 'apply-collection-dialog-panel', data: { shareAccountId: this.sharesAccountData.id, @@ -219,18 +224,54 @@ export class SharesAccountViewComponent implements OnInit { if (result) { // Account data comes from a route resolver, so re-running the route is what refreshes the // newly revealed transaction and the now-paid charges. - this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => { - this.router.navigate([ - '/clients', - this.sharesAccountData.clientId, - 'shares-accounts', - this.sharesAccountData.id - ]); - }); + this.reloadAccount(); } }); } + /** + * Raises a request for a further tranche of shares on this account. + * + * A dialog rather than its own page, like Apply Collection beside it: both are a short form filled + * in with the member standing at the counter, and sending the clerk to a separate screen only + * meant losing the account they were looking at to come back to. + */ + private applyAdditionalShares() { + const dialogRef = this.dialog.open(ApplySharesComponent, { + width: '780px', + maxWidth: '96vw', + panelClass: 'apply-collection-dialog-panel', + data: { + shareAccountId: this.sharesAccountData.id, + clientId: this.sharesAccountData.clientId, + accountNo: this.sharesAccountData.accountNo, + unitPrice: this.sharesAccountData.currentMarketPrice + } + }); + dialogRef.afterClosed().subscribe((result: any) => { + if (result) { + this.reloadAccount(); + } + }); + } + + /** + * Re-runs this account's route so its resolver refetches everything on screen. + * + * Through the root first, because Angular reuses the component when only the same route's data + * changes — which would leave the page showing exactly the figures the dialog just changed. + */ + private reloadAccount() { + this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => { + this.router.navigate([ + '/clients', + this.sharesAccountData.clientId, + 'shares-accounts', + this.sharesAccountData.id + ]); + }); + } + /** * Whether the member's money has actually been taken and the shares issued. * diff --git a/src/app/shares/shares-routing.module.ts b/src/app/shares/shares-routing.module.ts index d2c17ecd1..1e80216e3 100644 --- a/src/app/shares/shares-routing.module.ts +++ b/src/app/shares/shares-routing.module.ts @@ -76,6 +76,14 @@ const routes: Routes = [ (m) => m.ShareStatusReportComponent ) }, + { + path: 'reports/product-summary', + data: { title: 'Share Product Summary', breadcrumb: 'Product Summary' }, + loadComponent: () => + import('./reports/share-product-summary/share-product-summary.component').then( + (m) => m.ShareProductSummaryComponent + ) + }, { path: 'reports/nominal-shares', data: { title: 'Nominal Share Report', breadcrumb: 'Nominal Share Report' }, diff --git a/src/app/shares/shares.module.ts b/src/app/shares/shares.module.ts index 6a88f04fc..e279265ec 100644 --- a/src/app/shares/shares.module.ts +++ b/src/app/shares/shares.module.ts @@ -30,7 +30,6 @@ import { RejectSharesAccountComponent } from './shares-account-actions/reject-sh import { CloseSharesAccountComponent } from './shares-account-actions/close-shares-account/close-shares-account.component'; import { ActivateSharesAccountComponent } from './shares-account-actions/activate-shares-account/activate-shares-account.component'; import { UndoApprovalSharesAccountComponent } from './shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component'; -import { ApplySharesComponent } from './shares-account-actions/apply-shares/apply-shares.component'; import { RedeemSharesComponent } from './shares-account-actions/redeem-shares/redeem-shares.component'; import { ApproveSharesComponent } from './shares-account-actions/approve-shares/approve-shares.component'; import { ApproveShareDialogComponent } from './shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component'; @@ -83,7 +82,6 @@ import { MatInputModule } from '@angular/material/input'; CloseSharesAccountComponent, ActivateSharesAccountComponent, UndoApprovalSharesAccountComponent, - ApplySharesComponent, RedeemSharesComponent, ApproveSharesComponent, ApproveShareDialogComponent, diff --git a/src/app/shares/shares.service.ts b/src/app/shares/shares.service.ts index a7d277584..744cd8f22 100644 --- a/src/app/shares/shares.service.ts +++ b/src/app/shares/shares.service.ts @@ -243,6 +243,14 @@ export class SharesService { return this.http.get('/sharereports/nominal-shares', { params: this.cleanParams(params) }); } + /** + * Every share product's authorised capital against what has actually been paid up — shares issued, + * shares remaining, unpaid allotments and the distinctive-number range, per product. + */ + getShareProductSummary(): Observable { + return this.http.get('/sharereports/product-summary'); + } + /** Shareholding pattern — members and capital per holding band, plus the per-product split. */ getShareWiseReport( params: { asOnDate?: string; officeId?: number | string; productId?: number | string } = {} diff --git a/src/environments/.env.ts b/src/environments/.env.ts index dc056d334..8081ebfd2 100644 --- a/src/environments/.env.ts +++ b/src/environments/.env.ts @@ -10,7 +10,7 @@ export default { 'mifos_x': { 'version': '260918', - 'hash': 'c7428d0c' + 'hash': 'dc7f6680' }, 'allow_switching_backend_instance': true }; diff --git a/src/main.scss b/src/main.scss index 7b96bfb34..16f91750d 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1962,12 +1962,40 @@ mifosx-client-datatable-step * { } /* Apply Collection Dialog Panel Styling */ + +/* No overflow:hidden here. The dialog's own .dialog-wrapper already clips to the same radius, and + clipping at the surface as well cut off the voucher-search and receipt-detail popups, which the + dialog renders as its own fixed-position children. */ .apply-collection-dialog-panel { .mat-mdc-dialog-container, .mdc-dialog__surface { - border-radius: 16px !important; + border-radius: 12px !important; padding: 0 !important; - overflow: hidden !important; box-shadow: 0 25px 60px -15px rgb(15 23 42 / 30%) !important; } + + // Fix Material MDC button icon + text alignment inside both dialogs + .mat-mdc-button-base { + // The MDC internal label span — make it flex so icon & text sit on the same axis + .mdc-button__label { + display: inline-flex !important; + align-items: center !important; + gap: 0.3rem !important; + line-height: 1 !important; + } + + // mat-icon inside any button in these dialogs + .mat-icon { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 18px !important; + height: 18px !important; + font-size: 18px !important; + line-height: 1 !important; + vertical-align: middle !important; + overflow: visible !important; + flex-shrink: 0; + } + } }