Compare commits

...
Author SHA1 Message Date
keshav 357f666421 KYC management: stage-wise notices, pagination, RD base chart 2026-10-20 17:23:42 +05:30
niteshandClaude Opus 5.5 3e5cc26e49 feat(fixed-deposits): FD quote from the account engine, FD Special payout schedule popup, Special terms locked
- Rate chart step (account opening): the rate, maturity date, maturity amount
  and interest now come from POST fixeddepositaccounts/account-preview for
  every FD type, so the quote matches the account once created (the old
  calculate-fd-interest call counted quarters from the deposit date and was
  off, e.g. FD DOUBLE by 36,979.23). The client-side formula fallback is
  removed: on an error the message is shown, nothing is estimated.
- Dates are sent as the local calendar day (toISOString() turned 21 Oct at
  local midnight into 20 Oct).
- FD Special: total interest paid out monthly, monthly payout, principal at
  maturity, maturity date, number of payouts, and "View payout schedule",
  which opens the existing Monthly Interest Payout Schedule dialog in a new
  preview mode (Days column, no paid / pending status).
- Preview step: FD Special labels (total interest paid out monthly,
  principal at maturity).
- FD product terms: choosing FD Special locks Interest Calculation Type to
  Simple, as Compounding and Posting are locked to Monthly (the backend
  refuses anything else).
- Preview step: three existing `!= null` template checks rewritten for the
  eqeqeq lint rule, same meaning.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-20 16:44:47 +05:30
niteshandClaude Opus 5.5 c3713f8a90 Merge feature/approval-live-badge-counts into dev-latest
Live pending-count badges on the Approval Center tabs and the Approvals menu,
served over one SSE stream.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-20 11:09:08 +05:30
niteshandClaude Sonnet 5.5 f804d356d7 fix(rd-products): save RD Interest Paid under expenses, as on FD and savings
The backend finds the account by name in any group. Products saved while it was under liabilities are still read from there, so the name is not left behind as an "other" liability row.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-20 10:48:37 +05:30
niteshandClaude Sonnet 5.5 1daa8e60a0 fix(cashier): keep the A/C TP kind on SD/FD/RD lookups in transaction entry
SD, FD and RD share one /savingsaccounts list that returns a deposit account of any kind for a number. The lookup now keeps only the deposit type chosen in A/C TP, and when the number belongs to another kind the error says so, so the clerk can fix A/C TP.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-20 10:48:23 +05:30
niteshandClaude Opus 5.5 55f5c1cf32 feat(ui): longer startup splash and updated loading animation
The startup splash now holds for at least 4 seconds (progress 2% per tick up to 90%)
instead of 2, and the loading animation is updated.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-16 12:31:24 +05:30
niteshandClaude Opus 5.5 6507e68203 feat(cashier): FD is credit-only on the transaction entry, and a Bank Transfer can fund an FD
- A Fixed Deposit row is credit-only on the clerk and cashier screens (isFdCreditOnly):
  its DR button is disabled, and Save refuses any FD row left on DR (for example by a
  Withdrawal Slip TYPE). Money leaves an FD only through its maturity or premature
  closure; the clerk's "Close this account" flow is the one exception.
- Bank Transfer / Fund Transfer accepts an FD on the CR side, so an FD can be funded from
  the customer's own Savings or Current account. The server enforces the funding rules
  (first and only funding, exactly the principal, the source account's owner, freeze
  status and available balance).

Requires the backend change "FD funding rules and no FD withdrawals from clerk/cashier requests".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-16 12:31:03 +05:30
niteshandClaude Sonnet 5.5 4d205672df feat(approvals): live pending-count badges on every Approval Center tab and the Approvals menu
The badges are pushed, not polled. ApprovalCountsService opens one
Server-Sent Events stream (/approvals/counts/stream) through HttpClient so the
login and tenant headers apply; the server writes a `counts` event the moment
the numbers change.

- Total badge on the Approvals menu, count badge on 26 Approval Center tabs
  (Reject Account and Terminated Account are lists, not requests: no badge).
- Last numbers are kept per login in localStorage, so a page refresh shows them
  at once until the stream's first event makes them exact.
- Stream recycles every few minutes and reconnects at once; after a failure it
  retries with a growing wait and reads /approvals/counts meanwhile.
- NO_PROGRESS_BAR token: the background stream does not run the top progress bar.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-15 15:49:36 +05:30
niteshandClaude Sonnet 5.5 ab8ed7e67e feat(vouchers): voucher correction screens and a correction status on the voucher registers
A cash deposit posted to the wrong account is moved to the right one in four steps: unpass the voucher, a manager
approves, the cashier enters the correct account, a manager approves again. Nothing changes on any account until
the final approval.

- Voucher Correction page with four-step strip and popups: today's vouchers to unpass (admin or clerk), the
  unpassed vouchers waiting for their correct account (cashier) with the wrong and correct account side by side
  and the balance check, and the caller's own requests. A cashier whose customer has used the money closes the
  request and deposits separately.
- Reached from the cashier bar, the clerk bar and the Cashier menu; the manager reviews both steps under
  Approvals > Voucher Corrections, laid out like the other approval tabs. Routes for Cash Transfers approvals are
  added to the same tab bar.
- A Correction column on My Vouchers, the day book and the voucher register (and in the voucher detail popup)
  says whether a voucher is unpassed, revoked in favour of another, a correction, or closed, with the reason.
- The deposit taken off the wrong account no longer shows on its passbook or transaction list.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-15 12:28:27 +05:30
niteshandClaude Sonnet 5.5 7ee230e58a feat(cashier): maker-checker on cash transfer, real branches, compact Approval Center
- Cash Transfer now raises a request ("Send for approval") instead of posting. A My Requests button in the
  page header opens the caller's requests with their status, and a Cash Transfers approvals page (review
  popup with the full denomination breakdown, approve, reject with a reason) lets a different manager release
  the cash.
- Transaction Entry's Branch dropdown lists the installation's real offices instead of a fixed list. A login
  that cannot read offices is offered only its own branch (read-only), so no "Unauthorized Request" popup.
- Approval Center header and tab bar made compact so more tabs fit on a 100% window.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-15 12:27:39 +05:30
niteshandClaude Sonnet 5.5 7f3c97a205 feat(cashier): GL withdrawal slips, GL account panel with parent GL, and Payment lock on token withdrawals
Transaction Entry:
- GL withdrawal slip: a GL Withdrawal Slip is always a debit. The clerk raises it as a
  request (GL, cash vault GL, office and currency ride on the payload), the manager
  approves it and the cashier pays it against its token; nothing posts directly from this
  screen any more (submitGlJournalEntry removed). Cashiers without an approved token are
  told to enter one. GL credit-only rules moved into isGlCreditOnly(), and extra rows are
  not allowed while a Withdrawal Slip is selected.
- A/C NO. now starts the automatic account search after six characters.
- Clerk: with AC. TP. = GL show a "GL Account Information" panel (code, name, type, usage,
  normal balance, parent GL, manual entries, status, description) instead of the empty
  client panels; the parent GL name is looked up from /glaccounts/{parentId} for GL only.
- Cashier: once a token (withdrawal / closure request) is verified, TYPE is disabled and
  fixed to Payment, and onTypChange refuses to change it.

Requires the backend change "GL withdrawal slips through request, approval and cashier payment".

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-14 13:51:38 +05:30
niteshandClaude Sonnet 5.5 4e3b49a96a feat(ui): remove Undo / Revert transaction actions
Removes the Undo button and Undo menu item from savings, current, fixed deposit, recurring deposit
and loan transactions, the account-transfer Undo, and the Revert Transaction button on the
journal entry transaction detail, to prevent accidental reversal of posted entries.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-13 18:41:39 +05:30
niteshandClaude Sonnet 5.5 915deddb74 feat(cashier): cashier-only cash operations, exchange PAN/denomination checks and Branch Cash Position
- Cash Exchange Entry: customer details with PAN (mandatory above Rs 50,000), cashier card,
  denomination-wise validation against the master and real-time impact preview.
- Inter-Cashier Transfer: sender fixed to the logged-in cashier, both sides' details and
  denomination holdings shown, blocked until both are allocated cash.
- Reconciliation, exchange and inter-cashier operate on the logged-in cashier only.
- New Branch Cash Position screen (vault + cashier drawers, denomination-wise).
- Customer search dialog shows the KYC PAN.
- Cashier menu cleanup: Excess/Closing report and Exchange Detail removed, nav compacted to one row.
- Reverse actions removed from cash transfer, settlement, exchange and inter-cashier.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-13 18:41:24 +05:30
177 changed files with 22638 additions and 3887 deletions
@@ -7,16 +7,6 @@
--> -->
<div class="container"> <div class="container">
<div class="container m-b-20 align-end gap-2px">
@if (!viewAccountTransferData.reversed) {
<span>
<button mat-raised-button color="warn" *mifosxHasPermission="'ADJUST_ACCOUNTTRANSFER'">
<fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
</button>
</span>
}
</div>
<mat-card> <mat-card>
<mat-card-content> <mat-card-content>
<div class="transfer-container"> <div class="transfer-container">
+12 -1
View File
@@ -10,7 +10,8 @@
/** Angular Imports */ /** Angular Imports */
import { Injectable, inject } from '@angular/core'; import { Injectable, inject } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http'; import { HttpClient, HttpContext, HttpParams } from '@angular/common/http';
import { SILENT_HTTP_ERROR } from 'app/core/http/silent-error.token';
/** rxjs Imports */ /** rxjs Imports */
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
@@ -198,6 +199,16 @@ export class AccountingService {
return this.http.get('/journalentries/ledger', { params: httpParams }); return this.http.get('/journalentries/ledger', { params: httpParams });
} }
/**
* The whole transfer a ledger transaction belongs to, when it is one branch's part of a transfer between branches.
* An extra, informational lookup: if it fails the screen simply shows no banner, so a failure raises no error popup.
*/
getInterBranchTransfer(transactionId: string): Observable<any> {
return this.http.get(`/accounting/interbranchtransfers/${transactionId}`, {
context: new HttpContext().set(SILENT_HTTP_ERROR, true)
});
}
/** /**
* @param {string} transactionId Transaction ID to be reverted. * @param {string} transactionId Transaction ID to be reverted.
* @param {string} comments Any comments. * @param {string} comments Any comments.
+16
View File
@@ -142,6 +142,22 @@ export class AmlService {
return this.http.get<any[]>('/aml/ctr-reports/lines', { params }); return this.http.get<any[]>('/aml/ctr-reports/lines', { params });
} }
/**
* Cash transactions of the threshold or more that no generated report contains yet, shaped like the lines above.
* They show on the FIU screen as soon as they are posted; generating the month is what files them.
*/
getCtrPendingLines(): Observable<any[]> {
return this.http.get<any[]>('/aml/ctr-reports/pending-lines');
}
/**
* How much came into and went out of each current / Cash Credit account over the last `days` days, with the
* customer's declared turnover and the sanctioned limit alongside.
*/
getCcTracking(days = 30): Observable<any> {
return this.http.get<any>('/aml/cc-tracking', { params: new HttpParams().set('days', String(days)) });
}
/** month format: yyyy-MM */ /** month format: yyyy-MM */
generateCtrReport(month: string): Observable<any> { generateCtrReport(month: string): Observable<any> {
return this.http.post('/aml/ctr-reports/generate', { month }); return this.http.post('/aml/ctr-reports/generate', { month });
@@ -0,0 +1,114 @@
<!--
Copyright since 2025 Mifos Initiative
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<div class="pg">
<header class="pg-head">
<div>
<div class="pg-eyebrow">BRANCH OPERATIONS · BRANCH CASH POSITION</div>
<h1 class="pg-title">Branch Cash Position</h1>
<p class="pg-sub">
The notes and coins the branch holds, denomination by denomination: the vault plus every cashier's drawer. Cash
moving between the vault and a cashier nets out; deposits, withdrawals and exchanges change it.
</p>
</div>
</header>
<div class="pg-toolbar pg-toolbar--mat">
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>As of Date</mat-label>
<input matInput type="date" [value]="asOfDate" (change)="onDateChange($any($event.target).value)" />
</mat-form-field>
<button type="button" class="pg-btn pg-btn--primary" (click)="load()" [disabled]="loading">
<mat-icon>refresh</mat-icon> Refresh
</button>
</div>
@if (errorMsg) {
<div class="pg-empty bcp-error">{{ errorMsg }}</div>
}
@if (loading) {
<div class="pg-empty">Loading…</div>
}
@if (position; as p) {
<div class="bcp-totals">
<div class="bcp-total">
<span>Branch</span><strong>{{ p.officeName }}</strong>
</div>
<div class="bcp-total">
<span>Vault</span><strong>₹{{ p.vaultAmount | number: '1.2-2' }}</strong>
</div>
<div class="bcp-total">
<span>Cashiers' drawers</span><strong>₹{{ p.cashiersAmount | number: '1.2-2' }}</strong>
</div>
<div class="bcp-total bcp-total--main">
<span>Bank total</span><strong>₹{{ p.totalAmount | number: '1.2-2' }}</strong>
</div>
</div>
@if (!p.vaultHasBreakdown) {
<div class="pg-empty bcp-note">
No vault denomination breakdown was recorded on or before {{ p.asOfDate }}, so the vault column reads 0. Open
the business day with a note/coin count to start tracking it.
</div>
}
<ng-template #table let-rows let-label="label" let-coin="coin">
@if (rows.length > 0) {
<div class="pos-section-label" [class.pos-section-label--coin]="coin">{{ label }}</div>
<table class="pg-table">
<thead>
<tr>
<th>Denomination</th>
<th class="num">Vault</th>
<th class="num">Cashiers</th>
<th class="num">Bank total (count)</th>
<th class="num">Bank total (₹)</th>
<th class="num">Exchange today</th>
</tr>
</thead>
<tbody>
@for (d of rows; track d.denominationId) {
<tr>
<td>
<span class="pg-chip" [class.pg-chip--coin]="coin">₹{{ d.denominationValue }}</span>
</td>
<td class="num">{{ d.vaultCount }}</td>
<td class="num">{{ d.cashierCount }}</td>
<td class="num bcp-strong">{{ d.totalCount }}</td>
<td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
<td
class="num bcp-move"
[class.bcp-move--in]="d.exchangeNet > 0"
[class.bcp-move--out]="d.exchangeNet < 0"
>
{{ movement(d.exchangeNet) }}
</td>
</tr>
}
</tbody>
</table>
}
</ng-template>
<div class="pg-card bcp-card">
<ng-container
*ngTemplateOutlet="table; context: { $implicit: notes(), label: 'Notes', coin: false }"
></ng-container>
<ng-container
*ngTemplateOutlet="table; context: { $implicit: coins(), label: 'Coins', coin: true }"
></ng-container>
</div>
<p class="bcp-foot">
<strong>Exchange today</strong> is the notes taken in less the notes given out by cash exchanges on
{{ p.asOfDate }}. It is already part of the Cashiers column; it is shown beside the total so a change in the mix
can be seen.
</p>
}
</div>
@@ -0,0 +1,82 @@
/**
* 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/.
*/
.bcp-error {
color: #dc2626;
}
.bcp-note {
margin-bottom: 12px;
text-align: left;
}
.bcp-totals {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 14px;
}
.bcp-total {
flex: 1 1 180px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
span {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
strong {
font-size: 18px;
font-weight: 700;
color: #0f172a;
}
&--main {
background: #e6f4ee;
border-color: #1f7a4d;
strong {
color: #0f4f3c;
}
}
}
.bcp-card {
margin-bottom: 14px;
}
.bcp-strong {
font-weight: 700;
}
.bcp-move {
font-weight: 700;
color: #94a3b8;
&--in {
color: #16a34a;
}
&--out {
color: #dc2626;
}
}
.bcp-foot {
margin: 0;
font-size: 12px;
color: #64748b;
}
@@ -0,0 +1,112 @@
/**
* 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 { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { CashierService } from '../cashier.service';
import { businessToday } from 'app/core/utils/business-today';
interface BranchDenomRow {
denominationId: number;
denominationValue: number;
kind: string;
vaultCount: number;
cashierCount: number;
totalCount: number;
totalAmount: number;
/** Notes taken in less notes given out by exchanges on the day. */
exchangeNet: number;
}
interface BranchPosition {
officeId: number;
officeName: string;
asOfDate: string;
vaultHasBreakdown: boolean;
vaultAmount: number;
cashiersAmount: number;
totalAmount: number;
denominations: BranchDenomRow[];
}
/**
* What the branch holds, denomination by denomination: the vault plus every cashier's drawer. An exchange
* (a customer hands in 10 x ₹500 and leaves with 50 x ₹100) leaves the vault alone and changes a drawer, so
* it only shows up in this total -- +10 on ₹500, -50 on ₹100.
*/
@Component({
selector: 'mifosx-branch-cash-position',
templateUrl: './branch-cash-position.component.html',
styleUrls: [
'../cashier-shared.scss',
'../cashier-position/cashier-position.component.scss',
'./branch-cash-position.component.scss'
],
standalone: true,
imports: [
CommonModule,
MatIconModule,
MatFormFieldModule,
MatInputModule
]
})
export class BranchCashPositionComponent implements OnInit {
private service = inject(CashierService);
asOfDate = '';
loading = false;
errorMsg = '';
position: BranchPosition | null = null;
ngOnInit(): void {
const d = businessToday();
this.asOfDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
this.load();
}
load(): void {
this.loading = true;
this.errorMsg = '';
this.position = null;
this.service
.branchCashPosition(this.asOfDate)
.pipe(catchError(() => of(null)))
.subscribe((data: BranchPosition | null) => {
this.loading = false;
if (!data) {
this.errorMsg = 'Could not load the branch cash position.';
return;
}
this.position = data;
});
}
onDateChange(value: string): void {
this.asOfDate = value;
this.load();
}
notes(): BranchDenomRow[] {
return (this.position?.denominations || []).filter((d) => d.kind !== 'coin');
}
coins(): BranchDenomRow[] {
return (this.position?.denominations || []).filter((d) => d.kind === 'coin');
}
/** "+10", "-50", or a dash when the day's exchanges did not touch the denomination. */
movement(net: number): string {
if (!net) return '—';
return net > 0 ? `+${net}` : `${net}`;
}
}
@@ -22,50 +22,255 @@
</div> </div>
</header> </header>
<!-- ── Customer Info Bar ── --> <!-- ── Cashier: whose drawer takes the customer's notes and gives the change ── -->
<div class="cx-customer-bar"> @if (cashier) {
<div <section class="cx-cashier">
class="cx-customer-toggle" <div class="cx-avatar cx-avatar--sm">{{ cashierInitials }}</div>
[class.cx-customer-toggle--active]="isAccountHolder" <div class="cx-cashier__id">
(click)="toggleAccountHolder()" <div class="cx-cashier__label">Cashier at the counter</div>
> <div class="cx-cashier__name">{{ cashier.name || '—' }}</div>
<mat-icon>{{ isAccountHolder ? 'check_box' : 'check_box_outline_blank' }}</mat-icon> <div class="cx-cashier__flow">
<span>Account Holder</span> <span><mat-icon>south</mat-icon> Receives from customer</span>
</div> <span><mat-icon>north</mat-icon> Gives to customer</span>
</div>
@if (isAccountHolder) {
<label class="cx-field cx-field--inline">
<span>Account No.</span>
<input
type="text"
[value]="accountNo"
(input)="accountNo = $any($event.target).value"
placeholder="e.g. 000101234567"
/>
</label>
} @else {
<span class="cx-walk-in"><mat-icon>person_outline</mat-icon> Walk-in Customer</span>
}
@if (needsIdProof) {
<div class="cx-pan-required">
<mat-icon>warning</mat-icon>
<span>Amount ≥ ₹50,000 — Customer PAN / Aadhaar required (RBI)</span>
</div> </div>
<label class="cx-field cx-field--inline cx-field--pan"> <div class="cx-cashier__stats">
<span>PAN / Aadhaar *</span> <div>
<input <span>Counter</span><strong>{{ cashier.tellerName || '—' }}</strong>
type="text" </div>
[value]="customerIdProof" <div>
(input)="customerIdProof = $any($event.target).value" <span>Branch</span><strong>{{ cashier.officeName || '—' }}</strong>
placeholder="ABCDE1234F" </div>
maxlength="20" <div>
/> <span>Allocated today</span
</label> ><strong>{{
} cashier.allocatedAmount === null ? '—' : '₹' + (cashier.allocatedAmount | number: '1.2-2')
</div> }}</strong>
</div>
<div>
<span>Cash in hand</span><strong>₹{{ cashier.totalAmount | number: '1.2-2' }}</strong>
</div>
</div>
</section>
} @else if (noCashier) {
<section class="cx-cashier cx-cashier--none">
<mat-icon>person_off</mat-icon>
<div>
<div class="cx-cashier__name">Your login is not linked to a cashier</div>
<div class="cx-cashier__label">
A cash exchange moves notes in and out of a cashier's drawer, so it can only be recorded by a cashier. Log in
as a cashier to continue.
</div>
</div>
</section>
}
<!-- ── Customer: an existing client (details from their record) or a walk-in identified at the counter ── -->
<section class="cx-cust">
<header class="cx-cust__head">
<div class="cx-cust__title">
<span class="cx-cust__title-icon"><mat-icon>groups</mat-icon></span>
<div>
<div class="cx-cust__title-text">Customer</div>
<div class="cx-cust__title-sub">Who is exchanging cash at the counter</div>
</div>
</div>
<div class="cx-cust__modes" role="tablist" aria-label="Customer type">
<button
type="button"
role="tab"
class="cx-cust__mode"
[class.cx-cust__mode--active]="customerMode === 'existing'"
[attr.aria-selected]="customerMode === 'existing'"
(click)="setCustomerMode('existing')"
>
<mat-icon>badge</mat-icon> Existing Customer
</button>
<button
type="button"
role="tab"
class="cx-cust__mode"
[class.cx-cust__mode--active]="customerMode === 'walkin'"
[attr.aria-selected]="customerMode === 'walkin'"
(click)="setCustomerMode('walkin')"
>
<mat-icon>person_outline</mat-icon> Walk-in Customer
</button>
</div>
</header>
<div class="cx-cust__body">
<!-- Who -->
<div class="cx-cust__who">
@if (customerMode === 'existing') {
@if (loadingCustomer) {
<div class="cx-cust__empty">
<mat-icon class="cx-cust__empty-icon cx-spin">autorenew</mat-icon>
<div class="cx-cust__empty-title">Loading customer details…</div>
</div>
} @else if (!selectedCustomer) {
<div class="cx-cust__empty">
<mat-icon class="cx-cust__empty-icon">person_search</mat-icon>
<div class="cx-cust__empty-title">No customer selected</div>
<div class="cx-cust__empty-sub">Search by name, account no., PAN or Aadhaar</div>
<button type="button" class="cx-btn cx-btn--primary" (click)="openCustomerSearch()">
<mat-icon>search</mat-icon> Search Customer
</button>
</div>
} @else {
<div class="cx-cust__card">
<div class="cx-cust__card-top">
<div class="cx-avatar">{{ customerInitials }}</div>
<div class="cx-cust__card-id">
<div class="cx-cust__name">{{ selectedCustomer.displayName }}</div>
<div class="cx-cust__badges">
<span
class="cx-kyc"
[class.cx-kyc--ok]="selectedCustomer.kycStatus === 'Verified'"
[class.cx-kyc--warn]="selectedCustomer.kycStatus !== 'Verified'"
>
<mat-icon>{{
selectedCustomer.kycStatus === 'Verified' ? 'verified_user' : 'gpp_maybe'
}}</mat-icon>
KYC: {{ selectedCustomer.kycStatus }}
</span>
@if (selectedCustomer.accountType) {
<span class="cx-chip-tag">{{ selectedCustomer.accountType }}</span>
}
</div>
</div>
<div class="cx-cust__card-actions">
<button type="button" class="cx-link-btn" (click)="openCustomerSearch()">
<mat-icon>swap_horiz</mat-icon> Change
</button>
<button type="button" class="cx-link-btn cx-link-btn--danger" (click)="clearCustomer()">
<mat-icon>close</mat-icon> Remove
</button>
</div>
</div>
<div class="cx-cust__grid">
<div>
<span>CIF No.</span><strong>{{ selectedCustomer.cifNumber || '—' }}</strong>
</div>
<div>
<span>Client ID</span><strong>{{ selectedCustomer.clientId }}</strong>
</div>
<div>
<span>Mobile</span><strong>{{ selectedCustomer.mobileNo || '—' }}</strong>
</div>
<div>
<span>Branch</span><strong>{{ selectedCustomer.officeName || '—' }}</strong>
</div>
<div>
<span>Account</span><strong>{{ selectedCustomer.accountNo || 'No account' }}</strong>
</div>
<div>
<span>PAN on record</span>
<strong>
{{ selectedCustomer.kycPan || 'Not on record' }}
@if (selectedCustomer.kycPan) {
<span
class="cx-kyc cx-kyc--sm"
[class.cx-kyc--ok]="selectedCustomer.panVerified"
[class.cx-kyc--warn]="!selectedCustomer.panVerified"
>{{ selectedCustomer.panVerified ? 'Verified' : 'Not verified' }}</span
>
}
</strong>
</div>
</div>
</div>
}
} @else {
<div class="cx-cust__walkin">
<label class="cx-field">
<span>Customer Name{{ needsPan ? ' *' : '' }}</span>
<input
type="text"
[value]="walkInName"
(input)="walkInName = $any($event.target).value"
placeholder="Full name as on ID"
maxlength="150"
autocomplete="off"
/>
</label>
<label class="cx-field">
<span>Mobile</span>
<input
type="tel"
inputmode="numeric"
[value]="walkInMobile"
(input)="walkInMobile = $any($event.target).value"
placeholder="10-digit mobile number"
maxlength="15"
autocomplete="off"
/>
</label>
</div>
}
</div>
<!-- PAN -->
<div
class="cx-pan"
[class.cx-pan--required]="panMissing"
[class.cx-pan--invalid]="panFormatInvalid"
[class.cx-pan--valid]="panValue && !panFormatInvalid"
>
<div class="cx-pan__head">
<mat-icon>credit_card</mat-icon>
<span class="cx-pan__label">PAN Card</span>
<span class="cx-pan__tag" [class.cx-pan__tag--on]="needsPan">{{ needsPan ? 'Mandatory' : 'Optional' }}</span>
</div>
<div class="cx-pan__input">
<input
type="text"
[value]="panNumber"
(input)="panNumber = $any($event.target).value.toUpperCase()"
placeholder="ABCDE1234F"
maxlength="10"
autocomplete="off"
spellcheck="false"
aria-label="PAN number"
/>
@if (panValue && !panFormatInvalid) {
<mat-icon class="cx-pan__state cx-pan__state--ok">check_circle</mat-icon>
} @else if (panFormatInvalid) {
<mat-icon class="cx-pan__state cx-pan__state--bad">error</mat-icon>
}
</div>
<div class="cx-pan__hint">
@if (panFormatInvalid) {
PAN is 5 letters, 4 digits, 1 letter (e.g. ABCDE1234F).
} @else if (panFromKyc) {
<mat-icon>link</mat-icon> Fetched from the customer's KYC record.
} @else if (panMissing) {
Required: this exchange is above ₹50,000 (Income Tax Rule 114B / RBI).
} @else {
Mandatory for exchanges above ₹50,000.
}
</div>
</div>
</div>
</section>
<div class="cx-cols"> <div class="cx-cols">
<!-- The cashier's count of a denomination and what this exchange does to it, updated as counts are typed. -->
<ng-template #drawerCell let-d="d">
@if (availableFor(d) === null) {
—
} @else {
In drawer <strong>{{ availableFor(d) }}</strong>
@if (netFor(d) !== 0) {
<span class="cx-after">
<mat-icon>{{ netFor(d) > 0 ? 'trending_up' : 'trending_down' }}</mat-icon>
<strong>{{ drawerAfter(d) }}</strong>
<small>({{ netFor(d) > 0 ? '+' : '' }}{{ netFor(d) }})</small>
</span>
}
}
</ng-template>
<!-- RECEIVED --> <!-- RECEIVED -->
<section class="cx-col cx-col--received"> <section class="cx-col cx-col--received">
<header class="cx-col-head"> <header class="cx-col-head">
@@ -78,7 +283,7 @@
<div class="cx-subhead">Bank Notes</div> <div class="cx-subhead">Bank Notes</div>
} }
@for (d of notes; track d.id) { @for (d of notes; track d.id) {
<div class="cx-row"> <div class="cx-row cx-row--stock">
<span class="cx-chip">{{ d.label }}</span> <span class="cx-chip">{{ d.label }}</span>
<div class="cx-step"> <div class="cx-step">
<button type="button" (click)="bump('r', d, -1)" [disabled]="countFor('r', d) === 0">−</button> <button type="button" (click)="bump('r', d, -1)" [disabled]="countFor('r', d) === 0">−</button>
@@ -90,6 +295,9 @@
/> />
<button type="button" (click)="bump('r', d, 1)">+</button> <button type="button" (click)="bump('r', d, 1)">+</button>
</div> </div>
<span class="cx-avail" [class.cx-avail--up]="netFor(d) > 0" [class.cx-avail--down]="netFor(d) < 0">
<ng-container *ngTemplateOutlet="drawerCell; context: { d: d }"></ng-container>
</span>
<span class="cx-amt" [class.cx-amt--zero]="countFor('r', d) === 0" <span class="cx-amt" [class.cx-amt--zero]="countFor('r', d) === 0"
>₹{{ subtotal('r', d) | number: '1.2-2' }}</span >₹{{ subtotal('r', d) | number: '1.2-2' }}</span
> >
@@ -99,7 +307,7 @@
<div class="cx-subhead">Coins</div> <div class="cx-subhead">Coins</div>
} }
@for (d of coins; track d.id) { @for (d of coins; track d.id) {
<div class="cx-row"> <div class="cx-row cx-row--stock">
<span class="cx-chip cx-chip--coin">{{ d.label }}</span> <span class="cx-chip cx-chip--coin">{{ d.label }}</span>
<div class="cx-step"> <div class="cx-step">
<button type="button" (click)="bump('r', d, -1)" [disabled]="countFor('r', d) === 0">−</button> <button type="button" (click)="bump('r', d, -1)" [disabled]="countFor('r', d) === 0">−</button>
@@ -111,6 +319,9 @@
/> />
<button type="button" (click)="bump('r', d, 1)">+</button> <button type="button" (click)="bump('r', d, 1)">+</button>
</div> </div>
<span class="cx-avail" [class.cx-avail--up]="netFor(d) > 0" [class.cx-avail--down]="netFor(d) < 0">
<ng-container *ngTemplateOutlet="drawerCell; context: { d: d }"></ng-container>
</span>
<span class="cx-amt" [class.cx-amt--zero]="countFor('r', d) === 0" <span class="cx-amt" [class.cx-amt--zero]="countFor('r', d) === 0"
>₹{{ subtotal('r', d) | number: '1.2-2' }}</span >₹{{ subtotal('r', d) | number: '1.2-2' }}</span
> >
@@ -131,7 +342,7 @@
<div class="cx-subhead">Bank Notes</div> <div class="cx-subhead">Bank Notes</div>
} }
@for (d of notes; track d.id) { @for (d of notes; track d.id) {
<div class="cx-row"> <div class="cx-row cx-row--stock" [class.cx-row--over]="exceedsAvailable(d)">
<span class="cx-chip">{{ d.label }}</span> <span class="cx-chip">{{ d.label }}</span>
<div class="cx-step"> <div class="cx-step">
<button type="button" (click)="bump('g', d, -1)" [disabled]="countFor('g', d) === 0">−</button> <button type="button" (click)="bump('g', d, -1)" [disabled]="countFor('g', d) === 0">−</button>
@@ -141,8 +352,16 @@
[value]="countFor('g', d)" [value]="countFor('g', d)"
(input)="onChange('g', d, $any($event.target).value)" (input)="onChange('g', d, $any($event.target).value)"
/> />
<button type="button" (click)="bump('g', d, 1)">+</button> <button type="button" (click)="bump('g', d, 1)" [disabled]="!canGiveMore(d)">+</button>
</div> </div>
<span
class="cx-avail"
[class.cx-avail--up]="netFor(d) > 0"
[class.cx-avail--down]="netFor(d) < 0"
[class.cx-avail--over]="exceedsAvailable(d)"
>
<ng-container *ngTemplateOutlet="drawerCell; context: { d: d }"></ng-container>
</span>
<span class="cx-amt" [class.cx-amt--zero]="countFor('g', d) === 0" <span class="cx-amt" [class.cx-amt--zero]="countFor('g', d) === 0"
>₹{{ subtotal('g', d) | number: '1.2-2' }}</span >₹{{ subtotal('g', d) | number: '1.2-2' }}</span
> >
@@ -152,7 +371,7 @@
<div class="cx-subhead">Coins</div> <div class="cx-subhead">Coins</div>
} }
@for (d of coins; track d.id) { @for (d of coins; track d.id) {
<div class="cx-row"> <div class="cx-row cx-row--stock" [class.cx-row--over]="exceedsAvailable(d)">
<span class="cx-chip cx-chip--coin">{{ d.label }}</span> <span class="cx-chip cx-chip--coin">{{ d.label }}</span>
<div class="cx-step"> <div class="cx-step">
<button type="button" (click)="bump('g', d, -1)" [disabled]="countFor('g', d) === 0">−</button> <button type="button" (click)="bump('g', d, -1)" [disabled]="countFor('g', d) === 0">−</button>
@@ -162,8 +381,16 @@
[value]="countFor('g', d)" [value]="countFor('g', d)"
(input)="onChange('g', d, $any($event.target).value)" (input)="onChange('g', d, $any($event.target).value)"
/> />
<button type="button" (click)="bump('g', d, 1)">+</button> <button type="button" (click)="bump('g', d, 1)" [disabled]="!canGiveMore(d)">+</button>
</div> </div>
<span
class="cx-avail"
[class.cx-avail--up]="netFor(d) > 0"
[class.cx-avail--down]="netFor(d) < 0"
[class.cx-avail--over]="exceedsAvailable(d)"
>
<ng-container *ngTemplateOutlet="drawerCell; context: { d: d }"></ng-container>
</span>
<span class="cx-amt" [class.cx-amt--zero]="countFor('g', d) === 0" <span class="cx-amt" [class.cx-amt--zero]="countFor('g', d) === 0"
>₹{{ subtotal('g', d) | number: '1.2-2' }}</span >₹{{ subtotal('g', d) | number: '1.2-2' }}</span
> >
@@ -173,6 +400,30 @@
</section> </section>
</div> </div>
<!-- What this exchange does to the cashier's drawer, denomination by denomination. -->
@if (impactRows.length) {
<div class="cx-impact">
<div class="cx-impact__title"><mat-icon>inventory_2</mat-icon> Drawer after this exchange</div>
<div class="cx-impact__chips">
@for (r of impactRows; track r.id) {
<span
class="cx-impact__chip"
[class.cx-impact__chip--up]="r.net > 0"
[class.cx-impact__chip--down]="r.net < 0"
>
<b>{{ r.label }}</b>
{{ r.before }} → {{ r.after }}
<em>({{ r.net > 0 ? '+' : '' }}{{ r.net }})</em>
</span>
}
</div>
<div class="cx-impact__note">
The branch's total for each denomination moves by the same amount; the vault is not touched (Branch Ops → Branch
Cash Position).
</div>
</div>
}
<div class="cx-summary"> <div class="cx-summary">
<div class="cx-sum"> <div class="cx-sum">
<span>Received</span><strong>₹{{ receivedTotal | number: '1.2-2' }}</strong> <span>Received</span><strong>₹{{ receivedTotal | number: '1.2-2' }}</strong>
@@ -213,9 +464,15 @@
</div> </div>
</div> </div>
} }
@if (needsIdProof && !customerIdProof.trim()) { @if (panMissing) {
<div class="cx-warn cx-warn--pan"> <div class="cx-warn cx-warn--pan">
<mat-icon>badge</mat-icon> Enter customer PAN / Aadhaar to proceed (amount ≥ ₹50,000). <mat-icon>badge</mat-icon> Enter the customer's PAN to proceed (amount above ₹50,000).
</div>
}
@if (!customerIdentified && !loadingCustomer) {
<div class="cx-warn cx-warn--pan">
<mat-icon>person_search</mat-icon>
{{ customerMode === 'existing' ? 'Search and select the customer.' : "Enter the walk-in customer's name." }}
</div> </div>
} }
@@ -73,99 +73,584 @@
} }
} }
/* ── Customer info bar ── */ /* ── Customer: existing client or walk-in, plus PAN ── */
.cx-customer-bar { .cx-cust {
display: flex; background: #fff;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: #f8fafc;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
border-radius: 10px; border-radius: 14px;
flex-wrap: wrap; box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
} overflow: hidden;
.cx-customer-toggle { &__head {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; justify-content: space-between;
font-size: 13px; flex-wrap: wrap;
font-weight: 600; gap: 12px;
color: #475569; padding: 12px 16px;
cursor: pointer; background: linear-gradient(180deg, #f8fafc, #f1f5f9);
user-select: none; border-bottom: 1px solid #e2e8f0;
}
mat-icon { &__title {
font-size: 20px; display: flex;
height: 20px; align-items: center;
width: 20px; gap: 10px;
}
&__title-icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: #e6f4ee;
color: #0f4f3c;
mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
}
}
&__title-text {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
&__title-sub {
font-size: 12px;
color: #64748b;
}
&__modes {
display: inline-flex;
padding: 3px;
background: #e2e8f0;
border-radius: 10px;
}
&__mode {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 14px;
border: 0;
border-radius: 8px;
background: transparent;
font-size: 13px;
font-weight: 600;
color: #475569;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
&:hover {
color: #0f172a;
}
&--active,
&--active:hover {
background: #fff;
color: #0f4f3c;
box-shadow: 0 1px 3px rgb(15 23 42 / 15%);
}
}
&__body {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
gap: 16px;
padding: 16px;
}
&__who {
min-width: 0;
}
/* Nothing picked yet, or loading */
&__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 150px;
padding: 20px;
text-align: center;
background: #f8fafc;
border: 1.5px dashed #cbd5e1;
border-radius: 12px;
}
&__empty-icon {
font-size: 36px;
width: 36px;
height: 36px;
color: #94a3b8; color: #94a3b8;
} }
&--active { &__empty-title {
color: #1e40af; font-size: 14px;
font-weight: 600;
color: #334155;
}
&__empty-sub {
margin-bottom: 8px;
font-size: 12px;
color: #64748b;
}
/* A picked client */
&__card {
padding: 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
&__card-top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
&__card-id {
flex: 1 1 180px;
min-width: 0;
}
&__name {
font-size: 16px;
font-weight: 700;
color: #0f172a;
overflow-wrap: anywhere;
}
&__badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
&__card-actions {
display: flex;
gap: 4px;
}
&__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px 16px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed #e2e8f0;
span {
display: block;
margin-bottom: 2px;
font-size: 11px;
color: #64748b;
}
strong {
font-size: 13px;
font-weight: 600;
color: #0f172a;
}
}
/* A walk-in, identified at the counter */
&__walkin {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
.cx-field {
font-size: 12px;
}
.cx-field input {
width: 100%;
height: 40px;
box-sizing: border-box;
}
}
.cx-field input:focus {
outline: none;
border-color: #1f7a4d;
box-shadow: 0 0 0 3px rgb(31 122 77 / 15%);
}
}
.cx-avatar {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #1f7a4d, #0f4f3c);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
&--sm {
width: 40px;
height: 40px;
font-size: 14px;
}
}
/* The cashier at the counter, or why there is none */
.cx-cashier {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 20px;
padding: 12px 16px;
background: #fff;
border: 1px solid #e2e8f0;
border-left: 4px solid #1f7a4d;
border-radius: 14px;
box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
&__id {
flex: 1 1 220px;
min-width: 0;
}
&__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
&__name {
font-size: 16px;
font-weight: 700;
color: #0f172a;
}
&__flow {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 2px;
font-size: 12px;
color: #475569;
span {
display: inline-flex;
align-items: center;
gap: 2px;
}
mat-icon { mat-icon {
color: #1e40af; font-size: 14px;
width: 14px;
height: 14px;
color: #94a3b8;
}
}
&__stats {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
span {
display: block;
font-size: 11px;
color: #64748b;
}
strong {
font-size: 14px;
font-weight: 600;
color: #0f172a;
}
}
&--none {
background: #fffbeb;
border-color: #fcd34d;
border-left-color: #d97706;
mat-icon {
color: #d97706;
}
.cx-cashier__label {
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: #92400e;
} }
} }
} }
.cx-walk-in { .cx-kyc {
display: flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
font-size: 12px; padding: 2px 8px;
color: #64748b; border-radius: 999px;
font-size: 11px;
font-weight: 600;
mat-icon { mat-icon {
font-size: 16px; font-size: 14px;
height: 16px; width: 14px;
width: 16px; height: 14px;
}
&--ok {
background: #dcfce7;
color: #166534;
}
&--warn {
background: #fef3c7;
color: #92400e;
}
&--sm {
margin-left: 6px;
padding: 1px 6px;
font-size: 10px;
} }
} }
.cx-pan-required { .cx-chip-tag {
display: flex; padding: 2px 8px;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 6px; border-radius: 6px;
background: #eef2ff;
font-size: 11px;
font-weight: 600;
color: #3730a3;
}
.cx-link-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 30px;
padding: 0 10px;
border: 0;
border-radius: 8px;
background: transparent;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: #92400e; color: #1e40af;
cursor: pointer;
mat-icon { mat-icon {
font-size: 16px; font-size: 16px;
height: 16px;
width: 16px; width: 16px;
color: #d97706; height: 16px;
}
&:hover {
background: #eff6ff;
}
&--danger {
color: #b91c1c;
&:hover {
background: #fef2f2;
}
} }
} }
.cx-field--inline { /* PAN: neutral until needed, amber when required and missing, red when malformed, green when valid */
flex-direction: row; .cx-pan {
align-items: center; display: flex;
flex-direction: column;
align-self: start;
gap: 8px; gap: 8px;
padding: 14px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
span { &__head {
white-space: nowrap; display: flex;
align-items: center;
gap: 8px;
mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: #475569;
}
} }
input { &__label {
width: 180px; font-size: 13px;
font-weight: 700;
color: #0f172a;
}
&__tag {
margin-left: auto;
padding: 2px 8px;
border-radius: 999px;
background: #e2e8f0;
font-size: 11px;
font-weight: 600;
color: #475569;
&--on {
background: #fef3c7;
color: #92400e;
}
}
&__input {
position: relative;
input {
width: 100%;
height: 44px;
box-sizing: border-box;
padding: 0 40px 0 12px;
background: #fff;
border: 1.5px solid #cbd5e1;
border-radius: 10px;
font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #0f172a;
&::placeholder {
font-weight: 500;
color: #cbd5e1;
}
&:focus {
outline: none;
border-color: #1f7a4d;
box-shadow: 0 0 0 3px rgb(31 122 77 / 15%);
}
}
}
&__state {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-size: 22px;
width: 22px;
height: 22px;
&--ok {
color: #16a34a;
}
&--bad {
color: #dc2626;
}
}
&__hint {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #64748b;
mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
}
&--required {
background: #fffbeb;
border-color: #fcd34d;
.cx-pan__input input {
border-color: #f59e0b;
}
.cx-pan__hint {
font-weight: 600;
color: #92400e;
}
}
&--invalid {
background: #fef2f2;
border-color: #fecaca;
.cx-pan__input input {
border-color: #ef4444;
}
.cx-pan__hint {
font-weight: 600;
color: #b91c1c;
}
}
&--valid {
background: #f0fdf4;
border-color: #bbf7d0;
.cx-pan__input input {
border-color: #22c55e;
}
.cx-pan__hint {
color: #166534;
}
} }
} }
.cx-field--pan input { .cx-spin {
width: 160px; animation: cx-spin 1s linear infinite;
border-color: #fcd34d; }
&:focus { @keyframes cx-spin {
outline: none; to {
border-color: #d97706; transform: rotate(360deg);
}
}
@media (width <= 900px) {
.cx-cust__body {
grid-template-columns: 1fr;
}
}
@media (width <= 600px) {
.cx-cust__walkin {
grid-template-columns: 1fr;
} }
} }
@@ -345,6 +830,129 @@
border-bottom: 1px dotted #eef2f7; border-bottom: 1px dotted #eef2f7;
} }
/* Both sides: the cashier's count of each denomination sits between the counter and the amount. */
.cx-row--stock {
grid-template-columns: 64px 120px 1fr 96px;
}
.cx-row--over {
background: #fef2f2;
}
.cx-avail {
padding-left: 6px;
font-size: 12px;
color: #64748b;
strong {
font-weight: 700;
color: #0f172a;
}
/* the count after this exchange: green when it goes up, red when it goes down */
.cx-after {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 6px;
font-weight: 600;
mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
small {
font-size: 11px;
}
}
&--up .cx-after,
&--up .cx-after strong {
color: #15803d;
}
&--down .cx-after,
&--down .cx-after strong {
color: #b45309;
}
&--over,
&--over strong,
&--over .cx-after,
&--over .cx-after strong {
color: #b91c1c;
}
}
/* The drawer after the whole exchange, one chip per denomination it changes */
.cx-impact {
padding: 12px 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
&__title {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
color: #0f172a;
mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #475569;
}
}
&__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
&__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 8px;
background: #f1f5f9;
font-size: 12px;
color: #334155;
b {
font-weight: 700;
}
em {
font-style: normal;
font-weight: 700;
}
&--up {
background: #dcfce7;
color: #166534;
}
&--down {
background: #fef3c7;
color: #92400e;
}
}
&__note {
margin-top: 8px;
font-size: 11px;
color: #64748b;
}
}
.cx-chip { .cx-chip {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -11,7 +11,15 @@ import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { forkJoin, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { CashierService } from '../cashier.service'; import { CashierService } from '../cashier.service';
import { ClientsService } from 'app/clients/clients.service';
import {
CustomerSearchDialogComponent,
CustomerSearchResult
} from 'app/shared/customer-search-dialog/customer-search-dialog.component';
import { businessToday } from 'app/core/utils/business-today'; import { businessToday } from 'app/core/utils/business-today';
interface Denom { interface Denom {
@@ -21,6 +29,47 @@ interface Denom {
label: string; label: string;
} }
/** An existing client picked through Customer Search, with what the counter needs to identify them. */
interface SelectedCustomer {
clientId: number;
displayName: string;
cifNumber: string | null;
mobileNo: string | null;
officeName: string | null;
accountNo: string | null;
accountType: string | null;
/** PAN on the client's KYC record, if any. */
kycPan: string | null;
panVerified: boolean;
kycStatus: string;
}
/** The cashier at the counter: the one who takes the customer's notes and hands over the change. */
interface CashierInfo {
cashierId: number;
name: string;
tellerName: string | null;
officeName: string | null;
/** Cash the vault allocated to them for the day, once known. */
allocatedAmount: number | null;
/** Cash they hold now. */
totalAmount: number;
}
/** Same rule as ClientKycApiConstants.PAN_REGEX on the server: 5 letters, 4 digits, 1 letter. */
const PAN_PATTERN = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
/** Income Tax Rule 114B / RBI: a cash exchange above this needs the customer's PAN. */
const PAN_MANDATORY_ABOVE = 50000;
const KYC_STATUS: Record<number, string> = {
100: 'Pending',
200: 'In Progress',
300: 'Verified',
400: 'Rejected',
500: 'Expired'
};
/** Cashier cash-exchange entry: customer gives some denominations and takes equal-value change (net 0). */ /** Cashier cash-exchange entry: customer gives some denominations and takes equal-value change (net 0). */
@Component({ @Component({
selector: 'mifosx-cash-exchange-entry', selector: 'mifosx-cash-exchange-entry',
@@ -31,11 +80,14 @@ interface Denom {
CommonModule, CommonModule,
FormsModule, FormsModule,
MatIconModule, MatIconModule,
MatSnackBarModule MatSnackBarModule,
MatDialogModule
] ]
}) })
export class CashExchangeEntryComponent implements OnInit { export class CashExchangeEntryComponent implements OnInit {
private service = inject(CashierService); private service = inject(CashierService);
private clientsService = inject(ClientsService);
private dialog = inject(MatDialog);
private snackBar = inject(MatSnackBar); private snackBar = inject(MatSnackBar);
notes: Denom[] = []; notes: Denom[] = [];
@@ -47,11 +99,17 @@ export class CashExchangeEntryComponent implements OnInit {
saving = false; saving = false;
// ── Customer info ── // ── Customer info ──
isAccountHolder = false; /** An existing client found through Customer Search, or a walk-in identified at the counter. */
accountNo = ''; customerMode: 'existing' | 'walkin' = 'walkin';
customerIdProof = ''; selectedCustomer: SelectedCustomer | null = null;
loadingCustomer = false;
walkInName = '';
walkInMobile = '';
panNumber = '';
// ── Cashier position (for denomination overdraft check) ── // ── Cashier at the counter, and their position (for the denomination overdraft check) ──
/** The cashier linked to the logged-in user; null when the login is not a cashier's. */
cashier: CashierInfo | null = null;
private availableMap = new Map<number, number>(); private availableMap = new Map<number, number>();
positionLoaded = false; positionLoaded = false;
@@ -88,7 +146,19 @@ export class CashExchangeEntryComponent implements OnInit {
((res?.denominations || []) as any[]).forEach((d: any) => { ((res?.denominations || []) as any[]).forEach((d: any) => {
if (d.denominationId) this.availableMap.set(Number(d.denominationId), Number(d.count ?? 0)); if (d.denominationId) this.availableMap.set(Number(d.denominationId), Number(d.count ?? 0));
}); });
const cashierId = res?.cashierId ? Number(res.cashierId) : null;
this.cashier = cashierId
? {
cashierId,
name: res.cashierName || '',
tellerName: null,
officeName: null,
allocatedAmount: null,
totalAmount: Number(res.totalAmount ?? 0)
}
: null;
this.positionLoaded = true; this.positionLoaded = true;
if (cashierId) this.loadCashierDetails(cashierId);
}, },
error: () => { error: () => {
this.positionLoaded = true; this.positionLoaded = true;
@@ -96,6 +166,31 @@ export class CashExchangeEntryComponent implements OnInit {
}); });
} }
/** The counter, branch and today's allocation; the card still shows name and cash in hand without them. */
private loadCashierDetails(cashierId: number): void {
this.service
.getInterCashierCashierSummary(cashierId, this.exchangeDate)
.pipe(catchError(() => of(null)))
.subscribe((r: any) => {
if (!r || this.cashier?.cashierId !== cashierId) return;
this.cashier = {
...this.cashier,
tellerName: r.tellerName || null,
officeName: r.officeName || null,
allocatedAmount: Number(r.allocatedAmount ?? 0)
};
});
}
/** Up to two letters for the cashier's avatar. */
get cashierInitials(): string {
const words = (this.cashier?.name || '').trim().split(/\s+/).filter(Boolean);
if (words.length === 0) return '?';
const first = words[0].charAt(0);
const last = words.length > 1 ? words[words.length - 1].charAt(0) : '';
return (first + last).toUpperCase();
}
countFor(side: 'r' | 'g', d: Denom): number { countFor(side: 'r' | 'g', d: Denom): number {
return (side === 'r' ? this.receivedCounts : this.givenCounts)[d.id] || 0; return (side === 'r' ? this.receivedCounts : this.givenCounts)[d.id] || 0;
} }
@@ -129,14 +224,102 @@ export class CashExchangeEntryComponent implements OnInit {
return this.receivedTotal > 0 && this.receivedTotal === this.givenTotal; return this.receivedTotal > 0 && this.receivedTotal === this.givenTotal;
} }
/** Above ₹50,000 PAN/ID is mandatory per RBI guideline */ /** Above ₹50,000 the customer's PAN is mandatory (Income Tax Rule 114B, followed under RBI guidelines). */
get needsIdProof(): boolean { get needsPan(): boolean {
return this.receivedTotal >= 50000; return this.receivedTotal > PAN_MANDATORY_ABOVE;
}
/** Up to two letters for the avatar: first and last word of the customer's name. */
get customerInitials(): string {
const words = (this.selectedCustomer?.displayName || '').trim().split(/\s+/).filter(Boolean);
if (words.length === 0) return '?';
const first = words[0].charAt(0);
const last = words.length > 1 ? words[words.length - 1].charAt(0) : '';
return (first + last).toUpperCase();
}
get panValue(): string {
return this.panNumber.trim().toUpperCase();
}
/** A PAN that is entered must be well-formed, required or not. */
get panFormatInvalid(): boolean {
return !!this.panValue && !PAN_PATTERN.test(this.panValue);
}
get panMissing(): boolean {
return this.needsPan && !this.panValue;
}
/** The PAN comes from the client's KYC record, so the cashier confirms it rather than types it. */
get panFromKyc(): boolean {
return !!this.selectedCustomer?.kycPan && this.panValue === this.selectedCustomer.kycPan.toUpperCase();
}
/** Who the customer is has to be known: a picked client, or a walk-in's name once PAN is required. */
get customerIdentified(): boolean {
if (this.customerMode === 'existing') return !!this.selectedCustomer;
return !this.needsPan || this.walkInName.trim().length > 0;
}
/** A login with no cashier behind it has no drawer to take notes into or give change from. */
get noCashier(): boolean {
return this.positionLoaded && !this.cashier;
}
/** How many of the denomination the cashier holds, or null while that is not known (loading, or no cashier). */
availableFor(d: Denom): number | null {
if (!this.positionLoaded || !this.cashier) return null;
return this.availableMap.get(d.id) ?? 0;
}
/** The cashier is giving more of this denomination than they hold. */
exceedsAvailable(d: Denom): boolean {
const available = this.availableFor(d);
return available !== null && this.countFor('g', d) > available;
}
/** The + on the given side stops at what the cashier holds; a larger typed number is still caught and shown. */
canGiveMore(d: Denom): boolean {
const available = this.availableFor(d);
return available === null || this.countFor('g', d) < available;
}
/** What this exchange does to the cashier's count of the denomination: notes taken in less notes given out. */
netFor(d: Denom): number {
return this.countFor('r', d) - this.countFor('g', d);
}
/** The cashier's count of the denomination once this exchange is recorded, or null while it is not known. */
drawerAfter(d: Denom): number | null {
const available = this.availableFor(d);
return available === null ? null : available + this.netFor(d);
}
/**
* The denominations this exchange changes, with the drawer's count before and after, so the effect shows
* while the counts are being typed. The branch's total for each denomination moves by the same amount, as
* the customer's notes go into the drawer and the change comes out of it; the vault is not involved.
*/
get impactRows(): Array<{ id: number; label: string; kind: string; net: number; before: number; after: number }> {
if (!this.positionLoaded || !this.cashier) return [];
return this.denoms
.filter((d) => this.netFor(d) !== 0)
.map((d) => ({
id: d.id,
label: d.label,
kind: d.kind,
net: this.netFor(d),
before: this.availableFor(d) ?? 0,
after: this.drawerAfter(d) ?? 0
}));
} }
/** Denominations where cashier is giving more than currently available. */ /** Denominations where cashier is giving more than currently available. */
get givenOverdraftItems(): Array<{ label: string; available: number; requested: number }> { get givenOverdraftItems(): Array<{ label: string; available: number; requested: number }> {
if (!this.positionLoaded) return []; // Without a cashier every denomination would read as "0 available"; the missing cashier is the
// thing to tell the user, not a stock shortage.
if (!this.positionLoaded || !this.cashier) return [];
return this.denoms return this.denoms
.map((d) => ({ label: d.label, available: this.availableMap.get(d.id) ?? 0, requested: this.countFor('g', d) })) .map((d) => ({ label: d.label, available: this.availableMap.get(d.id) ?? 0, requested: this.countFor('g', d) }))
.filter((item) => item.requested > 0 && item.requested > item.available); .filter((item) => item.requested > 0 && item.requested > item.available);
@@ -147,21 +330,77 @@ export class CashExchangeEntryComponent implements OnInit {
} }
get valid(): boolean { get valid(): boolean {
return this.matches && (!this.needsIdProof || this.customerIdProof.trim().length > 0) && !this.hasGivenOverdraft; return (
this.matches &&
!!this.cashier &&
!this.hasGivenOverdraft &&
!this.panFormatInvalid &&
!this.panMissing &&
this.customerIdentified &&
!this.loadingCustomer
);
} }
toggleAccountHolder(): void { setCustomerMode(mode: 'existing' | 'walkin'): void {
this.isAccountHolder = !this.isAccountHolder; if (this.customerMode === mode) return;
if (!this.isAccountHolder) this.accountNo = ''; this.customerMode = mode;
this.selectedCustomer = null;
this.walkInName = '';
this.walkInMobile = '';
this.panNumber = '';
}
/** Pick an existing client through Customer Search, then load their details and KYC (PAN). */
openCustomerSearch(): void {
this.dialog
// An existing customer without an account is still a known customer, so the account is not required.
.open(CustomerSearchDialogComponent, { width: '960px', maxWidth: '95vw', data: { requireAccount: false } })
.afterClosed()
.subscribe((result: CustomerSearchResult | undefined) => {
if (!result?.clientId) return;
this.loadCustomer(result);
});
}
private loadCustomer(result: CustomerSearchResult): void {
this.loadingCustomer = true;
const id = String(result.clientId);
forkJoin({
client: this.clientsService.getClientData(id, true).pipe(catchError(() => of(null))),
kyc: this.clientsService.getClientKyc(id, true).pipe(catchError(() => of(null)))
}).subscribe(({ client, kyc }: { client: any; kyc: any }) => {
const kycPan: string | null = kyc?.panNumber || result.panNumber || null;
this.selectedCustomer = {
clientId: result.clientId,
displayName: client?.displayName || result.displayName,
cifNumber: client?.cifNumber || null,
mobileNo: client?.mobileNo || result.mobileNo || null,
officeName: client?.officeName || result.officeName || null,
accountNo: result.accountNo || null,
accountType: result.accountType || null,
kycPan,
panVerified: !!kyc?.panVerified,
kycStatus: KYC_STATUS[Number(kyc?.kycStatus?.id ?? kyc?.kycStatus)] || 'Not on record'
};
this.panNumber = kycPan ? kycPan.toUpperCase() : '';
this.loadingCustomer = false;
});
}
clearCustomer(): void {
this.selectedCustomer = null;
this.panNumber = '';
} }
clear(): void { clear(): void {
this.receivedCounts = {}; this.receivedCounts = {};
this.givenCounts = {}; this.givenCounts = {};
this.note = ''; this.note = '';
this.accountNo = ''; this.customerMode = 'walkin';
this.customerIdProof = ''; this.selectedCustomer = null;
this.isAccountHolder = false; this.walkInName = '';
this.walkInMobile = '';
this.panNumber = '';
} }
submit(): void { submit(): void {
@@ -171,11 +410,17 @@ export class CashExchangeEntryComponent implements OnInit {
this.denoms this.denoms
.filter((d) => this.countFor(side, d) > 0) .filter((d) => this.countFor(side, d) > 0)
.map((d) => ({ denominationId: d.id, denominationValue: d.value, count: this.countFor(side, d) })); .map((d) => ({ denominationId: d.id, denominationValue: d.value, count: this.countFor(side, d) }));
const customer = this.customerMode === 'existing' ? this.selectedCustomer : null;
const pan = this.panValue || null;
const payload: any = { const payload: any = {
exchangeDate: this.exchangeDate, exchangeDate: this.exchangeDate,
note: this.note || null, note: this.note || null,
customerIdProof: this.customerIdProof.trim() || null, clientId: customer?.clientId ?? null,
accountNo: this.isAccountHolder && this.accountNo.trim() ? this.accountNo.trim() : null, accountNo: customer?.accountNo ?? null,
customerName: customer ? customer.displayName : this.walkInName.trim() || null,
customerMobile: customer ? customer.mobileNo : this.walkInMobile.trim() || null,
panNumber: pan,
customerIdProof: pan,
received: build('r'), received: build('r'),
given: build('g') given: build('g')
}; };
@@ -11,25 +11,11 @@
<div> <div>
<div class="pg-eyebrow">CASHIER · HISTORY</div> <div class="pg-eyebrow">CASHIER · HISTORY</div>
<h1 class="pg-title">Cash Movement History</h1> <h1 class="pg-title">Cash Movement History</h1>
<p class="pg-sub">All transfers, settlements, and inter-cashier movements. Reverse any active transaction.</p> <p class="pg-sub">All transfers, settlements, inter-cashier movements and cash exchanges.</p>
</div> </div>
<button type="button" class="pg-btn pg-btn--ghost" (click)="load()"><mat-icon>refresh</mat-icon> Refresh</button> <button type="button" class="pg-btn pg-btn--ghost" (click)="load()"><mat-icon>refresh</mat-icon> Refresh</button>
</header> </header>
<!-- Reversal confirm panel -->
@if (reversingId !== null) {
<div class="reverse-panel">
<mat-icon class="reverse-icon">warning</mat-icon>
<span
>Reverse <strong>#{{ reversingId }}</strong
>? This cannot be undone.</span
>
<input class="reverse-reason" type="text" [(ngModel)]="reverseReason" placeholder="Reason (optional)" />
<button type="button" class="pg-btn pg-btn--danger" (click)="confirmReverse()">Confirm Reversal</button>
<button type="button" class="pg-btn pg-btn--ghost" (click)="cancelReverse()">Cancel</button>
</div>
}
@if (loading) { @if (loading) {
<div class="pg-empty">Loading…</div> <div class="pg-empty">Loading…</div>
} }
@@ -134,11 +120,6 @@
> >
<mat-icon>visibility</mat-icon> <mat-icon>visibility</mat-icon>
</button> </button>
@if (!r.isReversed) {
<button type="button" class="pg-btn pg-btn--ghost btn-sm" title="Reverse" (click)="startReverse(r)">
<mat-icon>undo</mat-icon>
</button>
}
</div> </div>
</td> </td>
</tr> </tr>
@@ -187,6 +168,12 @@
<span class="detail-meta__label">Date</span> <span class="detail-meta__label">Date</span>
<span class="detail-meta__val">{{ detail.row.date }}</span> <span class="detail-meta__val">{{ detail.row.date }}</span>
</div> </div>
@if (detail.row.type === 'exchange') {
<div class="detail-meta__item">
<span class="detail-meta__label">Customer PAN</span>
<span class="detail-meta__val">{{ detail.row.panNumber || '—' }}</span>
</div>
}
<div class="detail-meta__item"> <div class="detail-meta__item">
<span class="detail-meta__label">Total Amount</span> <span class="detail-meta__label">Total Amount</span>
<span class="detail-meta__val detail-meta__val--amount">₹{{ detail.row.amount | number: '1.2-2' }}</span> <span class="detail-meta__val detail-meta__val--amount">₹{{ detail.row.amount | number: '1.2-2' }}</span>
@@ -47,38 +47,6 @@
} }
} }
.reverse-panel {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 10px;
flex-wrap: wrap;
font-size: 13px;
color: #92400e;
.reverse-icon {
color: #f59e0b;
font-size: 20px;
height: 20px;
width: 20px;
}
.reverse-reason {
flex: 1 1 200px;
height: 34px;
padding: 0 10px;
border: 1px solid #fcd34d;
border-radius: 7px;
font-size: 13px;
font-family: inherit;
background: #fff;
color: #1a1a1a;
}
}
/* ── Action buttons cell ── */ /* ── Action buttons cell ── */
.action-btns { .action-btns {
display: flex; display: flex;
@@ -8,9 +8,7 @@
import { Component, OnInit, inject } from '@angular/core'; import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTabsModule } from '@angular/material/tabs'; import { MatTabsModule } from '@angular/material/tabs';
import { MatPaginatorModule, PageEvent } from '@angular/material/paginator'; import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
import { forkJoin, of } from 'rxjs'; import { forkJoin, of } from 'rxjs';
@@ -31,6 +29,8 @@ interface TxnRow {
reversedBy: number | null; reversedBy: number | null;
reversedAt: string | null; reversedAt: string | null;
reverseReason: string | null; reverseReason: string | null;
/** Customer PAN recorded on a cash exchange. */
panNumber?: string | null;
type: 'transfer' | 'settlement' | 'inter' | 'exchange'; type: 'transfer' | 'settlement' | 'inter' | 'exchange';
} }
@@ -52,7 +52,10 @@ interface DetailView {
loading: boolean; loading: boolean;
} }
/** Unified history of all cash movements with reversal and detail view support. */ /**
* Unified history of all cash movements with a detail view. Read-only: cash movements cannot be reversed
* from here (an earlier reversal still shows as Reversed, with who, when and why).
*/
@Component({ @Component({
selector: 'mifosx-cash-history', selector: 'mifosx-cash-history',
templateUrl: './cash-history.component.html', templateUrl: './cash-history.component.html',
@@ -63,16 +66,13 @@ interface DetailView {
standalone: true, standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
FormsModule,
MatIconModule, MatIconModule,
MatSnackBarModule,
MatTabsModule, MatTabsModule,
MatPaginatorModule MatPaginatorModule
] ]
}) })
export class CashHistoryComponent implements OnInit { export class CashHistoryComponent implements OnInit {
private service = inject(CashierService); private service = inject(CashierService);
private snackBar = inject(MatSnackBar);
transfers: TxnRow[] = []; transfers: TxnRow[] = [];
settlements: TxnRow[] = []; settlements: TxnRow[] = [];
@@ -99,10 +99,6 @@ export class CashHistoryComponent implements OnInit {
private denomKindMap = new Map<number, 'note' | 'coin'>(); private denomKindMap = new Map<number, 'note' | 'coin'>();
reversingId: number | null = null;
reversingType: string | null = null;
reverseReason = '';
detail: DetailView | null = null; detail: DetailView | null = null;
ngOnInit(): void { ngOnInit(): void {
@@ -212,7 +208,8 @@ export class CashHistoryComponent implements OnInit {
this.exchanges = (exchangeItems as any[]).map((e) => ({ this.exchanges = (exchangeItems as any[]).map((e) => ({
id: e.id, id: e.id,
date: e.exchangeDate, date: e.exchangeDate,
fromParty: e.accountNo ? `Account ${e.accountNo}` : 'Walk-in Customer', fromParty: this.exchangeParty(e),
panNumber: e.panNumber ?? null,
toParty: e.performedByUsername || '—', toParty: e.performedByUsername || '—',
amount: e.exchangeAmount, amount: e.exchangeAmount,
note: e.note, note: e.note,
@@ -310,7 +307,8 @@ export class CashHistoryComponent implements OnInit {
this.exchanges = (res.pageItems ?? []).map((e: any) => ({ this.exchanges = (res.pageItems ?? []).map((e: any) => ({
id: e.id, id: e.id,
date: e.exchangeDate, date: e.exchangeDate,
fromParty: e.accountNo ? `Account ${e.accountNo}` : 'Walk-in Customer', fromParty: this.exchangeParty(e),
panNumber: e.panNumber ?? null,
toParty: e.performedByUsername || '—', toParty: e.performedByUsername || '—',
amount: e.exchangeAmount, amount: e.exchangeAmount,
note: e.note, note: e.note,
@@ -392,39 +390,12 @@ export class CashHistoryComponent implements OnInit {
this.detail = null; this.detail = null;
} }
startReverse(row: TxnRow): void { /** Who the exchange was with: the customer's name (and account, if one), else the account, else a walk-in. */
this.reversingId = row.id; private exchangeParty(e: any): string {
this.reversingType = row.type; if (e.customerName) {
this.reverseReason = ''; return e.accountNo ? `${e.customerName} (A/C ${e.accountNo})` : e.customerName;
} }
return e.accountNo ? `Account ${e.accountNo}` : 'Walk-in Customer';
cancelReverse(): void {
this.reversingId = null;
this.reversingType = null;
this.reverseReason = '';
}
confirmReverse(): void {
if (!this.reversingId || !this.reversingType) return;
const id = this.reversingId;
const type = this.reversingType;
const reason = this.reverseReason;
this.cancelReverse();
let obs$;
if (type === 'transfer') obs$ = this.service.reverseCashTransfer(id, reason);
else if (type === 'settlement') obs$ = this.service.reverseCashSettlement(id, reason);
else if (type === 'exchange') obs$ = this.service.reverseCashExchange(id, reason);
else obs$ = this.service.reverseInterCashierTransfer(id, reason);
obs$.pipe(catchError(() => of(null))).subscribe((res: any) => {
if (res?.reversed) {
this.snackBar.open('Transaction reversed successfully', 'Close', { duration: 3000 });
this.load();
} else {
this.snackBar.open('Reversal failed', 'Close', { duration: 3000 });
}
});
} }
typeLabel(type: string): string { typeLabel(type: string): string {
@@ -0,0 +1,229 @@
<!--
Copyright since 2025 Mifos Initiative
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<div class="cv-tab-content cta-tab">
<!-- ── TITLE BAR ── -->
<div class="cta-action-bar">
<div class="cta-action-bar__left">
<mat-icon class="cta-action-bar__icon">swap_horiz</mat-icon>
<div>
<div class="cta-action-bar__title">Cash Transfers</div>
<div class="cta-action-bar__sub">
Approve or reject an allocation of cash from the vault to a cashier. The cash leaves the vault only when it is
approved.
</div>
</div>
</div>
<div class="cta-counts">
<span class="cta-count"
><strong>{{ all.length }}</strong> waiting</span
>
</div>
</div>
<!-- ── FILTER BAR ── -->
<div class="cta-filter-bar">
<div class="cta-search-box">
<mat-icon>search</mat-icon>
<input type="text" placeholder="Search by cashier, vault, user or note" [(ngModel)]="searchTerm" />
@if (searchTerm) {
<button type="button" class="cta-search-box__clear" (click)="searchTerm = ''">
<mat-icon>close</mat-icon>
</button>
}
</div>
<button type="button" class="cta-btn cta-btn--refresh" (click)="load()" [disabled]="loading">
<mat-icon>refresh</mat-icon>
</button>
</div>
<!-- ── TABLE ── -->
@if (loading && !loaded) {
<div class="cta-empty"><p class="cta-empty__title">Loading…</p></div>
} @else if (rows.length === 0) {
<div class="cta-empty">
<mat-icon class="cta-empty__icon">inbox</mat-icon>
<p class="cta-empty__title">No cash transfer waiting</p>
<p class="cta-empty__text">There is no cash allocation waiting for approval.</p>
</div>
} @else {
<div class="cta-table-wrap">
<table class="cta-table">
<thead>
<tr>
<th>Date</th>
<th>From</th>
<th>To (Cashier)</th>
<th class="num">Amount</th>
<th>Note</th>
<th>Raised By</th>
<th>Raised At</th>
<th class="cta-th-action">Action</th>
</tr>
</thead>
<tbody>
@for (r of rows; track r.id) {
<tr class="cta-row">
<td class="cta-dt">{{ r.transfer_date || '—' }}</td>
<td>{{ r.from_party || '—' }}</td>
<td class="cta-strong">{{ r.to_party || '—' }}</td>
<td class="num cta-amount">₹{{ r.total_amount | number: '1.2-2' }}</td>
<td class="cta-reason" [title]="r.note || ''">{{ r.note || '—' }}</td>
<td>{{ r.maker_name || '—' }}</td>
<td class="cta-dt">{{ formatDateTime(r.maker_at) }}</td>
<td class="cta-action-cell">
<button type="button" class="cta-btn cta-btn--approve" (click)="review(r)">
<mat-icon>rate_review</mat-icon> Review
</button>
</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
<!-- ─── Popup: review a request, every note and coin it asks for ───────────── -->
<ng-template #reviewDialog>
@if (reviewing) {
<div class="cta-dlg">
<header class="cta-dlg__head">
<mat-icon class="cta-dlg__ico cta-dlg__ico--ok">swap_horiz</mat-icon>
<div class="cta-dlg__titles">
<div class="cta-dlg__title">Review cash transfer</div>
<div class="cta-dlg__sub">
Raised by {{ reviewing.maker_name || '—' }} · {{ formatDateTime(reviewing.maker_at) }}
</div>
</div>
<button type="button" class="cta-dlg__x" aria-label="Close" (click)="closeReview()">
<mat-icon>close</mat-icon>
</button>
</header>
<div class="cta-dlg__body">
<div class="cta-total">
<span>Amount to release</span>
<strong>₹{{ reviewing.total_amount | number: '1.2-2' }}</strong>
</div>
<div class="cta-grid">
<div class="cta-cell">
<div class="cta-label">Transfer date</div>
<div class="cta-value">{{ reviewing.transfer_date || '—' }}</div>
</div>
<div class="cta-cell">
<div class="cta-label">From</div>
<div class="cta-value">{{ reviewing.from_party || '—' }}</div>
</div>
<div class="cta-cell">
<div class="cta-label">To (cashier)</div>
<div class="cta-value">{{ reviewing.to_party || '—' }}</div>
</div>
<div class="cta-cell">
<div class="cta-label">Notes and coins</div>
<div class="cta-value">
{{ piecesOf(reviewing) }} pieces · {{ linesOf(reviewing).length }} denominations
</div>
</div>
@if (reviewing.note) {
<div class="cta-cell cta-cell--wide">
<div class="cta-label">Note</div>
<div class="cta-value">{{ reviewing.note }}</div>
</div>
}
</div>
<div class="cta-label">Denomination breakdown</div>
<table class="cta-mini">
<thead>
<tr>
<th>Denomination</th>
<th class="num">Count</th>
<th class="num">Amount</th>
</tr>
</thead>
<tbody>
@for (l of linesOf(reviewing); track l.value) {
<tr>
<td>₹{{ l.value }}</td>
<td class="num">{{ l.count }}</td>
<td class="num">₹{{ l.amount | number: '1.2-2' }}</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td class="num">{{ piecesOf(reviewing) }}</td>
<td class="num">₹{{ reviewing.total_amount | number: '1.2-2' }}</td>
</tr>
</tfoot>
</table>
</div>
<footer class="cta-dlg__foot">
<button type="button" class="cta-btn cta-btn--ghost" (click)="closeReview()">Close</button>
<button
type="button"
class="cta-btn cta-btn--reject"
[disabled]="busyId === reviewing.id"
(click)="rejectFromReview(reviewing)"
>
<mat-icon>close</mat-icon> Reject
</button>
<button
type="button"
class="cta-btn cta-btn--approve"
[disabled]="busyId === reviewing.id"
(click)="approve(reviewing)"
>
<mat-icon>check</mat-icon> Approve
</button>
</footer>
</div>
}
</ng-template>
<!-- ─── Popup: reject with a reason ───────────────────────────────────────── -->
<ng-template #rejectDialog>
@if (rejecting) {
<div class="cta-dlg">
<header class="cta-dlg__head">
<mat-icon class="cta-dlg__ico">block</mat-icon>
<div class="cta-dlg__titles">
<div class="cta-dlg__title">Reject cash transfer</div>
<div class="cta-dlg__sub">₹{{ rejecting.total_amount | number: '1.2-2' }} to {{ rejecting.to_party }}</div>
</div>
<button type="button" class="cta-dlg__x" aria-label="Close" (click)="cancelReject()">
<mat-icon>close</mat-icon>
</button>
</header>
<div class="cta-dlg__body">
<label class="cta-label" for="cta-reason">Reason (required)</label>
<textarea
id="cta-reason"
rows="3"
placeholder="Why is this being rejected?"
[(ngModel)]="rejectReason"
></textarea>
</div>
<footer class="cta-dlg__foot">
<button type="button" class="cta-btn cta-btn--ghost" (click)="cancelReject()">Cancel</button>
<button
type="button"
class="cta-btn cta-btn--reject-solid"
[disabled]="!rejectReason.trim() || busyId === rejecting.id"
(click)="confirmReject()"
>
Confirm reject
</button>
</footer>
</div>
}
</ng-template>
@@ -0,0 +1,573 @@
/**
* 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/.
*/
// Laid out like the other approval tabs (Withdrawal Requests): title bar, filter bar, one table.
:host {
display: block;
}
.cta-tab {
padding: 0;
}
.cta-action-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: #fff;
border-bottom: 1px solid #e2e8f0;
&__left {
display: flex;
align-items: center;
gap: 12px;
}
&__icon {
font-size: 22px;
width: 22px;
height: 22px;
color: #0f4f3c;
}
&__title {
font-size: 13px;
font-weight: 700;
color: #0d1b2a;
}
&__sub {
max-width: 640px;
margin-top: 1px;
font-size: 11px;
color: #64748b;
}
}
.cta-counts {
display: flex;
gap: 8px;
}
.cta-count {
padding: 2px 10px;
border-radius: 999px;
background: #f1f5f9;
font-size: 11px;
color: #475569;
strong {
color: #0f4f3c;
}
}
.cta-filter-bar {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 6px 16px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.cta-fb-sep {
flex-shrink: 0;
width: 1px;
height: 22px;
margin: 0 4px;
background: #e2e8f0;
}
.cta-search-box {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
min-width: 240px;
padding: 0 10px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
mat-icon {
flex-shrink: 0;
font-size: 17px;
width: 17px;
height: 17px;
color: #94a3b8;
}
&:hover {
border-color: #cbd5e1;
}
&:focus-within {
border-color: #0f4f3c;
box-shadow: 0 0 0 3px rgb(15 79 60 / 8%);
}
input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: inherit;
font-size: 12px;
color: #0d1b2a;
&::placeholder {
color: #94a3b8;
}
}
&__clear {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: #94a3b8;
cursor: pointer;
mat-icon {
font-size: 15px;
width: 15px;
height: 15px;
color: inherit;
}
&:hover {
color: #dc2626;
background: #fef2f2;
}
}
}
.cta-filter-select {
height: 30px;
min-width: 140px;
padding: 0 10px;
border: 1px solid #e2e8f0;
border-radius: 7px;
background: #fff;
font-family: inherit;
font-size: 12px;
color: #0d1b2a;
cursor: pointer;
&:focus {
outline: none;
border-color: #0f4f3c;
}
}
// ── Buttons ─────────────────────────────────────────────────────────────────
.cta-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 7px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
&:disabled {
opacity: 0.45;
cursor: not-allowed;
}
&--refresh {
height: 30px;
width: 30px;
justify-content: center;
padding: 0;
margin-left: auto;
border-color: #e2e8f0;
background: #fff;
color: #475569;
}
&--approve {
background: #0f4f3c;
color: #fff;
&:hover:not(:disabled) {
background: #0a3d2e;
}
}
&--reject {
border-color: #fecaca;
background: #fff;
color: #dc2626;
&:hover:not(:disabled) {
background: #fef2f2;
}
}
&--reject-solid {
background: #dc2626;
color: #fff;
}
&--ghost {
border-color: #e2e8f0;
background: #fff;
color: #475569;
}
}
// ── Table ───────────────────────────────────────────────────────────────────
.cta-table-wrap {
overflow-x: auto;
background: #fff;
}
.cta-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
th {
padding: 7px 10px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-align: left;
text-transform: uppercase;
color: #94a3b8;
white-space: nowrap;
}
td {
padding: 5px 10px;
border-bottom: 1px solid #eef2f7;
vertical-align: middle;
color: #0d1b2a;
}
.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.cta-th-action {
text-align: right;
}
}
.cta-row:hover td {
background: #f8fafc;
}
.cta-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: 0.02em;
}
.cta-voucher {
font-weight: 700;
color: #0f4f3c;
}
.cta-strong {
font-weight: 700;
}
.cta-sub {
margin-top: 1px;
font-size: 11px;
color: #64748b;
}
.cta-none {
color: #cbd5e1;
}
.cta-amount {
font-weight: 700;
}
.cta-reason {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cta-dt {
white-space: nowrap;
color: #475569;
}
.cta-kind {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
&--unpass {
background: #fef3c7;
color: #92400e;
}
&--correction {
background: #dbeafe;
color: #1e40af;
}
}
.cta-action-cell {
display: flex;
justify-content: flex-end;
gap: 6px;
white-space: nowrap;
}
// ── Empty ───────────────────────────────────────────────────────────────────
.cta-empty {
padding: 28px 16px;
text-align: center;
color: #94a3b8;
&__icon {
display: block;
margin: 0 auto 6px;
font-size: 30px;
width: 30px;
height: 30px;
opacity: 0.6;
}
&__title {
margin: 0;
font-size: 12px;
font-weight: 700;
color: #64748b;
}
&__text {
margin: 3px 0 0;
font-size: 11px;
}
}
// ── Reject popup ────────────────────────────────────────────────────────────
.cta-dlg {
font-size: 12px;
&__head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
&__ico {
flex: 0 0 32px;
height: 32px;
width: 32px;
border-radius: 9px;
background: #fef2f2;
color: #dc2626;
font-size: 18px;
line-height: 32px;
text-align: center;
}
&__titles {
flex: 1;
min-width: 0;
}
&__title {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
&__sub {
font-size: 11px;
color: #64748b;
}
&__x {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
width: 28px;
border: 0;
border-radius: 50%;
background: transparent;
color: #64748b;
cursor: pointer;
&:hover {
background: #e2e8f0;
}
mat-icon {
font-size: 18px;
height: 18px;
width: 18px;
}
}
&__body {
padding: 12px 14px;
max-height: 64vh;
overflow-y: auto;
textarea {
width: 100%;
padding: 7px 10px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font: inherit;
font-size: 12px;
resize: vertical;
&:focus {
outline: 0;
border-color: #0f4f3c;
box-shadow: 0 0 0 3px rgb(15 79 60 / 8%);
}
}
}
&__foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 10px 14px;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
}
.cta-label {
display: block;
margin-bottom: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #94a3b8;
}
.cta-dlg__ico--ok {
background: #f0fdf4;
color: #1f7a4d;
}
.cta-total {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
padding: 8px 12px;
border-radius: 10px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
font-size: 12px;
font-weight: 600;
strong {
font-size: 18px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
}
.cta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 6px;
margin-bottom: 12px;
}
.cta-cell {
padding: 6px 10px;
border-radius: 8px;
background: #f8fafc;
border: 1px solid #eef2f7;
&--wide {
grid-column: 1 / -1;
}
}
.cta-value {
font-size: 12px;
font-weight: 600;
color: #0f172a;
word-break: break-word;
}
.cta-mini {
width: 100%;
margin-top: 4px;
border-collapse: collapse;
font-size: 12px;
th {
padding: 6px 10px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.05em;
text-align: left;
text-transform: uppercase;
color: #94a3b8;
}
td {
padding: 5px 10px;
border-bottom: 1px solid #eef2f7;
}
.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
tfoot td {
border-top: 2px solid #e2e8f0;
border-bottom: 0;
font-weight: 800;
background: #f8fafc;
}
}
@@ -0,0 +1,190 @@
/**
* 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, TemplateRef, ViewChild, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { CashierService } from '../cashier.service';
/** A cash transfer request waiting for a checker, as the server keeps it (snake_case columns). */
interface CashTransferRequest {
id: number;
transfer_date: string | null;
from_party: string | null;
to_party: string | null;
note: string | null;
total_amount: number;
maker_name: string | null;
maker_at: string | null;
denominations: { denominationValue: number; count: number }[];
}
/**
* Checker side of Cash Transfer: approves or rejects an allocation of cash from the vault to a cashier. The cash
* leaves the vault only when it is approved, by someone other than the person who raised it.
*/
@Component({
selector: 'mifosx-cash-transfer-approvals',
templateUrl: './cash-transfer-approvals.component.html',
styleUrls: ['./cash-transfer-approvals.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
MatDialogModule,
MatIconModule,
MatSnackBarModule
]
})
export class CashTransferApprovalsComponent implements OnInit {
private service = inject(CashierService);
private snackBar = inject(MatSnackBar);
private dialog = inject(MatDialog);
@ViewChild('rejectDialog') rejectDialog!: TemplateRef<unknown>;
@ViewChild('reviewDialog') reviewDialog!: TemplateRef<unknown>;
private dialogRef: MatDialogRef<unknown> | null = null;
private reviewRef: MatDialogRef<unknown> | null = null;
/** The request open in the review popup, with every note and coin it asks for. */
reviewing: CashTransferRequest | null = null;
all: CashTransferRequest[] = [];
loading = false;
loaded = false;
busyId: number | null = null;
searchTerm = '';
rejecting: CashTransferRequest | null = null;
rejectReason = '';
ngOnInit(): void {
this.load();
}
load(): void {
this.loading = true;
this.service
.getCashTransferRequests('PENDING')
.pipe(catchError(() => of([] as CashTransferRequest[])))
.subscribe((rows) => {
this.all = rows as CashTransferRequest[];
this.loading = false;
this.loaded = true;
});
}
get rows(): CashTransferRequest[] {
const term = this.searchTerm.trim().toLowerCase();
if (!term) return this.all;
return this.all.filter((r) => [
r.from_party,
r.to_party,
r.maker_name,
r.note
].some((v) => (v ?? '').toLowerCase().includes(term)));
}
/** One line per denomination asked for, largest first, with what each line adds up to. */
linesOf(r: CashTransferRequest): { value: number; count: number; amount: number }[] {
return [...(r.denominations ?? [])]
.filter((d) => d.count > 0)
.sort((a, b) => b.denominationValue - a.denominationValue)
.map((d) => ({ value: d.denominationValue, count: d.count, amount: d.denominationValue * d.count }));
}
/** How many notes and coins the request asks for in all. */
piecesOf(r: CashTransferRequest): number {
return this.linesOf(r).reduce((sum, l) => sum + l.count, 0);
}
review(r: CashTransferRequest): void {
this.reviewing = r;
this.reviewRef?.close();
this.reviewRef = this.dialog.open(this.reviewDialog, { width: '560px', maxWidth: '95vw', autoFocus: false });
this.reviewRef.afterClosed().subscribe(() => (this.reviewing = null));
}
closeReview(): void {
this.reviewRef?.close();
}
/** Rejecting from the review popup: the review closes, the reason popup opens for the same request. */
rejectFromReview(r: CashTransferRequest): void {
this.reviewRef?.close();
this.startReject(r);
}
formatDateTime(value: string | null): string {
if (!value) return '—';
const d = new Date(value);
return isNaN(d.getTime())
? value
: d.toLocaleString('en-IN', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
}
approve(r: CashTransferRequest): void {
if (this.busyId) return;
this.busyId = r.id;
this.service.approveCashTransferRequest(r.id).subscribe({
next: (res: any) => {
this.busyId = null;
this.reviewRef?.close();
this.snackBar.open(
res?.glWarning ? `Approved (GL warning: ${res.glWarning})` : 'Approved — cash allocated to the cashier',
'Close',
{ duration: 6000 }
);
this.load();
},
error: (err) => {
this.busyId = null;
this.fail(err, 'Could not approve');
}
});
}
startReject(r: CashTransferRequest): void {
this.rejecting = r;
this.rejectReason = '';
this.dialogRef = this.dialog.open(this.rejectDialog, { width: '440px', maxWidth: '95vw', autoFocus: false });
this.dialogRef.afterClosed().subscribe(() => (this.rejecting = null));
}
cancelReject(): void {
this.dialogRef?.close();
}
confirmReject(): void {
if (!this.rejecting || !this.rejectReason.trim() || this.busyId) return;
const id = this.rejecting.id;
this.busyId = id;
this.service.rejectCashTransferRequest(id, this.rejectReason.trim()).subscribe({
next: () => {
this.busyId = null;
this.dialogRef?.close();
this.snackBar.open('Rejected', 'Close', { duration: 4000 });
this.load();
},
error: (err) => {
this.busyId = null;
this.fail(err, 'Could not reject');
}
});
}
private fail(err: any, fallback: string): void {
const msg = err?.error?.errors?.[0]?.defaultUserMessage ?? err?.error?.defaultUserMessage ?? fallback;
this.snackBar.open(msg, 'Close', { duration: 8000 });
}
}
@@ -13,7 +13,15 @@
<h1 class="pg-title">Cash Transfer</h1> <h1 class="pg-title">Cash Transfer</h1>
<p class="pg-sub">Move cash denomination-wise from one party to another (e.g. Vault → Cashier for opening).</p> <p class="pg-sub">Move cash denomination-wise from one party to another (e.g. Vault → Cashier for opening).</p>
</div> </div>
<button type="button" class="pg-btn pg-btn--ghost" (click)="clear()"><mat-icon>undo</mat-icon> Clear</button> <div class="ct-head-actions">
<button type="button" class="pg-btn pg-btn--ghost" (click)="openRequests()">
<mat-icon>pending_actions</mat-icon> My Requests
@if (pendingCount) {
<span class="ct-badge">{{ pendingCount }}</span>
}
</button>
<button type="button" class="pg-btn pg-btn--ghost" (click)="clear()"><mat-icon>undo</mat-icon> Clear</button>
</div>
</header> </header>
<div class="pg-toolbar pg-toolbar--mat"> <div class="pg-toolbar pg-toolbar--mat">
@@ -155,7 +163,56 @@
<div class="pg-total-bar"> <div class="pg-total-bar">
Total to transfer: <strong>₹{{ total | number: '1.2-2' }}</strong> Total to transfer: <strong>₹{{ total | number: '1.2-2' }}</strong>
<button type="button" class="pg-btn pg-btn--primary" [disabled]="!valid || saving" (click)="submit()"> <button type="button" class="pg-btn pg-btn--primary" [disabled]="!valid || saving" (click)="submit()">
<mat-icon>swap_horiz</mat-icon> Record Transfer <mat-icon>send</mat-icon> Send for approval
</button> </button>
</div> </div>
</div> </div>
<!-- Popup: this person's own cash transfer requests, and where each stands. The cash moves only once a manager approves. -->
<ng-template #requestsDialog>
<div class="ct-dlg">
<header class="ct-dlg__head">
<mat-icon class="ct-dlg__ico">pending_actions</mat-icon>
<div class="ct-dlg__titles">
<div class="ct-dlg__title">My transfer requests</div>
<div class="ct-dlg__sub">Cash leaves the vault only after a manager approves</div>
</div>
<button type="button" class="ct-dlg__x" aria-label="Close" (click)="closeRequests()">
<mat-icon>close</mat-icon>
</button>
</header>
<div class="ct-dlg__body">
@if (myRequests.length) {
<table class="pg-table">
<thead>
<tr>
<th>Date</th>
<th>To</th>
<th class="num">Amount</th>
<th>Status</th>
<th>Approved by</th>
</tr>
</thead>
<tbody>
@for (r of myRequests; track r.id) {
<tr>
<td>{{ r.transfer_date || '—' }}</td>
<td>{{ r.to_party || '—' }}</td>
<td class="num">₹{{ r.total_amount | number: '1.2-2' }}</td>
<td>
<span class="ct-status" [class]="'ct-status ct-status--' + r.status">{{ r.status }}</span>
@if (r.rejection_reason) {
<div class="ct-requests__note">{{ r.rejection_reason }}</div>
}
</td>
<td>{{ r.checker_name || '—' }}</td>
</tr>
}
</tbody>
</table>
} @else {
<div class="pg-empty">You have not raised any cash transfer request yet.</div>
}
</div>
</div>
</ng-template>
@@ -49,3 +49,131 @@
font-size: 12px; font-size: 12px;
color: #991b1b; color: #991b1b;
} }
.ct-requests {
padding: 0;
&__title {
padding: 10px 14px;
border-bottom: 1px solid #e2e8f0;
font-size: 13px;
font-weight: 700;
color: #0d1b2a;
}
&__note {
margin-top: 2px;
font-size: 11px;
color: #64748b;
}
}
.ct-status {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
background: #e2e8f0;
font-size: 11px;
font-weight: 700;
&--PENDING {
background: #fef3c7;
color: #92400e;
}
&--APPROVED {
background: #d1fae5;
color: #065f46;
}
&--REJECTED {
background: #fee2e2;
color: #991b1b;
}
}
.ct-head-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ct-badge {
min-width: 18px;
padding: 0 6px;
border-radius: 999px;
background: #f59e0b;
color: #fff;
font-size: 11px;
font-weight: 700;
text-align: center;
}
.ct-dlg {
font-size: 12px;
&__head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
&__ico {
flex: 0 0 32px;
height: 32px;
width: 32px;
border-radius: 9px;
background: #f0fdf4;
color: #1f7a4d;
font-size: 18px;
line-height: 32px;
text-align: center;
}
&__titles {
flex: 1;
min-width: 0;
}
&__title {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
&__sub {
font-size: 11px;
color: #64748b;
}
&__x {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
width: 28px;
border: 0;
border-radius: 50%;
background: transparent;
color: #64748b;
cursor: pointer;
&:hover {
background: #e2e8f0;
}
mat-icon {
font-size: 18px;
height: 18px;
width: 18px;
}
}
&__body {
max-height: 60vh;
overflow-y: auto;
}
}
@@ -6,9 +6,10 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. * file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/ */
import { Component, OnInit, inject } from '@angular/core'; import { Component, OnInit, TemplateRef, ViewChild, inject } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
@@ -18,6 +19,7 @@ import { of } from 'rxjs';
import { catchError } from 'rxjs/operators'; import { catchError } from 'rxjs/operators';
import { CashierService } from '../cashier.service'; import { CashierService } from '../cashier.service';
import { businessToday } from 'app/core/utils/business-today'; import { businessToday } from 'app/core/utils/business-today';
import { AuthenticationService } from '../../core/authentication/authentication.service';
interface Denom { interface Denom {
id: number; id: number;
@@ -39,6 +41,7 @@ interface Denom {
CommonModule, CommonModule,
FormsModule, FormsModule,
MatIconModule, MatIconModule,
MatDialogModule,
MatSnackBarModule, MatSnackBarModule,
MatFormFieldModule, MatFormFieldModule,
MatSelectModule, MatSelectModule,
@@ -48,6 +51,11 @@ interface Denom {
export class CashTransferComponent implements OnInit { export class CashTransferComponent implements OnInit {
private service = inject(CashierService); private service = inject(CashierService);
private snackBar = inject(MatSnackBar); private snackBar = inject(MatSnackBar);
private dialog = inject(MatDialog);
@ViewChild('requestsDialog') requestsDialog!: TemplateRef<unknown>;
private requestsRef: MatDialogRef<unknown> | null = null;
private authenticationService = inject(AuthenticationService);
notes: Denom[] = []; notes: Denom[] = [];
coins: Denom[] = []; coins: Denom[] = [];
@@ -82,7 +90,34 @@ export class CashTransferComponent implements OnInit {
vaultHasBreakdown = true; vaultHasBreakdown = true;
loadingVault = false; loadingVault = false;
/** The caller's own transfer requests, newest first, so a request can be followed to its approval. */
myRequests: any[] = [];
loadMyRequests(): void {
this.service
.getCashTransferRequests(undefined, true)
.pipe(catchError(() => of([] as any[])))
.subscribe((rows) => (this.myRequests = rows.slice(0, 20)));
}
/** How many of this person's requests are still waiting for a manager. */
get pendingCount(): number {
return this.myRequests.filter((r) => r.status === 'PENDING').length;
}
/** Opens the list of this person's requests, freshly read, so a request can be followed to its approval. */
openRequests(): void {
this.loadMyRequests();
this.requestsRef?.close();
this.requestsRef = this.dialog.open(this.requestsDialog, { width: '720px', maxWidth: '95vw', autoFocus: false });
}
closeRequests(): void {
this.requestsRef?.close();
}
ngOnInit(): void { ngOnInit(): void {
this.loadMyRequests();
const d = businessToday(); const d = businessToday();
this.transferDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; this.transferDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
this.service.getActiveDenominations().subscribe({ this.service.getActiveDenominations().subscribe({
@@ -106,7 +141,14 @@ export class CashTransferComponent implements OnInit {
.getTellers() .getTellers()
.pipe(catchError(() => of([] as any[]))) .pipe(catchError(() => of([] as any[])))
.subscribe((list) => { .subscribe((list) => {
this.tellers = (list || []).map((t: any) => ({ id: t.id, name: t.name })); // The vault and its cash are physical, so a branch moves cash only from its own tellers. The
// backend lists every teller below the user's office (Head Office sees all branches), which is
// right for reports but wrong here.
const myOfficeId = this.authenticationService.getCredentials()?.officeId;
const own = (list || []).filter(
(t: any) => !myOfficeId || t.officeId == null || Number(t.officeId) === Number(myOfficeId)
);
this.tellers = own.map((t: any) => ({ id: t.id, name: t.name }));
if (this.tellers.length === 1) { if (this.tellers.length === 1) {
this.onTellerSelect(this.tellers[0].id); this.onTellerSelect(this.tellers[0].id);
} }
@@ -245,16 +287,11 @@ export class CashTransferComponent implements OnInit {
.filter((d) => this.countFor(d) > 0) .filter((d) => this.countFor(d) > 0)
.map((d) => ({ denominationId: d.id, denominationValue: d.value, count: this.countFor(d) })) .map((d) => ({ denominationId: d.id, denominationValue: d.value, count: this.countFor(d) }))
}; };
this.service.createCashTransfer(payload).subscribe({ this.service.createCashTransferRequest(payload).subscribe({
next: (res: any) => { next: () => {
if (res?.glWarning) { // Nothing has moved yet: a manager approves the allocation first, and only then does the cash leave the vault.
this.snackBar.open(`Transfer saved (GL warning: ${res.glWarning})`, 'Close', { this.snackBar.open('Cash transfer sent for manager approval', 'Close', { duration: 5000 });
duration: 8000, this.loadMyRequests();
panelClass: ['snack-warn']
});
} else {
this.snackBar.open('Cash transfer recorded', 'Close', { duration: 3000 });
}
this.clear(); this.clear();
this.note = ''; this.note = '';
this.fromParty = ''; this.fromParty = '';
+21
View File
@@ -23,6 +23,7 @@ import { DayBookComponent } from './day-book/day-book.component';
import { VoucherReportComponent } from './voucher-report/voucher-report.component'; import { VoucherReportComponent } from './voucher-report/voucher-report.component';
import { BranchDayComponent } from './branch-day/branch-day.component'; import { BranchDayComponent } from './branch-day/branch-day.component';
import { VaultPositionComponent } from './vault-position/vault-position.component'; import { VaultPositionComponent } from './vault-position/vault-position.component';
import { BranchCashPositionComponent } from './branch-cash-position/branch-cash-position.component';
import { AccountRegisterComponent } from './account-register/account-register.component'; import { AccountRegisterComponent } from './account-register/account-register.component';
import { ClosingCashReportComponent } from './closing-cash-report/closing-cash-report.component'; import { ClosingCashReportComponent } from './closing-cash-report/closing-cash-report.component';
import { ExcessTransactionReportComponent } from './excess-transaction-report/excess-transaction-report.component'; import { ExcessTransactionReportComponent } from './excess-transaction-report/excess-transaction-report.component';
@@ -82,6 +83,13 @@ const routes: Routes = [
), ),
data: { title: 'My Share Requests', breadcrumb: 'My Share Requests' } data: { title: 'My Share Requests', breadcrumb: 'My Share Requests' }
}, },
{
// The same page as the cashier's, reached from the clerk dashboard: a clerk unpasses vouchers here.
path: 'voucher-correction',
loadComponent: () =>
import('./voucher-correction/voucher-correction.component').then((m) => m.VoucherCorrectionComponent),
data: { title: 'Voucher Correction', breadcrumb: 'Voucher Correction' }
},
{ {
path: 'closure-requests', path: 'closure-requests',
loadComponent: () => loadComponent: () =>
@@ -225,6 +233,13 @@ const routes: Routes = [
component: VaultPositionComponent, component: VaultPositionComponent,
data: { title: 'Vault Position', breadcrumb: 'Vault Position' } data: { title: 'Vault Position', breadcrumb: 'Vault Position' }
}, },
{
// What the whole branch holds per denomination: the vault plus every cashier's drawer, so an
// exchange (which leaves the vault alone) is visible in the bank's total.
path: 'branch-position',
component: BranchCashPositionComponent,
data: { title: 'Branch Cash Position', breadcrumb: 'Branch Cash Position' }
},
{ {
// The same day book the clerk and cashier read, reached from where a principal officer // The same day book the clerk and cashier read, reached from where a principal officer
// signing the day off actually looks. It carries the Officer Verification Sheet — each // signing the day off actually looks. It carries the Officer Verification Sheet — each
@@ -283,6 +298,12 @@ const routes: Routes = [
component: ReconciliationComponent, component: ReconciliationComponent,
data: { title: 'Reconciliation', breadcrumb: 'Reconciliation' } data: { title: 'Reconciliation', breadcrumb: 'Reconciliation' }
}, },
{
path: 'voucher-correction',
loadComponent: () =>
import('./voucher-correction/voucher-correction.component').then((m) => m.VoucherCorrectionComponent),
data: { title: 'Voucher Correction', breadcrumb: 'Voucher Correction' }
},
{ {
path: 'cash-history', path: 'cash-history',
component: CashHistoryComponent, component: CashHistoryComponent,
+29 -13
View File
@@ -32,9 +32,6 @@ export class CashierService {
getCashExchange(id: number): Observable<any> { getCashExchange(id: number): Observable<any> {
return this.http.get(`/cashexchange/${id}`); return this.http.get(`/cashexchange/${id}`);
} }
reverseCashExchange(id: number, reason: string): Observable<any> {
return this.http.post(`/cashexchange/${id}/reverse`, { reason });
}
// ── Tellers / Cashiers ── // ── Tellers / Cashiers ──
getTellers(officeId?: number): Observable<any[]> { getTellers(officeId?: number): Observable<any[]> {
@@ -50,8 +47,21 @@ export class CashierService {
} }
// ── Cash Transfer ── // ── Cash Transfer ──
createCashTransfer(data: any): Observable<any> { /** Cash leaves the vault only when a different person approves, so the screen raises a request, not a transfer. */
return this.http.post('/cashtransfer', data); createCashTransferRequest(data: any): Observable<any> {
return this.http.post('/cashtransfer/requests', data);
}
/** Requests by status (comma separated); mine narrows them to the ones the caller raised. */
getCashTransferRequests(status?: string, mine = false): Observable<any[]> {
let params = new HttpParams().set('mine', String(mine));
if (status) params = params.set('status', status);
return this.http.get<any[]>('/cashtransfer/requests', { params });
}
approveCashTransferRequest(id: number): Observable<any> {
return this.http.post(`/cashtransfer/requests/${id}/approve`, {});
}
rejectCashTransferRequest(id: number, reason: string): Observable<any> {
return this.http.post(`/cashtransfer/requests/${id}/reject`, { reason });
} }
getCashTransfers(offset = 0, limit = 20): Observable<any> { getCashTransfers(offset = 0, limit = 20): Observable<any> {
const params = new HttpParams().set('offset', offset).set('limit', limit); const params = new HttpParams().set('offset', offset).set('limit', limit);
@@ -60,9 +70,6 @@ export class CashierService {
getCashTransferById(id: number): Observable<any> { getCashTransferById(id: number): Observable<any> {
return this.http.get(`/cashtransfer/${id}`); return this.http.get(`/cashtransfer/${id}`);
} }
reverseCashTransfer(id: number, reason: string): Observable<any> {
return this.http.post(`/cashtransfer/${id}/reverse`, { reason });
}
// ── Cash Settlement ── // ── Cash Settlement ──
createCashSettlement(data: any): Observable<any> { createCashSettlement(data: any): Observable<any> {
@@ -75,9 +82,6 @@ export class CashierService {
getCashSettlementById(id: number): Observable<any> { getCashSettlementById(id: number): Observable<any> {
return this.http.get(`/cashsettlement/${id}`); return this.http.get(`/cashsettlement/${id}`);
} }
reverseCashSettlement(id: number, reason: string): Observable<any> {
return this.http.post(`/cashsettlement/${id}/reverse`, { reason });
}
// ── Inter-cashier Transfer ── // ── Inter-cashier Transfer ──
createInterCashierTransfer(data: any): Observable<any> { createInterCashierTransfer(data: any): Observable<any> {
@@ -90,8 +94,10 @@ export class CashierService {
getInterCashierById(id: number): Observable<any> { getInterCashierById(id: number): Observable<any> {
return this.http.get(`/cashintercashier/${id}`); return this.http.get(`/cashintercashier/${id}`);
} }
reverseInterCashierTransfer(id: number, reason: string): Observable<any> { /** One cashier's details, today's vault allocation and denomination-wise cash, for either side of a transfer. */
return this.http.post(`/cashintercashier/${id}/reverse`, { reason }); getInterCashierCashierSummary(cashierId: number, date: string): Observable<any> {
const params = new HttpParams().set('cashierId', cashierId).set('date', date);
return this.http.get<any>('/cashintercashier/cashier-summary', { params });
} }
// ── Reconciliation ── // ── Reconciliation ──
@@ -318,6 +324,16 @@ export class CashierService {
if (asOfDate) params = params.set('asOfDate', asOfDate); if (asOfDate) params = params.set('asOfDate', asOfDate);
return this.http.get('/cashreports/vault-position', { params }); return this.http.get('/cashreports/vault-position', { params });
} }
/**
* Denomination-wise cash the whole branch holds: its vault(s) plus every cashier's drawer, with the day's
* exchange movement beside it. Not for a cashier -- the server refuses it.
*/
branchCashPosition(asOfDate?: string, officeId?: number): Observable<any> {
let params = new HttpParams();
if (asOfDate) params = params.set('asOfDate', asOfDate);
if (officeId) params = params.set('officeId', String(officeId));
return this.http.get('/cashreports/branch-position', { params });
}
excessTransactionReport(threshold: number, fromDate?: string, toDate?: string): Observable<any[]> { excessTransactionReport(threshold: number, fromDate?: string, toDate?: string): Observable<any[]> {
let params = new HttpParams().set('threshold', String(threshold)); let params = new HttpParams().set('threshold', String(threshold));
if (fromDate) params = params.set('fromDate', fromDate); if (fromDate) params = params.set('fromDate', fromDate);
@@ -202,6 +202,7 @@
<th class="num">Amount</th> <th class="num">Amount</th>
<th>Payment</th> <th>Payment</th>
<th>Status</th> <th>Status</th>
<th>Correction</th>
<th>By</th> <th>By</th>
<th>Approved By</th> <th>Approved By</th>
<th>Time</th> <th>Time</th>
@@ -231,6 +232,18 @@
<td> <td>
<span [class]="statusClass(r.status)">{{ r.status }}</span> <span [class]="statusClass(r.status)">{{ r.status }}</span>
</td> </td>
<td>
<!-- Where the voucher stands after a correction: unpassed, revoked, closed or corrected. -->
<mifosx-voucher-status
[status]="r.voucherStatus"
[revokedBy]="r.revokedByVoucherNo"
[replaces]="r.replacesVoucherNo"
[note]="r.correctionNote"
></mifosx-voucher-status>
@if (!r.voucherStatus || r.voucherStatus === 'ACTIVE') {
<span class="db-muted">—</span>
}
</td>
<td>{{ r.handledBy ?? '—' }}</td> <td>{{ r.handledBy ?? '—' }}</td>
<td> <td>
{{ r.approvedBy ?? '—' }} {{ r.approvedBy ?? '—' }}
@@ -256,7 +269,7 @@
— —
} }
</td> </td>
<td colspan="5"></td> <td colspan="6"></td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
@@ -14,6 +14,7 @@ import { Router } from '@angular/router';
import { catchError, of } from 'rxjs'; import { catchError, of } from 'rxjs';
import { CashierService } from '../cashier.service'; import { CashierService } from '../cashier.service';
import { businessToday } from 'app/core/utils/business-today'; import { businessToday } from 'app/core/utils/business-today';
import { VoucherStatusComponent, VoucherStatus } from '../voucher-status/voucher-status.component';
/** /**
* Which part of the day's work a row came from. Set by the server, one per source register. * Which part of the day's work a row came from. Set by the server, one per source register.
@@ -26,6 +27,11 @@ type DayBookSection = 'CASHIER' | 'CLERK' | 'SYSTEM';
interface DayBookRow { interface DayBookRow {
voucherNo: string | null; voucherNo: string | null;
/** Where the voucher stands after a correction: active, revoked, under correction, or corrected. */
voucherStatus?: VoucherStatus;
revokedByVoucherNo?: string | null;
replacesVoucherNo?: string | null;
correctionNote?: string | null;
section: DayBookSection; section: DayBookSection;
side: 'CR' | 'DR'; side: 'CR' | 'DR';
kind: string; kind: string;
@@ -58,7 +64,8 @@ interface DayBookRow {
imports: [ imports: [
CommonModule, CommonModule,
FormsModule, FormsModule,
MatIconModule MatIconModule,
VoucherStatusComponent
] ]
}) })
export class DayBookComponent implements OnInit { export class DayBookComponent implements OnInit {
@@ -11,41 +11,29 @@
<div> <div>
<div class="pg-eyebrow">CASHIER · INTER-CASHIER TRANSFER</div> <div class="pg-eyebrow">CASHIER · INTER-CASHIER TRANSFER</div>
<h1 class="pg-title">Inter-Cashier Transfer</h1> <h1 class="pg-title">Inter-Cashier Transfer</h1>
<p class="pg-sub">Move denomination-wise cash between two cashiers within the same teller.</p> <p class="pg-sub">Hand over denomination-wise cash from your drawer to another cashier at your counter.</p>
</div> </div>
<button type="button" class="pg-btn pg-btn--ghost" (click)="clear()"><mat-icon>undo</mat-icon> Clear</button> <button type="button" class="pg-btn pg-btn--ghost" (click)="clear()"><mat-icon>undo</mat-icon> Clear</button>
</header> </header>
<div class="pg-toolbar pg-toolbar--mat"> @if (ownCashierMissing) {
@if (tellers.length === 1) { <div class="ict-alert">
<mat-form-field appearance="outline" subscriptSizing="dynamic"> <mat-icon>person_off</mat-icon>
<mat-label>Teller</mat-label> Your login is not linked to a cashier. An inter-cashier transfer is made by the cashier handing the cash over, so
<input matInput type="text" [value]="tellers[0].name" readonly /> log in as that cashier.
</mat-form-field> </div>
} @else { }
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>Teller</mat-label>
<mat-select [value]="selectedTellerId" (selectionChange)="onTellerSelect($event.value)">
@for (t of tellers; track t.id) {
<mat-option [value]="t.id">{{ t.name }}</mat-option>
}
@if (tellers.length === 0) {
<mat-option [value]="null" disabled>No tellers configured</mat-option>
}
</mat-select>
</mat-form-field>
}
<div class="pg-toolbar pg-toolbar--mat">
<mat-form-field appearance="outline" subscriptSizing="dynamic"> <mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>From (Cashier)</mat-label> <mat-label>Teller</mat-label>
<mat-select [value]="fromCashierId" (selectionChange)="onFromSelect($event.value)" [disabled]="!selectedTellerId"> <input matInput type="text" [value]="tellerName || '—'" readonly />
@for (c of availableFrom; track c.id) { </mat-form-field>
<mat-option [value]="c.id">{{ c.label }}</mat-option>
} <!-- The sender is always the cashier who is logged in; nothing to pick. -->
@if (selectedTellerId && allCashiers.length === 0 && !loadingCashiers) { <mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-option [value]="null" disabled>No cashiers</mat-option> <mat-label>From (You)</mat-label>
} <input matInput type="text" [value]="fromParty || '—'" readonly />
</mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" subscriptSizing="dynamic"> <mat-form-field appearance="outline" subscriptSizing="dynamic">
@@ -54,7 +42,7 @@
@for (c of availableTo; track c.id) { @for (c of availableTo; track c.id) {
<mat-option [value]="c.id">{{ c.label }}</mat-option> <mat-option [value]="c.id">{{ c.label }}</mat-option>
} }
@if (fromCashierId && availableTo.length === 0) { @if (fromCashierId && !loadingCashiers && availableTo.length === 0) {
<mat-option [value]="null" disabled>No other cashiers</mat-option> <mat-option [value]="null" disabled>No other cashiers</mat-option>
} }
</mat-select> </mat-select>
@@ -62,7 +50,7 @@
<mat-form-field appearance="outline" subscriptSizing="dynamic"> <mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>Date</mat-label> <mat-label>Date</mat-label>
<input matInput type="date" [value]="transferDate" (change)="transferDate = $any($event.target).value" /> <input matInput type="date" [value]="transferDate" (change)="onDateChange($any($event.target).value)" />
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="pg-note-field"> <mat-form-field appearance="outline" subscriptSizing="dynamic" class="pg-note-field">
@@ -71,26 +59,102 @@
</mat-form-field> </mat-form-field>
</div> </div>
<!-- Both sides of the transfer: who they are, whether the vault has allocated them cash today,
and what they hold now. -->
@if (fromCashierId || toCashierId) {
<div class="ict-parties">
<ng-container
*ngTemplateOutlet="
partyCard;
context: { title: 'From (Sending Cashier)', s: fromSummary, loading: loadingFrom, picked: !!fromCashierId }
"
></ng-container>
<mat-icon class="ict-parties__arrow">arrow_forward</mat-icon>
<ng-container
*ngTemplateOutlet="
partyCard;
context: { title: 'To (Receiving Cashier)', s: toSummary, loading: loadingTo, picked: !!toCashierId }
"
></ng-container>
</div>
}
<ng-template #partyCard let-title="title" let-s="s" let-loading="loading" let-picked="picked">
<div class="ict-party" [class.ict-party--blocked]="s && !s.cashAllocated">
<div class="ict-party__title">{{ title }}</div>
@if (!picked) {
<div class="ict-party__empty">Select a cashier</div>
} @else if (loading) {
<div class="ict-party__empty">Loading…</div>
} @else if (!s) {
<div class="ict-party__empty">Could not load this cashier's details.</div>
} @else {
<div class="ict-party__name">{{ s.cashierName || '—' }}</div>
<div class="ict-party__meta">
<span><mat-icon>point_of_sale</mat-icon> {{ s.tellerName || '—' }}</span>
<span><mat-icon>account_balance</mat-icon> {{ s.officeName || '—' }}</span>
</div>
<div class="ict-party__figures">
<div>
<div class="ict-party__label">Allocated today</div>
<div class="ict-party__value">₹{{ s.allocatedAmount | number: '1.2-2' }}</div>
</div>
<div>
<div class="ict-party__label">Cash in hand</div>
<div class="ict-party__value">₹{{ s.totalAmount | number: '1.2-2' }}</div>
</div>
</div>
@if (!s.cashAllocated) {
<div class="ict-party__warn">
<mat-icon>block</mat-icon> No cash allocated from the vault for this date — inter-cashier transfer is not
allowed.
</div>
}
}
</div>
</ng-template>
@if (fromSummary && toSummary && !bothAllocated) {
<div class="ict-alert">
<mat-icon>block</mat-icon>
Both cashiers must first be allocated cash from the vault (Cash Transfer) for {{ transferDate }} before an
inter-cashier transfer.
</div>
}
@if (anyExceedsHeld) {
<div class="ict-alert">
<mat-icon>error_outline</mat-icon>
The sending cashier does not hold enough of the highlighted denominations.
</div>
}
<div class="pg-card"> <div class="pg-card">
<table class="pg-table"> <table class="pg-table">
<thead> <thead>
<tr> <tr>
<th>Denomination</th> <th>Denomination</th>
<th class="num">From holds</th>
<th style="text-align: center">Count</th> <th style="text-align: center">Count</th>
<th class="num">Amount</th> <th class="num">Amount</th>
<th class="num">To holds</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@if (notes.length) { @if (notes.length) {
<tr class="pg-section"> <tr class="pg-section">
<td colspan="3">Bank Notes</td> <td colspan="5">Bank Notes</td>
</tr> </tr>
} }
@for (d of notes; track d.id) { @for (d of notes; track d.id) {
<tr> <tr [class.ict-row--over]="exceedsHeld(d)">
<td> <td>
<span class="pg-chip">{{ d.label }}</span> <span class="pg-chip">{{ d.label }}</span>
</td> </td>
<td class="num" [class.ict-held--over]="exceedsHeld(d)">
<ng-container
*ngTemplateOutlet="heldCell; context: { n: heldBy(fromSummary, d), delta: -countFor(d) }"
></ng-container>
</td>
<td style="display: flex; justify-content: center"> <td style="display: flex; justify-content: center">
<div class="pg-step"> <div class="pg-step">
<button type="button" (click)="bump(d, -1)" [disabled]="countFor(d) === 0">−</button> <button type="button" (click)="bump(d, -1)" [disabled]="countFor(d) === 0">−</button>
@@ -99,18 +163,28 @@
</div> </div>
</td> </td>
<td class="num">₹{{ subtotal(d) | number: '1.2-2' }}</td> <td class="num">₹{{ subtotal(d) | number: '1.2-2' }}</td>
<td class="num">
<ng-container
*ngTemplateOutlet="heldCell; context: { n: heldBy(toSummary, d), delta: countFor(d) }"
></ng-container>
</td>
</tr> </tr>
} }
@if (coins.length) { @if (coins.length) {
<tr class="pg-section"> <tr class="pg-section">
<td colspan="3">Coins</td> <td colspan="5">Coins</td>
</tr> </tr>
} }
@for (d of coins; track d.id) { @for (d of coins; track d.id) {
<tr> <tr [class.ict-row--over]="exceedsHeld(d)">
<td> <td>
<span class="pg-chip pg-chip--coin">{{ d.label }}</span> <span class="pg-chip pg-chip--coin">{{ d.label }}</span>
</td> </td>
<td class="num" [class.ict-held--over]="exceedsHeld(d)">
<ng-container
*ngTemplateOutlet="heldCell; context: { n: heldBy(fromSummary, d), delta: -countFor(d) }"
></ng-container>
</td>
<td style="display: flex; justify-content: center"> <td style="display: flex; justify-content: center">
<div class="pg-step"> <div class="pg-step">
<button type="button" (click)="bump(d, -1)" [disabled]="countFor(d) === 0">−</button> <button type="button" (click)="bump(d, -1)" [disabled]="countFor(d) === 0">−</button>
@@ -119,17 +193,34 @@
</div> </div>
</td> </td>
<td class="num">₹{{ subtotal(d) | number: '1.2-2' }}</td> <td class="num">₹{{ subtotal(d) | number: '1.2-2' }}</td>
<td class="num">
<ng-container
*ngTemplateOutlet="heldCell; context: { n: heldBy(toSummary, d), delta: countFor(d) }"
></ng-container>
</td>
</tr> </tr>
} }
@if (denoms.length === 0) { @if (denoms.length === 0) {
<tr> <tr>
<td colspan="3" class="pg-empty">No active denominations. Add some in Cash Denomination.</td> <td colspan="5" class="pg-empty">No active denominations. Add some in Cash Denomination.</td>
</tr> </tr>
} }
</tbody> </tbody>
</table> </table>
</div> </div>
<!-- A held count, with what it becomes once this transfer is recorded. -->
<ng-template #heldCell let-n="n" let-delta="delta">
@if (n === null) {
—
} @else {
{{ n }}
@if (delta !== 0) {
<span class="ict-after">→ {{ n + delta }}</span>
}
}
</ng-template>
<div class="pg-total-bar"> <div class="pg-total-bar">
Total to transfer: <strong>₹{{ total | number: '1.2-2' }}</strong> Total to transfer: <strong>₹{{ total | number: '1.2-2' }}</strong>
<button type="button" class="pg-btn pg-btn--primary" [disabled]="!valid || saving" (click)="submit()"> <button type="button" class="pg-btn pg-btn--primary" [disabled]="!valid || saving" (click)="submit()">
@@ -0,0 +1,150 @@
/**
* 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/.
*/
.ict-parties {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 12px;
margin-bottom: 12px;
&__arrow {
align-self: center;
color: #64748b;
}
@media (width <= 760px) {
grid-template-columns: 1fr;
&__arrow {
justify-self: center;
transform: rotate(90deg);
}
}
}
.ict-party {
padding: 12px 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
&--blocked {
background: #fef2f2;
border-color: #fecaca;
}
&__title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
&__empty {
margin-top: 8px;
font-size: 13px;
color: #94a3b8;
}
&__name {
margin-top: 4px;
font-size: 16px;
font-weight: 700;
color: #0f172a;
}
&__meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 4px;
font-size: 12px;
color: #475569;
span {
display: inline-flex;
align-items: center;
gap: 4px;
}
mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
}
&__figures {
display: flex;
gap: 24px;
margin-top: 10px;
}
&__label {
font-size: 11px;
color: #64748b;
}
&__value {
font-size: 15px;
font-weight: 700;
color: #0f172a;
}
&__warn {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
font-size: 12px;
font-weight: 600;
color: #991b1b;
mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
}
}
.ict-alert {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 8px 14px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
font-size: 12px;
color: #991b1b;
mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
}
.ict-row--over {
background: #fef2f2;
}
.ict-held--over {
color: #b91c1c;
font-weight: 700;
}
.ict-after {
margin-left: 4px;
font-size: 11px;
color: #64748b;
}
@@ -29,12 +29,27 @@ interface Cashier {
id: number; id: number;
label: string; label: string;
} }
/** One side of the transfer, from GET /cashintercashier/cashier-summary. */
interface CashierSummary {
cashierId: number;
cashierName: string;
tellerName: string;
officeName: string;
cashAllocated: boolean;
allocatedAmount: number;
totalAmount: number;
/** Count held per denomination id. */
held: Record<number, number>;
}
/** Move cash denomination-wise between two cashiers under the same teller. */ /** Move cash denomination-wise between two cashiers under the same teller. */
@Component({ @Component({
selector: 'mifosx-inter-cashier-transfer', selector: 'mifosx-inter-cashier-transfer',
templateUrl: './inter-cashier-transfer.component.html', templateUrl: './inter-cashier-transfer.component.html',
styleUrls: ['../cashier-shared.scss'], styleUrls: [
'../cashier-shared.scss',
'./inter-cashier-transfer.component.scss'
],
standalone: true, standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
@@ -57,7 +72,12 @@ export class InterCashierTransferComponent implements OnInit {
note = ''; note = '';
saving = false; saving = false;
tellers: { id: number; name: string }[] = []; /**
* The sending cashier is always the one logged in: cash is handed over from their own drawer, so there is
* no one else to pick on that side. Only the receiving cashier is chosen.
*/
ownCashierMissing = false;
tellerName = '';
allCashiers: Cashier[] = []; allCashiers: Cashier[] = [];
selectedTellerId: number | null = null; selectedTellerId: number | null = null;
fromCashierId: number | null = null; fromCashierId: number | null = null;
@@ -66,15 +86,19 @@ export class InterCashierTransferComponent implements OnInit {
toParty = ''; toParty = '';
loadingCashiers = false; loadingCashiers = false;
/** Details and denomination-wise cash of each side, so both are seen before the transfer is recorded. */
fromSummary: CashierSummary | null = null;
toSummary: CashierSummary | null = null;
loadingFrom = false;
loadingTo = false;
get denoms(): Denom[] { get denoms(): Denom[] {
return [ return [
...this.notes, ...this.notes,
...this.coins ...this.coins
]; ];
} }
get availableFrom(): Cashier[] { /** Everyone under the same teller except the sender. */
return this.allCashiers;
}
get availableTo(): Cashier[] { get availableTo(): Cashier[] {
return this.allCashiers.filter((c) => c.id !== this.fromCashierId); return this.allCashiers.filter((c) => c.id !== this.fromCashierId);
} }
@@ -98,25 +122,20 @@ export class InterCashierTransferComponent implements OnInit {
this.coins = []; this.coins = [];
} }
}); });
this.service // The sender is the cashier behind this login; their counter then gives the receivers to pick from.
.getTellers() this.service.getCurrentCashierInfo().subscribe((info) => {
.pipe(catchError(() => of([] as any[]))) if (!info) {
.subscribe((list) => { this.ownCashierMissing = true;
this.tellers = (list || []).map((t: any) => ({ id: t.id, name: t.name })); return;
if (this.tellers.length === 1) { }
this.onTellerSelect(this.tellers[0].id); this.fromCashierId = info.cashierId;
} this.fromParty = info.cashierName;
}); this.loadSummary('from');
});
} }
onTellerSelect(tellerId: number): void { /** The other cashiers at this counter, one of whom receives the cash. */
this.selectedTellerId = tellerId; private loadReceivers(tellerId: number): void {
this.fromCashierId = null;
this.toCashierId = null;
this.fromParty = '';
this.toParty = '';
this.allCashiers = [];
if (!tellerId) return;
this.loadingCashiers = true; this.loadingCashiers = true;
this.service this.service
.getCashiersForTeller(tellerId) .getCashiersForTeller(tellerId)
@@ -127,20 +146,90 @@ export class InterCashierTransferComponent implements OnInit {
}); });
} }
onFromSelect(cashierId: number): void {
this.fromCashierId = cashierId;
const c = this.allCashiers.find((x) => x.id === cashierId);
this.fromParty = c ? c.label : '';
if (this.toCashierId === cashierId) {
this.toCashierId = null;
this.toParty = '';
}
}
onToSelect(cashierId: number): void { onToSelect(cashierId: number): void {
this.toCashierId = cashierId; this.toCashierId = cashierId;
const c = this.allCashiers.find((x) => x.id === cashierId); const c = this.allCashiers.find((x) => x.id === cashierId);
this.toParty = c ? c.label : ''; this.toParty = c ? c.label : '';
this.loadSummary('to');
}
onDateChange(value: string): void {
this.transferDate = value;
this.loadSummary('from');
this.loadSummary('to');
}
/** Fetch one side's details, vault allocation and denomination-wise cash for the transfer date. */
private loadSummary(side: 'from' | 'to'): void {
const cashierId = side === 'from' ? this.fromCashierId : this.toCashierId;
if (side === 'from') {
this.fromSummary = null;
} else {
this.toSummary = null;
}
if (!cashierId || !this.transferDate) return;
this.setLoading(side, true);
this.service
.getInterCashierCashierSummary(cashierId, this.transferDate)
.pipe(catchError(() => of(null)))
.subscribe((r: any) => {
this.setLoading(side, false);
// A late answer for a cashier no longer selected on that side is dropped.
const current = side === 'from' ? this.fromCashierId : this.toCashierId;
if (!r || current !== cashierId) return;
// The sender's summary also tells which counter they are at, hence who they can hand cash to.
if (side === 'from' && r.tellerId && this.selectedTellerId !== Number(r.tellerId)) {
this.selectedTellerId = Number(r.tellerId);
this.tellerName = r.tellerName || '';
this.loadReceivers(this.selectedTellerId);
}
const held: Record<number, number> = {};
for (const d of r.denominations || []) {
held[d.denominationId] = (held[d.denominationId] || 0) + Number(d.count || 0);
}
const summary: CashierSummary = {
cashierId: r.cashierId,
cashierName: r.cashierName,
tellerName: r.tellerName,
officeName: r.officeName,
cashAllocated: !!r.cashAllocated,
allocatedAmount: Number(r.allocatedAmount || 0),
totalAmount: Number(r.totalAmount || 0),
held
};
if (side === 'from') {
this.fromSummary = summary;
} else {
this.toSummary = summary;
}
});
}
private setLoading(side: 'from' | 'to', loading: boolean): void {
if (side === 'from') {
this.loadingFrom = loading;
} else {
this.loadingTo = loading;
}
}
/** Count of the denomination the cashier holds, or null while their figures are not loaded. */
heldBy(summary: CashierSummary | null, d: Denom): number | null {
return summary ? summary.held[d.id] || 0 : null;
}
/** The sending cashier is asked to hand on more of this denomination than they hold. */
exceedsHeld(d: Denom): boolean {
return !!this.fromSummary && this.countFor(d) > (this.fromSummary.held[d.id] || 0);
}
get anyExceedsHeld(): boolean {
return this.denoms.some((d) => this.exceedsHeld(d));
}
/** Both sides must have been allocated cash from the vault for the day before they can transfer. */
get bothAllocated(): boolean {
return !!this.fromSummary?.cashAllocated && !!this.toSummary?.cashAllocated;
} }
countFor(d: Denom): number { countFor(d: Denom): number {
@@ -160,7 +249,14 @@ export class InterCashierTransferComponent implements OnInit {
return this.denoms.reduce((s, d) => s + this.subtotal(d), 0); return this.denoms.reduce((s, d) => s + this.subtotal(d), 0);
} }
get valid(): boolean { get valid(): boolean {
return this.total > 0 && !!this.selectedTellerId && !!this.fromCashierId && !!this.toCashierId; return (
this.total > 0 &&
!!this.selectedTellerId &&
!!this.fromCashierId &&
!!this.toCashierId &&
this.bothAllocated &&
!this.anyExceedsHeld
);
} }
clear(): void { clear(): void {
@@ -187,10 +283,12 @@ export class InterCashierTransferComponent implements OnInit {
this.snackBar.open('Inter-cashier transfer recorded', 'Close', { duration: 3000 }); this.snackBar.open('Inter-cashier transfer recorded', 'Close', { duration: 3000 });
this.clear(); this.clear();
this.note = ''; this.note = '';
this.fromCashierId = null; // The sender stays the logged-in cashier; the receiver is picked afresh, and the sender's holdings
// are read again now that part of them has gone.
this.toCashierId = null; this.toCashierId = null;
this.fromParty = '';
this.toParty = ''; this.toParty = '';
this.toSummary = null;
this.loadSummary('from');
this.saving = false; this.saving = false;
}, },
error: () => { error: () => {
@@ -146,6 +146,7 @@
<th class="num">Amount</th> <th class="num">Amount</th>
<th>My part</th> <th>My part</th>
<th>Status</th> <th>Status</th>
<th>Correction</th>
<th>Time</th> <th>Time</th>
</tr> </tr>
</thead> </thead>
@@ -203,6 +204,18 @@
{{ statusLabel(r.verificationStatus) }} {{ statusLabel(r.verificationStatus) }}
</span> </span>
</td> </td>
<td>
<!-- Where the voucher stands after a correction: unpassed, revoked, closed or corrected. -->
<mifosx-voucher-status
[status]="r.voucherStatus"
[revokedBy]="r.revokedByVoucherNo"
[replaces]="r.replacesVoucherNo"
[note]="r.correctionNote"
></mifosx-voucher-status>
@if (!r.voucherStatus || r.voucherStatus === 'ACTIVE') {
<span class="mw-acct">—</span>
}
</td>
<td class="mw-time">{{ r.createdAt | date: 'HH:mm' }}</td> <td class="mw-time">{{ r.createdAt | date: 'HH:mm' }}</td>
</tr> </tr>
} }
+8 -1
View File
@@ -15,6 +15,7 @@ import { catchError, finalize, of } from 'rxjs';
import { CashierService } from '../cashier.service'; import { CashierService } from '../cashier.service';
import { VoucherDetailDialogComponent } from './voucher-detail-dialog.component'; import { VoucherDetailDialogComponent } from './voucher-detail-dialog.component';
import { businessToday } from 'app/core/utils/business-today'; import { businessToday } from 'app/core/utils/business-today';
import { VoucherStatusComponent, VoucherStatus } from '../voucher-status/voucher-status.component';
/** What the signed-in user's part in a voucher was. */ /** What the signed-in user's part in a voucher was. */
export type MyRole = 'RAISED' | 'VERIFIED' | 'RAISED_AND_VERIFIED'; export type MyRole = 'RAISED' | 'VERIFIED' | 'RAISED_AND_VERIFIED';
@@ -24,6 +25,11 @@ export type VoucherSide = 'CR' | 'DR' | 'JV';
interface MyWorkRow { interface MyWorkRow {
voucherNo: string; voucherNo: string;
/** Where the voucher stands after a correction: active, revoked, under correction, or corrected. */
voucherStatus?: VoucherStatus;
revokedByVoucherNo?: string | null;
replacesVoucherNo?: string | null;
correctionNote?: string | null;
side: VoucherSide | null; side: VoucherSide | null;
voucherType: string | null; voucherType: string | null;
amount: number | null; amount: number | null;
@@ -76,7 +82,8 @@ interface MyWorkReport {
CommonModule, CommonModule,
FormsModule, FormsModule,
MatIconModule, MatIconModule,
MatDialogModule MatDialogModule,
VoucherStatusComponent
] ]
}) })
export class MyWorkComponent implements OnInit { export class MyWorkComponent implements OnInit {
@@ -11,6 +11,7 @@ import { CommonModule } from '@angular/common';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { VoucherStatusComponent, VoucherStatus } from '../voucher-status/voucher-status.component';
export interface VoucherDetailDialogData { export interface VoucherDetailDialogData {
/** Already-loaded detail from CashierService.voucherDetail() — the caller fetches, this dialog /** Already-loaded detail from CashierService.voucherDetail() — the caller fetches, this dialog
@@ -18,6 +19,10 @@ export interface VoucherDetailDialogData {
* duplicated inside every dialog that could ever show a voucher. */ * duplicated inside every dialog that could ever show a voucher. */
detail: { detail: {
voucherNo: string; voucherNo: string;
voucherStatus?: VoucherStatus;
revokedByVoucherNo?: string | null;
replacesVoucherNo?: string | null;
correctionNote?: string | null;
voucherType: string | null; voucherType: string | null;
amount: number | null; amount: number | null;
branchName: string | null; branchName: string | null;
@@ -58,7 +63,8 @@ export interface VoucherDetailDialogData {
CommonModule, CommonModule,
MatDialogModule, MatDialogModule,
MatButtonModule, MatButtonModule,
MatIconModule MatIconModule,
VoucherStatusComponent
], ],
template: ` template: `
<div class="vd-shell"> <div class="vd-shell">
@@ -66,7 +72,15 @@ export interface VoucherDetailDialogData {
<div class="vd-header__title"> <div class="vd-header__title">
<mat-icon class="vd-icon">receipt_long</mat-icon> <mat-icon class="vd-icon">receipt_long</mat-icon>
<div> <div>
<h2>{{ detail.voucherNo }}</h2> <h2>
{{ detail.voucherNo }}
<mifosx-voucher-status
[status]="detail.voucherStatus"
[revokedBy]="detail.revokedByVoucherNo"
[replaces]="detail.replacesVoucherNo"
[note]="detail.correctionNote"
></mifosx-voucher-status>
</h2>
<p>{{ detail.voucherType || 'Voucher' }} &middot; {{ detail.branchName || 'Head Office' }}</p> <p>{{ detail.voucherType || 'Voucher' }} &middot; {{ detail.branchName || 'Head Office' }}</p>
</div> </div>
</div> </div>
@@ -19,34 +19,21 @@
<!-- ── Entry Tab ── --> <!-- ── Entry Tab ── -->
<mat-tab label="New Reconciliation"> <mat-tab label="New Reconciliation">
<div class="pg-tab-body"> <div class="pg-tab-body">
@if (ownCashierMissing) {
<div class="pg-empty">
Your login is not linked to a cashier, so there is no cash drawer to reconcile. Ask an administrator to link
your user to a cashier.
</div>
}
<div class="pg-toolbar pg-toolbar--mat"> <div class="pg-toolbar pg-toolbar--mat">
@if (tellers.length === 1) { <!-- A reconciliation is the cashier's own count of their own drawer: nothing to pick. -->
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>Teller</mat-label>
<input matInput type="text" [value]="tellers[0].name" readonly />
</mat-form-field>
} @else {
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>Teller</mat-label>
<mat-select [value]="selectedTellerId" (selectionChange)="onTellerSelect($event.value)">
@for (t of tellers; track t.id) {
<mat-option [value]="t.id">{{ t.name }}</mat-option>
}
</mat-select>
</mat-form-field>
}
<mat-form-field appearance="outline" subscriptSizing="dynamic"> <mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>Cashier</mat-label> <mat-label>Teller</mat-label>
<mat-select <input matInput type="text" [value]="ownTellerName || '—'" readonly />
[value]="selectedCashierId" </mat-form-field>
(selectionChange)="onCashierSelect($event.value)" <mat-form-field appearance="outline" subscriptSizing="dynamic">
[disabled]="!selectedTellerId" <mat-label>Cashier (You)</mat-label>
> <input matInput type="text" [value]="cashierName || '—'" readonly />
@for (c of cashiers; track c.id) {
<mat-option [value]="c.id">{{ c.label }}</mat-option>
}
</mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" subscriptSizing="dynamic"> <mat-form-field appearance="outline" subscriptSizing="dynamic">
@@ -12,7 +12,6 @@ import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatTabsModule } from '@angular/material/tabs'; import { MatTabsModule } from '@angular/material/tabs';
import { forkJoin, of } from 'rxjs'; import { forkJoin, of } from 'rxjs';
@@ -58,7 +57,6 @@ interface ReconRecord {
MatIconModule, MatIconModule,
MatSnackBarModule, MatSnackBarModule,
MatFormFieldModule, MatFormFieldModule,
MatSelectModule,
MatInputModule, MatInputModule,
MatTabsModule MatTabsModule
] ]
@@ -67,9 +65,14 @@ export class ReconciliationComponent implements OnInit {
private service = inject(CashierService); private service = inject(CashierService);
private snackBar = inject(MatSnackBar); private snackBar = inject(MatSnackBar);
/**
* A reconciliation is the cashier's own count of their own drawer, so nobody else makes one and there is
* no cashier to pick: the screen is fixed to the logged-in cashier. The server refuses anything else.
*/
ownCashierMissing = false;
ownTellerName = '';
// ── Entry form ── // ── Entry form ──
tellers: { id: number; name: string }[] = [];
cashiers: { id: number; label: string }[] = [];
selectedTellerId: number | null = null; selectedTellerId: number | null = null;
selectedCashierId: number | null = null; selectedCashierId: number | null = null;
cashierName = ''; cashierName = '';
@@ -88,42 +91,28 @@ export class ReconciliationComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
const d = businessToday(); const d = businessToday();
this.reconDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; this.reconDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
this.service this.lockToOwnCashier();
.getTellers()
.pipe(catchError(() => of([] as any[])))
.subscribe((list) => {
this.tellers = (list || []).map((t: any) => ({ id: t.id, name: t.name }));
if (this.tellers.length === 1) {
this.onTellerSelect(this.tellers[0].id);
}
});
this.loadHistory(); this.loadHistory();
} }
onTellerSelect(tellerId: number): void { /** Take the logged-in cashier as the one being reconciled, with their counter for the record. */
this.selectedTellerId = tellerId; private lockToOwnCashier(): void {
this.selectedCashierId = null; this.service.getCurrentCashierInfo().subscribe((info) => {
this.cashierName = ''; if (!info) {
this.cashiers = []; this.ownCashierMissing = true;
this.rows = []; return;
if (!tellerId) return; }
this.service this.selectedCashierId = info.cashierId;
.getCashiersForTeller(tellerId) this.cashierName = info.cashierName;
.pipe(catchError(() => of({ cashiers: [] }))) this.service
.subscribe((r: any) => { .getInterCashierCashierSummary(info.cashierId, this.reconDate)
this.cashiers = (r?.cashiers || []).map((c: any) => ({ id: c.id, label: c.staffName })); .pipe(catchError(() => of(null)))
if (this.cashiers.length === 1) { .subscribe((r: any) => {
this.onCashierSelect(this.cashiers[0].id); this.selectedTellerId = r?.tellerId ?? null;
} this.ownTellerName = r?.tellerName || '';
}); });
} this.fetchExpected();
});
onCashierSelect(cashierId: number): void {
this.selectedCashierId = cashierId;
const c = this.cashiers.find((x) => x.id === cashierId);
this.cashierName = c ? c.label : '';
this.rows = [];
this.fetchExpected();
} }
fetchExpected(): void { fetchExpected(): void {
@@ -117,6 +117,8 @@
<select <select
class="ws-f__ctl" class="ws-f__ctl"
[(ngModel)]="row.typ" [(ngModel)]="row.typ"
[disabled]="isTypLocked(row)"
[title]="isTypLocked(row) ? 'Token withdrawal - TYPE is fixed to Payment' : ''"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
(change)="onTypChange(row)" (change)="onTypChange(row)"
> >
@@ -127,11 +129,16 @@
</div> </div>
<div class="ws-f ws-f--branch"> <div class="ws-f ws-f--branch">
<label class="ws-f__lbl" title="Branch">BRANCH</label> <label class="ws-f__lbl" title="Branch">BRANCH</label>
<select class="ws-f__ctl" [(ngModel)]="row.br" (click)="$event.stopPropagation()"> <select
<option [ngValue]="1">001 · Main</option> class="ws-f__ctl"
<option [ngValue]="2">002 · M.G. Road</option> [(ngModel)]="row.br"
<option [ngValue]="14">014 · Station Rd</option> [disabled]="branchSelectOptions.length <= 1"
<option [ngValue]="27">027 · Industrial</option> [title]="branchSelectOptions.length <= 1 ? 'Your branch' : 'Branch'"
(click)="$event.stopPropagation()"
>
@for (b of branchSelectOptions; track b.id) {
<option [ngValue]="b.id">{{ b.name }}</option>
}
</select> </select>
</div> </div>
@if (row.typ === 'DD') { @if (row.typ === 'DD') {
@@ -177,13 +184,7 @@
class="ws-f__ctl" class="ws-f__ctl"
[(ngModel)]="row.acTyp" [(ngModel)]="row.acTyp"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
(change)=" (change)="isCreditOnly(row) && (row.dbCr = 'Cr')"
row.acTyp === 'GL' &&
row.typ !== 'Disbursement' &&
row.typ !== 'Fund Transfer' &&
row.typ !== 'Enter Bank Transfer' &&
(row.dbCr = 'Cr')
"
> >
@for (a of acTypOptionsFor(row); track a) { @for (a of acTypOptionsFor(row); track a) {
<option [value]="a">{{ a }}</option> <option [value]="a">{{ a }}</option>
@@ -266,12 +267,7 @@
type="button" type="button"
class="ws-seg__btn ws-seg__btn--dr" class="ws-seg__btn ws-seg__btn--dr"
[class.ws-seg__btn--active-dr]="row.dbCr === 'Dr'" [class.ws-seg__btn--active-dr]="row.dbCr === 'Dr'"
[disabled]=" [disabled]="isCreditOnly(row)"
row.acTyp === 'GL' &&
row.typ !== 'Disbursement' &&
row.typ !== 'Fund Transfer' &&
row.typ !== 'Enter Bank Transfer'
"
(click)="row.dbCr = 'Dr'" (click)="row.dbCr = 'Dr'"
> >
DR DR
@@ -280,6 +276,7 @@
type="button" type="button"
class="ws-seg__btn ws-seg__btn--cr" class="ws-seg__btn ws-seg__btn--cr"
[class.ws-seg__btn--active-cr]="row.dbCr === 'Cr'" [class.ws-seg__btn--active-cr]="row.dbCr === 'Cr'"
[disabled]="row.typ === 'Withdrawal Slip'"
(click)="row.dbCr = 'Cr'" (click)="row.dbCr = 'Cr'"
> >
CR CR
@@ -711,70 +708,98 @@
<circle cx="12" cy="8" r="4" /> <circle cx="12" cy="8" r="4" />
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" /> <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
</svg> </svg>
Personal Information {{ isGlAccount ? 'GL Account Information' : 'Personal Information' }}
</div> </div>
<div class="te-panel__body"> @if (isGlAccount) {
<div class="te-field"> <div class="te-panel__body">
<span class="te-label">Branch</span><span class="te-value">{{ officeName }}</span> @for (f of glInfo; track f.label) {
<div class="te-field">
<span class="te-label">{{ f.label }}</span
><span class="te-value te-value-wrap" [class.te-mono]="f.mono">{{ f.value }}</span>
</div>
}
</div> </div>
<div class="te-field"> } @else {
<span class="te-label">A/c No.</span <div class="te-panel__body">
><span class="te-value te-mono">{{ accountDetails.accountNo }}</span>
</div>
<div class="te-field">
<span class="te-label">Name</span><span class="te-value te-value-name">{{ clientName }}</span>
</div>
<div class="te-field">
<span class="te-label">S/D/W/H/O</span><span class="te-value">{{ guardianName }}</span>
</div>
<div class="te-field">
<span class="te-label">Address</span><span class="te-value te-value-wrap">{{ clientAddress }}</span>
</div>
<div class="te-field">
<span class="te-label">Email</span><span class="te-value">{{ clientEmail }}</span>
</div>
<div class="te-field-row">
<div class="te-field"> <div class="te-field">
<span class="te-label">Last Txn</span><span class="te-value">{{ lastTransactionDate }}</span> <span class="te-label">Branch</span
><span class="te-value">
@if (isOwnBranchAccount !== null) {
<span
class="te-branch-chip"
[class.te-branch-chip--mine]="isOwnBranchAccount"
[class.te-branch-chip--other]="!isOwnBranchAccount"
[title]="isOwnBranchAccount ? 'Held at your branch' : 'Held at another branch'"
>
<i class="fas fa-map-marker-alt"></i>{{ officeName }}
@if (!isOwnBranchAccount) {
<span class="te-branch-chip__tag">Other branch</span>
}
</span>
} @else {
{{ officeName }}
}
</span>
</div> </div>
<div class="te-field"> <div class="te-field">
<span class="te-label">Type</span <span class="te-label">A/c No.</span
><span class="te-value">{{ accountDetails.depositType?.value ?? selectedRow?.acTyp ?? '—' }}</span> ><span class="te-value te-mono">{{ accountDetails.accountNo }}</span>
</div> </div>
<div class="te-field">
<span class="te-label">Name</span><span class="te-value te-value-name">{{ clientName }}</span>
</div>
<div class="te-field">
<span class="te-label">S/D/W/H/O</span><span class="te-value">{{ guardianName }}</span>
</div>
<div class="te-field">
<span class="te-label">Address</span><span class="te-value te-value-wrap">{{ clientAddress }}</span>
</div>
<div class="te-field">
<span class="te-label">Email</span><span class="te-value">{{ clientEmail }}</span>
</div>
<div class="te-field-row">
<div class="te-field">
<span class="te-label">Last Txn</span><span class="te-value">{{ lastTransactionDate }}</span>
</div>
<div class="te-field">
<span class="te-label">Type</span
><span class="te-value">{{ accountDetails.depositType?.value ?? selectedRow?.acTyp ?? '—' }}</span>
</div>
</div>
<div class="te-field-row">
<div class="te-field">
<span class="te-label">Opening Dt</span><span class="te-value">{{ openingDate }}</span>
</div>
<div class="te-field">
<span class="te-label">Status</span
><span class="te-value">{{ accountDetails.status?.value ?? '—' }}</span>
</div>
</div>
<div class="te-field">
<span class="te-label">CIF No.</span><span class="te-value te-mono">{{ cifNumber }}</span>
</div>
@if (isNonIndividual) {
<div class="te-field">
<span class="te-label">Constitution</span>
<span class="te-value">{{
nonPersonDetails?.constitution?.name ?? nonPersonDetails?.constitutionType?.name ?? '—'
}}</span>
</div>
<div class="te-field">
<span class="te-label">Incorp. No.</span>
<span class="te-value te-mono">{{
nonPersonDetails?.incorpNo ?? nonPersonDetails?.incorporationNo ?? '—'
}}</span>
</div>
<div class="te-field">
<span class="te-label">Main Business</span>
<span class="te-value">{{
nonPersonDetails?.mainBusinessLine?.name ?? nonPersonDetails?.mainBusinessLineType?.name ?? '—'
}}</span>
</div>
}
</div> </div>
<div class="te-field-row"> }
<div class="te-field">
<span class="te-label">Opening Dt</span><span class="te-value">{{ openingDate }}</span>
</div>
<div class="te-field">
<span class="te-label">Status</span
><span class="te-value">{{ accountDetails.status?.value ?? '—' }}</span>
</div>
</div>
<div class="te-field">
<span class="te-label">CIF No.</span><span class="te-value te-mono">{{ cifNumber }}</span>
</div>
@if (isNonIndividual) {
<div class="te-field">
<span class="te-label">Constitution</span>
<span class="te-value">{{
nonPersonDetails?.constitution?.name ?? nonPersonDetails?.constitutionType?.name ?? '—'
}}</span>
</div>
<div class="te-field">
<span class="te-label">Incorp. No.</span>
<span class="te-value te-mono">{{
nonPersonDetails?.incorpNo ?? nonPersonDetails?.incorporationNo ?? '—'
}}</span>
</div>
<div class="te-field">
<span class="te-label">Main Business</span>
<span class="te-value">{{
nonPersonDetails?.mainBusinessLine?.name ?? nonPersonDetails?.mainBusinessLineType?.name ?? '—'
}}</span>
</div>
}
</div>
</div> </div>
<!-- Joint Holders + Nominees --> <!-- Joint Holders + Nominees -->
@@ -929,76 +954,78 @@
<!-- Other Info + KYC + Account Balances --> <!-- Other Info + KYC + Account Balances -->
<div class="te-panel"> <div class="te-panel">
<div class="te-panel__header"> @if (!isGlAccount) {
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <div class="te-panel__header">
<rect x="3" y="4" width="18" height="18" rx="2" /> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="16" y1="2" x2="16" y2="6" /> <rect x="3" y="4" width="18" height="18" rx="2" />
<line x1="8" y1="2" x2="8" y2="6" /> <line x1="16" y1="2" x2="16" y2="6" />
<line x1="3" y1="10" x2="21" y2="10" /> <line x1="8" y1="2" x2="8" y2="6" />
</svg> <line x1="3" y1="10" x2="21" y2="10" />
Other Information </svg>
</div> Other Information
<div class="te-panel__body">
<div class="te-field">
<span class="te-label">Phone No.</span><span class="te-value">{{ clientPhone }}</span>
</div> </div>
<div class="te-field"> <div class="te-panel__body">
<span class="te-label">Client ID</span
><span class="te-value te-mono">{{ accountDetails.clientId }}</span>
</div>
<div class="te-field">
<span class="te-label">PAN</span><span class="te-value te-mono">{{ panNumber }}</span>
</div>
<div class="te-field">
<span class="te-label">KYC Status</span>
<span class="te-value" [style.color]="kycDetails?.kycStatus === 300 ? '#059669' : '#f59e0b'">{{
kycStatus
}}</span>
</div>
<div class="te-field">
<span class="te-label">CKYC No.</span><span class="te-value te-mono">{{ ckycNumber }}</span>
</div>
<div class="te-field">
<span class="te-label">Aadhaar</span><span class="te-value te-mono">{{ aadhaarNumber }}</span>
</div>
<div class="te-field">
<span class="te-label">Product</span>
<span class="te-value">{{
accountDetails.savingsProductName ||
accountDetails.depositProductName ||
accountDetails.productName ||
'—'
}}</span>
</div>
@if (selectedRow?.acTyp === 'SHR') {
<div class="te-field"> <div class="te-field">
<span class="te-label">No. of Shares Held</span <span class="te-label">Phone No.</span><span class="te-value">{{ clientPhone }}</span>
><span class="te-value te-mono">{{ accountDetails.summary?.totalApprovedShares ?? 0 }}</span>
</div> </div>
<div class="te-field"> <div class="te-field">
<span class="te-label">Market Price / Share</span <span class="te-label">Client ID</span
><span class="te-value te-mono" ><span class="te-value te-mono">{{ accountDetails.clientId }}</span>
>{{ currencySymbol }}{{ accountDetails.currentMarketPrice | number: '1.2-2' }}</span
>
</div> </div>
<div class="te-field"> <div class="te-field">
<span class="te-label">Resolution No.</span <span class="te-label">PAN</span><span class="te-value te-mono">{{ panNumber }}</span>
><span class="te-value te-mono">{{ accountDetails.resolutionNumber || '—' }}</span>
</div> </div>
<div class="te-field"> <div class="te-field">
<span class="te-label">Linked Savings A/C No.</span <span class="te-label">KYC Status</span>
><span class="te-value te-mono">{{ accountDetails.savingsAccountNumber || '—' }}</span> <span class="te-value" [style.color]="kycDetails?.kycStatus === 300 ? '#059669' : '#f59e0b'">{{
kycStatus
}}</span>
</div> </div>
@if (accountDetails.linkedLoanAccountNo) { <div class="te-field">
<span class="te-label">CKYC No.</span><span class="te-value te-mono">{{ ckycNumber }}</span>
</div>
<div class="te-field">
<span class="te-label">Aadhaar</span><span class="te-value te-mono">{{ aadhaarNumber }}</span>
</div>
<div class="te-field">
<span class="te-label">Product</span>
<span class="te-value">{{
accountDetails.savingsProductName ||
accountDetails.depositProductName ||
accountDetails.productName ||
'—'
}}</span>
</div>
@if (selectedRow?.acTyp === 'SHR') {
<div class="te-field"> <div class="te-field">
<span class="te-label">Linked Loan A/C No.</span <span class="te-label">No. of Shares Held</span
><span class="te-value te-mono">{{ accountDetails.linkedLoanAccountNo }}</span> ><span class="te-value te-mono">{{ accountDetails.summary?.totalApprovedShares ?? 0 }}</span>
</div> </div>
<div class="te-field">
<span class="te-label">Market Price / Share</span
><span class="te-value te-mono"
>{{ currencySymbol }}{{ accountDetails.currentMarketPrice | number: '1.2-2' }}</span
>
</div>
<div class="te-field">
<span class="te-label">Resolution No.</span
><span class="te-value te-mono">{{ accountDetails.resolutionNumber || '—' }}</span>
</div>
<div class="te-field">
<span class="te-label">Linked Savings A/C No.</span
><span class="te-value te-mono">{{ accountDetails.savingsAccountNumber || '—' }}</span>
</div>
@if (accountDetails.linkedLoanAccountNo) {
<div class="te-field">
<span class="te-label">Linked Loan A/C No.</span
><span class="te-value te-mono">{{ accountDetails.linkedLoanAccountNo }}</span>
</div>
}
} }
} </div>
</div> }
<div class="te-panel__header te-panel__header--mt"> <div class="te-panel__header" [class.te-panel__header--mt]="!isGlAccount">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="1" x2="12" y2="23" /> <line x1="12" y1="1" x2="12" y2="23" />
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /> <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
@@ -1191,7 +1218,24 @@
: '—') : '—')
}}</span }}</span
> >
<span class="te-acs-kv"><b>Branch</b> {{ officeName ?? '—' }}</span> <span class="te-acs-kv"
><b>Branch</b>
@if (isOwnBranchAccount !== null) {
<span
class="te-branch-chip"
[class.te-branch-chip--mine]="isOwnBranchAccount"
[class.te-branch-chip--other]="!isOwnBranchAccount"
[title]="isOwnBranchAccount ? 'Held at your branch' : 'Held at another branch'"
>
<i class="fas fa-map-marker-alt"></i>{{ officeName }}
@if (!isOwnBranchAccount) {
<span class="te-branch-chip__tag">Other branch</span>
}
</span>
} @else {
{{ officeName }}
}
</span>
<span class="te-acs-kv" <span class="te-acs-kv"
><b>Product</b> ><b>Product</b>
{{ {{
@@ -1567,6 +1611,8 @@
<select <select
class="ws-f__ctl" class="ws-f__ctl"
[(ngModel)]="row.typ" [(ngModel)]="row.typ"
[disabled]="isTypLocked(row)"
[title]="isTypLocked(row) ? 'Token withdrawal - TYPE is fixed to Payment' : ''"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
(change)="onTypChange(row)" (change)="onTypChange(row)"
> >
@@ -1577,11 +1623,16 @@
</div> </div>
<div class="ws-f ws-f--branch"> <div class="ws-f ws-f--branch">
<label class="ws-f__lbl">BRANCH</label> <label class="ws-f__lbl">BRANCH</label>
<select class="ws-f__ctl" [(ngModel)]="row.br" (click)="$event.stopPropagation()"> <select
<option [ngValue]="1">001 · Main</option> class="ws-f__ctl"
<option [ngValue]="2">002 · M.G. Road</option> [(ngModel)]="row.br"
<option [ngValue]="14">014 · Station Rd</option> [disabled]="branchSelectOptions.length <= 1"
<option [ngValue]="27">027 · Industrial</option> [title]="branchSelectOptions.length <= 1 ? 'Your branch' : 'Branch'"
(click)="$event.stopPropagation()"
>
@for (b of branchSelectOptions; track b.id) {
<option [ngValue]="b.id">{{ b.name }}</option>
}
</select> </select>
</div> </div>
@if (row.typ === 'DD') { @if (row.typ === 'DD') {
@@ -1627,13 +1678,7 @@
class="ws-f__ctl" class="ws-f__ctl"
[(ngModel)]="row.acTyp" [(ngModel)]="row.acTyp"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
(change)=" (change)="isCreditOnly(row) && (row.dbCr = 'Cr')"
row.acTyp === 'GL' &&
row.typ !== 'Disbursement' &&
row.typ !== 'Fund Transfer' &&
row.typ !== 'Enter Bank Transfer' &&
(row.dbCr = 'Cr')
"
> >
@for (a of acTypOptionsFor(row); track a) { @for (a of acTypOptionsFor(row); track a) {
<option [value]="a">{{ a }}</option> <option [value]="a">{{ a }}</option>
@@ -1704,12 +1749,7 @@
type="button" type="button"
class="ws-seg__btn ws-seg__btn--dr" class="ws-seg__btn ws-seg__btn--dr"
[class.ws-seg__btn--active-dr]="row.dbCr === 'Dr'" [class.ws-seg__btn--active-dr]="row.dbCr === 'Dr'"
[disabled]=" [disabled]="isCreditOnly(row)"
row.acTyp === 'GL' &&
row.typ !== 'Disbursement' &&
row.typ !== 'Fund Transfer' &&
row.typ !== 'Enter Bank Transfer'
"
(click)="$event.stopPropagation(); row.dbCr = 'Dr'" (click)="$event.stopPropagation(); row.dbCr = 'Dr'"
> >
DR DR
@@ -1718,6 +1758,7 @@
type="button" type="button"
class="ws-seg__btn ws-seg__btn--cr" class="ws-seg__btn ws-seg__btn--cr"
[class.ws-seg__btn--active-cr]="row.dbCr === 'Cr'" [class.ws-seg__btn--active-cr]="row.dbCr === 'Cr'"
[disabled]="row.typ === 'Withdrawal Slip'"
(click)="$event.stopPropagation(); row.dbCr = 'Cr'" (click)="$event.stopPropagation(); row.dbCr = 'Cr'"
> >
CR CR
@@ -2043,7 +2084,13 @@
<button class="ws-btn ws-btn--ghost" type="button" (click)="onSearch()">Search</button> <button class="ws-btn ws-btn--ghost" type="button" (click)="onSearch()">Search</button>
<button class="ws-btn ws-btn--mode" type="button">Change Tr.Mode</button> <button class="ws-btn ws-btn--mode" type="button">Change Tr.Mode</button>
@if (isClerk) { @if (isClerk) {
<button class="ws-btn ws-btn--add" type="button" (click)="addRow()" title="Add another transaction row"> <button
class="ws-btn ws-btn--add"
type="button"
[disabled]="selectedRow?.typ === 'Withdrawal Slip'"
(click)="addRow()"
title="Add another transaction row"
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<line x1="12" y1="5" x2="12" y2="19" /> <line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" /> <line x1="5" y1="12" x2="19" y2="12" />
@@ -3462,3 +3462,39 @@ select.te-cell {
box-shadow: none; box-shadow: none;
} }
} }
/* The branch an account is held at, coloured by where the signed-in user works: green for their own branch, red for any other. */
.te-branch-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
&--mine {
background: #dcfce7;
border-color: #4ade80;
color: #166534;
}
&--other {
background: #fca5a5;
border-color: #f87171;
color: #7f1d1d;
}
}
.te-branch-chip__tag {
padding: 0 6px;
border-radius: 8px;
background: rgb(255 255 255 / 80%);
color: #7f1d1d;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@@ -10,7 +10,8 @@ import { Component, OnInit, OnDestroy, inject, Input, ElementRef, ViewChild } fr
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { HttpClient, HttpParams } from '@angular/common/http'; import { HttpClient, HttpContext, HttpParams } from '@angular/common/http';
import { SILENT_HTTP_ERROR } from 'app/core/http/silent-error.token';
import { catchError, debounceTime, distinctUntilChanged, map, timeout } from 'rxjs/operators'; import { catchError, debounceTime, distinctUntilChanged, map, timeout } from 'rxjs/operators';
import { forkJoin, of, Subject } from 'rxjs'; import { forkJoin, of, Subject } from 'rxjs';
import { MatDialog, MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MatDialog, MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -1658,6 +1659,8 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
// Full account + client data // Full account + client data
accountDetails: any = null; accountDetails: any = null;
/** Parent (header) GL of the selected GL account, shown in the GL Account Information panel. */
glParent: { glCode?: string; name?: string } | null = null;
clientDetails: any = null; clientDetails: any = null;
kycDetails: any = null; kycDetails: any = null;
nominees: any[] = []; nominees: any[] = [];
@@ -1685,10 +1688,12 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
private searchToken = 0; private searchToken = 0;
private lastLoadedAcNo = ''; private lastLoadedAcNo = '';
private acNoInput$ = new Subject<{ row: TxnRow; index: number; value: string }>(); private acNoInput$ = new Subject<{ row: TxnRow; index: number; value: string }>();
/** How many characters of the A/C NO. start the automatic account search. */
private static readonly AC_NO_AUTO_SEARCH_MIN_LENGTH = 6;
cashVaultGlId: number | null = null; cashVaultGlId: number | null = null;
/** The Cash Vault GL account's own code and name — the denomination breakdown for a manual GL /** The Cash Vault GL account's own code and name — the denomination breakdown for a manual GL
* entry has to be filed against THIS account, not whichever account the teller typed in, since * entry has to be filed against THIS account, not whichever account the teller typed in, since
* that account is never the one physical notes actually moved through (see submitGlJournalEntry). * that account is never the one physical notes actually moved through.
* Both resolved dynamically off whatever this tenant's own financial-activity mapping names as * Both resolved dynamically off whatever this tenant's own financial-activity mapping names as
* its cash/vault account (see loadCashVaultGl) — never a literal account name or code. */ * its cash/vault account (see loadCashVaultGl) — never a literal account name or code. */
cashVaultGlCode: string | null = null; cashVaultGlCode: string | null = null;
@@ -1873,6 +1878,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
ngOnInit(): void { ngOnInit(): void {
const d = businessToday(); const d = businessToday();
this.today = `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}/${d.getFullYear()}`; this.today = `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}/${d.getFullYear()}`;
this.loadBranches();
this.addRow(); this.addRow();
this.loadDenominations(); this.loadDenominations();
this.loadOpeningPosition(); this.loadOpeningPosition();
@@ -1903,7 +1909,8 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
distinctUntilChanged((a, b) => a.value === b.value && a.row === b.row) distinctUntilChanged((a, b) => a.value === b.value && a.row === b.row)
) )
.subscribe(({ row, index, value }) => { .subscribe(({ row, index, value }) => {
if (value.trim().length >= 4) { // Searches on its own once six characters are typed, for clerk and cashier alike.
if (value.trim().length >= TransactionEntryComponent.AC_NO_AUTO_SEARCH_MIN_LENGTH) {
this.selectedRow = row; this.selectedRow = row;
this.loadAccountDetails(value.trim(), row.acTyp); this.loadAccountDetails(value.trim(), row.acTyp);
} }
@@ -2304,7 +2311,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
// anyway, just without the extra click to get there. // anyway, just without the extra click to get there.
const row: TxnRow = { const row: TxnRow = {
typ: this.isClerk ? 'Withdrawal Slip' : 'Receipt', typ: this.isClerk ? 'Withdrawal Slip' : 'Receipt',
br: 1, br: this.defaultBranchId,
trTp: '', trTp: '',
acTyp: 'SD', acTyp: 'SD',
acNo: '', acNo: '',
@@ -2323,8 +2330,54 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
this.rows.push(row); this.rows.push(row);
} }
/**
* A GL row is credit-only (money received into the account) except on the transfer types, which pick
* either side, and on a Withdrawal Slip, which is always a debit: the GL is debited and the cash
* vault credited when cash is paid out against it (a clerk's request, approved, then paid by the cashier).
*/
isGlCreditOnly(row: TxnRow): boolean {
return (
row.acTyp === 'GL' &&
row.typ !== 'Disbursement' &&
row.typ !== 'Fund Transfer' &&
row.typ !== 'Enter Bank Transfer' &&
row.typ !== 'Withdrawal Slip'
);
}
/**
* A Fixed Deposit row is credit-only on both the clerk and the cashier screens: an FD is funded once, with
* exactly its principal, and money leaves it only through its maturity or premature closure. The one
* exception is the clerk's own "Close this account" flow, which raises a closure request.
*/
isFdCreditOnly(row: TxnRow): boolean {
return row.acTyp === 'FD' && !this.pendingClosure;
}
/** DR is not offered for this row (see isGlCreditOnly and isFdCreditOnly). */
isCreditOnly(row: TxnRow): boolean {
return this.isGlCreditOnly(row) || this.isFdCreditOnly(row);
}
/** Called when the TYPE dropdown changes — sets sensible defaults for TXN TP and DR/CR */ /** Called when the TYPE dropdown changes — sets sensible defaults for TXN TP and DR/CR */
/**
* A cashier row that was filled from an approved token (withdrawal / account-closure) is cash
* leaving the branch to the member, so its TYPE is fixed to Payment and cannot be changed.
* Never true for the clerk screen or for rows keyed in by hand.
*/
isTypLocked(row: TxnRow): boolean {
return (
!this.isClerk &&
!!row.tokNo?.trim() &&
!!(this.activeWithdrawalRequest || this.activeDividendClaimRequest || this.activeClosureRequest)
);
}
onTypChange(row: TxnRow): void { onTypChange(row: TxnRow): void {
if (this.isTypLocked(row)) {
row.typ = 'Payment';
return;
}
switch (row.typ) { switch (row.typ) {
case 'Withdrawal Slip': case 'Withdrawal Slip':
row.dbCr = 'Dr'; row.dbCr = 'Dr';
@@ -2440,7 +2493,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
* such ambiguity — the account itself says what it's for. * such ambiguity — the account itself says what it's for.
*/ */
showsEntryType(row: TxnRow): boolean { showsEntryType(row: TxnRow): boolean {
return row.acTyp === 'GL' && row.dbCr === 'Cr'; return row.acTyp === 'GL';
} }
/** /**
@@ -2618,14 +2671,51 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return !!this.selectedRow && Math.abs(this.denominationTotal - this.ddTargetTotal) < 0.005; return !!this.selectedRow && Math.abs(this.denominationTotal - this.ddTargetTotal) < 0.005;
} }
/**
* The branches an entry can be posted against: the real offices of this installation. Read from the offices
* themselves rather than from a fixed list, so a branch that is added or renamed shows up here without a code change.
*/
branches: { id: number; label: string }[] = [];
private loadBranches(): void {
const own = this.authService.getCredentials();
const ownBranch = own?.officeId
? [{ id: own.officeId, label: this.branchLabel(own.officeId, own.officeName) }]
: [];
// The office list is only asked for by a login allowed to read it. A cashier or clerk is not, and asking anyway
// makes the server refuse and the screen raise an "Unauthorized Request" popup; such a login works in its own
// office, which is the one branch it is offered.
const permissions = own?.permissions ?? [];
const mayReadOffices = permissions.includes('ALL_FUNCTIONS') || permissions.includes('READ_OFFICE');
if (!mayReadOffices) {
this.branches = ownBranch;
return;
}
this.http
.get('/offices')
.pipe(catchError(() => of([])))
.subscribe((list: any) => {
const offices: any[] = Array.isArray(list) ? list : [];
this.branches =
offices.length > 0 ? offices.map((o) => ({ id: o.id, label: this.branchLabel(o.id, o.name) })) : ownBranch;
});
}
private branchLabel(id: number, name: string | null | undefined): string {
return `${String(id).padStart(3, '0')} · ${name ?? 'Branch ' + id}`;
}
/** The office the signed-in user works in, which a new entry is posted against unless they pick another. */
get defaultBranchId(): number {
return this.authService.getCredentials()?.officeId ?? 1;
}
branchNameFor(branchId: number): string { branchNameFor(branchId: number): string {
const map: Record<number, string> = { return (
1: '001 · Main', this.seenBranches.find((b) => b.id === branchId)?.name ??
2: '002 · M.G. Road', this.branches.find((b) => b.id === branchId)?.label ??
14: '014 · Station Rd', `Branch ${branchId}`
27: '027 · Industrial' );
};
return map[branchId] || `Branch ${branchId}`;
} }
/** /**
@@ -3918,7 +4008,8 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
SAVINGS: 'SD', SAVINGS: 'SD',
CURRENT: 'CA', CURRENT: 'CA',
FIXED_DEPOSIT: 'FD', FIXED_DEPOSIT: 'FD',
RECURRING_DEPOSIT: 'RD' RECURRING_DEPOSIT: 'RD',
GL: 'GL'
}; };
openCustomerSearch(): void { openCustomerSearch(): void {
@@ -3974,8 +4065,11 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
.pipe(catchError(() => of(null))) .pipe(catchError(() => of(null)))
.subscribe((res: any) => { .subscribe((res: any) => {
if (token !== this.searchToken) return; // stale result — newer search started if (token !== this.searchToken) return; // stale result — newer search started
const allItems: any[] = res?.pageItems ?? (Array.isArray(res) ? res : []); const found: any[] = res?.pageItems ?? (Array.isArray(res) ? res : []);
const f = cfg.matchField; const f = cfg.matchField;
// SD, FD and RD share one list that returns any kind of deposit account: keep only the kind chosen in A/C TP.
const allItems =
cfg.depositTypeId != null ? found.filter((x: any) => x?.depositType?.id === cfg.depositTypeId) : found;
// Exact match first, then suffix/partial match. Some account types (e.g. Share — its // Exact match first, then suffix/partial match. Some account types (e.g. Share — its
// list endpoint only accepts offset/limit, no accountNo filter at all) always return the // list endpoint only accepts offset/limit, no accountNo filter at all) always return the
const exactMatch = allItems.find((x: any) => String(x[f] ?? '').trim() === String(acNo).trim()); const exactMatch = allItems.find((x: any) => String(x[f] ?? '').trim() === String(acNo).trim());
@@ -4005,7 +4099,18 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return; return;
} }
this.loadingAccount = false; this.loadingAccount = false;
this.accountError = 'Account not found for: ' + acNo; // The number may exist as another kind of account (an FD typed under SD, say): say so, so the clerk can fix A/C TP.
const otherKind =
cfg.depositTypeId != null
? found.find(
(x: any) =>
x?.depositType?.id !== cfg.depositTypeId &&
(String(x[f] ?? '').trim() === String(acNo).trim() || String(x[f] ?? '').endsWith(acNo))
)
: null;
this.accountError = otherKind
? `${acTyp} account not found for: ${acNo} (this number is a ${otherKind.depositType?.value ?? 'different kind of'} account - change A/C TP)`
: `${acTyp} account not found for: ${acNo}`;
}); });
} }
@@ -4069,6 +4174,10 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
* account type — used to keep Header GL accounts out of the results a clerk/cashier can pick * account type — used to keep Header GL accounts out of the results a clerk/cashier can pick
* for a transaction; a Header can never receive a posting, so it should never be offered. */ * for a transaction; a Header can never receive a posting, so it should never be offered. */
extraListQueryParams?: string; extraListQueryParams?: string;
/** SD, FD and RD are all served by the one /savingsaccounts list, which answers with a deposit
* account of any kind for a number. This is the depositType.id the chosen A/C type accepts
* (100 savings, 200 fixed, 300 recurring), so a number of another kind is "not found" here. */
depositTypeId?: number;
} { } {
const t = acTyp?.toUpperCase(); const t = acTyp?.toUpperCase();
if (t === 'LA') { if (t === 'LA') {
@@ -4149,6 +4258,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return { return {
list: '/savingsaccounts', list: '/savingsaccounts',
detail: '/fixeddepositaccounts', detail: '/fixeddepositaccounts',
depositTypeId: 200,
nominee: 'FD', nominee: 'FD',
search: 'fixeddeposit', search: 'fixeddeposit',
siAccountType: 2, siAccountType: 2,
@@ -4166,6 +4276,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return { return {
list: '/savingsaccounts', list: '/savingsaccounts',
detail: '/recurringdepositaccounts', detail: '/recurringdepositaccounts',
depositTypeId: 300,
nominee: 'RD', nominee: 'RD',
search: 'recurringdeposit', search: 'recurringdeposit',
siAccountType: 2, siAccountType: 2,
@@ -4183,6 +4294,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return { return {
list: '/savingsaccounts', list: '/savingsaccounts',
detail: '/savingsaccounts', detail: '/savingsaccounts',
depositTypeId: 100,
nominee: 'SB', nominee: 'SB',
search: 'saving', search: 'saving',
siAccountType: 2, siAccountType: 2,
@@ -4242,7 +4354,19 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return false; return false;
} }
this.accountDetails = acc; this.accountDetails = acc;
this.resolveAccountBranch(acc, acTyp, token, this.selectedRow);
this.jointHolders = acc.jointHolders ?? []; this.jointHolders = acc.jointHolders ?? [];
// GL only: look up the parent (header) GL's name. Never runs for any other account type.
this.glParent = null;
if (acTyp?.toUpperCase() === 'GL' && acc.parentId) {
this.http
.get<any>(`/glaccounts/${acc.parentId}`)
.pipe(catchError(() => of(null)))
.subscribe((p: any) => {
if (token !== this.searchToken) return;
this.glParent = p ? { glCode: p.glCode, name: p.name } : null;
});
}
// Cash Hold / Clearing Hold breakdown only exists for plain savings accounts (m_savings_account) // Cash Hold / Clearing Hold breakdown only exists for plain savings accounts (m_savings_account)
// — FD/RD/Current/Share/GL have no such row, so there's nothing to ask for. // — FD/RD/Current/Share/GL have no such row, so there's nothing to ask for.
if (acTyp?.toUpperCase() === 'SD' && acc.id) { if (acTyp?.toUpperCase() === 'SD' && acc.id) {
@@ -4813,6 +4937,109 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return this.accountDetails?.officeName ?? this.clientDetails?.officeName ?? '—'; return this.accountDetails?.officeName ?? this.clientDetails?.officeName ?? '—';
} }
/** True when the loaded account is a General Ledger account (/glaccounts), which has no client behind it. */
get isGlAccount(): boolean {
return !!this.accountDetails?.glCode && this.selectedRow?.acTyp === 'GL';
}
/** The GL account's own details, shown in place of the client panels. */
get glInfo(): { label: string; value: string; mono?: boolean }[] {
const gl = this.accountDetails;
if (!gl) return [];
const type = gl.type?.value ?? '—';
const nature = [
'ASSET',
'EXPENSE'
].includes(String(type).toUpperCase()) ? 'Debit' : 'Credit';
return [
{ label: 'GL Code', value: gl.glCode ?? '—', mono: true },
{ label: 'GL Name', value: gl.name ?? '—' },
{ label: 'Account Type', value: type },
{ label: 'Usage', value: gl.usage?.value ?? '—' },
{ label: 'Normal Balance', value: nature },
{
label: 'Parent GL',
value: this.glParent?.name
? `${this.glParent.glCode ? this.glParent.glCode.trim() + ' - ' : ''}${this.glParent.name.trim()}`
: gl.parentId != null
? `ID ${gl.parentId}`
: '—'
},
{ label: 'Manual Entries', value: gl.manualEntriesAllowed ? 'Allowed' : 'Not allowed' },
{ label: 'Status', value: gl.disabled ? 'Disabled' : 'Enabled' },
{ label: 'Description', value: gl.description || '—' }
];
}
/**
* Whether the account on screen is held at the branch the signed-in user works at: true for their own branch, false for
* another branch's, null while either branch is not known (the branch is then shown plain, uncoloured).
*/
get isOwnBranchAccount(): boolean | null {
const mine = this.authService.getCredentials()?.officeId;
const accountOffice = this.accountDetails?.officeId ?? this.clientDetails?.officeId;
if (mine == null || accountOffice == null) return null;
return Number(mine) === Number(accountOffice);
}
/** What the BRANCH selector offers: the offices this login may use, plus the branches of the accounts picked here. */
get branchSelectOptions(): { id: number; name: string }[] {
const merged = this.branches.map(
(branch) => this.seenBranches.find((seen) => seen.id === branch.id) ?? { id: branch.id, name: branch.label }
);
for (const seen of this.seenBranches) {
if (!merged.some((branch) => branch.id === seen.id)) merged.push(seen);
}
return merged;
}
/** Branches learned from the accounts picked on this screen; their names are real, whatever the office list says. */
private seenBranches: { id: number; name: string }[] = [];
/**
* The branch an account is held at. The savings, FD and RD detail responses carry no office, so the screen fell back
* to the client's own branch and an account opened at another branch read as the client's. The client's account list
* names each account's branch, so it is read from there. A current account's own response already carries it.
*/
private resolveAccountBranch(acc: any, acTyp: string, token: number, row: TxnRow | null | undefined): void {
if (acc?.officeId != null && acc?.officeName) {
this.adoptAccountBranch({ id: Number(acc.officeId), name: String(acc.officeName) }, row);
return;
}
const type = (acTyp ?? '').toUpperCase();
if (!acc?.id || !acc?.clientId || ![
'SD',
'FD',
'RD',
'CA'
].includes(type)) return;
this.http
.get<any>(`/clients/${acc.clientId}/accounts`, { context: new HttpContext().set(SILENT_HTTP_ERROR, true) })
.pipe(catchError(() => of(null)))
.subscribe((res) => {
// stale: another account was picked while this was loading
if (token !== this.searchToken || this.accountDetails?.id !== acc.id) return;
const list: any[] = (type === 'CA' ? res?.currentAccounts : res?.savingsAccounts) ?? [];
const match = list.find((a: any) => a.id === acc.id);
if (match?.officeId != null && match?.officeName) {
this.adoptAccountBranch({ id: Number(match.officeId), name: String(match.officeName) }, row);
}
});
}
private adoptAccountBranch(branch: { id: number; name: string }, row: TxnRow | null | undefined): void {
this.accountDetails = { ...this.accountDetails, officeId: branch.id, officeName: branch.name };
// /offices lists only the signed-in user's own branches, or nothing for a user who may not read offices; the account's
// branch must still be selectable, under its real name
if (!this.seenBranches.some((b) => b.id === branch.id)) {
this.seenBranches = [
...this.seenBranches,
branch
];
}
if (row) row.br = branch.id;
}
get openingDate(): string { get openingDate(): string {
const raw = const raw =
this.accountDetails?.timeline?.submittedOnDate ?? this.accountDetails?.timeline?.submittedOnDate ??
@@ -5155,6 +5382,20 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
} }
onSave(): void { onSave(): void {
// Money never leaves a Fixed Deposit from this screen, clerk or cashier: no withdrawal slip, payment,
// collection or transfer debits an FD. It is paid out only through its maturity or premature closure
// (the clerk's "Close this account" flow). The DR button is already disabled for FD rows (isFdCreditOnly);
// this also catches a row set to DR by its TYPE, such as a Withdrawal Slip.
const fdDebitRows = this.rows.filter((r) => this.isFdCreditOnly(r) && r.dbCr === 'Dr');
if (fdDebitRows.length > 0) {
this.showAlert('error', 'Fixed Deposit Cannot Be Debited', [
`FD account(s) ${fdDebitRows.map((r) => r.acNo).join(', ')} cannot be debited or withdrawn from.`,
'Money leaves a Fixed Deposit only through its maturity or premature closure.',
'An FD can only be credited — once, with exactly its principal.'
]);
return;
}
// Demand drafts commit here like everything else on the worksheet. Checked first because a DD // Demand drafts commit here like everything else on the worksheet. Checked first because a DD
// row shares its shape with the ordinary entries below — without this it would fall through and // row shares its shape with the ordinary entries below — without this it would fall through and
// post as a plain transaction, with the draft never raised and the charges silently dropped. // post as a plain transaction, with the draft never raised and the charges silently dropped.
@@ -5232,7 +5473,9 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return; return;
} }
// Bank transfer: only savings (SD) or current (CA/CB) accounts allowed // Bank transfer: savings (SD) or current (CA/CB) accounts on either side, plus a Fixed Deposit (FD) on
// the CR side only -- funding it from the customer's own account. The server checks the funding rules
// (first and only funding, exactly the principal, the source account's owner and available balance).
const allowedTypes = new Set([ const allowedTypes = new Set([
'SD', 'SD',
'CA', 'CA',
@@ -5240,13 +5483,13 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
]); ]);
const invalidAccounts = [ const invalidAccounts = [
...drRows, ...drRows,
...crRows ...crRows.filter((r) => r.acTyp !== 'FD')
].filter((r) => !allowedTypes.has(r.acTyp)); ].filter((r) => !allowedTypes.has(r.acTyp));
if (invalidAccounts.length > 0) { if (invalidAccounts.length > 0) {
this.showAlert('error', 'Invalid Account Type', [ this.showAlert('error', 'Invalid Account Type', [
`Account type(s) not allowed in Bank Transfer: ${invalidAccounts.map((r) => r.acTyp + ' (' + r.acNo + ')').join(', ')}`, `Account type(s) not allowed in Bank Transfer: ${invalidAccounts.map((r) => r.acTyp + ' (' + r.acNo + ')').join(', ')}`,
'Only Savings (SD) and Current (CA) accounts are permitted.', 'Debit side: only Savings (SD) and Current (CA) accounts. Credit side: SD, CA or a Fixed Deposit (FD).',
'GL, FD and SHR accounts are not allowed — use Disbursement/Collection instead.', 'GL and SHR accounts are not allowed — use Disbursement/Collection instead.',
'RD installments are paid through a cashier Receipt or Auto Debit.' 'RD installments are paid through a cashier Receipt or Auto Debit.'
]); ]);
return; return;
@@ -5847,10 +6090,14 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return; return;
} }
// GL withdrawal → direct journal entry (no maker-checker) // A GL withdrawal slip is raised by the clerk and paid by the cashier against its token, exactly like a
// GL deposit → falls through to maker-checker block below // savings withdrawal (the clerk branch and the token branch below). Nothing posts from this screen directly:
if (row.acTyp === 'GL' && !isDeposit) { // manual journal entries are switched off on the server.
this.submitGlJournalEntry(row, amount, isDeposit); if (row.acTyp === 'GL' && !isDeposit && !this.clerkMode && !this.activeWithdrawalRequest) {
this.showAlert('error', 'GL Withdrawal', [
'A GL withdrawal is raised by a clerk and paid by the cashier against its token.',
'Enter the token number of the approved request to pay it.'
]);
return; return;
} }
@@ -6223,17 +6470,34 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
const txnDateIso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`; const txnDateIso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
const selectedPt = this.paymentTypes.find((p: any) => p.id === row.paymentTypeId); const selectedPt = this.paymentTypes.find((p: any) => p.id === row.paymentTypeId);
const isGl = row.acTyp === 'GL';
// The Entry Type picked for a GL slip has no column of its own on the request, so it rides on the narration.
const entryTypeName = isGl ? this.entryTypeOptions.find((e) => e.id === row.entryTypeCvId)?.name : undefined;
const description = [
row.description,
entryTypeName ? `[Entry Type: ${entryTypeName}]` : ''
]
.filter(Boolean)
.join(' ');
return { return {
accountNo: this.accountDetails.accountNo, accountNo: isGl ? (this.accountDetails.glCode ?? this.accountDetails.name) : this.accountDetails.accountNo,
accountType: this.creditEntryAccountType(row.acTyp), accountType: this.creditEntryAccountType(row.acTyp),
savingsAccountId: this.accountDetails.id, savingsAccountId: isGl ? null : this.accountDetails.id,
clientId: this.accountDetails.clientId ?? this.clientDetails?.id ?? null, // GL-specific fields: the GL being paid out of and the cash GL it is paid from (null for other types)
clientName: this.clientDetails?.displayName ?? this.accountDetails?.clientName ?? null, glAccountId: isGl ? this.accountDetails.id : null,
contraGlId: isGl ? this.cashVaultGlId : null,
officeId: isGl ? row.br || 1 : null,
currencyCode: isGl ? (this.accountDetails?.currency?.code ?? 'INR') : null,
clientId: isGl ? null : (this.accountDetails.clientId ?? this.clientDetails?.id ?? null),
clientName: isGl
? (this.accountDetails?.name ?? null)
: (this.clientDetails?.displayName ?? this.accountDetails?.clientName ?? null),
amount, amount,
txnDate: txnDateIso, txnDate: txnDateIso,
paymentTypeId: row.paymentTypeId || null, paymentTypeId: row.paymentTypeId || null,
paymentTypeName: selectedPt?.name ?? 'Cash', paymentTypeName: selectedPt?.name ?? 'Cash',
description: row.description || null, description: description || null,
chequeNo: row.chequeNo || null, chequeNo: row.chequeNo || null,
bankName: row.bankName || null, bankName: row.bankName || null,
tokNo: row.tokNo?.trim() || null, tokNo: row.tokNo?.trim() || null,
@@ -6425,106 +6689,6 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
this.addRow(); this.addRow();
} }
private submitGlJournalEntry(row: TxnRow, amount: number, isDeposit: boolean): void {
if (!this.cashVaultGlId) {
this.showAlert('error', 'Cash Vault GL Not Configured', [
'Financial Activity Account (CASH_AT_TELLER) is not configured.',
'Please configure it in System → Financial Activity Accounts.'
]);
this.saving = false;
return;
}
const today = businessToday();
const txnDate = `${String(today.getDate()).padStart(2, '0')}/${String(today.getMonth() + 1).padStart(2, '0')}/${today.getFullYear()}`;
const txnDateIso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
const selectedGlId = this.accountDetails.id;
const contraGlId = this.cashVaultGlId;
// isDeposit (CR button) = cashier receives cash → credit selected GL, debit contra (cash vault)
// isWithdrawal (DR button) = cashier pays out cash → debit selected GL, credit contra (cash vault)
const credits = isDeposit ? [{ glAccountId: selectedGlId, amount }] : [{ glAccountId: contraGlId, amount }];
const debits = isDeposit ? [{ glAccountId: contraGlId, amount }] : [{ glAccountId: selectedGlId, amount }];
const payload: any = {
officeId: row.br || 1,
transactionDate: txnDate,
dateFormat: 'dd/MM/yyyy',
locale: 'en',
currencyCode: this.accountDetails?.currency?.code ?? 'INR',
comments: row.description || null,
credits,
debits,
paymentTypeId: row.paymentTypeId
};
// Check if cash payment so we can record denomination after journal entry
const selectedPt = this.paymentTypes.find((p: any) => p.id === row.paymentTypeId);
const isCashPayment = !!selectedPt?.isCashPayment;
this.saving = true;
this.http
.post('/journalentries', payload)
.pipe(
catchError((err: any) => {
const msg =
err?.error?.errors?.[0]?.defaultUserMessage ??
err?.error?.developerMessage ??
'Journal entry failed. Please try again.';
this.showAlert('error', 'Transaction Failed', [msg]);
this.saving = false;
return of(null);
})
)
.subscribe((res: any) => {
this.saving = false;
if (res) {
// Record denomination so cashier position stays accurate
// Same condition as savings: cash + denom entered + denom matches posted amount
if (isCashPayment && this.denominationTotal > 0 && this.denominationTotal === amount) {
const denomBreakdown = [
...this.notes,
...this.coins
]
.filter((d) => this.countFor(d) > 0)
.map((d) => ({
denominationId: d.id,
denominationValue: d.value,
kind: d.kind,
count: this.countFor(d),
subtotal: this.subtotalFor(d)
}));
// Filed against the Cash Vault GL, not the account the teller selected on screen: that
// selected account (e.g. Sundry Creditors) is the other leg of the journal entry, and
// never the one whose physical notes actually changed hands. Tagging the breakdown to it
// instead of the vault is why this cash never reached the cashier/vault position.
this.http
.post('/cashier/gl-denomination', {
txnId: res.transactionId ?? res.resourceId,
accountNo: this.cashVaultGlCode ?? row.acNo,
accountName: this.cashVaultGlName ?? 'Cash at Vault',
txnType: isDeposit ? 'DEPOSIT' : 'WITHDRAWAL',
txnDate: txnDateIso,
paymentTypeName: selectedPt?.name ?? 'Cash',
denominationBreakdown: denomBreakdown
})
.pipe(catchError(() => of(null)))
.subscribe();
}
const ref = res.transactionId ?? res.resourceId ?? 'N/A';
this.showAlert('success', 'GL Transaction Posted', [
`Journal entry of ₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2 })} posted successfully.`,
`Transaction ID: ${ref}`
]);
this.clearDenominations();
this.loadOpeningPosition();
this.loadAccountDetails(row.acNo.trim(), row.acTyp);
}
});
}
onSearch(): void { onSearch(): void {
if (this.selectedRow?.acNo.trim()) { if (this.selectedRow?.acNo.trim()) {
this.loadAccountDetails(this.selectedRow.acNo.trim(), this.selectedRow.acTyp); this.loadAccountDetails(this.selectedRow.acNo.trim(), this.selectedRow.acTyp);
@@ -0,0 +1,170 @@
<!--
Copyright since 2025 Mifos Initiative
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<div class="cv-tab-content vca-tab">
<!-- ── TITLE BAR ── -->
<div class="vca-action-bar">
<div class="vca-action-bar__left">
<mat-icon class="vca-action-bar__icon">undo</mat-icon>
<div>
<div class="vca-action-bar__title">Voucher Corrections</div>
<div class="vca-action-bar__sub">
Approve or reject a voucher unpass, and the correction entry that follows it. Only the correction approval
moves money.
</div>
</div>
</div>
<div class="vca-counts">
<span class="vca-count"
><strong>{{ unpassCount }}</strong> unpass</span
>
<span class="vca-count"
><strong>{{ correctionCount }}</strong> correction</span
>
</div>
</div>
<!-- ── FILTER BAR ── -->
<div class="vca-filter-bar">
<div class="vca-search-box">
<mat-icon>search</mat-icon>
<input type="text" placeholder="Search by voucher, account, customer or user" [(ngModel)]="searchTerm" />
@if (searchTerm) {
<button type="button" class="vca-search-box__clear" (click)="searchTerm = ''">
<mat-icon>close</mat-icon>
</button>
}
</div>
<span class="vca-fb-sep"></span>
<select class="vca-filter-select" [(ngModel)]="kindFilter">
@for (opt of kindOptions; track opt.value) {
<option [value]="opt.value">{{ opt.label }}</option>
}
</select>
<button type="button" class="vca-btn vca-btn--refresh" (click)="load()" [disabled]="loading">
<mat-icon>refresh</mat-icon>
</button>
</div>
<!-- ── TABLE ── -->
@if (loading && !loaded) {
<div class="vca-empty"><p class="vca-empty__title">Loading…</p></div>
} @else if (rows.length === 0) {
<div class="vca-empty">
<mat-icon class="vca-empty__icon">inbox</mat-icon>
<p class="vca-empty__title">No voucher correction waiting</p>
<p class="vca-empty__text">There is no unpass request or correction entry waiting for review.</p>
</div>
} @else {
<div class="vca-table-wrap">
<table class="vca-table">
<thead>
<tr>
<th>Voucher No</th>
<th>Request</th>
<th>Posted To (Wrong)</th>
<th>Correct Account</th>
<th class="num">Amount</th>
<th>Reason</th>
<th>Raised By</th>
<th>Raised At</th>
<th class="vca-th-action">Action</th>
</tr>
</thead>
<tbody>
@for (r of rows; track r.request.id) {
<tr class="vca-row">
<td class="vca-mono vca-voucher">{{ r.request.original_voucher_no }}</td>
<td>
<span class="vca-kind" [class]="'vca-kind vca-kind--' + r.kind">{{ kindLabel(r.kind) }}</span>
</td>
<td>
<div class="vca-mono">{{ r.request.wrong_account_no }}</div>
<div class="vca-sub">{{ r.request.wrong_client_name || '—' }}</div>
</td>
<td>
@if (r.kind === 'correction') {
<div class="vca-mono vca-strong">{{ r.request.correct_account_no }}</div>
<div class="vca-sub">{{ r.request.correct_client_name || '—' }}</div>
} @else {
<span class="vca-none">—</span>
}
</td>
<td class="num vca-amount">₹{{ r.request.amount | number: '1.2-2' }}</td>
<td class="vca-reason" [title]="r.request.reason || ''">{{ r.request.reason || '—' }}</td>
<td>{{ r.raisedBy || '—' }}</td>
<td class="vca-dt">{{ formatDateTime(r.raisedAt) }}</td>
<td class="vca-action-cell">
<button
type="button"
class="vca-btn vca-btn--reject"
[disabled]="busyId === r.request.id"
(click)="startReject(r)"
>
<mat-icon>close</mat-icon> Reject
</button>
<button
type="button"
class="vca-btn vca-btn--approve"
[disabled]="busyId === r.request.id"
(click)="approve(r)"
>
<mat-icon>check</mat-icon>
{{ r.kind === 'unpass' ? 'Approve unpass' : 'Approve correction' }}
</button>
</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
<!-- ─── Popup: reject with a reason ───────────────────────────────────────── -->
<ng-template #rejectDialog>
@if (rejecting) {
<div class="vca-dlg">
<header class="vca-dlg__head">
<mat-icon class="vca-dlg__ico">block</mat-icon>
<div class="vca-dlg__titles">
<div class="vca-dlg__title">
Reject {{ rejecting.kind === 'unpass' ? 'unpass request' : 'correction entry' }}
</div>
<div class="vca-dlg__sub vca-mono">{{ rejecting.request.original_voucher_no }}</div>
</div>
<button type="button" class="vca-dlg__x" aria-label="Close" (click)="cancelReject()">
<mat-icon>close</mat-icon>
</button>
</header>
<div class="vca-dlg__body">
<label class="vca-label" for="vca-reason">Reason (required)</label>
<textarea
id="vca-reason"
rows="3"
placeholder="Why is this being rejected?"
[(ngModel)]="rejectReason"
></textarea>
</div>
<footer class="vca-dlg__foot">
<button type="button" class="vca-btn vca-btn--ghost" (click)="cancelReject()">Cancel</button>
<button
type="button"
class="vca-btn vca-btn--reject-solid"
[disabled]="!rejectReason.trim() || busyId === rejecting.request.id"
(click)="confirmReject()"
>
Confirm reject
</button>
</footer>
</div>
}
</ng-template>
@@ -0,0 +1,485 @@
/**
* 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/.
*/
// Laid out like the other approval tabs (Withdrawal Requests): title bar, filter bar, one table.
:host {
display: block;
}
.vca-tab {
padding: 0;
}
.vca-action-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: #fff;
border-bottom: 1px solid #e2e8f0;
&__left {
display: flex;
align-items: center;
gap: 12px;
}
&__icon {
font-size: 22px;
width: 22px;
height: 22px;
color: #0f4f3c;
}
&__title {
font-size: 13px;
font-weight: 700;
color: #0d1b2a;
}
&__sub {
max-width: 640px;
margin-top: 1px;
font-size: 11px;
color: #64748b;
}
}
.vca-counts {
display: flex;
gap: 8px;
}
.vca-count {
padding: 2px 10px;
border-radius: 999px;
background: #f1f5f9;
font-size: 11px;
color: #475569;
strong {
color: #0f4f3c;
}
}
.vca-filter-bar {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 6px 16px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.vca-fb-sep {
flex-shrink: 0;
width: 1px;
height: 22px;
margin: 0 4px;
background: #e2e8f0;
}
.vca-search-box {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
min-width: 240px;
padding: 0 10px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
mat-icon {
flex-shrink: 0;
font-size: 17px;
width: 17px;
height: 17px;
color: #94a3b8;
}
&:hover {
border-color: #cbd5e1;
}
&:focus-within {
border-color: #0f4f3c;
box-shadow: 0 0 0 3px rgb(15 79 60 / 8%);
}
input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: inherit;
font-size: 12px;
color: #0d1b2a;
&::placeholder {
color: #94a3b8;
}
}
&__clear {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: #94a3b8;
cursor: pointer;
mat-icon {
font-size: 15px;
width: 15px;
height: 15px;
color: inherit;
}
&:hover {
color: #dc2626;
background: #fef2f2;
}
}
}
.vca-filter-select {
height: 30px;
min-width: 140px;
padding: 0 10px;
border: 1px solid #e2e8f0;
border-radius: 7px;
background: #fff;
font-family: inherit;
font-size: 12px;
color: #0d1b2a;
cursor: pointer;
&:focus {
outline: none;
border-color: #0f4f3c;
}
}
// ── Buttons ─────────────────────────────────────────────────────────────────
.vca-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 7px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
}
&:disabled {
opacity: 0.45;
cursor: not-allowed;
}
&--refresh {
height: 30px;
width: 30px;
justify-content: center;
padding: 0;
margin-left: auto;
border-color: #e2e8f0;
background: #fff;
color: #475569;
}
&--approve {
background: #0f4f3c;
color: #fff;
&:hover:not(:disabled) {
background: #0a3d2e;
}
}
&--reject {
border-color: #fecaca;
background: #fff;
color: #dc2626;
&:hover:not(:disabled) {
background: #fef2f2;
}
}
&--reject-solid {
background: #dc2626;
color: #fff;
}
&--ghost {
border-color: #e2e8f0;
background: #fff;
color: #475569;
}
}
// ── Table ───────────────────────────────────────────────────────────────────
.vca-table-wrap {
overflow-x: auto;
background: #fff;
}
.vca-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
th {
padding: 7px 10px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.06em;
text-align: left;
text-transform: uppercase;
color: #94a3b8;
white-space: nowrap;
}
td {
padding: 5px 10px;
border-bottom: 1px solid #eef2f7;
vertical-align: middle;
color: #0d1b2a;
}
.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.vca-th-action {
text-align: right;
}
}
.vca-row:hover td {
background: #f8fafc;
}
.vca-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: 0.02em;
}
.vca-voucher {
font-weight: 700;
color: #0f4f3c;
}
.vca-strong {
font-weight: 700;
}
.vca-sub {
margin-top: 1px;
font-size: 11px;
color: #64748b;
}
.vca-none {
color: #cbd5e1;
}
.vca-amount {
font-weight: 700;
}
.vca-reason {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vca-dt {
white-space: nowrap;
color: #475569;
}
.vca-kind {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
&--unpass {
background: #fef3c7;
color: #92400e;
}
&--correction {
background: #dbeafe;
color: #1e40af;
}
}
.vca-action-cell {
display: flex;
justify-content: flex-end;
gap: 6px;
white-space: nowrap;
}
// ── Empty ───────────────────────────────────────────────────────────────────
.vca-empty {
padding: 28px 16px;
text-align: center;
color: #94a3b8;
&__icon {
display: block;
margin: 0 auto 6px;
font-size: 30px;
width: 30px;
height: 30px;
opacity: 0.6;
}
&__title {
margin: 0;
font-size: 12px;
font-weight: 700;
color: #64748b;
}
&__text {
margin: 3px 0 0;
font-size: 11px;
}
}
// ── Reject popup ────────────────────────────────────────────────────────────
.vca-dlg {
font-size: 12px;
&__head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
&__ico {
flex: 0 0 32px;
height: 32px;
width: 32px;
border-radius: 9px;
background: #fef2f2;
color: #dc2626;
font-size: 18px;
line-height: 32px;
text-align: center;
}
&__titles {
flex: 1;
min-width: 0;
}
&__title {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
&__sub {
font-size: 11px;
color: #64748b;
}
&__x {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
width: 28px;
border: 0;
border-radius: 50%;
background: transparent;
color: #64748b;
cursor: pointer;
&:hover {
background: #e2e8f0;
}
mat-icon {
font-size: 18px;
height: 18px;
width: 18px;
}
}
&__body {
padding: 12px 14px;
textarea {
width: 100%;
padding: 7px 10px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font: inherit;
font-size: 12px;
resize: vertical;
&:focus {
outline: 0;
border-color: #0f4f3c;
box-shadow: 0 0 0 3px rgb(15 79 60 / 8%);
}
}
}
&__foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 10px 14px;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
}
.vca-label {
display: block;
margin-bottom: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #94a3b8;
}
@@ -0,0 +1,192 @@
/**
* 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, TemplateRef, ViewChild, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { VoucherCorrection, VoucherCorrectionService } from '../voucher-correction.service';
type Kind = 'unpass' | 'correction';
type KindFilter = 'ALL' | Kind;
/** One row of the approvals table: a request, and which of the two steps it is waiting at. */
interface ApprovalRow {
kind: Kind;
request: VoucherCorrection;
raisedBy: string | null;
raisedAt: string | null;
}
/**
* Manager side of the voucher correction, laid out like the other approval tabs: approves or rejects the unpass of a
* voucher, and later the correction entry the cashier made. Only the second approval moves money.
*/
@Component({
selector: 'mifosx-voucher-correction-approvals',
templateUrl: './voucher-correction-approvals.component.html',
styleUrls: ['./voucher-correction-approvals.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
MatDialogModule,
MatIconModule,
MatSnackBarModule
]
})
export class VoucherCorrectionApprovalsComponent implements OnInit {
private service = inject(VoucherCorrectionService);
private snackBar = inject(MatSnackBar);
private dialog = inject(MatDialog);
@ViewChild('rejectDialog') rejectDialog!: TemplateRef<unknown>;
private dialogRef: MatDialogRef<unknown> | null = null;
all: ApprovalRow[] = [];
loading = false;
loaded = false;
busyId: number | null = null;
kindFilter: KindFilter = 'ALL';
searchTerm = '';
/** The row being rejected, and the reason typed for it. */
rejecting: ApprovalRow | null = null;
rejectReason = '';
readonly kindOptions: { value: KindFilter; label: string }[] = [
{ value: 'ALL', label: 'All requests' },
{ value: 'unpass', label: 'Unpass requests' },
{ value: 'correction', label: 'Correction entries' }
];
ngOnInit(): void {
this.load();
}
load(): void {
this.loading = true;
this.service
.list('UNPASS_PENDING,CORRECTION_PENDING')
.pipe(catchError(() => of([] as VoucherCorrection[])))
.subscribe((rows) => {
this.all = rows.map((r) =>
r.status === 'UNPASS_PENDING'
? { kind: 'unpass', request: r, raisedBy: r.unpass_by_name, raisedAt: r.unpass_at }
: { kind: 'correction', request: r, raisedBy: r.correction_by_name, raisedAt: r.correction_at }
);
this.loading = false;
this.loaded = true;
});
}
/** The table: the kind picked, narrowed by whatever is typed in the search box. */
get rows(): ApprovalRow[] {
const term = this.searchTerm.trim().toLowerCase();
return this.all.filter((r) => {
if (this.kindFilter !== 'ALL' && r.kind !== this.kindFilter) return false;
if (!term) return true;
const q = r.request;
return [
q.original_voucher_no,
q.wrong_account_no,
q.wrong_client_name,
q.correct_account_no,
q.correct_client_name,
r.raisedBy
].some((v) => (v ?? '').toLowerCase().includes(term));
});
}
get unpassCount(): number {
return this.all.filter((r) => r.kind === 'unpass').length;
}
get correctionCount(): number {
return this.all.filter((r) => r.kind === 'correction').length;
}
kindLabel(kind: Kind): string {
return kind === 'unpass' ? 'Unpass' : 'Correction';
}
formatDateTime(value: string | null): string {
if (!value) return '—';
const d = new Date(value);
return isNaN(d.getTime())
? value
: d.toLocaleString('en-IN', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
}
approve(row: ApprovalRow): void {
if (this.busyId) return;
const id = row.request.id;
this.busyId = id;
const call = row.kind === 'unpass' ? this.service.approveUnpass(id) : this.service.approveCorrection(id);
call.subscribe({
next: (res: any) => {
this.busyId = null;
this.snackBar.open(
row.kind === 'unpass'
? `Voucher ${row.request.original_voucher_no} unpassed — the cashier can now enter the correct account`
: `Corrected. New voucher ${res?.newVoucherNo ?? ''}`,
'Close',
{ duration: 6000 }
);
this.load();
},
error: (err) => {
this.busyId = null;
this.fail(err, 'Could not approve');
}
});
}
startReject(row: ApprovalRow): void {
this.rejecting = row;
this.rejectReason = '';
this.dialogRef = this.dialog.open(this.rejectDialog, { width: '440px', maxWidth: '95vw', autoFocus: false });
this.dialogRef.afterClosed().subscribe(() => (this.rejecting = null));
}
cancelReject(): void {
this.dialogRef?.close();
}
confirmReject(): void {
if (!this.rejecting || !this.rejectReason.trim() || this.busyId) return;
const row = this.rejecting;
const id = row.request.id;
this.busyId = id;
const reason = this.rejectReason.trim();
const call =
row.kind === 'unpass' ? this.service.rejectUnpass(id, reason) : this.service.rejectCorrection(id, reason);
call.subscribe({
next: () => {
this.busyId = null;
this.dialogRef?.close();
this.snackBar.open('Rejected', 'Close', { duration: 4000 });
this.load();
},
error: (err) => {
this.busyId = null;
this.fail(err, 'Could not reject');
}
});
}
private fail(err: any, fallback: string): void {
const msg = err?.error?.errors?.[0]?.defaultUserMessage ?? err?.error?.defaultUserMessage ?? fallback;
this.snackBar.open(msg, 'Close', { duration: 8000 });
}
}
@@ -0,0 +1,120 @@
/**
* 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 { Injectable, inject } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
/** One row of a voucher correction, as the server keeps it (snake_case columns). */
export interface VoucherCorrection {
id: number;
original_voucher_no: string;
original_txn_id: number;
wrong_savings_account_id: number;
wrong_account_no: string;
wrong_client_name: string | null;
amount: number;
txn_date: string | null;
status: 'UNPASS_PENDING' | 'UNPASSED' | 'UNPASS_REJECTED' | 'CORRECTION_PENDING' | 'COMPLETED' | 'CLOSED';
reason: string | null;
rejection_reason: string | null;
unpass_by_name: string | null;
unpass_at: string | null;
unpass_approved_by_name: string | null;
correct_account_no: string | null;
correct_client_name: string | null;
correction_by_name: string | null;
correction_at: string | null;
correction_approved_by_name: string | null;
new_voucher_no: string | null;
}
/** A cash deposit voucher of today that can still be unpassed. */
export interface EligibleVoucher {
voucherNo: string;
amount: number;
createdAt: string;
cashier: string;
txnId: number;
savingsAccountId: number;
accountNo: string;
clientName: string | null;
paymentType: string;
}
/** What the server knows about a savings account typed in as the correct one. */
export interface AccountLookup {
id: number;
accountNo: string;
clientId: number | null;
clientName: string | null;
balance: number;
currencyCode: string;
canReceive: boolean;
}
/** HTTP service for the voucher correction workflow: unpass, approve, re-enter, approve. */
@Injectable({ providedIn: 'root' })
export class VoucherCorrectionService {
private http = inject(HttpClient);
private readonly base = '/vouchers/corrections';
eligible(search?: string): Observable<EligibleVoucher[]> {
let params = new HttpParams();
if (search) params = params.set('search', search);
return this.http.get<EligibleVoucher[]>(`${this.base}/eligible`, { params });
}
unpass(voucherNo: string, reason: string): Observable<any> {
return this.http.post(`${this.base}/unpass`, { voucherNo, reason });
}
list(status?: string, mine = false): Observable<VoucherCorrection[]> {
let params = new HttpParams().set('mine', String(mine));
if (status) params = params.set('status', status);
return this.http.get<VoucherCorrection[]>(this.base, { params });
}
get(id: number): Observable<VoucherCorrection> {
return this.http.get<VoucherCorrection>(`${this.base}/${id}`);
}
accountLookup(accountNo: string): Observable<AccountLookup> {
return this.http.get<AccountLookup>(`${this.base}/account-lookup`, { params: { accountNo } });
}
submitCorrection(id: number, correctAccountNo: string): Observable<any> {
return this.http.post(`${this.base}/${id}/correction`, { correctAccountNo });
}
/** The cashier gives up the correction, e.g. when the wrong account no longer holds the money. */
close(id: number, reason: string): Observable<any> {
return this.http.post(`${this.base}/${id}/close`, { reason });
}
approveUnpass(id: number): Observable<any> {
return this.http.post(`${this.base}/${id}/unpass/approve`, {});
}
rejectUnpass(id: number, reason: string): Observable<any> {
return this.http.post(`${this.base}/${id}/unpass/reject`, { reason });
}
approveCorrection(id: number): Observable<any> {
return this.http.post(`${this.base}/${id}/correction/approve`, {});
}
rejectCorrection(id: number, reason: string): Observable<any> {
return this.http.post(`${this.base}/${id}/correction/reject`, { reason });
}
/** Ids of the transactions of this account that a completed correction removed. */
voidedTransactions(savingsAccountId: number): Observable<number[]> {
return this.http.get<number[]>(`${this.base}/voided-transactions`, { params: { savingsAccountId } });
}
}
@@ -0,0 +1,446 @@
<!--
Copyright since 2025 Mifos Initiative
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<div class="pg">
<header class="pg-head">
<div>
<div class="pg-eyebrow">CASHIER · VOUCHER CORRECTION</div>
<h1 class="pg-title">Voucher Correction</h1>
<p class="pg-sub">
Move a cash deposit that was posted to the wrong account. Nothing changes on any account until the final
approval.
</p>
</div>
</header>
<!-- The four steps, so it is always clear where a voucher is. -->
<ol class="vc-steps">
<li class="vc-step" [class.vc-step--on]="tab === 'today'">
<span class="vc-step__no">1</span>
<span class="vc-step__txt"><strong>Unpass</strong> the voucher</span>
</li>
<li class="vc-step">
<span class="vc-step__no">2</span>
<span class="vc-step__txt"><strong>Manager</strong> approves</span>
</li>
<li class="vc-step" [class.vc-step--on]="tab === 'unpassed'">
<span class="vc-step__no">3</span>
<span class="vc-step__txt">Enter the <strong>correct account</strong></span>
</li>
<li class="vc-step">
<span class="vc-step__no">4</span>
<span class="vc-step__txt"><strong>Manager</strong> approves, deposit moves</span>
</li>
</ol>
<nav class="vc-tabs">
@if (mayUnpass) {
<button type="button" class="vc-tab" [class.vc-tab--on]="tab === 'today'" (click)="setTab('today')">
<mat-icon>receipt_long</mat-icon> Today's Vouchers
</button>
}
@if (mayCorrect) {
<button type="button" class="vc-tab" [class.vc-tab--on]="tab === 'unpassed'" (click)="setTab('unpassed')">
<mat-icon>edit_note</mat-icon> Unpassed — Correct Entry
@if (unpassed.length) {
<span class="vc-count">{{ unpassed.length }}</span>
}
</button>
}
<button type="button" class="vc-tab" [class.vc-tab--on]="tab === 'mine'" (click)="setTab('mine')">
<mat-icon>history</mat-icon> My Requests
</button>
</nav>
<!-- ─── Today's vouchers ─────────────────────────────────────────────── -->
@if (tab === 'today') {
<div class="vc-toolbar">
<div class="vc-search">
<mat-icon>search</mat-icon>
<input
type="text"
placeholder="Search by voucher, account or customer name"
[(ngModel)]="search"
(keyup.enter)="loadVouchers()"
/>
</div>
<button type="button" class="pg-btn pg-btn--primary" (click)="loadVouchers()">
<mat-icon>search</mat-icon> Search
</button>
<button type="button" class="pg-btn pg-btn--ghost" (click)="search = ''; loadVouchers()">
<mat-icon>refresh</mat-icon> Refresh
</button>
</div>
<div class="pg-card">
<table class="pg-table vc-table">
<thead>
<tr>
<th>Voucher</th>
<th>Account</th>
<th>Customer</th>
<th>Mode</th>
<th>Cashier</th>
<th class="num">Amount</th>
<th class="vc-col-action"></th>
</tr>
</thead>
<tbody>
@for (v of vouchers; track v.voucherNo) {
<tr [class.vc-row--on]="selectedVoucher?.voucherNo === v.voucherNo" (click)="pick(v)">
<td>
<span class="pg-chip">{{ v.voucherNo }}</span>
</td>
<td class="vc-mono">{{ v.accountNo }}</td>
<td>{{ v.clientName || '—' }}</td>
<td>{{ v.paymentType }}</td>
<td>{{ v.cashier }}</td>
<td class="num">₹{{ v.amount | number: '1.2-2' }}</td>
<td class="vc-col-action">
<button
type="button"
class="pg-btn pg-btn--ghost vc-btn-sm"
(click)="pick(v); $event.stopPropagation()"
>
<mat-icon>undo</mat-icon> Unpass
</button>
</td>
</tr>
}
@if (!vouchers.length) {
<tr>
<td colspan="7" class="vc-empty">
<mat-icon>{{ loadingVouchers ? 'hourglass_empty' : 'inbox' }}</mat-icon>
<div>{{ loadingVouchers ? 'Loading…' : 'No cash deposit voucher of today can be unpassed.' }}</div>
</td>
</tr>
}
</tbody>
</table>
</div>
}
<!-- ─── Unpassed: enter the correct account ──────────────────────────── -->
@if (tab === 'unpassed') {
<div class="pg-card">
<table class="pg-table vc-table">
<thead>
<tr>
<th>Voucher</th>
<th>Posted to</th>
<th>Customer</th>
<th>Reason</th>
<th class="num">Amount</th>
<th class="vc-col-action"></th>
</tr>
</thead>
<tbody>
@for (u of unpassed; track u.id) {
<tr [class.vc-row--on]="active?.id === u.id" (click)="open(u)">
<td>
<span class="pg-chip">{{ u.original_voucher_no }}</span>
</td>
<td class="vc-mono">{{ u.wrong_account_no }}</td>
<td>{{ u.wrong_client_name || '—' }}</td>
<td class="vc-clip">{{ u.reason }}</td>
<td class="num">₹{{ u.amount | number: '1.2-2' }}</td>
<td class="vc-col-action">
<button
type="button"
class="pg-btn pg-btn--primary vc-btn-sm"
(click)="open(u); $event.stopPropagation()"
>
<mat-icon>edit</mat-icon> Correct
</button>
</td>
</tr>
}
@if (!unpassed.length) {
<tr>
<td colspan="6" class="vc-empty">
<mat-icon>{{ loadingUnpassed ? 'hourglass_empty' : 'task_alt' }}</mat-icon>
<div>
{{ loadingUnpassed ? 'Loading…' : 'No unpassed voucher is waiting for its correct account.' }}
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
}
<!-- ─── My requests ──────────────────────────────────────────────────── -->
@if (tab === 'mine') {
<div class="pg-card">
<table class="pg-table vc-table">
<thead>
<tr>
<th>Voucher</th>
<th>Posted to</th>
<th>Corrected to</th>
<th class="num">Amount</th>
<th>Status</th>
<th>New voucher</th>
</tr>
</thead>
<tbody>
@for (m of mine; track m.id) {
<tr>
<td>
<span class="pg-chip">{{ m.original_voucher_no }}</span>
</td>
<td class="vc-mono">{{ m.wrong_account_no }}</td>
<td class="vc-mono">{{ m.correct_account_no || '—' }}</td>
<td class="num">₹{{ m.amount | number: '1.2-2' }}</td>
<td>
<span class="vc-status vc-status--{{ m.status }}">{{ statusLabel[m.status] }}</span>
@if (m.rejection_reason) {
<div class="vc-note">{{ m.rejection_reason }}</div>
}
</td>
<td>{{ m.new_voucher_no || '—' }}</td>
</tr>
}
@if (!mine.length) {
<tr>
<td colspan="6" class="vc-empty">
<mat-icon>{{ loadingMine ? 'hourglass_empty' : 'history' }}</mat-icon>
<div>{{ loadingMine ? 'Loading…' : 'You have no voucher corrections yet.' }}</div>
</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
<!-- ─── Popup: unpass a voucher ──────────────────────────────────────────── -->
<ng-template #unpassDialog>
@if (selectedVoucher) {
<div class="vc-dlg">
<header class="vc-dlg__head">
<mat-icon class="vc-dlg__ico">undo</mat-icon>
<div class="vc-dlg__titles">
<div class="vc-dlg__title">Unpass voucher</div>
<div class="vc-dlg__sub vc-mono">{{ selectedVoucher.voucherNo }}</div>
</div>
<button type="button" class="vc-dlg__x" aria-label="Close" (click)="closeUnpass()">
<mat-icon>close</mat-icon>
</button>
</header>
<div class="vc-dlg__body">
<div class="vc-dlg__amount">
<span>Deposit amount</span>
<strong>₹{{ selectedVoucher.amount | number: '1.2-2' }}</strong>
</div>
<div class="vc-grid">
<div class="vc-cell">
<div class="vc-label">Voucher</div>
<div class="vc-value vc-mono">{{ selectedVoucher.voucherNo }}</div>
</div>
<div class="vc-cell">
<div class="vc-label">Created</div>
<div class="vc-value">{{ selectedVoucher.createdAt | date: 'dd MMM yyyy, hh:mm a' }}</div>
</div>
<div class="vc-cell">
<div class="vc-label">Cashier</div>
<div class="vc-value">{{ selectedVoucher.cashier }}</div>
</div>
<div class="vc-cell">
<div class="vc-label">Mode</div>
<div class="vc-value">{{ selectedVoucher.paymentType }}</div>
</div>
<div class="vc-cell">
<div class="vc-label">Account</div>
<div class="vc-value vc-mono">{{ selectedVoucher.accountNo }}</div>
</div>
<div class="vc-cell">
<div class="vc-label">Customer</div>
<div class="vc-value">{{ selectedVoucher.clientName || '—' }}</div>
</div>
<div class="vc-cell">
<div class="vc-label">Account balance now</div>
<div class="vc-value">
@if (voucherAccount) {
₹{{ voucherAccount.balance | number: '1.2-2' }}
} @else {
—
}
</div>
</div>
<div class="vc-cell">
<div class="vc-label">Account status</div>
<div class="vc-value">
@if (voucherAccount) {
{{ voucherAccount.canReceive ? 'Active' : 'Not active' }} · {{ voucherAccount.currencyCode }}
} @else {
—
}
</div>
</div>
</div>
<label class="vc-label" for="vc-reason">Reason for unpassing</label>
<textarea
id="vc-reason"
class="vc-reason"
rows="2"
placeholder="Why is this voucher wrong? e.g. deposited in the wrong account (required)"
[(ngModel)]="unpassReason"
></textarea>
<div class="vc-info">
<mat-icon>info</mat-icon>
A manager approves the unpass first. Nothing changes on any account until the corrected entry is approved: the
deposit stays on {{ selectedVoucher.accountNo }} till then.
</div>
</div>
<footer class="vc-dlg__foot">
<button type="button" class="pg-btn pg-btn--ghost" (click)="closeUnpass()">Cancel</button>
<button type="button" class="pg-btn pg-btn--primary" [disabled]="!canUnpass" (click)="unpass()">
<mat-icon>send</mat-icon> Send for approval
</button>
</footer>
</div>
}
</ng-template>
<!-- ─── Popup: enter the correct account ─────────────────────────────────── -->
<ng-template #correctionDialog>
@if (active) {
<div class="vc-dlg">
<header class="vc-dlg__head">
<mat-icon class="vc-dlg__ico">edit_note</mat-icon>
<div class="vc-dlg__titles">
<div class="vc-dlg__title">Correction entry</div>
<div class="vc-dlg__sub vc-mono">{{ active.original_voucher_no }}</div>
</div>
<button type="button" class="vc-dlg__x" aria-label="Close" (click)="closeActive()">
<mat-icon>close</mat-icon>
</button>
</header>
<div class="vc-dlg__body">
<div class="vc-dlg__amount">
<span>Amount to move</span>
<strong>₹{{ active.amount | number: '1.2-2' }}</strong>
</div>
<!-- Everything but the account number is fixed. -->
<div class="vc-grid">
<div class="vc-cell">
<div class="vc-label">Transaction date</div>
<div class="vc-value">{{ active.txn_date || '—' }}</div>
</div>
<div class="vc-cell">
<div class="vc-label">Mode</div>
<div class="vc-value">Cash</div>
</div>
<div class="vc-cell">
<div class="vc-label">Unpassed by</div>
<div class="vc-value">{{ active.unpass_by_name || '—' }}</div>
</div>
<div class="vc-cell">
<div class="vc-label">Approved by</div>
<div class="vc-value">{{ active.unpass_approved_by_name || '—' }}</div>
</div>
<div class="vc-cell vc-cell--wide">
<div class="vc-label">Reason</div>
<div class="vc-value">{{ active.reason }}</div>
</div>
</div>
<div class="vc-compare">
<!-- The account the deposit went to -->
<div class="vc-acct vc-acct--wrong">
<div class="vc-acct__tag">Posted to (wrong)</div>
<div class="vc-acct__no vc-mono">{{ active.wrong_account_no }}</div>
<div class="vc-acct__name">{{ active.wrong_client_name || '—' }}</div>
<div class="vc-acct__bal">
Balance:
@if (wrongAccount) {
<strong>₹{{ wrongAccount.balance | number: '1.2-2' }}</strong>
@if (wrongHasBalance) {
<span class="vc-ok"><mat-icon>check_circle</mat-icon> covers the deposit</span>
} @else {
<span class="vc-bad"
><mat-icon>cancel</mat-icon> does not cover ₹{{ active.amount | number: '1.2-2' }}</span
>
}
} @else {
—
}
</div>
</div>
<mat-icon class="vc-arrow">arrow_forward</mat-icon>
<!-- The account it should have gone to -->
<div class="vc-acct" [class.vc-acct--ok]="correctOk" [class.vc-acct--wrong]="!!lookupError">
<div class="vc-acct__tag">Correct account</div>
<input
id="vc-correct"
class="vc-acct__input vc-mono"
type="text"
placeholder="Type the account number"
[ngModel]="correctAccountNo"
(ngModelChange)="onAccountInput($event)"
(blur)="lookup()"
/>
@if (lookingUp) {
<div class="vc-acct__bal">Looking up…</div>
}
@if (correctAccount) {
<div class="vc-acct__name">{{ correctAccount.clientName || '—' }}</div>
<div class="vc-acct__bal">
Balance: <strong>₹{{ correctAccount.balance | number: '1.2-2' }}</strong>
@if (correctOk) {
<span class="vc-ok"><mat-icon>check_circle</mat-icon> active, can receive</span>
}
</div>
}
@if (lookupError) {
<div class="vc-bad vc-acct__err"><mat-icon>error</mat-icon> {{ lookupError }}</div>
}
</div>
</div>
@if (wrongAccount && !wrongHasBalance) {
<div class="vc-warn">
<mat-icon>warning</mat-icon>
<div>
<strong>The customer has already used this money,</strong> so it cannot be taken back from
{{ active.wrong_account_no }}. Deposit ₹{{ active.amount | number: '1.2-2' }} into the correct account
from your own pocket as a fresh deposit (Transaction Entry), then press <strong>Close request</strong>.
</div>
</div>
}
</div>
<footer class="vc-dlg__foot">
<button
type="button"
class="pg-btn pg-btn--ghost vc-dlg__close-req"
[disabled]="sending"
(click)="closeRequest()"
>
<mat-icon>block</mat-icon> Close request
</button>
<button type="button" class="pg-btn pg-btn--ghost" (click)="closeActive()">Cancel</button>
<button type="button" class="pg-btn pg-btn--primary" [disabled]="!canSave" (click)="save()">
<mat-icon>check</mat-icon> Save &amp; send for approval
</button>
</footer>
</div>
}
</ng-template>
@@ -0,0 +1,599 @@
/**
* 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/.
*/
// Compact sizing: the page has to fit a 100% browser window without scrolling for the common case.
.pg {
padding: 14px 20px;
gap: 12px;
}
.pg-title {
font-size: 20px;
margin: 2px 0;
}
.pg-sub {
font-size: 12px;
}
.pg-btn {
height: 30px;
padding: 0 12px;
font-size: 12px;
mat-icon {
font-size: 16px;
height: 16px;
width: 16px;
}
&:disabled {
opacity: 0.45;
cursor: not-allowed;
}
}
.pg-table {
font-size: 12px;
th {
padding: 8px 12px;
font-size: 10px;
}
td {
padding: 7px 12px;
}
}
// ── Steps ───────────────────────────────────────────────────────────────────
.vc-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.vc-step {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
font-size: 12px;
color: #64748b;
&__no {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 20px;
height: 20px;
border-radius: 50%;
background: #e2e8f0;
font-size: 11px;
font-weight: 700;
color: #475569;
}
&--on {
border-color: #1f7a4d;
background: #f0fdf4;
color: #0f4f3c;
.vc-step__no {
background: #1f7a4d;
color: #fff;
}
}
}
// ── Tabs ────────────────────────────────────────────────────────────────────
.vc-tabs {
display: flex;
gap: 2px;
border-bottom: 1px solid #e2e8f0;
flex-wrap: wrap;
}
.vc-tab {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 12px;
margin-bottom: -1px;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
font: inherit;
font-size: 12px;
font-weight: 600;
color: #64748b;
cursor: pointer;
mat-icon {
font-size: 16px;
height: 16px;
width: 16px;
}
&:hover {
color: #0f4f3c;
}
&--on {
color: #0f4f3c;
border-bottom-color: #1f7a4d;
}
}
.vc-count {
padding: 0 7px;
border-radius: 999px;
background: #f59e0b;
color: #fff;
font-size: 10px;
font-weight: 700;
}
// ── Search ──────────────────────────────────────────────────────────────────
.vc-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.vc-search {
display: flex;
align-items: center;
gap: 6px;
flex: 1 1 280px;
max-width: 420px;
height: 30px;
padding: 0 10px;
border: 1px solid #cbd5e1;
border-radius: 999px;
background: #fff;
&:focus-within {
border-color: #1f7a4d;
box-shadow: 0 0 0 3px rgb(31 122 77 / 12%);
}
mat-icon {
font-size: 16px;
height: 16px;
width: 16px;
color: #94a3b8;
}
input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 12px;
}
}
// ── Table ───────────────────────────────────────────────────────────────────
.vc-table {
tbody tr {
cursor: pointer;
}
tr.vc-row--on td {
background: #f0fdf4;
&:first-child {
box-shadow: inset 3px 0 0 #1f7a4d;
}
}
.vc-col-action {
width: 1%;
text-align: right;
white-space: nowrap;
}
.vc-clip {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pg-chip {
font-size: 11px;
padding: 2px 8px;
}
}
.vc-btn-sm {
height: 26px;
padding: 0 10px;
font-size: 11px;
}
.vc-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: 0.02em;
}
.vc-empty {
padding: 24px 12px;
text-align: center;
color: #94a3b8;
font-size: 12px;
mat-icon {
display: block;
margin: 0 auto 4px;
font-size: 28px;
height: 28px;
width: 28px;
opacity: 0.6;
}
}
// ── Popups ──────────────────────────────────────────────────────────────────
.vc-dlg {
display: flex;
flex-direction: column;
max-height: 86vh;
font-size: 12px;
&__head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
&__ico {
flex: 0 0 32px;
height: 32px;
width: 32px;
border-radius: 9px;
background: #f0fdf4;
color: #1f7a4d;
font-size: 18px;
line-height: 32px;
text-align: center;
}
&__titles {
flex: 1;
min-width: 0;
}
&__title {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
&__sub {
font-size: 11px;
color: #64748b;
}
&__x {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
width: 28px;
border: 0;
border-radius: 50%;
background: transparent;
color: #64748b;
cursor: pointer;
mat-icon {
font-size: 18px;
height: 18px;
width: 18px;
}
&:hover {
background: #e2e8f0;
}
}
&__body {
padding: 12px 14px;
overflow-y: auto;
}
&__amount {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
padding: 8px 12px;
border-radius: 10px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
font-size: 12px;
font-weight: 600;
strong {
font-size: 18px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
}
&__foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 10px 14px;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
}
.vc-warn {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 10px;
padding: 8px 12px;
border-radius: 8px;
background: #fffbeb;
border: 1px solid #fde68a;
color: #92400e;
font-size: 11px;
mat-icon {
flex: 0 0 18px;
height: 18px;
width: 18px;
font-size: 18px;
}
}
.vc-dlg__close-req {
margin-right: auto;
color: #b45309;
}
.vc-label {
display: block;
margin-bottom: 3px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #94a3b8;
}
.vc-reason {
width: 100%;
padding: 7px 10px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font: inherit;
font-size: 12px;
resize: vertical;
&:focus {
outline: 0;
border-color: #1f7a4d;
box-shadow: 0 0 0 3px rgb(31 122 77 / 12%);
}
}
.vc-info {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 8px;
padding: 7px 10px;
border-radius: 8px;
background: #eff6ff;
color: #1e40af;
font-size: 11px;
mat-icon {
flex: 0 0 16px;
height: 16px;
width: 16px;
font-size: 16px;
}
}
.vc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 6px;
margin-bottom: 10px;
}
.vc-cell {
padding: 6px 10px;
border-radius: 8px;
background: #f8fafc;
border: 1px solid #eef2f7;
}
.vc-cell--wide {
grid-column: 1 / -1;
}
.vc-value {
font-size: 12px;
font-weight: 600;
color: #0f172a;
word-break: break-word;
}
// ── Wrong → Correct ─────────────────────────────────────────────────────────
.vc-compare {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 8px;
@media (width <= 640px) {
grid-template-columns: 1fr;
}
}
.vc-arrow {
align-self: center;
color: #94a3b8;
@media (width <= 640px) {
transform: rotate(90deg);
justify-self: center;
}
}
.vc-acct {
padding: 10px 12px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
&--wrong {
border-color: #fecaca;
background: #fef2f2;
}
&--ok {
border-color: #a7f3d0;
background: #ecfdf5;
}
&__tag {
margin-bottom: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #64748b;
}
&__no {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
&__input {
width: 100%;
height: 32px;
padding: 0 10px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
font-size: 13px;
font-weight: 600;
&:focus {
outline: 0;
border-color: #1f7a4d;
box-shadow: 0 0 0 3px rgb(31 122 77 / 12%);
}
}
&__name {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
color: #1e293b;
}
&__bal {
margin-top: 3px;
font-size: 11px;
color: #475569;
}
&__err {
margin-top: 6px;
}
}
.vc-ok,
.vc-bad {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 6px;
font-weight: 700;
mat-icon {
font-size: 14px;
height: 14px;
width: 14px;
}
}
.vc-ok {
color: #059669;
}
.vc-bad {
color: #dc2626;
}
.vc-note {
margin-top: 3px;
font-size: 11px;
color: #64748b;
}
// ── Status ──────────────────────────────────────────────────────────────────
.vc-status {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: #e2e8f0;
font-size: 11px;
font-weight: 700;
&--UNPASS_PENDING,
&--CORRECTION_PENDING {
background: #fef3c7;
color: #92400e;
}
&--UNPASSED {
background: #dbeafe;
color: #1e40af;
}
&--COMPLETED {
background: #d1fae5;
color: #065f46;
}
&--CLOSED {
background: #f1f5f9;
color: #475569;
}
&--UNPASS_REJECTED {
background: #fee2e2;
color: #991b1b;
}
}
@@ -0,0 +1,307 @@
/**
* 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, TemplateRef, ViewChild, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthenticationService } from '../../core/authentication/authentication.service';
import {
AccountLookup,
EligibleVoucher,
VoucherCorrection,
VoucherCorrectionService
} from '../voucher-correction.service';
type Tab = 'today' | 'unpassed' | 'mine';
/**
* Cashier side of correcting a cash deposit that went to the wrong account.
*
* Today vouchers: pick the voucher and unpass it (needs a manager approval; nothing moves).
* Unpassed: open the approved voucher, whose details are fixed, change only the account number and save
* (needs a manager approval again; only then do the accounts change).
*/
@Component({
selector: 'mifosx-voucher-correction',
templateUrl: './voucher-correction.component.html',
styleUrls: [
'../cashier-shared.scss',
'./voucher-correction.component.scss'
],
standalone: true,
imports: [
CommonModule,
FormsModule,
MatIconModule,
MatDialogModule,
MatSnackBarModule
]
})
export class VoucherCorrectionComponent implements OnInit {
private service = inject(VoucherCorrectionService);
private snackBar = inject(MatSnackBar);
private dialog = inject(MatDialog);
private auth = inject(AuthenticationService);
/** Unpassing is for the back office (an administrator or a clerk); re-entering the account is the cashier only. */
readonly mayUnpass = this.auth.isClerkUser() || !!this.auth.getCredentials()?.permissions?.includes('ALL_FUNCTIONS');
readonly mayCorrect = this.auth.isCashierUser();
@ViewChild('unpassDialog') unpassDialog!: TemplateRef<unknown>;
@ViewChild('correctionDialog') correctionDialog!: TemplateRef<unknown>;
private dialogRef: MatDialogRef<unknown> | null = null;
tab: Tab = this.mayUnpass ? 'today' : this.mayCorrect ? 'unpassed' : 'mine';
// Today vouchers
search = '';
vouchers: EligibleVoucher[] = [];
loadingVouchers = false;
selectedVoucher: EligibleVoucher | null = null;
/** The account the voucher was posted to, for the balance and status shown in the popup. */
voucherAccount: AccountLookup | null = null;
unpassReason = '';
sending = false;
// Unpassed vouchers waiting for the correct account
unpassed: VoucherCorrection[] = [];
loadingUnpassed = false;
active: VoucherCorrection | null = null;
wrongAccount: AccountLookup | null = null;
correctAccountNo = '';
correctAccount: AccountLookup | null = null;
lookupError = '';
lookingUp = false;
// The cashier own requests
mine: VoucherCorrection[] = [];
loadingMine = false;
readonly statusLabel: Record<string, string> = {
UNPASS_PENDING: 'Unpass awaiting approval',
UNPASSED: 'Unpassed — enter correct account',
UNPASS_REJECTED: 'Unpass rejected',
CORRECTION_PENDING: 'Correction awaiting approval',
COMPLETED: 'Corrected',
CLOSED: 'Closed — cashier deposits separately'
};
ngOnInit(): void {
if (this.mayUnpass) this.loadVouchers();
if (this.mayCorrect) this.loadUnpassed();
if (this.tab === 'mine') this.loadMine();
}
setTab(tab: Tab): void {
this.tab = tab;
if (tab === 'today') this.loadVouchers();
if (tab === 'unpassed') this.loadUnpassed();
if (tab === 'mine') this.loadMine();
}
// ── Today vouchers ─────────────────────────────────────────────────────────
loadVouchers(): void {
this.loadingVouchers = true;
this.service
.eligible(this.search.trim())
.pipe(catchError(() => of([] as EligibleVoucher[])))
.subscribe((rows) => {
this.vouchers = rows;
this.loadingVouchers = false;
if (this.selectedVoucher && !rows.some((r) => r.voucherNo === this.selectedVoucher?.voucherNo)) {
this.selectedVoucher = null;
}
});
}
pick(v: EligibleVoucher): void {
this.selectedVoucher = v;
this.unpassReason = '';
this.voucherAccount = null;
this.service
.accountLookup(v.accountNo)
.pipe(catchError(() => of(null)))
.subscribe((a) => (this.voucherAccount = a));
this.showDialog(this.unpassDialog, () => (this.selectedVoucher = null));
}
closeUnpass(): void {
this.dialogRef?.close();
}
get canUnpass(): boolean {
return !!this.selectedVoucher && this.unpassReason.trim().length > 0 && !this.sending;
}
unpass(): void {
if (!this.selectedVoucher || !this.canUnpass) return;
this.sending = true;
this.service.unpass(this.selectedVoucher.voucherNo, this.unpassReason.trim()).subscribe({
next: () => {
this.sending = false;
this.snackBar.open(`Voucher ${this.selectedVoucher?.voucherNo} sent for unpass approval`, 'Close', {
duration: 4000
});
this.dialogRef?.close();
this.unpassReason = '';
this.loadVouchers();
},
error: (err) => {
this.sending = false;
this.fail(err, 'Could not unpass the voucher');
}
});
}
// ── Unpassed vouchers: enter the correct account ───────────────────────────
loadUnpassed(): void {
this.loadingUnpassed = true;
this.service
.list('UNPASSED')
.pipe(catchError(() => of([] as VoucherCorrection[])))
.subscribe((rows) => {
this.unpassed = rows;
this.loadingUnpassed = false;
});
}
open(row: VoucherCorrection): void {
this.active = row;
this.correctAccountNo = '';
this.correctAccount = null;
this.lookupError = '';
this.wrongAccount = null;
// The account the deposit went to: its balance is what the "can this be taken back" check reads.
this.service
.accountLookup(row.wrong_account_no)
.pipe(catchError(() => of(null)))
.subscribe((a) => (this.wrongAccount = a));
this.showDialog(this.correctionDialog, () => (this.active = null));
}
closeActive(): void {
this.dialogRef?.close();
}
onAccountInput(value: string): void {
this.correctAccountNo = value;
this.correctAccount = null;
this.lookupError = '';
// Same rule as the Transaction Entry screen: searches on its own once six characters are typed.
if (value.trim().length >= 6) this.lookup();
}
lookup(): void {
const accountNo = this.correctAccountNo.trim();
if (!accountNo || this.lookingUp) return;
this.lookingUp = true;
this.service.accountLookup(accountNo).subscribe({
next: (a) => {
this.lookingUp = false;
// A late answer for a number no longer typed is dropped.
if (accountNo !== this.correctAccountNo.trim()) return;
this.correctAccount = a;
if (this.active && a.id === this.active.wrong_savings_account_id) {
this.lookupError = 'This is the account the deposit was already posted to.';
} else if (!a.canReceive) {
this.lookupError = 'This account is not active, so it cannot receive the deposit.';
}
},
error: (err) => {
this.lookingUp = false;
this.lookupError = err?.error?.errors?.[0]?.defaultUserMessage ?? 'Account not found.';
}
});
}
/** The wrong account still holds the deposit, so it can be taken back without overdrawing it. */
get wrongHasBalance(): boolean {
return !!this.wrongAccount && !!this.active && this.wrongAccount.balance >= this.active.amount;
}
get correctOk(): boolean {
return !!this.correctAccount && this.correctAccount.canReceive && !this.lookupError;
}
get canSave(): boolean {
return !!this.active && this.correctOk && this.wrongHasBalance && !this.sending;
}
save(): void {
if (!this.active || !this.canSave) return;
this.sending = true;
this.service.submitCorrection(this.active.id, this.correctAccountNo.trim()).subscribe({
next: () => {
this.sending = false;
this.snackBar.open('Correction sent for approval', 'Close', { duration: 4000 });
this.dialogRef?.close();
this.loadUnpassed();
},
error: (err) => {
this.sending = false;
this.fail(err, 'Could not save the correction');
}
});
}
/**
* Gives up this correction. The usual reason is that the wrong account no longer holds the money, so the cashier
* puts the amount into the right account from their own pocket as a fresh deposit instead.
*/
closeRequest(): void {
if (!this.active || this.sending) return;
const reason = this.wrongHasBalance
? 'Closed by the cashier'
: 'Wrong account no longer holds the amount; cashier deposits it into the correct account separately';
this.sending = true;
this.service.close(this.active.id, reason).subscribe({
next: () => {
this.sending = false;
this.snackBar.open('Request closed', 'Close', { duration: 4000 });
this.dialogRef?.close();
this.loadUnpassed();
},
error: (err) => {
this.sending = false;
this.fail(err, 'Could not close the request');
}
});
}
// ── My requests ────────────────────────────────────────────────────────────
loadMine(): void {
this.loadingMine = true;
this.service
.list(undefined, true)
.pipe(catchError(() => of([] as VoucherCorrection[])))
.subscribe((rows) => {
this.mine = rows;
this.loadingMine = false;
});
}
/** Opens one of the two popups; onClose runs however it is dismissed (button, backdrop or Esc). */
private showDialog(template: TemplateRef<unknown>, onClose: () => void): void {
this.dialogRef?.close();
this.dialogRef = this.dialog.open(template, { width: '600px', maxWidth: '95vw', autoFocus: false });
this.dialogRef.afterClosed().subscribe(onClose);
}
private fail(err: any, fallback: string): void {
const msg = err?.error?.errors?.[0]?.defaultUserMessage ?? err?.error?.defaultUserMessage ?? fallback;
this.snackBar.open(msg, 'Close', { duration: 6000 });
}
}
@@ -169,6 +169,7 @@
<th>Debit</th> <th>Debit</th>
<th>Credit</th> <th>Credit</th>
<th class="num">Amount</th> <th class="num">Amount</th>
<th>Correction</th>
<th>User</th> <th>User</th>
<!-- Two dates, not one, on the system register. <!-- Two dates, not one, on the system register.
A voucher's timestamp is the minute it was written; the posting behind it carries A voucher's timestamp is the minute it was written; the posting behind it carries
@@ -217,6 +218,18 @@
</td> </td>
} }
<td class="num">{{ row.amount | number: '1.2-2' }}</td> <td class="num">{{ row.amount | number: '1.2-2' }}</td>
<!-- Where the voucher stands after a correction: unpassed, revoked, closed or corrected. -->
<td>
<mifosx-voucher-status
[status]="row.voucherStatus"
[revokedBy]="row.revokedByVoucherNo"
[replaces]="row.replacesVoucherNo"
[note]="row.correctionNote"
></mifosx-voucher-status>
@if (!row.voucherStatus || row.voucherStatus === 'ACTIVE') {
<span class="vr-active">—</span>
}
</td>
<td>{{ row.username || '—' }}</td> <td>{{ row.username || '—' }}</td>
@if (systemOnly) { @if (systemOnly) {
<td class="vr-ledgerdate" [class.vr-ledgerdate--prior]="row.postedAfterClose"> <td class="vr-ledgerdate" [class.vr-ledgerdate--prior]="row.postedAfterClose">
@@ -92,3 +92,8 @@
text-transform: uppercase; text-transform: uppercase;
color: #7c3aed; color: #7c3aed;
} }
.vr-active {
font-size: 11px;
color: #94a3b8;
}
@@ -14,6 +14,7 @@ import { MatIconModule } from '@angular/material/icon';
import { catchError, of } from 'rxjs'; import { catchError, of } from 'rxjs';
import { CashierService } from '../cashier.service'; import { CashierService } from '../cashier.service';
import { businessToday } from 'app/core/utils/business-today'; import { businessToday } from 'app/core/utils/business-today';
import { VoucherStatusComponent, VoucherStatus } from '../voucher-status/voucher-status.component';
/** /**
* Which side of the register a screen shows. * Which side of the register a screen shows.
@@ -26,6 +27,11 @@ export type VoucherSide = 'CR' | 'DR' | 'ALL';
/** One voucher as the register shows it: the number, the two sides, and who raised it. */ /** One voucher as the register shows it: the number, the two sides, and who raised it. */
interface VoucherRow { interface VoucherRow {
voucherNo: string; voucherNo: string;
/** Where the voucher stands after a correction: active, revoked, under correction, or corrected. */
voucherStatus?: VoucherStatus;
revokedByVoucherNo?: string | null;
replacesVoucherNo?: string | null;
correctionNote?: string | null;
voucherType: string | null; voucherType: string | null;
amount: number | null; amount: number | null;
createdAt: string | null; createdAt: string | null;
@@ -82,7 +88,8 @@ interface VoucherReport {
imports: [ imports: [
CommonModule, CommonModule,
FormsModule, FormsModule,
MatIconModule MatIconModule,
VoucherStatusComponent
] ]
}) })
export class VoucherReportComponent implements OnInit { export class VoucherReportComponent implements OnInit {
@@ -0,0 +1,137 @@
/**
* 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, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
/** Where a voucher stands after a voucher correction. */
export type VoucherStatus =
| 'ACTIVE'
| 'REVOKED'
| 'UNPASS_PENDING'
| 'UNPASSED'
| 'CORRECTION_PENDING'
| 'CORRECTED'
| 'CLOSED'
| null
| undefined;
/**
* A small badge saying whether a voucher was revoked, is under correction, or replaced another one.
* Nothing is shown for an ordinary (active) voucher, so the registers read as before.
*/
@Component({
selector: 'mifosx-voucher-status',
standalone: true,
imports: [CommonModule],
template: `
@if (label) {
<span class="vs" [class]="'vs vs--' + status" [title]="hint">{{ label }}</span>
@if (note) {
<div class="vs-note">{{ note }}</div>
}
}
`,
styles: [
`
.vs {
display: inline-block;
margin-left: 6px;
padding: 1px 8px;
border-radius: 999px;
background: #e2e8f0;
color: #334155;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
vertical-align: middle;
}
.vs-note {
margin-top: 2px;
max-width: 280px;
font-size: 11px;
line-height: 1.3;
color: #64748b;
}
.vs--REVOKED {
background: #fee2e2;
color: #991b1b;
}
.vs--UNPASS_PENDING,
.vs--CORRECTION_PENDING {
background: #fef3c7;
color: #92400e;
}
.vs--UNPASSED {
background: #dbeafe;
color: #1e40af;
}
.vs--CLOSED {
background: #f1f5f9;
color: #475569;
}
.vs--CORRECTED {
background: #d1fae5;
color: #065f46;
}
`
]
})
export class VoucherStatusComponent {
@Input() status: VoucherStatus;
/** The voucher that replaced this one, when it is revoked. */
@Input() revokedBy: string | null | undefined;
/** The voucher this one replaced, when it is the corrected one. */
@Input() replaces: string | null | undefined;
/** Why: the reason the voucher was unpassed, or why the correction was closed. */
@Input() note: string | null | undefined;
get label(): string {
switch (this.status) {
case 'REVOKED':
return this.revokedBy ? `Revoked → ${this.revokedBy}` : 'Revoked';
case 'UNPASS_PENDING':
return 'Unpass pending';
case 'UNPASSED':
return 'Unpassed';
case 'CORRECTION_PENDING':
return 'Correction pending';
case 'CLOSED':
return 'Closed — cashier deposits separately';
case 'CORRECTED':
return this.replaces ? `Corrected (replaces ${this.replaces})` : 'Corrected';
default:
return '';
}
}
get hint(): string {
switch (this.status) {
case 'REVOKED':
return 'This voucher was revoked: its deposit was moved to another account and a new voucher replaced it.';
case 'UNPASS_PENDING':
return 'A manager has not yet approved unpassing this voucher.';
case 'UNPASSED':
return 'Unpassed: waiting for the cashier to enter the correct account.';
case 'CORRECTION_PENDING':
return 'The correct account is entered; waiting for a manager to approve.';
case 'CLOSED':
return 'The correction was closed by the cashier; the voucher stays as it was.';
case 'CORRECTED':
return 'This voucher was raised by a correction and replaces the earlier one.';
default:
return '';
}
}
}
@@ -102,6 +102,27 @@
</div> </div>
} }
<!-- Money moving between branches: the approver must see it before approving -->
@if (isInterBranch) {
<div class="dri-interbranch">
<mat-icon>alt_route</mat-icon>
<div>
<div class="dri-interbranch__title">Inter-branch transfer</div>
<div class="dri-interbranch__text">
@if (branchNames(drEntries) && branchNames(crEntries)) {
Money moves from <strong>{{ branchNames(drEntries) }}</strong> to
<strong>{{ branchNames(crEntries) }}</strong
>.
} @else {
These accounts are held at different branches: <strong>{{ branchNames(creditEntries) }}</strong
>.
}
Each account is posted in its own branch's books. Check the accounts before approving.
</div>
</div>
</div>
}
<!-- Bank Transfer summary card (replaces GL card) --> <!-- Bank Transfer summary card (replaces GL card) -->
@if (isBankTransferMode) { @if (isBankTransferMode) {
<div class="dri-card"> <div class="dri-card">
@@ -154,6 +175,7 @@
<th>Account No</th> <th>Account No</th>
<th>Account Name</th> <th>Account Name</th>
<th>Type</th> <th>Type</th>
<th>Branch</th>
<th class="num">{{ isCollectionMode ? 'Amount (DR)' : 'Amount (CR)' }}</th> <th class="num">{{ isCollectionMode ? 'Amount (DR)' : 'Amount (CR)' }}</th>
</tr> </tr>
</thead> </thead>
@@ -166,11 +188,16 @@
<td> <td>
<span class="dri-type-badge">{{ accountTypeLabel(entry.accountType) }}</span> <span class="dri-type-badge">{{ accountTypeLabel(entry.accountType) }}</span>
</td> </td>
<td>
<span class="dri-branch-badge" [class.dri-branch-badge--cross]="isInterBranch">{{
entry.officeName || '—'
}}</span>
</td>
<td class="num dri-cr-amount">₹{{ entry.amount | number: '1.2-2' }}</td> <td class="num dri-cr-amount">₹{{ entry.amount | number: '1.2-2' }}</td>
</tr> </tr>
} }
<tr class="dri-cr-total-row"> <tr class="dri-cr-total-row">
<td colspan="4" class="dri-cr-total-label">{{ isCollectionMode ? 'Total Debit' : 'Total Credit' }}</td> <td colspan="5" class="dri-cr-total-label">{{ isCollectionMode ? 'Total Debit' : 'Total Credit' }}</td>
<td class="num dri-cr-total-amount">₹{{ totalCreditAmount() | number: '1.2-2' }}</td> <td class="num dri-cr-total-amount">₹{{ totalCreditAmount() | number: '1.2-2' }}</td>
</tr> </tr>
</tbody> </tbody>
@@ -192,6 +219,7 @@
<th>Account No</th> <th>Account No</th>
<th>Account Name</th> <th>Account Name</th>
<th>Type</th> <th>Type</th>
<th>Branch</th>
<th class="num">Amount (DR)</th> <th class="num">Amount (DR)</th>
</tr> </tr>
</thead> </thead>
@@ -204,11 +232,16 @@
<td> <td>
<span class="dri-type-badge">{{ accountTypeLabel(entry.accountType) }}</span> <span class="dri-type-badge">{{ accountTypeLabel(entry.accountType) }}</span>
</td> </td>
<td>
<span class="dri-branch-badge" [class.dri-branch-badge--cross]="isInterBranch">{{
entry.officeName || '—'
}}</span>
</td>
<td class="num dri-cr-amount">₹{{ entry.amount | number: '1.2-2' }}</td> <td class="num dri-cr-amount">₹{{ entry.amount | number: '1.2-2' }}</td>
</tr> </tr>
} }
<tr class="dri-cr-total-row"> <tr class="dri-cr-total-row">
<td colspan="4" class="dri-cr-total-label">Total Debit</td> <td colspan="5" class="dri-cr-total-label">Total Debit</td>
<td class="num dri-cr-total-amount">₹{{ totalDebitAmount() | number: '1.2-2' }}</td> <td class="num dri-cr-total-amount">₹{{ totalDebitAmount() | number: '1.2-2' }}</td>
</tr> </tr>
</tbody> </tbody>
@@ -228,6 +261,7 @@
<th>Account No</th> <th>Account No</th>
<th>Account Name</th> <th>Account Name</th>
<th>Type</th> <th>Type</th>
<th>Branch</th>
<th class="num">Amount (CR)</th> <th class="num">Amount (CR)</th>
</tr> </tr>
</thead> </thead>
@@ -240,11 +274,16 @@
<td> <td>
<span class="dri-type-badge">{{ accountTypeLabel(entry.accountType) }}</span> <span class="dri-type-badge">{{ accountTypeLabel(entry.accountType) }}</span>
</td> </td>
<td>
<span class="dri-branch-badge" [class.dri-branch-badge--cross]="isInterBranch">{{
entry.officeName || '—'
}}</span>
</td>
<td class="num dri-cr-amount">₹{{ entry.amount | number: '1.2-2' }}</td> <td class="num dri-cr-amount">₹{{ entry.amount | number: '1.2-2' }}</td>
</tr> </tr>
} }
<tr class="dri-cr-total-row"> <tr class="dri-cr-total-row">
<td colspan="4" class="dri-cr-total-label">Total Credit</td> <td colspan="5" class="dri-cr-total-label">Total Credit</td>
<td class="num dri-cr-total-amount">₹{{ totalCreditAmount() | number: '1.2-2' }}</td> <td class="num dri-cr-total-amount">₹{{ totalCreditAmount() | number: '1.2-2' }}</td>
</tr> </tr>
</tbody> </tbody>
@@ -534,3 +534,54 @@ $shadow-md: 0 4px 16px rgb(0 0 0 / 9%);
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
/* A leg's branch. Amber on every leg when the request moves money between branches, neutral otherwise. */
.dri-branch-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 20px;
background: #f1f5f9;
border: 1px solid #cbd5e1;
font-size: 11px;
font-weight: 700;
color: #475569;
&--cross {
background: #fffbeb;
border-color: #fcd34d;
color: #92400e;
}
}
/* Shown above the summary when the accounts are at different branches. */
.dri-interbranch {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 12px;
padding: 12px 16px;
border: 1px solid #fcd34d;
border-left: 4px solid #f59e0b;
border-radius: 8px;
background: #fffbeb;
color: #78350f;
mat-icon {
flex-shrink: 0;
color: #d97706;
}
&__title {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
}
&__text {
margin-top: 2px;
font-size: 13px;
line-height: 1.5;
}
}
@@ -25,6 +25,9 @@ interface CreditEntry {
accountType: string; accountType: string;
amount: number; amount: number;
dbCr?: string; dbCr?: string;
/** The branch the account is held at; absent for a GL leg or when the server could not resolve it. */
officeId?: number | null;
officeName?: string | null;
} }
@Component({ @Component({
@@ -167,6 +170,19 @@ export class DisbursementReviewComponent implements OnInit {
return this.creditEntries.filter((e) => e.dbCr !== 'Dr'); return this.creditEntries.filter((e) => e.dbCr !== 'Dr');
} }
/**
* True when the accounts in this request are held at more than one branch, so money moves between branches. The
* approver has to see that before approving: it is booked in each branch's own books.
*/
get isInterBranch(): boolean {
return new Set(this.creditEntries.filter((e) => e.officeId != null).map((e) => e.officeId)).size > 1;
}
/** Distinct branch names among the given legs, in order, e.g. for "Head Office" or "Head Office, bhopal". */
branchNames(entries: CreditEntry[]): string {
return [...new Set(entries.map((e) => e.officeName).filter((name): name is string => !!name))].join(', ');
}
totalCreditAmount(): number { totalCreditAmount(): number {
const entries = this.isCollectionMode ? this.drEntries : this.crEntries; const entries = this.isCollectionMode ? this.drEntries : this.crEntries;
return entries.reduce((sum, e) => sum + (e.amount ?? 0), 0); return entries.reduce((sum, e) => sum + (e.amount ?? 0), 0);
@@ -930,6 +930,10 @@
createClientForm.get('mobileNo')?.hasError('pattern') && createClientForm.get('mobileNo')?.touched createClientForm.get('mobileNo')?.hasError('pattern') && createClientForm.get('mobileNo')?.touched
) { ) {
<mat-error>Enter valid 10-digit number (starts with 6-9)</mat-error> <mat-error>Enter valid 10-digit number (starts with 6-9)</mat-error>
} @else if (createClientForm.get('mobileNo')?.hasError('contactTaken')) {
<mat-error
>This mobile number already belongs to another customer. Please enter a different number.</mat-error
>
} }
</mat-form-field> </mat-form-field>
@@ -940,7 +944,11 @@
color="primary" color="primary"
type="button" type="button"
class="verify-btn" class="verify-btn"
[disabled]="readOnly || createClientForm.get('mobileNo')?.value?.length !== 10" [disabled]="
readOnly ||
createClientForm.get('mobileNo')?.value?.length !== 10 ||
createClientForm.get('mobileNo')?.hasError('contactTaken')
"
(click)="verifyWithDIP()" (click)="verifyWithDIP()"
> >
<fa-icon icon="shield-alt" class="m-r-10"></fa-icon> <fa-icon icon="shield-alt" class="m-r-10"></fa-icon>
@@ -1008,6 +1016,8 @@
createClientForm.get('emailAddress')?.hasError('required') && createClientForm.get('emailAddress')?.touched createClientForm.get('emailAddress')?.hasError('required') && createClientForm.get('emailAddress')?.touched
) { ) {
<mat-error>Email is <strong>required</strong></mat-error> <mat-error>Email is <strong>required</strong></mat-error>
} @else if (createClientForm.get('emailAddress')?.hasError('contactTaken')) {
<mat-error>This email already belongs to another customer. Please enter a different email.</mat-error>
} @else if (createClientForm.get('emailAddress')?.invalid && createClientForm.get('emailAddress')?.touched) { } @else if (createClientForm.get('emailAddress')?.invalid && createClientForm.get('emailAddress')?.touched) {
<mat-error>Enter a valid email (e.g. name&#64;example.com)</mat-error> <mat-error>Enter a valid email (e.g. name&#64;example.com)</mat-error>
} }
@@ -27,15 +27,16 @@ import {
UntypedFormControl, UntypedFormControl,
ReactiveFormsModule, ReactiveFormsModule,
ValidatorFn, ValidatorFn,
AsyncValidatorFn,
AbstractControl, AbstractControl,
ValidationErrors ValidationErrors
} from '@angular/forms'; } from '@angular/forms';
import { Subject, Subscription, merge } from 'rxjs'; import { Subject, Subscription, merge, of, timer } from 'rxjs';
import { filter, switchMap, takeUntil } from 'rxjs/operators'; import { catchError, filter, map, switchMap, takeUntil } from 'rxjs/operators';
import { ClientsService } from 'app/clients/clients.service'; import { ClientsService } from 'app/clients/clients.service';
import { Dates } from 'app/core/utils/dates'; import { Dates } from 'app/core/utils/dates';
import { LegalFormId } from 'app/clients/models/legal-form.enum'; import { LegalFormId } from 'app/clients/models/legal-form.enum';
import { toProperNameCase } from 'app/clients/utils/name-case.util'; import { toPersonNameCase, toProperNameCase } from 'app/clients/utils/name-case.util';
import { ExternalNationalIdService } from 'app/clients/services/external-national-id.service'; import { ExternalNationalIdService } from 'app/clients/services/external-national-id.service';
/** Custom Services */ /** Custom Services */
@@ -936,6 +937,29 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
}; };
} }
/**
* A mobile number or email that already belongs to another customer. This is a different person using a contact
* that is taken (a PAN or Aadhaar match is what means the same customer), so the answer is to enter another one.
* Runs only once the format validators pass, and a new keystroke cancels the previous call, which is what
* debounces it. The client being edited is excluded so its own number is not flagged.
*/
private contactTakenValidator(field: 'mobileNo' | 'emailAddress'): AsyncValidatorFn {
return (control: AbstractControl) => {
const value = (control.value ?? '').toString().trim();
if (!value) {
return of(null);
}
return timer(400).pipe(
switchMap(() =>
this.clientService.lookupClientIdentity({ [field]: value, excludeClientId: this.clientData?.id ?? null })
),
map((result) => (result?.contactConflicts?.[field] ? { contactTaken: true } : null)),
// A failed lookup must not block the form: the server still refuses a duplicate when the client is saved.
catchError(() => of(null))
);
};
}
/** /**
* Creates the client form. * Creates the client form.
*/ */
@@ -969,7 +993,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
Validators.required, Validators.required,
Validators.pattern(/^[6-9]\d{9}$/), Validators.pattern(/^[6-9]\d{9}$/),
Validators.maxLength(10) Validators.maxLength(10)
] ],
this.contactTakenValidator('mobileNo')
], ],
alternateMobileNo: [ alternateMobileNo: [
'', '',
@@ -986,7 +1011,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
Validators.email, Validators.email,
Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/), Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/),
Validators.maxLength(100) Validators.maxLength(100)
] ],
this.contactTakenValidator('emailAddress')
], ],
dateOfBirth: [ dateOfBirth: [
'', '',
@@ -1456,7 +1482,10 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
const control = this.createClientForm.get(controlName); const control = this.createClientForm.get(controlName);
if (control && control.value) { if (control && control.value) {
const originalValue = control.value; const originalValue = control.value;
const capitalized = toProperNameCase(originalValue); // An entity's full name keeps its typed spelling (matched against the PAN name); a person's
// name parts are title-cased, the same as the Full Name line shows them.
const capitalized =
controlName === 'fullname' ? toProperNameCase(originalValue) : toPersonNameCase(originalValue);
if (originalValue !== capitalized) { if (originalValue !== capitalized) {
control.setValue(capitalized); control.setValue(capitalized);
} }
@@ -1925,12 +1954,11 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
/** Returns capitalized full name preview from first + middle + last */ /** Returns capitalized full name preview from first + middle + last */
get fullNamePreview(): string { get fullNamePreview(): string {
const capitalize = (s: string) => (s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : '');
const salutationId = this.createClientForm?.get('salutationId')?.value; const salutationId = this.createClientForm?.get('salutationId')?.value;
const salutation = this.salutationOptions?.find((s: any) => s.id === salutationId)?.name || ''; const salutation = this.salutationOptions?.find((s: any) => s.id === salutationId)?.name || '';
const first = capitalize(this.createClientForm?.get('firstname')?.value || ''); const first = toPersonNameCase(this.createClientForm?.get('firstname')?.value);
const middle = capitalize(this.createClientForm?.get('middlename')?.value || ''); const middle = toPersonNameCase(this.createClientForm?.get('middlename')?.value);
const last = capitalize(this.createClientForm?.get('lastname')?.value || ''); const last = toPersonNameCase(this.createClientForm?.get('lastname')?.value);
const full = [ const full = [
first, first,
middle, middle,
@@ -2360,6 +2388,15 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
if (generalDetails.fullname) { if (generalDetails.fullname) {
generalDetails.fullname = toProperNameCase(generalDetails.fullname); generalDetails.fullname = toProperNameCase(generalDetails.fullname);
} }
for (const part of [
'firstname',
'middlename',
'lastname'
]) {
if (generalDetails[part]) {
generalDetails[part] = toPersonNameCase(generalDetails[part]);
}
}
if (generalDetails.submittedOnDate instanceof Date) { if (generalDetails.submittedOnDate instanceof Date) {
generalDetails.submittedOnDate = this.dateUtils.formatDate(generalDetails.submittedOnDate, dateFormat); generalDetails.submittedOnDate = this.dateUtils.formatDate(generalDetails.submittedOnDate, dateFormat);
@@ -0,0 +1,211 @@
<!--
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/.
-->
<section class="identity-check" [class.identity-check--blocking]="status === 'matched' || status === 'conflict'">
<header class="identity-check__header">
<mat-icon class="identity-check__icon">fingerprint</mat-icon>
<div>
<h3 class="identity-check__title">Existing customer check</h3>
<p class="identity-check__hint">
@if (isEntity) {
Enter the company's GSTIN or PAN. If either is already on file in any branch, it is the same customer and a
new one is not created.
} @else {
Enter PAN or Aadhaar. If either is already on file in any branch, it is the same customer and a new one is not
created. Nothing found? What you enter here is filled into the KYC step for you.
}
</p>
</div>
</header>
@if (form) {
<form [formGroup]="form" class="identity-check__fields">
@if (isEntity) {
<mat-form-field appearance="outline" class="identity-check__field">
<mat-label>GSTIN</mat-label>
<input
matInput
formControlName="gstin"
class="identity-check__upper"
maxlength="15"
mifosxRestrictInput="gstin"
[errorStateMatcher]="errorMatcher"
placeholder="e.g. 22AAAAA0000A1Z5"
(input)="capitalise('gstin', $event)"
/>
@if (form.get('gstin')?.hasError('pattern')) {
<mat-error>Invalid GSTIN. It has 15 characters, like 22AAAAA0000A1Z5</mat-error>
}
</mat-form-field>
}
<mat-form-field appearance="outline" class="identity-check__field">
<mat-label>{{ isEntity ? 'Company PAN' : 'PAN' }}</mat-label>
<input
matInput
formControlName="pan"
class="identity-check__upper"
maxlength="10"
mifosxRestrictInput="pan"
[errorStateMatcher]="errorMatcher"
placeholder="e.g. ABCDE1234F"
(input)="capitalise('pan', $event)"
/>
@if (form.get('pan')?.hasError('pattern')) {
<mat-error>Invalid PAN. Use 5 letters, 4 digits, 1 letter, like ABCDE1234F</mat-error>
}
</mat-form-field>
@if (!isEntity) {
<mat-form-field appearance="outline" class="identity-check__field">
<mat-label>Aadhaar</mat-label>
<input
matInput
formControlName="aadhaar"
maxlength="12"
inputmode="numeric"
mifosxRestrictInput="digits"
[errorStateMatcher]="errorMatcher"
placeholder="12 digits"
/>
@if (form.get('aadhaar')?.hasError('pattern')) {
<mat-error>Invalid Aadhaar. It must be exactly 12 digits</mat-error>
} @else {
<mat-hint>Only a fingerprint of this number is sent, never the number</mat-hint>
}
</mat-form-field>
}
</form>
}
@switch (status) {
@case ('checking') {
<div class="identity-check__status identity-check__status--info">
<mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
Checking all branches…
</div>
}
@case ('not-found') {
<div class="identity-check__status identity-check__status--ok">
<mat-icon>check_circle</mat-icon>
<span>
No existing customer found. You can continue; these details will be filled into the KYC step so you do not
type them again.
</span>
</div>
}
@case ('error') {
<div class="identity-check__status identity-check__status--warn">
<mat-icon>warning</mat-icon>
<span>
Could not check right now. You can continue; the PAN, Aadhaar and GSTIN are checked again when the KYC is
saved.
</span>
<button mat-button type="button" (click)="recheck()">Check again</button>
</div>
}
@case ('conflict') {
<div class="identity-check__status identity-check__status--error">
<mat-icon>report</mat-icon>
<span>
These details belong to <strong>different customers</strong>. Check what was typed. If they are correct, ask a
manager to review before continuing.
</span>
</div>
@for (m of matches; track m.clientId) {
<div class="identity-check__card">
<strong>{{ m.displayName }}</strong>
<span class="identity-check__meta">CIF {{ m.cifNumber }} · {{ m.officeName }}</span>
<span class="identity-check__chips">
@for (by of m.matchedBy; track by) {
<span class="identity-check__chip">{{ matchedByLabel(by) }} matches</span>
}
</span>
</div>
}
}
@case ('matched') {
@if (match; as m) {
<div class="identity-check__status identity-check__status--error">
<mat-icon>person_search</mat-icon>
<span> This is an <strong>existing customer</strong>. A new client is not created for the same person. </span>
</div>
<div class="identity-check__card">
<div class="identity-check__card-head">
<strong>{{ m.displayName }}</strong>
<span class="identity-check__chips">
@for (by of m.matchedBy; track by) {
<span class="identity-check__chip">{{ matchedByLabel(by) }} matches</span>
}
</span>
</div>
<dl class="identity-check__facts">
<div>
<dt>CIF</dt>
<dd>{{ m.cifNumber }}</dd>
</div>
<div>
<dt>Home branch</dt>
<dd>{{ m.officeName }}</dd>
</div>
<div>
<dt>Type</dt>
<dd>{{ legalFormLabel(m) }}</dd>
</div>
@if (m.panMasked) {
<div>
<dt>PAN</dt>
<dd>{{ m.panMasked }}</dd>
</div>
}
@if (m.aadhaarMasked) {
<div>
<dt>Aadhaar</dt>
<dd>{{ m.aadhaarMasked }}</dd>
</div>
}
@if (m.gstinMasked) {
<div>
<dt>GSTIN</dt>
<dd>{{ m.gstinMasked }}</dd>
</div>
}
</dl>
@if (m.visibleToCaller) {
<button
mat-flat-button
color="primary"
type="button"
class="identity-check__action"
[routerLink]="['/clients', m.clientId, 'general']"
>
Open this customer
</button>
} @else {
<p class="identity-check__note">
This customer is registered at <strong>{{ m.officeName }}</strong
>. They stay a single customer (one CIF). Open their page, then choose which account to open for them at
this branch. They are listed under this branch once an account is opened here.
</p>
<button
mat-flat-button
color="primary"
type="button"
class="identity-check__action"
[disabled]="linking"
(click)="openAccountHere(m)"
>
{{ linking ? 'Please wait…' : 'Open account for this customer' }}
</button>
}
</div>
}
}
}
</section>
@@ -0,0 +1,157 @@
/**
* 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/.
*/
:host {
display: block;
}
.identity-check {
margin-bottom: 16px;
padding: 16px 20px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 12px;
&--blocking {
border-color: #fecaca;
background: #fffafa;
}
&__header {
display: flex;
gap: 12px;
align-items: flex-start;
margin-bottom: 12px;
}
&__icon {
flex: none;
color: var(--md-sys-color-primary, #1074b9);
}
&__title {
margin: 0;
font-size: 15px;
font-weight: 600;
}
&__hint {
margin: 2px 0 0;
font-size: 13px;
color: #6b7280;
}
// PAN and GSTIN read in capitals even before the value is rewritten.
&__upper {
text-transform: uppercase;
}
&__fields {
display: flex;
flex-wrap: wrap;
gap: 0 16px;
}
&__field {
flex: 1 1 220px;
min-width: 200px;
}
&__status {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
font-size: 13px;
border-radius: 8px;
&--info {
background: #eff6ff;
color: #1e40af;
}
&--ok {
background: #ecfdf5;
color: #047857;
}
&--warn {
background: #fffbeb;
color: #92400e;
}
&--error {
background: #fef2f2;
color: #991b1b;
}
}
&__card {
margin-top: 10px;
padding: 12px 14px;
background: #fff;
border: 1px solid #fecaca;
border-radius: 10px;
}
&__card-head {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
justify-content: space-between;
}
&__meta {
margin-left: 8px;
font-size: 13px;
color: #6b7280;
}
&__chips {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
&__chip {
padding: 2px 8px;
font-size: 12px;
color: #991b1b;
background: #fee2e2;
border-radius: 999px;
}
&__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px 16px;
margin: 10px 0 0;
dt {
font-size: 12px;
color: #6b7280;
}
dd {
margin: 0;
font-size: 14px;
font-weight: 500;
}
}
&__action {
margin-top: 12px;
}
&__note {
margin: 12px 0 0;
font-size: 13px;
color: #374151;
}
}
@@ -0,0 +1,308 @@
/**
* 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,
EventEmitter,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
SimpleChanges,
inject
} from '@angular/core';
import {
AbstractControl,
FormGroupDirective,
NgForm,
UntypedFormBuilder,
UntypedFormGroup,
Validators
} from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { Router } from '@angular/router';
import { MatIcon } from '@angular/material/icon';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { Observable, Subject, merge, of } from 'rxjs';
import { catchError, debounceTime, map, switchMap, takeUntil, tap } from 'rxjs/operators';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
import { AuthenticationService } from 'app/core/authentication/authentication.service';
import { RestrictInputDirective } from '../../../directives/restrict-input.directive';
import { ClientsService } from '../../clients.service';
import { ClientIdentityLookupResult, ClientIdentityMatch } from '../../models/client-identity.model';
import { aadhaarHash } from '../../utils/aadhaar-hash.util';
export type ClientIdentityStatus = 'idle' | 'checking' | 'not-found' | 'matched' | 'conflict' | 'error';
/**
* What the parent needs from the identity check: whether creation must stop, and the identifiers the officer entered
* so the KYC step can be filled in without typing them again.
*/
export interface ClientIdentityState {
status: ClientIdentityStatus;
/** Individual: the person's PAN. Entity: the company's PAN. */
pan: string | null;
/** The 12 digits, held in memory only to pre-fill the KYC step. Never sent: only its hash is. */
aadhaar: string | null;
gstin: string | null;
/** True when the customer already exists (or the identifiers disagree), so a new client must not be created. */
blocking: boolean;
}
/**
* Shows a field's error as soon as something has been typed in it, not only after the field is left: a PAN that is
* wrong should say so while it is being typed, and the form should not look fine in the meantime.
*/
class ShowErrorWhenDirty implements ErrorStateMatcher {
isErrorState(control: AbstractControl | null, _form: FormGroupDirective | NgForm | null): boolean {
return !!control && control.invalid && (control.dirty || control.touched);
}
}
const PAN_PATTERN = /^[A-Za-z]{5}\d{4}[A-Za-z]$/;
const AADHAAR_PATTERN = /^\d{12}$/;
const GSTIN_PATTERN = /^\d{2}[A-Za-z]{5}\d{4}[A-Za-z][1-9A-Za-z]Z[0-9A-Za-z]$/;
/**
* "Is this person already a customer of the bank?" — asked at the top of the General step, before anything is saved.
*
* Any ONE of PAN / Aadhaar (individual) or PAN / GSTIN (entity) matching an existing customer, in any branch, means
* the same customer, so a second client must not be created. When nothing matches, what was entered is carried to the
* KYC step so it does not have to be typed again.
*/
@Component({
selector: 'mifosx-client-identity-check',
templateUrl: './client-identity-check.component.html',
styleUrls: ['./client-identity-check.component.scss'],
imports: [
...STANDALONE_SHARED_IMPORTS,
MatIcon,
MatProgressSpinner,
RestrictInputDirective
]
})
export class ClientIdentityCheckComponent implements OnInit, OnChanges, OnDestroy {
private formBuilder = inject(UntypedFormBuilder);
private clientsService = inject(ClientsService);
private router = inject(Router);
private authenticationService = inject(AuthenticationService);
/** 1 = individual, 2 = entity (non-individual). */
@Input() legalFormType = 1;
@Output() identityChange = new EventEmitter<ClientIdentityState>();
form: UntypedFormGroup;
readonly errorMatcher = new ShowErrorWhenDirty();
status: ClientIdentityStatus = 'idle';
matches: ClientIdentityMatch[] = [];
/** True while the customer is being introduced to this branch. */
linking = false;
private destroy$ = new Subject<void>();
private recheck$ = new Subject<void>();
get isEntity(): boolean {
return this.legalFormType === 2;
}
/** The first (and normally only) existing customer found. */
get match(): ClientIdentityMatch | null {
return this.matches[0] ?? null;
}
/**
* True while a field holds something that is not a valid PAN / Aadhaar / GSTIN. Such a value is never looked up or
* carried to the KYC step, so the parent must not let the officer carry on past it as if the check had passed.
*/
get hasInvalidInput(): boolean {
return !!this.form?.invalid;
}
markAllAsTouched(): void {
this.form?.markAllAsTouched();
}
get state(): ClientIdentityState {
const v = this.normalized();
return {
status: this.status,
pan: v.pan,
aadhaar: v.aadhaar,
gstin: v.gstin,
blocking: this.status === 'matched' || this.status === 'conflict'
};
}
ngOnInit(): void {
this.form = this.formBuilder.group({
pan: [
'',
Validators.pattern(PAN_PATTERN)
],
aadhaar: [
'',
Validators.pattern(AADHAAR_PATTERN)
],
gstin: [
'',
Validators.pattern(GSTIN_PATTERN)
]
});
// A pause in typing (or a manual re-check) runs one lookup; typing again cancels the one in flight.
merge(this.form.valueChanges, this.recheck$)
.pipe(
debounceTime(400),
tap(() => this.startChecking()),
switchMap(() => this.lookup()),
takeUntil(this.destroy$)
)
.subscribe((result) => this.applyResult(result));
}
ngOnChanges(changes: SimpleChanges): void {
// Switching individual <-> entity swaps which identifiers apply; what was typed for the other kind is stale.
if (changes['legalFormType'] && !changes['legalFormType'].firstChange) {
this.reset();
}
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
/** Clears the fields and the result, e.g. when a new client creation session starts. */
reset(): void {
this.form?.reset({ pan: '', aadhaar: '', gstin: '' }, { emitEvent: false });
this.status = 'idle';
this.matches = [];
this.identityChange.emit(this.state);
}
recheck(): void {
this.recheck$.next();
}
/**
* PAN and GSTIN are always written in capitals, so what is typed is capitalised as it is typed. The caret is put
* back where it was, otherwise editing the middle of a PAN would throw it to the end. The shared restrict-input
* directive only capitalises when the field is left, which let lower-case show while typing.
*/
capitalise(controlName: 'pan' | 'gstin', event: Event): void {
const input = event.target as HTMLInputElement;
const upper = input.value.toUpperCase();
if (upper !== input.value) {
const { selectionStart, selectionEnd } = input;
input.value = upper;
input.setSelectionRange(selectionStart, selectionEnd);
}
this.form.get(controlName)?.setValue(upper, { emitEvent: false });
}
/** Identifiers that are complete and well formed; anything half-typed is ignored rather than looked up. */
private normalized(): { pan: string | null; aadhaar: string | null; gstin: string | null } {
const raw = this.form?.getRawValue() ?? { pan: '', aadhaar: '', gstin: '' };
const pan = String(raw.pan ?? '')
.replace(/\s+/g, '')
.toUpperCase();
const aadhaar = String(raw.aadhaar ?? '').replace(/[\s-]/g, '');
const gstin = String(raw.gstin ?? '')
.replace(/\s+/g, '')
.toUpperCase();
return {
pan: PAN_PATTERN.test(pan) ? pan : null,
aadhaar: !this.isEntity && AADHAAR_PATTERN.test(aadhaar) ? aadhaar : null,
gstin: this.isEntity && GSTIN_PATTERN.test(gstin) ? gstin : null
};
}
private startChecking(): void {
const v = this.normalized();
if (!v.pan && !v.aadhaar && !v.gstin) {
this.status = 'idle';
this.matches = [];
this.identityChange.emit(this.state);
return;
}
this.status = 'checking';
this.matches = [];
this.identityChange.emit(this.state);
}
private lookup(): Observable<ClientIdentityLookupResult | 'error' | null> {
const v = this.normalized();
if (!v.pan && !v.aadhaar && !v.gstin) {
return of(null);
}
return this.clientsService
.lookupClientIdentity({ panNumber: v.pan, aadhaarHash: aadhaarHash(v.aadhaar), gstinNumber: v.gstin })
.pipe(
map((result): ClientIdentityLookupResult | 'error' => result),
catchError(() => of('error' as const))
);
}
private applyResult(result: ClientIdentityLookupResult | 'error' | null): void {
if (result === null) {
// Nothing complete to look up; startChecking() already reset to idle.
return;
}
if (result === 'error') {
// Not blocking: the server checks again when the KYC is saved, so a failed lookup must not stop onboarding.
this.status = 'error';
this.matches = [];
} else if (result.conflict) {
this.status = 'conflict';
this.matches = result.matches;
} else if (result.matched) {
this.status = 'matched';
this.matches = result.matches;
} else {
this.status = 'not-found';
this.matches = [];
}
this.identityChange.emit(this.state);
}
/**
* Starts opening an account at THIS branch for a customer registered at another one. The customer stays at the home
* branch (one CIF). This branch is introduced to them, which only lets it open their page; they are listed under
* this branch once an account is actually opened here. An account opened for a customer of another branch is held
* at the branch that opens it.
*/
openAccountHere(match: ClientIdentityMatch): void {
const officeId = this.authenticationService.getCredentials()?.officeId;
if (this.linking || officeId == null) {
return;
}
this.linking = true;
this.clientsService.linkClientToMyBranch(match.clientId).subscribe({
next: () => {
this.linking = false;
this.router.navigate([
'/clients',
match.clientId,
'general'
]);
},
// The failure is shown by the global error handler.
error: () => (this.linking = false)
});
}
/** Legal form of the existing customer, for the card. */
legalFormLabel(match: ClientIdentityMatch): string {
return match.legalFormEnum === 2 ? 'Non-Individual' : 'Individual';
}
matchedByLabel(by: string): string {
return by === 'AADHAAR' ? 'Aadhaar' : by;
}
}
@@ -43,6 +43,8 @@ import { KycUploadHelperService } from '../../shared/kyc-upload-helper.service';
import { CaptureImageDialogComponent } from '../../clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component'; import { CaptureImageDialogComponent } from '../../clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component';
import { DrawSignatureDialogComponent } from '../../clients-view/custom-dialogs/draw-signature-dialog/draw-signature-dialog.component'; import { DrawSignatureDialogComponent } from '../../clients-view/custom-dialogs/draw-signature-dialog/draw-signature-dialog.component';
import { dataUrlToFile } from 'app/shared/utils/data-url.util'; import { dataUrlToFile } from 'app/shared/utils/data-url.util';
import { aadhaarHash } from '../../utils/aadhaar-hash.util';
import { ClientIdentityState } from '../client-identity-check/client-identity-check.component';
import { DocumentPreviewDialogComponent } from '../../shared/document-preview-dialog/document-preview-dialog.component'; import { DocumentPreviewDialogComponent } from '../../shared/document-preview-dialog/document-preview-dialog.component';
import { import {
PanDeclarationDialogComponent, PanDeclarationDialogComponent,
@@ -108,6 +110,32 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
@Input() verificationDateOfBirth: Date | null = null; @Input() verificationDateOfBirth: Date | null = null;
/** Read-only mode — disables form editing until user clicks edit icon */ /** Read-only mode — disables form editing until user clicks edit icon */
@Input() readOnly = false; @Input() readOnly = false;
/**
* The identifiers the officer already typed into the existing-customer check on the General step. They are filled
* in here so they are not typed twice, but only into fields that are still empty: whatever was entered on this
* step wins. Ignored while the check says the customer already exists, since no client is created then.
*/
@Input() set identityPrefill(identity: ClientIdentityState | null) {
if (!identity || identity.blocking) {
return;
}
const isEmpty = (name: string) => !String(this.kycForm?.get(name)?.value ?? '').trim();
const patch: Record<string, unknown> = {};
if (this.isNonIndividual) {
if (identity.gstin && isEmpty('gstinNumber')) patch['gstinNumber'] = identity.gstin;
if (identity.pan && isEmpty('enterprisePan')) patch['enterprisePan'] = identity.pan;
} else {
if (identity.pan && isEmpty('panNumber')) {
patch['panNumber'] = identity.pan;
patch['hasPan'] = true;
}
if (identity.aadhaar && isEmpty('aadhaarNumber')) patch['aadhaarNumber'] = identity.aadhaar;
}
if (Object.keys(patch).length) {
this.kycForm.patchValue(patch);
}
}
@Input() calculatedRisk: { @Input() calculatedRisk: {
category: number; category: number;
reason: string; reason: string;
@@ -1756,7 +1784,8 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
kycType: this.kycTypeValue, kycType: this.kycTypeValue,
riskCategory: this.currentRiskCategory, riskCategory: this.currentRiskCategory,
panNumber: pan, panNumber: pan,
aadhaarNumberMasked: aadhaarRaw.length === 12 ? 'XXXXXXXX' + aadhaarRaw.slice(-4) : 'XXXXXXXX0000' aadhaarNumberMasked: aadhaarRaw.length === 12 ? 'XXXXXXXX' + aadhaarRaw.slice(-4) : 'XXXXXXXX0000',
...this.aadhaarHashField(aadhaarRaw)
}; };
// A proprietorship reaches this method (it verifies the proprietor's individual PAN) but is // A proprietorship reaches this method (it verifies the proprietor's individual PAN) but is
@@ -2358,7 +2387,8 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
locale: 'en', locale: 'en',
kycType: this.kycTypeValue, kycType: this.kycTypeValue,
riskCategory: this.currentRiskCategory, riskCategory: this.currentRiskCategory,
aadhaarNumberMasked: aadhaarMasked aadhaarNumberMasked: aadhaarMasked,
...this.aadhaarHashField(aadhaar)
}; };
const panVal = this.kycForm.value.panNumber; const panVal = this.kycForm.value.panNumber;
if (panVal) { if (panVal) {
@@ -2679,6 +2709,15 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
} }
} }
/**
* `{ aadhaarHash }` for a full 12-digit Aadhaar, `{}` otherwise. The number itself is never sent: KYC calls are
* recorded server-side, so only its SHA-256 goes.
*/
private aadhaarHashField(aadhaar: string | null | undefined): { aadhaarHash?: string } {
const hash = aadhaarHash(aadhaar);
return hash ? { aadhaarHash: hash } : {};
}
get kycData(): any { get kycData(): any {
const formVal = this.kycForm.getRawValue(); const formVal = this.kycForm.getRawValue();
const aadhaarRaw = formVal.aadhaarNumber || ''; const aadhaarRaw = formVal.aadhaarNumber || '';
@@ -2707,6 +2746,9 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
// For non-individual: Company PAN is used as panNumber for verification // For non-individual: Company PAN is used as panNumber for verification
panNumber: this.isNonIndividual ? enterprisePanNorm : v.hasPan ? panNorm : null, panNumber: this.isNonIndividual ? enterprisePanNorm : v.hasPan ? panNorm : null,
aadhaarNumberMasked: this.isNonIndividual ? 'XXXXXXXX0000' : aadhaarMasked, aadhaarNumberMasked: this.isNonIndividual ? 'XXXXXXXX0000' : aadhaarMasked,
// The fingerprint of the full number, so the server can tell two Aadhaar numbers apart (the masked form keeps
// only the last four digits). Absent when the field holds a masked value reloaded from the server.
...(this.isNonIndividual ? {} : this.aadhaarHashField(aadhaarRaw)),
// Only ever sent when this screen actually holds a value. The seeding status is derived by // Only ever sent when this screen actually holds a value. The seeding status is derived by
// the provider during PAN verification and written straight to the record, so sending an // the provider during PAN verification and written straight to the record, so sending an
// empty one back would blank a field the server filled in — which reads as an officer // empty one back would blank a field the server filled in — which reads as an officer
@@ -90,6 +90,21 @@
<mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text> <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="Branch">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Branch' | translate }}</th>
<td mat-cell *matCellDef="let element">
@if (element.officeName) {
<span [class]="branchChipClass(element)" [title]="branchChipTitle(element)">
<i class="fa fa-map-marker"></i>{{ element.officeName }}
@if (isHomeBranch(element)) {
<span class="branch-chip__home">Home</span>
}
</span>
} @else {
—
}
</td>
</ng-container>
<ng-container matColumnDef="Last Active"> <ng-container matColumnDef="Last Active">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th> <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td> <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
@@ -203,6 +218,21 @@
<mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text> <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="Branch">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Branch' | translate }}</th>
<td mat-cell *matCellDef="let element">
@if (element.officeName) {
<span [class]="branchChipClass(element)" [title]="branchChipTitle(element)">
<i class="fa fa-map-marker"></i>{{ element.officeName }}
@if (isHomeBranch(element)) {
<span class="branch-chip__home">Home</span>
}
</span>
} @else {
—
}
</td>
</ng-container>
<ng-container matColumnDef="Closed Date"> <ng-container matColumnDef="Closed Date">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th> <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td> <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
@@ -262,6 +292,21 @@
<mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text> <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="Branch">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Branch' | translate }}</th>
<td mat-cell *matCellDef="let element">
@if (element.officeName) {
<span [class]="branchChipClass(element)" [title]="branchChipTitle(element)">
<i class="fa fa-map-marker"></i>{{ element.officeName }}
@if (isHomeBranch(element)) {
<span class="branch-chip__home">Home</span>
}
</span>
} @else {
—
}
</td>
</ng-container>
<ng-container matColumnDef="Last Active"> <ng-container matColumnDef="Last Active">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th> <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td> <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
@@ -452,6 +497,21 @@
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fixed Deposit Product' | translate }}</th> <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fixed Deposit Product' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.productName }}</td> <td mat-cell *matCellDef="let element">{{ element.productName }}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="Branch">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Branch' | translate }}</th>
<td mat-cell *matCellDef="let element">
@if (element.officeName) {
<span [class]="branchChipClass(element)" [title]="branchChipTitle(element)">
<i class="fa fa-map-marker"></i>{{ element.officeName }}
@if (isHomeBranch(element)) {
<span class="branch-chip__home">Home</span>
}
</span>
} @else {
—
}
</td>
</ng-container>
<ng-container matColumnDef="Last Active"> <ng-container matColumnDef="Last Active">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th> <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td> <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
@@ -551,6 +611,21 @@
<mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text> <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="Branch">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Branch' | translate }}</th>
<td mat-cell *matCellDef="let element">
@if (element.officeName) {
<span [class]="branchChipClass(element)" [title]="branchChipTitle(element)">
<i class="fa fa-map-marker"></i>{{ element.officeName }}
@if (isHomeBranch(element)) {
<span class="branch-chip__home">Home</span>
}
</span>
} @else {
—
}
</td>
</ng-container>
<ng-container matColumnDef="Closed Date"> <ng-container matColumnDef="Closed Date">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th> <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td> <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
@@ -611,10 +686,27 @@
<mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text> <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="Branch">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Branch' | translate }}</th>
<td mat-cell *matCellDef="let element">
@if (element.officeName) {
<span [class]="branchChipClass(element)" [title]="branchChipTitle(element)">
<i class="fa fa-map-marker"></i>{{ element.officeName }}
@if (isHomeBranch(element)) {
<span class="branch-chip__home">Home</span>
}
</span>
} @else {
—
}
</td>
</ng-container>
<ng-container matColumnDef="Status"> <ng-container matColumnDef="Status">
<th mat-header-cell *matHeaderCellDef>Status</th> <th mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<span class="rd-status" [class.rd-status--ended]="element.timeline?.closedOnDate">{{ rdStatusLabel(element) }}</span> <span class="rd-status" [class.rd-status--ended]="element.timeline?.closedOnDate">{{
rdStatusLabel(element)
}}</span>
@if (element.timeline?.closedOnDate) { @if (element.timeline?.closedOnDate) {
<div class="rd-status__date">on {{ element.timeline.closedOnDate | dateFormat }}</div> <div class="rd-status__date">on {{ element.timeline.closedOnDate | dateFormat }}</div>
} }
@@ -440,3 +440,66 @@ table[mat-table] {
font-size: 11px; font-size: 11px;
color: #64748b; color: #64748b;
} }
/*
* Branch an account is held at, as a pill coloured by where the signed-in user works: green for their own branch, red for
* any other. When the customer banks at several other branches the reds run from light to dark, one shade per branch.
*/
.branch-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
.fa {
font-size: 12px;
}
&--mine {
background: #dcfce7;
color: #166534;
border-color: #4ade80;
}
&--other-0 {
background: #fee2e2;
color: #991b1b;
border-color: #fca5a5;
}
&--other-1 {
background: #fca5a5;
color: #7f1d1d;
border-color: #f87171;
}
&--other-2 {
background: #dc2626;
color: #fff;
border-color: #b91c1c;
}
&--other-3 {
background: #991b1b;
color: #fff;
border-color: #7f1d1d;
}
}
.branch-chip__home {
padding: 0 6px;
border-radius: 8px;
/* fixed colours: the chip text turns white on the dark reds, which would vanish against this light tag */
background: rgb(255 255 255 / 85%);
color: #1f2937;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@@ -39,6 +39,7 @@ import { DateFormatPipe } from '../../../pipes/date-format.pipe';
import { FormatNumberPipe } from '../../../pipes/format-number.pipe'; import { FormatNumberPipe } from '../../../pipes/format-number.pipe';
import { CurrencyPipe } from '@angular/common'; import { CurrencyPipe } from '@angular/common';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
import { AuthenticationService } from '../../../core/authentication/authentication.service';
import { ReportsService } from 'app/reports/reports.service'; import { ReportsService } from 'app/reports/reports.service';
import { SettingsService } from 'app/settings/settings.service'; import { SettingsService } from 'app/settings/settings.service';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@@ -151,6 +152,7 @@ export class GeneralTabComponent implements OnDestroy {
private router = inject(Router); private router = inject(Router);
private reportsService = inject(ReportsService); private reportsService = inject(ReportsService);
private settingsService = inject(SettingsService); private settingsService = inject(SettingsService);
private authenticationService = inject(AuthenticationService);
/** Open Loan Accounts Columns */ /** Open Loan Accounts Columns */
openLoansColumns: string[] = [ openLoansColumns: string[] = [
@@ -177,6 +179,7 @@ export class GeneralTabComponent implements OnDestroy {
openSavingsColumns: string[] = [ openSavingsColumns: string[] = [
'Account No', 'Account No',
'Saving Account', 'Saving Account',
'Branch',
'Last Active', 'Last Active',
'Balance', 'Balance',
'Actions' 'Actions'
@@ -185,12 +188,14 @@ export class GeneralTabComponent implements OnDestroy {
closedSavingsColumns: string[] = [ closedSavingsColumns: string[] = [
'Account No', 'Account No',
'Saving Account', 'Saving Account',
'Branch',
'Closed Date' 'Closed Date'
]; ];
/** Closed Recurring Deposit Accounts Columns - with how each one ended, for tracking. */ /** Closed Recurring Deposit Accounts Columns - with how each one ended, for tracking. */
recurringColumns: string[] = [ recurringColumns: string[] = [
'Account No', 'Account No',
'Saving Account', 'Saving Account',
'Branch',
'Status', 'Status',
'Last Active', 'Last Active',
'Balance', 'Balance',
@@ -336,12 +341,76 @@ export class GeneralTabComponent implements OnDestroy {
/** Client Id */ /** Client Id */
clientid: any; clientid: any;
/** The customer's own (home) branch, to tell it from branches the customer banks at elsewhere. */
clientOfficeId: number | null = null;
/** How many red shades the branch chips have (general-tab.component.scss, .branch-chip--other-0 ... -3), light to dark. */
private static readonly OTHER_BRANCH_SHADES = 4;
/** The branch the signed-in user works at: accounts held here read green, every other branch red. */
private get myOfficeId(): number | null {
const officeId = this.authenticationService.getCredentials()?.officeId;
return officeId == null ? null : Number(officeId);
}
/**
* The other branches this customer banks at, lightest to darkest. Ordered by branch id so the shades stay put between
* visits; computed over every deposit account on the page so one branch has the same shade in every table.
*/
private otherBranchIds(): number[] {
const mine = this.myOfficeId;
const ids = new Set<number>();
for (const account of [
...this.savingAccounts,
...this.currentAccounts
]) {
const officeId = Number(account?.officeId);
if (Number.isFinite(officeId) && officeId !== mine) {
ids.add(officeId);
}
}
return [...ids].sort((a, b) => a - b);
}
/** Green for an account at the signed-in user's branch; red for any other branch, a different shade for each. */
branchChipClass(account: any): string {
const officeId = Number(account?.officeId);
if (officeId === this.myOfficeId) {
return 'branch-chip branch-chip--mine';
}
const others = this.otherBranchIds();
const rank = Math.max(others.indexOf(officeId), 0);
const last = GeneralTabComponent.OTHER_BRANCH_SHADES - 1;
// one other branch gets a mid red, several are spread from the lightest to the darkest
const shade = others.length <= 1 ? 1 : Math.round((rank * last) / (others.length - 1));
return `branch-chip branch-chip--other-${shade}`;
}
branchChipTitle(account: any): string {
const parts = [account?.officeName];
if (Number(account?.officeId) === this.myOfficeId) {
parts.push('your branch');
}
if (this.isHomeBranch(account)) {
parts.push('customer home branch');
}
return parts.join(' - ');
}
isHomeBranch(account: any): boolean {
return this.clientOfficeId != null && Number(account?.officeId) === this.clientOfficeId;
}
/** /**
* @param {ActivatedRoute} route Activated Route * @param {ActivatedRoute} route Activated Route
* @param {ClientsService} clientService Clients Service * @param {ClientsService} clientService Clients Service
* @param {Router} router Router * @param {Router} router Router
*/ */
constructor() { constructor() {
// The customer's record is resolved on the parent route, not on this tab's own route data.
this.route.parent?.data.subscribe((data: any) => {
this.clientOfficeId = data?.clientViewData?.officeId ?? null;
});
this.route.data.subscribe( this.route.data.subscribe(
(data: { clientAccountsData: any; clientChargesData: any; clientSummary: any; clientCollateralData: any }) => { (data: { clientAccountsData: any; clientChargesData: any; clientSummary: any; clientCollateralData: any }) => {
this.clientAccountData = data.clientAccountsData; this.clientAccountData = data.clientAccountsData;
+22
View File
@@ -50,6 +50,17 @@
/> />
</mat-form-field> </mat-form-field>
@if (isHeadOffice) {
<mat-form-field class="table-filter" appearance="outline">
<mat-select [(value)]="officeFilter" (selectionChange)="officeChanged()" placeholder="Branch">
<mat-option [value]="null">All Branches</mat-option>
@for (office of offices; track office.id) {
<mat-option [value]="office.id">{{ office.name }}</mat-option>
}
</mat-select>
</mat-form-field>
}
<mat-form-field class="table-filter" appearance="outline"> <mat-form-field class="table-filter" appearance="outline">
<mat-select [(value)]="statusFilter" (selectionChange)="applyClientFilters()" placeholder="Status"> <mat-select [(value)]="statusFilter" (selectionChange)="applyClientFilters()" placeholder="Status">
<mat-option value="">All Status</mat-option> <mat-option value="">All Status</mat-option>
@@ -92,6 +103,11 @@
row.legalForm?.id === 2 ? 'business' : 'person' row.legalForm?.id === 2 ? 'business' : 'person'
}}</mat-icon> }}</mat-icon>
{{ hideClientData ? maskName(row.displayName) : row.displayName }} {{ hideClientData ? maskName(row.displayName) : row.displayName }}
@if (!isHeadOffice && row.officeId && myOfficeId !== null && row.officeId !== myOfficeId) {
<span class="row-home-chip" matTooltip="Registered at another branch; linked to this branch">
Home: {{ row.officeName }}
</span>
}
@if (row._ckycDone) { @if (row._ckycDone) {
<mat-icon class="row-ckyc-icon" matTooltip="CKYC Done">verified</mat-icon> <mat-icon class="row-ckyc-icon" matTooltip="CKYC Done">verified</mat-icon>
} }
@@ -114,6 +130,12 @@
</td> </td>
</ng-container> </ng-container>
<!-- Branch Column (Head Office only) -->
<ng-container matColumnDef="officeName">
<th mat-header-cell *matHeaderCellDef>Branch</th>
<td mat-cell *matCellDef="let row">{{ row.officeName }}</td>
</ng-container>
<!-- Status Column --> <!-- Status Column -->
<ng-container matColumnDef="status"> <ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th> <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
+12
View File
@@ -7,3 +7,15 @@
*/ */
@use '../shared/styles/list-layout' as *; @use '../shared/styles/list-layout' as *;
// A customer registered at another branch that has been linked to this one.
.row-home-chip {
margin-left: 8px;
padding: 1px 8px;
font-size: 11px;
font-weight: 500;
color: #92400e;
background: #fef3c7;
border-radius: 999px;
white-space: nowrap;
}
+27 -1
View File
@@ -38,6 +38,8 @@ import { MatIconButton, MatButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon'; import { MatIcon } from '@angular/material/icon';
import { MatTooltip } from '@angular/material/tooltip'; import { MatTooltip } from '@angular/material/tooltip';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
import { AuthenticationService } from '../core/authentication/authentication.service';
import { OrganizationService } from '../organization/organization.service';
@Component({ @Component({
selector: 'mifosx-clients', selector: 'mifosx-clients',
@@ -71,6 +73,15 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
}) })
export class ClientsComponent implements OnInit { export class ClientsComponent implements OnInit {
private clientService = inject(ClientsService); private clientService = inject(ClientsService);
private authenticationService = inject(AuthenticationService);
private organizationService = inject(OrganizationService);
/** Head Office sees every branch's clients, so it gets a Branch filter. A branch user only ever sees its own. */
isHeadOffice = this.authenticationService.isHeadOfficeUser();
offices: { id: number; name: string }[] = [];
officeFilter: number | null = null;
/** The caller's own branch, to tell a customer of another branch (linked here) from this branch's own. */
myOfficeId = this.authenticationService.getCredentials()?.officeId ?? null;
/** Returns true if client data masking is enabled */ /** Returns true if client data masking is enabled */
get hideClientData(): boolean { get hideClientData(): boolean {
@@ -90,6 +101,7 @@ export class ClientsComponent implements OnInit {
'displayName', 'displayName',
'cifNumber', 'cifNumber',
'legalForm', 'legalForm',
'officeName',
'status', 'status',
'profileCompletion', 'profileCompletion',
'actions' 'actions'
@@ -119,6 +131,13 @@ export class ClientsComponent implements OnInit {
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
ngOnInit() { ngOnInit() {
if (!this.isHeadOffice) {
this.displayedColumns = this.displayedColumns.filter((c) => c !== 'officeName');
} else {
this.organizationService.getOffices().subscribe((offices: any[]) => {
this.offices = (offices || []).map((o) => ({ id: o.id, name: o.name }));
});
}
if (environment.preloadClients) { if (environment.preloadClients) {
this.getClients(); this.getClients();
} }
@@ -144,7 +163,8 @@ export class ClientsComponent implements OnInit {
this.sortDirection, this.sortDirection,
false, false,
'', '',
true true,
this.isHeadOffice ? this.officeFilter : null
) )
.subscribe( .subscribe(
(data: any) => { (data: any) => {
@@ -233,6 +253,12 @@ export class ClientsComponent implements OnInit {
this.dataSource.data = filtered; this.dataSource.data = filtered;
} }
/** Branch filter is applied by the server so paging and the record count stay correct. */
officeChanged() {
this.resetPaginator();
this.getClients();
}
pageChanged(event: PageEvent) { pageChanged(event: PageEvent) {
this.pageSize = event.pageSize; this.pageSize = event.pageSize;
this.currentPage = event.pageIndex; this.currentPage = event.pageIndex;
+187 -3
View File
@@ -18,6 +18,7 @@ import { map, catchError } from 'rxjs/operators';
import { environment } from '../../environments/environment'; import { environment } from '../../environments/environment';
import { dataUrlToFile } from 'app/shared/utils/data-url.util'; import { dataUrlToFile } from 'app/shared/utils/data-url.util';
import { ClientIdentityLookupResult } from './models/client-identity.model';
/** /**
* Clients service. * Clients service.
@@ -742,9 +743,14 @@ export class ClientsService {
sortDirection: string = '', sortDirection: string = '',
activeOnly: boolean = false, activeOnly: boolean = false,
legalFormType: string = '', legalFormType: string = '',
silent: boolean = false silent: boolean = false,
officeId: number | null = null
) { ) {
const innerRequest: any = { text }; const innerRequest: any = { text };
// Branch filter (Head Office list). The server still limits results to the caller's office hierarchy.
if (officeId != null) {
innerRequest.officeId = officeId;
}
if (activeOnly) { if (activeOnly) {
innerRequest.activeOnly = true; innerRequest.activeOnly = true;
} }
@@ -868,6 +874,39 @@ export class ClientsService {
return this.http.post(`/clients/${clientId}/kyc`, kycData); return this.http.post(`/clients/${clientId}/kyc`, kycData);
} }
/**
* "Is this person already a customer of the bank?" — across every branch, by PAN, Aadhaar fingerprint or GSTIN.
* Any ONE of them matching means the same customer. `contactConflicts` reports a phone/email already used by another
* client, which is never the same customer. Only the Aadhaar's SHA-256 is sent, never the number.
*/
/**
* Introduces a customer of another branch to the caller's branch, so the branch can see them and open an account
* for them there. The customer stays at the home branch. Safe to repeat.
*/
linkClientToMyBranch(
clientId: number
): Observable<{ clientId: number; linked: boolean; officeId: number; officeName: string }> {
return this.http.post<{ clientId: number; linked: boolean; officeId: number; officeName: string }>(
'/clientidentity/link',
{
clientId
}
);
}
lookupClientIdentity(identity: {
panNumber?: string | null;
aadhaarHash?: string | null;
gstinNumber?: string | null;
mobileNo?: string | null;
emailAddress?: string | null;
excludeClientId?: number | null;
}): Observable<ClientIdentityLookupResult> {
return this.http.post<ClientIdentityLookupResult>('/clientidentity/lookup', identity, {
context: new HttpContext().set(SILENT_HTTP_ERROR, true)
});
}
/** /**
* Screen a client name against the UN Security Council consolidated sanctions list. * Screen a client name against the UN Security Council consolidated sanctions list.
* @param name The name to screen * @param name The name to screen
@@ -1073,9 +1112,146 @@ export class ClientsService {
*/ */
saveKycContactLog( saveKycContactLog(
clientId: string | number, clientId: string | number,
data: { channel: string; notes: string; officerName?: string } data: { channel: string; notes: string; officerName?: string; noticeType?: string },
silent = false
): Observable<any> { ): Observable<any> {
return this.http.post(`/kyc/exceptions/${clientId}/contact-log`, data); return this.http.post(
`/kyc/exceptions/${clientId}/contact-log`,
data,
silent ? { context: new HttpContext().set(SILENT_HTTP_ERROR, true) } : {}
);
}
/**
* The subject and text a customer would receive for the stage they are at today.
* `type` is KYC or DORMANCY; the body comes back empty when they are at no such stage.
*/
previewKycNotice(clientId: string | number, type: string): Observable<{ subject?: string; body?: string }> {
return this.http.get<{ subject?: string; body?: string }>(
`/kyc/exceptions/${clientId}/contact-log/preview?type=${type}`,
{
context: new HttpContext().set(SILENT_HTTP_ERROR, true)
}
);
}
/** Queues notices to be sent in the background by the queue job. */
enqueueKycNotices(body: {
items: { clientId: number; noticeType: string; channel: string; accountNo?: string; stageLabel?: string }[];
notes?: string;
officerName?: string;
sendAt?: string;
}): Observable<{ queued: number; skipped: number; unreachable: number }> {
return this.http.post<{ queued: number; skipped: number; unreachable: number }>('/kyc/notice-queue', body);
}
/** Queued notices, newest first; status narrows to PENDING, SENT, FAILED or CANCELLED. */
getKycNoticeQueue(status = ''): Observable<any[]> {
return this.http.get<any[]>(`/kyc/notice-queue${status ? `?status=${status}` : ''}`, {
context: new HttpContext().set(SILENT_HTTP_ERROR, true)
});
}
actOnKycNotice(id: number, command: 'cancel' | 'retry'): Observable<any> {
return this.http.post(`/kyc/notice-queue/${id}?command=${command}`, {});
}
/** What each of these customers has been sent so far: the latest notice, how many, and which channels are done. */
getKycContactSummary(clientIds: number[]): Observable<
{
clientId: number;
count: number;
lastAt: string;
lastChannel: string;
lastStatus: string;
doneChannels: string[];
balance?: number;
hasMobile?: boolean;
hasEmail?: boolean;
mobileMasked?: string | null;
emailMasked?: string | null;
}[]
> {
return this.http.get<
{
clientId: number;
count: number;
lastAt: string;
lastChannel: string;
lastStatus: string;
doneChannels: string[];
hasMobile?: boolean;
hasEmail?: boolean;
mobileMasked?: string | null;
emailMasked?: string | null;
}[]
>('/kyc/contact-audit/clients', {
params: new HttpParams().set('ids', clientIds.join(',')),
context: new HttpContext().set(SILENT_HTTP_ERROR, true)
});
}
/** Notices per customer (counts, outcomes, the latest), most recently contacted first, a page at a time. */
getKycContactAuditCustomers(
filter: {
from?: string;
to?: string;
channel?: string;
status?: string;
search?: string;
real?: boolean;
offset?: number;
limit?: number;
} = {}
): Observable<{ total: number; rows: any[] }> {
return this.http.get<{ total: number; rows: any[] }>('/kyc/contact-audit/customers', {
params: this.auditParams(filter),
context: new HttpContext().set(SILENT_HTTP_ERROR, true)
});
}
/** Notices per day (customers, notices, outcomes), newest day first. */
getKycContactAuditDays(
filter: { from?: string; to?: string; channel?: string; status?: string; search?: string; real?: boolean } = {}
): Observable<any[]> {
return this.http.get<any[]>('/kyc/contact-audit/days', {
params: this.auditParams(filter),
context: new HttpContext().set(SILENT_HTTP_ERROR, true)
});
}
/** Customer notices on record, newest first, a page at a time. */
getKycContactAudit(
filter: {
from?: string;
to?: string;
channel?: string;
status?: string;
search?: string;
real?: boolean;
offset?: number;
limit?: number;
} = {}
): Observable<{ total: number; rows: any[] }> {
return this.http.get<{ total: number; rows: any[] }>('/kyc/contact-audit', {
params: this.auditParams(filter),
context: new HttpContext().set(SILENT_HTTP_ERROR, true)
});
}
private auditParams(filter: Record<string, string | number | boolean | undefined>): HttpParams {
let params = new HttpParams();
Object.entries(filter).forEach(
([
k,
v
]) => {
if (v !== undefined && v !== null && v !== '') {
params = params.set(k, String(v));
}
}
);
return params;
} }
getKycContactLog(clientId: string | number): Observable<any[]> { getKycContactLog(clientId: string | number): Observable<any[]> {
@@ -1092,6 +1268,14 @@ export class ClientsService {
return this.http.get<any[]>('/kyc/exceptions/lapsed'); return this.http.get<any[]>('/kyc/exceptions/lapsed');
} }
/** Clients whose re-KYC falls due within the next `days` days (default 30), soonest first. */
getExpiringKyc(days = 30): Observable<any[]> {
// The caller reports a failure in its own banner, so the global popup is suppressed.
return this.http.get<any[]>(`/kyc/exceptions/expiring?days=${days}`, {
context: new HttpContext().set(SILENT_HTTP_ERROR, true)
});
}
/** /**
* Savings accounts the dormancy job has marked. * Savings accounts the dormancy job has marked.
* *
@@ -38,6 +38,12 @@
} }
</div> </div>
} }
@if (!createdClientId) {
<mifosx-client-identity-check
[legalFormType]="legalFormType"
(identityChange)="onIdentityChange($event)"
></mifosx-client-identity-check>
}
<mifosx-client-general-step <mifosx-client-general-step
[clientTemplate]="clientTemplate" [clientTemplate]="clientTemplate"
[prefillData]="prefillData" [prefillData]="prefillData"
@@ -79,6 +85,7 @@
[verificationDateOfBirth]="clientGeneralStep?.verificationDateOfBirth || null" [verificationDateOfBirth]="clientGeneralStep?.verificationDateOfBirth || null"
[readOnly]="isTabReadOnly(1)" [readOnly]="isTabReadOnly(1)"
[calculatedRisk]="clientGeneralStep?.calculatedRisk" [calculatedRisk]="clientGeneralStep?.calculatedRisk"
[identityPrefill]="identity"
></mifosx-client-kyc-step> ></mifosx-client-kyc-step>
</div> </div>
@@ -23,6 +23,10 @@ import { ClientIndiaAddressStepComponent } from '../client-stepper/client-india-
import { ClientEntityKycStepComponent } from '../client-stepper/client-entity-kyc-step/client-entity-kyc-step.component'; import { ClientEntityKycStepComponent } from '../client-stepper/client-entity-kyc-step/client-entity-kyc-step.component';
import { ClientDatatableStepComponent } from '../client-stepper/client-datatable-step/client-datatable-step.component'; import { ClientDatatableStepComponent } from '../client-stepper/client-datatable-step/client-datatable-step.component';
import { ClientKycStepComponent } from '../client-stepper/client-kyc-step/client-kyc-step.component'; import { ClientKycStepComponent } from '../client-stepper/client-kyc-step/client-kyc-step.component';
import {
ClientIdentityCheckComponent,
ClientIdentityState
} from '../client-stepper/client-identity-check/client-identity-check.component';
import { ClientPreviewStepComponent } from '../client-stepper/client-preview-step/client-preview-step.component'; import { ClientPreviewStepComponent } from '../client-stepper/client-preview-step/client-preview-step.component';
import { ClientFamilyMembersStepComponent } from '../client-stepper/client-family-members-step/client-family-members-step.component'; import { ClientFamilyMembersStepComponent } from '../client-stepper/client-family-members-step/client-family-members-step.component';
@@ -60,6 +64,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
ClientEntityKycStepComponent, ClientEntityKycStepComponent,
ClientDatatableStepComponent, ClientDatatableStepComponent,
ClientKycStepComponent, ClientKycStepComponent,
ClientIdentityCheckComponent,
ClientPreviewStepComponent, ClientPreviewStepComponent,
ClientFamilyMembersStepComponent, ClientFamilyMembersStepComponent,
MatProgressBarModule, MatProgressBarModule,
@@ -79,6 +84,7 @@ export class CreateClientComponent {
@ViewChild('clientIndiaAddress') clientIndiaAddressStep: ClientIndiaAddressStepComponent; @ViewChild('clientIndiaAddress') clientIndiaAddressStep: ClientIndiaAddressStepComponent;
@ViewChild(ClientEntityKycStepComponent) clientEntityKycStep: ClientEntityKycStepComponent; @ViewChild(ClientEntityKycStepComponent) clientEntityKycStep: ClientEntityKycStepComponent;
@ViewChild('clientKyc') clientKycStep: ClientKycStepComponent; @ViewChild('clientKyc') clientKycStep: ClientKycStepComponent;
@ViewChild(ClientIdentityCheckComponent) identityCheck: ClientIdentityCheckComponent;
@ViewChild(ClientFamilyMembersStepComponent) clientFamilyMembersStep: ClientFamilyMembersStepComponent; @ViewChild(ClientFamilyMembersStepComponent) clientFamilyMembersStep: ClientFamilyMembersStepComponent;
@ViewChildren('dtclient') clientDatatables: QueryList<ClientDatatableStepComponent>; @ViewChildren('dtclient') clientDatatables: QueryList<ClientDatatableStepComponent>;
@@ -87,6 +93,17 @@ export class CreateClientComponent {
selectedTabIndex = 0; selectedTabIndex = 0;
createdClientId = ''; createdClientId = '';
savingClient = false; savingClient = false;
/**
* Result of the existing-customer check at the top of the General step. While it says the customer already exists
* (or the identifiers disagree) a new client must not be created; otherwise the identifiers typed there are filled
* into the KYC step.
*/
identity: ClientIdentityState | null = null;
onIdentityChange(state: ClientIdentityState): void {
this.identity = state;
}
/** Pre-fill data passed from "Create as Client" on a manual family member */ /** Pre-fill data passed from "Create as Client" on a manual family member */
prefillData: any = null; prefillData: any = null;
@@ -138,6 +155,8 @@ export class CreateClientComponent {
this.highestTabReached = 0; this.highestTabReached = 0;
this.validationError = ''; this.validationError = '';
this.prefillData = null; this.prefillData = null;
this.identity = null;
this.identityCheck?.reset();
this.clientGeneralStep?.resetForNewClient(); this.clientGeneralStep?.resetForNewClient();
this.clientKycStep?.resetForNewClient(); this.clientKycStep?.resetForNewClient();
this.clientIndiaAddressStep?.resetForNewClient(); this.clientIndiaAddressStep?.resetForNewClient();
@@ -212,6 +231,10 @@ export class CreateClientComponent {
const idx = this.selectedTabIndex; const idx = this.selectedTabIndex;
if (idx === 0) { if (idx === 0) {
// The customer is already on the books (any branch), or the identifiers belong to different customers.
if (!this.createdClientId && (this.identity?.blocking || this.identity?.status === 'checking')) return false;
// A PAN / Aadhaar / GSTIN typed in the wrong format is neither looked up nor carried on, so it must be fixed or cleared.
if (!this.createdClientId && this.identityCheck?.hasInvalidInput) return false;
if (!this.clientGeneralStep || !this.clientGeneralForm) return false; if (!this.clientGeneralStep || !this.clientGeneralForm) return false;
if (this.clientGeneralStep.sanctionsBlocked) return false; if (this.clientGeneralStep.sanctionsBlocked) return false;
// A number the officer rejected on the DIP result must be replaced, not carried forward. // A number the officer rejected on the DIP result must be replaced, not carried forward.
@@ -274,6 +297,17 @@ export class CreateClientComponent {
if (this.savingClient) return 'Saving — please wait…'; if (this.savingClient) return 'Saving — please wait…';
if (this.currentStepValid) return ''; if (this.currentStepValid) return '';
const idx = this.selectedTabIndex; const idx = this.selectedTabIndex;
if (idx === 0 && !this.createdClientId && this.identityCheck?.hasInvalidInput) {
return 'Correct the PAN / Aadhaar / GSTIN format in the Existing customer check, or clear the field.';
}
if (idx === 0 && !this.createdClientId && this.identity?.status === 'checking') {
return 'Checking whether this customer already exists…';
}
if (idx === 0 && !this.createdClientId && this.identity?.blocking) {
return this.identity.status === 'conflict'
? 'The PAN / Aadhaar / GSTIN entered belong to different customers — correct them or ask a manager.'
: 'This customer already exists — a new client is not created for the same person. Open the existing customer instead.';
}
if (idx === 0 && this.clientGeneralStep?.sanctionsBlocked) { if (idx === 0 && this.clientGeneralStep?.sanctionsBlocked) {
const disposition = this.clientGeneralStep.sanctionsDisposition; const disposition = this.clientGeneralStep.sanctionsDisposition;
if (disposition === 'FALSE_POSITIVE') { if (disposition === 'FALSE_POSITIVE') {
@@ -358,6 +392,19 @@ export class CreateClientComponent {
onNext() { onNext() {
// If on General tab and client not yet created — save first // If on General tab and client not yet created — save first
if (this.selectedTabIndex === 0 && !this.createdClientId) { if (this.selectedTabIndex === 0 && !this.createdClientId) {
// Defensive re-check: the button is disabled while this holds, but a second client for the same person is the
// one mistake this screen exists to prevent.
if (this.identityCheck?.hasInvalidInput) {
this.identityCheck.markAllAsTouched();
this.snackBar.open(this.currentStepBlockerMessage, 'Close', { duration: 6000 });
return;
}
if (this.identity?.blocking) {
this.snackBar.open(this.currentStepBlockerMessage || 'This customer already exists.', 'Close', {
duration: 6000
});
return;
}
if (!this.clientGeneralForm?.valid) { if (!this.clientGeneralForm?.valid) {
this.clientGeneralForm?.markAllAsTouched(); this.clientGeneralForm?.markAllAsTouched();
setTimeout(() => { setTimeout(() => {
@@ -0,0 +1,34 @@
/**
* 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/.
*/
/** An existing customer found by PAN / Aadhaar fingerprint / GSTIN. Identifiers are masked by the server. */
export interface ClientIdentityMatch {
clientId: number;
displayName: string;
cifNumber: string;
officeId: number;
officeName: string;
legalFormEnum: number | null;
kycStatus: number;
/** True when the caller's branch can open this client; false when it sits in another branch. */
visibleToCaller: boolean;
panMasked: string | null;
aadhaarMasked: string | null;
gstinMasked: string | null;
matchedBy: Array<'PAN' | 'AADHAAR' | 'GSTIN'>;
}
export interface ClientIdentityLookupResult {
/** Any ONE of PAN / Aadhaar / GSTIN matched an existing customer: the same person or entity. */
matched: boolean;
/** The identifiers point at different customers: bad data or fraud, not a customer to reuse. */
conflict: boolean;
matches: ClientIdentityMatch[];
/** A phone or email already used by another client. Never means "the same customer". */
contactConflicts: { mobileNo: boolean; emailAddress: boolean };
}
@@ -0,0 +1,52 @@
/**
* 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 { createHash } from 'crypto';
import { aadhaarHash, sha256Hex } from './aadhaar-hash.util';
describe('sha256Hex', () => {
it('matches the published SHA-256 test vectors', () => {
expect(sha256Hex('')).toBe('e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855');
expect(sha256Hex('abc')).toBe('ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad');
expect(sha256Hex('abcdbcdecdefdefgefghfghighijhijkijkljklmklmnlmnomnopnopq')).toBe(
'248d6a61d20638b8e5c026930c3e6039a33ce45964ff2167f6ecedd419db06c1'
);
});
it('agrees with Node on 12-digit inputs, including ones that need a second block boundary', () => {
for (const value of [
'000000000000',
'123456789012',
'999999999999',
'0'.repeat(55),
'0'.repeat(56),
'0'.repeat(64)
]) {
expect(sha256Hex(value)).toBe(createHash('sha256').update(value).digest('hex'));
}
});
});
describe('aadhaarHash', () => {
it('hashes a 12-digit number', () => {
expect(aadhaarHash('123456789012')).toBe(createHash('sha256').update('123456789012').digest('hex'));
});
it('ignores the spaces and hyphens people type between the groups', () => {
expect(aadhaarHash('1234 5678 9012')).toBe(aadhaarHash('123456789012'));
expect(aadhaarHash('1234-5678-9012')).toBe(aadhaarHash('123456789012'));
});
it('returns null for anything that is not a full number', () => {
expect(aadhaarHash('')).toBeNull();
expect(aadhaarHash(null)).toBeNull();
expect(aadhaarHash('XXXXXXXX1234')).toBeNull();
expect(aadhaarHash('XXXXXXXX0000')).toBeNull();
expect(aadhaarHash('12345678901')).toBeNull();
});
});
+185
View File
@@ -0,0 +1,185 @@
/**
* 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/.
*/
/**
* The comparable fingerprint of an Aadhaar number: SHA-256 of the 12 digits, as 64 lowercase hex characters.
*
* Only this fingerprint is sent to the server. The KYC create/update calls are recorded in an audit table and a log
* on the server, so the 12-digit number must not be in the request.
*
* A plain, unkeyed SHA-256 of 12 digits can be reversed by trying every number, so this is a lookup key and not
* protection against someone who can read the stored value.
*
* Written out in full instead of using `crypto.subtle` because that API is asynchronous and only exists in secure
* contexts, while the callers (a form-value getter, a blur handler) need the answer synchronously and the app may be
* served over plain HTTP.
*/
const K = [
0x428a2f98,
0x71374491,
0xb5c0fbcf,
0xe9b5dba5,
0x3956c25b,
0x59f111f1,
0x923f82a4,
0xab1c5ed5,
0xd807aa98,
0x12835b01,
0x243185be,
0x550c7dc3,
0x72be5d74,
0x80deb1fe,
0x9bdc06a7,
0xc19bf174,
0xe49b69c1,
0xefbe4786,
0x0fc19dc6,
0x240ca1cc,
0x2de92c6f,
0x4a7484aa,
0x5cb0a9dc,
0x76f988da,
0x983e5152,
0xa831c66d,
0xb00327c8,
0xbf597fc7,
0xc6e00bf3,
0xd5a79147,
0x06ca6351,
0x14292967,
0x27b70a85,
0x2e1b2138,
0x4d2c6dfc,
0x53380d13,
0x650a7354,
0x766a0abb,
0x81c2c92e,
0x92722c85,
0xa2bfe8a1,
0xa81a664b,
0xc24b8b70,
0xc76c51a3,
0xd192e819,
0xd6990624,
0xf40e3585,
0x106aa070,
0x19a4c116,
0x1e376c08,
0x2748774c,
0x34b0bcb5,
0x391c0cb3,
0x4ed8aa4a,
0x5b9cca4f,
0x682e6ff3,
0x748f82ee,
0x78a5636f,
0x84c87814,
0x8cc70208,
0x90befffa,
0xa4506ceb,
0xbef9a3f7,
0xc67178f2
];
function rotr(x: number, n: number): number {
return (x >>> n) | (x << (32 - n));
}
/** SHA-256 of a string (UTF-8 encoded), as lowercase hex. */
export function sha256Hex(text: string): string {
const bytes: number[] = [];
for (const ch of unescape(encodeURIComponent(text))) {
bytes.push(ch.charCodeAt(0));
}
const bitLength = bytes.length * 8;
bytes.push(0x80);
while (bytes.length % 64 !== 56) {
bytes.push(0);
}
// 64-bit big-endian message length; inputs here are tiny so the high word is always 0.
const high = Math.floor(bitLength / 0x100000000);
const low = bitLength >>> 0;
for (const word of [
high,
low
]) {
bytes.push((word >>> 24) & 0xff, (word >>> 16) & 0xff, (word >>> 8) & 0xff, word & 0xff);
}
const h = [
0x6a09e667,
0xbb67ae85,
0x3c6ef372,
0xa54ff53a,
0x510e527f,
0x9b05688c,
0x1f83d9ab,
0x5be0cd19
];
const w = new Array<number>(64);
for (let offset = 0; offset < bytes.length; offset += 64) {
for (let i = 0; i < 16; i++) {
const j = offset + i * 4;
w[i] = (bytes[j] << 24) | (bytes[j + 1] << 16) | (bytes[j + 2] << 8) | bytes[j + 3];
}
for (let i = 16; i < 64; i++) {
const s0 = rotr(w[i - 15], 7) ^ rotr(w[i - 15], 18) ^ (w[i - 15] >>> 3);
const s1 = rotr(w[i - 2], 17) ^ rotr(w[i - 2], 19) ^ (w[i - 2] >>> 10);
w[i] = (w[i - 16] + s0 + w[i - 7] + s1) | 0;
}
let [
a,
b,
c,
d,
e,
f,
g,
hh
] = h;
for (let i = 0; i < 64; i++) {
const S1 = rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25);
const ch = (e & f) ^ (~e & g);
const t1 = (hh + S1 + ch + K[i] + w[i]) | 0;
const S0 = rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22);
const maj = (a & b) ^ (a & c) ^ (b & c);
const t2 = (S0 + maj) | 0;
hh = g;
g = f;
f = e;
e = (d + t1) | 0;
d = c;
c = b;
b = a;
a = (t1 + t2) | 0;
}
h[0] = (h[0] + a) | 0;
h[1] = (h[1] + b) | 0;
h[2] = (h[2] + c) | 0;
h[3] = (h[3] + d) | 0;
h[4] = (h[4] + e) | 0;
h[5] = (h[5] + f) | 0;
h[6] = (h[6] + g) | 0;
h[7] = (h[7] + hh) | 0;
}
return h.map((x) => (x >>> 0).toString(16).padStart(8, '0')).join('');
}
/**
* The fingerprint for a 12-digit Aadhaar, or null when the value is not one (too short, masked, a placeholder).
* Spaces and hyphens people type between the groups are ignored.
*/
export function aadhaarHash(aadhaar: string | null | undefined): string | null {
const digits = (aadhaar ?? '').replace(/[\s-]/g, '');
return /^\d{12}$/.test(digits) ? sha256Hex(digits) : null;
}
+18 -1
View File
@@ -6,7 +6,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. * file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/ */
import { toProperNameCase } from './name-case.util'; import { toPersonNameCase, toProperNameCase } from './name-case.util';
describe('toProperNameCase', () => { describe('toProperNameCase', () => {
it('raises a lower-case first letter on every word', () => { it('raises a lower-case first letter on every word', () => {
@@ -53,3 +53,20 @@ describe('toProperNameCase', () => {
expect(toProperNameCase(undefined)).toBe(''); expect(toProperNameCase(undefined)).toBe('');
}); });
}); });
describe('toPersonNameCase', () => {
it('title-cases every word, lowering mixed or upper case', () => {
expect(toPersonNameCase('keshav SIngh sisodiya')).toBe('Keshav Singh Sisodiya');
expect(toPersonNameCase('KESHAV')).toBe('Keshav');
});
it('keeps hyphen and apostrophe name prefixes', () => {
expect(toPersonNameCase('JEAN-marie')).toBe('Jean-Marie');
expect(toPersonNameCase("D'SOUZA")).toBe("D'Souza");
});
it('returns an empty string for blank or non-string input', () => {
expect(toPersonNameCase(' ')).toBe('');
expect(toPersonNameCase(null)).toBe('');
});
});
+14
View File
@@ -62,3 +62,17 @@ export function toProperNameCase(value: string | null | undefined): string {
} }
return collapsed.split(' ').map(capitalizeWord).join(' '); return collapsed.split(' ').map(capitalizeWord).join(' ');
} }
/**
* Title case for an individual's first, middle and last name: each word's first letter raised,
* the rest lowered, so 'SIngh' and 'singh' both become 'Singh'. This is what the Full Name line on
* the general step has always shown; using it for the stored value too keeps the preview and the
* saved client the same as that line. Entity names stay on {@link toProperNameCase} — their
* spelling is matched against the registered PAN name.
*/
export function toPersonNameCase(value: string | null | undefined): string {
if (typeof value !== 'string') {
return '';
}
return toProperNameCase(value.toLowerCase());
}
+7 -1
View File
@@ -35,6 +35,7 @@ export class CacheInterceptor implements HttpInterceptor {
'/rbireservereturn', '/rbireservereturn',
'/rbireserveconfig', '/rbireserveconfig',
'/tdsconfig', '/tdsconfig',
'/profitappropriationconfig',
'/tds/deposit-interest', '/tds/deposit-interest',
// Declarations and challans are entered on the very screens that read them back. // Declarations and challans are entered on the very screens that read them back.
'/tds/declarations', '/tds/declarations',
@@ -53,7 +54,12 @@ export class CacheInterceptor implements HttpInterceptor {
// deposit may be closed at all - a stale copy would show a released lien as still blocking. // deposit may be closed at all - a stale copy would show a released lien as still blocking.
'/liens', '/liens',
// The RD Dashboard counts late installments as of today; a cached copy would hide a payment just taken. // The RD Dashboard counts late installments as of today; a cached copy would hide a payment just taken.
'/recurringdepositaccounts/dashboard' '/recurringdepositaccounts/dashboard',
// Notes are also written by action screens (approve, close, deposit...), so a cached list would hide them.
'/notes',
// The ALM maturity breakdown counts deposits and loans as of the date asked and reads the bank's
// own bucket edges from the query; a cached copy would show another date's or another setting's figures.
'/almreturn'
]; ];
private isCacheable(url: string): boolean { private isCacheable(url: string): boolean {
@@ -0,0 +1,16 @@
/**
* 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 { HttpContextToken } from '@angular/common/http';
/**
* Per-request opt-out of the top progress bar. Set via `{ context: new HttpContext().set(NO_PROGRESS_BAR, true) }`
* on background calls the user did not ask for (such as the Approvals badge listening for changes), which would
* otherwise keep the bar running or make it flash on a screen that has not changed.
*/
export const NO_PROGRESS_BAR = new HttpContextToken<boolean>(() => false);
@@ -16,6 +16,7 @@ import { finalize } from 'rxjs/operators';
/** Custom Services */ /** Custom Services */
import { ProgressBarService } from './progress-bar.service'; import { ProgressBarService } from './progress-bar.service';
import { NO_PROGRESS_BAR } from './no-progress.token';
/** /**
* Http Request interceptor to start/stop loading the progress bar. * Http Request interceptor to start/stop loading the progress bar.
@@ -29,6 +30,9 @@ export class ProgressInterceptor implements HttpInterceptor {
* and stop when a response or error is received. * and stop when a response or error is received.
*/ */
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (request.context.get(NO_PROGRESS_BAR)) {
return next.handle(request);
}
this.progressBarService.increase(); this.progressBarService.increase();
return next.handle(request).pipe( return next.handle(request).pipe(
finalize(() => { finalize(() => {
+40 -37
View File
@@ -131,6 +131,14 @@
</svg> </svg>
My Closure Requests My Closure Requests
</a> </a>
<a
class="cashier-nav__item cashier-nav__item--sec"
[class.cashier-nav__item--active]="currentUrl.includes('/clerk/voucher-correction')"
[routerLink]="['/clerk/voucher-correction']"
>
<fa-icon icon="undo"></fa-icon>
Voucher Correction
</a>
@if (clerkAccountLoaded) { @if (clerkAccountLoaded) {
<div class="cashier-nav__item-wrap"> <div class="cashier-nav__item-wrap">
<a <a
@@ -256,13 +264,6 @@
> >
<fa-icon icon="exchange"></fa-icon> Cash Exchange <fa-icon icon="exchange"></fa-icon> Cash Exchange
</a> </a>
<a
class="cashier-nav__item"
[routerLink]="['/cashier/exchange-detail']"
routerLinkActive="cashier-nav__item--active"
>
<fa-icon icon="globe"></fa-icon> Exchange Detail
</a>
<a <a
class="cashier-nav__item" class="cashier-nav__item"
[routerLink]="['/cashier/inter-cashier']" [routerLink]="['/cashier/inter-cashier']"
@@ -270,13 +271,6 @@
> >
<fa-icon icon="exchange-alt"></fa-icon> Inter-Cashier <fa-icon icon="exchange-alt"></fa-icon> Inter-Cashier
</a> </a>
<a
class="cashier-nav__item"
[routerLink]="['/cashier/excess-report']"
routerLinkActive="cashier-nav__item--active"
>
<fa-icon icon="exclamation-circle"></fa-icon> Excess Report
</a>
<a <a
class="cashier-nav__item" class="cashier-nav__item"
[routerLink]="['/cashier/cashier-position']" [routerLink]="['/cashier/cashier-position']"
@@ -284,6 +278,13 @@
> >
<fa-icon icon="wallet"></fa-icon> Position <fa-icon icon="wallet"></fa-icon> Position
</a> </a>
<a
class="cashier-nav__item"
[routerLink]="['/cashier/reconciliation']"
routerLinkActive="cashier-nav__item--active"
>
<fa-icon icon="balance-scale"></fa-icon> Reconciliation
</a>
<a <a
class="cashier-nav__item" class="cashier-nav__item"
[routerLink]="['/cashier/cash-history']" [routerLink]="['/cashier/cash-history']"
@@ -294,6 +295,13 @@
<a class="cashier-nav__item" [routerLink]="['/cashier/my-work']" routerLinkActive="cashier-nav__item--active"> <a class="cashier-nav__item" [routerLink]="['/cashier/my-work']" routerLinkActive="cashier-nav__item--active">
<fa-icon icon="user-check"></fa-icon> My Vouchers <fa-icon icon="user-check"></fa-icon> My Vouchers
</a> </a>
<a
class="cashier-nav__item"
[routerLink]="['/cashier/voucher-correction']"
routerLinkActive="cashier-nav__item--active"
>
<fa-icon icon="undo"></fa-icon> Voucher Correction
</a>
<a <a
class="cashier-nav__item" class="cashier-nav__item"
[routerLink]="['/cashier/received-report']" [routerLink]="['/cashier/received-report']"
@@ -308,13 +316,6 @@
> >
<fa-icon icon="list"></fa-icon> Payment <fa-icon icon="list"></fa-icon> Payment
</a> </a>
<a
class="cashier-nav__item"
[routerLink]="['/cashier/closing-report']"
routerLinkActive="cashier-nav__item--active"
>
<fa-icon icon="file-alt"></fa-icon> Closing Report
</a>
</nav> </nav>
} }
} }
@@ -464,6 +465,11 @@
*mifosxHasPermission="'MENU_TASKS'" *mifosxHasPermission="'MENU_TASKS'"
> >
<fa-icon icon="check" class="ni-ico"></fa-icon>Approvals <fa-icon icon="check" class="ni-ico"></fa-icon>Approvals
@if (approvalTotal > 0) {
<span class="ni-badge" title="Requests waiting for approval">{{
approvalTotal > 99 ? '99+' : approvalTotal
}}</span>
}
</a> </a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="cashierMenu" *mifosxHasPermission="'MENU_CASHIER'"> <a class="ni" tabindex="0" [matMenuTriggerFor]="cashierMenu" *mifosxHasPermission="'MENU_CASHIER'">
<fa-icon icon="money-bill" class="ni-ico"></fa-icon>Cashier <fa-icon icon="money-bill" class="ni-ico"></fa-icon>Cashier
@@ -1094,6 +1100,9 @@
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/vault-position']"> <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/vault-position']">
<fa-icon icon="lock" class="menu-item-icon"></fa-icon> Vault Position <fa-icon icon="lock" class="menu-item-icon"></fa-icon> Vault Position
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/branch-position']">
<fa-icon icon="coins" class="menu-item-icon"></fa-icon> Branch Cash Position
</button>
</div> </div>
<div class="deposit-menu-group"> <div class="deposit-menu-group">
<div class="deposit-group-title">Verification &amp; Reports</div> <div class="deposit-group-title">Verification &amp; Reports</div>
@@ -1166,18 +1175,18 @@
<!-- Cash Entries & Exchange --> <!-- Cash Entries & Exchange -->
<div class="deposit-menu-group"> <div class="deposit-menu-group">
<div class="deposit-group-title">Cash &amp; Counter</div> <div class="deposit-group-title">Cash &amp; Counter</div>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-exchange']"> <!-- Cash Exchange, Currency Exchange Detail, Inter-Cashier Transfer and Reconciliation are not
<fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Cash Exchange Entry here: they move or count notes in one cashier's own drawer, so only the cashier who is logged
</button> in does them, from the cashier screen. -->
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/exchange-detail']">
<fa-icon icon="globe" class="menu-item-icon"></fa-icon> Currency Exchange Detail
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/transaction-entry']"> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/transaction-entry']">
<fa-icon icon="keyboard" class="menu-item-icon"></fa-icon> Transaction Entry <fa-icon icon="keyboard" class="menu-item-icon"></fa-icon> Transaction Entry
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/system/denomination-master']"> <button mat-menu-item tabindex="0" [routerLink]="['/system/denomination-master']">
<fa-icon icon="coins" class="menu-item-icon"></fa-icon> Cash Denomination <fa-icon icon="coins" class="menu-item-icon"></fa-icon> Cash Denomination
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/voucher-correction']">
<fa-icon icon="undo" class="menu-item-icon"></fa-icon> Voucher Correction
</button>
</div> </div>
<!-- Transfers & Settlement --> <!-- Transfers & Settlement -->
@@ -1186,9 +1195,6 @@
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-transfer']"> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-transfer']">
<fa-icon icon="random" class="menu-item-icon"></fa-icon> Cash Transfer <fa-icon icon="random" class="menu-item-icon"></fa-icon> Cash Transfer
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/inter-cashier']">
<fa-icon icon="exchange-alt" class="menu-item-icon"></fa-icon> Inter-Cashier Transfer
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-settlement']"> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-settlement']">
<fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Cash Settlement <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Cash Settlement
</button> </button>
@@ -1209,9 +1215,6 @@
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/excess-report']"> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/excess-report']">
<fa-icon icon="exclamation-circle" class="menu-item-icon"></fa-icon> Excess Transaction Report <fa-icon icon="exclamation-circle" class="menu-item-icon"></fa-icon> Excess Transaction Report
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/reconciliation']">
<fa-icon icon="balance-scale" class="menu-item-icon"></fa-icon> Reconciliation
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-history']"> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-history']">
<fa-icon icon="history" class="menu-item-icon"></fa-icon> Cash History <fa-icon icon="history" class="menu-item-icon"></fa-icon> Cash History
</button> </button>
@@ -2038,11 +2041,11 @@
</a> </a>
<a <a
class="gl-link" class="gl-link"
[class.hidden]="!matchesRbiSearch('ALM')" [class.hidden]="!matchesRbiSearch('ALM Average Liabilities and Assets Time Bucket Breakdown')"
(click)="rbiMenuOpen = false; openAlmReportDialog()" (click)="rbiMenuOpen = false; openAlmBucketBreakdownDialog()"
> >
<fa-icon icon="balance-scale" class="gl-icon" style="color: #4f46e5"></fa-icon> ALM (Asset Liability <fa-icon icon="balance-scale" class="gl-icon" style="color: #4f46e5"></fa-icon> ALM (Average Liabilities
Management) and Assets) – Time Bucket Breakdown
</a> </a>
<a class="gl-link" [class.hidden]="!matchesRbiSearch('Balance Sheet')" (click)="rbiMenuOpen = false"> <a class="gl-link" [class.hidden]="!matchesRbiSearch('Balance Sheet')" (click)="rbiMenuOpen = false">
<fa-icon icon="file-alt" class="gl-icon"></fa-icon> Balance Sheet (BR Act & Others) <fa-icon icon="file-alt" class="gl-icon"></fa-icon> Balance Sheet (BR Act & Others)
+53
View File
@@ -244,6 +244,44 @@ $color: #e2e4ec;
} }
} }
/*
* The cashier's bar is meant to be one row at a normal window size: it carries about eleven items, and at
* the usual padding the last one wrapped onto a second row. The items are tightened so they fit, and spread
* across the row. As the window narrows they tighten further, then drop their icons, and only wrap in a very
* narrow window. The clerk's bar (cashier-nav--clerk) has its own dropdowns and is left as it was.
*/
.cashier-nav:not(.cashier-nav--clerk) {
flex-wrap: nowrap;
justify-content: space-between;
gap: 0;
padding: 4px 8px;
.cashier-nav__item {
flex: 0 0 auto;
gap: 4px;
padding: 5px 8px;
font-size: 11.5px;
}
@media (width <= 1240px) {
.cashier-nav__item {
padding: 5px 6px;
font-size: 11px;
}
}
@media (width <= 1120px) {
.cashier-nav__item fa-icon {
display: none;
}
}
@media (width <= 900px) {
flex-wrap: wrap;
justify-content: flex-start;
}
}
.sidenav { .sidenav {
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
@@ -1044,3 +1082,18 @@ $gray-700: #334155;
width: $bar; width: $bar;
} }
} }
// How many requests are waiting under Approvals.
.ni-badge {
min-width: 16px;
height: 16px;
margin-left: 4px;
padding: 0 5px;
border-radius: 999px;
background: #f59e0b;
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
}
+34
View File
@@ -17,6 +17,7 @@ import { TenantMenuAccessService } from '../../directives/has-permission/tenant-
/** rxjs Imports */ /** rxjs Imports */
import { Observable, Subscription } from 'rxjs'; import { Observable, Subscription } from 'rxjs';
import { ApprovalCountsService } from '../../tasks/approval-counts.service';
import { map, filter } from 'rxjs/operators'; import { map, filter } from 'rxjs/operators';
/** Custom Services */ /** Custom Services */
@@ -68,6 +69,11 @@ export class ShellComponent implements OnInit, OnDestroy {
private authService = inject(AuthenticationService); private authService = inject(AuthenticationService);
private clerkUiStateService = inject(ClerkUiStateService); private clerkUiStateService = inject(ClerkUiStateService);
private tenantMenuAccessService = inject(TenantMenuAccessService); private tenantMenuAccessService = inject(TenantMenuAccessService);
private approvalCounts = inject(ApprovalCountsService);
/** Requests waiting across every Approval Center tab this user can see, shown on the Approvals menu. */
approvalTotal = 0;
private approvalTotalSub?: Subscription;
/** Subscription to breakpoint observer for handset. */ /** Subscription to breakpoint observer for handset. */
isHandset$: Observable<boolean> = this.breakpointObserver isHandset$: Observable<boolean> = this.breakpointObserver
@@ -144,6 +150,13 @@ export class ShellComponent implements OnInit, OnDestroy {
* Subscribes to progress bar to update its mode. * Subscribes to progress bar to update its mode.
*/ */
ngOnInit() { ngOnInit() {
// The Approvals badge: counts refresh every minute while the app is open, and again whenever the Approval Center opens.
this.approvalTotalSub = this.approvalCounts.total$.subscribe((total) => {
this.approvalTotal = total;
this.cdr.markForCheck();
});
this.approvalCounts.start();
this.progressBar$ = this.progressBarService.updateProgressBar.subscribe((mode: string) => { this.progressBar$ = this.progressBarService.updateProgressBar.subscribe((mode: string) => {
this.progressBarMode = mode; this.progressBarMode = mode;
this.cdr.detectChanges(); this.cdr.detectChanges();
@@ -364,10 +377,31 @@ export class ShellComponent implements OnInit, OnDestroy {
}); });
} }
/**
* Opens the ALM Time-Bucket Breakdown: which balance-sheet item goes to which bucket of the
* Structural Liquidity Statement. Rules are editable and kept per browser.
*/
async openAlmBucketBreakdownDialog(): Promise<void> {
const { AlmBucketBreakdownDialogComponent } =
await import('../../home/dashboard/alm-bucket-breakdown-dialog/alm-bucket-breakdown-dialog.component');
this.dialog.open(AlmBucketBreakdownDialogComponent, {
width: '94vw',
maxWidth: '1320px',
maxHeight: '92vh',
panelClass: 'crr-slr-dialog-panel',
autoFocus: false,
disableClose: false,
hasBackdrop: true,
backdropClass: 'alm-dlg-backdrop'
});
}
/** /**
* Unsubscribes from progress bar. * Unsubscribes from progress bar.
*/ */
ngOnDestroy() { ngOnDestroy() {
this.approvalTotalSub?.unsubscribe();
this.approvalCounts.stop();
if (this.progressBar$) { if (this.progressBar$) {
this.progressBar$.unsubscribe(); this.progressBar$.unsubscribe();
} }
@@ -838,9 +838,23 @@
<span class="ni-mono">{{ c.clientCif || '—' }}</span> <span class="ni-mono">{{ c.clientCif || '—' }}</span>
</td> </td>
<td class="ni-td ni-td--center"> <td class="ni-td ni-td--center">
<span class="ni-pct-badge" [class.ni-pct-badge--full]="c.sharePercentage === 100"> @if (readOnly) {
{{ c.sharePercentage }}% <span class="ni-pct-badge" [class.ni-pct-badge--full]="c.sharePercentage === 100">
</span> {{ c.sharePercentage }}%
</span>
} @else {
<span class="ni-pct-input">
<input
#pct
type="number"
min="0"
max="100"
[value]="c.sharePercentage"
(change)="setPartnerShare(c, pct.value); pct.value = '' + c.sharePercentage"
aria-label="Ownership percentage"
/>%
</span>
}
</td> </td>
<td class="ni-td ni-td--center"> <td class="ni-td ni-td--center">
<button <button
@@ -465,6 +465,31 @@ $ni-bg: #f9fafb;
color: #374151; color: #374151;
} }
.ni-pct-input {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 12px;
font-weight: 700;
color: $ni-primary;
input {
width: 52px;
padding: 3px 6px;
border: 1px solid #c7d2fe;
border-radius: 6px;
background: #eef2ff;
font: inherit;
color: inherit;
text-align: right;
&:focus {
outline: 2px solid $ni-primary;
outline-offset: 0;
}
}
}
.ni-pct-badge { .ni-pct-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -29,6 +29,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
import { IntroducerSearchComponent } from 'app/shared/introducer-search/introducer-search.component'; import { IntroducerSearchComponent } from 'app/shared/introducer-search/introducer-search.component';
import { AddRelatedClientDialogComponent } from './add-related-client-dialog/add-related-client-dialog.component'; import { AddRelatedClientDialogComponent } from './add-related-client-dialog/add-related-client-dialog.component';
import { AlertService } from 'app/core/alert/alert.service'; import { AlertService } from 'app/core/alert/alert.service';
import { forkJoin, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
/** /**
* Current Account Details Step * Current Account Details Step
@@ -207,6 +209,9 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
this.autoDetectAccountStatus(); this.autoDetectAccountStatus();
} }
} }
if (this.isNonIndividualClient && !this.isEditMode && !this.readOnly) {
this.prefillPartnersFromClientSignatories(client);
}
this.cdr.detectChanges(); this.cdr.detectChanges();
}); });
} }
@@ -622,6 +627,52 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
} }
// ── Non-Individual (existing) helpers ────────────────────────────────── // ── Non-Individual (existing) helpers ──────────────────────────────────
/**
* A new entity account starts with the authorised signatories recorded on the client at creation
* (clientNonPersonDetails.authorizedSignatoryClientIds), so they need not be added again. Ownership is
* not captured at client creation, so it starts at 0 and is entered in the table; Add Partner stays
* available for anyone else.
*/
private prefillPartnersFromClientSignatories(client: any): void {
if (this.relatedClients.length > 0) {
return;
}
const ids: number[] = String(client?.clientNonPersonDetails?.authorizedSignatoryClientIds ?? '')
.split(',')
.map((id) => Number(id.trim()))
.filter((id, i, all) => id > 0 && id !== this.primaryClientId && all.indexOf(id) === i);
if (!ids.length) {
return;
}
// One lookup per signatory for the CIF; a signatory that can no longer be read is skipped, not fatal.
forkJoin(
ids.map((id) => this.clientsService.getClientData(String(id), true).pipe(catchError(() => of(null))))
).subscribe((signatories: any[]) => {
// The user may have added partners by hand while the lookups ran — never overwrite those.
if (this.relatedClients.length > 0) {
return;
}
this.relatedClients = signatories
.filter((s) => !!s?.id)
.map((s) => ({
clientId: s.id,
clientName: s.displayName ?? s.fullname ?? '',
clientCif: s.cifNumber ?? s.cifNo ?? '',
sharePercentage: 0,
isMandatory: false
}));
this.autoSetSignatoryRights();
this.cdr.detectChanges();
});
}
/** Inline ownership edit — clamped so the partners' total never exceeds 100%. */
setPartnerShare(client: any, raw: any): void {
const othersTotal = this.totalSharePercentage - (client.sharePercentage || 0);
const value = Math.round(Number(raw) || 0);
client.sharePercentage = Math.min(Math.max(value, 0), Math.max(0, 100 - othersTotal));
}
openAddRelatedClientDialog(): void { openAddRelatedClientDialog(): void {
const excludedClientIds = [ const excludedClientIds = [
...(this.primaryClientId ? [this.primaryClientId] : []), ...(this.primaryClientId ? [this.primaryClientId] : []),
@@ -135,18 +135,6 @@
<mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon> <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
<span>{{ 'labels.text.View Transaction' | translate }}</span> <span>{{ 'labels.text.View Transaction' | translate }}</span>
</button> </button>
@if (!transaction.reversed) {
<span>
<button
mat-menu-item
*mifosxHasPermission="'ADJUSTTRANSACTION_CURRENTACCOUNT'"
(click)="undoTransaction(transaction, $event)"
>
<mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
<span>{{ 'tooltips.Undo Transaction' | translate }}</span>
</button>
</span>
}
<button <button
mat-menu-item mat-menu-item
class="account-action-button" class="account-action-button"
@@ -40,18 +40,6 @@
</button> </button>
</span> </span>
} }
@if (allowUndo()) {
<span>
<button
mat-raised-button
color="warn"
*mifosxHasPermission="'UNDOTRANSACTION_CURRENTACCOUNT'"
(click)="undoTransaction()"
>
<fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
</button>
</span>
}
</div> </div>
<div class="container"> <div class="container">
@@ -331,12 +331,14 @@
<span class="fdrc-maturity-row__value">{{ matchResult.appliedRate | number: '1.2-2' }}% p.a.</span> <span class="fdrc-maturity-row__value">{{ matchResult.appliedRate | number: '1.2-2' }}% p.a.</span>
</div> </div>
<div class="fdrc-maturity-row fdrc-maturity-row--interest"> <div class="fdrc-maturity-row fdrc-maturity-row--interest">
<span class="fdrc-maturity-row__label">Interest Earned</span> <span class="fdrc-maturity-row__label">{{
isSpecial ? 'Total Interest (paid out monthly)' : 'Interest Earned'
}}</span>
<span class="fdrc-maturity-row__value">₹ {{ matchResult.interestEarned | number: '1.2-2' }}</span> <span class="fdrc-maturity-row__value">₹ {{ matchResult.interestEarned | number: '1.2-2' }}</span>
</div> </div>
@if (isSpecial && matchResult.estimatedMonthlyPayout) { @if (isSpecial && matchResult.estimatedMonthlyPayout) {
<div class="fdrc-maturity-row"> <div class="fdrc-maturity-row">
<span class="fdrc-maturity-row__label">Monthly Payout</span> <span class="fdrc-maturity-row__label">Monthly Payout (approx., by days in the month)</span>
<span class="fdrc-maturity-row__value fdrc-maturity-row__value--highlight"> <span class="fdrc-maturity-row__value fdrc-maturity-row__value--highlight">
₹ {{ matchResult.estimatedMonthlyPayout | number: '1.2-2' }} / month ₹ {{ matchResult.estimatedMonthlyPayout | number: '1.2-2' }} / month
</span> </span>
@@ -351,13 +353,64 @@
} }
</span> </span>
<span class="fdrc-maturity-row__value fdrc-maturity-row__value--big"> <span class="fdrc-maturity-row__value fdrc-maturity-row__value--big">
₹ {{ (isSpecial ? principalAmount : matchResult.maturityAmount) | number: '1.2-2' }} ₹ {{ matchResult.maturityAmount | number: '1.2-2' }}
</span> </span>
</div> </div>
@if (isSpecial && specialPreview) {
<div class="fdrc-maturity-row">
<span class="fdrc-maturity-row__label">Maturity Date</span>
<span class="fdrc-maturity-row__value">{{
specialPreview.maturityDate | date: 'dd MMM yyyy'
}}</span>
</div>
<div class="fdrc-maturity-row">
<span class="fdrc-maturity-row__label">Monthly payouts</span>
<span class="fdrc-maturity-row__value">{{ specialPreview.numberOfPayouts }}</span>
</div>
<div class="fdrc-maturity-row">
<span class="fdrc-maturity-row__label">Principal + all payouts</span>
<span class="fdrc-maturity-row__value"
>₹ {{ specialPreview.totalValueAtMaturity | number: '1.2-2' }}</span
>
</div>
}
</div> </div>
</div> </div>
@if (isSpecial && specialPreview) {
<div class="fdrc-schedule">
<div class="fdrc-schedule__head">
<span><i class="fas fa-calendar-alt"></i> Monthly Interest Payout Schedule</span>
<button
mat-stroked-button
type="button"
class="fdrc-schedule__toggle"
(click)="openSpecialSchedule()"
>
View payout schedule ({{ specialPreview.numberOfPayouts }})
</button>
</div>
<div class="fdrc-schedule__note">
From {{ specialPreview.startDate | date: 'dd MMM yyyy' }} (the day the account is opened) to
{{ specialPreview.maturityDate | date: 'dd MMM yyyy' }}, worked out by the account engine from the
product.
</div>
</div>
}
} }
@if (!matchResult.maturityAmount) { @if (specialPreviewLoading) {
<div class="fdrc-payout-hint">
<i class="fas fa-spinner fa-spin"></i>
Working out the maturity from the product…
</div>
}
@if (specialPreviewError) {
<div class="fdrc-payout-hint fdrc-payout-hint--error">
<i class="fas fa-exclamation-triangle"></i>
{{ specialPreviewError }}
</div>
}
@if (!matchResult.maturityAmount && !specialPreviewLoading && !specialPreviewError) {
<div class="fdrc-payout-hint"> <div class="fdrc-payout-hint">
<i class="fas fa-lightbulb"></i> <i class="fas fa-lightbulb"></i>
Enter a deposit amount above to see the maturity calculation. Enter a deposit amount above to see the maturity calculation.
@@ -1229,3 +1229,72 @@ $red-light: #fee2e2;
font-weight: 700; font-weight: 700;
} }
} }
/* FD Special: payout schedule from the backend preview */
.fdrc-schedule {
margin-top: 12px;
border: 1px solid #bbf7d0;
border-radius: 10px;
background: #fff;
overflow: hidden;
&__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 14px;
background: #f0fdf4;
font-size: 12px;
font-weight: 700;
color: #166534;
text-transform: uppercase;
letter-spacing: 0.05em;
}
&__note {
padding: 6px 14px;
font-size: 12px;
color: #475569;
}
&__wrap {
max-height: 360px;
overflow: auto;
}
&__table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
th,
td {
padding: 6px 14px;
border-top: 1px solid #e2e8f0;
text-align: left;
}
th {
position: sticky;
top: 0;
background: #f8fafc;
font-size: 11px;
text-transform: uppercase;
color: #64748b;
}
.num {
text-align: right;
}
tfoot td {
font-weight: 700;
background: #f0fdf4;
}
}
}
.fdrc-payout-hint--error {
color: #b91c1c;
}
@@ -36,12 +36,39 @@ import { FormsModule } from '@angular/forms';
import { DateFormatPipe } from '../../../../pipes/date-format.pipe'; import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
import { FixedDepositsService } from '../../fixed-deposits.service'; import { FixedDepositsService } from '../../fixed-deposits.service';
import { MatDialog } from '@angular/material/dialog';
import { InterestScheduleDialogComponent } from '../../fixed-deposit-account-view/custom-dialogs/interest-schedule-dialog/interest-schedule-dialog.component';
import { ClientsService } from 'app/clients/clients.service'; import { ClientsService } from 'app/clients/clients.service';
import { SettingsService } from 'app/settings/settings.service'; import { SettingsService } from 'app/settings/settings.service';
import { SENIOR_CITIZEN_AGE_THRESHOLD, deriveSeniorCitizenStatus } from 'app/clients/shared/client-age.util'; import { SENIOR_CITIZEN_AGE_THRESHOLD, deriveSeniorCitizenStatus } from 'app/clients/shared/client-age.util';
export type FdPeriodUnit = 'Days' | 'Months' | 'Years'; export type FdPeriodUnit = 'Days' | 'Months' | 'Years';
/**
* yyyy-MM-dd of the calendar day as the user sees it. toISOString() gives the UTC day instead, which in India is the day
* before for any date at local midnight - so a deposit opened on the 21st was quoted from the 20th.
*/
function localIsoDate(d: Date): string {
const pad = (n: number) => String(n).padStart(2, '0');
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
}
/** FD quote from POST fixeddepositaccounts/account-preview (worked out by the account engine, every FD type). */
export interface SpecialPayoutPreview {
fdType: string;
depositAmount: number;
annualInterestRate: number;
seniorCitizen: boolean;
startDate: string;
maturityDate: string;
numberOfPayouts: number;
fullMonthPayout: number;
totalInterest: number;
maturityAmount: number;
totalValueAtMaturity: number;
periods: { period: number; fromDate: string; toDate: string; days: number; interestAmount: number }[];
}
export interface SlabMatchResult { export interface SlabMatchResult {
slab: any; slab: any;
slabIndex: number; slabIndex: number;
@@ -87,6 +114,7 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan
private clientsService = inject(ClientsService); private clientsService = inject(ClientsService);
private settingsService = inject(SettingsService); private settingsService = inject(SettingsService);
private cdr = inject(ChangeDetectorRef); private cdr = inject(ChangeDetectorRef);
private dialog = inject(MatDialog);
@Input() fixedDepositsAccountTemplate: any; @Input() fixedDepositsAccountTemplate: any;
@Input() fixedDepositsAccountProductTemplate: any; @Input() fixedDepositsAccountProductTemplate: any;
@@ -163,6 +191,10 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan
} }
matchResult: SlabMatchResult | null = null; matchResult: SlabMatchResult | null = null;
/** FD Special only: the backend's quote and payout schedule for the tenure and amount entered. */
specialPreview: SpecialPayoutPreview | null = null;
specialPreviewLoading = false;
specialPreviewError: string | null = null;
validationWarning: string | null = null; validationWarning: string | null = null;
// ── FD Type labels ────────────────────────────────────────────────────── // ── FD Type labels ──────────────────────────────────────────────────────
@@ -270,6 +302,8 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan
calculateRate() { calculateRate() {
this.validationWarning = null; this.validationWarning = null;
this.matchResult = null; this.matchResult = null;
this.specialPreview = null;
this.specialPreviewError = null;
if (!this.tenureValue || this.tenureValue <= 0) { if (!this.tenureValue || this.tenureValue <= 0) {
this.validationWarning = 'Please enter a valid tenure value greater than 0.'; this.validationWarning = 'Please enter a valid tenure value greater than 0.';
@@ -334,30 +368,6 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan
const frequencyId = this.resolveFrequencyId(this.tenurePeriodUnit); const frequencyId = this.resolveFrequencyId(this.tenurePeriodUnit);
if (this.principalAmount && this.principalAmount > 0) { if (this.principalAmount && this.principalAmount > 0) {
// Years and Months convert exactly; a Days tenure is sent as days and never converted.
let tenureInMonths: number | undefined;
let tenureInDays: number | undefined;
if (this.tenurePeriodUnit === 'Years') {
tenureInMonths = this.tenureValue * 12;
} else if (this.tenurePeriodUnit === 'Months') {
tenureInMonths = this.tenureValue;
} else {
// Sent as days, whatever the count. Converting to whole months silently dropped the
// remainder — a 200-day deposit quoted as six months lost 20 days of interest, and the
// screen still said "200 Days" above the figure. The backend takes days directly and
// works the calendar out itself.
tenureInDays = enteredDays;
}
// Map compounding period type id → months (0=Daily, 1=Daily, 4=Monthly, 5=Quarterly, 6=SemiAnnual, 7=Annual)
const compMap: Record<number, number> = { 1: 0, 4: 1, 5: 3, 6: 6, 7: 12 };
const compId = this.fixedDepositsAccountProductTemplate?.interestCompoundingPeriodType?.id ?? 4;
const compMonths = compMap[compId] ?? 1;
// Map posting period type id → months
const postId = this.fixedDepositsAccountProductTemplate?.interestPostingPeriodType?.id ?? 4;
const postMonths = compMap[postId] ?? 1;
const emitResult = () => { const emitResult = () => {
if (frequencyId !== null) { if (frequencyId !== null) {
this.tenureSelected.emit({ this.tenureSelected.emit({
@@ -375,7 +385,7 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan
// Get submittedOnDate — Input takes priority over template data // Get submittedOnDate — Input takes priority over template data
let submittedOnDateStr: string; let submittedOnDateStr: string;
if (this.submittedOnDate) { if (this.submittedOnDate) {
submittedOnDateStr = this.submittedOnDate.toISOString().split('T')[0]; submittedOnDateStr = localIsoDate(this.submittedOnDate);
} else { } else {
const submittedOnDateRaw = const submittedOnDateRaw =
this.fixedDepositsAccountTemplate?.timeline?.submittedOnDate ?? this.fixedDepositsAccountTemplate?.timeline?.submittedOnDate ??
@@ -384,63 +394,18 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan
const d = Array.isArray(submittedOnDateRaw) const d = Array.isArray(submittedOnDateRaw)
? new Date(submittedOnDateRaw[0], submittedOnDateRaw[1] - 1, submittedOnDateRaw[2]) ? new Date(submittedOnDateRaw[0], submittedOnDateRaw[1] - 1, submittedOnDateRaw[2])
: new Date(submittedOnDateRaw); : new Date(submittedOnDateRaw);
submittedOnDateStr = !isNaN(d.getTime()) submittedOnDateStr = !isNaN(d.getTime()) ? localIsoDate(d) : localIsoDate(new Date());
? d.toISOString().split('T')[0]
: new Date().toISOString().split('T')[0];
} else { } else {
submittedOnDateStr = new Date().toISOString().split('T')[0]; submittedOnDateStr = localIsoDate(new Date());
} }
} }
const daysInYearVal = // The whole quote - rate, maturity date, maturity amount and, for FD Special, the month-by-month payout
this.fixedDepositsAccountProductTemplate?.interestCalculationDaysInYearType?.id === 360 ? 360 : 365; // schedule - comes from the backend, which builds the would-be account from the product exactly as Submit does
// (its posting periods, compounding, days in year, rate card, senior-citizen rate) and runs the account's own
// Always use backend API for accurate calculation (including daily compounding with 0) // interest engine. Nothing is worked out here: on an error the quote is simply not shown, never estimated.
this.fixedDepositsService if (frequencyId !== null) {
.calculateFixedDepositInterest({ this.loadAccountPreview(result, rate, submittedOnDateStr, frequencyId, emitResult);
principalAmount: this.principalAmount, }
annualInterestRate: rate,
tenureInMonths,
tenureInDays,
interestCompoundingPeriodInMonths: compMonths, // 0 = daily, now supported by backend
interestPostingPeriodInMonths: postMonths,
submittedOnDate: submittedOnDateStr,
daysInYear: daysInYearVal
})
.subscribe({
next: (apiResult: any) => {
result.maturityAmount = apiResult.maturityAmount;
result.interestEarned =
apiResult.totalInterest ?? Math.round((apiResult.maturityAmount - this.principalAmount) * 100) / 100;
this.matchResult = { ...result };
emitResult();
},
error: () => {
// Fallback if API fails: frontend formula
const r = rate / 100;
if (compMonths === 0) {
// Daily compounding fallback
result.maturityAmount =
Math.round(this.principalAmount * Math.pow(1 + r / daysInYearVal, enteredDays) * 100) / 100;
} else {
const n = 12 / compMonths;
const effectiveMonths = tenureInMonths ?? enteredDays / 30;
const rPerCompounding = rate / (n * 100);
// Whole compounding periods, then simple interest on the days left over. Flooring the
// periods and stopping there dropped the remainder entirely: a 200-day deposit
// compounding monthly quoted only six months of interest and lost the other twenty
// days, which is the depositor's money.
const wholePeriods = Math.floor(effectiveMonths / compMonths);
const compounded = this.principalAmount * Math.pow(1 + rPerCompounding, wholePeriods);
const leftoverDays = enteredDays - wholePeriods * compMonths * 30;
const leftoverInterest =
leftoverDays > 0 ? (compounded * rate * leftoverDays) / (100 * daysInYearVal) : 0;
result.maturityAmount = Math.round((compounded + leftoverInterest) * 100) / 100;
}
result.interestEarned = Math.round((result.maturityAmount - this.principalAmount) * 100) / 100;
this.matchResult = { ...result };
emitResult();
}
});
} else { } else {
this.matchResult = result; this.matchResult = result;
if (frequencyId !== null) { if (frequencyId !== null) {
@@ -457,6 +422,96 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan
} }
} }
/** The backend's payout schedule in the same popup the account itself uses, in its quote (preview) mode. */
openSpecialSchedule(): void {
if (!this.specialPreview) return;
this.dialog.open(InterestScheduleDialogComponent, {
width: '760px',
data: {
preview: true,
currencyCode: this.fixedDepositsAccountProductTemplate?.currency?.code ?? 'INR',
note:
'Worked out by the account engine from the product, starting ' +
this.specialPreview.startDate +
' (the day the account is opened) and ending the day before maturity on ' +
this.specialPreview.maturityDate +
'. The first and last periods are part-months; each pays for the days it covers.',
schedule: this.specialPreview.periods.map((p) => ({
fromDate: p.fromDate,
toDate: p.toDate,
days: p.days,
interestAmount: Number(p.interestAmount),
paid: false
}))
}
});
}
/**
* Asks the backend for the quote (POST fixeddepositaccounts/account-preview) with the same terms Submit sends: the
* product's own interest terms, and the senior-citizen rate the same way Submit overrides it. The rate, maturity
* amount and interest shown are the backend's, so they match the account once it is created.
*/
private loadAccountPreview(
result: SlabMatchResult,
rate: number,
submittedOnDateStr: string,
frequencyId: number,
emitResult: () => void
): void {
const pt = this.fixedDepositsAccountProductTemplate ?? {};
const body: any = {
clientId: pt.clientId ?? this.fixedDepositsAccountTemplate?.clientId,
productId: pt.depositProductId ?? pt.productId ?? this.fixedDepositsAccountTemplate?.productId,
submittedOnDate: submittedOnDateStr,
dateFormat: 'yyyy-MM-dd',
locale: 'en',
depositAmount: this.principalAmount,
depositPeriod: this.tenureValue,
depositPeriodFrequencyId: frequencyId
};
if (pt.nominalAnnualInterestRate != null) body.nominalAnnualInterestRate = pt.nominalAnnualInterestRate;
if (pt.interestCompoundingPeriodType?.id != null)
body.interestCompoundingPeriodType = pt.interestCompoundingPeriodType.id;
if (pt.interestPostingPeriodType?.id != null) body.interestPostingPeriodType = pt.interestPostingPeriodType.id;
if (pt.interestCalculationType?.id != null) body.interestCalculationType = pt.interestCalculationType.id;
if (pt.interestCalculationDaysInYearType?.id != null)
body.interestCalculationDaysInYearType = pt.interestCalculationDaysInYearType.id;
if (this.isSeniorCitizen && rate > 0) {
body.isSeniorCitizen = true;
body.seniorCitizenInterestRate = rate;
body.nominalAnnualInterestRate = rate;
}
this.specialPreview = null;
this.specialPreviewError = null;
this.specialPreviewLoading = true;
this.fixedDepositsService.accountPreview(body).subscribe({
next: (preview: SpecialPayoutPreview) => {
this.specialPreviewLoading = false;
this.specialPreview = preview;
result.appliedRate = Number(preview.annualInterestRate);
result.interestEarned = Number(preview.totalInterest);
result.estimatedMonthlyPayout = preview.fullMonthPayout != null ? Number(preview.fullMonthPayout) : undefined;
result.maturityAmount = Number(preview.maturityAmount);
this.matchResult = { ...result };
emitResult();
this.cdr.markForCheck();
},
error: (e: any) => {
this.specialPreviewLoading = false;
this.specialPreviewError =
e?.error?.errors?.[0]?.defaultUserMessage ||
e?.error?.defaultUserMessage ||
'Could not work out the maturity. Check the deposit details and try again.';
result.maturityAmount = undefined;
result.interestEarned = undefined;
this.matchResult = { ...result };
this.cdr.markForCheck();
}
});
}
private resolveFrequencyId(unit: FdPeriodUnit): number | null { private resolveFrequencyId(unit: FdPeriodUnit): number | null {
const options: any[] = this.fixedDepositsAccountProductTemplate?.periodFrequencyTypeOptions ?? []; const options: any[] = this.fixedDepositsAccountProductTemplate?.periodFrequencyTypeOptions ?? [];
const unitLower = unit.toLowerCase(); const unitLower = unit.toLowerCase();
@@ -471,12 +526,16 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan
this.tenureValue = null; this.tenureValue = null;
this.principalAmount = null; this.principalAmount = null;
this.matchResult = null; this.matchResult = null;
this.specialPreview = null;
this.specialPreviewError = null;
this.validationWarning = null; this.validationWarning = null;
this.tenurePeriodUnit = this.allowedPeriodUnits[0]; this.tenurePeriodUnit = this.allowedPeriodUnits[0];
} }
onPeriodUnitChange() { onPeriodUnitChange() {
this.matchResult = null; this.matchResult = null;
this.specialPreview = null;
this.specialPreviewError = null;
this.validationWarning = null; this.validationWarning = null;
} }
@@ -524,6 +583,8 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan
this.calculateRate(); this.calculateRate();
} else { } else {
this.matchResult = null; this.matchResult = null;
this.specialPreview = null;
this.specialPreviewError = null;
} }
} }
@@ -326,7 +326,7 @@
<div class="preview-dorm-step__body"> <div class="preview-dorm-step__body">
<span class="preview-dorm-step__label">Inactive</span> <span class="preview-dorm-step__label">Inactive</span>
<span class="preview-dorm-step__days"> <span class="preview-dorm-step__days">
@if (fixedDepositsAccountProductTemplate?.daysToInactive != null) { @if ((fixedDepositsAccountProductTemplate?.daysToInactive ?? null) !== null) {
After {{ fixedDepositsAccountProductTemplate.daysToInactive }} days of no transaction After {{ fixedDepositsAccountProductTemplate.daysToInactive }} days of no transaction
} @else { } @else {
Not configured Not configured
@@ -340,7 +340,7 @@
<div class="preview-dorm-step__body"> <div class="preview-dorm-step__body">
<span class="preview-dorm-step__label">Dormant</span> <span class="preview-dorm-step__label">Dormant</span>
<span class="preview-dorm-step__days"> <span class="preview-dorm-step__days">
@if (fixedDepositsAccountProductTemplate?.daysToDormancy != null) { @if ((fixedDepositsAccountProductTemplate?.daysToDormancy ?? null) !== null) {
{{ fixedDepositsAccountProductTemplate.daysToDormancy }} days after inactive {{ fixedDepositsAccountProductTemplate.daysToDormancy }} days after inactive
} @else { } @else {
Not configured Not configured
@@ -354,7 +354,7 @@
<div class="preview-dorm-step__body"> <div class="preview-dorm-step__body">
<span class="preview-dorm-step__label">Escheat</span> <span class="preview-dorm-step__label">Escheat</span>
<span class="preview-dorm-step__days"> <span class="preview-dorm-step__days">
@if (fixedDepositsAccountProductTemplate?.daysToEscheat != null) { @if ((fixedDepositsAccountProductTemplate?.daysToEscheat ?? null) !== null) {
{{ fixedDepositsAccountProductTemplate.daysToEscheat }} days after dormant {{ fixedDepositsAccountProductTemplate.daysToEscheat }} days after dormant
} @else { } @else {
Not configured Not configured
@@ -458,13 +458,15 @@
<span class="preview-value">{{ maturitySummary.tenureLabel }}</span> <span class="preview-value">{{ maturitySummary.tenureLabel }}</span>
</div> </div>
<div class="preview-field"> <div class="preview-field">
<span class="preview-label">Estimated Interest Earned</span> <span class="preview-label">{{
isSpecial ? 'Total Interest (paid out monthly)' : 'Estimated Interest Earned'
}}</span>
<span class="preview-value" style="color: var(--theme-success, #28a745); font-weight: 500"> <span class="preview-value" style="color: var(--theme-success, #28a745); font-weight: 500">
+ {{ maturitySummary.totalInterest | formatNumber }} {{ currencyName }} + {{ maturitySummary.totalInterest | formatNumber }} {{ currencyName }}
</span> </span>
</div> </div>
<div class="preview-field" style="grid-column: span 2"> <div class="preview-field" style="grid-column: span 2">
<span class="preview-label">Projected Maturity Amount</span> <span class="preview-label">{{ isSpecial ? 'Principal at Maturity' : 'Projected Maturity Amount' }}</span>
<span class="preview-value preview-mono" style="font-weight: 600; font-size: 1.25rem"> <span class="preview-value preview-mono" style="font-weight: 600; font-size: 1.25rem">
{{ maturitySummary.maturityAmount | formatNumber }} {{ currencyName }} {{ maturitySummary.maturityAmount | formatNumber }} {{ currencyName }}
</span> </span>
@@ -145,6 +145,11 @@ export class FixedDepositAccountPreviewStepComponent implements OnChanges {
SPECIAL: 'FD Special (Monthly Interest Payout)' SPECIAL: 'FD Special (Monthly Interest Payout)'
}; };
/** FD Special pays its interest out monthly; the principal alone comes back at maturity. */
get isSpecial(): boolean {
return this.fixedDepositsAccountProductTemplate?.fdType === 'SPECIAL';
}
getFdTypeLabel(fdType: string): string { getFdTypeLabel(fdType: string): string {
return this.fdTypeLabels[fdType] || fdType; return this.fdTypeLabels[fdType] || fdType;
} }
@@ -11,15 +11,25 @@
<span class="isd-header__icon"><fa-icon icon="calendar-alt"></fa-icon></span> <span class="isd-header__icon"><fa-icon icon="calendar-alt"></fa-icon></span>
<span class="isd-header__text"> <span class="isd-header__text">
<span class="isd-header__title">{{ 'labels.heading.Monthly Interest Payout Schedule' | translate }}</span> <span class="isd-header__title">{{ 'labels.heading.Monthly Interest Payout Schedule' | translate }}</span>
<span class="isd-header__sub">{{ paidCount }} of {{ schedule.length }} periods paid so far</span> <span class="isd-header__sub">
@if (isPreview) {
{{ schedule.length }} monthly payouts
} @else {
{{ paidCount }} of {{ schedule.length }} periods paid so far
}
</span>
</span> </span>
</h2> </h2>
<div mat-dialog-content class="isd-content"> <div mat-dialog-content class="isd-content">
<p class="isd-note"> <p class="isd-note">
<fa-icon icon="info-circle" class="m-r-5"></fa-icon> <fa-icon icon="info-circle" class="m-r-5"></fa-icon>
Computed by the actual interest engine for this account's full term -- the exact amount posted each month can vary @if (data.note) {
slightly with the number of days in that month. {{ data.note }}
} @else {
Computed by the actual interest engine for this account's full term -- the exact amount posted each month can
vary slightly with the number of days in that month.
}
</p> </p>
<div class="isd-scroll"> <div class="isd-scroll">
@@ -28,8 +38,13 @@
<tr> <tr>
<th>{{ 'labels.inputs.From Date' | translate }}</th> <th>{{ 'labels.inputs.From Date' | translate }}</th>
<th>{{ 'labels.inputs.To Date' | translate }}</th> <th>{{ 'labels.inputs.To Date' | translate }}</th>
@if (isPreview) {
<th class="isd-table__amount-col">Days</th>
}
<th class="isd-table__amount-col">{{ 'labels.inputs.Interest Amount' | translate }}</th> <th class="isd-table__amount-col">{{ 'labels.inputs.Interest Amount' | translate }}</th>
<th class="isd-table__status-col">{{ 'labels.inputs.Status' | translate }}</th> @if (!isPreview) {
<th class="isd-table__status-col">{{ 'labels.inputs.Status' | translate }}</th>
}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -37,28 +52,35 @@
<tr [class.isd-table__row--paid]="period.paid"> <tr [class.isd-table__row--paid]="period.paid">
<td>{{ period.fromDate | dateFormat }}</td> <td>{{ period.fromDate | dateFormat }}</td>
<td>{{ period.toDate | dateFormat }}</td> <td>{{ period.toDate | dateFormat }}</td>
@if (isPreview) {
<td class="isd-table__amount-col">{{ period.days }}</td>
}
<td class="isd-table__amount-col"> <td class="isd-table__amount-col">
{{ period.interestAmount | currency: currencyCode : 'symbol-narrow' : '1.2-2' }} {{ period.interestAmount | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
</td> </td>
<td class="isd-table__status-col"> @if (!isPreview) {
@if (period.paid) { <td class="isd-table__status-col">
<span class="isd-badge isd-badge--paid"> @if (period.paid) {
<fa-icon icon="check-circle" class="m-r-5"></fa-icon>Paid <span class="isd-badge isd-badge--paid">
</span> <fa-icon icon="check-circle" class="m-r-5"></fa-icon>Paid
} @else { </span>
<span class="isd-badge isd-badge--pending">Pending</span> } @else {
} <span class="isd-badge isd-badge--pending">Pending</span>
</td> }
</td>
}
</tr> </tr>
} }
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="2">{{ 'labels.inputs.Total Interest Payable' | translate }}</td> <td [attr.colspan]="isPreview ? 3 : 2">{{ 'labels.inputs.Total Interest Payable' | translate }}</td>
<td class="isd-table__amount-col"> <td class="isd-table__amount-col">
{{ totalInterest | currency: currencyCode : 'symbol-narrow' : '1.2-2' }} {{ totalInterest | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
</td> </td>
<td></td> @if (!isPreview) {
<td></td>
}
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
@@ -26,6 +26,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
* a 24+ month term makes for a long table that would otherwise push every other card on the tab down * a 24+ month term makes for a long table that would otherwise push every other card on the tab down
* the page. Each row also shows whether that period's interest has actually posted yet, not just what * the page. Each row also shows whether that period's interest has actually posted yet, not just what
* the engine projects it to be. * the engine projects it to be.
*
* Also opened from the account-opening screen with `preview: true`: the backend's quote for an FD Special
* not opened yet, so there is no paid / pending status, and each period shows its number of days.
*/ */
@Component({ @Component({
selector: 'mifosx-interest-schedule-dialog', selector: 'mifosx-interest-schedule-dialog',
@@ -46,14 +49,22 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
export class InterestScheduleDialogComponent { export class InterestScheduleDialogComponent {
dialogRef = inject<MatDialogRef<InterestScheduleDialogComponent>>(MatDialogRef); dialogRef = inject<MatDialogRef<InterestScheduleDialogComponent>>(MatDialogRef);
data: { data: {
schedule: Array<{ fromDate: any; toDate: any; interestAmount: number; paid: boolean }>; schedule: Array<{ fromDate: any; toDate: any; interestAmount: number; paid: boolean; days?: number }>;
currencyCode: string; currencyCode: string;
/** Account-opening quote: no paid / pending status. */
preview?: boolean;
/** Shown above the table instead of the account note. */
note?: string;
} = inject(MAT_DIALOG_DATA); } = inject(MAT_DIALOG_DATA);
get schedule(): Array<{ fromDate: any; toDate: any; interestAmount: number; paid: boolean }> { get schedule(): Array<{ fromDate: any; toDate: any; interestAmount: number; paid: boolean; days?: number }> {
return this.data.schedule ?? []; return this.data.schedule ?? [];
} }
get isPreview(): boolean {
return !!this.data.preview;
}
get currencyCode(): string { get currencyCode(): string {
return this.data.currencyCode; return this.data.currencyCode;
} }
@@ -130,12 +130,6 @@
<mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon> <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
<span>{{ 'labels.text.View Transaction' | translate }}</span> <span>{{ 'labels.text.View Transaction' | translate }}</span>
</button> </button>
@if (!isFirstTransaction(idx)) {
<button mat-menu-item (click)="undoTransaction(transaction)">
<mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
<span>{{ 'tooltips.Undo Transaction' | translate }}</span>
</button>
}
<button <button
mat-menu-item mat-menu-item
(click)="routeEdit($event)" (click)="routeEdit($event)"
@@ -6,20 +6,7 @@
file, You can obtain one at http://mozilla.org/MPL/2.0/. file, You can obtain one at http://mozilla.org/MPL/2.0/.
--> -->
<div class="container m-b-20 align-end-center gap-2percent"> <div class="container m-b-20 align-end-center gap-2percent"></div>
@if (allowUndo()) {
<span>
<button
mat-raised-button
color="warn"
*mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
(click)="undoTransaction()"
>
<fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
</button>
</span>
}
</div>
<div class="container"> <div class="container">
<mat-card> <mat-card>
<mat-card-content> <mat-card-content>
@@ -154,6 +154,16 @@ export class FixedDepositsService {
return this.http.get(`/fixeddepositaccounts/calculate-fd-interest`, { params: httpParams }); return this.http.get(`/fixeddepositaccounts/calculate-fd-interest`, { params: httpParams });
} }
/**
* FD quote while opening the account, for every FD type: the same body as create (clientId, productId,
* submittedOnDate, depositAmount, depositPeriod, depositPeriodFrequencyId, interest terms, senior citizen ...). The
* backend builds the would-be account from the product, without saving it, and returns the applied rate, maturity
* date and amount Submit would store, and the interest periods (FD Special: the monthly payout schedule).
*/
accountPreview(body: any): Observable<any> {
return this.http.post(`/fixeddepositaccounts/account-preview`, body);
}
/** /**
* FD Dashboard's "Renew" action on a matured FD whose product has a renewal grace period * FD Dashboard's "Renew" action on a matured FD whose product has a renewal grace period
* configured: backdated to the original maturity date within the grace window, or from today * configured: backdated to the original maturity date within the grace window, or from today
@@ -110,8 +110,8 @@ export class CreateRecurringDepositsAccountComponent {
*/ */
setTemplate($event: any) { setTemplate($event: any) {
this.recurringDepositsAccountProductTemplate = $event; this.recurringDepositsAccountProductTemplate = $event;
this.productsService.getFdBaseInterestRates().subscribe({ this.productsService.getRdBaseInterestRates().subscribe({
next: (rates: any[]) => (this.cbsBaseRates = rates || []), next: (rates: any) => (this.cbsBaseRates = Array.isArray(rates) ? rates : rates ? [rates] : []),
error: () => (this.cbsBaseRates = []) error: () => (this.cbsBaseRates = [])
}); });
} }
@@ -198,7 +198,8 @@ export class CreateRecurringDepositsAccountComponent {
if (this.recurringDepositsAccountProductTemplate?.introducerRequired && !detailsStep?.introducerId) { if (this.recurringDepositsAccountProductTemplate?.introducerRequired && !detailsStep?.introducerId) {
this.alertService.alert({ this.alertService.alert({
type: 'Error', type: 'Error',
message: 'This product requires an introducer. Please choose an existing customer as introducer before submitting.' message:
'This product requires an introducer. Please choose an existing customer as introducer before submitting.'
}); });
return; return;
} }
@@ -144,8 +144,8 @@ export class EditRecurringDepositAccountComponent {
setTemplate($event: any) { setTemplate($event: any) {
this.recurringDepositsAccountProductTemplate = $event; this.recurringDepositsAccountProductTemplate = $event;
this.productsService.getFdBaseInterestRates().subscribe({ this.productsService.getRdBaseInterestRates().subscribe({
next: (rates: any[]) => (this.cbsBaseRates = rates || []), next: (rates: any) => (this.cbsBaseRates = Array.isArray(rates) ? rates : rates ? [rates] : []),
error: () => (this.cbsBaseRates = []) error: () => (this.cbsBaseRates = [])
}); });
} }
@@ -127,7 +127,8 @@ export class RecurringDepositsAccountInterestRateChartStepComponent implements O
}>(); }>();
get activeBase(): any { get activeBase(): any {
return (this.cbsBaseRates || []).find((r) => r.fdType === 'DOUBLE' && r.isActive); // The recurring deposit's own CBS base chart; its active version carries the senior citizen rate of each slab.
return (this.cbsBaseRates || []).find((r) => r.isActive) ?? (this.cbsBaseRates || [])[0];
} }
/** /**
@@ -173,7 +174,10 @@ export class RecurringDepositsAccountInterestRateChartStepComponent implements O
return baseSlabs; return baseSlabs;
} }
// Products made before RD charts moved to months still hold the base chart's own year slabs // Products made before RD charts moved to months still hold the base chart's own year slabs
const candidates = [...baseSlabs, ...this.normalizeCbsSlabs(cbsSlabs)]; const candidates = [
...baseSlabs,
...this.normalizeCbsSlabs(cbsSlabs)
];
return productSlabs.map((slab: any) => { return productSlabs.map((slab: any) => {
if (slab.seniorCitizenRate != null) { if (slab.seniorCitizenRate != null) {
return slab; return slab;
@@ -50,6 +50,34 @@
<span class="nx-row__label">{{ 'labels.inputs.Maturity Date' | translate }}</span> <span class="nx-row__label">{{ 'labels.inputs.Maturity Date' | translate }}</span>
<span class="nx-row__value">{{ recurringDepositsAccountData.maturityDate | dateFormat }}</span> <span class="nx-row__value">{{ recurringDepositsAccountData.maturityDate | dateFormat }}</span>
</div> </div>
@if (installmentPosition) {
<div class="nx-row">
<span class="nx-row__label">Next Installment Due</span>
<span class="nx-row__value">
@if (installmentPosition.nextDueDate) {
{{ installmentPosition.nextDueDate | dateFormat }} &middot;
{{ installmentPosition.installmentAmount | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
} @else {
<span class="nx-muted">All installments paid</span>
}
</span>
</div>
<div class="nx-row">
<span class="nx-row__label">Installments Paid</span>
<span class="nx-row__value"
>{{ installmentPosition.paidInstallments }} of {{ installmentPosition.totalInstallments }}</span
>
</div>
@if (installmentPosition.overdueInstallments > 0) {
<div class="nx-row">
<span class="nx-row__label">Overdue</span>
<span class="nx-row__value" style="color: var(--mat-sys-error, #d32f2f)">
{{ installmentPosition.overdueInstallments }} installment(s) &middot;
{{ installmentPosition.overdueAmount | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
</span>
</div>
}
}
@if ( @if (
recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals
) { ) {
@@ -46,11 +46,21 @@ export class GeneralTabComponent {
totalLienAmount = 0; totalLienAmount = 0;
/** Loan limit today (Lien Marked products only): % that applies, what it comes to, and what is left. */ /** Loan limit today (Lien Marked products only): % that applies, what it comes to, and what is left. */
lienLimit: { percentage: number; maxLoanAmount: number; availableForLoan: number } | null = null; lienLimit: { percentage: number; maxLoanAmount: number; availableForLoan: number } | null = null;
/** When the next installment is expected and how much, plus anything already overdue; null once fully paid. */
installmentPosition: {
nextDueDate: string | null;
installmentAmount: number;
paidInstallments: number;
totalInstallments: number;
overdueInstallments: number;
overdueAmount: number;
} | null = null;
constructor() { constructor() {
this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => { this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
this.recurringDepositsAccountData = data.recurringDepositsAccountData; this.recurringDepositsAccountData = data.recurringDepositsAccountData;
this.loadLiens(this.recurringDepositsAccountData?.id); this.loadLiens(this.recurringDepositsAccountData?.id);
this.loadInstallmentPosition(this.recurringDepositsAccountData?.id);
this.currency = this.recurringDepositsAccountData.currency; this.currency = this.recurringDepositsAccountData.currency;
this.isprematureAllowed = data.recurringDepositsAccountData.maturityDate != null; this.isprematureAllowed = data.recurringDepositsAccountData.maturityDate != null;
if (this.router.url.includes('clients')) { if (this.router.url.includes('clients')) {
@@ -63,6 +73,27 @@ export class GeneralTabComponent {
}); });
} }
private loadInstallmentPosition(accountId: any) {
this.installmentPosition = null;
if (!accountId) {
return;
}
this.recurringDepositsService.getRecurringDepositInstallmentPosition(accountId).subscribe((response: any) => {
const row = (response?.accounts ?? []).find((a: any) => Number(a.id) === Number(accountId));
if (!row) {
return;
}
this.installmentPosition = {
nextDueDate: row.nextDueDate || null,
installmentAmount: Number(row.installmentAmount) || 0,
paidInstallments: Number(row.paidInstallments) || 0,
totalInstallments: Number(row.totalInstallments) || 0,
overdueInstallments: Number(row.overdueInstallments) || 0,
overdueAmount: Number(row.overdueAmount) || 0
};
});
}
private loadLiens(accountId: any) { private loadLiens(accountId: any) {
this.liens = []; this.liens = [];
this.totalLienAmount = 0; this.totalLienAmount = 0;
@@ -15,14 +15,6 @@
</button> </button>
} }
</span> </span>
<button
mat-raised-button
color="warn"
*mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
(click)="undoTransaction()"
>
<fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
</button>
</div> </div>
} }
@@ -39,6 +39,16 @@ export class RecurringDepositsService {
return this.http.get(`/recurringdepositaccounts/${recurringDepositAccountId}/liens`); return this.http.get(`/recurringdepositaccounts/${recurringDepositAccountId}/liens`);
} }
/**
* This deposit's installment position as of the business date (next due date, overdue count/amount), from the
* RD Dashboard endpoint - the same paid/overdue rule the auto-debit and penalty jobs use. Older backends ignore
* `accountId` and return every RD, so callers pick the row by id.
*/
getRecurringDepositInstallmentPosition(recurringDepositAccountId: any): Observable<any> {
const httpParams = new HttpParams().set('accountId', recurringDepositAccountId);
return this.http.get('/recurringdepositaccounts/dashboard', { params: httpParams });
}
/** /**
* @param clientId Client Id * @param clientId Client Id
* @param clientName Client Name * @param clientName Client Name
@@ -10,7 +10,7 @@ import { Directive, HostListener, Input, ElementRef, inject } from '@angular/cor
import { NgControl } from '@angular/forms'; import { NgControl } from '@angular/forms';
/** The kinds of field this knows how to hold to a shape. */ /** The kinds of field this knows how to hold to a shape. */
export type RestrictKind = 'digits' | 'phone' | 'pan' | 'aadhaar'; export type RestrictKind = 'digits' | 'phone' | 'pan' | 'aadhaar' | 'gstin' | 'tan';
interface Rule { interface Rule {
/** Characters this kind will accept at all. */ /** Characters this kind will accept at all. */
@@ -27,7 +27,10 @@ const RULES: Record<RestrictKind, Rule> = {
// A PAN is five letters, four digits, one letter - and is always written in capitals. // A PAN is five letters, four digits, one letter - and is always written in capitals.
pan: { allowed: /[A-Za-z0-9]/, maxLength: 10, upper: true }, pan: { allowed: /[A-Za-z0-9]/, maxLength: 10, upper: true },
// Twelve digits, or the masked form CKYC returns, which is Xs and the last four digits. // Twelve digits, or the masked form CKYC returns, which is Xs and the last four digits.
aadhaar: { allowed: /[0-9Xx]/, maxLength: 12, upper: true } aadhaar: { allowed: /[0-9Xx]/, maxLength: 12, upper: true },
// GSTIN is fifteen letters and digits, TAN ten; both are always written in capitals.
gstin: { allowed: /[A-Za-z0-9]/, maxLength: 15, upper: true },
tan: { allowed: /[A-Za-z0-9]/, maxLength: 10, upper: true }
}; };
/** /**
+2
View File
@@ -54,6 +54,8 @@ export interface CtrTransaction {
declaration: string; declaration: string;
/** Customer name resolved from KC1 (UI convenience, not in actual TC2 schema) */ /** Customer name resolved from KC1 (UI convenience, not in actual TC2 schema) */
customerName?: string; customerName?: string;
/** True for a transaction that has crossed the threshold but is not yet in a generated CTR. */
pendingFiling?: boolean;
/** /**
* CTR does not judge suspicion. It records only whether the source of funds was * CTR does not judge suspicion. It records only whether the source of funds was
* evidenced at the counter (CTR filed, nothing further) or could not be, in which * evidenced at the counter (CTR filed, nothing further) or could not be, in which
+232 -140
View File
@@ -223,6 +223,15 @@
<div class="fiu-note">Loading the generated CTR lines…</div> <div class="fiu-note">Loading the generated CTR lines…</div>
} @else if (ctrLinesError) { } @else if (ctrLinesError) {
<div class="fiu-note fiu-note--warn"><fa-icon icon="exclamation-triangle"></fa-icon> {{ ctrLinesError }}</div> <div class="fiu-note fiu-note--warn"><fa-icon icon="exclamation-triangle"></fa-icon> {{ ctrLinesError }}</div>
} @else if (ctrPendingCount > 0) {
<div class="fiu-note">
<fa-icon icon="info-circle"></fa-icon>
{{ ctrPendingCount }} cash transaction{{ ctrPendingCount > 1 ? 's' : '' }} of ₹10,00,000 or more
{{ ctrPendingCount > 1 ? 'are' : 'is' }} listed below automatically as soon as
{{ ctrPendingCount > 1 ? 'they are' : 'it is' }} posted.
{{ ctrPendingCount > 1 ? 'They are' : 'It is' }} not in a filed report yet — pick the month under “Generate
CTR” and run it to include {{ ctrPendingCount > 1 ? 'them' : 'it' }}.
</div>
} @else if (!ctrTxns.length) { } @else if (!ctrTxns.length) {
<div class="fiu-note fiu-note--warn"> <div class="fiu-note fiu-note--warn">
<fa-icon icon="exclamation-triangle"></fa-icon> <fa-icon icon="exclamation-triangle"></fa-icon>
@@ -342,27 +351,103 @@
<th class="ta-c">Records</th> <th class="ta-c">Records</th>
<th>Status</th> <th>Status</th>
<th>Submitted On</th> <th>Submitted On</th>
<th class="ta-c">Customers</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@for (r of amlCtrReports; track r.id) { @for (r of amlCtrReports; track r.id) {
<tr> <tr style="cursor: pointer" (click)="openCtrReport(r)">
<td>{{ r.reportMonth }}</td> <td>{{ r.reportMonth }}</td>
<td>{{ r.generatedOn | date: 'medium' }}</td> <td>{{ r.generatedOn ? (asDate(r.generatedOn) | date: 'medium') : '—' }}</td>
<td class="ta-c">{{ r.recordCount }}</td> <td class="ta-c">{{ r.recordCount }}</td>
<td> <td>
<span [class]="amlStatusClass(r.status)">{{ r.status }}</span> <span [class]="amlStatusClass(r.status)">{{ r.status }}</span>
</td> </td>
<td>{{ r.submittedOn ? (r.submittedOn | date: 'medium') : '—' }}</td> <td>{{ r.submittedOn ? (asDate(r.submittedOn) | date: 'medium') : '—' }}</td>
<td class="ta-c" (click)="$event.stopPropagation()">
<button class="fiu-btn fiu-btn-g" (click)="openCtrReport(r)">View</button>
<button class="fiu-btn fiu-btn-g" (click)="exportCtrReport(r)">Excel</button>
</td>
</tr> </tr>
} @empty { } @empty {
<tr> <tr>
<td colspan="5" class="fiu-empty">No CTR reports generated yet.</td> <td colspan="6" class="fiu-empty">No CTR reports generated yet.</td>
</tr> </tr>
} }
</tbody> </tbody>
</table> </table>
</div> </div>
<!-- The customers and transactions one CTR report names. Opened from a row above; declared here so it keeps this
component's state and styles. -->
<ng-template #ctrReportDialog>
<div class="fiu-dialog">
@if (ctrReportView; as report) {
<div class="fiu-form-meta">
<div class="fiu-form-title">
<h3>CTR report — {{ report.reportMonth }}</h3>
<p>
{{ report.status }} · {{ ctrReportLines.length }} record{{ ctrReportLines.length === 1 ? '' : 's' }} ·
total ₹{{ ctrReportTotal | number: '1.2-2' }}
</p>
</div>
<div class="fiu-action-group">
<button
class="fiu-btn fiu-btn-xml"
[disabled]="ctrReportLinesLoading"
(click)="exportCtrReport(report)"
>
Export Excel
</button>
<button class="fiu-btn fiu-btn-g" (click)="closeCtrReport()">Close</button>
</div>
</div>
@if (ctrReportLinesLoading) {
<div class="fiu-note">Loading the customers in this report…</div>
} @else {
<div class="fiu-tbl-wrap">
<table class="fiu-tbl">
<thead>
<tr>
<th>Customer</th>
<th>Customer ID / CKYC</th>
<th>Account</th>
<th>Branch</th>
<th>Date</th>
<th>Direction</th>
<th>Type</th>
<th class="ta-r">Amount</th>
</tr>
</thead>
<tbody>
@for (l of ctrReportLines; track $index) {
<tr>
<td>
{{ l.clientName }}
<div style="font-size: 11px; color: var(--f-g500)">
{{ l.individual === false ? 'Entity' : 'Individual' }}
</div>
</td>
<td class="mono">{{ l.ckycNumber || l.clientExternalId || '—' }}</td>
<td class="mono">{{ l.accountNo || '—' }}</td>
<td>{{ l.branchName || '—' }}</td>
<td>{{ l.transactionDate ? (asDate(l.transactionDate) | date: 'dd MMM yyyy') : '—' }}</td>
<td>{{ l.direction || '—' }}</td>
<td>{{ l.connectedGroup ? 'Connected group (month total)' : 'Single transaction' }}</td>
<td class="ta-r">₹{{ l.amount | number: '1.2-2' }}</td>
</tr>
} @empty {
<tr>
<td colspan="8" class="fiu-empty">This report names no customers.</td>
</tr>
}
</tbody>
</table>
</div>
}
}
</div>
</ng-template>
</div> </div>
} }
@@ -581,146 +666,153 @@
</div> </div>
} }
@if (selectedStrCase) { <!-- The case investigation. Opened as a popup by selectStrCase(); declared here so it keeps this component's state. -->
<div class="str-case-detail"> <ng-template #strCaseDialog>
<div class="fiu-form-meta"> <div class="fiu-dialog">
<div class="fiu-form-title"> @if (selectedStrCase) {
<h3>STR Case #{{ selectedStrCase.id }} — {{ selectedStrCase.clientDisplayName }}</h3> <div class="str-case-detail">
<p> <div class="fiu-form-meta">
Alert #{{ selectedStrCase.alertId }} &middot; <div class="fiu-form-title">
{{ selectedStrCase.cumulativeStrCaseCountForClient }} cumulative STR case(s) for this client <h3>STR Case #{{ selectedStrCase.id }} — {{ selectedStrCase.clientDisplayName }}</h3>
@if (selectedStrCase.cumulativeStrCaseCountForClient >= 3) { <p>
<span class="escalation-badge">Risk category auto-escalated</span> Alert #{{ selectedStrCase.alertId }} &middot;
{{ selectedStrCase.cumulativeStrCaseCountForClient }} cumulative STR case(s) for this client
@if (selectedStrCase.cumulativeStrCaseCountForClient >= 3) {
<span class="escalation-badge">Risk category auto-escalated</span>
}
</p>
</div>
<button class="fiu-btn fiu-btn-g" (click)="closeStrCaseDetail()">Close</button>
</div>
<div
class="case-outcome"
[class.case-outcome--clear]="selectedStrCase.status === 'CONCLUDED_CLEAR'"
[class.case-outcome--suspicious]="
selectedStrCase.status === 'CONCLUDED_SUSPICIOUS' || selectedStrCase.status === 'FILED'
"
>
<span [class]="amlStatusClass(selectedStrCase.status)">{{ selectedStrCase.status }}</span>
<span>{{ strCaseOutcome(selectedStrCase) }}</span>
</div>
<div class="case-form" *mifosxHasPermission="'CONCLUDE_AML_STR'">
<div class="form-row">
<label for="fiuInvestigationNotes"
>Investigation notes (source-of-transaction history reviewed)</label
>
<textarea id="fiuInvestigationNotes" rows="3" [(ngModel)]="concludeInvestigationNotes"></textarea>
</div>
<div class="form-row">
<label for="fiuSourceOfFundsNotes">Source-of-funds notes</label>
<textarea id="fiuSourceOfFundsNotes" rows="2" [(ngModel)]="concludeSourceOfFundsNotes"></textarea>
</div>
<!-- Verification checklist — the verdict is derived, not chosen. -->
<div class="checklist">
<div class="checklist-head">
<span>Principal Officer verification — mark each point as found</span>
<span class="checklist-progress" [class.done]="allAnswered">
{{ answeredCount }} / {{ strChecklist.length }} answered
</span>
</div>
<table class="checklist-tbl">
<thead>
<tr>
<th>Verification point</th>
<th class="ta-c col-yes">Genuine</th>
<th class="ta-c col-no">Not satisfied</th>
</tr>
</thead>
<tbody>
@for (item of strChecklist; track item.key) {
<tr
[class.row-yes]="strFindings[item.key] === true"
[class.row-no]="strFindings[item.key] === false"
[class.row-pending]="strFindings[item.key] === null"
>
<td>
<div class="chk-label">{{ item.label }}</div>
<div class="chk-hint">{{ item.hint }}</div>
</td>
<td class="ta-c">
<button
type="button"
class="chk-box chk-box--yes"
[class.on]="strFindings[item.key] === true"
[attr.aria-pressed]="strFindings[item.key] === true"
[attr.aria-label]="'Mark ' + item.label + ' as genuine'"
(click)="setFinding(item.key, true)"
>
<fa-icon icon="check-circle"></fa-icon>
</button>
</td>
<td class="ta-c">
<button
type="button"
class="chk-box chk-box--no"
[class.on]="strFindings[item.key] === false"
[attr.aria-pressed]="strFindings[item.key] === false"
[attr.aria-label]="'Mark ' + item.label + ' as not satisfied'"
(click)="setFinding(item.key, false)"
>
<fa-icon icon="exclamation-triangle"></fa-icon>
</button>
</td>
</tr>
}
</tbody>
</table>
</div>
<!-- Derived verdict -->
<div
class="verdict"
[class.verdict--clear]="allAnswered && derivedConclusion === 'NOT_SUSPICIOUS'"
[class.verdict--suspicious]="allAnswered && derivedConclusion === 'SUSPICIOUS'"
>
@if (!allAnswered) {
<fa-icon icon="info-circle"></fa-icon>
<span>
Answer every verification point to determine the outcome —
{{ strChecklist.length - answeredCount }} still pending.
</span>
} @else if (derivedConclusion === 'NOT_SUSPICIOUS') {
<fa-icon icon="check-circle"></fa-icon>
<span>
<strong>Not suspicious.</strong> All {{ strChecklist.length }} points found genuine — the case
will be closed and nothing filed with FIU-IND.
</span>
} @else {
<fa-icon icon="exclamation-triangle"></fa-icon>
<span>
<strong>Suspicious — STR must be filed.</strong>
{{ failedFindings.length }} of {{ strChecklist.length }} points not satisfied:
{{ failedFindings[0].label }}
@if (failedFindings.length > 1) {
<span> and {{ failedFindings.length - 1 }} more</span>
}
.
</span>
}
</div>
<button class="fiu-btn fiu-btn-xml" [disabled]="!allAnswered" (click)="concludeStrCase()">
Conclude as
{{ allAnswered ? (derivedConclusion === 'SUSPICIOUS' ? 'Suspicious' : 'Not Suspicious') : '…' }}
</button>
@if (selectedStrCase.status === 'CONCLUDED_SUSPICIOUS') {
<div class="file-str-row">
<label for="fiuFileReferenceNo">FIU-IND acknowledgement / reference number</label>
<input id="fiuFileReferenceNo" class="fiu-inp" type="text" [(ngModel)]="fileReferenceNo" />
<button class="fiu-btn fiu-btn-xml" (click)="fileStrCase()">Mark STR Filed</button>
</div>
} }
</p>
</div>
<button class="fiu-btn fiu-btn-g" (click)="closeStrCaseDetail()">Close</button>
</div>
<div
class="case-outcome"
[class.case-outcome--clear]="selectedStrCase.status === 'CONCLUDED_CLEAR'"
[class.case-outcome--suspicious]="
selectedStrCase.status === 'CONCLUDED_SUSPICIOUS' || selectedStrCase.status === 'FILED'
"
>
<span [class]="amlStatusClass(selectedStrCase.status)">{{ selectedStrCase.status }}</span>
<span>{{ strCaseOutcome(selectedStrCase) }}</span>
</div>
<div class="case-form" *mifosxHasPermission="'CONCLUDE_AML_STR'">
<div class="form-row">
<label for="fiuInvestigationNotes">Investigation notes (source-of-transaction history reviewed)</label>
<textarea id="fiuInvestigationNotes" rows="3" [(ngModel)]="concludeInvestigationNotes"></textarea>
</div>
<div class="form-row">
<label for="fiuSourceOfFundsNotes">Source-of-funds notes</label>
<textarea id="fiuSourceOfFundsNotes" rows="2" [(ngModel)]="concludeSourceOfFundsNotes"></textarea>
</div>
<!-- Verification checklist — the verdict is derived, not chosen. -->
<div class="checklist">
<div class="checklist-head">
<span>Principal Officer verification — mark each point as found</span>
<span class="checklist-progress" [class.done]="allAnswered">
{{ answeredCount }} / {{ strChecklist.length }} answered
</span>
</div> </div>
<table class="checklist-tbl">
<thead>
<tr>
<th>Verification point</th>
<th class="ta-c col-yes">Genuine</th>
<th class="ta-c col-no">Not satisfied</th>
</tr>
</thead>
<tbody>
@for (item of strChecklist; track item.key) {
<tr
[class.row-yes]="strFindings[item.key] === true"
[class.row-no]="strFindings[item.key] === false"
[class.row-pending]="strFindings[item.key] === null"
>
<td>
<div class="chk-label">{{ item.label }}</div>
<div class="chk-hint">{{ item.hint }}</div>
</td>
<td class="ta-c">
<button
type="button"
class="chk-box chk-box--yes"
[class.on]="strFindings[item.key] === true"
[attr.aria-pressed]="strFindings[item.key] === true"
[attr.aria-label]="'Mark ' + item.label + ' as genuine'"
(click)="setFinding(item.key, true)"
>
<fa-icon icon="check-circle"></fa-icon>
</button>
</td>
<td class="ta-c">
<button
type="button"
class="chk-box chk-box--no"
[class.on]="strFindings[item.key] === false"
[attr.aria-pressed]="strFindings[item.key] === false"
[attr.aria-label]="'Mark ' + item.label + ' as not satisfied'"
(click)="setFinding(item.key, false)"
>
<fa-icon icon="exclamation-triangle"></fa-icon>
</button>
</td>
</tr>
}
</tbody>
</table>
</div> </div>
}
<!-- Derived verdict -->
<div
class="verdict"
[class.verdict--clear]="allAnswered && derivedConclusion === 'NOT_SUSPICIOUS'"
[class.verdict--suspicious]="allAnswered && derivedConclusion === 'SUSPICIOUS'"
>
@if (!allAnswered) {
<fa-icon icon="info-circle"></fa-icon>
<span>
Answer every verification point to determine the outcome —
{{ strChecklist.length - answeredCount }} still pending.
</span>
} @else if (derivedConclusion === 'NOT_SUSPICIOUS') {
<fa-icon icon="check-circle"></fa-icon>
<span>
<strong>Not suspicious.</strong> All {{ strChecklist.length }} points found genuine — the case will be
closed and nothing filed with FIU-IND.
</span>
} @else {
<fa-icon icon="exclamation-triangle"></fa-icon>
<span>
<strong>Suspicious — STR must be filed.</strong>
{{ failedFindings.length }} of {{ strChecklist.length }} points not satisfied:
{{ failedFindings[0].label }}
@if (failedFindings.length > 1) {
<span> and {{ failedFindings.length - 1 }} more</span>
}
.
</span>
}
</div>
<button class="fiu-btn fiu-btn-xml" [disabled]="!allAnswered" (click)="concludeStrCase()">
Conclude as
{{ allAnswered ? (derivedConclusion === 'SUSPICIOUS' ? 'Suspicious' : 'Not Suspicious') : '…' }}
</button>
@if (selectedStrCase.status === 'CONCLUDED_SUSPICIOUS') {
<div class="file-str-row">
<label for="fiuFileReferenceNo">FIU-IND acknowledgement / reference number</label>
<input id="fiuFileReferenceNo" class="fiu-inp" type="text" [(ngModel)]="fileReferenceNo" />
<button class="fiu-btn fiu-btn-xml" (click)="fileStrCase()">Mark STR Filed</button>
</div>
}
</div>
</div> </div>
} </ng-template>
<!-- FINnet export template (separate concern — STR XML file-format generation) --> <!-- FINnet export template (separate concern — STR XML file-format generation) -->
<div class="fiu-form-meta"> <div class="fiu-form-meta">
+7 -1
View File
@@ -6,7 +6,8 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. * file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/ */
:host { :host,
.fiu-dialog {
--f-navy: #0b1e3d; --f-navy: #0b1e3d;
--f-blue: #1d4ed8; --f-blue: #1d4ed8;
--f-blue-l: #eff6ff; --f-blue-l: #eff6ff;
@@ -1858,3 +1859,8 @@
white-space: normal; white-space: normal;
font-size: 12.5px; font-size: 12.5px;
} }
/* The STR case popup renders in the overlay, outside :host, so it carries the page's colour variables itself. */
.fiu-dialog {
padding: 4px;
}
+174 -6
View File
@@ -6,7 +6,12 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. * file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/ */
import { Component, OnInit, inject } from '@angular/core'; import { Component, OnInit, inject, ViewChild, TemplateRef } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { forkJoin, of } from 'rxjs';
import { exportWorkbook } from 'app/cashier/cashier-export';
import { catchError } from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -131,6 +136,134 @@ export class FiuComponent implements OnInit {
private sanctionsLogsService = inject(SanctionsLogsService); private sanctionsLogsService = inject(SanctionsLogsService);
private authenticationService = inject(AuthenticationService); private authenticationService = inject(AuthenticationService);
private route = inject(ActivatedRoute); private route = inject(ActivatedRoute);
private dialog = inject(MatDialog);
private snackBar = inject(MatSnackBar);
/** The STR case investigation, shown in a popup rather than a panel pushed in under the case list. */
@ViewChild('strCaseDialog') strCaseDialogTpl!: TemplateRef<unknown>;
private strCaseDialogRef: MatDialogRef<unknown> | null = null;
/** The CTR report whose customers are open in the popup, and the lines behind it. */
@ViewChild('ctrReportDialog') ctrReportDialogTpl!: TemplateRef<unknown>;
private ctrReportDialogRef: MatDialogRef<unknown> | null = null;
ctrReportView: any = null;
ctrReportLines: any[] = [];
ctrReportLinesLoading = false;
/** Opens a generated CTR report with every customer and transaction it names. */
openCtrReport(report: any): void {
this.ctrReportView = report;
this.ctrReportLines = [];
this.ctrReportLinesLoading = true;
this.amlService.getCtrReportLines(report.id).subscribe({
next: (lines) => {
this.ctrReportLines = lines || [];
this.ctrReportLinesLoading = false;
},
error: () => {
this.ctrReportLinesLoading = false;
this.toast(`Could not load the customers in the ${report.reportMonth} report`);
}
});
this.ctrReportDialogRef?.close();
this.ctrReportDialogRef = this.dialog.open(this.ctrReportDialogTpl, {
width: '1280px',
maxWidth: '96vw',
maxHeight: '92vh',
autoFocus: false
});
this.ctrReportDialogRef.afterClosed().subscribe(() => {
this.ctrReportView = null;
this.ctrReportDialogRef = null;
});
}
closeCtrReport(): void {
this.ctrReportDialogRef?.close();
}
/** Total of the amounts in the open report, so the popup states what the filing adds up to. */
get ctrReportTotal(): number {
return this.ctrReportLines.reduce((sum, l) => sum + (Number(l.amount) || 0), 0);
}
/**
* Excel workbook of a CTR report with the customer behind every line. Fetches the lines itself unless the popup
* already holds them, so it works straight from the reports table as well as from inside the popup.
*/
exportCtrReport(report: any): void {
const build = (lines: any[]) => this.buildCtrReportWorkbook(report, lines);
if (this.ctrReportView?.id === report.id && !this.ctrReportLinesLoading) {
build(this.ctrReportLines);
return;
}
this.amlService.getCtrReportLines(report.id).subscribe({
next: (lines) => build(lines || []),
error: () => this.toast(`Could not load the ${report.reportMonth} report to export it`)
});
}
private async buildCtrReportWorkbook(report: any, lines: any[]): Promise<void> {
const total = lines.reduce((sum, l) => sum + (Number(l.amount) || 0), 0);
await exportWorkbook(
[
{
sheetName: `CTR ${report.reportMonth}`,
title: `Cash Transaction Report — ${report.reportMonth}`,
subtitle: `${report.status} · ${lines.length} record${lines.length === 1 ? '' : 's'} · total ₹${total.toLocaleString('en-IN')} · generated ${new Date().toLocaleString('en-IN')}`,
headers: [
'Report Month',
'Customer',
'Customer ID / CKYC Ref',
'CKYC Number',
'Customer Type',
'Account No',
'Branch',
'Account Status',
'Account Opened',
'Transaction ID',
'Transaction Date',
'Direction',
'Line Type',
'Amount (₹)'
],
rows: lines.map((l) => [
l.reportMonth || report.reportMonth,
l.clientName || '',
l.clientExternalId || '',
l.ckycNumber || '',
l.individual === false ? 'Entity' : 'Individual',
l.accountNo || '',
l.branchName || '',
l.accountStatus || '',
toIsoDate(l.accountOpenedOn) || '',
l.transactionId ?? null,
toIsoDate(l.transactionDate) || '',
l.direction || '',
l.connectedGroup ? 'Connected group — month total' : 'Single transaction',
Number(l.amount) || 0
]),
widths: [
12,
28,
22,
18,
14,
20,
18,
16,
16,
14,
16,
12,
28,
18
]
}
],
`CTR-${report.reportMonth}`
);
}
/** Active tab */ /** Active tab */
activeTab: 'dashboard' | 'ctr' | 'str' | 'customers' | 'files' = 'dashboard'; activeTab: 'dashboard' | 'ctr' | 'str' | 'customers' | 'files' = 'dashboard';
@@ -145,6 +278,8 @@ export class FiuComponent implements OnInit {
*/ */
ctrTxns: CtrTransaction[] = []; ctrTxns: CtrTransaction[] = [];
ctrLinesLoading = false; ctrLinesLoading = false;
/** Reportable cash transactions already posted but not yet in a generated CTR, listed automatically. */
ctrPendingCount = 0;
ctrLinesError = ''; ctrLinesError = '';
/** /**
* ATM / card-rail cash, which feeds the same CTR as the counter transactions in TC2. * ATM / card-rail cash, which feeds the same CTR as the counter transactions in TC2.
@@ -682,10 +817,23 @@ export class FiuComponent implements OnInit {
loadCtrLines(): void { loadCtrLines(): void {
this.ctrLinesLoading = true; this.ctrLinesLoading = true;
this.ctrLinesError = ''; this.ctrLinesError = '';
this.amlService.getCtrReportLines().subscribe({ // The pending list is an extra: if it cannot be read, the generated lines still show.
next: (lines) => { forkJoin({
generated: this.amlService.getCtrReportLines(),
pending: this.amlService.getCtrPendingLines().pipe(catchError(() => of([] as any[])))
}).subscribe({
next: ({ generated, pending }) => {
this.ctrLinesLoading = false; this.ctrLinesLoading = false;
this.ctrTxns = (lines || []).map((l: any, i: number) => this.toCtrTransaction(l, i + 1)); const generatedRows = (generated || []).map((l: any, i: number) => this.toCtrTransaction(l, i + 1));
const pendingRows = (pending || []).map((l: any, i: number) => ({
...this.toCtrTransaction(l, generatedRows.length + i + 1),
pendingFiling: true
}));
this.ctrPendingCount = pendingRows.length;
this.ctrTxns = [
...generatedRows,
...pendingRows
];
// Cached so the compliance flags an officer sets below survive a reload, keyed on the rows // Cached so the compliance flags an officer sets below survive a reload, keyed on the rows
// that actually came back rather than on a seeded set. // that actually came back rather than on a seeded set.
this.applyStoredCtrCompliance(); this.applyStoredCtrCompliance();
@@ -693,6 +841,7 @@ export class FiuComponent implements OnInit {
error: (err: any) => { error: (err: any) => {
this.ctrLinesLoading = false; this.ctrLinesLoading = false;
this.ctrTxns = []; this.ctrTxns = [];
this.ctrPendingCount = 0;
this.ctrLinesError = this.ctrLinesError =
err?.error?.defaultUserMessage || err?.error?.defaultUserMessage ||
'Could not load the generated CTR lines. Generate a report for the month first.'; 'Could not load the generated CTR lines. Generate a report for the month first.';
@@ -820,6 +969,17 @@ export class FiuComponent implements OnInit {
this.concludeSourceOfFundsNotes = strCase.sourceOfFundsNotes || ''; this.concludeSourceOfFundsNotes = strCase.sourceOfFundsNotes || '';
this.fileReferenceNo = strCase.strReferenceNo || ''; this.fileReferenceNo = strCase.strReferenceNo || '';
this.resetChecklist(); this.resetChecklist();
this.strCaseDialogRef?.close();
this.strCaseDialogRef = this.dialog.open(this.strCaseDialogTpl, {
width: '1100px',
maxWidth: '96vw',
maxHeight: '92vh',
autoFocus: false
});
this.strCaseDialogRef.afterClosed().subscribe(() => {
this.selectedStrCase = null;
this.strCaseDialogRef = null;
});
} }
/** Plain-language outcome for a live STR case, shown in the investigation panel. */ /** Plain-language outcome for a live STR case, shown in the investigation panel. */
@@ -837,6 +997,7 @@ export class FiuComponent implements OnInit {
} }
closeStrCaseDetail(): void { closeStrCaseDetail(): void {
this.strCaseDialogRef?.close();
this.selectedStrCase = null; this.selectedStrCase = null;
} }
@@ -871,8 +1032,9 @@ export class FiuComponent implements OnInit {
? `STR case #${updated.id} concluded suspicious — file with FIU-IND by ${updated.fiuDueDate}` ? `STR case #${updated.id} concluded suspicious — file with FIU-IND by ${updated.fiuDueDate}`
: `STR case #${updated.id} concluded not suspicious — no filing required` : `STR case #${updated.id} concluded not suspicious — no filing required`
); );
this.selectedStrCase = updated;
this.loadAmlStrCases(); this.loadAmlStrCases();
// Concluded: close the popup so the case's new status is what the officer sees in the list.
this.closeStrCaseDetail();
}, },
error: this.apiError(`Concluding STR case #${this.selectedStrCase.id}`) error: this.apiError(`Concluding STR case #${this.selectedStrCase.id}`)
}); });
@@ -889,8 +1051,8 @@ export class FiuComponent implements OnInit {
this.amlService.fileStr(this.selectedStrCase.id, this.fileReferenceNo).subscribe({ this.amlService.fileStr(this.selectedStrCase.id, this.fileReferenceNo).subscribe({
next: (updated) => { next: (updated) => {
this.toast(`STR case #${updated.id} recorded as filed (ref ${updated.strReferenceNo})`); this.toast(`STR case #${updated.id} recorded as filed (ref ${updated.strReferenceNo})`);
this.selectedStrCase = updated;
this.loadAmlStrCases(); this.loadAmlStrCases();
this.closeStrCaseDetail();
}, },
error: this.apiError(`Filing STR case #${this.selectedStrCase.id}`) error: this.apiError(`Filing STR case #${this.selectedStrCase.id}`)
}); });
@@ -1784,6 +1946,12 @@ export class FiuComponent implements OnInit {
} }
toast(msg: string): void { toast(msg: string): void {
// The page's own toast sits behind the popup's backdrop, so while the STR case popup is open the message would be
// there but unseen - which read as the action having done nothing. A snackbar is drawn above the popup.
if (this.strCaseDialogRef || this.ctrReportDialogRef) {
this.snackBar.open(msg, 'OK', { duration: 5000 });
return;
}
this.toastMsg = msg; this.toastMsg = msg;
this.toastVisible = true; this.toastVisible = true;
if (this.toastTimer) clearTimeout(this.toastTimer); if (this.toastTimer) clearTimeout(this.toastTimer);

Some files were not shown because too many files have changed in this diff Show More