Compare commits

..
5 Commits
Author SHA1 Message Date
anshulandClaude Opus 5.5 6a04a92113 feat(investment): Daily Script Master, market rate on purchase, broken-period interest as expense
- 09 Daily Script Master now saves to and loads from the backend (sample
  rows removed), with Drop to correct a wrong rate.
- Purchase Entry takes the rate (NAV for a mutual fund) from the newest
  Daily Script Master rate on or before the deal date, shows which rate
  was used, warns when the rate entered is outside the day's low-high,
  and clears the rate when the script has none.
- Broken-period interest paid to the seller is debited to expense GL
  500606 instead of Interest Receivable (RBI UCB Investment Directions,
  para 152, confirmed by Jitendra Sir); Interest Entry labels it so.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 15:27:15 +05:30
anshulandClaude Opus 5.5 88f34f58e3 feat(investment): deal time, interest cycle and charges on Purchase Entry
As per Jitendra Sir's review:
- Deal Time is now a mandatory field next to Deal Date.
- New Interest Cycle section: the two coupon days, last and next coupon,
  next coupon amount and days to it.
- Stamp duty, brokerage and other charges sit on the main form. They are
  expenses on their own GLs (500601/500602/500603), so they are added to
  the settlement amount but no longer to the book value, and each shows
  as its own debit line in the accounting preview.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 11:54:33 +05:30
anshul 88c4242692 Merge origin/dev-latest into feature/investment 2026-10-12 10:35:53 +05:30
anshulandClaude Opus 5.5 ca01e9b65b feat(investment): Interest Entry screen with coupon and provision schedule
Replace the dummy interest calculation tab with the real Interest Entry:
pick Type / Script / Deal No and Retrieve the holding's schedule from
the backend - every half-yearly coupon and every 31 Mar / 30 Sep closing
provision up to maturity, with days (30/360), gross interest, amount
already booked, net income and the Dr/Cr entry per line. Display only;
nothing is posted to GL yet.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-09 18:36:01 +05:30
anshulandClaude Opus 5.5 a4e0a22205 feat(investment): wire Bank/Party, Script Master and Purchase Entry to the backend
- Bank / Party Master and Script Master follow the bank's existing CBS
  screens (address, bank type, GL A/c, RBI code, limit, LEI, counterparty
  bank details; SLR type, auto script code, ISIN, interest rate, issue /
  maturity date, auto period, company details) and save to
  /investment/parties and /investment/scripts. GL dropdowns list enabled
  ASSET detail accounts from the chart of accounts.
- Purchase Entry simplified to the mandatory fields; script details,
  settlement date, last interest date, units, book value, premium/discount,
  accrued interest (30/360 up to the deal date), settlement amount and YTM
  are filled automatically; optional fields sit under "More Details";
  an Accounting Preview shows the GL entry. Save / Retrieve / Drop use
  /investment/purchases and the Holdings register lists saved purchases.
- New InvestmentService for the investment API calls.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-08 12:38:10 +05:30
436 changed files with 9118 additions and 67635 deletions
+2 -9
View File
@@ -31,8 +31,6 @@
"@angular/localize/init" "@angular/localize/init"
], ],
"assets": [ "assets": [
"src/favicon.ico",
"src/apple-touch-icon.png",
"src/assets/images/cbsnexora-favicon.svg", "src/assets/images/cbsnexora-favicon.svg",
"src/robots.txt", "src/robots.txt",
"src/manifest.json", "src/manifest.json",
@@ -41,11 +39,6 @@
"glob": "**/*", "glob": "**/*",
"input": "node_modules/tinymce", "input": "node_modules/tinymce",
"output": "assets/tinymce" "output": "assets/tinymce"
},
{
"glob": "lottie.min.js",
"input": "node_modules/lottie-web/build/player",
"output": "assets/js"
} }
], ],
"styles": [ "styles": [
@@ -76,8 +69,8 @@
"budgets": [ "budgets": [
{ {
"type": "initial", "type": "initial",
"maximumWarning": "18mb", "maximumWarning": "15mb",
"maximumError": "20mb" "maximumError": "17mb"
}, },
{ {
"type": "anyComponentStyle", "type": "anyComponentStyle",
-7
View File
@@ -41,7 +41,6 @@
"jspdf-autotable": "^5.0.2", "jspdf-autotable": "^5.0.2",
"lightgallery": "^2.9.0", "lightgallery": "^2.9.0",
"lodash": "4.17.23", "lodash": "4.17.23",
"lottie-web": "^5.13.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"ngx-image-cropper": "^9.1.6", "ngx-image-cropper": "^9.1.6",
"ngx-mat-select-search": "^8.0.2", "ngx-mat-select-search": "^8.0.2",
@@ -18381,12 +18380,6 @@
"url": "https://github.com/chalk/wrap-ansi?sponsor=1" "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
} }
}, },
"node_modules/lottie-web": {
"version": "5.13.0",
"resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
"integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
"license": "MIT"
},
"node_modules/lru-cache": { "node_modules/lru-cache": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-1
View File
@@ -71,7 +71,6 @@
"jspdf-autotable": "^5.0.2", "jspdf-autotable": "^5.0.2",
"lightgallery": "^2.9.0", "lightgallery": "^2.9.0",
"lodash": "4.17.23", "lodash": "4.17.23",
"lottie-web": "^5.13.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"ngx-image-cropper": "^9.1.6", "ngx-image-cropper": "^9.1.6",
"ngx-mat-select-search": "^8.0.2", "ngx-mat-select-search": "^8.0.2",
@@ -7,6 +7,16 @@
--> -->
<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">
+1 -12
View File
@@ -10,8 +10,7 @@
/** Angular Imports */ /** Angular Imports */
import { Injectable, inject } from '@angular/core'; import { Injectable, inject } from '@angular/core';
import { HttpClient, HttpContext, HttpParams } from '@angular/common/http'; import { HttpClient, 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';
@@ -199,16 +198,6 @@ 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.
@@ -11,14 +11,6 @@ import { Routes, RouterModule } from '@angular/router';
import { Route } from '../core/route/route.service'; import { Route } from '../core/route/route.service';
import { AccountsListComponent } from './accounts-list/accounts-list.component'; import { AccountsListComponent } from './accounts-list/accounts-list.component';
import { PartyMasterComponent } from '../deposits/party-master/party-master.component';
import { CreatePartyComponent } from '../deposits/party-master/create-party/create-party.component';
import { DueForClosureComponent } from '../deposits/party-master/due-for-closure/due-for-closure.component';
import { DailyTransactionEntryComponent } from '../deposits/daily-transaction-entry/daily-transaction-entry.component';
import { DdsReportsComponent } from '../deposits/dds-reports/dds-reports.component';
import { ReportViewerComponent } from '../deposits/dds-reports/report-viewer/report-viewer.component';
import { DdsAccountsComponent } from '../deposits/dds-accounts/dds-accounts.component';
import { DdsAccountViewComponent } from '../deposits/dds-accounts/dds-account-view/dds-account-view.component';
const routes: Routes = [ const routes: Routes = [
Route.withShell([ Route.withShell([
@@ -49,59 +41,6 @@ const routes: Routes = [
title: 'Recurring Deposit Accounts', title: 'Recurring Deposit Accounts',
breadcrumb: 'Recurring Deposit Accounts' breadcrumb: 'Recurring Deposit Accounts'
} }
},
{
path: 'dds',
data: { title: 'Daily Deposit Scheme — Party Master', breadcrumb: 'Party Master' },
children: [
{ path: '', component: PartyMasterComponent },
{
path: 'create',
component: CreatePartyComponent,
data: { title: 'Create Party', breadcrumb: 'Create' }
},
{
// Ahead of the :partyId routes, so "dueforclosure" is not read as a party id.
path: 'dueforclosure',
component: DueForClosureComponent,
data: { title: 'Accounts Due for Closure', breadcrumb: 'Due for Closure' }
},
{
path: ':partyId/edit',
component: CreatePartyComponent,
data: { title: 'Edit Party', breadcrumb: 'Edit' }
}
]
},
{
// The DDS accounts listed like Savings Accounts, each opening onto its transactions.
path: 'dds-accounts',
data: { title: 'DDS Accounts', breadcrumb: 'DDS Accounts' },
children: [
{ path: '', component: DdsAccountsComponent },
{
path: ':partyId',
component: DdsAccountViewComponent,
data: { title: 'DDS Account', breadcrumb: 'Account', routeParamBreadcrumb: false }
}
]
},
{
path: 'dds-collection',
component: DailyTransactionEntryComponent,
data: { title: 'Daily Transaction Entry', breadcrumb: 'Daily Transaction Entry' }
},
{
path: 'dds-reports',
data: { title: 'DDS Reports', breadcrumb: 'DDS Reports' },
children: [
{ path: '', component: DdsReportsComponent },
{
path: 'view/:reportName',
component: ReportViewerComponent,
data: { title: 'DDS Report', breadcrumb: 'reportName', routeParamBreadcrumb: 'reportName' }
}
]
} }
] ]
} }
-5
View File
@@ -85,11 +85,6 @@ export class AccountsService {
return this.http.get('/fixeddepositaccounts/maturity-dashboard'); return this.http.get('/fixeddepositaccounts/maturity-dashboard');
} }
/** RD Dashboard: running RDs with their installment position, closures and penalty income for the month. */
getRecurringDepositDashboard(): Observable<any> {
return this.http.get('/recurringdepositaccounts/dashboard');
}
getRecurringDepositAccounts(params: AccountListParams = {}): Observable<any> { getRecurringDepositAccounts(params: AccountListParams = {}): Observable<any> {
let httpParams = new HttpParams() let httpParams = new HttpParams()
.set('paged', 'true') .set('paged', 'true')
-16
View File
@@ -142,22 +142,6 @@ 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 });
-4
View File
@@ -64,7 +64,6 @@ import { BankCalendarModule } from './bank-calendar/bank-calendar.module';
import { DeafModule } from './deaf/deaf.module'; import { DeafModule } from './deaf/deaf.module';
import { SavingsDailyInterestModule } from './savings-daily-interest/savings-daily-interest.module'; import { SavingsDailyInterestModule } from './savings-daily-interest/savings-daily-interest.module';
import { FdDashboardModule } from './fd-dashboard/fd-dashboard.module'; import { FdDashboardModule } from './fd-dashboard/fd-dashboard.module';
import { RdDashboardModule } from './rd-dashboard/rd-dashboard.module';
import { DicgcModule } from './dicgc/dicgc.module'; import { DicgcModule } from './dicgc/dicgc.module';
import { FiuModule } from './fiu/fiu.module'; import { FiuModule } from './fiu/fiu.module';
import { GlReportsModule } from './gl-reports/gl-reports.module'; import { GlReportsModule } from './gl-reports/gl-reports.module';
@@ -97,7 +96,6 @@ import { TokenInterceptor as ZitadelTokenInterceptor } from './zitadel/token.int
import { AuthService } from './zitadel/auth.service'; import { AuthService } from './zitadel/auth.service';
import { environment } from '../environments/environment'; import { environment } from '../environments/environment';
import { CallbackComponent } from './zitadel/callback/callback.component'; import { CallbackComponent } from './zitadel/callback/callback.component';
import { LoadingScreenComponent } from './shared/loading-screen/loading-screen.component';
import { OAuthModule } from 'angular-oauth2-oidc'; import { OAuthModule } from 'angular-oauth2-oidc';
export class CustomMissingTranslationHandler implements MissingTranslationHandler { export class CustomMissingTranslationHandler implements MissingTranslationHandler {
@@ -180,7 +178,6 @@ export function HttpLoaderFactory(http: HttpClient) {
DeafModule, DeafModule,
SavingsDailyInterestModule, SavingsDailyInterestModule,
FdDashboardModule, FdDashboardModule,
RdDashboardModule,
DicgcModule, DicgcModule,
FiuModule, FiuModule,
GlReportsModule, GlReportsModule,
@@ -198,7 +195,6 @@ export function HttpLoaderFactory(http: HttpClient) {
AppRoutingModule, AppRoutingModule,
NotFoundComponent, NotFoundComponent,
CallbackComponent, CallbackComponent,
LoadingScreenComponent,
OAuthModule.forRoot() OAuthModule.forRoot()
], ],
providers: [ providers: [
@@ -44,11 +44,8 @@
<div class="cal-stat sat2nd4th"> <div class="cal-stat sat2nd4th">
<fa-icon icon="calendar-times" class="cal-stat__icon"></fa-icon> <fa-icon icon="calendar-times" class="cal-stat__icon"></fa-icon>
<div class="cal-stat__info"> <div class="cal-stat__info">
<div class="cal-stat__value">{{ overallStats.sat2nd4th + overallStats.weeklyOff }}</div> <div class="cal-stat__value">{{ overallStats.sat2nd4th }}</div>
<div class="cal-stat__label"> <div class="cal-stat__label">2nd &amp; 4th Sat</div>
{{ saturdayIsWorkingDay ? '2nd & 4th Sat' : 'Saturdays'
}}{{ overallStats.weeklyOff > 0 ? ' / Weekly Off' : '' }}
</div>
</div> </div>
</div> </div>
<div class="cal-stat holidays"> <div class="cal-stat holidays">
@@ -72,11 +69,7 @@
<div class="cal-legend__items"> <div class="cal-legend__items">
<div class="cal-legend__item"><span class="cal-legend__dot working"></span> Working Day</div> <div class="cal-legend__item"><span class="cal-legend__dot working"></span> Working Day</div>
<div class="cal-legend__item"><span class="cal-legend__dot sunday"></span> Sunday</div> <div class="cal-legend__item"><span class="cal-legend__dot sunday"></span> Sunday</div>
<div class="cal-legend__item"> <div class="cal-legend__item"><span class="cal-legend__dot sat2nd4th"></span> 2nd / 4th Saturday</div>
<span class="cal-legend__dot sat2nd4th"></span>
{{ saturdayIsWorkingDay ? '2nd / 4th Saturday' : 'Saturday'
}}{{ overallStats.weeklyOff > 0 ? ' / Weekly Off' : '' }}
</div>
<div class="cal-legend__item"><span class="cal-legend__dot holiday"></span> Holiday</div> <div class="cal-legend__item"><span class="cal-legend__dot holiday"></span> Holiday</div>
<div class="cal-legend__item"><span class="cal-legend__dot today"></span> Today</div> <div class="cal-legend__item"><span class="cal-legend__dot today"></span> Today</div>
</div> </div>
@@ -326,9 +319,7 @@
[class.cal-grid__day--other]="!day.isCurrentMonth" [class.cal-grid__day--other]="!day.isCurrentMonth"
[class.cal-grid__day--today]="day.isToday" [class.cal-grid__day--today]="day.isToday"
[class.cal-grid__day--sunday]="day.isSunday && day.isCurrentMonth" [class.cal-grid__day--sunday]="day.isSunday && day.isCurrentMonth"
[class.cal-grid__day--sat2nd4th]=" [class.cal-grid__day--sat2nd4th]="(day.is2ndSaturday || day.is4thSaturday) && day.isCurrentMonth"
(day.is2ndSaturday || day.is4thSaturday || day.isWeeklyOff) && day.isCurrentMonth
"
[class.cal-grid__day--holiday]="day.isHoliday && day.isCurrentMonth" [class.cal-grid__day--holiday]="day.isHoliday && day.isCurrentMonth"
[class.cal-grid__day--working]="day.isWorking && day.isCurrentMonth" [class.cal-grid__day--working]="day.isWorking && day.isCurrentMonth"
[matTooltip]=" [matTooltip]="
@@ -337,11 +328,9 @@
? '2nd Saturday Off' ? '2nd Saturday Off'
: day.is4thSaturday : day.is4thSaturday
? '4th Saturday Off' ? '4th Saturday Off'
: day.isWeeklyOff && day.isCurrentMonth : day.isSunday && day.isCurrentMonth
? weekDays[day.dayOfWeek] + ' Off (Working Days)' ? 'Sunday'
: day.isSunday && day.isCurrentMonth : '')
? 'Sunday'
: '')
" "
> >
{{ day.isCurrentMonth ? day.date : '' }} {{ day.isCurrentMonth ? day.date : '' }}
@@ -354,15 +343,10 @@
@if (month.holidays > 0) { @if (month.holidays > 0) {
<span class="summary-tag holiday">{{ month.holidays }} Holiday{{ month.holidays > 1 ? 's' : '' }}</span> <span class="summary-tag holiday">{{ month.holidays }} Holiday{{ month.holidays > 1 ? 's' : '' }}</span>
} }
@if (month.sundays > 0) { <span class="summary-tag sun">{{ month.sundays }} Sun</span>
<span class="summary-tag sun">{{ month.sundays }} Sun</span>
}
@if (month.secondFourthSat > 0) { @if (month.secondFourthSat > 0) {
<span class="summary-tag sat">{{ month.secondFourthSat }} Sat Off</span> <span class="summary-tag sat">{{ month.secondFourthSat }} Sat Off</span>
} }
@if (month.weeklyOff > 0) {
<span class="summary-tag sat">{{ month.weeklyOff }} Weekly Off</span>
}
</div> </div>
</div> </div>
} }
@@ -63,8 +63,6 @@ interface CalendarDay {
isSunday: boolean; isSunday: boolean;
is2ndSaturday: boolean; is2ndSaturday: boolean;
is4thSaturday: boolean; is4thSaturday: boolean;
/** Off every week because Admin > Working Days leaves this weekday out (Sunday aside). */
isWeeklyOff: boolean;
holidayName?: string; holidayName?: string;
dayOfWeek: number; // 0=Sun, 6=Sat dayOfWeek: number; // 0=Sun, 6=Sat
} }
@@ -78,23 +76,9 @@ interface MonthData {
nonWorkingDays: number; nonWorkingDays: number;
holidays: number; holidays: number;
sundays: number; sundays: number;
/** Saturdays off: the 2nd and 4th when Saturday is a working day, every one when it is not. */
secondFourthSat: number; secondFourthSat: number;
/** Other weekdays off every week because Working Days leaves them out. */
weeklyOff: number;
} }
/** Weekday codes in Date#getDay() order, as used by the /workingdays recurrence (BYDAY=MO,TU,...). */
const DAY_CODES = [
'SU',
'MO',
'TU',
'WE',
'TH',
'FR',
'SA'
];
@Component({ @Component({
selector: 'mifosx-bank-calendar', selector: 'mifosx-bank-calendar',
templateUrl: './bank-calendar.component.html', templateUrl: './bank-calendar.component.html',
@@ -134,7 +118,7 @@ export class BankCalendarComponent implements OnInit {
]; ];
workingDaysConfig: string[] = []; workingDaysConfig: string[] = [];
holidays: any[] = []; holidays: any[] = [];
overallStats = { working: 0, nonWorking: 0, holidays: 0, sundays: 0, sat2nd4th: 0, weeklyOff: 0, totalDays: 0 }; overallStats = { working: 0, nonWorking: 0, holidays: 0, sundays: 0, sat2nd4th: 0, totalDays: 0 };
// ───── Holiday list (office-wise) ───── // ───── Holiday list (office-wise) ─────
offices: OfficeLite[] = []; offices: OfficeLite[] = [];
@@ -218,8 +202,7 @@ export class BankCalendarComponent implements OnInit {
} }
private loadWorkingDays() { private loadWorkingDays() {
// Default Indian banking working days: Mon-Sat (Sun off, 2nd & 4th Sat off), used until // Default Indian banking working days: Mon-Sat (Sun off, 2nd & 4th Sat off)
// Admin > Working Days answers, or if it cannot be read.
this.workingDaysConfig = [ this.workingDaysConfig = [
'MO', 'MO',
'TU', 'TU',
@@ -232,19 +215,6 @@ export class BankCalendarComponent implements OnInit {
this.buildCalendar(); this.buildCalendar();
this.rebuildHolidayRows(); this.rebuildHolidayRows();
// The calendar has to agree with Admin > Working Days: a weekday unticked there is off every
// week here too.
this.organizationService.getWorkingDays().subscribe({
next: (data: any) => {
const configured = this.parseWorkingDays(data?.recurrence);
if (configured.length > 0) {
this.workingDaysConfig = configured;
this.buildCalendar();
}
},
error: () => {}
});
// Pull offices then fan-out a per-office holiday fetch so each office's // Pull offices then fan-out a per-office holiday fetch so each office's
// calendar entries are surfaced in the list panel (calendar grid still // calendar entries are surfaced in the list panel (calendar grid still
// unions everything for the year-at-a-glance view). // unions everything for the year-at-a-glance view).
@@ -303,23 +273,6 @@ export class BankCalendarComponent implements OnInit {
}); });
} }
/** Weekday codes out of a recurrence such as "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR". */
private parseWorkingDays(recurrence: string | undefined): string[] {
const byDay = /BYDAY=([^;]*)/.exec(recurrence || '');
if (!byDay) {
return [];
}
return byDay[1]
.split(',')
.map((d) => d.trim().toUpperCase())
.filter((d) => DAY_CODES.includes(d));
}
/** True when Admin > Working Days counts Saturday as a working day (so only the 2nd and 4th are off). */
get saturdayIsWorkingDay(): boolean {
return this.workingDaysConfig.includes('SA');
}
/** Flatten the holidays array into a presentable list with office labels. */ /** Flatten the holidays array into a presentable list with office labels. */
private rebuildHolidayRows(): void { private rebuildHolidayRows(): void {
this.holidayRows = this.holidays.map((h: any) => { this.holidayRows = this.holidays.map((h: any) => {
@@ -558,15 +511,7 @@ export class BankCalendarComponent implements OnInit {
buildCalendar() { buildCalendar() {
this.months = []; this.months = [];
this.overallStats = { this.overallStats = { working: 0, nonWorking: 0, holidays: 0, sundays: 0, sat2nd4th: 0, totalDays: 0 };
working: 0,
nonWorking: 0,
holidays: 0,
sundays: 0,
sat2nd4th: 0,
weeklyOff: 0,
totalDays: 0
};
for (let m = 0; m < 12; m++) { for (let m = 0; m < 12; m++) {
const monthData = this.buildMonth(m, this.currentYear); const monthData = this.buildMonth(m, this.currentYear);
@@ -576,7 +521,6 @@ export class BankCalendarComponent implements OnInit {
this.overallStats.holidays += monthData.holidays; this.overallStats.holidays += monthData.holidays;
this.overallStats.sundays += monthData.sundays; this.overallStats.sundays += monthData.sundays;
this.overallStats.sat2nd4th += monthData.secondFourthSat; this.overallStats.sat2nd4th += monthData.secondFourthSat;
this.overallStats.weeklyOff += monthData.weeklyOff;
} }
this.overallStats.totalDays = this.overallStats.working + this.overallStats.nonWorking; this.overallStats.totalDays = this.overallStats.working + this.overallStats.nonWorking;
} }
@@ -608,7 +552,6 @@ export class BankCalendarComponent implements OnInit {
let holidayCount = 0; let holidayCount = 0;
let sundayCount = 0; let sundayCount = 0;
let sat2nd4thCount = 0; let sat2nd4thCount = 0;
let weeklyOffCount = 0;
// Previous month padding // Previous month padding
const prevMonthDays = new Date(year, month, 0).getDate(); const prevMonthDays = new Date(year, month, 0).getDate();
@@ -624,7 +567,6 @@ export class BankCalendarComponent implements OnInit {
isSunday: false, isSunday: false,
is2ndSaturday: false, is2ndSaturday: false,
is4thSaturday: false, is4thSaturday: false,
isWeeklyOff: false,
dayOfWeek: (startDayOfWeek - i - 1 + 7) % 7 dayOfWeek: (startDayOfWeek - i - 1 + 7) % 7
}); });
} }
@@ -634,29 +576,24 @@ export class BankCalendarComponent implements OnInit {
for (let d = 1; d <= daysInMonth; d++) { for (let d = 1; d <= daysInMonth; d++) {
const date = new Date(year, month, d); const date = new Date(year, month, d);
const dow = date.getDay(); const dow = date.getDay();
const isSunday = dow === 0;
const isSaturday = dow === 6; const isSaturday = dow === 6;
const isWorkingWeekday = this.workingDaysConfig.includes(DAY_CODES[dow]);
const isSunday = dow === 0 && !isWorkingWeekday;
if (isSaturday) saturdayCount++; if (isSaturday) saturdayCount++;
// RBI: when Saturday is a working day the 2nd and 4th are still off. When Working Days leaves const is2ndSat = isSaturday && saturdayCount === 2;
// Saturday out, every Saturday is a weekly off instead. const is4thSat = isSaturday && saturdayCount === 4;
const is2ndSat = isSaturday && isWorkingWeekday && saturdayCount === 2;
const is4thSat = isSaturday && isWorkingWeekday && saturdayCount === 4;
const isWeeklyOff = dow !== 0 && !isWorkingWeekday;
const isToday = date.toDateString() === today.toDateString(); const isToday = date.toDateString() === today.toDateString();
// Check if holiday // Check if holiday
const holiday = this.getHolidayForDate(year, month, d); const holiday = this.getHolidayForDate(year, month, d);
const isHoliday = !!holiday; const isHoliday = !!holiday;
// Non-working: Sunday, 2nd Sat, 4th Sat, a weekly off from Working Days, or holiday // Non-working: Sunday, 2nd Sat, 4th Sat, or holiday
const isNonWorking = isSunday || is2ndSat || is4thSat || isWeeklyOff || isHoliday; const isNonWorking = isSunday || is2ndSat || is4thSat || isHoliday;
if (isSunday) sundayCount++; if (isSunday) sundayCount++;
if (is2ndSat || is4thSat || (isSaturday && isWeeklyOff)) sat2nd4thCount++; if (is2ndSat || is4thSat) sat2nd4thCount++;
if (isWeeklyOff && !isSaturday) weeklyOffCount++;
if (isHoliday) holidayCount++; if (isHoliday) holidayCount++;
if (isNonWorking) { if (isNonWorking) {
@@ -676,7 +613,6 @@ export class BankCalendarComponent implements OnInit {
isSunday, isSunday,
is2ndSaturday: is2ndSat, is2ndSaturday: is2ndSat,
is4thSaturday: is4thSat, is4thSaturday: is4thSat,
isWeeklyOff,
holidayName: holiday?.name, holidayName: holiday?.name,
dayOfWeek: dow dayOfWeek: dow
}); });
@@ -696,7 +632,6 @@ export class BankCalendarComponent implements OnInit {
isSunday: false, isSunday: false,
is2ndSaturday: false, is2ndSaturday: false,
is4thSaturday: false, is4thSaturday: false,
isWeeklyOff: false,
dayOfWeek: days.length % 7 dayOfWeek: days.length % 7
}); });
} }
@@ -710,8 +645,7 @@ export class BankCalendarComponent implements OnInit {
nonWorkingDays: nonWorkingCount, nonWorkingDays: nonWorkingCount,
holidays: holidayCount, holidays: holidayCount,
sundays: sundayCount, sundays: sundayCount,
secondFourthSat: sat2nd4thCount, secondFourthSat: sat2nd4thCount
weeklyOff: weeklyOffCount
}; };
} }
@@ -1,114 +0,0 @@
<!--
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>
@@ -1,82 +0,0 @@
/**
* 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;
}
@@ -1,112 +0,0 @@
/**
* 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}`;
}
}
@@ -352,51 +352,6 @@
</div> </div>
} }
<!-- Interest waiting to be posted as this branch closes. Posting runs as part of the close, so
anything unapproved stops it: the branch sees here what it has to approve and where, rather
than finding out from a refusal after filling in the whole count. -->
@if (preview?.fdInterestDue?.length) {
<div class="bd-calc bd-calc--fd">
<div class="bd-calc__head">
<mat-icon>savings</mat-icon>
<strong>Fixed deposit interest due today</strong>
</div>
@for (d of preview.fdInterestDue; track d.productId) {
<div class="bd-calc__row">
<span>
{{ d.productName }} · {{ d.fdType }} · {{ d.accountCount }} deposit(s)
@if (d.reportStatus === 'APPROVED' || d.reportStatus === 'POSTED') {
<span class="bd-fd-ok">{{ d.reportStatus }}</span>
} @else {
<span class="bd-fd-pending">{{ d.reportStatus === 'NONE' ? 'NO REPORT' : d.reportStatus }}</span>
}
</span>
<span class="bd-calc__amt">₹{{ d.totalInterest | number: '1.2-2' }}</span>
</div>
}
</div>
}
@if (preview?.fdInterestPending?.length) {
<div class="bd-warn">
<mat-icon>warning</mat-icon>
<div>
<strong>The day cannot be closed yet.</strong> Fixed deposit interest is not approved for:
{{ preview.fdInterestPending.join(', ') }}. Approve it under Reports → FD Interest Posting Reports, then
close the day. The user who generated a report cannot approve it.
</div>
</div>
}
@if (preview?.savingsInterestPending?.length) {
<div class="bd-warn">
<mat-icon>warning</mat-icon>
<div>
<strong>The day cannot be closed yet.</strong> Savings interest is not approved for:
{{ preview.savingsInterestPending.join(', ') }}. Approve it under Reports → Interest Posting Reports, then
close the day.
</div>
</div>
}
<!-- What every cash point under this branch is actually holding right now, fetched <!-- What every cash point under this branch is actually holding right now, fetched
automatically — so closing the day doesn't mean separately checking Vault Position and automatically — so closing the day doesn't mean separately checking Vault Position and
every cashier's own Cashier Position screen by hand. --> every cashier's own Cashier Position screen by hand. -->
@@ -195,75 +195,6 @@
font-size: 11px; font-size: 11px;
color: #94a3b8; color: #94a3b8;
} }
/* Names the block, for the interest panels that sit beside the cash arithmetic. */
&__head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
padding-bottom: 6px;
border-bottom: 1px solid #e2e8f0;
font-size: 13px;
color: #0d1b2a;
mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #1d4ed8;
}
}
}
/* Interest is money leaving as the day closes, not cash counted in the drawer. */
.bd-calc--fd {
border-left: 3px solid #1d4ed8;
}
.bd-fd-ok,
.bd-fd-pending {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
}
.bd-fd-ok {
background: #dcfce7;
color: #15803d;
}
.bd-fd-pending {
background: #fef3c7;
color: #b45309;
}
/* Why the close will be refused, said before the count is filled in rather than after. */
.bd-warn {
display: flex;
align-items: flex-start;
gap: 8px;
max-width: 640px;
margin-bottom: 14px;
padding: 10px 14px;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 8px;
font-size: 12px;
line-height: 1.5;
color: #78350f;
mat-icon {
flex-shrink: 0;
font-size: 20px;
width: 20px;
height: 20px;
color: #b45309;
}
} }
.bd-hint { .bd-hint {
@@ -22,255 +22,50 @@
</div> </div>
</header> </header>
<!-- ── Cashier: whose drawer takes the customer's notes and gives the change ── --> <!-- ── Customer Info Bar ── -->
@if (cashier) { <div class="cx-customer-bar">
<section class="cx-cashier"> <div
<div class="cx-avatar cx-avatar--sm">{{ cashierInitials }}</div> class="cx-customer-toggle"
<div class="cx-cashier__id"> [class.cx-customer-toggle--active]="isAccountHolder"
<div class="cx-cashier__label">Cashier at the counter</div> (click)="toggleAccountHolder()"
<div class="cx-cashier__name">{{ cashier.name || '—' }}</div> >
<div class="cx-cashier__flow"> <mat-icon>{{ isAccountHolder ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
<span><mat-icon>south</mat-icon> Receives from customer</span> <span>Account Holder</span>
<span><mat-icon>north</mat-icon> Gives to customer</span>
</div>
</div>
<div class="cx-cashier__stats">
<div>
<span>Counter</span><strong>{{ cashier.tellerName || '—' }}</strong>
</div>
<div>
<span>Branch</span><strong>{{ cashier.officeName || '—' }}</strong>
</div>
<div>
<span>Allocated today</span
><strong>{{
cashier.allocatedAmount === null ? '—' : '₹' + (cashier.allocatedAmount | number: '1.2-2')
}}</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> </div>
</section>
@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>
<label class="cx-field cx-field--inline cx-field--pan">
<span>PAN / Aadhaar *</span>
<input
type="text"
[value]="customerIdProof"
(input)="customerIdProof = $any($event.target).value"
placeholder="ABCDE1234F"
maxlength="20"
/>
</label>
}
</div>
<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">
@@ -283,7 +78,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 cx-row--stock"> <div class="cx-row">
<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>
@@ -295,9 +90,6 @@
/> />
<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
> >
@@ -307,7 +99,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 cx-row--stock"> <div class="cx-row">
<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>
@@ -319,9 +111,6 @@
/> />
<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
> >
@@ -342,7 +131,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 cx-row--stock" [class.cx-row--over]="exceedsAvailable(d)"> <div class="cx-row">
<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>
@@ -352,16 +141,8 @@
[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)" [disabled]="!canGiveMore(d)">+</button> <button type="button" (click)="bump('g', d, 1)">+</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
> >
@@ -371,7 +152,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 cx-row--stock" [class.cx-row--over]="exceedsAvailable(d)"> <div class="cx-row">
<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>
@@ -381,16 +162,8 @@
[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)" [disabled]="!canGiveMore(d)">+</button> <button type="button" (click)="bump('g', d, 1)">+</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
> >
@@ -400,30 +173,6 @@
</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>
@@ -464,15 +213,9 @@
</div> </div>
</div> </div>
} }
@if (panMissing) { @if (needsIdProof && !customerIdProof.trim()) {
<div class="cx-warn cx-warn--pan"> <div class="cx-warn cx-warn--pan">
<mat-icon>badge</mat-icon> Enter the customer's PAN to proceed (amount above ₹50,000). <mat-icon>badge</mat-icon> Enter customer PAN / Aadhaar to proceed (amount ≥ ₹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,584 +73,99 @@
} }
} }
/* ── Customer: existing client or walk-in, plus PAN ── */ /* ── Customer info bar ── */
.cx-cust { .cx-customer-bar {
background: #fff; display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: #f8fafc;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
border-radius: 14px; border-radius: 10px;
box-shadow: 0 1px 2px rgb(15 23 42 / 4%); flex-wrap: wrap;
overflow: hidden; }
&__head { .cx-customer-toggle {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; gap: 6px;
flex-wrap: wrap; font-size: 13px;
gap: 12px; font-weight: 600;
padding: 12px 16px; color: #475569;
background: linear-gradient(180deg, #f8fafc, #f1f5f9); cursor: pointer;
border-bottom: 1px solid #e2e8f0; user-select: none;
}
&__title { mat-icon {
display: flex; font-size: 20px;
align-items: center; height: 20px;
gap: 10px; width: 20px;
}
&__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;
} }
&__empty-title { &--active {
font-size: 14px; color: #1e40af;
font-weight: 600;
color: #334155;
}
&__empty-sub { mat-icon {
margin-bottom: 8px; color: #1e40af;
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 { .cx-walk-in {
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; display: flex;
align-items: center; 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 {
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-kyc {
display: inline-flex;
align-items: center;
gap: 4px; gap: 4px;
padding: 2px 8px; font-size: 12px;
border-radius: 999px; color: #64748b;
font-size: 11px;
font-weight: 600;
mat-icon { mat-icon {
font-size: 14px; font-size: 16px;
width: 14px; height: 16px;
height: 14px; width: 16px;
}
&--ok {
background: #dcfce7;
color: #166534;
}
&--warn {
background: #fef3c7;
color: #92400e;
}
&--sm {
margin-left: 6px;
padding: 1px 6px;
font-size: 10px;
} }
} }
.cx-chip-tag { .cx-pan-required {
padding: 2px 8px; display: flex;
border-radius: 6px;
background: #eef2ff;
font-size: 11px;
font-weight: 600;
color: #3730a3;
}
.cx-link-btn {
display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 6px;
height: 30px; padding: 4px 10px;
padding: 0 10px; background: #fffbeb;
border: 0; border: 1px solid #fcd34d;
border-radius: 8px; border-radius: 6px;
background: transparent;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: #1e40af; color: #92400e;
cursor: pointer;
mat-icon { mat-icon {
font-size: 16px; font-size: 16px;
width: 16px;
height: 16px; height: 16px;
} width: 16px;
color: #d97706;
&:hover {
background: #eff6ff;
}
&--danger {
color: #b91c1c;
&:hover {
background: #fef2f2;
}
} }
} }
/* PAN: neutral until needed, amber when required and missing, red when malformed, green when valid */ .cx-field--inline {
.cx-pan { flex-direction: row;
display: flex; align-items: center;
flex-direction: column;
align-self: start;
gap: 8px; gap: 8px;
padding: 14px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
&__head { span {
display: flex; white-space: nowrap;
align-items: center;
gap: 8px;
mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: #475569;
}
} }
&__label { input {
font-size: 13px; width: 180px;
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-spin { .cx-field--pan input {
animation: cx-spin 1s linear infinite; width: 160px;
} border-color: #fcd34d;
@keyframes cx-spin { &:focus {
to { outline: none;
transform: rotate(360deg); border-color: #d97706;
}
}
@media (width <= 900px) {
.cx-cust__body {
grid-template-columns: 1fr;
}
}
@media (width <= 600px) {
.cx-cust__walkin {
grid-template-columns: 1fr;
} }
} }
@@ -830,129 +345,6 @@
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,15 +11,7 @@ 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 {
@@ -29,47 +21,6 @@ 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',
@@ -80,14 +31,11 @@ const KYC_STATUS: Record<number, string> = {
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[] = [];
@@ -99,17 +47,11 @@ export class CashExchangeEntryComponent implements OnInit {
saving = false; saving = false;
// ── Customer info ── // ── Customer info ──
/** An existing client found through Customer Search, or a walk-in identified at the counter. */ isAccountHolder = false;
customerMode: 'existing' | 'walkin' = 'walkin'; accountNo = '';
selectedCustomer: SelectedCustomer | null = null; customerIdProof = '';
loadingCustomer = false;
walkInName = '';
walkInMobile = '';
panNumber = '';
// ── Cashier at the counter, and their position (for the denomination overdraft check) ── // ── Cashier position (for 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;
@@ -146,19 +88,7 @@ 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;
@@ -166,31 +96,6 @@ 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;
} }
@@ -224,102 +129,14 @@ export class CashExchangeEntryComponent implements OnInit {
return this.receivedTotal > 0 && this.receivedTotal === this.givenTotal; return this.receivedTotal > 0 && this.receivedTotal === this.givenTotal;
} }
/** Above ₹50,000 the customer's PAN is mandatory (Income Tax Rule 114B, followed under RBI guidelines). */ /** Above ₹50,000 PAN/ID is mandatory per RBI guideline */
get needsPan(): boolean { get needsIdProof(): boolean {
return this.receivedTotal > PAN_MANDATORY_ABOVE; return this.receivedTotal >= 50000;
}
/** 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 }> {
// Without a cashier every denomination would read as "0 available"; the missing cashier is the if (!this.positionLoaded) return [];
// 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);
@@ -330,77 +147,21 @@ export class CashExchangeEntryComponent implements OnInit {
} }
get valid(): boolean { get valid(): boolean {
return ( return this.matches && (!this.needsIdProof || this.customerIdProof.trim().length > 0) && !this.hasGivenOverdraft;
this.matches &&
!!this.cashier &&
!this.hasGivenOverdraft &&
!this.panFormatInvalid &&
!this.panMissing &&
this.customerIdentified &&
!this.loadingCustomer
);
} }
setCustomerMode(mode: 'existing' | 'walkin'): void { toggleAccountHolder(): void {
if (this.customerMode === mode) return; this.isAccountHolder = !this.isAccountHolder;
this.customerMode = mode; if (!this.isAccountHolder) this.accountNo = '';
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.customerMode = 'walkin'; this.accountNo = '';
this.selectedCustomer = null; this.customerIdProof = '';
this.walkInName = ''; this.isAccountHolder = false;
this.walkInMobile = '';
this.panNumber = '';
} }
submit(): void { submit(): void {
@@ -410,17 +171,11 @@ 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,
clientId: customer?.clientId ?? null, customerIdProof: this.customerIdProof.trim() || null,
accountNo: customer?.accountNo ?? null, accountNo: this.isAccountHolder && this.accountNo.trim() ? this.accountNo.trim() : 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,11 +11,25 @@
<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, inter-cashier movements and cash exchanges.</p> <p class="pg-sub">All transfers, settlements, and inter-cashier movements. Reverse any active transaction.</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>
} }
@@ -120,6 +134,11 @@
> >
<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>
@@ -168,12 +187,6 @@
<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,6 +47,38 @@
} }
} }
.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,7 +8,9 @@
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';
@@ -29,8 +31,6 @@ 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,10 +52,7 @@ 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',
@@ -66,13 +63,16 @@ 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,6 +99,10 @@ 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 {
@@ -208,8 +212,7 @@ 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: this.exchangeParty(e), fromParty: e.accountNo ? `Account ${e.accountNo}` : 'Walk-in Customer',
panNumber: e.panNumber ?? null,
toParty: e.performedByUsername || '—', toParty: e.performedByUsername || '—',
amount: e.exchangeAmount, amount: e.exchangeAmount,
note: e.note, note: e.note,
@@ -307,8 +310,7 @@ 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: this.exchangeParty(e), fromParty: e.accountNo ? `Account ${e.accountNo}` : 'Walk-in Customer',
panNumber: e.panNumber ?? null,
toParty: e.performedByUsername || '—', toParty: e.performedByUsername || '—',
amount: e.exchangeAmount, amount: e.exchangeAmount,
note: e.note, note: e.note,
@@ -390,12 +392,39 @@ export class CashHistoryComponent implements OnInit {
this.detail = null; this.detail = null;
} }
/** Who the exchange was with: the customer's name (and account, if one), else the account, else a walk-in. */ startReverse(row: TxnRow): void {
private exchangeParty(e: any): string { this.reversingId = row.id;
if (e.customerName) { this.reversingType = row.type;
return e.accountNo ? `${e.customerName} (A/C ${e.accountNo})` : e.customerName; this.reverseReason = '';
} }
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 {
@@ -1,229 +0,0 @@
<!--
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>
@@ -1,573 +0,0 @@
/**
* 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;
}
}
@@ -1,190 +0,0 @@
/**
* 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,15 +13,7 @@
<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>
<div class="ct-head-actions"> <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)="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">
@@ -163,56 +155,7 @@
<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>send</mat-icon> Send for approval <mat-icon>swap_horiz</mat-icon> Record Transfer
</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,131 +49,3 @@
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,10 +6,9 @@
* 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, TemplateRef, ViewChild, 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 { 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';
@@ -19,7 +18,6 @@ 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;
@@ -41,7 +39,6 @@ interface Denom {
CommonModule, CommonModule,
FormsModule, FormsModule,
MatIconModule, MatIconModule,
MatDialogModule,
MatSnackBarModule, MatSnackBarModule,
MatFormFieldModule, MatFormFieldModule,
MatSelectModule, MatSelectModule,
@@ -51,11 +48,6 @@ 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[] = [];
@@ -90,34 +82,7 @@ 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({
@@ -141,14 +106,7 @@ export class CashTransferComponent implements OnInit {
.getTellers() .getTellers()
.pipe(catchError(() => of([] as any[]))) .pipe(catchError(() => of([] as any[])))
.subscribe((list) => { .subscribe((list) => {
// The vault and its cash are physical, so a branch moves cash only from its own tellers. The this.tellers = (list || []).map((t: any) => ({ id: t.id, name: t.name }));
// 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);
} }
@@ -287,11 +245,16 @@ 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.createCashTransferRequest(payload).subscribe({ this.service.createCashTransfer(payload).subscribe({
next: () => { next: (res: any) => {
// Nothing has moved yet: a manager approves the allocation first, and only then does the cash leave the vault. if (res?.glWarning) {
this.snackBar.open('Cash transfer sent for manager approval', 'Close', { duration: 5000 }); this.snackBar.open(`Transfer saved (GL warning: ${res.glWarning})`, 'Close', {
this.loadMyRequests(); duration: 8000,
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,7 +23,6 @@ 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';
@@ -83,13 +82,6 @@ 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: () =>
@@ -233,13 +225,6 @@ 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
@@ -298,12 +283,6 @@ 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,
+13 -29
View File
@@ -32,6 +32,9 @@ 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[]> {
@@ -47,21 +50,8 @@ export class CashierService {
} }
// ── Cash Transfer ── // ── Cash Transfer ──
/** Cash leaves the vault only when a different person approves, so the screen raises a request, not a transfer. */ createCashTransfer(data: any): Observable<any> {
createCashTransferRequest(data: any): Observable<any> { return this.http.post('/cashtransfer', data);
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);
@@ -70,6 +60,9 @@ 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> {
@@ -82,6 +75,9 @@ 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> {
@@ -94,10 +90,8 @@ 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}`);
} }
/** One cashier's details, today's vault allocation and denomination-wise cash, for either side of a transfer. */ reverseInterCashierTransfer(id: number, reason: string): Observable<any> {
getInterCashierCashierSummary(cashierId: number, date: string): Observable<any> { return this.http.post(`/cashintercashier/${id}/reverse`, { reason });
const params = new HttpParams().set('cashierId', cashierId).set('date', date);
return this.http.get<any>('/cashintercashier/cashier-summary', { params });
} }
// ── Reconciliation ── // ── Reconciliation ──
@@ -324,16 +318,6 @@ 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,7 +202,6 @@
<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>
@@ -232,18 +231,6 @@
<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 ?? '—' }}
@@ -269,7 +256,7 @@
— —
} }
</td> </td>
<td colspan="6"></td> <td colspan="5"></td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
@@ -14,7 +14,6 @@ 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.
@@ -27,11 +26,6 @@ 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;
@@ -64,8 +58,7 @@ interface DayBookRow {
imports: [ imports: [
CommonModule, CommonModule,
FormsModule, FormsModule,
MatIconModule, MatIconModule
VoucherStatusComponent
] ]
}) })
export class DayBookComponent implements OnInit { export class DayBookComponent implements OnInit {
@@ -11,29 +11,41 @@
<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">Hand over denomination-wise cash from your drawer to another cashier at your counter.</p> <p class="pg-sub">Move denomination-wise cash between two cashiers within the same teller.</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>
@if (ownCashierMissing) {
<div class="ict-alert">
<mat-icon>person_off</mat-icon>
Your login is not linked to a cashier. An inter-cashier transfer is made by the cashier handing the cash over, so
log in as that cashier.
</div>
}
<div class="pg-toolbar pg-toolbar--mat"> <div class="pg-toolbar pg-toolbar--mat">
<mat-form-field appearance="outline" subscriptSizing="dynamic"> @if (tellers.length === 1) {
<mat-label>Teller</mat-label> <mat-form-field appearance="outline" subscriptSizing="dynamic">
<input matInput type="text" [value]="tellerName || '—'" readonly /> <mat-label>Teller</mat-label>
</mat-form-field> <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>
}
@if (tellers.length === 0) {
<mat-option [value]="null" disabled>No tellers configured</mat-option>
}
</mat-select>
</mat-form-field>
}
<!-- The sender is always the cashier who is logged in; nothing to pick. -->
<mat-form-field appearance="outline" subscriptSizing="dynamic"> <mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>From (You)</mat-label> <mat-label>From (Cashier)</mat-label>
<input matInput type="text" [value]="fromParty || '—'" readonly /> <mat-select [value]="fromCashierId" (selectionChange)="onFromSelect($event.value)" [disabled]="!selectedTellerId">
@for (c of availableFrom; track c.id) {
<mat-option [value]="c.id">{{ c.label }}</mat-option>
}
@if (selectedTellerId && allCashiers.length === 0 && !loadingCashiers) {
<mat-option [value]="null" disabled>No cashiers</mat-option>
}
</mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" subscriptSizing="dynamic"> <mat-form-field appearance="outline" subscriptSizing="dynamic">
@@ -42,7 +54,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 && !loadingCashiers && availableTo.length === 0) { @if (fromCashierId && 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>
@@ -50,7 +62,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)="onDateChange($any($event.target).value)" /> <input matInput type="date" [value]="transferDate" (change)="transferDate = $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">
@@ -59,102 +71,26 @@
</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="5">Bank Notes</td> <td colspan="3">Bank Notes</td>
</tr> </tr>
} }
@for (d of notes; track d.id) { @for (d of notes; track d.id) {
<tr [class.ict-row--over]="exceedsHeld(d)"> <tr>
<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>
@@ -163,28 +99,18 @@
</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="5">Coins</td> <td colspan="3">Coins</td>
</tr> </tr>
} }
@for (d of coins; track d.id) { @for (d of coins; track d.id) {
<tr [class.ict-row--over]="exceedsHeld(d)"> <tr>
<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>
@@ -193,34 +119,17 @@
</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="5" class="pg-empty">No active denominations. Add some in Cash Denomination.</td> <td colspan="3" 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()">
@@ -1,150 +0,0 @@
/**
* 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,27 +29,12 @@ 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: [ styleUrls: ['../cashier-shared.scss'],
'../cashier-shared.scss',
'./inter-cashier-transfer.component.scss'
],
standalone: true, standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
@@ -72,12 +57,7 @@ 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;
@@ -86,19 +66,15 @@ 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
]; ];
} }
/** Everyone under the same teller except the sender. */ get availableFrom(): Cashier[] {
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);
} }
@@ -122,20 +98,25 @@ export class InterCashierTransferComponent implements OnInit {
this.coins = []; this.coins = [];
} }
}); });
// The sender is the cashier behind this login; their counter then gives the receivers to pick from. this.service
this.service.getCurrentCashierInfo().subscribe((info) => { .getTellers()
if (!info) { .pipe(catchError(() => of([] as any[])))
this.ownCashierMissing = true; .subscribe((list) => {
return; this.tellers = (list || []).map((t: any) => ({ id: t.id, name: t.name }));
} if (this.tellers.length === 1) {
this.fromCashierId = info.cashierId; this.onTellerSelect(this.tellers[0].id);
this.fromParty = info.cashierName; }
this.loadSummary('from'); });
});
} }
/** The other cashiers at this counter, one of whom receives the cash. */ onTellerSelect(tellerId: number): void {
private loadReceivers(tellerId: number): void { this.selectedTellerId = tellerId;
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)
@@ -146,90 +127,20 @@ 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 {
@@ -249,14 +160,7 @@ 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 ( return this.total > 0 && !!this.selectedTellerId && !!this.fromCashierId && !!this.toCashierId;
this.total > 0 &&
!!this.selectedTellerId &&
!!this.fromCashierId &&
!!this.toCashierId &&
this.bothAllocated &&
!this.anyExceedsHeld
);
} }
clear(): void { clear(): void {
@@ -283,12 +187,10 @@ 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 = '';
// The sender stays the logged-in cashier; the receiver is picked afresh, and the sender's holdings this.fromCashierId = null;
// 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,7 +146,6 @@
<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>
@@ -204,18 +203,6 @@
{{ 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>
} }
+1 -8
View File
@@ -15,7 +15,6 @@ 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';
@@ -25,11 +24,6 @@ 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;
@@ -82,8 +76,7 @@ interface MyWorkReport {
CommonModule, CommonModule,
FormsModule, FormsModule,
MatIconModule, MatIconModule,
MatDialogModule, MatDialogModule
VoucherStatusComponent
] ]
}) })
export class MyWorkComponent implements OnInit { export class MyWorkComponent implements OnInit {
@@ -11,7 +11,6 @@ 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
@@ -19,10 +18,6 @@ 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;
@@ -63,8 +58,7 @@ export interface VoucherDetailDialogData {
CommonModule, CommonModule,
MatDialogModule, MatDialogModule,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule
VoucherStatusComponent
], ],
template: ` template: `
<div class="vd-shell"> <div class="vd-shell">
@@ -72,15 +66,7 @@ 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> <h2>{{ detail.voucherNo }}</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,21 +19,34 @@
<!-- ── 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">
<!-- A reconciliation is the cashier's own count of their own drawer: nothing to pick. --> @if (tellers.length === 1) {
<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>Teller</mat-label> <mat-label>Cashier</mat-label>
<input matInput type="text" [value]="ownTellerName || '—'" readonly /> <mat-select
</mat-form-field> [value]="selectedCashierId"
<mat-form-field appearance="outline" subscriptSizing="dynamic"> (selectionChange)="onCashierSelect($event.value)"
<mat-label>Cashier (You)</mat-label> [disabled]="!selectedTellerId"
<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,6 +12,7 @@ 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';
@@ -57,6 +58,7 @@ interface ReconRecord {
MatIconModule, MatIconModule,
MatSnackBarModule, MatSnackBarModule,
MatFormFieldModule, MatFormFieldModule,
MatSelectModule,
MatInputModule, MatInputModule,
MatTabsModule MatTabsModule
] ]
@@ -65,14 +67,9 @@ 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 = '';
@@ -91,28 +88,42 @@ 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.lockToOwnCashier(); this.service
.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();
} }
/** Take the logged-in cashier as the one being reconciled, with their counter for the record. */ onTellerSelect(tellerId: number): void {
private lockToOwnCashier(): void { this.selectedTellerId = tellerId;
this.service.getCurrentCashierInfo().subscribe((info) => { this.selectedCashierId = null;
if (!info) { this.cashierName = '';
this.ownCashierMissing = true; this.cashiers = [];
return; this.rows = [];
} if (!tellerId) return;
this.selectedCashierId = info.cashierId; this.service
this.cashierName = info.cashierName; .getCashiersForTeller(tellerId)
this.service .pipe(catchError(() => of({ cashiers: [] })))
.getInterCashierCashierSummary(info.cashierId, this.reconDate) .subscribe((r: any) => {
.pipe(catchError(() => of(null))) this.cashiers = (r?.cashiers || []).map((c: any) => ({ id: c.id, label: c.staffName }));
.subscribe((r: any) => { if (this.cashiers.length === 1) {
this.selectedTellerId = r?.tellerId ?? null; this.onCashierSelect(this.cashiers[0].id);
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,8 +117,6 @@
<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)"
> >
@@ -129,16 +127,11 @@
</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 <select class="ws-f__ctl" [(ngModel)]="row.br" (click)="$event.stopPropagation()">
class="ws-f__ctl" <option [ngValue]="1">001 · Main</option>
[(ngModel)]="row.br" <option [ngValue]="2">002 · M.G. Road</option>
[disabled]="branchSelectOptions.length <= 1" <option [ngValue]="14">014 · Station Rd</option>
[title]="branchSelectOptions.length <= 1 ? 'Your branch' : 'Branch'" <option [ngValue]="27">027 · Industrial</option>
(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') {
@@ -184,7 +177,13 @@
class="ws-f__ctl" class="ws-f__ctl"
[(ngModel)]="row.acTyp" [(ngModel)]="row.acTyp"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
(change)="isCreditOnly(row) && (row.dbCr = 'Cr')" (change)="
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>
@@ -267,7 +266,12 @@
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]="isCreditOnly(row)" [disabled]="
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
@@ -276,7 +280,6 @@
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
@@ -708,98 +711,70 @@
<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>
{{ isGlAccount ? 'GL Account Information' : 'Personal Information' }} Personal Information
</div> </div>
@if (isGlAccount) { <div class="te-panel__body">
<div class="te-panel__body"> <div class="te-field">
@for (f of glInfo; track f.label) { <span class="te-label">Branch</span><span class="te-value">{{ officeName }}</span>
<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>
} @else { <div class="te-field">
<div class="te-panel__body"> <span class="te-label">A/c No.</span
<div class="te-field"> ><span class="te-value te-mono">{{ accountDetails.accountNo }}</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 class="te-field">
<span class="te-label">A/c No.</span
><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">
<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">
<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>
<!-- Joint Holders + Nominees --> <!-- Joint Holders + Nominees -->
@@ -954,78 +929,76 @@
<!-- Other Info + KYC + Account Balances --> <!-- Other Info + KYC + Account Balances -->
<div class="te-panel"> <div class="te-panel">
@if (!isGlAccount) { <div class="te-panel__header">
<div class="te-panel__header"> <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"> <rect x="3" y="4" width="18" height="18" rx="2" />
<rect x="3" y="4" width="18" height="18" rx="2" /> <line x1="16" y1="2" x2="16" y2="6" />
<line x1="16" y1="2" x2="16" y2="6" /> <line x1="8" y1="2" x2="8" y2="6" />
<line x1="8" y1="2" x2="8" y2="6" /> <line x1="3" y1="10" x2="21" y2="10" />
<line x1="3" y1="10" x2="21" y2="10" /> </svg>
</svg> Other Information
Other Information </div>
<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-panel__body"> <div class="te-field">
<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">Phone No.</span><span class="te-value">{{ clientPhone }}</span> <span class="te-label">No. of Shares Held</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">Client ID</span <span class="te-label">Market Price / Share</span
><span class="te-value te-mono">{{ accountDetails.clientId }}</span> ><span class="te-value te-mono"
>{{ currencySymbol }}{{ accountDetails.currentMarketPrice | number: '1.2-2' }}</span
>
</div> </div>
<div class="te-field"> <div class="te-field">
<span class="te-label">PAN</span><span class="te-value te-mono">{{ panNumber }}</span> <span class="te-label">Resolution No.</span
><span class="te-value te-mono">{{ accountDetails.resolutionNumber || '—' }}</span>
</div> </div>
<div class="te-field"> <div class="te-field">
<span class="te-label">KYC Status</span> <span class="te-label">Linked Savings A/C No.</span
<span class="te-value" [style.color]="kycDetails?.kycStatus === 300 ? '#059669' : '#f59e0b'">{{ ><span class="te-value te-mono">{{ accountDetails.savingsAccountNumber || '—' }}</span>
kycStatus
}}</span>
</div> </div>
<div class="te-field"> @if (accountDetails.linkedLoanAccountNo) {
<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">Linked Loan A/C No.</span
><span class="te-value te-mono">{{ accountDetails.summary?.totalApprovedShares ?? 0 }}</span> ><span class="te-value te-mono">{{ accountDetails.linkedLoanAccountNo }}</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" [class.te-panel__header--mt]="!isGlAccount"> <div class="te-panel__header te-panel__header--mt">
<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" />
@@ -1218,24 +1191,7 @@
: '—') : '—')
}}</span }}</span
> >
<span class="te-acs-kv" <span class="te-acs-kv"><b>Branch</b> {{ officeName ?? '—' }}</span>
><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>
{{ {{
@@ -1611,8 +1567,6 @@
<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)"
> >
@@ -1623,16 +1577,11 @@
</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 <select class="ws-f__ctl" [(ngModel)]="row.br" (click)="$event.stopPropagation()">
class="ws-f__ctl" <option [ngValue]="1">001 · Main</option>
[(ngModel)]="row.br" <option [ngValue]="2">002 · M.G. Road</option>
[disabled]="branchSelectOptions.length <= 1" <option [ngValue]="14">014 · Station Rd</option>
[title]="branchSelectOptions.length <= 1 ? 'Your branch' : 'Branch'" <option [ngValue]="27">027 · Industrial</option>
(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') {
@@ -1678,7 +1627,13 @@
class="ws-f__ctl" class="ws-f__ctl"
[(ngModel)]="row.acTyp" [(ngModel)]="row.acTyp"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
(change)="isCreditOnly(row) && (row.dbCr = 'Cr')" (change)="
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>
@@ -1749,7 +1704,12 @@
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]="isCreditOnly(row)" [disabled]="
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
@@ -1758,7 +1718,6 @@
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
@@ -2084,13 +2043,7 @@
<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 <button class="ws-btn ws-btn--add" type="button" (click)="addRow()" title="Add another transaction row">
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,39 +3462,3 @@ 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,8 +10,7 @@ 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, HttpContext, HttpParams } from '@angular/common/http'; import { HttpClient, 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';
@@ -1659,8 +1658,6 @@ 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[] = [];
@@ -1688,12 +1685,10 @@ 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. * that account is never the one physical notes actually moved through (see submitGlJournalEntry).
* 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;
@@ -1878,7 +1873,6 @@ 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();
@@ -1909,8 +1903,7 @@ 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 }) => {
// Searches on its own once six characters are typed, for clerk and cashier alike. if (value.trim().length >= 4) {
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);
} }
@@ -2311,7 +2304,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: this.defaultBranchId, br: 1,
trTp: '', trTp: '',
acTyp: 'SD', acTyp: 'SD',
acNo: '', acNo: '',
@@ -2330,54 +2323,8 @@ 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';
@@ -2493,7 +2440,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'; return row.acTyp === 'GL' && row.dbCr === 'Cr';
} }
/** /**
@@ -2671,51 +2618,14 @@ 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 {
return ( const map: Record<number, string> = {
this.seenBranches.find((b) => b.id === branchId)?.name ?? 1: '001 · Main',
this.branches.find((b) => b.id === branchId)?.label ?? 2: '002 · M.G. Road',
`Branch ${branchId}` 14: '014 · Station Rd',
); 27: '027 · Industrial'
};
return map[branchId] || `Branch ${branchId}`;
} }
/** /**
@@ -4008,8 +3918,7 @@ 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 {
@@ -4065,11 +3974,8 @@ 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 found: any[] = res?.pageItems ?? (Array.isArray(res) ? res : []); const allItems: 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());
@@ -4099,18 +4005,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return; return;
} }
this.loadingAccount = false; this.loadingAccount = false;
// 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. this.accountError = 'Account not found for: ' + acNo;
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}`;
}); });
} }
@@ -4174,10 +4069,6 @@ 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') {
@@ -4258,7 +4149,6 @@ 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,
@@ -4276,7 +4166,6 @@ 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,
@@ -4294,7 +4183,6 @@ 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,
@@ -4354,19 +4242,7 @@ 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) {
@@ -4937,109 +4813,6 @@ 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 ??
@@ -5382,20 +5155,6 @@ 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.
@@ -5473,9 +5232,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return; return;
} }
// Bank transfer: savings (SD) or current (CA/CB) accounts on either side, plus a Fixed Deposit (FD) on // Bank transfer: only savings (SD) or current (CA/CB) accounts allowed
// 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',
@@ -5483,14 +5240,13 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
]); ]);
const invalidAccounts = [ const invalidAccounts = [
...drRows, ...drRows,
...crRows.filter((r) => r.acTyp !== 'FD') ...crRows
].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(', ')}`,
'Debit side: only Savings (SD) and Current (CA) accounts. Credit side: SD, CA or a Fixed Deposit (FD).', 'Only Savings (SD) and Current (CA) accounts are permitted.',
'GL and SHR accounts are not allowed — use Disbursement/Collection instead.', 'GL, FD, RD, SHR accounts are not allowed — use Disbursement/Collection instead.'
'RD installments are paid through a cashier Receipt or Auto Debit.'
]); ]);
return; return;
} }
@@ -5544,19 +5300,6 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
this.rows.length >= 2 && this.rows.length >= 2 &&
this.rows.every((r) => r.typ === 'Disbursement' || r.typ === 'Fund Transfer') this.rows.every((r) => r.typ === 'Disbursement' || r.typ === 'Fund Transfer')
) { ) {
// A Recurring Deposit is never paid this way: these requests post straight into the account, so the
// installment schedule never hears of the money -- installments stay unpaid, Auto Debit collects them
// again and the maturity amount comes out wrong. RD installments come in through the cashier's
// Receipt or the RD's own Auto Debit.
const rdRows = this.rows.filter((r) => r.acTyp === 'RD');
if (rdRows.length > 0) {
this.showAlert('error', 'Recurring Deposit Not Allowed', [
`RD account(s) ${rdRows.map((r) => r.acNo).join(', ')} cannot be used in a Disbursement, Collection or Fund Transfer.`,
'Pay RD installments through a cashier Receipt, or by Auto Debit from the linked savings account.'
]);
return;
}
const drRows = this.rows.filter((r) => r.dbCr === 'Dr'); const drRows = this.rows.filter((r) => r.dbCr === 'Dr');
const crRows = this.rows.filter((r) => r.dbCr === 'Cr'); const crRows = this.rows.filter((r) => r.dbCr === 'Cr');
@@ -6090,14 +5833,10 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
return; return;
} }
// A GL withdrawal slip is raised by the clerk and paid by the cashier against its token, exactly like a // GL withdrawal → direct journal entry (no maker-checker)
// savings withdrawal (the clerk branch and the token branch below). Nothing posts from this screen directly: // GL deposit → falls through to maker-checker block below
// manual journal entries are switched off on the server. if (row.acTyp === 'GL' && !isDeposit) {
if (row.acTyp === 'GL' && !isDeposit && !this.clerkMode && !this.activeWithdrawalRequest) { this.submitGlJournalEntry(row, amount, isDeposit);
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;
} }
@@ -6470,34 +6209,17 @@ 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: isGl ? (this.accountDetails.glCode ?? this.accountDetails.name) : this.accountDetails.accountNo, accountNo: this.accountDetails.accountNo,
accountType: this.creditEntryAccountType(row.acTyp), accountType: this.creditEntryAccountType(row.acTyp),
savingsAccountId: isGl ? null : this.accountDetails.id, savingsAccountId: this.accountDetails.id,
// GL-specific fields: the GL being paid out of and the cash GL it is paid from (null for other types) clientId: this.accountDetails.clientId ?? this.clientDetails?.id ?? null,
glAccountId: isGl ? this.accountDetails.id : null, clientName: this.clientDetails?.displayName ?? this.accountDetails?.clientName ?? 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: description || null, description: row.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,
@@ -6689,6 +6411,106 @@ 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);
@@ -1,170 +0,0 @@
<!--
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>
@@ -1,485 +0,0 @@
/**
* 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;
}
@@ -1,192 +0,0 @@
/**
* 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 });
}
}
@@ -1,120 +0,0 @@
/**
* 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 } });
}
}
@@ -1,446 +0,0 @@
<!--
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>
@@ -1,599 +0,0 @@
/**
* 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;
}
}
@@ -1,307 +0,0 @@
/**
* 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,7 +169,6 @@
<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
@@ -218,18 +217,6 @@
</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,8 +92,3 @@
text-transform: uppercase; text-transform: uppercase;
color: #7c3aed; color: #7c3aed;
} }
.vr-active {
font-size: 11px;
color: #94a3b8;
}
@@ -14,7 +14,6 @@ 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.
@@ -27,11 +26,6 @@ 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;
@@ -88,8 +82,7 @@ interface VoucherReport {
imports: [ imports: [
CommonModule, CommonModule,
FormsModule, FormsModule,
MatIconModule, MatIconModule
VoucherStatusComponent
] ]
}) })
export class VoucherReportComponent implements OnInit { export class VoucherReportComponent implements OnInit {
@@ -1,137 +0,0 @@
/**
* 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,27 +102,6 @@
</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">
@@ -175,7 +154,6 @@
<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>
@@ -188,16 +166,11 @@
<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="5" class="dri-cr-total-label">{{ isCollectionMode ? 'Total Debit' : 'Total Credit' }}</td> <td colspan="4" 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>
@@ -219,7 +192,6 @@
<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>
@@ -232,16 +204,11 @@
<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="5" class="dri-cr-total-label">Total Debit</td> <td colspan="4" 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>
@@ -261,7 +228,6 @@
<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>
@@ -274,16 +240,11 @@
<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="5" class="dri-cr-total-label">Total Credit</td> <td colspan="4" 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,54 +534,3 @@ $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,9 +25,6 @@ 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({
@@ -170,19 +167,6 @@ 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,10 +930,6 @@
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>
@@ -944,11 +940,7 @@
color="primary" color="primary"
type="button" type="button"
class="verify-btn" class="verify-btn"
[disabled]=" [disabled]="readOnly || createClientForm.get('mobileNo')?.value?.length !== 10"
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>
@@ -1016,8 +1008,6 @@
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,16 +27,15 @@ import {
UntypedFormControl, UntypedFormControl,
ReactiveFormsModule, ReactiveFormsModule,
ValidatorFn, ValidatorFn,
AsyncValidatorFn,
AbstractControl, AbstractControl,
ValidationErrors ValidationErrors
} from '@angular/forms'; } from '@angular/forms';
import { Subject, Subscription, merge, of, timer } from 'rxjs'; import { Subject, Subscription, merge } from 'rxjs';
import { catchError, filter, map, switchMap, takeUntil } from 'rxjs/operators'; import { filter, 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 { toPersonNameCase, toProperNameCase } from 'app/clients/utils/name-case.util'; import { 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 */
@@ -937,29 +936,6 @@ 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.
*/ */
@@ -993,8 +969,7 @@ 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: [
'', '',
@@ -1011,8 +986,7 @@ 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: [
'', '',
@@ -1482,10 +1456,7 @@ 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;
// An entity's full name keeps its typed spelling (matched against the PAN name); a person's const capitalized = toProperNameCase(originalValue);
// 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);
} }
@@ -1954,11 +1925,12 @@ 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 = toPersonNameCase(this.createClientForm?.get('firstname')?.value); const first = capitalize(this.createClientForm?.get('firstname')?.value || '');
const middle = toPersonNameCase(this.createClientForm?.get('middlename')?.value); const middle = capitalize(this.createClientForm?.get('middlename')?.value || '');
const last = toPersonNameCase(this.createClientForm?.get('lastname')?.value); const last = capitalize(this.createClientForm?.get('lastname')?.value || '');
const full = [ const full = [
first, first,
middle, middle,
@@ -2388,15 +2360,6 @@ 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);
@@ -1,211 +0,0 @@
<!--
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>
@@ -1,157 +0,0 @@
/**
* 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;
}
}
@@ -1,308 +0,0 @@
/**
* 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,8 +43,6 @@ 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,
@@ -110,32 +108,6 @@ 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;
@@ -1784,8 +1756,7 @@ 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
@@ -2387,8 +2358,7 @@ 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) {
@@ -2709,15 +2679,6 @@ 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 || '';
@@ -2746,9 +2707,6 @@ 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
@@ -321,8 +321,7 @@ export class Form121TabComponent implements OnInit, OnDestroy {
this.availableFys = [...fys].sort().reverse(); this.availableFys = [...fys].sort().reverse();
if (!this.availableFys.includes(this.fy)) { if (!this.availableFys.includes(this.fy)) {
this.fy = this.fy = this.availableFys[0] ?? this.declarations[0]?.fy ?? Object.keys(FY_TAX_CONFIG).sort().reverse()[0] ?? '';
this.availableFys[0] ?? this.declarations[0]?.fy ?? Object.keys(FY_TAX_CONFIG).sort().reverse()[0] ?? '';
} }
} }
@@ -368,7 +367,9 @@ export class Form121TabComponent implements OnInit, OnDestroy {
: 0; : 0;
} }
// What was actually debited for this customer as deductee, wherever the savings account sits. // What was actually debited for this customer as deductee, wherever the savings account sits.
this.actualTds = this.accountInputs.filter((a) => a.meta.tdsApplicable).reduce((s, a) => s + a.meta.tdsDeducted, 0); this.actualTds = this.accountInputs
.filter((a) => a.meta.tdsApplicable)
.reduce((s, a) => s + a.meta.tdsDeducted, 0);
if (!this.dateOfBirth || this.configMissing) { if (!this.dateOfBirth || this.configMissing) {
return; return;
@@ -90,21 +90,6 @@
<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>
@@ -218,21 +203,6 @@
<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>
@@ -292,21 +262,6 @@
<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>
@@ -497,21 +452,6 @@
<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>
@@ -611,21 +551,6 @@
<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>
@@ -666,13 +591,16 @@
<i class="fa fa-calendar section-header__icon"></i> <i class="fa fa-calendar section-header__icon"></i>
<h3 class="section-header__title">{{ 'labels.heading.Recurring Deposit Accounts' | translate }}</h3> <h3 class="section-header__title">{{ 'labels.heading.Recurring Deposit Accounts' | translate }}</h3>
</div> </div>
<div class="section-header__right">
<button mat-raised-button color="primary" (click)="toggleRecurringAccountsOverview()">
{{ viewAccountsLabel(showClosedRecurringAccounts) | translate }}
</button>
</div>
</div> </div>
<!-- Active and ended recurring deposits share one table; the Status column says how each one ended (matured or @if (!showClosedRecurringAccounts) {
closed early), so the client's RD history stays visible without switching views. -->
@if (savingAccounts) {
<div class="table-wrapper"> <div class="table-wrapper">
<table mat-table [dataSource]="savingAccounts | accountsFilter: 'saving' : 'all' : 'isRecurring'"> <table mat-table [dataSource]="savingAccounts | accountsFilter: 'saving' : 'open' : 'isRecurring'">
<ng-container matColumnDef="Account No"> <ng-container matColumnDef="Account No">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th> <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
@@ -686,32 +614,6 @@
<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">
<th mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let element">
<span class="rd-status" [class.rd-status--ended]="element.timeline?.closedOnDate">{{
rdStatusLabel(element)
}}</span>
@if (element.timeline?.closedOnDate) {
<div class="rd-status__date">on {{ element.timeline.closedOnDate | dateFormat }}</div>
}
</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>
@@ -736,7 +638,7 @@
<i class="fa fa-check"></i> <i class="fa fa-check"></i>
</button> </button>
} }
@if (element.status.approved) { @if (!element.status.submittedAndPendingApproval && !element.status.active) {
<button <button
class="account-action-button" class="account-action-button"
mat-raised-button mat-raised-button
@@ -762,7 +664,7 @@
</ng-container> </ng-container>
<ng-container matColumnDef="no-data"> <ng-container matColumnDef="no-data">
<td mat-footer-cell *matFooterCellDef [attr.colspan]="recurringColumns.length"> <td mat-footer-cell *matFooterCellDef [attr.colspan]="openSavingsColumns.length">
<div class="table-empty-state"> <div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i> <i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text"> <p class="table-empty-state__text">
@@ -772,17 +674,67 @@
</td> </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="recurringColumns"></tr> <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
<tr <tr
mat-row mat-row
*matRowDef="let row; columns: recurringColumns" *matRowDef="let row; columns: openSavingsColumns"
[routerLink]="['../', 'recurring-deposits-accounts', row.id, 'general']" [routerLink]="['../', 'recurring-deposits-accounts', row.id, 'general']"
class="select-row" class="select-row"
></tr> ></tr>
<tr <tr
mat-footer-row mat-footer-row
*matFooterRowDef=" *matFooterRowDef="
(savingAccounts | accountsFilter: 'saving' : 'all' : 'isRecurring')?.length === 0 ? ['no-data'] : [] (savingAccounts | accountsFilter: 'saving' : 'open' : 'isRecurring')?.length === 0 ? ['no-data'] : []
"
></tr>
</table>
</div>
}
<!-- Closed Recurring Deposit Accounts -->
@if (showClosedRecurringAccounts) {
<div class="table-wrapper">
<table mat-table [dataSource]="savingAccounts | accountsFilter: 'saving' : 'closed' : 'isRecurring'">
<ng-container matColumnDef="Account No">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
<td mat-cell *matCellDef="let element">
<i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
<mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
</td>
</ng-container>
<ng-container matColumnDef="Saving Account">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Recurring Deposit Product' | translate }}</th>
<td mat-cell *matCellDef="let element">
<mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
</td>
</ng-container>
<ng-container matColumnDef="Closed Date">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
</ng-container>
<ng-container matColumnDef="no-data">
<td mat-footer-cell *matFooterCellDef [attr.colspan]="closedSavingsColumns.length">
<div class="table-empty-state">
<i class="fa fa-folder-open-o table-empty-state__icon"></i>
<p class="table-empty-state__text">
{{ 'labels.messages.No Closed Recurring Deposit Accounts Available' | translate }}
</p>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: closedSavingsColumns"
[routerLink]="['../', 'recurring-deposits-accounts', row.id, 'general']"
class="select-row"
></tr>
<tr
mat-footer-row
*matFooterRowDef="
(savingAccounts | accountsFilter: 'saving' : 'closed' : 'isRecurring')?.length === 0 ? ['no-data'] : []
" "
></tr> ></tr>
</table> </table>
@@ -419,87 +419,3 @@ table[mat-table] {
font-size: 24px; font-size: 24px;
z-index: 1; z-index: 1;
} }
.rd-status {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
background: #dcfce7;
color: #166534;
&--ended {
background: #e2e8f0;
color: #475569;
}
}
.rd-status__date {
margin-top: 2px;
font-size: 11px;
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,7 +39,6 @@ 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';
@@ -152,7 +151,6 @@ 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[] = [
@@ -179,7 +177,6 @@ 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'
@@ -188,19 +185,8 @@ 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. */
recurringColumns: string[] = [
'Account No',
'Saving Account',
'Branch',
'Status',
'Last Active',
'Balance',
'Actions'
];
/** Open Shares Accounts Columns */ /** Open Shares Accounts Columns */
openSharesColumns: string[] = [ openSharesColumns: string[] = [
'Account No', 'Account No',
@@ -341,76 +327,12 @@ 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;
@@ -553,30 +475,6 @@ export class GeneralTabComponent implements OnDestroy {
); );
} }
/** Where a recurring deposit stands - for one that has ended, how it ended. */
rdStatusLabel(account: any): string {
switch (account?.status?.code) {
case 'savingsAccountStatusType.active':
return 'Active';
case 'savingsAccountStatusType.matured':
return 'Matured (not closed)';
case 'savingsAccountStatusType.submitted.and.pending.approval':
return 'Pending Approval';
case 'savingsAccountStatusType.approved':
return 'Approved';
case 'savingsAccountStatusType.closed':
return 'Matured & Closed';
case 'savingsAccountStatusType.pre.mature.closure':
return 'Premature Closed';
case 'savingsAccountStatusType.rejected':
return 'Rejected';
case 'savingsAccountStatusType.withdrawn.by.applicant':
return 'Withdrawn by Client';
default:
return account?.status?.value ?? '';
}
}
viewAccountsLabel(closed: boolean): string { viewAccountsLabel(closed: boolean): string {
if (closed) { if (closed) {
return 'labels.buttons.View Active Accounts'; return 'labels.buttons.View Active Accounts';
-22
View File
@@ -50,17 +50,6 @@
/> />
</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>
@@ -103,11 +92,6 @@
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>
} }
@@ -130,12 +114,6 @@
</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,15 +7,3 @@
*/ */
@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;
}
+1 -27
View File
@@ -38,8 +38,6 @@ 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',
@@ -73,15 +71,6 @@ import { OrganizationService } from '../organization/organization.service';
}) })
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 {
@@ -101,7 +90,6 @@ export class ClientsComponent implements OnInit {
'displayName', 'displayName',
'cifNumber', 'cifNumber',
'legalForm', 'legalForm',
'officeName',
'status', 'status',
'profileCompletion', 'profileCompletion',
'actions' 'actions'
@@ -131,13 +119,6 @@ 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();
} }
@@ -163,8 +144,7 @@ export class ClientsComponent implements OnInit {
this.sortDirection, this.sortDirection,
false, false,
'', '',
true, true
this.isHeadOffice ? this.officeFilter : null
) )
.subscribe( .subscribe(
(data: any) => { (data: any) => {
@@ -253,12 +233,6 @@ 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;
+3 -187
View File
@@ -18,7 +18,6 @@ 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.
@@ -743,14 +742,9 @@ 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;
} }
@@ -874,39 +868,6 @@ 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
@@ -1112,146 +1073,9 @@ export class ClientsService {
*/ */
saveKycContactLog( saveKycContactLog(
clientId: string | number, clientId: string | number,
data: { channel: string; notes: string; officerName?: string; noticeType?: string }, data: { channel: string; notes: string; officerName?: string }
silent = false
): Observable<any> { ): Observable<any> {
return this.http.post( return this.http.post(`/kyc/exceptions/${clientId}/contact-log`, data);
`/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[]> {
@@ -1268,14 +1092,6 @@ 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,12 +38,6 @@
} }
</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"
@@ -85,7 +79,6 @@
[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,10 +23,6 @@ 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';
@@ -64,7 +60,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
ClientEntityKycStepComponent, ClientEntityKycStepComponent,
ClientDatatableStepComponent, ClientDatatableStepComponent,
ClientKycStepComponent, ClientKycStepComponent,
ClientIdentityCheckComponent,
ClientPreviewStepComponent, ClientPreviewStepComponent,
ClientFamilyMembersStepComponent, ClientFamilyMembersStepComponent,
MatProgressBarModule, MatProgressBarModule,
@@ -84,7 +79,6 @@ 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>;
@@ -93,17 +87,6 @@ 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;
@@ -155,8 +138,6 @@ 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();
@@ -231,10 +212,6 @@ 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.
@@ -297,17 +274,6 @@ 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') {
@@ -392,19 +358,6 @@ 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(() => {
@@ -377,8 +377,6 @@
</button> </button>
} }
@if (selectedTabIndex < totalTabs - 1) { @if (selectedTabIndex < totalTabs - 1) {
<!-- Tooltip sits on a wrapper: a disabled button fires no mouse events, so it can't host it. -->
<span [matTooltip]="currentStepBlockerMessage" [matTooltipDisabled]="!currentStepBlockerMessage">
<button mat-raised-button color="primary" (click)="onNext()" [disabled]="savingClient || !currentStepValid"> <button mat-raised-button color="primary" (click)="onNext()" [disabled]="savingClient || !currentStepValid">
@if (savingClient) { @if (savingClient) {
<mat-progress-spinner diameter="18" mode="indeterminate" class="m-r-10"></mat-progress-spinner> <mat-progress-spinner diameter="18" mode="indeterminate" class="m-r-10"></mat-progress-spinner>
@@ -392,7 +390,6 @@
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon> <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
} }
</button> </button>
</span>
} }
@if (selectedTabIndex === totalTabs - 1) { @if (selectedTabIndex === totalTabs - 1) {
<button mat-raised-button color="primary" [routerLink]="['../']"> <button mat-raised-button color="primary" [routerLink]="['../']">
@@ -393,12 +393,6 @@ export class EditClientComponent {
if (this.selectedTabIndex === 0 && this.clientGeneralForm?.valid && !this.contactVerificationComplete) { if (this.selectedTabIndex === 0 && this.clientGeneralForm?.valid && !this.contactVerificationComplete) {
return 'Verify the OTP sent to both the old and new mobile number/email before saving.'; return 'Verify the OTP sent to both the old and new mobile number/email before saving.';
} }
if (this.selectedTabIndex === 0 && this.clientGeneralForm && !this.clientGeneralForm.valid) {
const labels = this.invalidGeneralFieldLabels();
if (labels.length) {
return `Please fill/correct: ${labels.join(', ')}.`;
}
}
if (this.selectedTabIndex === 1) { if (this.selectedTabIndex === 1) {
const labels = this.clientKycStep?.invalidFieldLabels || []; const labels = this.clientKycStep?.invalidFieldLabels || [];
if (labels.length) { if (labels.length) {
@@ -414,42 +408,6 @@ export class EditClientComponent {
return 'Please fill all mandatory fields on this tab to continue.'; return 'Please fill all mandatory fields on this tab to continue.';
} }
/**
* Readable names of the General-tab controls that are invalid. Older clients can be missing
* fields that are now mandatory (e.g. mobile/email), which leaves Save disabled with nothing
* on screen saying why — this feeds the button tooltip.
*/
private invalidGeneralFieldLabels(): string[] {
const labels: Record<string, string> = {
officeId: 'Office',
legalFormId: 'Legal Form',
genderId: 'Gender',
mobileNo: 'Mobile No',
alternateMobileNo: 'Alternate Mobile No',
emailAddress: 'Email',
dateOfBirth: 'Date of Birth',
submittedOnDate: 'Submitted On',
activationDate: 'Activation Date',
savingsProductId: 'Savings Product',
firstname: 'First Name',
middlename: 'Middle Name',
lastname: 'Last Name',
fullname: 'Name',
monthlyIncome: 'Monthly Income',
annualIncome: 'Annual Income',
monthlyTurnover: 'Monthly Turnover',
annualTurnover: 'Yearly Turnover',
agricultureIncome: 'Agriculture Income',
nonAgricultureIncome: 'Non-Agriculture Income',
guardianDetails: 'Guardian',
clientNonPersonDetails: 'Entity Details'
};
const controls = this.clientGeneralForm?.controls || {};
return Object.keys(controls)
.filter((name) => controls[name].invalid)
.map((name) => labels[name] || name);
}
/** Whether the current tab has unsaved edits */ /** Whether the current tab has unsaved edits */
isCurrentTabEdited(): boolean { isCurrentTabEdited(): boolean {
return this.tabEditMode[this.selectedTabIndex] === true; return this.tabEditMode[this.selectedTabIndex] === true;
@@ -1,34 +0,0 @@
/**
* 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 };
}
@@ -1,52 +0,0 @@
/**
* 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
@@ -1,185 +0,0 @@
/**
* 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;
}
+1 -18
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 { toPersonNameCase, toProperNameCase } from './name-case.util'; import { 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,20 +53,3 @@ 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,17 +62,3 @@ 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());
}
+1 -12
View File
@@ -35,7 +35,6 @@ 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',
@@ -49,17 +48,7 @@ export class CacheInterceptor implements HttpInterceptor {
'/cashreconciliation', '/cashreconciliation',
'/cashsettlement', '/cashsettlement',
'/cashtransfer', '/cashtransfer',
'/branchday', '/branchday'
// A deposit's lien moves with every repayment of the loan it secures, and decides whether the
// deposit may be closed at all - a stale copy would show a released lien as still blocking.
'/liens',
// The RD Dashboard counts late installments as of today; a cached copy would hide a payment just taken.
'/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 {
@@ -1,16 +0,0 @@
/**
* 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,7 +16,6 @@ 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.
@@ -30,9 +29,6 @@ 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(() => {
+304 -433
View File
@@ -131,14 +131,6 @@
</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
@@ -264,6 +256,13 @@
> >
<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']"
@@ -271,6 +270,13 @@
> >
<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']"
@@ -278,13 +284,6 @@
> >
<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']"
@@ -295,13 +294,6 @@
<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']"
@@ -316,6 +308,13 @@
> >
<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>
} }
} }
@@ -465,11 +464,6 @@
*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
@@ -509,8 +503,7 @@
[matMenuTriggerFor]="loanOriginationMenu" [matMenuTriggerFor]="loanOriginationMenu"
*mifosxHasPermission="'MENU_LOAN_ORIGINATION'" *mifosxHasPermission="'MENU_LOAN_ORIGINATION'"
> >
<fa-icon icon="clipboard-check" class="ni-ico"></fa-icon><span class="ni-full">Loan Origination</span <fa-icon icon="clipboard-check" class="ni-ico"></fa-icon>Loan Origination
><span class="ni-short">Loans</span>
<fa-icon icon="caret-down" class="ni-caret"></fa-icon> <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a> </a>
<a <a
@@ -519,8 +512,7 @@
(click)="glMenuOpen = !glMenuOpen; subLedgerOpen = false" (click)="glMenuOpen = !glMenuOpen; subLedgerOpen = false"
*mifosxHasPermission="'MENU_GENERAL_LEDGER'" *mifosxHasPermission="'MENU_GENERAL_LEDGER'"
> >
<fa-icon icon="book-open" class="ni-ico"></fa-icon><span class="ni-full">General Ledger</span <fa-icon icon="book-open" class="ni-ico"></fa-icon>General Ledger
><span class="ni-short">GL</span>
<fa-icon [icon]="glMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon> <fa-icon [icon]="glMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
</a> </a>
<a <a
@@ -529,8 +521,7 @@
(click)="subLedgerOpen = !subLedgerOpen; glMenuOpen = false" (click)="subLedgerOpen = !subLedgerOpen; glMenuOpen = false"
*mifosxHasPermission="'MENU_SUB_LEDGER'" *mifosxHasPermission="'MENU_SUB_LEDGER'"
> >
<fa-icon icon="book" class="ni-ico"></fa-icon><span class="ni-full">Sub Ledger</span <fa-icon icon="book" class="ni-ico"></fa-icon>Sub Ledger
><span class="ni-short">Sub GL</span>
<fa-icon [icon]="subLedgerOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon> <fa-icon [icon]="subLedgerOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
</a> </a>
</div> </div>
@@ -592,16 +583,14 @@
[matMenuTriggerFor]="reconciliationMenu" [matMenuTriggerFor]="reconciliationMenu"
*mifosxHasPermission="'MENU_CONFIG_WIZARD'" *mifosxHasPermission="'MENU_CONFIG_WIZARD'"
> >
<fa-icon icon="sync-alt" class="ni-ico"></fa-icon><span class="ni-full">Reconciliation</span <fa-icon icon="sync-alt" class="ni-ico"></fa-icon>Reconciliation
><span class="ni-short">Recon</span>
<fa-icon icon="caret-down" class="ni-caret"></fa-icon> <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a> </a>
<a class="ni" tabindex="0" routerLink="/chequebook" *mifosxHasPermission="'MENU_CHEQUEBOOK'"> <a class="ni" tabindex="0" routerLink="/chequebook" *mifosxHasPermission="'MENU_CHEQUEBOOK'">
<fa-icon icon="book" class="ni-ico"></fa-icon>Cheque Book <fa-icon icon="book" class="ni-ico"></fa-icon>Cheque Book
</a> </a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="letterMgmtMenu" *mifosxHasPermission="'MENU_LETTER_MGMT'"> <a class="ni" tabindex="0" [matMenuTriggerFor]="letterMgmtMenu" *mifosxHasPermission="'MENU_LETTER_MGMT'">
<fa-icon icon="envelope" class="ni-ico"></fa-icon><span class="ni-full">Documents Hub</span <fa-icon icon="envelope" class="ni-ico"></fa-icon>Documents Hub
><span class="ni-short">Docs Hub</span>
<fa-icon icon="caret-down" class="ni-caret"></fa-icon> <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a> </a>
</div> </div>
@@ -628,89 +617,77 @@
</button> </button>
</mat-menu> </mat-menu>
<mat-menu #reportsMenu="matMenu" class="reports-mega-panel" [overlapTrigger]="false"> <mat-menu #reportsMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
<div class="deposit-menu-grid reports-grid" (click)="$event.stopPropagation()"> <button mat-menu-item [routerLink]="['/branch-ops/account-register']" tabindex="0">
<!-- Core Reports --> <i class="fa fa-book menu-item-icon"></i> Account Register
<div class="deposit-menu-group"> </button>
<div class="deposit-group-title">Core Reports</div> <button mat-menu-item [routerLink]="['/reports']" tabindex="0">
<button mat-menu-item [routerLink]="['/branch-ops/account-register']" tabindex="0"> <i class="fa fa-th-list menu-item-icon"></i> All Reports
<i class="fa fa-book menu-item-icon"></i> Account Register </button>
</button> <button mat-menu-item [routerLink]="['/reports', 'Client']" tabindex="0">
<button mat-menu-item [routerLink]="['/reports']" tabindex="0"> <i class="fa fa-user menu-item-icon"></i> Clients
<i class="fa fa-th-list menu-item-icon"></i> All Reports </button>
</button> <button mat-menu-item [routerLink]="['/reports', 'Loan']" tabindex="0">
<button mat-menu-item [routerLink]="['/reports', 'Client']" tabindex="0"> <i class="fa fa-credit-card menu-item-icon"></i> Loans
<i class="fa fa-user menu-item-icon"></i> Clients </button>
</button> <button mat-menu-item [routerLink]="['/reports', 'Savings']" tabindex="0">
<button mat-menu-item [routerLink]="['/reports', 'Loan']" tabindex="0"> <i class="fa fa-piggy-bank menu-item-icon"></i> Savings
<i class="fa fa-credit-card menu-item-icon"></i> Loans </button>
</button> <button mat-menu-item [routerLink]="['/reports', 'Fund']" tabindex="0">
<button mat-menu-item [routerLink]="['/reports', 'Savings']" tabindex="0"> <i class="fa fa-hand-holding-usd menu-item-icon"></i> Funds
<i class="fa fa-piggy-bank menu-item-icon"></i> Savings </button>
</button> <button mat-menu-item [routerLink]="['/reports', 'Accounting']" tabindex="0">
<button mat-menu-item [routerLink]="['/reports', 'Fund']" tabindex="0"> <i class="fa fa-calculator menu-item-icon"></i> Accounting
<i class="fa fa-hand-holding-usd menu-item-icon"></i> Funds </button>
</button> <mat-divider></mat-divider>
<button mat-menu-item [routerLink]="['/reports', 'Accounting']" tabindex="0"> <!-- Listed here as well as under Branch Ops: an officer looking for the day's figures reaches
<i class="fa fa-calculator menu-item-icon"></i> Accounting for Reports, and the same screen answers both. -->
</button> <button mat-menu-item routerLink="/branch-ops/day-book" tabindex="0">
</div> <i class="fa fa-book menu-item-icon"></i> Day Book &amp; Officer Verification
</button>
<!-- Operations & Interest --> <button mat-menu-item routerLink="/branch-ops/end-of-day" tabindex="0">
<div class="deposit-menu-group"> <i class="fa fa-clipboard-check menu-item-icon"></i> End of the Day Report
<div class="deposit-group-title">Operations &amp; Interest</div> </button>
<button mat-menu-item routerLink="/branch-ops/day-book" tabindex="0"> <button mat-menu-item routerLink="/reports/form-97-98" tabindex="0">
<i class="fa fa-book menu-item-icon"></i> Day Book &amp; Officer Verification <i class="fa fa-file-invoice menu-item-icon"></i> Form 97/98 Transaction Report
</button> </button>
<button mat-menu-item routerLink="/branch-ops/end-of-day" tabindex="0"> <button mat-menu-item routerLink="/reports/risk-review" tabindex="0">
<i class="fa fa-clipboard-check menu-item-icon"></i> End of the Day Report <i class="fa fa-user-shield menu-item-icon"></i> Risk Review Report
</button> </button>
<button mat-menu-item routerLink="/reports/savings-interest" tabindex="0"> <button mat-menu-item routerLink="/reports/kyc-expiry" tabindex="0">
<i class="fa fa-percentage menu-item-icon"></i> Savings Interest Posted <i class="fa fa-id-card menu-item-icon"></i> Re-KYC Expiry &amp; Outreach
</button> </button>
<button mat-menu-item routerLink="/reports/interest-posting" tabindex="0"> <button mat-menu-item routerLink="/reports/dormancy" tabindex="0">
<i class="fa fa-clipboard-check menu-item-icon"></i> Interest Posting Reports <i class="fa fa-hourglass-half menu-item-icon"></i> Inactive, Dormant &amp; DEAF
</button> </button>
<button mat-menu-item routerLink="/reports/fd-interest-posting" tabindex="0"> <button mat-menu-item routerLink="/reports/savings-interest" tabindex="0">
<i class="fa fa-clipboard-check menu-item-icon"></i> FD Interest Posting Reports <i class="fa fa-percentage menu-item-icon"></i> Savings Interest Posted
</button> </button>
<button mat-menu-item routerLink="/reports/interest-posting-summary" tabindex="0"> <button mat-menu-item routerLink="/reports/interest-posting" tabindex="0">
<i class="fa fa-table menu-item-icon"></i> Interest Posting Summary (Branch-wise) <i class="fa fa-clipboard-check menu-item-icon"></i> Interest Posting Reports
</button> </button>
<button mat-menu-item routerLink="/reports/tds-interest" tabindex="0"> <button mat-menu-item routerLink="/reports/interest-posting-summary" tabindex="0">
<i class="fa fa-percent menu-item-icon"></i> Deposit Interest &amp; TDS <i class="fa fa-table menu-item-icon"></i> Interest Posting Summary (Branch-wise)
</button> </button>
</div> <!--
The Principal Officer clears flagged UNSC screenings here. It is not a runnable report,
<!-- Compliance & Registers --> so it never shows up under the report categories above and had no nav entry at all.
<div class="deposit-menu-group"> -->
<div class="deposit-group-title">Compliance &amp; Registers</div> <button mat-menu-item routerLink="/reports/sanctions-logs" tabindex="0">
<button mat-menu-item routerLink="/reports/form-97-98" tabindex="0"> <i class="fa fa-shield-alt menu-item-icon"></i> Sanctions Screening &amp; Alerts
<i class="fa fa-file-invoice menu-item-icon"></i> Form 97/98 Transaction Report </button>
</button> <button mat-menu-item routerLink="/reports/dip-lookups" tabindex="0">
<button mat-menu-item routerLink="/reports/risk-review" tabindex="0"> <i class="fa fa-satellite-dish menu-item-icon"></i> DIP / MNRL Mobile Lookups
<i class="fa fa-user-shield menu-item-icon"></i> Risk Review Report </button>
</button> <button mat-menu-item routerLink="/reports/tds-interest" tabindex="0">
<button mat-menu-item routerLink="/reports/kyc-expiry" tabindex="0"> <i class="fa fa-percent menu-item-icon"></i> Deposit Interest &amp; TDS
<i class="fa fa-id-card menu-item-icon"></i> Re-KYC Expiry &amp; Outreach </button>
</button> <button mat-menu-item routerLink="/reports/tds-remittance" tabindex="0">
<button mat-menu-item routerLink="/reports/dormancy" tabindex="0"> <i class="fa fa-landmark menu-item-icon"></i> TDS Remitted to Government
<i class="fa fa-hourglass-half menu-item-icon"></i> Inactive, Dormant &amp; DEAF </button>
</button> <button mat-menu-item routerLink="/reports/bor" tabindex="0">
<button mat-menu-item routerLink="/reports/sanctions-logs" tabindex="0"> <i class="fa fa-gavel menu-item-icon"></i> BOR Register &mdash; Share Capital
<i class="fa fa-shield-alt menu-item-icon"></i> Sanctions Screening &amp; Alerts </button>
</button>
<button mat-menu-item routerLink="/reports/dip-lookups" tabindex="0">
<i class="fa fa-satellite-dish menu-item-icon"></i> DIP / MNRL Mobile Lookups
</button>
<button mat-menu-item routerLink="/reports/tds-remittance" tabindex="0">
<i class="fa fa-landmark menu-item-icon"></i> TDS Remitted to Government
</button>
<button mat-menu-item routerLink="/reports/bor" tabindex="0">
<i class="fa fa-gavel menu-item-icon"></i> BOR Register &mdash; Share Capital
</button>
</div>
</div>
</mat-menu> </mat-menu>
<!-- Admin Mega Menu — 3-column rectangular panel grouping Setup, <!-- Admin Mega Menu — 3-column rectangular panel grouping Setup,
@@ -920,11 +897,7 @@
(click)="subLedgerOpen = false" (click)="subLedgerOpen = false"
><fa-icon icon="balance-scale" class="gl-icon"></fa-icon> Suit File Entry</a ><fa-icon icon="balance-scale" class="gl-icon"></fa-icon> Suit File Entry</a
> >
<a <a class="gl-link" [class.hidden]="!matchesSubLedgerSearch('Locker Entry')" (click)="subLedgerOpen = false"
class="gl-link"
[class.hidden]="!matchesSubLedgerSearch('Locker Entry')"
routerLink="/locker"
(click)="subLedgerOpen = false"
><fa-icon icon="lock" class="gl-icon"></fa-icon> Locker Entry</a ><fa-icon icon="lock" class="gl-icon"></fa-icon> Locker Entry</a
> >
<a <a
@@ -1087,143 +1060,121 @@
<!-- Sub Menu Dropdowns --> <!-- Sub Menu Dropdowns -->
<!-- Branch-level operations. Starts with the day register; other branch-wide controls belong <!-- Branch-level operations. Starts with the day register; other branch-wide controls belong
here rather than under Cashier, which is one role's workspace. --> here rather than under Cashier, which is one role's workspace. -->
<mat-menu #branchOpsMenu="matMenu" class="branch-ops-mega-panel" [overlapTrigger]="false"> <mat-menu #branchOpsMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
<div class="deposit-menu-grid branch-ops-grid" (click)="$event.stopPropagation()"> <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-register']">
<div class="deposit-menu-group"> <fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> Day Open / Day Close
<div class="deposit-group-title">Day Operations</div> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-register']"> <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/missed-close']">
<fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> Day Open / Day Close <fa-icon icon="exclamation-triangle" class="menu-item-icon"></fa-icon> Missed Close Register
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/missed-close']"> <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/vault-position']">
<fa-icon icon="exclamation-triangle" class="menu-item-icon"></fa-icon> Missed Close Register <fa-icon icon="lock" class="menu-item-icon"></fa-icon> Vault Position
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/vault-position']"> <!-- The day book carries the Officer Verification Sheet — each person's credit, debit and net
<fa-icon icon="lock" class="menu-item-icon"></fa-icon> Vault Position for the day. It was reachable only from the Clerk and Cashier menus, which is the one
</button> place a principal officer signing the day off does not look. -->
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/branch-position']"> <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-book']">
<fa-icon icon="coins" class="menu-item-icon"></fa-icon> Branch Cash Position <fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book &amp; Verification
</button> </button>
</div> <!-- The signed sheet, as against the day book's working list: the day's modes, the drawer
<div class="deposit-menu-group"> against the books, and what is still open. This is what goes in the file. -->
<div class="deposit-group-title">Verification &amp; Reports</div> <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/end-of-day']">
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-book']"> <fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report
<fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book &amp; Verification </button>
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/end-of-day']">
<fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report
</button>
</div>
</div>
</mat-menu> </mat-menu>
<!-- Clerk Desk --> <!-- Clerk was a bare link straight into the fullscreen dashboard, which left the clerk's other
<mat-menu #clerkMenu="matMenu" class="clerk-mega-panel" [overlapTrigger]="false"> screens reachable only from inside that fullscreen nav. Anything a clerk needs from the
<div class="deposit-menu-grid clerk-grid" (click)="$event.stopPropagation()"> normal shell — an open voucher exception above all — belongs here. -->
<!-- Clerk Desk --> <mat-menu #clerkMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
<div class="deposit-menu-group"> <button mat-menu-item tabindex="0" routerLink="/clerk/dashboard" (click)="hideShellLayout = true">
<div class="deposit-group-title">Clerk Desk</div> <fa-icon icon="id-card" class="menu-item-icon"></fa-icon> Clerk Dashboard
<button mat-menu-item tabindex="0" routerLink="/clerk/dashboard" (click)="hideShellLayout = true"> </button>
<fa-icon icon="id-card" class="menu-item-icon"></fa-icon> Clerk Dashboard <!-- The clerk reads the day as a sheet to sign off, not as a working list of vouchers: the
</button> day's summary, the counter counted against the books, and what is still open. The day
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/withdrawal-requests']"> book's own row-by-row view stays reachable from Branch Ops and from the Cashier menu. -->
<fa-icon icon="money-bill-wave" class="menu-item-icon"></fa-icon> My Withdrawal Requests <button mat-menu-item tabindex="0" [routerLink]="['/clerk/end-of-day']">
</button> <fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-disbursement-requests']"> </button>
<fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Disbursements &amp; Transfer <button mat-menu-item tabindex="0" [routerLink]="['/clerk/withdrawal-requests']">
</button> <fa-icon icon="money-bill-wave" class="menu-item-icon"></fa-icon> My Withdrawal Requests
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/dividend-dashboard']"> </button>
<fa-icon icon="chart-pie" class="menu-item-icon"></fa-icon> Dividend Dashboard <button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-disbursement-requests']">
</button> <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Disbursements &amp; Transfer
</div> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/dividend-dashboard']">
<!-- Vouchers --> <fa-icon icon="chart-pie" class="menu-item-icon"></fa-icon> Dividend Dashboard
<div class="deposit-menu-group"> </button>
<div class="deposit-group-title">Vouchers</div> <button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-work']">
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-work']"> <fa-icon icon="user-check" class="menu-item-icon"></fa-icon> My Vouchers
<fa-icon icon="user-check" class="menu-item-icon"></fa-icon> My Vouchers </button>
</button> <!-- Sits under My Vouchers because it answers the same question for the one worker who has no
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/system-vouchers']"> own list: the system. A nightly run belongs to nobody, so it appears on no person's page. -->
<fa-icon icon="robot" class="menu-item-icon"></fa-icon> System Vouchers <button mat-menu-item tabindex="0" [routerLink]="['/clerk/system-vouchers']">
</button> <fa-icon icon="robot" class="menu-item-icon"></fa-icon> System Vouchers
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/received-report']"> </button>
<fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Received Vouchers <!-- A clerk supervises the counter, so they need to see what each cashier is holding and what
</button> went through their drawer. Both screens already return every cashier for a non-cashier
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/payment-report']"> caller (CashierRoleHelper scopes only a cashier to themselves) — they were simply not
<fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Payment Vouchers reachable from this menu. -->
</button> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']">
</div> <fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position
</button>
<!-- Counter & Reports --> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']">
<div class="deposit-menu-group"> <fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Closing Cash Report
<div class="deposit-group-title">Counter &amp; Reports</div> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']"> <button mat-menu-item tabindex="0" [routerLink]="['/clerk/received-report']">
<fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Received Vouchers
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']"> <button mat-menu-item tabindex="0" [routerLink]="['/clerk/payment-report']">
<fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Closing Cash Report <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Payment Vouchers
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/end-of-day']">
<fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report
</button>
</div>
</div>
</mat-menu> </mat-menu>
<!-- Cashier Desk --> <mat-menu #cashierMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
<mat-menu #cashierMenu="matMenu" class="cashier-mega-panel" [overlapTrigger]="false"> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-exchange']">
<div class="deposit-menu-grid cashier-grid" (click)="$event.stopPropagation()"> <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Cash Exchange Entry
<!-- Cash Entries & Exchange --> </button>
<div class="deposit-menu-group"> <button mat-menu-item tabindex="0" [routerLink]="['/system/denomination-master']">
<div class="deposit-group-title">Cash &amp; Counter</div> <fa-icon icon="coins" class="menu-item-icon"></fa-icon> Cash Denomination
<!-- Cash Exchange, Currency Exchange Detail, Inter-Cashier Transfer and Reconciliation are not </button>
here: they move or count notes in one cashier's own drawer, so only the cashier who is logged <button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']">
in does them, from the cashier screen. --> <fa-icon icon="file-alt" class="menu-item-icon"></fa-icon> Closing Cash Report
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/transaction-entry']"> </button>
<fa-icon icon="keyboard" class="menu-item-icon"></fa-icon> Transaction Entry <button mat-menu-item tabindex="0" [routerLink]="['/cashier/exchange-detail']">
</button> <fa-icon icon="globe" class="menu-item-icon"></fa-icon> Currency Exchange Detail
<button mat-menu-item tabindex="0" [routerLink]="['/system/denomination-master']"> </button>
<fa-icon icon="coins" class="menu-item-icon"></fa-icon> Cash Denomination <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-transfer']">
</button> <fa-icon icon="random" class="menu-item-icon"></fa-icon> Cash Transfer
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/voucher-correction']"> </button>
<fa-icon icon="undo" class="menu-item-icon"></fa-icon> Voucher Correction <button mat-menu-item tabindex="0" [routerLink]="['/cashier/excess-report']">
</button> <fa-icon icon="exclamation-circle" class="menu-item-icon"></fa-icon> Excess Transaction Report
</div> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-settlement']">
<!-- Transfers & Settlement --> <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Cash Settlement
<div class="deposit-menu-group"> </button>
<div class="deposit-group-title">Transfers &amp; Settlement</div> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/inter-cashier']">
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-transfer']"> <fa-icon icon="exchange-alt" class="menu-item-icon"></fa-icon> Inter-Cashier Transfer
<fa-icon icon="random" class="menu-item-icon"></fa-icon> Cash Transfer </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']">
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-settlement']"> <fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position
<fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Cash Settlement </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/reconciliation']">
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']"> <fa-icon icon="balance-scale" class="menu-item-icon"></fa-icon> Reconciliation
<fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-history']">
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/day-book']"> <fa-icon icon="history" class="menu-item-icon"></fa-icon> Cash History
<fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/day-book']">
</div> <fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book
</button>
<!-- Reports & Audit --> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/transaction-entry']">
<div class="deposit-menu-group"> <fa-icon icon="keyboard" class="menu-item-icon"></fa-icon> Transaction Entry
<div class="deposit-group-title">Reports &amp; Audit</div> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']">
<fa-icon icon="file-alt" class="menu-item-icon"></fa-icon> Closing Cash Report
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/excess-report']">
<fa-icon icon="exclamation-circle" class="menu-item-icon"></fa-icon> Excess Transaction Report
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-history']">
<fa-icon icon="history" class="menu-item-icon"></fa-icon> Cash History
</button>
</div>
</div>
</mat-menu> </mat-menu>
<mat-menu #depositsMenu="matMenu" class="deposits-mega-panel" [overlapTrigger]="false"> <mat-menu #depositsMenu="matMenu" class="deposits-mega-panel" [overlapTrigger]="false">
<div class="deposit-menu-grid deposits-grid" (click)="$event.stopPropagation()"> <div class="deposit-menu-grid" (click)="$event.stopPropagation()">
<div class="deposit-menu-group"> <div class="deposit-menu-group">
<div class="deposit-group-title">Accounts</div> <div class="deposit-group-title">Accounts</div>
<button mat-menu-item tabindex="0" [routerLink]="['/accounts/savings']"> <button mat-menu-item tabindex="0" [routerLink]="['/accounts/savings']">
@@ -1238,29 +1189,14 @@
<button mat-menu-item tabindex="0" [routerLink]="['/accounts/recurring-deposits']"> <button mat-menu-item tabindex="0" [routerLink]="['/accounts/recurring-deposits']">
<fa-icon icon="sync" class="menu-item-icon"></fa-icon> Recurring <fa-icon icon="sync" class="menu-item-icon"></fa-icon> Recurring
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/accounts/dds']" (click)="depositsMenu.closed.emit()"> <button mat-menu-item tabindex="0"><fa-icon icon="coins" class="menu-item-icon"></fa-icon> DDS</button>
<fa-icon icon="coins" class="menu-item-icon"></fa-icon> DDS Party Master
</button>
<button
mat-menu-item
tabindex="0"
[routerLink]="['/accounts/dds-accounts']"
(click)="depositsMenu.closed.emit()"
>
<fa-icon icon="list-alt" class="menu-item-icon"></fa-icon> DDS Accounts
</button>
</div> </div>
<div class="deposit-menu-group"> <div class="deposit-menu-group">
<div class="deposit-group-title">Agent</div> <div class="deposit-group-title">Agent</div>
<button mat-menu-item tabindex="0"> <button mat-menu-item tabindex="0">
<fa-icon icon="hand-holding-usd" class="menu-item-icon"></fa-icon> Agent Commission <fa-icon icon="hand-holding-usd" class="menu-item-icon"></fa-icon> Agent Commission
</button> </button>
<button <button mat-menu-item tabindex="0">
mat-menu-item
tabindex="0"
[routerLink]="['/accounts/dds-collection']"
(click)="depositsMenu.closed.emit()"
>
<fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> Today Collection <fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> Today Collection
</button> </button>
<button mat-menu-item tabindex="0"> <button mat-menu-item tabindex="0">
@@ -1275,14 +1211,6 @@
</div> </div>
<div class="deposit-menu-group"> <div class="deposit-menu-group">
<div class="deposit-group-title">Reports</div> <div class="deposit-group-title">Reports</div>
<button
mat-menu-item
tabindex="0"
[routerLink]="['/accounts/dds-reports']"
(click)="depositsMenu.closed.emit()"
>
<fa-icon icon="coins" class="menu-item-icon"></fa-icon> DDS Reports
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/savings-daily-interest']"> <button mat-menu-item tabindex="0" [routerLink]="['/savings-daily-interest']">
<fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> Savings Daily Interest <fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> Savings Daily Interest
</button> </button>
@@ -1292,9 +1220,6 @@
<button mat-menu-item tabindex="0" [routerLink]="['/fd-dashboard']"> <button mat-menu-item tabindex="0" [routerLink]="['/fd-dashboard']">
<fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> FD Dashboard <fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> FD Dashboard
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/rd-dashboard']">
<fa-icon icon="piggy-bank" class="menu-item-icon"></fa-icon> RD Dashboard
</button>
<button mat-menu-item tabindex="0"> <button mat-menu-item tabindex="0">
<fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> FD Interest Report <fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> FD Interest Report
</button> </button>
@@ -1311,54 +1236,34 @@
</div> </div>
</mat-menu> </mat-menu>
<mat-menu #clearingMenu="matMenu" class="clearing-mega-panel" [overlapTrigger]="false"> <mat-menu #clearingMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
<div class="deposit-menu-grid clearing-grid" (click)="$event.stopPropagation()"> <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/inward']">
<!-- CTS Clearing --> <fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward Clearing (CTS)
<div class="deposit-menu-group"> </button>
<div class="deposit-group-title">CTS Clearing</div> <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/outward']">
<button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/inward']"> <fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward Clearing (CTS)
<fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward Clearing (CTS) </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/positive-pay']">
<button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/outward']"> <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Positive Pay (PPS)
<fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward Clearing (CTS) </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/settlement']">
<button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/positive-pay']"> <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Settlement
<fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Positive Pay (PPS) </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/reconciliation']">
</div> <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Reconciliation
</button>
<!-- Settlement & Recon --> <button mat-menu-item tabindex="0" [routerLink]="['/nachclearing']">
<div class="deposit-menu-group"> <fa-icon icon="money-check" class="menu-item-icon"></fa-icon> NACH Clearing
<div class="deposit-group-title">Settlement &amp; Recon</div> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/settlement']"> <button mat-menu-item tabindex="0"><fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward</button>
<fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Settlement <button mat-menu-item tabindex="0"><fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward</button>
</button> <button mat-menu-item [routerLink]="['/sponsor-dd/inventory']" tabindex="0">
<button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/reconciliation']"> <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Sponsor DD Inventory
<fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Reconciliation </button>
</button>
<button mat-menu-item [routerLink]="['/sponsor-dd/inventory']" tabindex="0">
<fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Sponsor DD Inventory
</button>
</div>
<!-- NACH & Other -->
<div class="deposit-menu-group">
<div class="deposit-group-title">NACH &amp; Direct</div>
<button mat-menu-item tabindex="0" [routerLink]="['/nachclearing']">
<fa-icon icon="money-check" class="menu-item-icon"></fa-icon> NACH Clearing
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward
</button>
</div>
</div>
</mat-menu> </mat-menu>
<mat-menu #hrmMenu="matMenu" class="hrm-mega-panel" [overlapTrigger]="false"> <mat-menu #hrmMenu="matMenu" class="hrm-mega-panel" [overlapTrigger]="false">
<div class="deposit-menu-grid hrm-grid" (click)="$event.stopPropagation()"> <div class="deposit-menu-grid" (click)="$event.stopPropagation()">
<!-- Payroll --> <!-- Payroll -->
<div class="deposit-menu-group"> <div class="deposit-menu-group">
<div class="deposit-group-title">Payroll</div> <div class="deposit-group-title">Payroll</div>
@@ -1503,9 +1408,7 @@
<button mat-menu-item tabindex="0"> <button mat-menu-item tabindex="0">
<fa-icon icon="user-slash" class="menu-item-icon" style="color: #c2410c"></fa-icon> Non-Customer Entry <fa-icon icon="user-slash" class="menu-item-icon" style="color: #c2410c"></fa-icon> Non-Customer Entry
</button> </button>
<button mat-menu-item routerLink="/locker" tabindex="0"> <button mat-menu-item tabindex="0"><fa-icon icon="lock" class="menu-item-icon"></fa-icon> Locker</button>
<fa-icon icon="lock" class="menu-item-icon"></fa-icon> Locker
</button>
<button mat-menu-item routerLink="/investment/bonds" tabindex="0"> <button mat-menu-item routerLink="/investment/bonds" tabindex="0">
<fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> SLR and Non SLR Investment Report <fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> SLR and Non SLR Investment Report
</button> </button>
@@ -1667,33 +1570,23 @@
</div> </div>
</mat-menu> </mat-menu>
<mat-menu #ckycMenu="matMenu" class="ckyc-mega-panel" [overlapTrigger]="false"> <mat-menu #ckycMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
<div class="deposit-menu-grid ckyc-grid" (click)="$event.stopPropagation()"> <button mat-menu-item routerLink="/ckyc" tabindex="0">
<!-- KYC Operations --> <fa-icon icon="id-card" class="menu-item-icon"></fa-icon> CKYC Management
<div class="deposit-menu-group"> </button>
<div class="deposit-group-title">KYC Operations</div> <button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('REKYC')">
<button mat-menu-item routerLink="/ckyc" tabindex="0"> <fa-icon icon="sync-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> Re-KYC Report
<fa-icon icon="id-card" class="menu-item-icon"></fa-icon> CKYC Management </button>
</button> <button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('RISK-REVIEW')">
<button mat-menu-item tabindex="0"> <fa-icon icon="history" class="menu-item-icon" style="color: #be185d"></fa-icon> Risk Review
<fa-icon icon="database" class="menu-item-icon" style="color: #be185d"></fa-icon> Dump KYC &amp; Loan Data </button>
</button> <button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('CERSAI')">
</div> <fa-icon icon="shield-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> CERSAI Report
</button>
<!-- Reports & Screening --> <mat-divider></mat-divider>
<div class="deposit-menu-group"> <button mat-menu-item tabindex="0">
<div class="deposit-group-title">Reports &amp; Screening</div> <fa-icon icon="database" class="menu-item-icon" style="color: #be185d"></fa-icon> Dump KYC &amp; Loan Data
<button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('REKYC')"> </button>
<fa-icon icon="sync-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> Re-KYC Report
</button>
<button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('RISK-REVIEW')">
<fa-icon icon="history" class="menu-item-icon" style="color: #be185d"></fa-icon> Risk Review
</button>
<button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('CERSAI')">
<fa-icon icon="shield-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> CERSAI Report
</button>
</div>
</div>
</mat-menu> </mat-menu>
<!-- CFCFRMS — single landing page (CfcfrmsShell) hosts the full <!-- CFCFRMS — single landing page (CfcfrmsShell) hosts the full
@@ -1711,11 +1604,11 @@
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/sundry-dr-cr"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/sundry-dr-cr">
<fa-icon icon="random" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="random" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Sundry Dr / Cr Sundry Dr / Cr Reconciliation
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/pnl-impact"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/pnl-impact">
<fa-icon icon="chart-line" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="chart-line" class="menu-item-icon" style="color: #0d9488"></fa-icon>
P&amp;L Impact P&amp;L Impact Reconciliation
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/gl-reconciliation"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/gl-reconciliation">
<fa-icon icon="book-open" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="book-open" class="menu-item-icon" style="color: #0d9488"></fa-icon>
@@ -1723,11 +1616,11 @@
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/fixed-assets"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/fixed-assets">
<fa-icon icon="cube" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="cube" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Fixed Assets Fixed Assets Reconciliation
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/inter-company"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/inter-company">
<fa-icon icon="sitemap" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="sitemap" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Inter-Company Inter-Company Reconciliation
</button> </button>
</div> </div>
@@ -1740,15 +1633,15 @@
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/api-bank-reco"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/api-bank-reco">
<fa-icon icon="code-branch" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="code-branch" class="menu-item-icon" style="color: #0d9488"></fa-icon>
API Bank Reco API Based Bank Reconciliation
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/neft-rtgs"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/neft-rtgs">
<fa-icon icon="exchange" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="exchange" class="menu-item-icon" style="color: #0d9488"></fa-icon>
NEFT / RTGS Reco NEFT / RTGS Reconciliation
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/clearing-reco"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/clearing-reco">
<fa-icon icon="hand-holding-usd" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="hand-holding-usd" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Clearing Reco Clearing Reconciliation
</button> </button>
</div> </div>
@@ -1761,11 +1654,11 @@
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/three-way-digital"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/three-way-digital">
<fa-icon icon="project-diagram" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="project-diagram" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Three-way Digital Three-way Digital Reconciliation
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/nach-reco"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/nach-reco">
<fa-icon icon="sync-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="sync-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon>
NACH Reco NACH Reconciliation
</button> </button>
</div> </div>
@@ -1774,11 +1667,11 @@
<div class="deposit-group-title">Instruments &amp; Members</div> <div class="deposit-group-title">Instruments &amp; Members</div>
<button mat-menu-item [routerLink]="['/sponsor-dd-reconciliation']" tabindex="0"> <button mat-menu-item [routerLink]="['/sponsor-dd-reconciliation']" tabindex="0">
<fa-icon icon="money-check-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="money-check-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon>
DD / Pay Order DD / Pay Order Reconciliation
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/share-member"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/share-member">
<fa-icon icon="coins" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="coins" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Share Member Share Member Reconciliation
</button> </button>
</div> </div>
@@ -1954,68 +1847,46 @@
</div> </div>
</mat-menu> </mat-menu>
<mat-menu #insuranceMenu="matMenu" class="insurance-mega-panel" [overlapTrigger]="false"> <mat-menu #insuranceMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
<div class="deposit-menu-grid insurance-grid" (click)="$event.stopPropagation()"> <button mat-menu-item routerLink="/dicgc" tabindex="0">
<!-- Social & Policy Schemes --> <fa-icon icon="building" class="menu-item-icon" style="color: #c2410c"></fa-icon> DICGC
<div class="deposit-menu-group"> </button>
<div class="deposit-group-title">Schemes &amp; Social</div> <button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMJBY</button>
<button mat-menu-item routerLink="/dicgc" tabindex="0"> <button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMSBY</button>
<fa-icon icon="building" class="menu-item-icon" style="color: #c2410c"></fa-icon> DICGC <button mat-menu-item tabindex="0">
</button> <fa-icon icon="hand-holding-heart" class="menu-item-icon"></fa-icon> Indemnity
<button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMJBY</button> </button>
<button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMSBY</button> <button mat-menu-item tabindex="0">
<button mat-menu-item tabindex="0"> <fa-icon icon="home" class="menu-item-icon"></fa-icon> Assets Insurance
<fa-icon icon="hand-holding-heart" class="menu-item-icon"></fa-icon> Indemnity </button>
</button> <button mat-menu-item tabindex="0">
</div> <fa-icon icon="laptop" class="menu-item-icon"></fa-icon> Cyber Insurance
</button>
<!-- Institutional & Loans --> <button mat-menu-item tabindex="0">
<div class="deposit-menu-group"> <fa-icon icon="university" class="menu-item-icon"></fa-icon> Bank Insurance
<div class="deposit-group-title">Institutional &amp; Loans</div> </button>
<button mat-menu-item tabindex="0"> <button mat-menu-item tabindex="0">
<fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Loan Insurance <fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Loan Insurance
</button> </button>
<button mat-menu-item tabindex="0">
<fa-icon icon="home" class="menu-item-icon"></fa-icon> Assets Insurance
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="laptop" class="menu-item-icon"></fa-icon> Cyber Insurance
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="university" class="menu-item-icon"></fa-icon> Bank Insurance
</button>
</div>
</div>
</mat-menu> </mat-menu>
<mat-menu #digitalMenu="matMenu" class="digital-mega-panel" [overlapTrigger]="false"> <mat-menu #digitalMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
<div class="deposit-menu-grid digital-grid" (click)="$event.stopPropagation()"> <button mat-menu-item routerLink="/digital/neft-rtgs-report" tabindex="0">
<!-- Payment Systems --> <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> NEFT / RTGS
<div class="deposit-menu-group"> </button>
<div class="deposit-group-title">Payments</div> <button mat-menu-item routerLink="/digital/imps-report" tabindex="0">
<button mat-menu-item routerLink="/digital/neft-rtgs-report" tabindex="0"> <fa-icon icon="bolt" class="menu-item-icon"></fa-icon> IMPS
<fa-icon icon="exchange" class="menu-item-icon"></fa-icon> NEFT / RTGS </button>
</button> <button mat-menu-item routerLink="/digital/upi-report" tabindex="0">
<button mat-menu-item routerLink="/digital/imps-report" tabindex="0"> <fa-icon icon="mobile-alt" class="menu-item-icon"></fa-icon> UPI Reports
<fa-icon icon="bolt" class="menu-item-icon"></fa-icon> IMPS </button>
</button> <button mat-menu-item routerLink="/digital/atm-pos-ecom" tabindex="0">
<button mat-menu-item routerLink="/digital/upi-report" tabindex="0"> <fa-icon icon="credit-card" class="menu-item-icon"></fa-icon> ATM / POS / ECOM Reports
<fa-icon icon="mobile-alt" class="menu-item-icon"></fa-icon> UPI Reports </button>
</button> <button mat-menu-item tabindex="0"><fa-icon icon="sync" class="menu-item-icon"></fa-icon> NACH</button>
</div> <button mat-menu-item tabindex="0">
<fa-icon icon="file-signature" class="menu-item-icon"></fa-icon> Mandate
<!-- Cards & Mandates --> </button>
<div class="deposit-menu-group">
<div class="deposit-group-title">Cards &amp; Mandates</div>
<button mat-menu-item routerLink="/digital/atm-pos-ecom" tabindex="0">
<fa-icon icon="credit-card" class="menu-item-icon"></fa-icon> ATM / POS / ECOM Reports
</button>
<button mat-menu-item tabindex="0"><fa-icon icon="sync" class="menu-item-icon"></fa-icon> NACH</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="file-signature" class="menu-item-icon"></fa-icon> Mandate
</button>
</div>
</div>
</mat-menu> </mat-menu>
<!-- RBI Mega Menu --> <!-- RBI Mega Menu -->
@@ -2041,11 +1912,11 @@
</a> </a>
<a <a
class="gl-link" class="gl-link"
[class.hidden]="!matchesRbiSearch('ALM Average Liabilities and Assets Time Bucket Breakdown')" [class.hidden]="!matchesRbiSearch('ALM')"
(click)="rbiMenuOpen = false; openAlmBucketBreakdownDialog()" (click)="rbiMenuOpen = false; openAlmReportDialog()"
> >
<fa-icon icon="balance-scale" class="gl-icon" style="color: #4f46e5"></fa-icon> ALM (Average Liabilities <fa-icon icon="balance-scale" class="gl-icon" style="color: #4f46e5"></fa-icon> ALM (Asset Liability
and Assets) – Time Bucket Breakdown Management)
</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)
+123 -249
View File
@@ -244,44 +244,6 @@ $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;
@@ -304,7 +266,7 @@ $color: #e2e4ec;
max-width: 100%; max-width: 100%;
overflow-x: hidden; overflow-x: hidden;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 18px; padding: 16px 28px;
} }
} }
@@ -320,15 +282,21 @@ $gray-700: #334155;
/* ============================================================ /* ============================================================
Main header (top 2-row navigation) Main header (top 2-row navigation)
-------------------------------------------------------------- --------------------------------------------------------------
Compact, modern enterprise SaaS navigation: Redesigned 2026 — clean, modern enterprise SaaS feel:
• Height reduced to 32px per row (64px total) to save screen space. • Both rows live on the same white surface separated only by a
• Smooth horizontal scrolling prevents menu items from getting cut off. hairline; r2 has a barely-there blue-50 wash so frequent vs
• Compact typography, icons and paddings fit all banking modules cleanly. secondary menus read at a glance without dark/light contrast.
• Items are now equal-width "tabs" with NO vertical dividers
between them (the old cell borders made it look spreadsheet-y).
• Hover / active = a 3 px brand-coloured TOP bar + brand text +
coloured icon. Reads instantly without colour-flooding the row.
• Icons larger (12.5 px) and full-opacity always — easier to scan
during demos. Caret is subtle and rotates on open.
============================================================ */ ============================================================ */
.main-header { .main-header {
background: #fff; background: #fff;
border-bottom: 2px solid $brand; border-bottom: 2.5px solid $brand;
box-shadow: 0 1px 3px rgb(0 0 0 / 6%); box-shadow: 0 1px 4px rgb(0 0 0 / 7%);
position: sticky; position: sticky;
/* Sit directly under the sticky toolbar (32px tall) so both stay visible. */ /* Sit directly under the sticky toolbar (32px tall) so both stay visible. */
@@ -338,19 +306,19 @@ $gray-700: #334155;
} }
.nav-row { .nav-row {
height: 32px; height: 44px;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
overflow: auto visible; overflow: visible;
position: relative; position: relative;
/* Outer frame; vertical dividers between cells are drawn as `border-right`
on each `.ni` below. Switched away from the equal-column grid so each
cell can size to its own label — long names (General Ledger, Documents
Hub) no longer overflow and short ones (Approvals, HRM) no longer waste
space. */
border: 1px solid $gray-200; border: 1px solid $gray-200;
background: #fff; background: #fff;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
} }
.r2.nav-row { .r2.nav-row {
@@ -366,17 +334,25 @@ $gray-700: #334155;
background: #f8fafc; background: #f8fafc;
} }
// ===== Nav Item — compact modern tab style ===== // ===== Nav Item — modern tab style =====
// Typography spec — same family / size / weight / color for BOTH rows.
.ni { .ni {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2.5px; gap: 7px;
height: 100%; height: 100%;
/* Each cell sizes to its own label (min-width: max-content) and grows
to share any leftover row width. Short labels stay compact, long ones
get the room they need — no overlap, no wasted gap. */
flex: 1 0 auto; flex: 1 0 auto;
min-width: 0; min-width: max-content;
padding: 0 4px; padding: 0 14px;
/* Vertical divider between adjacent cells; outer frame is the row's
own border, and the last cell drops its right border below. */
border-right: 1px solid $gray-200; border-right: 1px solid $gray-200;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -384,11 +360,11 @@ $gray-700: #334155;
'IBM Plex Sans', 'IBM Plex Sans',
-apple-system, -apple-system,
sans-serif; sans-serif;
font-size: 10px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #0a1a2e; color: #0a1a2e;
line-height: 1.2; line-height: 1.3;
letter-spacing: -0.015em; letter-spacing: 0.01em;
text-decoration: none; text-decoration: none;
user-select: none; user-select: none;
transition: transition:
@@ -397,15 +373,17 @@ $gray-700: #334155;
box-shadow 0.15s ease; box-shadow 0.15s ease;
border-radius: 0; border-radius: 0;
/* 3px accent strip that fills on hover / active (uses ::before so we
don't reflow the row when toggling). */
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 2px; left: 4px;
right: 2px; right: 4px;
top: 0; top: 0;
height: 2px; height: 3px;
background: transparent; background: transparent;
border-radius: 0 0 2px 2px; border-radius: 0 0 3px 3px;
transition: background 0.15s ease; transition: background 0.15s ease;
} }
@@ -432,19 +410,17 @@ $gray-700: #334155;
outline-offset: -2px; outline-offset: -2px;
} }
/* Last cell in a row sits flush against the row's own right edge, so
drop its divider to avoid a double 2 px line. */
&:last-child { &:last-child {
border-right: none; border-right: none;
} }
.ni-short {
display: none;
}
} }
.ni-ico { .ni-ico {
width: 9.5px; width: 12px;
height: 9.5px; height: 12px;
font-size: 9.5px; font-size: 12px;
color: $gray-500; color: $gray-500;
flex-shrink: 0; flex-shrink: 0;
transition: color 0.15s ease; transition: color 0.15s ease;
@@ -456,12 +432,11 @@ $gray-700: #334155;
} }
.ni-caret { .ni-caret {
width: 5px; width: 7px;
height: 5px; height: 7px;
font-size: 5px; font-size: 7px;
color: $gray-400; color: $gray-400;
flex-shrink: 0; flex-shrink: 0;
margin-left: 0.5px;
transition: transition:
transform 0.18s ease, transform 0.18s ease,
color 0.18s ease; color 0.18s ease;
@@ -472,89 +447,17 @@ $gray-700: #334155;
} }
} }
@media (width >= 1400px) {
.ni {
padding: 0 6px;
gap: 3.5px;
font-size: 10.8px;
letter-spacing: 0;
}
.ni-ico {
width: 10px;
height: 10px;
font-size: 10px;
}
.ni-caret {
width: 5.5px;
height: 5.5px;
font-size: 5.5px;
margin-left: 1px;
}
}
@media (width <= 1200px) { @media (width <= 1200px) {
.ni { .ni {
padding: 0 3px; padding: 0 8px;
gap: 2px; gap: 5px;
font-size: 9.8px;
letter-spacing: -0.02em;
}
.ni-ico {
width: 9px;
height: 9px;
font-size: 9px;
}
.ni-caret {
width: 4.5px;
height: 4.5px;
font-size: 4.5px;
} }
} }
@media (width <= 1080px) { @media (width <= 980px) {
.ni { .ni {
padding: 0 2.5px;
gap: 1.5px;
font-size: 9.4px;
letter-spacing: -0.025em;
.ni-full {
display: none;
}
.ni-short {
display: inline;
}
}
.ni-ico {
width: 8.5px;
height: 8.5px;
font-size: 8.5px;
}
.ni-caret {
width: 4px;
height: 4px;
font-size: 4px;
}
}
@media (width <= 880px) {
.nav-row {
overflow-x: auto;
scrollbar-width: thin;
}
.ni {
flex: 0 0 auto;
padding: 0 6px; padding: 0 6px;
gap: 3px; gap: 4px;
font-size: 10px;
} }
} }
@@ -796,29 +699,21 @@ $gray-700: #334155;
// ===== Nav Dropdown Menus ===== // ===== Nav Dropdown Menus =====
::ng-deep .nav-dropdown { ::ng-deep .nav-dropdown {
border-radius: 6px !important; border-radius: 8px !important;
border: 1px solid $gray-200 !important; border: 1px solid $gray-200 !important;
box-shadow: 0 4px 16px rgb(0 0 0 / 12%) !important; box-shadow: 0 6px 24px rgb(0 0 0 / 10%) !important;
min-width: 170px !important; min-width: 180px !important;
padding: 3px 0 !important; padding: 4px 0 !important;
margin-top: 1px !important; margin-top: 2px !important;
.mat-mdc-menu-item { .mat-mdc-menu-item {
font-size: 10.5px !important; font-size: 12.5px !important;
font-weight: 500 !important; font-weight: 500 !important;
height: 25px !important; height: 34px !important;
min-height: 25px !important; min-height: 34px !important;
padding: 0 6px !important; padding: 0 14px !important;
line-height: 25px !important;
color: $gray-700 !important; color: $gray-700 !important;
font-family: 'IBM Plex Sans', Roboto, sans-serif !important; font-family: 'DM Sans', Roboto, sans-serif !important;
white-space: nowrap !important;
.menu-item-icon {
font-size: 10.5px !important;
margin-right: 5px !important;
opacity: 0.8;
}
&:hover { &:hover {
background: $brand-hover !important; background: $brand-hover !important;
@@ -833,44 +728,39 @@ $gray-700: #334155;
} }
/* Deposits Mega Panel (inside mat-menu overlay) */ /* Deposits Mega Panel (inside mat-menu overlay) */
::ng-deep .deposit-menu-grid { .deposit-menu-grid {
display: grid; display: grid;
gap: 4px 12px; grid-template-columns: repeat(3, 1fr);
padding: 6px 10px; gap: 8px 24px;
min-width: 0; padding: 8px 12px;
width: 100%; min-width: 600px;
box-sizing: border-box;
overflow-x: hidden;
} }
::ng-deep .deposit-menu-group { .deposit-menu-group {
.deposit-group-title { .deposit-group-title {
font-weight: 700; font-weight: 700;
font-size: 9.5px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.6px;
color: #1074b9; color: #1074b9;
padding: 2px 6px 3px; padding: 4px 16px 6px;
margin-bottom: 2px; margin-bottom: 2px;
border-bottom: 1.5px solid #1074b9; border-bottom: 2px solid #1074b9;
white-space: nowrap;
} }
} }
/* NPA Mega Panel — 3 columns */ /* NPA Mega Panel — 4 columns (Reports / Analysis / Classification / Recovery Management) */
::ng-deep .npa-grid { .npa-grid {
grid-template-columns: repeat(3, minmax(210px, 1fr)); grid-template-columns: repeat(4, minmax(200px, 1fr));
min-width: 0; min-width: 880px;
max-width: 100%; max-width: 96vw;
overflow-x: hidden;
} }
/* Reconciliation Mega Panel — 5 columns */ /* Reconciliation Mega Panel — 5 columns, teal accent to match the icon palette */
::ng-deep .reconciliation-grid { .reconciliation-grid {
grid-template-columns: repeat(5, minmax(170px, 1fr)); grid-template-columns: repeat(5, minmax(190px, 1fr));
min-width: 0; min-width: 1040px;
max-width: 100%; max-width: 96vw;
overflow-x: hidden;
.deposit-group-title { .deposit-group-title {
color: #0d9488; color: #0d9488;
@@ -890,49 +780,47 @@ $gray-700: #334155;
.gl-mega-menu { .gl-mega-menu {
position: absolute; position: absolute;
top: 96px; top: 100px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: #fff; background: #fff;
width: 760px; width: 860px;
max-width: 94vw; max-width: 95vw;
max-height: 72vh; padding: 20px 24px;
overflow-y: auto; box-shadow: 0 6px 24px rgb(0 0 0 / 22%);
padding: 12px 16px; border-radius: 0 0 10px 10px;
box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
border-radius: 0 0 8px 8px;
z-index: 1000; z-index: 1000;
border-top: 2.5px solid #0d47a1; border-top: 3px solid #0d47a1;
} }
.gl-mega-menu-header { .gl-mega-menu-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
margin-bottom: 8px; margin-bottom: 14px;
padding-bottom: 6px; padding-bottom: 12px;
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
span { span {
font-size: 14px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #0d47a1; color: #0d47a1;
letter-spacing: 0.01em; letter-spacing: 0.02em;
} }
} }
.gl-mega-menu-header-icon { .gl-mega-menu-header-icon {
font-size: 14px; font-size: 18px;
color: #0d47a1; color: #0d47a1;
} }
.gl-search { .gl-search {
width: 100%; width: 100%;
padding: 6px 10px; padding: 10px 14px;
margin-bottom: 10px; margin-bottom: 16px;
border: 1px solid #d0d5dd; border: 1px solid #d0d5dd;
border-radius: 5px; border-radius: 6px;
font-size: 12px; font-size: 14px;
box-sizing: border-box; box-sizing: border-box;
background: #f9fafb; background: #f9fafb;
@@ -940,37 +828,36 @@ $gray-700: #334155;
outline: none; outline: none;
border-color: #0d47a1; border-color: #0d47a1;
background: #fff; background: #fff;
box-shadow: 0 0 0 2px rgb(13 71 161 / 10%); box-shadow: 0 0 0 3px rgb(13 71 161 / 10%);
} }
} }
.gl-columns { .gl-columns {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 10px 16px; gap: 24px;
} }
.gl-group-title { .gl-group-title {
font-weight: 700; font-weight: 700;
font-size: 10px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.6px; letter-spacing: 0.8px;
color: #0d47a1; color: #0d47a1;
margin-bottom: 5px; margin-bottom: 10px;
padding-bottom: 3px; padding-bottom: 6px;
border-bottom: 1.5px solid #0d47a1; border-bottom: 2px solid #0d47a1;
} }
.gl-link { .gl-link {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 3.5px 5px; padding: 7px 6px;
text-decoration: none; text-decoration: none;
color: #344054; color: #344054;
font-size: 11.5px; font-size: 13px;
line-height: 1.3;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 5px;
transition: transition:
background 0.15s, background 0.15s,
color 0.15s; color 0.15s;
@@ -986,21 +873,23 @@ $gray-700: #334155;
} }
.gl-icon { .gl-icon {
width: 14px; width: 18px;
margin-right: 5px; margin-right: 8px;
color: #667085; color: #667085;
font-size: 11px; font-size: 13px;
flex-shrink: 0;
.gl-link:hover & { .gl-link:hover & {
color: #0d47a1; color: #0d47a1;
} }
} }
// Marks a menu link as actually wired to a working screen/dialog (vs a still-unwired
// placeholder) — a small green dot at the end of the row, so a reviewer can tell at a glance
// which items in a mega-menu are functional without having to click every one of them.
.gl-link--live::after { .gl-link--live::after {
content: ''; content: '';
width: 5px; width: 6px;
height: 5px; height: 6px;
margin-left: auto; margin-left: auto;
flex-shrink: 0; flex-shrink: 0;
border-radius: 50%; border-radius: 50%;
@@ -1010,9 +899,9 @@ $gray-700: #334155;
/* RBI Mega Menu */ /* RBI Mega Menu */
.rbi-mega-menu { .rbi-mega-menu {
width: 880px; width: 1100px;
max-width: 94vw; max-width: 97vw;
max-height: 72vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
border-top-color: #b71c1c; border-top-color: #b71c1c;
} }
@@ -1020,7 +909,7 @@ $gray-700: #334155;
.rbi-columns { .rbi-columns {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 10px 16px; gap: 20px;
} }
@keyframes move { @keyframes move {
@@ -1082,18 +971,3 @@ $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,7 +17,6 @@ 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 */
@@ -69,11 +68,6 @@ 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
@@ -150,13 +144,6 @@ 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();
@@ -377,31 +364,10 @@ 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();
} }
@@ -20,9 +20,7 @@
<div class="t-live"></div> <div class="t-live"></div>
&nbsp;LIVE &nbsp;LIVE
</div> </div>
<div class="t-chip"> <div class="t-chip">Branch:&nbsp;<strong>{{ officeLabel }}</strong></div>
Branch:&nbsp;<strong>{{ officeLabel }}</strong>
</div>
<div class="t-chip"> <div class="t-chip">
Date:&nbsp;<strong>{{ today | date: 'dd MMM yyyy' }}</strong> Date:&nbsp;<strong>{{ today | date: 'dd MMM yyyy' }}</strong>
</div> </div>
@@ -524,7 +522,7 @@
</mat-menu> </mat-menu>
<!-- Application User Help Menu --> <!-- Application User Help Menu -->
<mat-menu #applicationMenu="matMenu" [overlapTrigger]="false" class="t-user-menu" xPosition="before"> <mat-menu #applicationMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item (click)="help()" tabindex="0"> <button mat-menu-item (click)="help()" tabindex="0">
<mat-icon matListIcon> <mat-icon matListIcon>
<fa-icon icon="question-circle" size="sm"></fa-icon> <fa-icon icon="question-circle" size="sm"></fa-icon>
+58 -186
View File
@@ -390,103 +390,6 @@ $icon-hover-border: rgb(255 255 255 / 28%);
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
} }
// Compact card per AI module
.ai-card.mat-mdc-menu-item {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 10px !important;
min-height: 52px !important;
height: auto !important;
border-radius: 9px !important;
font-family: inherit !important;
line-height: 1.3 !important;
white-space: normal !important;
overflow: visible !important;
transition: background 0.16s ease !important;
.mat-mdc-menu-item-text,
.mdc-list-item__primary-text,
.mdc-list-item__content {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
width: 100% !important;
white-space: normal !important;
overflow: visible !important;
}
.ai-card-ic {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
font-size: 13px !important;
flex-shrink: 0 !important;
background: var(--c-bg) !important;
color: var(--c-color) !important;
margin: 0 !important;
opacity: 1 !important;
transition:
background 0.16s ease,
color 0.16s ease,
transform 0.16s ease !important;
fa-icon {
font-size: 13px !important;
width: auto !important;
min-width: auto !important;
margin: 0 !important;
color: inherit !important;
opacity: 1 !important;
}
}
.ai-card-body {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
min-width: 0 !important;
text-align: left !important;
white-space: normal !important;
}
.ai-card-t {
font-size: 12.5px !important;
font-weight: 600 !important;
color: #0f172a !important;
line-height: 1.25 !important;
white-space: normal !important;
display: block !important;
}
.ai-card-d {
font-size: 10.5px !important;
color: #64748b !important;
margin-top: 3px !important;
line-height: 1.35 !important;
white-space: normal !important;
display: block !important;
}
&:hover {
background: var(--c-bg) !important;
.ai-card-ic {
background: var(--c-hover) !important;
color: #fff !important;
transform: scale(1.06) !important;
}
.ai-card-t {
color: var(--c-color) !important;
}
}
}
} }
.ai-menu-header { .ai-menu-header {
@@ -585,101 +488,70 @@ $icon-hover-border: rgb(255 255 255 / 28%);
font-size: 11px; font-size: 11px;
} }
// ===== User Account Dropdown Menu ===== // Compact card per AI module
::ng-deep .t-user-menu.mat-mdc-menu-panel { .ai-card.mat-mdc-menu-item {
min-width: 190px !important; display: flex !important;
border-radius: 10px !important; align-items: flex-start;
box-shadow: gap: 10px;
0 10px 25px rgb(15 23 42 / 12%), padding: 9px 10px;
0 2px 6px rgb(15 23 42 / 6%) !important; min-height: 0;
border: 1px solid #e2e8f0 !important; height: auto;
padding: 6px 0 !important; border-radius: 9px;
background: #fff !important; font-family: inherit;
line-height: 1.3;
white-space: normal;
transition: background 0.16s ease;
.mat-mdc-menu-content { .ai-card-ic {
padding: 4px 0 !important; width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 13px;
flex-shrink: 0;
background: var(--c-bg);
color: var(--c-color);
transition:
background 0.16s ease,
color 0.16s ease,
transform 0.16s ease;
} }
.mat-mdc-menu-item { .ai-card-body {
height: 38px !important; display: flex;
min-height: 38px !important; flex-direction: column;
line-height: 38px !important; flex: 1;
padding: 0 14px !important; min-width: 0;
display: flex !important; text-align: left;
align-items: center !important; }
font-size: 13px !important;
font-weight: 500 !important;
color: #334155 !important;
transition:
background-color 0.15s ease,
color 0.15s ease !important;
.mat-mdc-menu-item-text { .ai-card-t {
display: inline-flex !important; font-size: 12.5px;
align-items: center !important; font-weight: 600;
width: 100% !important; color: #0f172a;
font-size: 13px !important; line-height: 1.25;
color: inherit !important; }
font-weight: 500 !important;
.ai-card-d {
font-size: 10.5px;
color: #64748b;
margin-top: 2px;
line-height: 1.35;
}
&:hover {
background: var(--c-bg);
.ai-card-ic {
background: var(--c-hover);
color: #fff;
transform: scale(1.06);
} }
mat-icon { .ai-card-t {
margin-right: 10px !important; color: var(--c-color);
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #64748b !important;
font-size: 14px !important;
flex-shrink: 0 !important;
fa-icon {
font-size: 14px !important;
width: 14px !important;
min-width: 14px !important;
text-align: center !important;
margin-right: 0 !important;
color: inherit !important;
opacity: 1 !important;
}
}
span {
font-size: 13px !important;
color: inherit !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
&:hover {
background-color: #f1f5f9 !important;
color: #0d47a1 !important;
mat-icon {
color: #0d47a1 !important;
}
}
&#logout {
color: #dc2626 !important;
border-top: 1px solid #f1f5f9 !important;
margin-top: 4px !important;
padding-top: 2px !important;
mat-icon {
color: #dc2626 !important;
}
&:hover {
background-color: #fef2f2 !important;
color: #b91c1c !important;
mat-icon {
color: #b91c1c !important;
}
}
} }
} }
} }
@@ -838,23 +838,9 @@
<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">
@if (readOnly) { <span class="ni-pct-badge" [class.ni-pct-badge--full]="c.sharePercentage === 100">
<span class="ni-pct-badge" [class.ni-pct-badge--full]="c.sharePercentage === 100"> {{ c.sharePercentage }}%
{{ c.sharePercentage }}% </span>
</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,31 +465,6 @@ $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,8 +29,6 @@ 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
@@ -209,9 +207,6 @@ 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();
}); });
} }
@@ -627,52 +622,6 @@ 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,6 +135,18 @@
<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,6 +40,18 @@
</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">
@@ -1,381 +0,0 @@
<!--
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="dialog-wrapper">
<div class="dialog-header">
<div class="header-icon">
<mat-icon>account_balance_wallet</mat-icon>
</div>
<div class="header-text">
<h2>Apply DDS Receipt</h2>
<p>
Agent <strong class="mono">{{ data.agentCode }}</strong> · {{ data.agentName }}
@if (data.glCode) {
· GL <strong class="mono">{{ data.glCode }}</strong>
}
</p>
</div>
<button type="button" mat-icon-button class="header-close" [mat-dialog-close]="false" aria-label="Close">
<mat-icon>close</mat-icon>
</button>
</div>
<mat-dialog-content class="dialog-body">
@if (loading) {
<div class="state-block">
<mat-spinner diameter="30"></mat-spinner>
<span>Loading entries and receipts…</span>
</div>
} @else {
<!-- What the picked vouchers have to cover, and whether they do. -->
<div class="sc-card">
<div class="sc-row" [class.sc-ok]="canApply" [class.sc-bad]="pickedReceipts.size > 0 && difference !== 0">
<div class="sc-left">
<span class="sc-label">Collections up to {{ data.entryDate | date: 'dd/MM/yyyy' }}</span>
<span class="sc-sub"
>{{ pickedEntryCount }} {{ pickedEntryCount === 1 ? 'entry' : 'entries' }} to settle</span
>
</div>
<div class="sc-right">
<span class="sc-val">{{ required | number: '1.2-2' }}</span>
</div>
</div>
<div
class="sc-row sc-sep"
[class.sc-ok]="canApply"
[class.sc-bad]="pickedReceipts.size > 0 && difference !== 0"
>
<div class="sc-left">
<span class="sc-label">Vouchers picked</span>
<span class="sc-sub"
>{{ pickedReceipts.size }} {{ pickedReceipts.size === 1 ? 'voucher' : 'vouchers' }}</span
>
</div>
<div class="sc-right">
<span
class="sc-val"
[class.sc-val-ok]="canApply"
[class.sc-val-bad]="pickedReceipts.size > 0 && difference !== 0"
>
{{ received | number: '1.2-2' }}
</span>
@if (pickedReceipts.size > 0 && pickedDays.size > 0 && difference < 0) {
<span class="sc-tag sc-tag-bad">Short {{ -difference | number: '1.2-2' }}</span>
} @else if (pickedReceipts.size > 0 && pickedDays.size > 0 && difference > 0) {
<span class="sc-tag sc-tag-bad">Over {{ difference | number: '1.2-2' }}</span>
} @else if (canApply) {
<span class="sc-tag sc-tag-ok">✓ Matches</span>
}
</div>
</div>
<div class="sc-total-row" [class.sc-total-ok]="canApply">
<span class="sc-total-lbl">Total to Apply</span>
<div class="sc-total-nums">
<span class="sc-total-req mono">{{ required | number: '1.2-2' }}</span>
<span class="sc-arrow">→</span>
<span class="sc-total-got mono" [class.sc-total-got-ok]="canApply">{{ received | number: '1.2-2' }}</span>
<span class="sc-status-pill" [class.sc-pill-ok]="canApply" [class.sc-pill-pending]="!canApply">
{{ canApply ? '✓ Ready' : 'Pending' }}
</span>
</div>
</div>
</div>
<!-- ── 1: the days the agent wrote down ──────────────────────────────────── -->
<section class="slot">
<header class="slot-head">
<span class="slot-step">1</span>
<div class="slot-title">
<h3>Outstanding up to {{ data.entryDate | date: 'dd/MM/yyyy' }}</h3>
<p>Everything the agent wrote down and has not handed in, day by day. Open a day to see its lines.</p>
</div>
</header>
@if (days.length) {
<ul class="options">
@for (day of days; track day.date) {
<li class="option" (click)="toggleOpen(day, $event)">
<div class="option-main">
<span class="option-voucher mono">{{ day.date | date: 'dd/MM/yyyy' }}</span>
<span class="option-meta"
>{{ day.entries.length }} {{ day.entries.length === 1 ? 'entry' : 'entries' }}</span
>
</div>
<span class="option-amount mono">{{ day.total | number: '1.2-2' }}</span>
<button
type="button"
class="option-info"
(click)="toggleOpen(day, $event)"
aria-label="Show the day's lines"
>
<mat-icon>{{ openDay === day.date ? 'expand_less' : 'expand_more' }}</mat-icon>
</button>
</li>
@if (openDay === day.date) {
<li class="day-lines">
@if (day.entries.length > 8) {
<input
class="day-search"
type="text"
[(ngModel)]="daySearch"
placeholder="Search party code or name"
autocomplete="off"
/>
}
<div class="day-scroll">
<table class="entries">
<tbody>
@for (entry of visibleEntries(day); track entry.id) {
<tr>
<td class="entry-code">{{ entry.partyCode }}</td>
<td class="entry-name">{{ entry.partyName }}</td>
<td>
{{ entry.transactionMode }}
@if (entry.advanceDays) {
· {{ entry.advanceDays }}d advance
}
@if (entry.arrearsDays) {
· {{ entry.arrearsDays }}d previous
}
</td>
<td class="num mono">{{ entry.amount | number: '1.2-2' }}</td>
</tr>
} @empty {
<tr>
<td colspan="4" class="entry-name">No line matches.</td>
</tr>
}
</tbody>
</table>
</div>
</li>
}
}
</ul>
} @else {
<p class="slot-empty">
{{ data.agentName }} has nothing outstanding for {{ data.entryDate | date: 'dd/MM/yyyy' }}. Change the date
on the screen to the day the entries were written.
</p>
}
</section>
<!-- ── 2: the cashier's receipts ─────────────────────────────────────────── -->
<section class="slot">
<header class="slot-head">
<span class="slot-step">2</span>
<div class="slot-title">
<h3>DDS Cash Receipts</h3>
<p>Tick the vouchers. Posts Dr Agent GL / Cr DDS Customer Deposits.</p>
</div>
<button type="button" class="slot-search" (click)="openSearch()">
<mat-icon>search</mat-icon>
<span>Find by voucher</span>
</button>
</header>
@if (available.length) {
<ul class="options">
@for (option of available; track option.id) {
<li class="option" [class.option-picked]="pickedReceipts.has(option.id)" (click)="toggleReceipt(option)">
<mat-icon class="option-check">{{
pickedReceipts.has(option.id) ? 'check_box' : 'check_box_outline_blank'
}}</mat-icon>
<div class="option-main">
<span class="option-voucher mono">{{ option.voucherNo }}</span>
<span class="option-meta">{{ option.txnDate }} · {{ glLabel(option) }}</span>
@if (option.description) {
<span class="option-desc">{{ option.description }}</span>
}
</div>
<span class="option-amount mono">{{ option.amount | number: '1.2-2' }}</span>
<button type="button" class="option-info" (click)="openDetail(option, $event)" aria-label="GL entries">
<mat-icon>receipt_long</mat-icon>
</button>
</li>
}
</ul>
} @else {
<p class="slot-empty">
No DDS receipt is waiting on this agent's GL account. Collect the cash at
<em>Cashier › Transaction Entry</em> with entry type <strong>DDS</strong> and have the manager approve it,
or find an earlier voucher by number.
</p>
}
@if (pickedReceipts.size > 0 && pickedDays.size > 0 && difference !== 0) {
<p class="slot-note note-bad">
The vouchers ({{ received | number: '1.2-2' }}) have to match the day's entries ({{
required | number: '1.2-2'
}}) exactly, so every customer is credited what the agent wrote down.
</p>
}
</section>
@if (errorMsg && !searchOpen) {
<div class="alert">
<mat-icon>error_outline</mat-icon>
<span>{{ errorMsg }}</span>
</div>
}
}
</mat-dialog-content>
<mat-dialog-actions class="dialog-actions">
<button type="button" mat-stroked-button [mat-dialog-close]="false" [disabled]="submitting">Cancel</button>
<button type="button" mat-flat-button color="primary" [disabled]="!canApply" (click)="apply()">
@if (submitting) {
<mat-spinner diameter="16"></mat-spinner>
<span>Applying…</span>
} @else {
<mat-icon>check</mat-icon>
<span>Apply Receipt</span>
}
</button>
</mat-dialog-actions>
</div>
<!-- ── Find a voucher the list does not carry ───────────────────────────────── -->
@if (searchOpen) {
<div class="overlay" (click)="closeSearch()">
<div class="popup" (click)="$event.stopPropagation()">
<header class="popup-head">
<h3>Find a DDS receipt</h3>
<button type="button" mat-icon-button (click)="closeSearch()" aria-label="Close">
<mat-icon>close</mat-icon>
</button>
</header>
<div class="popup-body">
<label class="field">
<span>GL Account</span>
<div class="field-readonly mono">{{ data.glCode || '—' }} · {{ data.agentCode }}</div>
</label>
<label class="field">
<span>Voucher No.</span>
<input
type="text"
[(ngModel)]="searchVoucherNo"
placeholder="CR/24092026/0001"
(keyup.enter)="runSearch()"
autocomplete="off"
/>
</label>
@if (errorMsg) {
<div class="alert">
<mat-icon>error_outline</mat-icon>
<span>{{ errorMsg }}</span>
</div>
}
</div>
<footer class="popup-foot">
<button type="button" mat-stroked-button (click)="closeSearch()">Cancel</button>
<button
type="button"
mat-flat-button
color="primary"
[disabled]="!searchVoucherNo.trim() || searching"
(click)="runSearch()"
>
@if (searching) {
<mat-spinner diameter="16"></mat-spinner>
} @else {
<span>Find &amp; Use</span>
}
</button>
</footer>
</div>
</div>
}
<!-- ── A receipt's own GL entries ───────────────────────────────────────────── -->
@if (viewing) {
<div class="overlay" (click)="closeDetail()">
<div class="popup" (click)="$event.stopPropagation()">
<header class="popup-head">
<h3>
Voucher <span class="mono">{{ viewing.voucherNo }}</span>
</h3>
<button type="button" mat-icon-button (click)="closeDetail()" aria-label="Close">
<mat-icon>close</mat-icon>
</button>
</header>
<div class="popup-body">
<dl class="detail-list">
<div>
<dt>Date</dt>
<dd class="mono">{{ viewing.txnDate }}</dd>
</div>
<div>
<dt>Amount</dt>
<dd class="mono">{{ viewing.amount | number: '1.2-2' }}</dd>
</div>
<div>
<dt>GL Account</dt>
<dd>{{ glLabel(viewing) }}</dd>
</div>
@if (viewing.cashierName) {
<div>
<dt>Collected By</dt>
<dd>{{ viewing.cashierName }}</dd>
</div>
}
@if (viewing.managerName) {
<div>
<dt>Approved By</dt>
<dd>{{ viewing.managerName }}</dd>
</div>
}
@if (viewing.description) {
<div>
<dt>Description</dt>
<dd>{{ viewing.description }}</dd>
</div>
}
</dl>
<h4 class="detail-heading">Journal Entries</h4>
@if (loadingGlEntries) {
<div class="state-block"><mat-spinner diameter="22"></mat-spinner></div>
} @else if (viewingGlEntries?.length) {
<table class="gl-table">
<thead>
<tr>
<th>Account</th>
<th class="num">Debit</th>
<th class="num">Credit</th>
</tr>
</thead>
<tbody>
@for (entry of viewingGlEntries; track entry.id) {
<tr>
<td>
<span class="mono">{{ entry.glCode }}</span> {{ entry.glName }}
</td>
<td class="num mono">{{ entry.drCr === 'DR' ? (entry.amount | number: '1.2-2') : '' }}</td>
<td class="num mono">{{ entry.drCr === 'CR' ? (entry.amount | number: '1.2-2') : '' }}</td>
</tr>
}
</tbody>
</table>
} @else {
<p class="slot-empty">No journal entries are recorded against this receipt.</p>
}
</div>
<footer class="popup-foot">
<button type="button" mat-stroked-button (click)="closeDetail()">Close</button>
</footer>
</div>
</div>
}
@@ -1,95 +0,0 @@
/**
* 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 same look as Apply Additional Shares, on purpose: both apply a cashier's receipt to what it was
// collected for, and the counter should meet one screen, not two. Used as it is, never changed here.
@use '../../../shares/share-dialog.shared' as *;
:host {
display: block;
width: 100%;
}
// The agent's outstanding lines - read only, what the receipt has to cover.
.entries {
width: 100%;
border-collapse: collapse;
font-size: 13px;
td {
padding: 7px 4px;
border-bottom: 1px solid #eef2f7;
}
tr:last-child td {
border-bottom: none;
}
.entry-date {
color: #64748b;
white-space: nowrap;
}
.entry-code {
font-weight: 600;
white-space: nowrap;
}
.entry-name {
color: #475569;
}
.num {
text-align: right;
white-space: nowrap;
}
}
// Days and vouchers are ticked, any number of each - a check box where the share dialog has a radio.
.option-check {
color: #94a3b8;
flex-shrink: 0;
}
.option-picked {
border-color: #2563eb !important;
background: #eff6ff !important;
.option-check {
color: #2563eb;
}
}
// A day's own lines, opened under it. Scrolls inside itself, so a thousand customers do not make the
// dialog a thousand lines tall.
.day-lines {
list-style: none;
padding: 6px 10px 10px 42px;
}
.day-search {
width: 100%;
margin-bottom: 6px;
padding: 6px 10px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font: inherit;
font-size: 13px;
}
.day-scroll {
max-height: 240px;
overflow-y: auto;
}
.field-readonly {
padding: 8px 10px;
border: 1px solid #e2e8f0;
border-radius: 6px;
background: #f8fafc;
}
@@ -1,351 +0,0 @@
/**
* 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 { FormsModule } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';
import { OrganizationService } from 'app/organization/organization.service';
import { SettingsService } from 'app/settings/settings.service';
/** One day of an agent's outstanding entries, as the dialog lists them. */
export interface EntryDay {
date: string;
entries: any[];
total: number;
}
/**
* Applies the cashier's DDS receipts to an agent's outstanding collections.
*
* The agent's cash is already in the bank: the cashier took it at the counter into the agent's own GL
* account, tagged DDS, and the manager approved it. Applying it here hands the money on to the
* customers the agent wrote down - Dr the agent's GL, Cr DDS Customer Deposits - and each entry is
* settled against the application. The same screen as Apply Additional Shares.
*
* Everything outstanding up to the day chosen on the screen, shown a day at a time - nothing to tick,
* because what the agent wrote down is settled whole, and an agent who comes in after several days
* brings several days' cash. The vouchers are ticked, since a day's
* cash can come in more than one visit. They have to agree exactly: what the agent wrote down is what
* each customer is owed, so vouchers short of it leave somebody uncredited and vouchers over it leave
* money nobody can place.
*
* The day is shown totalled and its lines opened only when asked for - an agent with a thousand
* customers is a thousand lines, and the day's total is what the counter is checking.
*/
@Component({
selector: 'mifosx-apply-dds-receipt-dialog',
templateUrl: './apply-dds-receipt-dialog.component.html',
styleUrls: ['./apply-dds-receipt-dialog.component.scss'],
standalone: true,
imports: [
CommonModule,
FormsModule,
MatDialogModule,
MatButtonModule,
MatIconModule,
MatProgressSpinnerModule
]
})
export class ApplyDdsReceiptDialogComponent implements OnInit {
private organizationService = inject(OrganizationService);
private settingsService = inject(SettingsService);
public dialogRef = inject(MatDialogRef<ApplyDdsReceiptDialogComponent>);
public data = inject<{
agentId: number;
agentCode: string;
agentName: string;
glCode: string | null;
entryDate: string;
}>(MAT_DIALOG_DATA);
loadingEntries = true;
loadingReceipts = true;
submitting = false;
errorMsg = '';
/** The chosen day's outstanding entries - one day, or none when nothing is outstanding on it. */
days: EntryDay[] = [];
/** DDS receipts on the agent's GL account, approved and not yet applied. */
available: any[] = [];
/**
* The day is settled whole, so it is always included. The vouchers are the clerk's choice, and none
* is picked for them even when only one is listed.
*/
pickedDays = new Set<string>();
pickedReceipts = new Set<number>();
/** The day whose lines are open, and the search within it. */
openDay: string | null = null;
daySearch = '';
get loading(): boolean {
return this.loadingEntries || this.loadingReceipts;
}
ngOnInit(): void {
// Everything outstanding up to the chosen date, whatever day it was written - an agent's cash for
// several days arrives in one visit, and all of it is settled together.
this.organizationService
.getAgentPendingCollections(this.data.agentId)
.pipe(
catchError((err) => {
this.errorMsg = this.readError(err, "Could not load the agent's entries.");
return of(null);
})
)
.subscribe((res: any) => {
this.days = groupByDay(
(res?.entries || []).filter(
(entry: any) => entry.status === 'PENDING' && String(entry.entryDate) <= this.data.entryDate
)
);
this.pickedDays = new Set(this.days.map((day) => day.date));
this.loadingEntries = false;
});
this.organizationService
.getAgentCashReceipts(this.data.agentId)
.pipe(
catchError((err) => {
this.errorMsg = this.readError(err, 'Could not load the available receipts.');
return of([]);
})
)
.subscribe((rows: any) => {
this.available = Array.isArray(rows) ? rows : [];
this.loadingReceipts = false;
});
}
// ── Picking ─────────────────────────────────────────────────────────────────────────────────
toggleReceipt(receipt: any): void {
if (this.submitting) {
return;
}
this.pickedReceipts.has(receipt.id) ? this.pickedReceipts.delete(receipt.id) : this.pickedReceipts.add(receipt.id);
}
toggleOpen(day: EntryDay, event: Event): void {
event.stopPropagation();
this.openDay = this.openDay === day.date ? null : day.date;
this.daySearch = '';
}
/** The open day's lines, narrowed by party code or name. */
visibleEntries(day: EntryDay): any[] {
const term = this.daySearch.trim().toLowerCase();
if (!term) {
return day.entries;
}
return day.entries.filter(
(entry: any) =>
String(entry.partyCode || '')
.toLowerCase()
.includes(term) ||
String(entry.partyName || '')
.toLowerCase()
.includes(term)
);
}
// ── What has to be covered ──────────────────────────────────────────────────────────────────
get entryCount(): number {
return this.days.reduce((sum, day) => sum + day.entries.length, 0);
}
get outstandingTotal(): number {
return this.days.reduce((sum, day) => sum + day.total, 0);
}
get pickedEntryCount(): number {
return this.days.filter((day) => this.pickedDays.has(day.date)).reduce((sum, day) => sum + day.entries.length, 0);
}
get required(): number {
return round2(this.days.filter((day) => this.pickedDays.has(day.date)).reduce((sum, day) => sum + day.total, 0));
}
get received(): number {
return round2(
this.available.filter((r) => this.pickedReceipts.has(r.id)).reduce((sum, r) => sum + Number(r.amount || 0), 0)
);
}
/** Vouchers less entries: below zero they are short, above zero they are over. */
get difference(): number {
return round2(this.received - this.required);
}
get canApply(): boolean {
return this.pickedDays.size > 0 && this.pickedReceipts.size > 0 && this.difference === 0 && !this.submitting;
}
glLabel(option: any): string {
return [
option?.glCode,
option?.glName
]
.filter(Boolean)
.join(' — ');
}
// ── Voucher search, for a receipt the list does not carry ───────────────────────────────────
searching = false;
searchOpen = false;
searchVoucherNo = '';
openSearch(): void {
this.searchOpen = true;
this.searchVoucherNo = '';
this.errorMsg = '';
}
closeSearch(): void {
this.searchOpen = false;
this.errorMsg = '';
}
/**
* Finds one voucher on the agent's GL account and, when it cannot be used, says why - not taken as
* DDS, not approved yet, or already applied - rather than simply not finding it.
*/
runSearch(): void {
const voucher = this.searchVoucherNo.trim();
if (!voucher || this.searching) {
return;
}
this.searching = true;
this.errorMsg = '';
this.organizationService
.getAgentCashReceipts(this.data.agentId, voucher)
.pipe(
catchError((err) => {
this.errorMsg = this.readError(err, `Voucher ${voucher} could not be looked up.`);
return of(null);
})
)
.subscribe((rows: any) => {
this.searching = false;
if (rows === null) {
return;
}
const found = (Array.isArray(rows) ? rows : [])[0];
if (!found) {
this.errorMsg = `Voucher ${voucher} is not on ${this.data.agentCode}'s GL account ${this.data.glCode || ''}.`;
} else if (found.entryType !== 'DDS') {
this.errorMsg = `Voucher ${voucher} was taken as "${found.entryType || 'untagged'}", not DDS. Ask the cashier to correct the entry type.`;
} else if (found.status !== 'APPROVED') {
this.errorMsg = `Voucher ${voucher} is ${found.status}. It can be applied once the manager approves it.`;
} else if (found.applied) {
this.errorMsg = `Voucher ${voucher} has already been applied.`;
} else {
this.available = [
found,
...this.available.filter((entry) => entry.id !== found.id)
];
this.pickedReceipts.add(found.id);
this.searchOpen = false;
}
});
}
// ── A receipt's own GL entries ──────────────────────────────────────────────────────────────
viewing: any = null;
viewingGlEntries: any[] | null = null;
loadingGlEntries = false;
openDetail(option: any, event: Event): void {
event.stopPropagation();
this.viewing = option;
this.viewingGlEntries = null;
this.loadingGlEntries = true;
this.organizationService
.getCashReceiptGlEntries(option.id)
.pipe(catchError(() => of([])))
.subscribe((rows: any) => {
this.viewingGlEntries = Array.isArray(rows) ? rows : [];
this.loadingGlEntries = false;
});
}
closeDetail(): void {
this.viewing = null;
this.viewingGlEntries = null;
}
// ── Submission ──────────────────────────────────────────────────────────────────────────────
apply(): void {
if (!this.canApply) {
return;
}
this.submitting = true;
this.errorMsg = '';
const vouchers = this.available.filter((r) => this.pickedReceipts.has(r.id)).map((r) => r.voucherNo);
const entries = this.pickedEntryCount;
const amount = this.required;
this.organizationService
.settleAgentCollections({
agentId: Number(this.data.agentId),
cashierDepositRequestIds: Array.from(this.pickedReceipts),
entryDates: Array.from(this.pickedDays),
locale: this.settingsService.language.code
})
.pipe(
catchError((err) => {
this.errorMsg = this.readError(err, 'The receipts could not be applied.');
this.submitting = false;
return of(null);
})
)
.subscribe((res: any) => {
if (res) {
this.dialogRef.close({ vouchers, entries, amount, response: res });
}
});
}
private readError(err: any, fallback: string): string {
return (
err?.error?.errors?.[0]?.defaultUserMessage ??
err?.error?.defaultUserMessage ??
err?.error?.developerMessage ??
fallback
);
}
}
/** Entries grouped by the day they were collected, oldest first, each day totalled. */
export function groupByDay(entries: any[]): EntryDay[] {
const byDay = new Map<string, EntryDay>();
for (const entry of entries) {
const date = String(entry.entryDate);
const day = byDay.get(date) ?? { date, entries: [], total: 0 };
day.entries.push(entry);
day.total = round2(day.total + Number(entry.amount || 0));
byDay.set(date, day);
}
return Array.from(byDay.values()).sort((a, b) => a.date.localeCompare(b.date));
}
function round2(value: number): number {
return Math.round(value * 100) / 100;
}
@@ -1,468 +0,0 @@
<!--
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="dte-container">
<div class="dte-header">
<button mat-stroked-button [routerLink]="['../']" class="dte-back">
<i class="fas fa-arrow-left"></i> Deposits
</button>
<h2 class="dte-header__title">Daily Transaction Detail</h2>
</div>
<div class="dte-card">
<form [formGroup]="entryForm">
<div class="dte-info-panels">
<div class="dte-info-panel">
<div class="dte-info-panel__title">Agent Information</div>
<dl>
<dt>Name</dt>
<dd>{{ agentInfo.name || '—' }}</dd>
<dt>Address</dt>
<dd>{{ agentInfo.address || '—' }}</dd>
<dt>City</dt>
<dd>{{ agentInfo.city || '—' }}</dd>
<dt>A/C</dt>
<dd>{{ agentInfo.accountNo || '—' }}</dd>
<dt>Guarantor</dt>
<dd>{{ agentInfo.guarantor1 || '—' }}</dd>
<dt>Guarantor</dt>
<dd>{{ agentInfo.guarantor2 || '—' }}</dd>
<dt>Curr Bal</dt>
<dd>{{ agentInfo.currentBalance | number: '1.2-2' }}</dd>
</dl>
</div>
<div class="dte-info-panel">
<div class="dte-info-panel__title">Party Information</div>
@if (partyInfo) {
<dl>
<dt>Client Id</dt>
<dd>{{ partyInfo.clientId }}</dd>
<dt>Name</dt>
<dd>{{ partyInfo.partyName }}</dd>
<dt>Address</dt>
<dd>{{ partyInfo.address1 || '—' }}</dd>
<dt>City</dt>
<dd>{{ partyInfo.city || '—' }}</dd>
<dt>Op. Date</dt>
<dd>{{ partyInfo.openingDate ? (partyInfo.openingDate | dateFormat) : '—' }}</dd>
<dt>Maturity</dt>
<dd>{{ partyInfo.maturityDate ? (partyInfo.maturityDate | dateFormat) : '—' }}</dd>
<dt>Daily Depo</dt>
<dd>{{ partyInfo.dailyDepositAmount | number: '1.2-2' }}</dd>
<dt>Ledger</dt>
<dd>{{ partyInfo.ledgerNo || '—' }}</dd>
<dt>Aadhar No</dt>
<dd>{{ partyInfo.aadharNo || '—' }}</dd>
<dt>Curr Bal</dt>
<dd>{{ partyInfo.currentBalance | number: '1.2-2' }}</dd>
<!--
What should have been collected by today against what has been. Beside the balance
rather than instead of it: the balance is what the customer holds, this is whether
they have kept to the scheme.
-->
<dt>Due So Far</dt>
<dd>{{ partyInfo.expectedToDate | number: '1.2-2' }}</dd>
<dt>Collected</dt>
<dd>{{ partyInfo.collectedToDate | number: '1.2-2' }}</dd>
@if (schedule(partyInfo); as sched) {
<dt [class]="'dte-sched dte-sched--' + sched.state">Schedule</dt>
<dd [class]="'dte-sched dte-sched--' + sched.state">{{ sched.text }}</dd>
}
<dt class="dte-after">Bal. After This Tr</dt>
<dd class="dte-after">{{ partyBalanceAfter | number: '1.2-2' }}</dd>
</dl>
} @else {
<p class="dte-info-panel__hint">
Pick a party in a collection row below — this panel shows whose account it is and what the balance
becomes.
</p>
}
</div>
</div>
<div class="dte-controls">
<mat-form-field appearance="outline" class="dte-field dte-field--agent">
<mat-label>Agent</mat-label>
<mat-select required formControlName="agentId" (selectionChange)="loadAgent()">
@for (agent of selectableAgents; track agent.id) {
<mat-option [value]="agent.id">
{{ agent.agentCode }} · {{ agent.agentNameId }}
@if (!agent.active) {
<span class="dte-agent-off">— not collecting</span>
}
</mat-option>
}
</mat-select>
@if (selectableAgents.length === 0) {
<mat-hint class="dte-hint--missing">No active agent on file</mat-hint>
} @else if (pickedAgentIsInactive) {
<!-- Only reachable on a settlement: this agent no longer collects, but the cash they
already hold still has to be able to reach a branch. -->
<mat-hint class="dte-hint--missing">This agent no longer collects — settling held cash only</mat-hint>
} @else if (agentInfo.name) {
<mat-hint class="dte-hint--found">
{{ agentParties.length }} {{ agentParties.length === 1 ? 'party' : 'parties' }} to collect from
</mat-hint>
}
</mat-form-field>
<mat-form-field appearance="outline" class="dte-field">
<mat-label>Date</mat-label>
<!-- The date picks out a round, not just a posting date: a Party Tran settles whatever
the agent wrote down for that day, so changing it has to fetch that day's list. -->
<input
matInput
required
[matDatepicker]="txnDatePicker"
formControlName="transactionDate"
(dateChange)="loadPendingEntries(); loadAgentMoney()"
/>
<mat-datepicker-toggle matIconSuffix [for]="txnDatePicker"></mat-datepicker-toggle>
<mat-datepicker #txnDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline" class="dte-field">
<mat-label>Tran. Type</mat-label>
<mat-select required formControlName="transactionType">
@for (type of transactionTypes; track type.label) {
<mat-option [value]="type.label" [disabled]="!type.supported">
{{ type.label }}
@if (!type.supported) {
<span class="dte-soon"> — not available yet</span>
}
</mat-option>
}
</mat-select>
</mat-form-field>
</div>
<!--
What the agent wrote down on their round, waiting to be counted.
This used to be an empty grid the clerk typed the round into, and typing it posted it: a
customer was credited the moment a line was keyed, whether or not the cash behind it ever
reached the branch. The agent records their own collections now, and what the clerk does here
is agree with them - so there is nothing to type, only a list to check against a bag of cash.
-->
@if (isPartyTran && agentInfo.name) {
<div class="dte-section">
<div class="dte-section__header">
<i class="fas fa-list"></i>
<h3>Collections up to {{ entryForm.get('transactionDate')?.value | dateFormat }}</h3>
<button mat-stroked-button type="button" class="dte-add-row" (click)="loadPendingEntries()">
<i class="fas fa-sync"></i> Refresh
</button>
</div>
@if (pendingLoading) {
<p class="dte-empty">Reading this agent's entries...</p>
} @else if (pendingEntries.length === 0) {
<p class="dte-empty">{{ agentInfo.name }} has nothing outstanding up to this date.</p>
} @else {
@for (entry of pendingEntries; track entry.id) {
<div class="dte-pending-row">
<!-- The day the agent took it, on the line itself. All the lines carry the date
chosen above, but a row that says so can be read, printed or shown to the agent
on its own without the header to explain it. -->
<span class="dte-pending-row__date">{{ entry.entryDate | dateFormat }}</span>
<span class="dte-pending-row__code">{{ entry.partyCode }}</span>
<span class="dte-pending-row__name">{{ entry.partyName }}</span>
<span class="dte-pending-row__mode"
>{{ entry.transactionMode }}
@if (entry.advanceDays) {
· {{ entry.advanceDays }}d advance
}
@if (entry.arrearsDays) {
· {{ entry.arrearsDays }}d previous
}
</span>
<span class="dte-pending-row__amount">{{ entry.amount | number: '1.2-2' }}</span>
</div>
}
<div class="dte-total">
<span>{{ pendingEntries.length }} {{ pendingEntries.length === 1 ? 'entry' : 'entries' }}</span>
<strong>{{ pendingTotal | number: '1.2-2' }}</strong>
</div>
<!--
The figure the clerk counts against, said in words rather than left as a column total -
it is the one number they are acting on, and the rest of the panel is working out.
It says what the agent wrote down and stops there. The money side - what is owed, what the
cashier has taken in, and applying it - is Agent Tran, so each type has one job.
-->
<p class="dte-expected dte-expected--note">
Everything {{ agentInfo.name }} wrote down and has not handed in yet, up to this date, customer by
customer. The cash and its receipts are under Agent Tran.
</p>
}
</div>
}
<!--
The agent's money: what they owe on everything written down, what the cashier has taken in
against it, and what is left.
This used to be a form the clerk typed an amount into to take the agent's cash in here. The
cash is taken at the cashier's counter now, into the agent's own GL account, and one way to take
the same cash in is the only safe number of ways - so there is nothing to type. What is done here
is applying the cashier's receipts to the customers, in Apply DDS Receipt.
-->
@if (isAgentTran && agentInfo.name) {
<div class="dte-section">
<div class="dte-section__header">
<i class="fas fa-hand-holding-usd"></i>
<h3>Agent's cash</h3>
<button mat-stroked-button type="button" class="dte-add-row" (click)="loadAgentMoney()">
<i class="fas fa-sync"></i> Refresh
</button>
<button
mat-raised-button
color="primary"
type="button"
class="dte-apply-receipt"
(click)="openApplyReceipt()"
>
<i class="fas fa-receipt"></i> Apply DDS Receipt
</button>
</div>
@if (!agentGlCode) {
<p class="dte-expected dte-expected--note">
{{ agentInfo.name }} has no GL account, so the cashier has nowhere to take their cash. Set one on Agent
Master.
</p>
} @else {
<!-- The GL the cashier takes this agent's cash into - the code to key at Transaction Entry. -->
<p class="dte-expected">
Agent GL: <strong>{{ agentGlCode }}{{ agentGlName ? ' · ' + agentGlName : '' }}</strong> — the cashier
takes {{ agentInfo.name }}'s cash into this GL (Entry Type DDS).
</p>
}
<div class="dte-money">
<div class="dte-money__box">
<span class="dte-money__label">To take</span>
<strong>{{ agentOwed | number: '1.2-2' }}</strong>
</div>
<div class="dte-money__box">
<span class="dte-money__label">Received (approved)</span>
<strong>{{ agentReceived | number: '1.2-2' }}</strong>
</div>
<div class="dte-money__box" [class.dte-money__box--due]="agentBalance > 0">
<span class="dte-money__label">Still to take</span>
<strong>{{ agentBalance | number: '1.2-2' }}</strong>
</div>
</div>
@if (agentReceivedBeyondDay > 0) {
<p class="dte-expected dte-expected--note">
{{ agentReceivedBeyondDay | number: '1.2-2' }} received at the counter is more than everything outstanding
up to {{ entryForm.get('transactionDate')?.value | dateFormat }}. Check the voucher was taken for the
right agent.
</p>
}
@if (agentWaiting > 0) {
<p class="dte-expected dte-expected--note">
{{ agentWaiting | number: '1.2-2' }} more is at the counter awaiting the manager's approval.
</p>
}
<h4 class="dte-subhead">
Outstanding entries up to {{ entryForm.get('transactionDate')?.value | dateFormat }}
</h4>
@if (agentMoneyLoading) {
<p class="dte-empty">Reading this agent's entries...</p>
} @else if (agentDays.length === 0) {
<p class="dte-empty">{{ agentInfo.name }} has nothing outstanding.</p>
} @else {
@for (day of agentDays; track day.date) {
<div class="dte-pending-row dte-pending-row--day" (click)="toggleAgentDay(day.date)">
<span class="dte-pending-row__date">{{ day.date | dateFormat }}</span>
<span class="dte-pending-row__name">
{{ day.entries.length }} {{ day.entries.length === 1 ? 'entry' : 'entries' }}
</span>
<span class="dte-pending-row__amount">{{ day.total | number: '1.2-2' }}</span>
<i [class]="agentOpenDay === day.date ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
</div>
@if (agentOpenDay === day.date) {
<div class="dte-day-lines">
@for (entry of day.entries; track entry.id) {
<div class="dte-pending-row">
<span class="dte-pending-row__code">{{ entry.partyCode }}</span>
<span class="dte-pending-row__name">{{ entry.partyName }}</span>
<span class="dte-pending-row__mode"
>{{ entry.transactionMode }}
@if (entry.advanceDays) {
· {{ entry.advanceDays }}d advance
}
@if (entry.arrearsDays) {
· {{ entry.arrearsDays }}d previous
}
</span>
<span class="dte-pending-row__amount">{{ entry.amount | number: '1.2-2' }}</span>
</div>
}
</div>
}
}
}
<h4 class="dte-subhead">Cashier receipts</h4>
@if (agentReceipts.length === 0) {
<p class="dte-empty">
No DDS receipt on {{ agentInfo.name }}'s GL account{{ agentGlCode ? ' ' + agentGlCode : '' }} waiting to
be applied.
</p>
} @else {
@for (receipt of agentReceipts; track receipt.id) {
<div class="dte-pending-row">
<span class="dte-pending-row__code">{{ receipt.voucherNo }}</span>
<span class="dte-pending-row__date">{{ receipt.txnDate | dateFormat }}</span>
<span class="dte-pending-row__name">{{ receipt.cashierName || '—' }}</span>
<span class="dte-status" [class.dte-status--ok]="receipt.status === 'APPROVED'">
{{ receipt.status === 'APPROVED' ? 'Approved' : 'Awaiting manager' }}
</span>
<span class="dte-pending-row__amount">{{ receipt.amount | number: '1.2-2' }}</span>
</div>
}
}
</div>
}
@if (isWithdrawDeposite) {
<div class="dte-section">
<div class="dte-section__header">
<i class="fas fa-exchange-alt"></i>
<h3>Withdraw Deposite</h3>
</div>
<div class="dte-grid">
<mat-form-field appearance="outline" class="dte-field">
<mat-label>Creditor Party Code</mat-label>
<input
matInput
formControlName="creditorPartyCode"
[matAutocomplete]="creditorAuto"
#creditorTrigger="matAutocompleteTrigger"
(click)="creditorTrigger.openPanel()"
(focus)="creditorTrigger.openPanel()"
(blur)="settleTransferParty('creditor')"
placeholder="Search by code or name…"
autocomplete="off"
/>
<mat-icon matSuffix class="dte-list-arrow" (click)="$event.stopPropagation(); creditorTrigger.openPanel()"
>arrow_drop_down</mat-icon
>
<mat-autocomplete #creditorAuto="matAutocomplete" panelWidth="min(30rem, 92vw)">
@for (party of transferPartyOptions('creditor'); track party.id) {
<mat-option [value]="party.partyCode">
{{ party.partyCode }} · {{ party.partyName }} · ₹{{ party.currentBalance | number: '1.2-2' }}
</mat-option>
}
@if (transferPartyOptions('creditor').length === 0) {
<mat-option disabled>No open DDS account matches</mat-option>
}
</mat-autocomplete>
<mat-hint>Account the money goes into</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline" class="dte-field">
<mat-label>Creditor Party Name</mat-label>
<input matInput formControlName="creditorPartyName" readonly />
</mat-form-field>
<mat-form-field appearance="outline" class="dte-field">
<mat-label>Creditor Curr Bal</mat-label>
<input matInput formControlName="creditorPartyBalance" readonly />
</mat-form-field>
<mat-form-field appearance="outline" class="dte-field">
<mat-label>Debit Party Code</mat-label>
<input
matInput
formControlName="debitPartyCode"
[matAutocomplete]="debitAuto"
#debitTrigger="matAutocompleteTrigger"
(click)="debitTrigger.openPanel()"
(focus)="debitTrigger.openPanel()"
(blur)="settleTransferParty('debit')"
placeholder="Search by code or name…"
autocomplete="off"
/>
<mat-icon matSuffix class="dte-list-arrow" (click)="$event.stopPropagation(); debitTrigger.openPanel()"
>arrow_drop_down</mat-icon
>
<mat-autocomplete #debitAuto="matAutocomplete" panelWidth="min(30rem, 92vw)">
@for (party of transferPartyOptions('debit'); track party.id) {
<mat-option [value]="party.partyCode">
{{ party.partyCode }} · {{ party.partyName }} · ₹{{ party.currentBalance | number: '1.2-2' }}
</mat-option>
}
@if (transferPartyOptions('debit').length === 0) {
<mat-option disabled>No open DDS account matches</mat-option>
}
</mat-autocomplete>
@if (transferToItself) {
<mat-hint class="dte-same-party">Pick a different account - it cannot transfer to itself</mat-hint>
} @else {
<mat-hint>Account the money is taken from</mat-hint>
}
</mat-form-field>
<mat-form-field appearance="outline" class="dte-field">
<mat-label>Debit Party Name</mat-label>
<input matInput formControlName="debitPartyName" readonly />
</mat-form-field>
<mat-form-field appearance="outline" class="dte-field">
<mat-label>Debit Curr Bal</mat-label>
<input matInput formControlName="debitPartyBalance" readonly />
</mat-form-field>
<mat-form-field appearance="outline" class="dte-field">
<mat-label>Amount</mat-label>
<input matInput type="number" formControlName="withdrawAmount" />
</mat-form-field>
<mat-form-field appearance="outline" class="dte-field dte-field--wide">
<mat-label>Description</mat-label>
<input matInput formControlName="withdrawDescription" />
</mat-form-field>
</div>
</div>
}
@if (!isPartyTran && !isWithdrawDeposite && !isAgentTran) {
<div class="dte-section">
<p class="dte-empty">
"{{ entryForm.get('transactionType').value }}" entry screen — same shape as Party Tran, to be filled in once
the backend distinguishes these transaction types.
</p>
</div>
}
<div class="dte-action-bar">
<button mat-raised-button type="button" (click)="exit()">Exit</button>
<button mat-stroked-button type="button" (click)="cancel()">Cancel</button>
<button mat-stroked-button type="button" (click)="retrieve()">Retrieve</button>
<button mat-stroked-button type="button" (click)="viewLedger()">View Ledger</button>
<button mat-stroked-button type="button" (click)="signature()">Signature</button>
<!-- Party Tran and Agent Tran are read here, never saved: the agent writes the round down on
their own screen and the cash is taken in at the cashier's counter. Agent Tran applies the
cashier's receipts from its own Apply DDS Receipt. Only Withdraw Deposite still saves. -->
@if (!isPartyTran && !isAgentTran) {
<button
mat-raised-button
color="primary"
type="button"
[disabled]="entryForm.invalid || transferToItself"
(click)="save()"
>
Save
</button>
}
</div>
</form>
</div>
</div>
@@ -1,488 +0,0 @@
/**
* 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/.
*/
$primary: #0f766e;
.dte-container {
// Wider than a normal form page: a collection row carries six fields side by side, and a clerk
// keying a round should see the whole of it.
max-width: 1280px;
margin: 0 auto;
padding: 20px 16px;
}
.dte-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
&__title {
margin: 0;
font-size: 22px;
font-weight: 500;
}
}
.dte-back {
color: $primary;
}
.dte-card {
background: var(--md-sys-color-surface, #fff);
border-radius: 8px;
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
padding: 20px 24px 24px;
}
.dte-info-panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.dte-info-panel {
border: 1px solid rgb(0 0 0 / 10%);
border-radius: 8px;
padding: 12px 16px;
background: rgb(15 118 110 / 4%);
&__title {
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: $primary;
margin-bottom: 8px;
}
&__hint {
margin: 0;
color: rgb(0 0 0 / 50%);
font-size: 13px;
}
dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
margin: 0;
}
dt {
font-weight: 500;
color: rgb(0 0 0 / 60%);
font-size: 13px;
}
dd {
margin: 0;
font-size: 13px;
}
}
.dte-controls {
display: flex;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
// A sensible floor for the fields laid out with flex in .dte-controls, where there is room to spare.
.dte-field {
min-width: 180px;
&--wide {
grid-column: span 2;
}
}
// Inside the collection grid the track decides the width, not the field. Left to its own 180px
// floor a field refuses to shrink into a narrower track and overruns the one beside it.
.dte-collection-row .dte-field {
width: 100%;
min-width: 0;
}
.dte-section {
padding: 16px 0;
border-top: 1px solid rgb(0 0 0 / 8%);
// A very narrow window scrolls the grid sideways rather than the whole page.
overflow-x: auto;
&__header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
i {
color: $primary;
}
h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
flex: 1;
}
}
}
.dte-add-row {
color: $primary;
}
.dte-empty {
color: rgb(0 0 0 / 50%);
font-size: 14px;
margin: 0;
}
.dte-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px 16px;
}
/*
* One collection per row. Fixed columns rather than an even split, so the row holds its shape as
* fields come and go - Cheque No and Token No only appear for a non-cash entry - and the party
* picker gets the width its "code · name · daily amount" needs.
*/
.dte-collection-row {
display: grid;
grid-template-columns:
minmax(0, 2.2fr) /* Party */
minmax(0, 1fr) /* TRTP */
minmax(0, 1fr) /* AC Type */
minmax(0, 1.4fr) /* A/C No. */
minmax(0, 1fr) /* Amount */
minmax(0, 1.6fr) /* Description */
auto; /* remove */
gap: 8px 12px;
align-items: start;
padding: 10px 0;
border-top: 1px dashed rgb(0 0 0 / 10%);
&:first-of-type {
border-top: none;
}
// Cheque No and Token No push Description and the remove button onto a second line, which is
// what a non-cash entry should look like rather than a row running off the screen.
&:has(.dte-field--instrument) {
grid-template-columns:
minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr)
minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) auto;
}
}
.dte-collection-row .dte-field--wide {
grid-column: span 2;
}
@media (width <= 1200px) {
.dte-collection-row,
.dte-collection-row:has(.dte-field--instrument) {
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}
}
.dte-remove-row {
color: #b91c1c;
margin-top: 8px;
}
.dte-action-bar {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgb(0 0 0 / 8%);
flex-wrap: wrap;
}
@media (width <= 1000px) {
.dte-info-panels {
grid-template-columns: 1fr;
}
.dte-grid {
grid-template-columns: repeat(2, 1fr);
}
.dte-collection-row {
grid-template-columns: repeat(2, 1fr);
}
}
/* Resolved name under an Agent / Party Code field — the check that the right record was found. */
.dte-hint--found {
color: #15803d;
font-weight: 500;
}
.dte-hint--missing {
color: #b91c1c;
font-weight: 500;
}
/* Marks an agent in the list who is no longer collecting - only offered for settlement. */
.dte-agent-off {
color: #b45309;
font-size: 12px;
font-style: italic;
margin-left: 6px;
}
/* The figure the clerk actually verifies against the passbook before saving. */
.dte-after {
font-weight: 600;
color: #0f766e;
}
/* What the agent should be handing over for this round. */
.dte-total {
display: flex;
justify-content: flex-end;
align-items: baseline;
gap: 14px;
padding: 10px 4px 2px;
border-top: 1px solid rgb(0 0 0 / 10%);
font-size: 0.88rem;
color: rgb(0 0 0 / 60%);
strong {
font-size: 1.1rem;
color: rgb(0 0 0 / 85%);
font-variant-numeric: tabular-nums;
}
}
/* Marks a transaction type the system does not handle yet, so it reads as pending rather than broken. */
.dte-soon {
font-size: 0.78rem;
font-style: italic;
color: rgb(0 0 0 / 45%);
}
/*
* Marks a party this agent has already collected from today, on the row where it is picked.
*
* Amber, not red: a customer paying twice in a day is legitimate - arrears, or two days at once -
* so this is a second look, not an error. Blocking it would stop real work; saying nothing lets a
* whole round be credited twice.
*/
.dte-hint--again {
color: #b45309;
font-weight: 500;
}
/*
* Where a party stands against its instalments. Three states rather than one colour, because they
* call for three different things from the clerk: ahead means take nothing, behind means take more
* than the daily amount, level means take the daily amount as usual.
*
* Behind is amber, not red - falling a few days behind is ordinary in daily collection and is the
* agent's job to recover, not an error. Red here would cry wolf on most rows.
*/
.dte-hint--ahead,
.dte-sched--ahead {
color: #15803d;
font-weight: 500;
}
.dte-hint--behind,
.dte-sched--behind {
color: #b45309;
font-weight: 500;
}
.dte-hint--level,
.dte-sched--level {
color: rgb(0 0 0 / 55%);
}
/* In the party panel the schedule line carries more weight than the fields around it. */
.dte-sched {
font-weight: 500;
}
/* Says why a party in the list cannot be picked, beside the party rather than in a tooltip. */
.dte-covered {
color: #15803d;
font-size: 0.8rem;
}
/*
* An amount that looks like a slip. Red rather than the amber used for arrears: arrears are ordinary
* and the agent's job to recover, while this is a figure that probably was not handed over at all,
* and once saved it cannot be taken back. It still does not block - the clerk decides.
*/
.dte-hint--overpay {
color: #b91c1c;
font-weight: 500;
}
/*
The agent's written-down round, as the counter reads it.
Laid out as lines rather than as the input grid this replaced: there is nothing to fill in here,
only a list to check a bag of cash against, and controls would invite editing something the clerk
has no business editing.
*/
.dte-pending-row {
display: flex;
align-items: baseline;
gap: 12px;
padding: 10px 2px;
border-bottom: 1px solid rgb(0 0 0 / 8%);
&:last-of-type {
border-bottom: none;
}
/* First, and in the quieter weight: the date is context for the line, not what is being read. */
&__date {
min-width: 96px;
opacity: 0.7;
font-variant-numeric: tabular-nums;
}
&__code {
font-weight: 600;
min-width: 84px;
}
&__name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0.75;
}
&__mode {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.6;
}
/* Amounts are read down the column and compared, so the digits have to line up. */
&__amount {
font-variant-numeric: tabular-nums;
font-weight: 600;
min-width: 96px;
text-align: right;
}
}
/* The one figure the clerk acts on, said as a sentence so it is not read as another column total. */
.dte-expected {
margin: 14px 2px 0;
font-size: 14px;
line-height: 1.5;
strong {
font-variant-numeric: tabular-nums;
}
}
/* Quieter than the figure above it: a note about how the screen behaves, not part of the count. */
.dte-expected--note {
font-size: 13px;
opacity: 0.65;
margin-top: 4px;
}
.dte-apply-receipt {
margin-left: 8px;
}
/* Agent Tran: what the agent owes, what the cashier has taken in, and what is left. */
.dte-money {
display: flex;
gap: 12px;
margin: 8px 0 12px;
flex-wrap: wrap;
&__box {
flex: 1;
min-width: 160px;
padding: 10px 14px;
border: 1px solid rgb(0 0 0 / 10%);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 4px;
font-variant-numeric: tabular-nums;
strong {
font-size: 18px;
}
&--due {
border-color: rgb(198 40 40 / 40%);
background: rgb(198 40 40 / 4%);
}
}
&__label {
font-size: 12px;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.04em;
}
}
.dte-subhead {
margin: 16px 0 4px;
font-size: 14px;
font-weight: 600;
}
.dte-pending-row--day {
cursor: pointer;
}
.dte-day-lines {
margin-left: 24px;
max-height: 280px;
overflow-y: auto;
border-left: 3px solid rgb(25 118 210 / 30%);
padding-left: 10px;
}
.dte-status {
font-size: 12px;
padding: 2px 8px;
border-radius: 10px;
background: rgb(237 108 2 / 12%);
color: #b45309;
&--ok {
background: rgb(46 125 50 / 12%);
color: #2e7d32;
}
}
.dte-list-arrow {
cursor: pointer;
}
.dte-same-party {
color: #c62828;
font-weight: 600;
}
File diff suppressed because it is too large Load Diff
@@ -1,56 +0,0 @@
<!--
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/.
-->
<h2 mat-dialog-title>{{ title }}</h2>
<mat-dialog-content>
<mat-form-field appearance="outline" class="dcd-field">
<mat-label>Party</mat-label>
<mat-select [(ngModel)]="partyCode" (selectionChange)="partyChanged()">
@for (p of eligibleParties; track p.id) {
<mat-option [value]="p.partyCode">
{{ p.partyCode }} · {{ p.partyName }} · Daily {{ p.dailyDepositAmount | number: '1.0-0' }}
</mat-option>
}
</mat-select>
@if (eligibleParties.length === 0) {
<!-- Only reachable on the arrears side: nobody is behind within the window. -->
<mat-hint class="dcd-none">No party has recoverable days</mat-hint>
}
</mat-form-field>
<mat-form-field appearance="outline" class="dcd-field">
<mat-label>Days</mat-label>
<mat-select [(ngModel)]="days" [disabled]="!partyCode">
@for (d of dayOptions; track d) {
<mat-option [value]="d">{{ d }} {{ d === 1 ? 'day' : 'days' }}</mat-option>
}
</mat-select>
@if (isAdvance) {
<mat-hint>Up to 5 days</mat-hint>
} @else if (partyCode) {
<mat-hint>Only days still within the catch-up window</mat-hint>
}
</mat-form-field>
<!--
What it comes to, shown before it is added rather than after. The clerk quotes this to the
customer, so it has to be the scheme's own figure and has to be visible while deciding.
-->
@if (amount > 0) {
<div class="dcd-amount">
<span class="dcd-amount__figure">{{ amount | number: '1.2-2' }}</span>
<span class="dcd-amount__basis"> {{ days }} × {{ party?.dailyDepositAmount | number: '1.2-2' }} daily </span>
</div>
}
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close type="button">Cancel</button>
<button mat-raised-button color="primary" type="button" [disabled]="!canAdd" (click)="add()">Add</button>
</mat-dialog-actions>

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