From 3c363d037226424f8b0b02c985048841c093e7c0 Mon Sep 17 00:00:00 2001 From: Nitesh Yadav Date: Fri, 18 Sep 2026 18:56:34 +0530 Subject: [PATCH] feat(shares): one-voucher-per-slot receipt dialogs, Apply Additional Shares as a popup Apply Collection and Apply Additional Shares settle the same Share Collection receipts for the same member, so they are now deliberately the same screen. Apply Collection takes exactly two receipts and no more: one for the share value, one for the entry fee, in two separate slots. They are different things -- the share receipt is money moving into share capital, while the fee receipt only proves the fee was already collected and is never posted a second time -- and picking both out of one ticked list made that distinction invisible. Apply Additional Shares moves from its own route to a dialog. It was a full page a clerk had to leave the account for and come back from, to fill in a short form with the member standing at the counter. Its old route, resolver case and action- host branch are removed rather than left behind as dead paths. Both screens now draw their receipts from a single pool, whether a receipt already names the member or is a voucher paid straight into a GL account; an unattributed one is attached at the moment it is picked, so what used to be an Attach in one table and a tick in another is one deliberate click. The by-voucher search and the GL-entry detail both sit behind buttons, as exceptions rather than permanent furniture. Dialog chrome and the receipt shape are shared (share-dialog.shared.scss, share-receipt-option.ts) so the two cannot drift apart again. Also fixes content being clipped at the dialog edges: the wrapper cancelled a 24px surface padding that the panel class had already zeroed, pushing every edge outside the surface where overflow:hidden cut it off, and the height cap sat on the scrolling body rather than the wrapper, letting the footer stack past the bottom of the viewport. Adds the product-wise share summary report (authorised, issued, available and unpaid shares, distinctive range and account count per product). Co-Authored-By: Claude Opus 5 (1M context) --- src/app/cashier/cashier.service.ts | 21 +- src/app/core/shell/shell.component.html | 3 + .../share-account-actions.resolver.ts | 1 - .../share-product-summary.component.html | 168 +++ .../share-product-summary.component.ts | 168 +++ .../shares/reports/share-report.shared.scss | 17 + src/app/shares/share-dialog.shared.scss | 996 +++++++++++++ src/app/shares/share-receipt-option.ts | 85 ++ .../apply-shares/apply-shares.component.html | 953 ++++-------- .../apply-shares/apply-shares.component.scss | 1274 ++--------------- .../apply-shares/apply-shares.component.ts | 768 +++++----- .../shares-account-actions.component.html | 3 - .../shares-account-actions.component.ts | 4 - .../apply-collection-dialog.component.html | 921 +++++------- .../apply-collection-dialog.component.scss | 1060 +------------- .../apply-collection-dialog.component.ts | 578 +++----- .../shares-account-view.component.ts | 63 +- src/app/shares/shares-routing.module.ts | 8 + src/app/shares/shares.module.ts | 2 - src/app/shares/shares.service.ts | 8 + src/environments/.env.ts | 2 +- src/main.scss | 32 +- 22 files changed, 2906 insertions(+), 4229 deletions(-) create mode 100644 src/app/shares/reports/share-product-summary/share-product-summary.component.html create mode 100644 src/app/shares/reports/share-product-summary/share-product-summary.component.ts create mode 100644 src/app/shares/share-dialog.shared.scss create mode 100644 src/app/shares/share-receipt-option.ts 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; + } + } }