Compare commits
17
Commits
767461faae
...
4e3b49a96a
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4e3b49a96a | ||
|
|
915deddb74 | ||
|
|
211027b9d8 | ||
|
|
d88f2a6eb1 | ||
|
|
606d14b995 | ||
|
|
afcd3af918 | ||
|
|
0eb087e3c3 | ||
|
|
7c23bdd6af | ||
|
|
d61584f291 | ||
|
|
a5a64d4efe | ||
|
|
0ea57b3f82 | ||
|
|
7c868ae073 | ||
|
|
885b39d970 | ||
|
|
283ab2f733 | ||
|
|
d47e0860f6 | ||
|
|
e2eff9914f | ||
|
|
57a61b3057 |
+2
-2
@@ -76,8 +76,8 @@
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "15mb",
|
||||
"maximumError": "17mb"
|
||||
"maximumWarning": "18mb",
|
||||
"maximumError": "20mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
|
||||
@@ -7,16 +7,6 @@
|
||||
-->
|
||||
|
||||
<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-content>
|
||||
<div class="transfer-container">
|
||||
|
||||
@@ -11,6 +11,14 @@ import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { Route } from '../core/route/route.service';
|
||||
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 = [
|
||||
Route.withShell([
|
||||
@@ -41,6 +49,59 @@ const routes: Routes = [
|
||||
title: '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' }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -44,8 +44,11 @@
|
||||
<div class="cal-stat sat2nd4th">
|
||||
<fa-icon icon="calendar-times" class="cal-stat__icon"></fa-icon>
|
||||
<div class="cal-stat__info">
|
||||
<div class="cal-stat__value">{{ overallStats.sat2nd4th }}</div>
|
||||
<div class="cal-stat__label">2nd & 4th Sat</div>
|
||||
<div class="cal-stat__value">{{ overallStats.sat2nd4th + overallStats.weeklyOff }}</div>
|
||||
<div class="cal-stat__label">
|
||||
{{ saturdayIsWorkingDay ? '2nd & 4th Sat' : 'Saturdays'
|
||||
}}{{ overallStats.weeklyOff > 0 ? ' / Weekly Off' : '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal-stat holidays">
|
||||
@@ -69,7 +72,11 @@
|
||||
<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 sunday"></span> Sunday</div>
|
||||
<div class="cal-legend__item"><span class="cal-legend__dot sat2nd4th"></span> 2nd / 4th Saturday</div>
|
||||
<div class="cal-legend__item">
|
||||
<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 today"></span> Today</div>
|
||||
</div>
|
||||
@@ -319,7 +326,9 @@
|
||||
[class.cal-grid__day--other]="!day.isCurrentMonth"
|
||||
[class.cal-grid__day--today]="day.isToday"
|
||||
[class.cal-grid__day--sunday]="day.isSunday && day.isCurrentMonth"
|
||||
[class.cal-grid__day--sat2nd4th]="(day.is2ndSaturday || day.is4thSaturday) && day.isCurrentMonth"
|
||||
[class.cal-grid__day--sat2nd4th]="
|
||||
(day.is2ndSaturday || day.is4thSaturday || day.isWeeklyOff) && day.isCurrentMonth
|
||||
"
|
||||
[class.cal-grid__day--holiday]="day.isHoliday && day.isCurrentMonth"
|
||||
[class.cal-grid__day--working]="day.isWorking && day.isCurrentMonth"
|
||||
[matTooltip]="
|
||||
@@ -328,9 +337,11 @@
|
||||
? '2nd Saturday Off'
|
||||
: day.is4thSaturday
|
||||
? '4th Saturday Off'
|
||||
: day.isSunday && day.isCurrentMonth
|
||||
? 'Sunday'
|
||||
: '')
|
||||
: day.isWeeklyOff && day.isCurrentMonth
|
||||
? weekDays[day.dayOfWeek] + ' Off (Working Days)'
|
||||
: day.isSunday && day.isCurrentMonth
|
||||
? 'Sunday'
|
||||
: '')
|
||||
"
|
||||
>
|
||||
{{ day.isCurrentMonth ? day.date : '' }}
|
||||
@@ -343,10 +354,15 @@
|
||||
@if (month.holidays > 0) {
|
||||
<span class="summary-tag holiday">{{ month.holidays }} Holiday{{ month.holidays > 1 ? 's' : '' }}</span>
|
||||
}
|
||||
<span class="summary-tag sun">{{ month.sundays }} Sun</span>
|
||||
@if (month.sundays > 0) {
|
||||
<span class="summary-tag sun">{{ month.sundays }} Sun</span>
|
||||
}
|
||||
@if (month.secondFourthSat > 0) {
|
||||
<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>
|
||||
}
|
||||
|
||||
@@ -63,6 +63,8 @@ interface CalendarDay {
|
||||
isSunday: boolean;
|
||||
is2ndSaturday: boolean;
|
||||
is4thSaturday: boolean;
|
||||
/** Off every week because Admin > Working Days leaves this weekday out (Sunday aside). */
|
||||
isWeeklyOff: boolean;
|
||||
holidayName?: string;
|
||||
dayOfWeek: number; // 0=Sun, 6=Sat
|
||||
}
|
||||
@@ -76,9 +78,23 @@ interface MonthData {
|
||||
nonWorkingDays: number;
|
||||
holidays: number;
|
||||
sundays: number;
|
||||
/** Saturdays off: the 2nd and 4th when Saturday is a working day, every one when it is not. */
|
||||
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({
|
||||
selector: 'mifosx-bank-calendar',
|
||||
templateUrl: './bank-calendar.component.html',
|
||||
@@ -118,7 +134,7 @@ export class BankCalendarComponent implements OnInit {
|
||||
];
|
||||
workingDaysConfig: string[] = [];
|
||||
holidays: any[] = [];
|
||||
overallStats = { working: 0, nonWorking: 0, holidays: 0, sundays: 0, sat2nd4th: 0, totalDays: 0 };
|
||||
overallStats = { working: 0, nonWorking: 0, holidays: 0, sundays: 0, sat2nd4th: 0, weeklyOff: 0, totalDays: 0 };
|
||||
|
||||
// ───── Holiday list (office-wise) ─────
|
||||
offices: OfficeLite[] = [];
|
||||
@@ -202,7 +218,8 @@ export class BankCalendarComponent implements OnInit {
|
||||
}
|
||||
|
||||
private loadWorkingDays() {
|
||||
// Default Indian banking working days: Mon-Sat (Sun off, 2nd & 4th Sat off)
|
||||
// Default Indian banking working days: Mon-Sat (Sun off, 2nd & 4th Sat off), used until
|
||||
// Admin > Working Days answers, or if it cannot be read.
|
||||
this.workingDaysConfig = [
|
||||
'MO',
|
||||
'TU',
|
||||
@@ -215,6 +232,19 @@ export class BankCalendarComponent implements OnInit {
|
||||
this.buildCalendar();
|
||||
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
|
||||
// calendar entries are surfaced in the list panel (calendar grid still
|
||||
// unions everything for the year-at-a-glance view).
|
||||
@@ -273,6 +303,23 @@ 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. */
|
||||
private rebuildHolidayRows(): void {
|
||||
this.holidayRows = this.holidays.map((h: any) => {
|
||||
@@ -511,7 +558,15 @@ export class BankCalendarComponent implements OnInit {
|
||||
|
||||
buildCalendar() {
|
||||
this.months = [];
|
||||
this.overallStats = { working: 0, nonWorking: 0, holidays: 0, sundays: 0, sat2nd4th: 0, totalDays: 0 };
|
||||
this.overallStats = {
|
||||
working: 0,
|
||||
nonWorking: 0,
|
||||
holidays: 0,
|
||||
sundays: 0,
|
||||
sat2nd4th: 0,
|
||||
weeklyOff: 0,
|
||||
totalDays: 0
|
||||
};
|
||||
|
||||
for (let m = 0; m < 12; m++) {
|
||||
const monthData = this.buildMonth(m, this.currentYear);
|
||||
@@ -521,6 +576,7 @@ export class BankCalendarComponent implements OnInit {
|
||||
this.overallStats.holidays += monthData.holidays;
|
||||
this.overallStats.sundays += monthData.sundays;
|
||||
this.overallStats.sat2nd4th += monthData.secondFourthSat;
|
||||
this.overallStats.weeklyOff += monthData.weeklyOff;
|
||||
}
|
||||
this.overallStats.totalDays = this.overallStats.working + this.overallStats.nonWorking;
|
||||
}
|
||||
@@ -552,6 +608,7 @@ export class BankCalendarComponent implements OnInit {
|
||||
let holidayCount = 0;
|
||||
let sundayCount = 0;
|
||||
let sat2nd4thCount = 0;
|
||||
let weeklyOffCount = 0;
|
||||
|
||||
// Previous month padding
|
||||
const prevMonthDays = new Date(year, month, 0).getDate();
|
||||
@@ -567,6 +624,7 @@ export class BankCalendarComponent implements OnInit {
|
||||
isSunday: false,
|
||||
is2ndSaturday: false,
|
||||
is4thSaturday: false,
|
||||
isWeeklyOff: false,
|
||||
dayOfWeek: (startDayOfWeek - i - 1 + 7) % 7
|
||||
});
|
||||
}
|
||||
@@ -576,24 +634,29 @@ export class BankCalendarComponent implements OnInit {
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
const date = new Date(year, month, d);
|
||||
const dow = date.getDay();
|
||||
const isSunday = dow === 0;
|
||||
const isSaturday = dow === 6;
|
||||
const isWorkingWeekday = this.workingDaysConfig.includes(DAY_CODES[dow]);
|
||||
const isSunday = dow === 0 && !isWorkingWeekday;
|
||||
|
||||
if (isSaturday) saturdayCount++;
|
||||
|
||||
const is2ndSat = isSaturday && saturdayCount === 2;
|
||||
const is4thSat = isSaturday && saturdayCount === 4;
|
||||
// RBI: when Saturday is a working day the 2nd and 4th are still off. When Working Days leaves
|
||||
// Saturday out, every Saturday is a weekly off instead.
|
||||
const is2ndSat = isSaturday && isWorkingWeekday && saturdayCount === 2;
|
||||
const is4thSat = isSaturday && isWorkingWeekday && saturdayCount === 4;
|
||||
const isWeeklyOff = dow !== 0 && !isWorkingWeekday;
|
||||
const isToday = date.toDateString() === today.toDateString();
|
||||
|
||||
// Check if holiday
|
||||
const holiday = this.getHolidayForDate(year, month, d);
|
||||
const isHoliday = !!holiday;
|
||||
|
||||
// Non-working: Sunday, 2nd Sat, 4th Sat, or holiday
|
||||
const isNonWorking = isSunday || is2ndSat || is4thSat || isHoliday;
|
||||
// Non-working: Sunday, 2nd Sat, 4th Sat, a weekly off from Working Days, or holiday
|
||||
const isNonWorking = isSunday || is2ndSat || is4thSat || isWeeklyOff || isHoliday;
|
||||
|
||||
if (isSunday) sundayCount++;
|
||||
if (is2ndSat || is4thSat) sat2nd4thCount++;
|
||||
if (is2ndSat || is4thSat || (isSaturday && isWeeklyOff)) sat2nd4thCount++;
|
||||
if (isWeeklyOff && !isSaturday) weeklyOffCount++;
|
||||
if (isHoliday) holidayCount++;
|
||||
|
||||
if (isNonWorking) {
|
||||
@@ -613,6 +676,7 @@ export class BankCalendarComponent implements OnInit {
|
||||
isSunday,
|
||||
is2ndSaturday: is2ndSat,
|
||||
is4thSaturday: is4thSat,
|
||||
isWeeklyOff,
|
||||
holidayName: holiday?.name,
|
||||
dayOfWeek: dow
|
||||
});
|
||||
@@ -632,6 +696,7 @@ export class BankCalendarComponent implements OnInit {
|
||||
isSunday: false,
|
||||
is2ndSaturday: false,
|
||||
is4thSaturday: false,
|
||||
isWeeklyOff: false,
|
||||
dayOfWeek: days.length % 7
|
||||
});
|
||||
}
|
||||
@@ -645,7 +710,8 @@ export class BankCalendarComponent implements OnInit {
|
||||
nonWorkingDays: nonWorkingCount,
|
||||
holidays: holidayCount,
|
||||
sundays: sundayCount,
|
||||
secondFourthSat: sat2nd4thCount
|
||||
secondFourthSat: sat2nd4thCount,
|
||||
weeklyOff: weeklyOffCount
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="pg">
|
||||
<header class="pg-head">
|
||||
<div>
|
||||
<div class="pg-eyebrow">BRANCH OPERATIONS · BRANCH CASH POSITION</div>
|
||||
<h1 class="pg-title">Branch Cash Position</h1>
|
||||
<p class="pg-sub">
|
||||
The notes and coins the branch holds, denomination by denomination: the vault plus every cashier's drawer. Cash
|
||||
moving between the vault and a cashier nets out; deposits, withdrawals and exchanges change it.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="pg-toolbar pg-toolbar--mat">
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>As of Date</mat-label>
|
||||
<input matInput type="date" [value]="asOfDate" (change)="onDateChange($any($event.target).value)" />
|
||||
</mat-form-field>
|
||||
<button type="button" class="pg-btn pg-btn--primary" (click)="load()" [disabled]="loading">
|
||||
<mat-icon>refresh</mat-icon> Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (errorMsg) {
|
||||
<div class="pg-empty bcp-error">{{ errorMsg }}</div>
|
||||
}
|
||||
@if (loading) {
|
||||
<div class="pg-empty">Loading…</div>
|
||||
}
|
||||
|
||||
@if (position; as p) {
|
||||
<div class="bcp-totals">
|
||||
<div class="bcp-total">
|
||||
<span>Branch</span><strong>{{ p.officeName }}</strong>
|
||||
</div>
|
||||
<div class="bcp-total">
|
||||
<span>Vault</span><strong>₹{{ p.vaultAmount | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
<div class="bcp-total">
|
||||
<span>Cashiers' drawers</span><strong>₹{{ p.cashiersAmount | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
<div class="bcp-total bcp-total--main">
|
||||
<span>Bank total</span><strong>₹{{ p.totalAmount | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!p.vaultHasBreakdown) {
|
||||
<div class="pg-empty bcp-note">
|
||||
No vault denomination breakdown was recorded on or before {{ p.asOfDate }}, so the vault column reads 0. Open
|
||||
the business day with a note/coin count to start tracking it.
|
||||
</div>
|
||||
}
|
||||
|
||||
<ng-template #table let-rows let-label="label" let-coin="coin">
|
||||
@if (rows.length > 0) {
|
||||
<div class="pos-section-label" [class.pos-section-label--coin]="coin">{{ label }}</div>
|
||||
<table class="pg-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Denomination</th>
|
||||
<th class="num">Vault</th>
|
||||
<th class="num">Cashiers</th>
|
||||
<th class="num">Bank total (count)</th>
|
||||
<th class="num">Bank total (₹)</th>
|
||||
<th class="num">Exchange today</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (d of rows; track d.denominationId) {
|
||||
<tr>
|
||||
<td>
|
||||
<span class="pg-chip" [class.pg-chip--coin]="coin">₹{{ d.denominationValue }}</span>
|
||||
</td>
|
||||
<td class="num">{{ d.vaultCount }}</td>
|
||||
<td class="num">{{ d.cashierCount }}</td>
|
||||
<td class="num bcp-strong">{{ d.totalCount }}</td>
|
||||
<td class="num">₹{{ d.totalAmount | number: '1.2-2' }}</td>
|
||||
<td
|
||||
class="num bcp-move"
|
||||
[class.bcp-move--in]="d.exchangeNet > 0"
|
||||
[class.bcp-move--out]="d.exchangeNet < 0"
|
||||
>
|
||||
{{ movement(d.exchangeNet) }}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</ng-template>
|
||||
|
||||
<div class="pg-card bcp-card">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="table; context: { $implicit: notes(), label: 'Notes', coin: false }"
|
||||
></ng-container>
|
||||
<ng-container
|
||||
*ngTemplateOutlet="table; context: { $implicit: coins(), label: 'Coins', coin: true }"
|
||||
></ng-container>
|
||||
</div>
|
||||
|
||||
<p class="bcp-foot">
|
||||
<strong>Exchange today</strong> is the notes taken in less the notes given out by cash exchanges on
|
||||
{{ p.asOfDate }}. It is already part of the Cashiers column; it is shown beside the total so a change in the mix
|
||||
can be seen.
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.bcp-error {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.bcp-note {
|
||||
margin-bottom: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bcp-totals {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.bcp-total {
|
||||
flex: 1 1 180px;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
&--main {
|
||||
background: #e6f4ee;
|
||||
border-color: #1f7a4d;
|
||||
|
||||
strong {
|
||||
color: #0f4f3c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bcp-card {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.bcp-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bcp-move {
|
||||
font-weight: 700;
|
||||
color: #94a3b8;
|
||||
|
||||
&--in {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
&--out {
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
.bcp-foot {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { of } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { CashierService } from '../cashier.service';
|
||||
import { businessToday } from 'app/core/utils/business-today';
|
||||
|
||||
interface BranchDenomRow {
|
||||
denominationId: number;
|
||||
denominationValue: number;
|
||||
kind: string;
|
||||
vaultCount: number;
|
||||
cashierCount: number;
|
||||
totalCount: number;
|
||||
totalAmount: number;
|
||||
/** Notes taken in less notes given out by exchanges on the day. */
|
||||
exchangeNet: number;
|
||||
}
|
||||
|
||||
interface BranchPosition {
|
||||
officeId: number;
|
||||
officeName: string;
|
||||
asOfDate: string;
|
||||
vaultHasBreakdown: boolean;
|
||||
vaultAmount: number;
|
||||
cashiersAmount: number;
|
||||
totalAmount: number;
|
||||
denominations: BranchDenomRow[];
|
||||
}
|
||||
|
||||
/**
|
||||
* What the branch holds, denomination by denomination: the vault plus every cashier's drawer. An exchange
|
||||
* (a customer hands in 10 x ₹500 and leaves with 50 x ₹100) leaves the vault alone and changes a drawer, so
|
||||
* it only shows up in this total -- +10 on ₹500, -50 on ₹100.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-branch-cash-position',
|
||||
templateUrl: './branch-cash-position.component.html',
|
||||
styleUrls: [
|
||||
'../cashier-shared.scss',
|
||||
'../cashier-position/cashier-position.component.scss',
|
||||
'./branch-cash-position.component.scss'
|
||||
],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatIconModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule
|
||||
]
|
||||
})
|
||||
export class BranchCashPositionComponent implements OnInit {
|
||||
private service = inject(CashierService);
|
||||
|
||||
asOfDate = '';
|
||||
loading = false;
|
||||
errorMsg = '';
|
||||
position: BranchPosition | null = null;
|
||||
|
||||
ngOnInit(): void {
|
||||
const d = businessToday();
|
||||
this.asOfDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
this.load();
|
||||
}
|
||||
|
||||
load(): void {
|
||||
this.loading = true;
|
||||
this.errorMsg = '';
|
||||
this.position = null;
|
||||
this.service
|
||||
.branchCashPosition(this.asOfDate)
|
||||
.pipe(catchError(() => of(null)))
|
||||
.subscribe((data: BranchPosition | null) => {
|
||||
this.loading = false;
|
||||
if (!data) {
|
||||
this.errorMsg = 'Could not load the branch cash position.';
|
||||
return;
|
||||
}
|
||||
this.position = data;
|
||||
});
|
||||
}
|
||||
|
||||
onDateChange(value: string): void {
|
||||
this.asOfDate = value;
|
||||
this.load();
|
||||
}
|
||||
|
||||
notes(): BranchDenomRow[] {
|
||||
return (this.position?.denominations || []).filter((d) => d.kind !== 'coin');
|
||||
}
|
||||
|
||||
coins(): BranchDenomRow[] {
|
||||
return (this.position?.denominations || []).filter((d) => d.kind === 'coin');
|
||||
}
|
||||
|
||||
/** "+10", "-50", or a dash when the day's exchanges did not touch the denomination. */
|
||||
movement(net: number): string {
|
||||
if (!net) return '—';
|
||||
return net > 0 ? `+${net}` : `${net}`;
|
||||
}
|
||||
}
|
||||
@@ -22,50 +22,255 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ── Customer Info Bar ── -->
|
||||
<div class="cx-customer-bar">
|
||||
<div
|
||||
class="cx-customer-toggle"
|
||||
[class.cx-customer-toggle--active]="isAccountHolder"
|
||||
(click)="toggleAccountHolder()"
|
||||
>
|
||||
<mat-icon>{{ isAccountHolder ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
|
||||
<span>Account Holder</span>
|
||||
</div>
|
||||
|
||||
@if (isAccountHolder) {
|
||||
<label class="cx-field cx-field--inline">
|
||||
<span>Account No.</span>
|
||||
<input
|
||||
type="text"
|
||||
[value]="accountNo"
|
||||
(input)="accountNo = $any($event.target).value"
|
||||
placeholder="e.g. 000101234567"
|
||||
/>
|
||||
</label>
|
||||
} @else {
|
||||
<span class="cx-walk-in"><mat-icon>person_outline</mat-icon> Walk-in Customer</span>
|
||||
}
|
||||
|
||||
@if (needsIdProof) {
|
||||
<div class="cx-pan-required">
|
||||
<mat-icon>warning</mat-icon>
|
||||
<span>Amount ≥ ₹50,000 — Customer PAN / Aadhaar required (RBI)</span>
|
||||
<!-- ── Cashier: whose drawer takes the customer's notes and gives the change ── -->
|
||||
@if (cashier) {
|
||||
<section class="cx-cashier">
|
||||
<div class="cx-avatar cx-avatar--sm">{{ cashierInitials }}</div>
|
||||
<div class="cx-cashier__id">
|
||||
<div class="cx-cashier__label">Cashier at the counter</div>
|
||||
<div class="cx-cashier__name">{{ cashier.name || '—' }}</div>
|
||||
<div class="cx-cashier__flow">
|
||||
<span><mat-icon>south</mat-icon> Receives from customer</span>
|
||||
<span><mat-icon>north</mat-icon> Gives to customer</span>
|
||||
</div>
|
||||
</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-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>
|
||||
</section>
|
||||
|
||||
<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 -->
|
||||
<section class="cx-col cx-col--received">
|
||||
<header class="cx-col-head">
|
||||
@@ -78,7 +283,7 @@
|
||||
<div class="cx-subhead">Bank Notes</div>
|
||||
}
|
||||
@for (d of notes; track d.id) {
|
||||
<div class="cx-row">
|
||||
<div class="cx-row cx-row--stock">
|
||||
<span class="cx-chip">{{ d.label }}</span>
|
||||
<div class="cx-step">
|
||||
<button type="button" (click)="bump('r', d, -1)" [disabled]="countFor('r', d) === 0">−</button>
|
||||
@@ -90,6 +295,9 @@
|
||||
/>
|
||||
<button type="button" (click)="bump('r', d, 1)">+</button>
|
||||
</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"
|
||||
>₹{{ subtotal('r', d) | number: '1.2-2' }}</span
|
||||
>
|
||||
@@ -99,7 +307,7 @@
|
||||
<div class="cx-subhead">Coins</div>
|
||||
}
|
||||
@for (d of coins; track d.id) {
|
||||
<div class="cx-row">
|
||||
<div class="cx-row cx-row--stock">
|
||||
<span class="cx-chip cx-chip--coin">{{ d.label }}</span>
|
||||
<div class="cx-step">
|
||||
<button type="button" (click)="bump('r', d, -1)" [disabled]="countFor('r', d) === 0">−</button>
|
||||
@@ -111,6 +319,9 @@
|
||||
/>
|
||||
<button type="button" (click)="bump('r', d, 1)">+</button>
|
||||
</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"
|
||||
>₹{{ subtotal('r', d) | number: '1.2-2' }}</span
|
||||
>
|
||||
@@ -131,7 +342,7 @@
|
||||
<div class="cx-subhead">Bank Notes</div>
|
||||
}
|
||||
@for (d of notes; track d.id) {
|
||||
<div class="cx-row">
|
||||
<div class="cx-row cx-row--stock" [class.cx-row--over]="exceedsAvailable(d)">
|
||||
<span class="cx-chip">{{ d.label }}</span>
|
||||
<div class="cx-step">
|
||||
<button type="button" (click)="bump('g', d, -1)" [disabled]="countFor('g', d) === 0">−</button>
|
||||
@@ -141,8 +352,16 @@
|
||||
[value]="countFor('g', d)"
|
||||
(input)="onChange('g', d, $any($event.target).value)"
|
||||
/>
|
||||
<button type="button" (click)="bump('g', d, 1)">+</button>
|
||||
<button type="button" (click)="bump('g', d, 1)" [disabled]="!canGiveMore(d)">+</button>
|
||||
</div>
|
||||
<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"
|
||||
>₹{{ subtotal('g', d) | number: '1.2-2' }}</span
|
||||
>
|
||||
@@ -152,7 +371,7 @@
|
||||
<div class="cx-subhead">Coins</div>
|
||||
}
|
||||
@for (d of coins; track d.id) {
|
||||
<div class="cx-row">
|
||||
<div class="cx-row cx-row--stock" [class.cx-row--over]="exceedsAvailable(d)">
|
||||
<span class="cx-chip cx-chip--coin">{{ d.label }}</span>
|
||||
<div class="cx-step">
|
||||
<button type="button" (click)="bump('g', d, -1)" [disabled]="countFor('g', d) === 0">−</button>
|
||||
@@ -162,8 +381,16 @@
|
||||
[value]="countFor('g', d)"
|
||||
(input)="onChange('g', d, $any($event.target).value)"
|
||||
/>
|
||||
<button type="button" (click)="bump('g', d, 1)">+</button>
|
||||
<button type="button" (click)="bump('g', d, 1)" [disabled]="!canGiveMore(d)">+</button>
|
||||
</div>
|
||||
<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"
|
||||
>₹{{ subtotal('g', d) | number: '1.2-2' }}</span
|
||||
>
|
||||
@@ -173,6 +400,30 @@
|
||||
</section>
|
||||
</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-sum">
|
||||
<span>Received</span><strong>₹{{ receivedTotal | number: '1.2-2' }}</strong>
|
||||
@@ -213,9 +464,15 @@
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (needsIdProof && !customerIdProof.trim()) {
|
||||
@if (panMissing) {
|
||||
<div class="cx-warn cx-warn--pan">
|
||||
<mat-icon>badge</mat-icon> Enter customer PAN / Aadhaar to proceed (amount ≥ ₹50,000).
|
||||
<mat-icon>badge</mat-icon> Enter the customer's PAN to proceed (amount above ₹50,000).
|
||||
</div>
|
||||
}
|
||||
@if (!customerIdentified && !loadingCustomer) {
|
||||
<div class="cx-warn cx-warn--pan">
|
||||
<mat-icon>person_search</mat-icon>
|
||||
{{ customerMode === 'existing' ? 'Search and select the customer.' : "Enter the walk-in customer's name." }}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
@@ -73,99 +73,584 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Customer info bar ── */
|
||||
.cx-customer-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
background: #f8fafc;
|
||||
/* ── Customer: existing client or walk-in, plus PAN ── */
|
||||
.cx-cust {
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
|
||||
overflow: hidden;
|
||||
|
||||
.cx-customer-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
&__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(180deg, #f8fafc, #f1f5f9);
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
font-size: 20px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
&__title-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
background: #e6f4ee;
|
||||
color: #0f4f3c;
|
||||
|
||||
mat-icon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title-text {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
&__title-sub {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
&__modes {
|
||||
display: inline-flex;
|
||||
padding: 3px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&__mode {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.15s ease,
|
||||
color 0.15s ease;
|
||||
|
||||
mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
&--active,
|
||||
&--active:hover {
|
||||
background: #fff;
|
||||
color: #0f4f3c;
|
||||
box-shadow: 0 1px 3px rgb(15 23 42 / 15%);
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__who {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Nothing picked yet, or loading */
|
||||
&__empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
min-height: 150px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background: #f8fafc;
|
||||
border: 1.5px dashed #cbd5e1;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
&__empty-icon {
|
||||
font-size: 36px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: #1e40af;
|
||||
&__empty-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
&__empty-sub {
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* A picked client */
|
||||
&__card {
|
||||
padding: 14px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
&__card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__card-id {
|
||||
flex: 1 1 180px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&__badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&__card-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 12px 16px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed #e2e8f0;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
}
|
||||
|
||||
/* A walk-in, identified at the counter */
|
||||
&__walkin {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
|
||||
.cx-field {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cx-field input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.cx-field input:focus {
|
||||
outline: none;
|
||||
border-color: #1f7a4d;
|
||||
box-shadow: 0 0 0 3px rgb(31 122 77 / 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.cx-avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex: 0 0 auto;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1f7a4d, #0f4f3c);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: #fff;
|
||||
|
||||
&--sm {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* The cashier at the counter, or why there is none */
|
||||
.cx-cashier {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px 20px;
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-left: 4px solid #1f7a4d;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
|
||||
|
||||
&__id {
|
||||
flex: 1 1 220px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
&__flow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 14px;
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
color: #1e40af;
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 28px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
}
|
||||
|
||||
&--none {
|
||||
background: #fffbeb;
|
||||
border-color: #fcd34d;
|
||||
border-left-color: #d97706;
|
||||
|
||||
mat-icon {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.cx-cashier__label {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
color: #92400e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cx-walk-in {
|
||||
display: flex;
|
||||
.cx-kyc {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
|
||||
mat-icon {
|
||||
font-size: 16px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
&--ok {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
&--warn {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
&--sm {
|
||||
margin-left: 6px;
|
||||
padding: 1px 6px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cx-pan-required {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fcd34d;
|
||||
.cx-chip-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
background: #eef2ff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.cx-link-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
color: #1e40af;
|
||||
cursor: pointer;
|
||||
|
||||
mat-icon {
|
||||
font-size: 16px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: #d97706;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: #b91c1c;
|
||||
|
||||
&:hover {
|
||||
background: #fef2f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cx-field--inline {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
/* PAN: neutral until needed, amber when required and missing, red when malformed, green when valid */
|
||||
.cx-pan {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: start;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
&__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
mat-icon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #475569;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 180px;
|
||||
&__label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
margin-left: auto;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: #e2e8f0;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
|
||||
&--on {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 40px 0 12px;
|
||||
background: #fff;
|
||||
border: 1.5px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #0f172a;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 500;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #1f7a4d;
|
||||
box-shadow: 0 0 0 3px rgb(31 122 77 / 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__state {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
font-size: 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
||||
&--ok {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
&--bad {
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
&__hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
|
||||
mat-icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&--required {
|
||||
background: #fffbeb;
|
||||
border-color: #fcd34d;
|
||||
|
||||
.cx-pan__input input {
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
.cx-pan__hint {
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
}
|
||||
}
|
||||
|
||||
&--invalid {
|
||||
background: #fef2f2;
|
||||
border-color: #fecaca;
|
||||
|
||||
.cx-pan__input input {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.cx-pan__hint {
|
||||
font-weight: 600;
|
||||
color: #b91c1c;
|
||||
}
|
||||
}
|
||||
|
||||
&--valid {
|
||||
background: #f0fdf4;
|
||||
border-color: #bbf7d0;
|
||||
|
||||
.cx-pan__input input {
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
.cx-pan__hint {
|
||||
color: #166534;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cx-field--pan input {
|
||||
width: 160px;
|
||||
border-color: #fcd34d;
|
||||
.cx-spin {
|
||||
animation: cx-spin 1s linear infinite;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #d97706;
|
||||
@keyframes cx-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 900px) {
|
||||
.cx-cust__body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
.cx-cust__walkin {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -345,6 +830,129 @@
|
||||
border-bottom: 1px dotted #eef2f7;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -11,7 +11,15 @@ import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
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 { 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';
|
||||
|
||||
interface Denom {
|
||||
@@ -21,6 +29,47 @@ interface Denom {
|
||||
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). */
|
||||
@Component({
|
||||
selector: 'mifosx-cash-exchange-entry',
|
||||
@@ -31,11 +80,14 @@ interface Denom {
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatIconModule,
|
||||
MatSnackBarModule
|
||||
MatSnackBarModule,
|
||||
MatDialogModule
|
||||
]
|
||||
})
|
||||
export class CashExchangeEntryComponent implements OnInit {
|
||||
private service = inject(CashierService);
|
||||
private clientsService = inject(ClientsService);
|
||||
private dialog = inject(MatDialog);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
|
||||
notes: Denom[] = [];
|
||||
@@ -47,11 +99,17 @@ export class CashExchangeEntryComponent implements OnInit {
|
||||
saving = false;
|
||||
|
||||
// ── Customer info ──
|
||||
isAccountHolder = false;
|
||||
accountNo = '';
|
||||
customerIdProof = '';
|
||||
/** An existing client found through Customer Search, or a walk-in identified at the counter. */
|
||||
customerMode: 'existing' | 'walkin' = 'walkin';
|
||||
selectedCustomer: SelectedCustomer | null = null;
|
||||
loadingCustomer = false;
|
||||
walkInName = '';
|
||||
walkInMobile = '';
|
||||
panNumber = '';
|
||||
|
||||
// ── Cashier position (for denomination overdraft check) ──
|
||||
// ── Cashier at the counter, and their position (for the denomination overdraft check) ──
|
||||
/** The cashier linked to the logged-in user; null when the login is not a cashier's. */
|
||||
cashier: CashierInfo | null = null;
|
||||
private availableMap = new Map<number, number>();
|
||||
positionLoaded = false;
|
||||
|
||||
@@ -88,7 +146,19 @@ export class CashExchangeEntryComponent implements OnInit {
|
||||
((res?.denominations || []) as any[]).forEach((d: any) => {
|
||||
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;
|
||||
if (cashierId) this.loadCashierDetails(cashierId);
|
||||
},
|
||||
error: () => {
|
||||
this.positionLoaded = true;
|
||||
@@ -96,6 +166,31 @@ export class CashExchangeEntryComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
/** The counter, branch and today's allocation; the card still shows name and cash in hand without them. */
|
||||
private loadCashierDetails(cashierId: number): void {
|
||||
this.service
|
||||
.getInterCashierCashierSummary(cashierId, this.exchangeDate)
|
||||
.pipe(catchError(() => of(null)))
|
||||
.subscribe((r: any) => {
|
||||
if (!r || this.cashier?.cashierId !== cashierId) return;
|
||||
this.cashier = {
|
||||
...this.cashier,
|
||||
tellerName: r.tellerName || null,
|
||||
officeName: r.officeName || null,
|
||||
allocatedAmount: Number(r.allocatedAmount ?? 0)
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/** Up to two letters for the cashier's avatar. */
|
||||
get cashierInitials(): string {
|
||||
const words = (this.cashier?.name || '').trim().split(/\s+/).filter(Boolean);
|
||||
if (words.length === 0) return '?';
|
||||
const first = words[0].charAt(0);
|
||||
const last = words.length > 1 ? words[words.length - 1].charAt(0) : '';
|
||||
return (first + last).toUpperCase();
|
||||
}
|
||||
|
||||
countFor(side: 'r' | 'g', d: Denom): number {
|
||||
return (side === 'r' ? this.receivedCounts : this.givenCounts)[d.id] || 0;
|
||||
}
|
||||
@@ -129,14 +224,102 @@ export class CashExchangeEntryComponent implements OnInit {
|
||||
return this.receivedTotal > 0 && this.receivedTotal === this.givenTotal;
|
||||
}
|
||||
|
||||
/** Above ₹50,000 PAN/ID is mandatory per RBI guideline */
|
||||
get needsIdProof(): boolean {
|
||||
return this.receivedTotal >= 50000;
|
||||
/** Above ₹50,000 the customer's PAN is mandatory (Income Tax Rule 114B, followed under RBI guidelines). */
|
||||
get needsPan(): boolean {
|
||||
return this.receivedTotal > PAN_MANDATORY_ABOVE;
|
||||
}
|
||||
|
||||
/** Up to two letters for the avatar: first and last word of the customer's name. */
|
||||
get customerInitials(): string {
|
||||
const words = (this.selectedCustomer?.displayName || '').trim().split(/\s+/).filter(Boolean);
|
||||
if (words.length === 0) return '?';
|
||||
const first = words[0].charAt(0);
|
||||
const last = words.length > 1 ? words[words.length - 1].charAt(0) : '';
|
||||
return (first + last).toUpperCase();
|
||||
}
|
||||
|
||||
get panValue(): string {
|
||||
return this.panNumber.trim().toUpperCase();
|
||||
}
|
||||
|
||||
/** A PAN that is entered must be well-formed, required or not. */
|
||||
get panFormatInvalid(): boolean {
|
||||
return !!this.panValue && !PAN_PATTERN.test(this.panValue);
|
||||
}
|
||||
|
||||
get panMissing(): boolean {
|
||||
return this.needsPan && !this.panValue;
|
||||
}
|
||||
|
||||
/** The PAN comes from the client's KYC record, so the cashier confirms it rather than types it. */
|
||||
get panFromKyc(): boolean {
|
||||
return !!this.selectedCustomer?.kycPan && this.panValue === this.selectedCustomer.kycPan.toUpperCase();
|
||||
}
|
||||
|
||||
/** Who the customer is has to be known: a picked client, or a walk-in's name once PAN is required. */
|
||||
get customerIdentified(): boolean {
|
||||
if (this.customerMode === 'existing') return !!this.selectedCustomer;
|
||||
return !this.needsPan || this.walkInName.trim().length > 0;
|
||||
}
|
||||
|
||||
/** A login with no cashier behind it has no drawer to take notes into or give change from. */
|
||||
get noCashier(): boolean {
|
||||
return this.positionLoaded && !this.cashier;
|
||||
}
|
||||
|
||||
/** How many of the denomination the cashier holds, or null while that is not known (loading, or no cashier). */
|
||||
availableFor(d: Denom): number | null {
|
||||
if (!this.positionLoaded || !this.cashier) return null;
|
||||
return this.availableMap.get(d.id) ?? 0;
|
||||
}
|
||||
|
||||
/** The cashier is giving more of this denomination than they hold. */
|
||||
exceedsAvailable(d: Denom): boolean {
|
||||
const available = this.availableFor(d);
|
||||
return available !== null && this.countFor('g', d) > available;
|
||||
}
|
||||
|
||||
/** The + on the given side stops at what the cashier holds; a larger typed number is still caught and shown. */
|
||||
canGiveMore(d: Denom): boolean {
|
||||
const available = this.availableFor(d);
|
||||
return available === null || this.countFor('g', d) < available;
|
||||
}
|
||||
|
||||
/** What this exchange does to the cashier's count of the denomination: notes taken in less notes given out. */
|
||||
netFor(d: Denom): number {
|
||||
return this.countFor('r', d) - this.countFor('g', d);
|
||||
}
|
||||
|
||||
/** The cashier's count of the denomination once this exchange is recorded, or null while it is not known. */
|
||||
drawerAfter(d: Denom): number | null {
|
||||
const available = this.availableFor(d);
|
||||
return available === null ? null : available + this.netFor(d);
|
||||
}
|
||||
|
||||
/**
|
||||
* The denominations this exchange changes, with the drawer's count before and after, so the effect shows
|
||||
* while the counts are being typed. The branch's total for each denomination moves by the same amount, as
|
||||
* the customer's notes go into the drawer and the change comes out of it; the vault is not involved.
|
||||
*/
|
||||
get impactRows(): Array<{ id: number; label: string; kind: string; net: number; before: number; after: number }> {
|
||||
if (!this.positionLoaded || !this.cashier) return [];
|
||||
return this.denoms
|
||||
.filter((d) => this.netFor(d) !== 0)
|
||||
.map((d) => ({
|
||||
id: d.id,
|
||||
label: d.label,
|
||||
kind: d.kind,
|
||||
net: this.netFor(d),
|
||||
before: this.availableFor(d) ?? 0,
|
||||
after: this.drawerAfter(d) ?? 0
|
||||
}));
|
||||
}
|
||||
|
||||
/** Denominations where cashier is giving more than currently available. */
|
||||
get givenOverdraftItems(): Array<{ label: string; available: number; requested: number }> {
|
||||
if (!this.positionLoaded) return [];
|
||||
// Without a cashier every denomination would read as "0 available"; the missing cashier is the
|
||||
// thing to tell the user, not a stock shortage.
|
||||
if (!this.positionLoaded || !this.cashier) return [];
|
||||
return this.denoms
|
||||
.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);
|
||||
@@ -147,21 +330,77 @@ export class CashExchangeEntryComponent implements OnInit {
|
||||
}
|
||||
|
||||
get valid(): boolean {
|
||||
return this.matches && (!this.needsIdProof || this.customerIdProof.trim().length > 0) && !this.hasGivenOverdraft;
|
||||
return (
|
||||
this.matches &&
|
||||
!!this.cashier &&
|
||||
!this.hasGivenOverdraft &&
|
||||
!this.panFormatInvalid &&
|
||||
!this.panMissing &&
|
||||
this.customerIdentified &&
|
||||
!this.loadingCustomer
|
||||
);
|
||||
}
|
||||
|
||||
toggleAccountHolder(): void {
|
||||
this.isAccountHolder = !this.isAccountHolder;
|
||||
if (!this.isAccountHolder) this.accountNo = '';
|
||||
setCustomerMode(mode: 'existing' | 'walkin'): void {
|
||||
if (this.customerMode === mode) return;
|
||||
this.customerMode = mode;
|
||||
this.selectedCustomer = null;
|
||||
this.walkInName = '';
|
||||
this.walkInMobile = '';
|
||||
this.panNumber = '';
|
||||
}
|
||||
|
||||
/** Pick an existing client through Customer Search, then load their details and KYC (PAN). */
|
||||
openCustomerSearch(): void {
|
||||
this.dialog
|
||||
// An existing customer without an account is still a known customer, so the account is not required.
|
||||
.open(CustomerSearchDialogComponent, { width: '960px', maxWidth: '95vw', data: { requireAccount: false } })
|
||||
.afterClosed()
|
||||
.subscribe((result: CustomerSearchResult | undefined) => {
|
||||
if (!result?.clientId) return;
|
||||
this.loadCustomer(result);
|
||||
});
|
||||
}
|
||||
|
||||
private loadCustomer(result: CustomerSearchResult): void {
|
||||
this.loadingCustomer = true;
|
||||
const id = String(result.clientId);
|
||||
forkJoin({
|
||||
client: this.clientsService.getClientData(id, true).pipe(catchError(() => of(null))),
|
||||
kyc: this.clientsService.getClientKyc(id, true).pipe(catchError(() => of(null)))
|
||||
}).subscribe(({ client, kyc }: { client: any; kyc: any }) => {
|
||||
const kycPan: string | null = kyc?.panNumber || result.panNumber || null;
|
||||
this.selectedCustomer = {
|
||||
clientId: result.clientId,
|
||||
displayName: client?.displayName || result.displayName,
|
||||
cifNumber: client?.cifNumber || null,
|
||||
mobileNo: client?.mobileNo || result.mobileNo || null,
|
||||
officeName: client?.officeName || result.officeName || null,
|
||||
accountNo: result.accountNo || null,
|
||||
accountType: result.accountType || null,
|
||||
kycPan,
|
||||
panVerified: !!kyc?.panVerified,
|
||||
kycStatus: KYC_STATUS[Number(kyc?.kycStatus?.id ?? kyc?.kycStatus)] || 'Not on record'
|
||||
};
|
||||
this.panNumber = kycPan ? kycPan.toUpperCase() : '';
|
||||
this.loadingCustomer = false;
|
||||
});
|
||||
}
|
||||
|
||||
clearCustomer(): void {
|
||||
this.selectedCustomer = null;
|
||||
this.panNumber = '';
|
||||
}
|
||||
|
||||
clear(): void {
|
||||
this.receivedCounts = {};
|
||||
this.givenCounts = {};
|
||||
this.note = '';
|
||||
this.accountNo = '';
|
||||
this.customerIdProof = '';
|
||||
this.isAccountHolder = false;
|
||||
this.customerMode = 'walkin';
|
||||
this.selectedCustomer = null;
|
||||
this.walkInName = '';
|
||||
this.walkInMobile = '';
|
||||
this.panNumber = '';
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
@@ -171,11 +410,17 @@ export class CashExchangeEntryComponent implements OnInit {
|
||||
this.denoms
|
||||
.filter((d) => this.countFor(side, d) > 0)
|
||||
.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 = {
|
||||
exchangeDate: this.exchangeDate,
|
||||
note: this.note || null,
|
||||
customerIdProof: this.customerIdProof.trim() || null,
|
||||
accountNo: this.isAccountHolder && this.accountNo.trim() ? this.accountNo.trim() : null,
|
||||
clientId: customer?.clientId ?? null,
|
||||
accountNo: customer?.accountNo ?? null,
|
||||
customerName: customer ? customer.displayName : this.walkInName.trim() || null,
|
||||
customerMobile: customer ? customer.mobileNo : this.walkInMobile.trim() || null,
|
||||
panNumber: pan,
|
||||
customerIdProof: pan,
|
||||
received: build('r'),
|
||||
given: build('g')
|
||||
};
|
||||
|
||||
@@ -11,25 +11,11 @@
|
||||
<div>
|
||||
<div class="pg-eyebrow">CASHIER · HISTORY</div>
|
||||
<h1 class="pg-title">Cash Movement History</h1>
|
||||
<p class="pg-sub">All transfers, settlements, and inter-cashier movements. Reverse any active transaction.</p>
|
||||
<p class="pg-sub">All transfers, settlements, inter-cashier movements and cash exchanges.</p>
|
||||
</div>
|
||||
<button type="button" class="pg-btn pg-btn--ghost" (click)="load()"><mat-icon>refresh</mat-icon> Refresh</button>
|
||||
</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) {
|
||||
<div class="pg-empty">Loading…</div>
|
||||
}
|
||||
@@ -134,11 +120,6 @@
|
||||
>
|
||||
<mat-icon>visibility</mat-icon>
|
||||
</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>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -187,6 +168,12 @@
|
||||
<span class="detail-meta__label">Date</span>
|
||||
<span class="detail-meta__val">{{ detail.row.date }}</span>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
@@ -47,38 +47,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.reverse-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fcd34d;
|
||||
border-radius: 10px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 13px;
|
||||
color: #92400e;
|
||||
|
||||
.reverse-icon {
|
||||
color: #f59e0b;
|
||||
font-size: 20px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.reverse-reason {
|
||||
flex: 1 1 200px;
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #fcd34d;
|
||||
border-radius: 7px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
background: #fff;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Action buttons cell ── */
|
||||
.action-btns {
|
||||
display: flex;
|
||||
|
||||
@@ -8,9 +8,7 @@
|
||||
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
|
||||
import { forkJoin, of } from 'rxjs';
|
||||
@@ -31,6 +29,8 @@ interface TxnRow {
|
||||
reversedBy: number | null;
|
||||
reversedAt: string | null;
|
||||
reverseReason: string | null;
|
||||
/** Customer PAN recorded on a cash exchange. */
|
||||
panNumber?: string | null;
|
||||
type: 'transfer' | 'settlement' | 'inter' | 'exchange';
|
||||
}
|
||||
|
||||
@@ -52,7 +52,10 @@ interface DetailView {
|
||||
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({
|
||||
selector: 'mifosx-cash-history',
|
||||
templateUrl: './cash-history.component.html',
|
||||
@@ -63,16 +66,13 @@ interface DetailView {
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatIconModule,
|
||||
MatSnackBarModule,
|
||||
MatTabsModule,
|
||||
MatPaginatorModule
|
||||
]
|
||||
})
|
||||
export class CashHistoryComponent implements OnInit {
|
||||
private service = inject(CashierService);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
|
||||
transfers: TxnRow[] = [];
|
||||
settlements: TxnRow[] = [];
|
||||
@@ -99,10 +99,6 @@ export class CashHistoryComponent implements OnInit {
|
||||
|
||||
private denomKindMap = new Map<number, 'note' | 'coin'>();
|
||||
|
||||
reversingId: number | null = null;
|
||||
reversingType: string | null = null;
|
||||
reverseReason = '';
|
||||
|
||||
detail: DetailView | null = null;
|
||||
|
||||
ngOnInit(): void {
|
||||
@@ -212,7 +208,8 @@ export class CashHistoryComponent implements OnInit {
|
||||
this.exchanges = (exchangeItems as any[]).map((e) => ({
|
||||
id: e.id,
|
||||
date: e.exchangeDate,
|
||||
fromParty: e.accountNo ? `Account ${e.accountNo}` : 'Walk-in Customer',
|
||||
fromParty: this.exchangeParty(e),
|
||||
panNumber: e.panNumber ?? null,
|
||||
toParty: e.performedByUsername || '—',
|
||||
amount: e.exchangeAmount,
|
||||
note: e.note,
|
||||
@@ -310,7 +307,8 @@ export class CashHistoryComponent implements OnInit {
|
||||
this.exchanges = (res.pageItems ?? []).map((e: any) => ({
|
||||
id: e.id,
|
||||
date: e.exchangeDate,
|
||||
fromParty: e.accountNo ? `Account ${e.accountNo}` : 'Walk-in Customer',
|
||||
fromParty: this.exchangeParty(e),
|
||||
panNumber: e.panNumber ?? null,
|
||||
toParty: e.performedByUsername || '—',
|
||||
amount: e.exchangeAmount,
|
||||
note: e.note,
|
||||
@@ -392,39 +390,12 @@ export class CashHistoryComponent implements OnInit {
|
||||
this.detail = null;
|
||||
}
|
||||
|
||||
startReverse(row: TxnRow): void {
|
||||
this.reversingId = row.id;
|
||||
this.reversingType = row.type;
|
||||
this.reverseReason = '';
|
||||
}
|
||||
|
||||
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 });
|
||||
}
|
||||
});
|
||||
/** Who the exchange was with: the customer's name (and account, if one), else the account, else a walk-in. */
|
||||
private exchangeParty(e: any): string {
|
||||
if (e.customerName) {
|
||||
return e.accountNo ? `${e.customerName} (A/C ${e.accountNo})` : e.customerName;
|
||||
}
|
||||
return e.accountNo ? `Account ${e.accountNo}` : 'Walk-in Customer';
|
||||
}
|
||||
|
||||
typeLabel(type: string): string {
|
||||
|
||||
@@ -23,6 +23,7 @@ import { DayBookComponent } from './day-book/day-book.component';
|
||||
import { VoucherReportComponent } from './voucher-report/voucher-report.component';
|
||||
import { BranchDayComponent } from './branch-day/branch-day.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 { ClosingCashReportComponent } from './closing-cash-report/closing-cash-report.component';
|
||||
import { ExcessTransactionReportComponent } from './excess-transaction-report/excess-transaction-report.component';
|
||||
@@ -225,6 +226,13 @@ const routes: Routes = [
|
||||
component: VaultPositionComponent,
|
||||
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
|
||||
// signing the day off actually looks. It carries the Officer Verification Sheet — each
|
||||
|
||||
@@ -32,9 +32,6 @@ export class CashierService {
|
||||
getCashExchange(id: number): Observable<any> {
|
||||
return this.http.get(`/cashexchange/${id}`);
|
||||
}
|
||||
reverseCashExchange(id: number, reason: string): Observable<any> {
|
||||
return this.http.post(`/cashexchange/${id}/reverse`, { reason });
|
||||
}
|
||||
|
||||
// ── Tellers / Cashiers ──
|
||||
getTellers(officeId?: number): Observable<any[]> {
|
||||
@@ -60,9 +57,6 @@ export class CashierService {
|
||||
getCashTransferById(id: number): Observable<any> {
|
||||
return this.http.get(`/cashtransfer/${id}`);
|
||||
}
|
||||
reverseCashTransfer(id: number, reason: string): Observable<any> {
|
||||
return this.http.post(`/cashtransfer/${id}/reverse`, { reason });
|
||||
}
|
||||
|
||||
// ── Cash Settlement ──
|
||||
createCashSettlement(data: any): Observable<any> {
|
||||
@@ -75,9 +69,6 @@ export class CashierService {
|
||||
getCashSettlementById(id: number): Observable<any> {
|
||||
return this.http.get(`/cashsettlement/${id}`);
|
||||
}
|
||||
reverseCashSettlement(id: number, reason: string): Observable<any> {
|
||||
return this.http.post(`/cashsettlement/${id}/reverse`, { reason });
|
||||
}
|
||||
|
||||
// ── Inter-cashier Transfer ──
|
||||
createInterCashierTransfer(data: any): Observable<any> {
|
||||
@@ -90,8 +81,10 @@ export class CashierService {
|
||||
getInterCashierById(id: number): Observable<any> {
|
||||
return this.http.get(`/cashintercashier/${id}`);
|
||||
}
|
||||
reverseInterCashierTransfer(id: number, reason: string): Observable<any> {
|
||||
return this.http.post(`/cashintercashier/${id}/reverse`, { reason });
|
||||
/** One cashier's details, today's vault allocation and denomination-wise cash, for either side of a transfer. */
|
||||
getInterCashierCashierSummary(cashierId: number, date: string): Observable<any> {
|
||||
const params = new HttpParams().set('cashierId', cashierId).set('date', date);
|
||||
return this.http.get<any>('/cashintercashier/cashier-summary', { params });
|
||||
}
|
||||
|
||||
// ── Reconciliation ──
|
||||
@@ -318,6 +311,16 @@ export class CashierService {
|
||||
if (asOfDate) params = params.set('asOfDate', asOfDate);
|
||||
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[]> {
|
||||
let params = new HttpParams().set('threshold', String(threshold));
|
||||
if (fromDate) params = params.set('fromDate', fromDate);
|
||||
|
||||
@@ -11,41 +11,29 @@
|
||||
<div>
|
||||
<div class="pg-eyebrow">CASHIER · INTER-CASHIER TRANSFER</div>
|
||||
<h1 class="pg-title">Inter-Cashier Transfer</h1>
|
||||
<p class="pg-sub">Move denomination-wise cash between two cashiers within the same teller.</p>
|
||||
<p class="pg-sub">Hand over denomination-wise cash from your drawer to another cashier at your counter.</p>
|
||||
</div>
|
||||
<button type="button" class="pg-btn pg-btn--ghost" (click)="clear()"><mat-icon>undo</mat-icon> Clear</button>
|
||||
</header>
|
||||
|
||||
<div class="pg-toolbar pg-toolbar--mat">
|
||||
@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>
|
||||
}
|
||||
@if (tellers.length === 0) {
|
||||
<mat-option [value]="null" disabled>No tellers configured</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
@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">
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>From (Cashier)</mat-label>
|
||||
<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-label>Teller</mat-label>
|
||||
<input matInput type="text" [value]="tellerName || '—'" readonly />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- The sender is always the cashier who is logged in; nothing to pick. -->
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>From (You)</mat-label>
|
||||
<input matInput type="text" [value]="fromParty || '—'" readonly />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
@@ -54,7 +42,7 @@
|
||||
@for (c of availableTo; track c.id) {
|
||||
<mat-option [value]="c.id">{{ c.label }}</mat-option>
|
||||
}
|
||||
@if (fromCashierId && availableTo.length === 0) {
|
||||
@if (fromCashierId && !loadingCashiers && availableTo.length === 0) {
|
||||
<mat-option [value]="null" disabled>No other cashiers</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@@ -62,7 +50,7 @@
|
||||
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput type="date" [value]="transferDate" (change)="transferDate = $any($event.target).value" />
|
||||
<input matInput type="date" [value]="transferDate" (change)="onDateChange($any($event.target).value)" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="pg-note-field">
|
||||
@@ -71,26 +59,102 @@
|
||||
</mat-form-field>
|
||||
</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">
|
||||
<table class="pg-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Denomination</th>
|
||||
<th class="num">From holds</th>
|
||||
<th style="text-align: center">Count</th>
|
||||
<th class="num">Amount</th>
|
||||
<th class="num">To holds</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (notes.length) {
|
||||
<tr class="pg-section">
|
||||
<td colspan="3">Bank Notes</td>
|
||||
<td colspan="5">Bank Notes</td>
|
||||
</tr>
|
||||
}
|
||||
@for (d of notes; track d.id) {
|
||||
<tr>
|
||||
<tr [class.ict-row--over]="exceedsHeld(d)">
|
||||
<td>
|
||||
<span class="pg-chip">{{ d.label }}</span>
|
||||
</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">
|
||||
<div class="pg-step">
|
||||
<button type="button" (click)="bump(d, -1)" [disabled]="countFor(d) === 0">−</button>
|
||||
@@ -99,18 +163,28 @@
|
||||
</div>
|
||||
</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>
|
||||
}
|
||||
@if (coins.length) {
|
||||
<tr class="pg-section">
|
||||
<td colspan="3">Coins</td>
|
||||
<td colspan="5">Coins</td>
|
||||
</tr>
|
||||
}
|
||||
@for (d of coins; track d.id) {
|
||||
<tr>
|
||||
<tr [class.ict-row--over]="exceedsHeld(d)">
|
||||
<td>
|
||||
<span class="pg-chip pg-chip--coin">{{ d.label }}</span>
|
||||
</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">
|
||||
<div class="pg-step">
|
||||
<button type="button" (click)="bump(d, -1)" [disabled]="countFor(d) === 0">−</button>
|
||||
@@ -119,17 +193,34 @@
|
||||
</div>
|
||||
</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>
|
||||
}
|
||||
@if (denoms.length === 0) {
|
||||
<tr>
|
||||
<td colspan="3" class="pg-empty">No active denominations. Add some in Cash Denomination.</td>
|
||||
<td colspan="5" class="pg-empty">No active denominations. Add some in Cash Denomination.</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</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">
|
||||
Total to transfer: <strong>₹{{ total | number: '1.2-2' }}</strong>
|
||||
<button type="button" class="pg-btn pg-btn--primary" [disabled]="!valid || saving" (click)="submit()">
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.ict-parties {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&__arrow {
|
||||
align-self: center;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
@media (width <= 760px) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
&__arrow {
|
||||
justify-self: center;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ict-party {
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
|
||||
&--blocked {
|
||||
background: #fef2f2;
|
||||
border-color: #fecaca;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin-top: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&__figures {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
&__warn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #991b1b;
|
||||
|
||||
mat-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ict-alert {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 14px;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
color: #991b1b;
|
||||
|
||||
mat-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.ict-row--over {
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.ict-held--over {
|
||||
color: #b91c1c;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ict-after {
|
||||
margin-left: 4px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
@@ -29,12 +29,27 @@ interface Cashier {
|
||||
id: number;
|
||||
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. */
|
||||
@Component({
|
||||
selector: 'mifosx-inter-cashier-transfer',
|
||||
templateUrl: './inter-cashier-transfer.component.html',
|
||||
styleUrls: ['../cashier-shared.scss'],
|
||||
styleUrls: [
|
||||
'../cashier-shared.scss',
|
||||
'./inter-cashier-transfer.component.scss'
|
||||
],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
@@ -57,7 +72,12 @@ export class InterCashierTransferComponent implements OnInit {
|
||||
note = '';
|
||||
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[] = [];
|
||||
selectedTellerId: number | null = null;
|
||||
fromCashierId: number | null = null;
|
||||
@@ -66,15 +86,19 @@ export class InterCashierTransferComponent implements OnInit {
|
||||
toParty = '';
|
||||
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[] {
|
||||
return [
|
||||
...this.notes,
|
||||
...this.coins
|
||||
];
|
||||
}
|
||||
get availableFrom(): Cashier[] {
|
||||
return this.allCashiers;
|
||||
}
|
||||
/** Everyone under the same teller except the sender. */
|
||||
get availableTo(): Cashier[] {
|
||||
return this.allCashiers.filter((c) => c.id !== this.fromCashierId);
|
||||
}
|
||||
@@ -98,25 +122,20 @@ export class InterCashierTransferComponent implements OnInit {
|
||||
this.coins = [];
|
||||
}
|
||||
});
|
||||
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);
|
||||
}
|
||||
});
|
||||
// The sender is the cashier behind this login; their counter then gives the receivers to pick from.
|
||||
this.service.getCurrentCashierInfo().subscribe((info) => {
|
||||
if (!info) {
|
||||
this.ownCashierMissing = true;
|
||||
return;
|
||||
}
|
||||
this.fromCashierId = info.cashierId;
|
||||
this.fromParty = info.cashierName;
|
||||
this.loadSummary('from');
|
||||
});
|
||||
}
|
||||
|
||||
onTellerSelect(tellerId: number): void {
|
||||
this.selectedTellerId = tellerId;
|
||||
this.fromCashierId = null;
|
||||
this.toCashierId = null;
|
||||
this.fromParty = '';
|
||||
this.toParty = '';
|
||||
this.allCashiers = [];
|
||||
if (!tellerId) return;
|
||||
/** The other cashiers at this counter, one of whom receives the cash. */
|
||||
private loadReceivers(tellerId: number): void {
|
||||
this.loadingCashiers = true;
|
||||
this.service
|
||||
.getCashiersForTeller(tellerId)
|
||||
@@ -127,20 +146,90 @@ export class InterCashierTransferComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
onFromSelect(cashierId: number): void {
|
||||
this.fromCashierId = cashierId;
|
||||
const c = this.allCashiers.find((x) => x.id === cashierId);
|
||||
this.fromParty = c ? c.label : '';
|
||||
if (this.toCashierId === cashierId) {
|
||||
this.toCashierId = null;
|
||||
this.toParty = '';
|
||||
}
|
||||
}
|
||||
|
||||
onToSelect(cashierId: number): void {
|
||||
this.toCashierId = cashierId;
|
||||
const c = this.allCashiers.find((x) => x.id === cashierId);
|
||||
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 {
|
||||
@@ -160,7 +249,14 @@ export class InterCashierTransferComponent implements OnInit {
|
||||
return this.denoms.reduce((s, d) => s + this.subtotal(d), 0);
|
||||
}
|
||||
get valid(): boolean {
|
||||
return this.total > 0 && !!this.selectedTellerId && !!this.fromCashierId && !!this.toCashierId;
|
||||
return (
|
||||
this.total > 0 &&
|
||||
!!this.selectedTellerId &&
|
||||
!!this.fromCashierId &&
|
||||
!!this.toCashierId &&
|
||||
this.bothAllocated &&
|
||||
!this.anyExceedsHeld
|
||||
);
|
||||
}
|
||||
|
||||
clear(): void {
|
||||
@@ -187,10 +283,12 @@ export class InterCashierTransferComponent implements OnInit {
|
||||
this.snackBar.open('Inter-cashier transfer recorded', 'Close', { duration: 3000 });
|
||||
this.clear();
|
||||
this.note = '';
|
||||
this.fromCashierId = null;
|
||||
// The sender stays the logged-in cashier; the receiver is picked afresh, and the sender's holdings
|
||||
// are read again now that part of them has gone.
|
||||
this.toCashierId = null;
|
||||
this.fromParty = '';
|
||||
this.toParty = '';
|
||||
this.toSummary = null;
|
||||
this.loadSummary('from');
|
||||
this.saving = false;
|
||||
},
|
||||
error: () => {
|
||||
|
||||
@@ -19,34 +19,21 @@
|
||||
<!-- ── Entry Tab ── -->
|
||||
<mat-tab label="New Reconciliation">
|
||||
<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">
|
||||
@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>
|
||||
}
|
||||
|
||||
<!-- A reconciliation is the cashier's own count of their own drawer: nothing to pick. -->
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>Cashier</mat-label>
|
||||
<mat-select
|
||||
[value]="selectedCashierId"
|
||||
(selectionChange)="onCashierSelect($event.value)"
|
||||
[disabled]="!selectedTellerId"
|
||||
>
|
||||
@for (c of cashiers; track c.id) {
|
||||
<mat-option [value]="c.id">{{ c.label }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
<mat-label>Teller</mat-label>
|
||||
<input matInput type="text" [value]="ownTellerName || '—'" readonly />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-label>Cashier (You)</mat-label>
|
||||
<input matInput type="text" [value]="cashierName || '—'" readonly />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" subscriptSizing="dynamic">
|
||||
|
||||
@@ -12,7 +12,6 @@ import { FormsModule } from '@angular/forms';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { forkJoin, of } from 'rxjs';
|
||||
@@ -58,7 +57,6 @@ interface ReconRecord {
|
||||
MatIconModule,
|
||||
MatSnackBarModule,
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
MatInputModule,
|
||||
MatTabsModule
|
||||
]
|
||||
@@ -67,9 +65,14 @@ export class ReconciliationComponent implements OnInit {
|
||||
private service = inject(CashierService);
|
||||
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 ──
|
||||
tellers: { id: number; name: string }[] = [];
|
||||
cashiers: { id: number; label: string }[] = [];
|
||||
selectedTellerId: number | null = null;
|
||||
selectedCashierId: number | null = null;
|
||||
cashierName = '';
|
||||
@@ -88,42 +91,28 @@ export class ReconciliationComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
const d = businessToday();
|
||||
this.reconDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
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.lockToOwnCashier();
|
||||
this.loadHistory();
|
||||
}
|
||||
|
||||
onTellerSelect(tellerId: number): void {
|
||||
this.selectedTellerId = tellerId;
|
||||
this.selectedCashierId = null;
|
||||
this.cashierName = '';
|
||||
this.cashiers = [];
|
||||
this.rows = [];
|
||||
if (!tellerId) return;
|
||||
this.service
|
||||
.getCashiersForTeller(tellerId)
|
||||
.pipe(catchError(() => of({ cashiers: [] })))
|
||||
.subscribe((r: any) => {
|
||||
this.cashiers = (r?.cashiers || []).map((c: any) => ({ id: c.id, label: c.staffName }));
|
||||
if (this.cashiers.length === 1) {
|
||||
this.onCashierSelect(this.cashiers[0].id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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();
|
||||
/** Take the logged-in cashier as the one being reconciled, with their counter for the record. */
|
||||
private lockToOwnCashier(): void {
|
||||
this.service.getCurrentCashierInfo().subscribe((info) => {
|
||||
if (!info) {
|
||||
this.ownCashierMissing = true;
|
||||
return;
|
||||
}
|
||||
this.selectedCashierId = info.cashierId;
|
||||
this.cashierName = info.cashierName;
|
||||
this.service
|
||||
.getInterCashierCashierSummary(info.cashierId, this.reconDate)
|
||||
.pipe(catchError(() => of(null)))
|
||||
.subscribe((r: any) => {
|
||||
this.selectedTellerId = r?.tellerId ?? null;
|
||||
this.ownTellerName = r?.tellerName || '';
|
||||
});
|
||||
this.fetchExpected();
|
||||
});
|
||||
}
|
||||
|
||||
fetchExpected(): void {
|
||||
|
||||
@@ -321,7 +321,8 @@ export class Form121TabComponent implements OnInit, OnDestroy {
|
||||
|
||||
this.availableFys = [...fys].sort().reverse();
|
||||
if (!this.availableFys.includes(this.fy)) {
|
||||
this.fy = this.availableFys[0] ?? this.declarations[0]?.fy ?? Object.keys(FY_TAX_CONFIG).sort().reverse()[0] ?? '';
|
||||
this.fy =
|
||||
this.availableFys[0] ?? this.declarations[0]?.fy ?? Object.keys(FY_TAX_CONFIG).sort().reverse()[0] ?? '';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -367,9 +368,7 @@ export class Form121TabComponent implements OnInit, OnDestroy {
|
||||
: 0;
|
||||
}
|
||||
// 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) {
|
||||
return;
|
||||
|
||||
@@ -256,13 +256,6 @@
|
||||
>
|
||||
<fa-icon icon="exchange"></fa-icon> Cash Exchange
|
||||
</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
|
||||
class="cashier-nav__item"
|
||||
[routerLink]="['/cashier/inter-cashier']"
|
||||
@@ -270,13 +263,6 @@
|
||||
>
|
||||
<fa-icon icon="exchange-alt"></fa-icon> Inter-Cashier
|
||||
</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
|
||||
class="cashier-nav__item"
|
||||
[routerLink]="['/cashier/cashier-position']"
|
||||
@@ -284,6 +270,13 @@
|
||||
>
|
||||
<fa-icon icon="wallet"></fa-icon> Position
|
||||
</a>
|
||||
<a
|
||||
class="cashier-nav__item"
|
||||
[routerLink]="['/cashier/reconciliation']"
|
||||
routerLinkActive="cashier-nav__item--active"
|
||||
>
|
||||
<fa-icon icon="balance-scale"></fa-icon> Reconciliation
|
||||
</a>
|
||||
<a
|
||||
class="cashier-nav__item"
|
||||
[routerLink]="['/cashier/cash-history']"
|
||||
@@ -308,13 +301,6 @@
|
||||
>
|
||||
<fa-icon icon="list"></fa-icon> Payment
|
||||
</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>
|
||||
}
|
||||
}
|
||||
@@ -914,7 +900,11 @@
|
||||
(click)="subLedgerOpen = false"
|
||||
><fa-icon icon="balance-scale" class="gl-icon"></fa-icon> Suit File Entry</a
|
||||
>
|
||||
<a class="gl-link" [class.hidden]="!matchesSubLedgerSearch('Locker Entry')" (click)="subLedgerOpen = false"
|
||||
<a
|
||||
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
|
||||
>
|
||||
<a
|
||||
@@ -1090,6 +1080,9 @@
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/vault-position']">
|
||||
<fa-icon icon="lock" class="menu-item-icon"></fa-icon> Vault Position
|
||||
</button>
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/branch-position']">
|
||||
<fa-icon icon="coins" class="menu-item-icon"></fa-icon> Branch Cash Position
|
||||
</button>
|
||||
</div>
|
||||
<div class="deposit-menu-group">
|
||||
<div class="deposit-group-title">Verification & Reports</div>
|
||||
@@ -1162,12 +1155,9 @@
|
||||
<!-- Cash Entries & Exchange -->
|
||||
<div class="deposit-menu-group">
|
||||
<div class="deposit-group-title">Cash & Counter</div>
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-exchange']">
|
||||
<fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Cash Exchange Entry
|
||||
</button>
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/exchange-detail']">
|
||||
<fa-icon icon="globe" class="menu-item-icon"></fa-icon> Currency Exchange Detail
|
||||
</button>
|
||||
<!-- Cash Exchange, Currency Exchange Detail, Inter-Cashier Transfer and Reconciliation are not
|
||||
here: they move or count notes in one cashier's own drawer, so only the cashier who is logged
|
||||
in does them, from the cashier screen. -->
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/transaction-entry']">
|
||||
<fa-icon icon="keyboard" class="menu-item-icon"></fa-icon> Transaction Entry
|
||||
</button>
|
||||
@@ -1182,9 +1172,6 @@
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-transfer']">
|
||||
<fa-icon icon="random" class="menu-item-icon"></fa-icon> Cash Transfer
|
||||
</button>
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/inter-cashier']">
|
||||
<fa-icon icon="exchange-alt" class="menu-item-icon"></fa-icon> Inter-Cashier Transfer
|
||||
</button>
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-settlement']">
|
||||
<fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Cash Settlement
|
||||
</button>
|
||||
@@ -1205,9 +1192,6 @@
|
||||
<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/reconciliation']">
|
||||
<fa-icon icon="balance-scale" class="menu-item-icon"></fa-icon> Reconciliation
|
||||
</button>
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-history']">
|
||||
<fa-icon icon="history" class="menu-item-icon"></fa-icon> Cash History
|
||||
</button>
|
||||
@@ -1231,14 +1215,29 @@
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/accounts/recurring-deposits']">
|
||||
<fa-icon icon="sync" class="menu-item-icon"></fa-icon> Recurring
|
||||
</button>
|
||||
<button mat-menu-item tabindex="0"><fa-icon icon="coins" class="menu-item-icon"></fa-icon> DDS</button>
|
||||
<button mat-menu-item tabindex="0" [routerLink]="['/accounts/dds']" (click)="depositsMenu.closed.emit()">
|
||||
<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 class="deposit-menu-group">
|
||||
<div class="deposit-group-title">Agent</div>
|
||||
<button mat-menu-item tabindex="0">
|
||||
<fa-icon icon="hand-holding-usd" class="menu-item-icon"></fa-icon> Agent Commission
|
||||
</button>
|
||||
<button mat-menu-item tabindex="0">
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
<button mat-menu-item tabindex="0">
|
||||
@@ -1253,6 +1252,14 @@
|
||||
</div>
|
||||
<div class="deposit-menu-group">
|
||||
<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']">
|
||||
<fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> Savings Daily Interest
|
||||
</button>
|
||||
@@ -1473,7 +1480,9 @@
|
||||
<button mat-menu-item tabindex="0">
|
||||
<fa-icon icon="user-slash" class="menu-item-icon" style="color: #c2410c"></fa-icon> Non-Customer Entry
|
||||
</button>
|
||||
<button mat-menu-item tabindex="0"><fa-icon icon="lock" class="menu-item-icon"></fa-icon> Locker</button>
|
||||
<button mat-menu-item routerLink="/locker" tabindex="0">
|
||||
<fa-icon icon="lock" class="menu-item-icon"></fa-icon> Locker
|
||||
</button>
|
||||
<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
|
||||
</button>
|
||||
|
||||
@@ -244,6 +244,44 @@ $color: #e2e4ec;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The cashier's bar is meant to be one row at a normal window size: it carries about eleven items, and at
|
||||
* the usual padding the last one wrapped onto a second row. The items are tightened so they fit, and spread
|
||||
* across the row. As the window narrows they tighten further, then drop their icons, and only wrap in a very
|
||||
* narrow window. The clerk's bar (cashier-nav--clerk) has its own dropdowns and is left as it was.
|
||||
*/
|
||||
.cashier-nav:not(.cashier-nav--clerk) {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
padding: 4px 8px;
|
||||
|
||||
.cashier-nav__item {
|
||||
flex: 0 0 auto;
|
||||
gap: 4px;
|
||||
padding: 5px 8px;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
@media (width <= 1240px) {
|
||||
.cashier-nav__item {
|
||||
padding: 5px 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 1120px) {
|
||||
.cashier-nav__item fa-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 900px) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
|
||||
-12
@@ -135,18 +135,6 @@
|
||||
<mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
|
||||
<span>{{ 'labels.text.View Transaction' | translate }}</span>
|
||||
</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
|
||||
mat-menu-item
|
||||
class="account-action-button"
|
||||
|
||||
-12
@@ -40,18 +40,6 @@
|
||||
</button>
|
||||
</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 class="container">
|
||||
|
||||
+381
@@ -0,0 +1,381 @@
|
||||
<!--
|
||||
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 & 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>
|
||||
}
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
+351
@@ -0,0 +1,351 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
@@ -0,0 +1,468 @@
|
||||
<!--
|
||||
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>
|
||||
@@ -0,0 +1,488 @@
|
||||
/**
|
||||
* 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
+56
@@ -0,0 +1,56 @@
|
||||
<!--
|
||||
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>
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.dcd-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dcd-none {
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
/*
|
||||
* The figure the clerk quotes at the counter. Larger than the fields above it because it is the one
|
||||
* thing the customer is told, and it is shown with its basis so the clerk can say where it came from
|
||||
* rather than just naming a number.
|
||||
*/
|
||||
.dcd-amount {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
margin-top: 6px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 6px;
|
||||
background: rgb(15 118 110 / 8%);
|
||||
|
||||
&__figure {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #0f766e;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
&__basis {
|
||||
font-size: 0.8rem;
|
||||
color: rgb(0 0 0 / 60%);
|
||||
}
|
||||
}
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
|
||||
/**
|
||||
* Collecting for days other than today - either paid ahead, or owed from days gone by.
|
||||
*
|
||||
* Both are the same act from the counter's side: the customer is paying for a number of days, and
|
||||
* what that comes to is the scheme's business, not the clerk's. So the clerk picks days and the
|
||||
* amount follows. Typing an amount instead would let the daily figure be worked around a little at a
|
||||
* time, and would quote the customer something the scheme does not charge.
|
||||
*
|
||||
* The two differ only in how many days are on offer. Paying ahead is capped by the bank's allowance.
|
||||
* Paying arrears is capped by what is still inside the catch-up window - older instalments are gone,
|
||||
* and offering them would have the clerk asking for money the bank has already written off.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-day-collection-dialog',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatDialogModule,
|
||||
MatButtonModule,
|
||||
MatSelectModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule
|
||||
],
|
||||
templateUrl: './day-collection-dialog.component.html',
|
||||
styleUrls: ['./day-collection-dialog.component.scss']
|
||||
})
|
||||
export class DayCollectionDialogComponent {
|
||||
private dialogRef = inject(MatDialogRef<DayCollectionDialogComponent>);
|
||||
/** { mode: 'advance' | 'previous', parties: [] } - the agent's parties, as the screen already has them. */
|
||||
data = inject<any>(MAT_DIALOG_DATA);
|
||||
|
||||
partyCode = '';
|
||||
days: number | '' = '';
|
||||
|
||||
get isAdvance(): boolean {
|
||||
return this.data?.mode === 'advance';
|
||||
}
|
||||
|
||||
get title(): string {
|
||||
return this.isAdvance ? 'Collect in advance' : 'Collect previous days';
|
||||
}
|
||||
|
||||
get party(): any {
|
||||
return (this.data?.parties || []).find((p: any) => String(p.partyCode) === this.partyCode) || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The parties this can be used on.
|
||||
*
|
||||
* Paying ahead is offered to anyone. Paying arrears is offered only where there are arrears still
|
||||
* inside the window - on an account that is up to date there is nothing to collect for past days,
|
||||
* and listing it would invite an entry that is really an advance in disguise.
|
||||
*/
|
||||
get eligibleParties(): any[] {
|
||||
const parties = this.data?.parties || [];
|
||||
return this.isAdvance ? parties : parties.filter((p: any) => Number(p.recoverableAmount || 0) > 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* How many days may be picked. Five ahead, matching the bank's allowance and the server's own
|
||||
* check; for arrears, only what has not yet fallen out of the catch-up window.
|
||||
*/
|
||||
get dayOptions(): number[] {
|
||||
const daily = Number(this.party?.dailyDepositAmount || 0);
|
||||
if (!this.party || daily <= 0) {
|
||||
return [];
|
||||
}
|
||||
const limit = this.isAdvance ? 5 : Math.floor(Number(this.party.recoverableAmount || 0) / daily);
|
||||
return Array.from({ length: Math.max(0, limit) }, (_, index) => index + 1);
|
||||
}
|
||||
|
||||
get amount(): number {
|
||||
return Number(this.party?.dailyDepositAmount || 0) * Number(this.days || 0);
|
||||
}
|
||||
|
||||
/** Clearing the days when the party changes - a count valid for one account is not for another. */
|
||||
partyChanged(): void {
|
||||
this.days = '';
|
||||
}
|
||||
|
||||
get canAdd(): boolean {
|
||||
return !!this.partyCode && Number(this.days) > 0 && this.amount > 0;
|
||||
}
|
||||
|
||||
add(): void {
|
||||
this.dialogRef.close({
|
||||
partyCode: this.partyCode,
|
||||
days: Number(this.days),
|
||||
amount: this.amount,
|
||||
// Sent as days, not just an amount: the server recomputes what they come to and checks it
|
||||
// against this account, so the figure quoted here is the one that gets posted.
|
||||
advanceDays: this.isAdvance ? Number(this.days) : undefined,
|
||||
arrearsDays: this.isAdvance ? undefined : Number(this.days)
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<!--
|
||||
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="nd-head">
|
||||
<span class="nd-head__ic"><fa-icon icon="info-circle"></fa-icon></span>
|
||||
<h2 class="nd-head__title">{{ data.heading }}</h2>
|
||||
</div>
|
||||
|
||||
<mat-dialog-content>
|
||||
<p class="nd-message">{{ data.message }}</p>
|
||||
</mat-dialog-content>
|
||||
|
||||
<!-- One button, because there is nothing here to agree to or call off. -->
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-flat-button color="primary" mat-dialog-close>OK</button>
|
||||
</mat-dialog-actions>
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.nd-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 18px 24px 4px;
|
||||
|
||||
/*
|
||||
* Teal rather than the amber or red the platform's other dialogs use. Nothing has gone wrong here
|
||||
* and nothing is at risk - the clerk is being told a fact about the agent they picked, and a
|
||||
* warning colour would send them looking for a fault that is not there.
|
||||
*/
|
||||
&__ic {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
background: rgb(15 118 110 / 10%);
|
||||
color: #0f766e;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.nd-message {
|
||||
margin: 0;
|
||||
max-width: 44ch; /* stylelint-disable-line unit-allowed-list */
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.55;
|
||||
color: rgb(0 0 0 / 70%);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
|
||||
/**
|
||||
* Something the clerk needs told, with nothing to decide.
|
||||
*
|
||||
* The platform's confirmation dialog asks a question - Cancel or Confirm - and its buttons imply a
|
||||
* choice. Used for a plain statement it leaves the clerk hunting for what they are agreeing to, and
|
||||
* "Cancel" reads as though the thing being described could be undone. The error dialog has the right
|
||||
* single button but dresses the message in red, which turns "this agent has no parties" into a fault.
|
||||
*
|
||||
* So: one button, and the message stands on its own.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-notice-dialog',
|
||||
standalone: true,
|
||||
imports: [
|
||||
MatDialogModule,
|
||||
MatButtonModule,
|
||||
FaIconComponent
|
||||
],
|
||||
templateUrl: './notice-dialog.component.html',
|
||||
styleUrls: ['./notice-dialog.component.scss']
|
||||
})
|
||||
export class NoticeDialogComponent {
|
||||
/** { heading, message } */
|
||||
data = inject<any>(MAT_DIALOG_DATA);
|
||||
}
|
||||
@@ -0,0 +1,557 @@
|
||||
<!--
|
||||
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="dav-page">
|
||||
@if (isLoading) {
|
||||
<div class="dav-card dav-state">
|
||||
<mat-spinner diameter="32"></mat-spinner>
|
||||
<span>Loading account…</span>
|
||||
</div>
|
||||
} @else if (!account) {
|
||||
<div class="dav-card dav-state">
|
||||
<fa-icon icon="inbox" size="2x"></fa-icon>
|
||||
<span>DDS account not found</span>
|
||||
<button class="dav-btn" (click)="back()"><fa-icon icon="arrow-left"></fa-icon> DDS Accounts</button>
|
||||
</div>
|
||||
} @else {
|
||||
<!-- Banner, as the savings account page opens -->
|
||||
<div class="dav-banner">
|
||||
<div class="dav-banner__icon"><fa-icon icon="coins"></fa-icon></div>
|
||||
<div class="dav-banner__text">
|
||||
<span class="dav-pill" [ngClass]="'dav-pill--' + (account.status || '').toLowerCase()"
|
||||
>● {{ account.status }}</span
|
||||
>
|
||||
<h2 class="dav-banner__title">{{ account.subType }}</h2>
|
||||
<div class="dav-banner__meta">
|
||||
<span class="dav-banner__label">Account Number</span>
|
||||
<span class="dav-banner__value dav-mono">{{ account.accountNo }}</span>
|
||||
<span class="dav-banner__label">Client Name</span>
|
||||
<span class="dav-banner__value">{{ account.clientName || account.partyName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dav-banner__boxes">
|
||||
<div class="dav-box">
|
||||
<span class="dav-box__label">Current Balance</span>
|
||||
<span class="dav-box__value">₹{{ account.currentBalance || 0 | formatNumber }}</span>
|
||||
</div>
|
||||
<div class="dav-box">
|
||||
<span class="dav-box__label">Maturity Amount</span>
|
||||
<span class="dav-box__value">₹{{ account.maturityAmount || 0 | formatNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dav-banner__actions">
|
||||
<button class="dav-icon-btn" (click)="back()" matTooltip="Back to DDS Accounts">
|
||||
<fa-icon icon="arrow-left"></fa-icon>
|
||||
</button>
|
||||
<button class="dav-icon-btn" (click)="openInPartyMaster()" matTooltip="Open in DDS Party Master">
|
||||
<fa-icon icon="pen"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="dav-tabs">
|
||||
<button class="dav-tab" [class.dav-tab--on]="tab === 'general'" (click)="tab = 'general'">
|
||||
<fa-icon icon="info-circle"></fa-icon> General
|
||||
</button>
|
||||
<button class="dav-tab" [class.dav-tab--on]="tab === 'transactions'" (click)="tab = 'transactions'">
|
||||
<fa-icon icon="exchange-alt"></fa-icon> Transactions
|
||||
</button>
|
||||
<button class="dav-tab" [class.dav-tab--on]="tab === 'passbook'" (click)="tab = 'passbook'">
|
||||
<fa-icon icon="book"></fa-icon> Passbook
|
||||
</button>
|
||||
<button class="dav-tab" [class.dav-tab--on]="tab === 'nominees'" (click)="tab = 'nominees'">
|
||||
<fa-icon icon="user"></fa-icon> Nominees
|
||||
</button>
|
||||
@if (account.status === 'CLOSED') {
|
||||
<button class="dav-tab" [class.dav-tab--on]="tab === 'closure'" (click)="tab = 'closure'">
|
||||
<fa-icon icon="lock"></fa-icon> Closure
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Closure: how a closed account was closed and where its money went -->
|
||||
@if (tab === 'closure') {
|
||||
@if (!closure) {
|
||||
<div class="dav-card">
|
||||
<div class="dav-row"><span>Loading closure details…</span></div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="dav-columns">
|
||||
<div class="dav-column">
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> How It Closed</div>
|
||||
<div class="dav-row">
|
||||
<span>Type</span>
|
||||
<strong>
|
||||
{{ closureLabels[closure.closureType] || closure.closureType }}
|
||||
@if (closure.withinLockin) {
|
||||
<em class="dav-closure-tag">within lock-in</em>
|
||||
}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Closed On</span><strong>{{ closure.closeDate | date: 'dd MMMM yyyy' }}</strong>
|
||||
</div>
|
||||
@if (closure.paidOutBy) {
|
||||
<div class="dav-row">
|
||||
<span>Paid Out By</span><strong>{{ closure.paidOutBy }}</strong>
|
||||
</div>
|
||||
}
|
||||
<div class="dav-row">
|
||||
<span>Closed By</span><strong>{{ closure.closedBy || '—' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Approved By</span><strong>{{ closure.approvedBy || '—' }}</strong>
|
||||
</div>
|
||||
@if (closure.lockinOverrideReason) {
|
||||
<div class="dav-row">
|
||||
<span>Reason</span><strong>{{ closure.lockinOverrideReason }}</strong>
|
||||
</div>
|
||||
}
|
||||
@if (closure.shortfallBorneBy) {
|
||||
<div class="dav-row">
|
||||
<span>Cost Borne By</span>
|
||||
<strong>{{
|
||||
closure.shortfallBorneBy === 'AGENT' ? 'Agent — ' + closure.agentCode : 'Customer'
|
||||
}}</strong>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> The Money</div>
|
||||
<div class="dav-row">
|
||||
<span>Balance at Close</span><strong>₹{{ closure.balanceAtClose || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
@if (closure.interestRecovered > 0) {
|
||||
<div class="dav-row">
|
||||
<span>Interest Recovered</span
|
||||
><strong class="dav-dr">− ₹{{ closure.interestRecovered | formatNumber }}</strong>
|
||||
</div>
|
||||
}
|
||||
@if (closure.interestToppedUpByAgent > 0) {
|
||||
<div class="dav-row">
|
||||
<span>Interest Funded by Agent</span
|
||||
><strong class="dav-cr">+ ₹{{ closure.interestToppedUpByAgent | formatNumber }}</strong>
|
||||
</div>
|
||||
}
|
||||
<div class="dav-row dav-closure-total">
|
||||
<span>Paid Out</span><strong>₹{{ closure.paidOut || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
@if (closure.closureType === 'PREMATURE') {
|
||||
<div class="dav-row">
|
||||
<span>Agent Penalty ({{ closure.agentCode }})</span
|
||||
><strong>₹{{ closure.agentCommissionPenalty || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dav-column">
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> Where It Went</div>
|
||||
@if (closure.destination === 'OWN_ACCOUNT') {
|
||||
<div class="dav-row"><span>Paid Into</span><strong>Customer's own account</strong></div>
|
||||
<div class="dav-row">
|
||||
<span>Account</span><strong class="dav-mono">{{ closure.creditedAccount?.accountNo }}</strong>
|
||||
</div>
|
||||
@if (closure.creditedAccount?.productName) {
|
||||
<div class="dav-row">
|
||||
<span>Product</span><strong>{{ closure.creditedAccount.productName }}</strong>
|
||||
</div>
|
||||
}
|
||||
@if (closure.creditedAccount?.owner) {
|
||||
<div class="dav-row">
|
||||
<span>Holder</span><strong>{{ closure.creditedAccount.owner }}</strong>
|
||||
</div>
|
||||
}
|
||||
} @else if (closure.destination === 'SUNDRY') {
|
||||
<div class="dav-row"><span>Parked In</span><strong>Sundry (customer has no account here)</strong></div>
|
||||
<div class="dav-row">
|
||||
<span>GL Account</span
|
||||
><strong class="dav-mono">{{ closure.sundryGl?.glCode }} · {{ closure.sundryGl?.glName }}</strong>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="dav-row"><span>Paid Out</span><strong>Nothing - the balance was nil</strong></div>
|
||||
}
|
||||
@if (closure.voucherNo) {
|
||||
<div class="dav-row">
|
||||
<span>Voucher</span><strong class="dav-mono">{{ closure.voucherNo }}</strong>
|
||||
</div>
|
||||
}
|
||||
@if (closure.payoutDate) {
|
||||
<div class="dav-row">
|
||||
<span>Paid On</span><strong>{{ closure.payoutDate | date: 'dd MMMM yyyy' }}</strong>
|
||||
</div>
|
||||
}
|
||||
@if (closure.passbookNote) {
|
||||
<div class="dav-row">
|
||||
<span>Passbook Note</span><strong>{{ closure.passbookNote }}</strong>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (closure.ledgerEntries?.length) {
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> Ledger Entry</div>
|
||||
<div class="dav-row">
|
||||
<span>Transaction ID</span><strong class="dav-mono">{{ closure.ledgerTransactionId }}</strong>
|
||||
</div>
|
||||
@for (leg of closure.ledgerEntries; track $index) {
|
||||
<div class="dav-row">
|
||||
<span>{{ leg.glCode }} · {{ leg.glName }}</span>
|
||||
<strong [class.dav-dr]="leg.side === 'DR'" [class.dav-cr]="leg.side === 'CR'">
|
||||
{{ leg.side }} ₹{{ leg.amount | formatNumber }}
|
||||
</strong>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<!-- General -->
|
||||
@if (tab === 'general') {
|
||||
<div class="dav-columns">
|
||||
<div class="dav-column">
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> DDS Details</div>
|
||||
<div class="dav-row">
|
||||
<span>Account Number</span><strong class="dav-mono">{{ account.accountNo }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Party Code</span><strong>{{ account.partyCode }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Client Name</span><strong>{{ account.clientName }} ({{ account.clientId }})</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Agent</span><strong>{{ account.agentCode }} · {{ account.agentName }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Branch</span><strong>{{ account.officeName }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Product</span><strong>{{ account.subType }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Opened On</span><strong>{{ account.openingDate | date: 'dd MMMM yyyy' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Matures On</span><strong>{{ account.maturityDate | date: 'dd MMMM yyyy' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Daily Deposit</span><strong>₹{{ account.dailyDepositAmount || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Term</span><strong>{{ account.month }} months · {{ account.days }} days</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Interest Rate</span><strong>{{ account.interestRate }} %</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Currency</span><strong>Indian Rupee <em class="dav-mono">[INR]</em></strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> Performance History</div>
|
||||
<div class="dav-row">
|
||||
<span>Total Collected</span><strong class="dav-cr">₹{{ totalOf('PARTY_TRAN') | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Total Interest Earned</span><strong>₹{{ interestEarned | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Total Paid Out</span><strong class="dav-dr">₹{{ totalDebitsAll | formatNumber }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dav-column">
|
||||
<div class="dav-card">
|
||||
<div class="dav-card__head"><span class="dav-card__dot"></span> Account Summary</div>
|
||||
<div class="dav-row">
|
||||
<span>Collected to Date</span><strong>₹{{ account.collectedToDate || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Expected to Date</span><strong>₹{{ account.expectedToDate || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Standing</span>
|
||||
<strong>
|
||||
@if (account.advanceDays > 0) {
|
||||
{{ account.advanceDays }} days ahead
|
||||
} @else if (account.arrearsDays > 0) {
|
||||
<span class="dav-dr">{{ account.arrearsDays }} days behind</span>
|
||||
} @else {
|
||||
Up to date
|
||||
}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Instalments Due</span><strong>{{ account.instalmentsDue ?? 0 }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Interest Earned</span><strong>₹{{ interestEarned | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Interest Calculated, Not Posted</span
|
||||
><strong>₹{{ account.interestCalc || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row"><span>Interest Calculated Using</span><strong>Daily Balance</strong></div>
|
||||
<div class="dav-row"><span>Days in Year</span><strong>365 Days</strong></div>
|
||||
<div class="dav-row">
|
||||
<span>Last Interest Date</span
|
||||
><strong>{{ account.interestDate ? (account.interestDate | date: 'dd MMMM yyyy') : '—' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Last Transaction Date</span
|
||||
><strong>{{ lastTransactionDate ? (lastTransactionDate | date: 'dd MMMM yyyy') : '—' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Maturity Amount</span><strong>₹{{ account.maturityAmount || 0 | formatNumber }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Lien</span>
|
||||
<strong>{{ account.lien ? 'Yes — ₹' + (account.amountHeldUnderLien || 0) : 'No' }}</strong>
|
||||
</div>
|
||||
<div class="dav-row">
|
||||
<span>Freeze</span><strong>{{ account.freezeCode || 'Normal' }}</strong>
|
||||
</div>
|
||||
@if (account.closeDate) {
|
||||
<div class="dav-row">
|
||||
<span>Closed On</span><strong>{{ account.closeDate | date: 'dd MMMM yyyy' }}</strong>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Transactions -->
|
||||
@if (tab === 'transactions') {
|
||||
<div class="dav-card">
|
||||
<div class="dav-toolbar">
|
||||
<div class="dav-datepick">
|
||||
<span>From</span>
|
||||
<input type="date" [formControl]="fromDateControl" [max]="today" />
|
||||
</div>
|
||||
<div class="dav-datepick">
|
||||
<span>To</span>
|
||||
<input type="date" [formControl]="toDateControl" [max]="today" />
|
||||
</div>
|
||||
<button class="dav-btn" (click)="showToday()"><fa-icon icon="clock"></fa-icon> Today</button>
|
||||
@if (hasDateFilters) {
|
||||
<button class="dav-btn" (click)="clearDateFilters()"><fa-icon icon="times"></fa-icon> Clear</button>
|
||||
}
|
||||
<div class="dav-totals">
|
||||
<span class="dav-cr">Credits ₹{{ totalCredits | formatNumber }}</span>
|
||||
<span class="dav-dr">Debits ₹{{ totalDebits | formatNumber }}</span>
|
||||
</div>
|
||||
<button class="dav-btn dav-btn--primary" (click)="exportCsv()" [disabled]="shownTransactions.length === 0">
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (shownTransactions.length === 0) {
|
||||
<div class="dav-state">
|
||||
<fa-icon icon="inbox" size="2x"></fa-icon>
|
||||
<span>{{
|
||||
hasDateFilters
|
||||
? 'Nothing moved on this account in these dates'
|
||||
: 'Nothing has been credited to this account yet'
|
||||
}}</span>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="dav-table-wrap">
|
||||
<table class="dav-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>ID</th>
|
||||
<th>Transaction Date</th>
|
||||
<th>Transaction Type</th>
|
||||
<th>Voucher</th>
|
||||
<th>Description</th>
|
||||
<th class="dav-right">Debit</th>
|
||||
<th class="dav-right">Credit</th>
|
||||
<th class="dav-right">Balance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (txn of shownTransactions; track txn.id; let i = $index) {
|
||||
<tr>
|
||||
<td>{{ i + 1 }}</td>
|
||||
<td>{{ txn.id }}</td>
|
||||
<td>{{ txn.transactionDate | date: 'dd MMMM yyyy' }}</td>
|
||||
<td>{{ label(txn.transactionType) }}</td>
|
||||
<td class="dav-mono">{{ txn.voucherNo || '—' }}</td>
|
||||
<td class="dav-desc">{{ txn.description }}</td>
|
||||
<td class="dav-right">
|
||||
{{ txn.direction === 'DEBIT' ? '₹' + (txn.amount | formatNumber) : 'N/A' }}
|
||||
</td>
|
||||
<td class="dav-right">
|
||||
{{ txn.direction === 'CREDIT' ? '₹' + (txn.amount | formatNumber) : 'N/A' }}
|
||||
</td>
|
||||
<td class="dav-right">
|
||||
<strong>₹{{ txn.balanceAfterTransaction || 0 | formatNumber }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Passbook: the same entries oldest first, the way a passbook is written up, and printable -->
|
||||
@if (tab === 'passbook') {
|
||||
<div class="dav-card">
|
||||
<div class="dav-toolbar dav-noprint">
|
||||
<div class="dav-datepick">
|
||||
<span>From</span>
|
||||
<input type="date" [formControl]="fromDateControl" [max]="today" />
|
||||
</div>
|
||||
<div class="dav-datepick">
|
||||
<span>To</span>
|
||||
<input type="date" [formControl]="toDateControl" [max]="today" />
|
||||
</div>
|
||||
@if (hasDateFilters) {
|
||||
<button class="dav-btn" (click)="clearDateFilters()"><fa-icon icon="times"></fa-icon> Clear</button>
|
||||
}
|
||||
<button class="dav-btn dav-btn--primary dav-push" (click)="printPassbook()">
|
||||
<fa-icon icon="print"></fa-icon> Print
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dav-passbook" id="dds-passbook">
|
||||
<div class="dav-pb-head">
|
||||
<div>
|
||||
<div class="dav-pb-title">DDS Passbook</div>
|
||||
<div class="dav-pb-sub">{{ account.officeName }}</div>
|
||||
</div>
|
||||
<div class="dav-pb-grid">
|
||||
<span>Account No</span><strong class="dav-mono">{{ account.accountNo }}</strong> <span>Party Code</span
|
||||
><strong>{{ account.partyCode }}</strong> <span>Name</span
|
||||
><strong>{{ account.clientName || account.partyName }}</strong> <span>Product</span
|
||||
><strong>{{ account.subType }} · {{ account.interestRate }} %</strong> <span>Opened On</span
|
||||
><strong>{{ account.openingDate | date: 'dd/MM/yyyy' }}</strong> <span>Agent</span
|
||||
><strong>{{ account.agentCode }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (passbookEntries.length === 0) {
|
||||
<div class="dav-state">
|
||||
<span>{{ hasDateFilters ? 'No entries in these dates' : 'No entries yet' }}</span>
|
||||
</div>
|
||||
} @else {
|
||||
<table class="dav-table dav-pb-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Voucher</th>
|
||||
<th>Particulars</th>
|
||||
<th class="dav-right">Withdrawals</th>
|
||||
<th class="dav-right">Deposits</th>
|
||||
<th class="dav-right">Balance</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (txn of passbookEntries; track txn.id) {
|
||||
<tr>
|
||||
<td>{{ txn.transactionDate | date: 'dd/MM/yyyy' }}</td>
|
||||
<td class="dav-mono">{{ txn.voucherNo || '' }}</td>
|
||||
<td>
|
||||
{{ label(txn.transactionType) }}
|
||||
@if (txn.description) {
|
||||
<span class="dav-pb-note">{{ txn.description }}</span>
|
||||
}
|
||||
</td>
|
||||
<td class="dav-right">{{ txn.direction === 'DEBIT' ? (txn.amount | formatNumber) : '' }}</td>
|
||||
<td class="dav-right">{{ txn.direction === 'CREDIT' ? (txn.amount | formatNumber) : '' }}</td>
|
||||
<td class="dav-right">
|
||||
<strong>{{ txn.balanceAfterTransaction || 0 | formatNumber }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3"><strong>Total</strong></td>
|
||||
<td class="dav-right">
|
||||
<strong>{{ totalDebits | formatNumber }}</strong>
|
||||
</td>
|
||||
<td class="dav-right">
|
||||
<strong>{{ totalCredits | formatNumber }}</strong>
|
||||
</td>
|
||||
<td class="dav-right">
|
||||
<strong>{{ passbookClosingBalance | formatNumber }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Nominees -->
|
||||
@if (tab === 'nominees') {
|
||||
<div class="dav-card">
|
||||
@if (!account.nominees || account.nominees.length === 0) {
|
||||
<div class="dav-state">
|
||||
<fa-icon icon="user" size="2x"></fa-icon>
|
||||
<span>No nominee on this account</span>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="dav-table-wrap">
|
||||
<table class="dav-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Relation</th>
|
||||
<th>Gender</th>
|
||||
<th>Mobile</th>
|
||||
<th>Birth Date</th>
|
||||
<th>Nominated On</th>
|
||||
<th>Guardian</th>
|
||||
<th class="dav-right">{{ account.nomineeSplitMode === 'Sequence' ? 'Order' : 'Share %' }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (nominee of account.nominees; track nominee.id; let i = $index) {
|
||||
<tr>
|
||||
<td>{{ i + 1 }}</td>
|
||||
<td>
|
||||
<strong>{{ nominee.name }}</strong>
|
||||
</td>
|
||||
<td>{{ nominee.relation }}</td>
|
||||
<td>{{ nominee.gender }}</td>
|
||||
<td>{{ nominee.mobileNo || '—' }}</td>
|
||||
<td>{{ nominee.birthDate ? (nominee.birthDate | date: 'dd MMM yyyy') : '—' }}</td>
|
||||
<td>{{ nominee.nominationDate ? (nominee.nominationDate | date: 'dd MMM yyyy') : '—' }}</td>
|
||||
<td>{{ nominee.guardianName || '—' }}</td>
|
||||
<td class="dav-right">
|
||||
{{ account.nomineeSplitMode === 'Sequence' ? nominee.sequenceNo : (nominee.sharePercent ?? '—') }}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,459 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/* One DDS account's page, laid out the way the savings account page is: a banner, tabs, cards. */
|
||||
|
||||
.dav-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
|
||||
.dav-mono {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.dav-cr {
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.dav-dr {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.dav-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
/* ── Banner ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.dav-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
border-radius: 16px;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #1e3a8a 0%, #2d3fb4 55%, #5b47d6 100%);
|
||||
box-shadow: 0 8px 24px rgb(30 58 138 / 25%);
|
||||
}
|
||||
|
||||
.dav-banner__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 1.3rem;
|
||||
background: rgb(255 255 255 / 16%);
|
||||
border: 1px solid rgb(255 255 255 / 25%);
|
||||
}
|
||||
|
||||
.dav-banner__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dav-pill {
|
||||
align-self: flex-start;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
background: rgb(16 185 129 / 25%);
|
||||
color: #a7f3d0;
|
||||
border: 1px solid rgb(167 243 208 / 40%);
|
||||
}
|
||||
|
||||
.dav-pill--closed {
|
||||
background: rgb(148 163 184 / 25%);
|
||||
color: #e2e8f0;
|
||||
border-color: rgb(226 232 240 / 40%);
|
||||
}
|
||||
|
||||
.dav-banner__title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dav-banner__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 6px 12px;
|
||||
}
|
||||
|
||||
.dav-banner__label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(255 255 255 / 60%);
|
||||
}
|
||||
|
||||
.dav-banner__value {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dav-banner__boxes {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dav-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 10px 18px;
|
||||
border-radius: 12px;
|
||||
background: rgb(255 255 255 / 12%);
|
||||
border: 1px solid rgb(255 255 255 / 25%);
|
||||
}
|
||||
|
||||
.dav-box__label {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
}
|
||||
|
||||
.dav-box__value {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.dav-banner__actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dav-icon-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgb(255 255 255 / 35%);
|
||||
background: rgb(255 255 255 / 12%);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgb(255 255 255 / 22%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Tabs ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.dav-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
border: 1px solid rgb(0 0 0 / 7%);
|
||||
}
|
||||
|
||||
.dav-tab {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px 16px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
.dav-tab--on {
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #1d4ed8, #2563eb);
|
||||
box-shadow: 0 4px 12px rgb(37 99 235 / 30%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #1d4ed8, #2563eb);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Cards ────────────────────────────────────────────────────────────── */
|
||||
|
||||
.dav-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.dav-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dav-card {
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
border: 1px solid rgb(0 0 0 / 7%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dav-card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 20px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 7%);
|
||||
}
|
||||
|
||||
.dav-card__dot {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #2563eb, #1e40af);
|
||||
}
|
||||
|
||||
.dav-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px dashed rgb(0 0 0 / 7%);
|
||||
font-size: 0.92rem;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
strong {
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.dav-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 48px 16px;
|
||||
color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
/* ── Transactions ─────────────────────────────────────────────────────── */
|
||||
|
||||
.dav-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 14px 20px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 7%);
|
||||
}
|
||||
|
||||
.dav-datepick {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
span {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(0 0 0 / 15%);
|
||||
font: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.dav-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(0 0 0 / 15%);
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.dav-btn--primary {
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
background: linear-gradient(90deg, #1d4ed8, #2563eb);
|
||||
}
|
||||
|
||||
.dav-totals {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.dav-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.dav-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.92rem;
|
||||
|
||||
th {
|
||||
padding: 14px 16px;
|
||||
text-align: left;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: #475569;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 8%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 5%);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background: #f8fafc;
|
||||
}
|
||||
}
|
||||
|
||||
.dav-desc {
|
||||
max-width: 320px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
}
|
||||
|
||||
@media (width <= 720px) {
|
||||
.dav-page {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.dav-banner__boxes {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dav-tab {
|
||||
font-size: 0.85rem;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Passbook ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.dav-push {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.dav-passbook {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dav-pb-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px 32px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid #1e3a8a;
|
||||
}
|
||||
|
||||
.dav-pb-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
|
||||
.dav-pb-sub {
|
||||
font-size: 0.85rem;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
}
|
||||
|
||||
.dav-pb-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 4px 16px;
|
||||
font-size: 0.88rem;
|
||||
|
||||
span {
|
||||
color: rgb(0 0 0 / 55%);
|
||||
}
|
||||
}
|
||||
|
||||
.dav-pb-table {
|
||||
tfoot td {
|
||||
padding: 14px 16px;
|
||||
border-top: 2px solid rgb(0 0 0 / 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.dav-pb-note {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
/* Closure tab */
|
||||
.dav-closure-tag {
|
||||
margin-left: 8px;
|
||||
padding: 1px 8px;
|
||||
border-radius: 999px;
|
||||
background: #fff3e0;
|
||||
color: #e65100;
|
||||
font-size: 0.75rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.dav-closure-total {
|
||||
border-top: 1px solid rgb(0 0 0 / 10%);
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -0,0 +1,297 @@
|
||||
/**
|
||||
* 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 { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
||||
import { NgClass } from '@angular/common';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { forkJoin, of } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { FormatNumberPipe } from 'app/pipes/format-number.pipe';
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
|
||||
/** What each DDS transaction type is called on screen. */
|
||||
const TRANSACTION_LABELS: Record<string, string> = {
|
||||
PARTY_TRAN: 'Collection',
|
||||
INTEREST_POST: 'Interest',
|
||||
OD_INTEREST_POST: 'OD Interest',
|
||||
MATURITY_PAYOUT: 'Maturity Payout',
|
||||
PREMATURE_PAYOUT: 'Premature Payout',
|
||||
PREMATURE_INT_RECOVERY: 'Interest Recovered (Premature)',
|
||||
PREMATURE_AGENT_TOP_UP: 'Interest Funded by Agent',
|
||||
WITHDRAW_DEPOSITE: 'Transfer (Withdraw Deposite)',
|
||||
TRANSFER: 'Transfer'
|
||||
};
|
||||
|
||||
/**
|
||||
* One DDS account and everything that has moved on it, as the savings account page shows a savings
|
||||
* account: the account's terms and where it stands, then its transactions with the balance after
|
||||
* each, narrowed to a day or a range.
|
||||
*
|
||||
* Read-only. The account is changed from DDS Party Master; its money moves through collections, the
|
||||
* cashier and the batch runs.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-dds-account-view',
|
||||
templateUrl: './dds-account-view.component.html',
|
||||
styleUrls: ['./dds-account-view.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
ReactiveFormsModule,
|
||||
NgClass,
|
||||
FaIconComponent,
|
||||
MatTooltipModule,
|
||||
MatProgressSpinnerModule,
|
||||
FormatNumberPipe
|
||||
]
|
||||
})
|
||||
export class DdsAccountViewComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private organizationService = inject(OrganizationService);
|
||||
|
||||
isLoading = true;
|
||||
account: any = null;
|
||||
private transactions: any[] = [];
|
||||
|
||||
/** The page's tabs, as the savings account page has them - only those that apply to DDS. */
|
||||
tab: 'general' | 'transactions' | 'passbook' | 'nominees' | 'closure' = 'general';
|
||||
|
||||
/** How a closed account was closed - read only for closed accounts, for the Closure tab. */
|
||||
closure: any = null;
|
||||
|
||||
/** What each kind of closure is called on screen. */
|
||||
readonly closureLabels: Record<string, string> = {
|
||||
PREMATURE: 'Premature Close',
|
||||
MATURITY_PAYOUT_AND_CLOSE: 'Maturity Payout & Close',
|
||||
MATURITY_PAYOUT_THEN_CLOSE: 'Maturity Payout, then Closed',
|
||||
MATURITY_AUTO_CLOSE: 'Maturity Auto Close (night job)',
|
||||
CLOSED_NIL_BALANCE: 'Closed with nil balance'
|
||||
};
|
||||
|
||||
/** The passbook reads oldest first, as it is written up. */
|
||||
get passbookEntries(): any[] {
|
||||
return [...this.shownTransactions].reverse();
|
||||
}
|
||||
|
||||
/** The balance after the last entry shown. */
|
||||
get passbookClosingBalance(): number {
|
||||
const entries = this.passbookEntries;
|
||||
return entries.length > 0 ? Number(entries[entries.length - 1].balanceAfterTransaction || 0) : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prints the passbook alone. It is copied into a window of its own with only its own styles, so the
|
||||
* page's menus, banner and tabs do not come out on the paper.
|
||||
*/
|
||||
printPassbook(): void {
|
||||
const passbook = document.getElementById('dds-passbook');
|
||||
const popup = window.open('', '_blank', 'width=900,height=700');
|
||||
if (!passbook || !popup) {
|
||||
return;
|
||||
}
|
||||
popup.document.write(`<html><head><title>${this.account?.accountNo || 'DDS'} Passbook</title><style>
|
||||
body { font-family: Arial, sans-serif; margin: 24px; color: #111; }
|
||||
.dav-pb-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
|
||||
.dav-pb-title { font-size: 20px; font-weight: 700; }
|
||||
.dav-pb-sub { color: #555; }
|
||||
.dav-pb-grid { display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-size: 13px; }
|
||||
.dav-pb-grid span { color: #555; }
|
||||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
th, td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
|
||||
.dav-right { text-align: right; }
|
||||
.dav-pb-note { display: block; font-size: 11px; color: #555; }
|
||||
</style></head><body>${passbook.innerHTML}</body></html>`);
|
||||
popup.document.close();
|
||||
popup.focus();
|
||||
popup.print();
|
||||
}
|
||||
|
||||
fromDateControl = new FormControl('');
|
||||
toDateControl = new FormControl('');
|
||||
|
||||
readonly today = new Date().toISOString().split('T')[0];
|
||||
|
||||
ngOnInit(): void {
|
||||
const partyId = this.route.snapshot.paramMap.get('partyId');
|
||||
if (!partyId) {
|
||||
this.isLoading = false;
|
||||
return;
|
||||
}
|
||||
forkJoin({
|
||||
account: this.organizationService.getParty(partyId).pipe(catchError(() => of(null))),
|
||||
transactions: this.organizationService.getPartyTransactionsOfParty(partyId).pipe(catchError(() => of([])))
|
||||
}).subscribe(({ account, transactions }) => {
|
||||
this.account = account;
|
||||
if (account?.status === 'CLOSED') {
|
||||
this.organizationService.getPartyClosure(partyId).subscribe({
|
||||
next: (closure: any) => (this.closure = closure),
|
||||
error: () => (this.closure = null)
|
||||
});
|
||||
}
|
||||
// Newest first, and within a day the later entry first - the order a passbook is read back in.
|
||||
this.transactions = (Array.isArray(transactions) ? transactions : []).sort(
|
||||
(a: any, b: any) =>
|
||||
String(b.transactionDate).localeCompare(String(a.transactionDate)) || Number(b.id) - Number(a.id)
|
||||
);
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** The transactions in the chosen range - all of them when no range is set. */
|
||||
get shownTransactions(): any[] {
|
||||
const from = this.fromDateControl.value;
|
||||
const to = this.toDateControl.value;
|
||||
return this.transactions.filter((txn: any) => {
|
||||
const day = String(txn.transactionDate || '');
|
||||
if (from && day < String(from)) {
|
||||
return false;
|
||||
}
|
||||
if (to && day > String(to)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
get totalCredits(): number {
|
||||
return this.sumOf('CREDIT');
|
||||
}
|
||||
|
||||
get totalDebits(): number {
|
||||
return this.sumOf('DEBIT');
|
||||
}
|
||||
|
||||
private sumOf(direction: string): number {
|
||||
return this.shownTransactions
|
||||
.filter((txn: any) => txn.direction === direction)
|
||||
.reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
|
||||
}
|
||||
|
||||
/** Everything of one type ever credited, whatever the date filter says - for the summary cards. */
|
||||
totalOf(type: string): number {
|
||||
return this.transactions
|
||||
.filter((txn: any) => txn.transactionType === type && txn.direction === 'CREDIT')
|
||||
.reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
|
||||
}
|
||||
|
||||
/** Interest credited, less any taken back on an early closure. */
|
||||
get interestEarned(): number {
|
||||
const recovered = this.transactions
|
||||
.filter((txn: any) => txn.transactionType === 'PREMATURE_INT_RECOVERY')
|
||||
.reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
|
||||
return (
|
||||
this.totalOf('INTEREST_POST') +
|
||||
this.totalOf('OD_INTEREST_POST') +
|
||||
this.totalOf('PREMATURE_AGENT_TOP_UP') -
|
||||
recovered
|
||||
);
|
||||
}
|
||||
|
||||
/** Money that has left the account - payouts, withdrawals, transfers out. */
|
||||
get totalDebitsAll(): number {
|
||||
return this.transactions
|
||||
.filter((txn: any) => txn.direction === 'DEBIT' && txn.transactionType !== 'PREMATURE_INT_RECOVERY')
|
||||
.reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
|
||||
}
|
||||
|
||||
get lastTransactionDate(): string | null {
|
||||
return this.transactions.length > 0 ? this.transactions[0].transactionDate : null;
|
||||
}
|
||||
|
||||
/** The rows on screen, as a spreadsheet the branch can keep or send on. */
|
||||
exportCsv(): void {
|
||||
const header = [
|
||||
'#',
|
||||
'ID',
|
||||
'Transaction Date',
|
||||
'Transaction Type',
|
||||
'Voucher',
|
||||
'Description',
|
||||
'Account',
|
||||
'Debit',
|
||||
'Credit',
|
||||
'Balance'
|
||||
];
|
||||
const quote = (value: any) => `"${String(value ?? '').replace(/"/g, '""')}"`;
|
||||
const lines = this.shownTransactions.map((txn: any, index: number) =>
|
||||
[
|
||||
index + 1,
|
||||
txn.id,
|
||||
txn.transactionDate,
|
||||
this.label(txn.transactionType),
|
||||
txn.voucherNo,
|
||||
txn.description,
|
||||
txn.accountNo,
|
||||
txn.direction === 'DEBIT' ? txn.amount : '',
|
||||
txn.direction === 'CREDIT' ? txn.amount : '',
|
||||
txn.balanceAfterTransaction
|
||||
]
|
||||
.map(quote)
|
||||
.join(',')
|
||||
);
|
||||
const blob = new Blob(
|
||||
[[
|
||||
header.map(quote).join(','),
|
||||
...lines
|
||||
].join('\r\n')],
|
||||
{ type: 'text/csv;charset=utf-8' }
|
||||
);
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `${this.account?.accountNo || 'dds-account'}-transactions.csv`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(link.href);
|
||||
}
|
||||
|
||||
get hasDateFilters(): boolean {
|
||||
return !!(this.fromDateControl.value || this.toDateControl.value);
|
||||
}
|
||||
|
||||
showToday(): void {
|
||||
this.fromDateControl.setValue(this.today);
|
||||
this.toDateControl.setValue(this.today);
|
||||
}
|
||||
|
||||
clearDateFilters(): void {
|
||||
this.fromDateControl.setValue('');
|
||||
this.toDateControl.setValue('');
|
||||
}
|
||||
|
||||
label(type: string): string {
|
||||
return TRANSACTION_LABELS[type] || String(type || '').replace(/_/g, ' ');
|
||||
}
|
||||
|
||||
statusClass(): string {
|
||||
switch (this.account?.status) {
|
||||
case 'ACTIVE':
|
||||
return 'status--active';
|
||||
case 'CLOSED':
|
||||
return 'status--closed';
|
||||
default:
|
||||
return 'status--default';
|
||||
}
|
||||
}
|
||||
|
||||
back(): void {
|
||||
this.router.navigate(['/accounts/dds-accounts']);
|
||||
}
|
||||
|
||||
openInPartyMaster(): void {
|
||||
this.router.navigate([
|
||||
'/accounts/dds',
|
||||
this.account.id,
|
||||
'edit'
|
||||
]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="acl-page">
|
||||
<!-- Header -->
|
||||
<div class="acl-header accent--rd">
|
||||
<div class="acl-header__icon">
|
||||
<fa-icon icon="coins"></fa-icon>
|
||||
</div>
|
||||
<div class="acl-header__text">
|
||||
<h2 class="acl-header__title">DDS Accounts</h2>
|
||||
<span class="acl-header__count">
|
||||
@if (isLoading) {
|
||||
Loading...
|
||||
} @else {
|
||||
{{ allCount }} accounts · {{ activeCount }} active · {{ closedCount }} closed
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="acl-search-wrap">
|
||||
<div class="acl-search">
|
||||
<fa-icon icon="search" class="acl-search__icon"></fa-icon>
|
||||
<input
|
||||
[formControl]="searchControl"
|
||||
class="acl-search__input"
|
||||
[placeholder]="
|
||||
searchType === 'accountNo' ? 'Search by account number or party code…' : 'Search by client name…'
|
||||
"
|
||||
/>
|
||||
@if (searchControl.value) {
|
||||
<button class="acl-search__clear" (click)="clearSearch()">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<button
|
||||
class="acl-btn acl-btn--toggle"
|
||||
(click)="toggleSearchType()"
|
||||
[matTooltip]="'Switch to ' + (searchType === 'accountNo' ? 'client name' : 'account number') + ' search'"
|
||||
>
|
||||
<fa-icon icon="exchange-alt"></fa-icon>
|
||||
{{ searchType === 'accountNo' ? 'Acct No' : 'Client' }}
|
||||
</button>
|
||||
<button class="acl-btn acl-btn--icon" (click)="loadAccounts()" matTooltip="Refresh">
|
||||
<fa-icon icon="sync-alt"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Status: all accounts, only the open ones, or only the closed -->
|
||||
<div class="dds-status-filter" role="tablist">
|
||||
<button
|
||||
type="button"
|
||||
class="dds-status-filter__btn"
|
||||
[class.is-on]="statusFilter === 'ALL'"
|
||||
(click)="setStatusFilter('ALL')"
|
||||
>
|
||||
All <span class="dds-status-filter__count">{{ allCount }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="dds-status-filter__btn dds-status-filter__btn--active"
|
||||
[class.is-on]="statusFilter === 'ACTIVE'"
|
||||
(click)="setStatusFilter('ACTIVE')"
|
||||
>
|
||||
Active <span class="dds-status-filter__count">{{ activeCount }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="dds-status-filter__btn dds-status-filter__btn--closed"
|
||||
[class.is-on]="statusFilter === 'CLOSED'"
|
||||
(click)="setStatusFilter('CLOSED')"
|
||||
>
|
||||
Closed <span class="dds-status-filter__count">{{ closedCount }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Date Filters: by the day the account was opened -->
|
||||
<div class="acl-filters">
|
||||
<div class="acl-filters__group">
|
||||
<div class="acl-datepick">
|
||||
<span class="acl-datepick__label">Opened From</span>
|
||||
<input type="date" class="acl-datepick__input" [formControl]="fromDateControl" [max]="today" />
|
||||
</div>
|
||||
<div class="acl-filters__arrow">
|
||||
<fa-icon icon="arrow-right"></fa-icon>
|
||||
</div>
|
||||
<div class="acl-datepick">
|
||||
<span class="acl-datepick__label">To</span>
|
||||
<input type="date" class="acl-datepick__input" [formControl]="toDateControl" [max]="today" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acl-filters__sep"></div>
|
||||
|
||||
<div class="acl-datepick acl-datepick--ason">
|
||||
<span class="acl-datepick__label">
|
||||
<fa-icon icon="clock"></fa-icon>
|
||||
As On Date
|
||||
</span>
|
||||
<input type="date" class="acl-datepick__input" [formControl]="asOnDateControl" [max]="today" />
|
||||
</div>
|
||||
|
||||
@if (hasDateFilters) {
|
||||
<button class="acl-filters__clear" (click)="clearDateFilters()">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
Clear
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="acl-card">
|
||||
@if (isLoading) {
|
||||
<div class="acl-state acl-state--loading">
|
||||
<mat-spinner diameter="32"></mat-spinner>
|
||||
<span>Loading accounts…</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!isLoading && rows.length === 0) {
|
||||
<div class="acl-state acl-state--empty">
|
||||
<div class="acl-state__icon">
|
||||
<fa-icon icon="inbox"></fa-icon>
|
||||
</div>
|
||||
<p class="acl-state__title">No DDS accounts found</p>
|
||||
<p class="acl-state__sub">Try adjusting your search</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!isLoading && rows.length > 0) {
|
||||
<div class="acl-table-wrap">
|
||||
<table mat-table [dataSource]="rows" class="acl-table">
|
||||
<ng-container matColumnDef="accountNo">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th">Account No</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td">
|
||||
<span class="acl-acct-no">{{ row.accountNo }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="depositType">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Type</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
|
||||
<span class="acl-type-badge dtype--rd">DDS</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="clientName">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th">Client</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td">
|
||||
<div class="acl-client">
|
||||
<div class="acl-client__avatar">{{ (row.clientName || row.partyName || '?')[0] }}</div>
|
||||
<span class="acl-client__name">{{ row.clientName || row.partyName }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="productName">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th">Product</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td">
|
||||
<span class="acl-product">{{ row.subType }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="balance">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--right">Balance</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--right">
|
||||
<span class="acl-balance">₹ {{ row.currentBalance || 0 | formatNumber }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Status</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
|
||||
<span class="acl-status" [ngClass]="getStatusClass(row)">{{ row.status }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Actions</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
|
||||
<button class="acl-view-btn" (click)="$event.stopPropagation(); viewAccount(row)" matTooltip="View">
|
||||
<fa-icon icon="eye"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns" class="acl-header-row"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="acl-row" (click)="viewAccount(row)"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<mat-paginator
|
||||
[length]="totalRecords"
|
||||
[pageSize]="pageSize"
|
||||
[pageIndex]="pageIndex"
|
||||
[pageSizeOptions]="[10, 20, 50, 100]"
|
||||
(page)="onPageChange($event)"
|
||||
class="acl-paginator"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,56 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
/* All / Active / Closed - which DDS accounts the list shows. */
|
||||
.dds-status-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 0 0 12px;
|
||||
|
||||
&__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 14px;
|
||||
border: 1px solid rgb(0 0 0 / 12%);
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: rgb(0 0 0 / 70%);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-on {
|
||||
border-color: #1565c0;
|
||||
background: #e3f2fd;
|
||||
color: #0d47a1;
|
||||
}
|
||||
|
||||
&--active.is-on {
|
||||
border-color: #2e7d32;
|
||||
background: #e8f5e9;
|
||||
color: #1b5e20;
|
||||
}
|
||||
|
||||
&--closed.is-on {
|
||||
border-color: #c62828;
|
||||
background: #ffebee;
|
||||
color: #b71c1c;
|
||||
}
|
||||
}
|
||||
|
||||
&__count {
|
||||
min-width: 22px;
|
||||
padding: 0 6px;
|
||||
border-radius: 999px;
|
||||
background: rgb(0 0 0 / 8%);
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
/**
|
||||
* 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, OnDestroy, OnInit, inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
||||
import { NgClass } from '@angular/common';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import {
|
||||
MatCell,
|
||||
MatCellDef,
|
||||
MatColumnDef,
|
||||
MatHeaderCell,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderRow,
|
||||
MatHeaderRowDef,
|
||||
MatRow,
|
||||
MatRowDef,
|
||||
MatTable
|
||||
} from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { Subject, merge } from 'rxjs';
|
||||
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { FormatNumberPipe } from 'app/pipes/format-number.pipe';
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
|
||||
/**
|
||||
* The DDS accounts, listed the way Savings Accounts lists savings: account number, client, product,
|
||||
* balance and status, searched by account number or client and narrowed by opening date. Each opens
|
||||
* onto the account's own page and its transactions.
|
||||
*
|
||||
* Read-only. Accounts are opened and changed from DDS Party Master; money moves through collections,
|
||||
* the cashier and the batch runs.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-dds-accounts',
|
||||
templateUrl: './dds-accounts.component.html',
|
||||
// The Savings Accounts list's own look, so the two screens read as one family.
|
||||
styleUrls: [
|
||||
'../../accounts/accounts-list/accounts-list.component.scss',
|
||||
'./dds-accounts.component.scss'
|
||||
],
|
||||
standalone: true,
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
ReactiveFormsModule,
|
||||
NgClass,
|
||||
FaIconComponent,
|
||||
MatTable,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
MatCellDef,
|
||||
MatCell,
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow,
|
||||
MatPaginator,
|
||||
MatTooltipModule,
|
||||
MatProgressSpinnerModule,
|
||||
FormatNumberPipe
|
||||
]
|
||||
})
|
||||
export class DdsAccountsComponent implements OnInit, OnDestroy {
|
||||
private organizationService = inject(OrganizationService);
|
||||
private router = inject(Router);
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
displayedColumns = [
|
||||
'accountNo',
|
||||
'depositType',
|
||||
'clientName',
|
||||
'productName',
|
||||
'balance',
|
||||
'status',
|
||||
'actions'
|
||||
];
|
||||
|
||||
/** Every DDS account, fetched once; search, dates and paging work on this. */
|
||||
private allAccounts: any[] = [];
|
||||
/** The accounts matching the search and dates, whatever their status - what the status counts read. */
|
||||
private beforeStatus: any[] = [];
|
||||
/** The accounts matching the search, dates and status, before paging. */
|
||||
private matching: any[] = [];
|
||||
|
||||
/** Which accounts are shown: all of them, only the open ones, or only the closed. */
|
||||
statusFilter: 'ALL' | 'ACTIVE' | 'CLOSED' = 'ALL';
|
||||
/** The page on screen. */
|
||||
rows: any[] = [];
|
||||
|
||||
pageSize = 20;
|
||||
pageIndex = 0;
|
||||
isLoading = false;
|
||||
|
||||
searchControl = new FormControl('');
|
||||
searchType: 'accountNo' | 'clientName' = 'accountNo';
|
||||
fromDateControl = new FormControl('');
|
||||
toDateControl = new FormControl('');
|
||||
asOnDateControl = new FormControl('');
|
||||
|
||||
readonly today = new Date().toISOString().split('T')[0];
|
||||
|
||||
get totalRecords(): number {
|
||||
return this.matching.length;
|
||||
}
|
||||
|
||||
get activeCount(): number {
|
||||
return this.beforeStatus.filter((account) => account.status === 'ACTIVE').length;
|
||||
}
|
||||
|
||||
get closedCount(): number {
|
||||
return this.beforeStatus.filter((account) => account.status === 'CLOSED').length;
|
||||
}
|
||||
|
||||
get allCount(): number {
|
||||
return this.beforeStatus.length;
|
||||
}
|
||||
|
||||
setStatusFilter(status: 'ALL' | 'ACTIVE' | 'CLOSED'): void {
|
||||
this.statusFilter = status;
|
||||
this.pageIndex = 0;
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
get hasDateFilters(): boolean {
|
||||
return !!((this.fromDateControl.value && this.toDateControl.value) || this.asOnDateControl.value);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadAccounts();
|
||||
|
||||
this.searchControl.valueChanges
|
||||
.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
this.pageIndex = 0;
|
||||
this.applyFilters();
|
||||
});
|
||||
merge(this.fromDateControl.valueChanges, this.toDateControl.valueChanges, this.asOnDateControl.valueChanges)
|
||||
.pipe(debounceTime(300), takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
this.pageIndex = 0;
|
||||
this.applyFilters();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
loadAccounts(): void {
|
||||
this.isLoading = true;
|
||||
this.organizationService
|
||||
.getParties()
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (parties: any) => {
|
||||
// Newest first, as the savings list shows them.
|
||||
this.allAccounts = (Array.isArray(parties) ? parties : parties?.pageItems || []).sort(
|
||||
(a: any, b: any) => Number(b.id) - Number(a.id)
|
||||
);
|
||||
this.isLoading = false;
|
||||
this.applyFilters();
|
||||
},
|
||||
error: () => {
|
||||
this.allAccounts = [];
|
||||
this.isLoading = false;
|
||||
this.applyFilters();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Search by account number or client, and by the day the account was opened. */
|
||||
private applyFilters(): void {
|
||||
const term = String(this.searchControl.value || '')
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
const fromVal = this.fromDateControl.value;
|
||||
const toVal = this.toDateControl.value;
|
||||
const bothDates = !!(fromVal && toVal);
|
||||
const asOn = this.asOnDateControl.value;
|
||||
|
||||
this.beforeStatus = this.allAccounts.filter((account: any) => {
|
||||
if (term) {
|
||||
const haystack =
|
||||
this.searchType === 'accountNo'
|
||||
? `${account.accountNo || ''} ${account.partyCode || ''}`
|
||||
: `${account.clientName || ''} ${account.partyName || ''}`;
|
||||
if (!haystack.toLowerCase().includes(term)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const opened = String(account.openingDate || '');
|
||||
if (bothDates && opened && (opened < String(fromVal) || opened > String(toVal))) {
|
||||
return false;
|
||||
}
|
||||
// As on a date: the accounts that had been opened by then.
|
||||
if (asOn && opened && opened > String(asOn)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.matching =
|
||||
this.statusFilter === 'ALL'
|
||||
? this.beforeStatus
|
||||
: this.beforeStatus.filter((account: any) => account.status === this.statusFilter);
|
||||
this.showPage();
|
||||
}
|
||||
|
||||
private showPage(): void {
|
||||
const start = this.pageIndex * this.pageSize;
|
||||
this.rows = this.matching.slice(start, start + this.pageSize);
|
||||
}
|
||||
|
||||
onPageChange(event: PageEvent): void {
|
||||
this.pageIndex = event.pageIndex;
|
||||
this.pageSize = event.pageSize;
|
||||
this.showPage();
|
||||
}
|
||||
|
||||
toggleSearchType(): void {
|
||||
this.searchType = this.searchType === 'accountNo' ? 'clientName' : 'accountNo';
|
||||
this.pageIndex = 0;
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
clearSearch(): void {
|
||||
this.searchControl.setValue('');
|
||||
}
|
||||
|
||||
clearDateFilters(): void {
|
||||
this.fromDateControl.setValue('', { emitEvent: false });
|
||||
this.toDateControl.setValue('', { emitEvent: false });
|
||||
this.asOnDateControl.setValue('', { emitEvent: false });
|
||||
this.pageIndex = 0;
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
viewAccount(account: any): void {
|
||||
this.router.navigate([
|
||||
'/accounts/dds-accounts',
|
||||
account.id
|
||||
]);
|
||||
}
|
||||
|
||||
getStatusClass(account: any): string {
|
||||
switch (account?.status) {
|
||||
case 'ACTIVE':
|
||||
return 'status--active';
|
||||
case 'CLOSED':
|
||||
return 'status--closed';
|
||||
default:
|
||||
return 'status--default';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* 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 { OrganizationService } from 'app/organization/organization.service';
|
||||
import { AlertService } from 'app/core/alert/alert.service';
|
||||
|
||||
/**
|
||||
* Whether the server held a DDS entry for a checker rather than carrying it out. The reply then
|
||||
* names the entry (commandId) and asks for the work to be rolled back, and carries no result of its own.
|
||||
*/
|
||||
export function heldForApproval(response: any): boolean {
|
||||
return !!response?.rollbackTransaction || (!!response?.commandId && response?.resourceId == null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Tells the clerk their entry went to a checker - with the voucher it will move under - instead of
|
||||
* saying it was done. Nothing has moved yet, and a message that read as though it had would send them
|
||||
* looking for money that is still waiting on a manager.
|
||||
*/
|
||||
export function announceHeldForApproval(
|
||||
response: any,
|
||||
what: string,
|
||||
organizationService: OrganizationService,
|
||||
alertService: AlertService
|
||||
): void {
|
||||
const say = (voucherNo?: string) =>
|
||||
alertService.alert({
|
||||
type: 'Sent for Approval',
|
||||
message:
|
||||
`${what} sent for approval${voucherNo ? ' under voucher ' + voucherNo : ''}. ` +
|
||||
'It takes effect once a checker approves it in Approval Center › DDS Approvals.'
|
||||
});
|
||||
if (!response?.commandId) {
|
||||
say();
|
||||
return;
|
||||
}
|
||||
organizationService.getDdsApproval(response.commandId).subscribe({
|
||||
next: (entry: any) => say(entry?.voucherNo),
|
||||
error: () => say()
|
||||
});
|
||||
}
|
||||
+265
@@ -0,0 +1,265 @@
|
||||
<!--
|
||||
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 as Disbursement & Transfers reviews its requests, and styled by the same sheet. -->
|
||||
<div class="dri dri--dialog">
|
||||
<nav class="cashier-nav cashier-nav--clerk">
|
||||
<span class="dri-header-title">DDS {{ entry.type }} Review</span>
|
||||
<span class="cashier-nav__esc-hint" (click)="close()">✕ Close</span>
|
||||
</nav>
|
||||
|
||||
@if (loading) {
|
||||
<div class="dri-loading">
|
||||
<mat-icon class="dri-loading__icon">hourglass_empty</mat-icon>
|
||||
<span>Loading entry…</span>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="dri-body">
|
||||
<!-- Header card: the voucher it moves under, its status, who made it and when -->
|
||||
<div class="dri-card dri-card--header">
|
||||
<div class="dri-card-header">
|
||||
<div class="dri-card-header__left">
|
||||
<span class="dri-voucher">{{ voucherNo || '—' }}</span>
|
||||
<span class="dri-status" [ngClass]="statusClass(entry.status)">
|
||||
{{ entry.status }}{{ entry.voucherCancelled ? ' · VOUCHER CANCELLED' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="dri-card-header__meta">
|
||||
<span class="dri-meta-item">
|
||||
<mat-icon>person</mat-icon>
|
||||
{{ entry.makerName || entry.maker }} ({{ entry.maker }})
|
||||
</span>
|
||||
<span class="dri-meta-item">
|
||||
<mat-icon>schedule</mat-icon>
|
||||
{{ formatDateTime(entry.madeOn) }}
|
||||
</span>
|
||||
@if (entry.status !== 'PENDING' && entry.checker) {
|
||||
<span class="dri-meta-item">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
Actioned by: {{ entry.checkerName || entry.checker }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="dri-card">
|
||||
<div class="dri-section-title">
|
||||
<mat-icon>swap_horiz</mat-icon>
|
||||
{{ entry.type }} Summary
|
||||
</div>
|
||||
<div class="dri-detail-grid">
|
||||
<div class="dri-detail-item">
|
||||
<span class="dri-detail-label">Total Amount</span>
|
||||
<span class="dri-detail-value dri-amount">
|
||||
{{ entry.amount !== null && entry.amount !== undefined ? '₹' + (entry.amount | number: '1.2-2') : '—' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="dri-detail-item">
|
||||
<span class="dri-detail-label">DR Accounts</span>
|
||||
<span class="dri-detail-value"
|
||||
>{{ debitLines.length }} account{{ debitLines.length !== 1 ? 's' : '' }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="dri-detail-item">
|
||||
<span class="dri-detail-label">CR Accounts</span>
|
||||
<span class="dri-detail-value"
|
||||
>{{ creditLines.length }} account{{ creditLines.length !== 1 ? 's' : '' }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="dri-detail-item dri-detail-item--full">
|
||||
<span class="dri-detail-label">Details</span>
|
||||
<span class="dri-detail-value">{{ entry.details || '—' }}</span>
|
||||
</div>
|
||||
@if (detail?.description) {
|
||||
<div class="dri-detail-item dri-detail-item--full">
|
||||
<span class="dri-detail-label">Description</span>
|
||||
<span class="dri-detail-value">{{ detail.description }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Debit entries -->
|
||||
@if (debitLines.length) {
|
||||
<div class="dri-card">
|
||||
<div class="dri-section-title">
|
||||
<mat-icon>arrow_upward</mat-icon>
|
||||
Debit Entries ({{ debitLines.length }} account{{ debitLines.length !== 1 ? 's' : '' }} — funds out)
|
||||
</div>
|
||||
<table class="dri-cr-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Account No</th>
|
||||
<th>Account Name</th>
|
||||
<th>Type</th>
|
||||
<th class="num">Amount (DR)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (line of debitLines; track $index; let i = $index) {
|
||||
<tr>
|
||||
<td class="dri-cr-idx">{{ i + 1 }}</td>
|
||||
<td class="cell-mono">{{ line.accountNo || '—' }}</td>
|
||||
<td>{{ line.accountName || '—' }}</td>
|
||||
<td>
|
||||
<span class="dri-type-badge">{{ line.type || '—' }}</span>
|
||||
</td>
|
||||
<td class="num dri-cr-amount">₹{{ line.amount | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
}
|
||||
<tr class="dri-cr-total-row">
|
||||
<td colspan="4" class="dri-cr-total-label">Total Debit</td>
|
||||
<td class="num dri-cr-total-amount">₹{{ total(debitLines) | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Credit entries -->
|
||||
@if (creditLines.length) {
|
||||
<div class="dri-card">
|
||||
<div class="dri-section-title">
|
||||
<mat-icon>arrow_downward</mat-icon>
|
||||
Credit Entries ({{ creditLines.length }} account{{ creditLines.length !== 1 ? 's' : '' }} — funds in)
|
||||
</div>
|
||||
<table class="dri-cr-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Account No</th>
|
||||
<th>Account Name</th>
|
||||
<th>Type</th>
|
||||
<th class="num">Amount (CR)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (line of creditLines; track $index; let i = $index) {
|
||||
<tr>
|
||||
<td class="dri-cr-idx">{{ i + 1 }}</td>
|
||||
<td class="cell-mono">{{ line.accountNo || '—' }}</td>
|
||||
<td>{{ line.accountName || '—' }}</td>
|
||||
<td>
|
||||
<span class="dri-type-badge">{{ line.type || '—' }}</span>
|
||||
</td>
|
||||
<td class="num dri-cr-amount">₹{{ line.amount | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
}
|
||||
<tr class="dri-cr-total-row">
|
||||
<td colspan="4" class="dri-cr-total-label">Total Credit</td>
|
||||
<td class="num dri-cr-total-amount">₹{{ total(creditLines) | number: '1.2-2' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (entry.status === 'PENDING' && isMine && !done) {
|
||||
<div class="dri-card dri-card--processing">
|
||||
<div class="dri-section-title">
|
||||
<mat-icon>info</mat-icon>
|
||||
Your own entry
|
||||
</div>
|
||||
<p class="dri-processing-text">
|
||||
You made this entry, so another user with checker rights has to approve or reject it.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (entry.status === 'REJECTED') {
|
||||
<div class="dri-card dri-card--rejected">
|
||||
<div class="dri-section-title">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
Rejected
|
||||
</div>
|
||||
<p class="dri-rejection-text">
|
||||
Nothing was done{{ voucherNo ? '. Voucher ' + voucherNo + ' is cancelled and will not be used' : '' }}.
|
||||
</p>
|
||||
@if (entry.checker) {
|
||||
<div class="dri-meta-item" style="margin-top: 8px">
|
||||
<mat-icon>manage_accounts</mat-icon>
|
||||
{{ entry.checker }}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (entry.status === 'APPROVED') {
|
||||
<div class="dri-card dri-card--approved">
|
||||
<div class="dri-section-title">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
Approved and carried out
|
||||
</div>
|
||||
<p class="dri-txn-refs cell-mono">
|
||||
{{
|
||||
voucherNo
|
||||
? 'Voucher ' + voucherNo
|
||||
: entry.entity === 'DDSBATCH'
|
||||
? 'Posting is running - refresh for its voucher'
|
||||
: '—'
|
||||
}}
|
||||
</p>
|
||||
<div class="dri-meta-item" style="margin-top: 8px">
|
||||
<mat-icon>manage_accounts</mat-icon>
|
||||
Approved by: {{ entry.checker || '—' }}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (error) {
|
||||
<div class="dri-card dri-card--failed">
|
||||
<div class="dri-section-title">
|
||||
<mat-icon>error</mat-icon>
|
||||
Could not complete
|
||||
</div>
|
||||
<p class="dri-rejection-text">{{ error }}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (entry.status === 'PENDING' && !done) {
|
||||
<div class="dri-actions">
|
||||
@if (!confirmReject) {
|
||||
<button type="button" class="dri-btn dri-btn--approve" [disabled]="!canAct" (click)="act('approve')">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
{{ working ? 'Processing…' : 'Approve ' + entry.type }}
|
||||
</button>
|
||||
<button type="button" class="dri-btn dri-btn--reject" [disabled]="!canAct" (click)="confirmReject = true">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
Reject
|
||||
</button>
|
||||
} @else {
|
||||
<div class="dri-reject-form">
|
||||
<label class="dri-reject-label">
|
||||
Reject this entry? Nothing will be done{{
|
||||
voucherNo ? ' and voucher ' + voucherNo + ' will be cancelled' : ''
|
||||
}}.
|
||||
</label>
|
||||
<div class="dri-reject-actions">
|
||||
<button type="button" class="dri-btn dri-btn--reject" [disabled]="!canAct" (click)="act('reject')">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
{{ working ? 'Processing…' : 'Confirm Rejection' }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="dri-btn dri-btn--ghost"
|
||||
[disabled]="working"
|
||||
(click)="confirmReject = false"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* 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 { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
|
||||
/**
|
||||
* One DDS entry, laid out the way Disbursement & Transfers reviews a request - voucher and status on
|
||||
* top, who made it and when, then the debit and credit entries it moves - and styled by the same
|
||||
* sheet, so a checker reads both queues the same way.
|
||||
*
|
||||
* The checker approves it, which carries it out under the voucher numbered when it was sent, or
|
||||
* rejects it, which leaves nothing done and cancels that number. Neither is offered to the user who
|
||||
* made the entry, and the server refuses it as well.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-dds-approval-review',
|
||||
templateUrl: './dds-approval-review.component.html',
|
||||
styleUrls: ['../../../clerk/disbursement-review/disbursement-review.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatDialogModule,
|
||||
MatIconModule
|
||||
]
|
||||
})
|
||||
export class DdsApprovalReviewComponent implements OnInit {
|
||||
private organizationService = inject(OrganizationService);
|
||||
private dialogRef = inject(MatDialogRef<DdsApprovalReviewComponent>);
|
||||
data = inject<any>(MAT_DIALOG_DATA);
|
||||
|
||||
entry: any = this.data.entry;
|
||||
/** The entry in full, with the debit and credit sides it moves. */
|
||||
detail: any = null;
|
||||
loading = true;
|
||||
working = false;
|
||||
confirmReject = false;
|
||||
done = false;
|
||||
error = '';
|
||||
/** Set by an approval, in case the list row did not carry the number yet. */
|
||||
approvedVoucher = '';
|
||||
|
||||
ngOnInit(): void {
|
||||
this.load();
|
||||
}
|
||||
|
||||
private load(): void {
|
||||
this.organizationService.getDdsApproval(this.entry.id).subscribe({
|
||||
next: (detail: any) => {
|
||||
this.detail = detail;
|
||||
this.entry = { ...this.entry, ...detail };
|
||||
this.loading = false;
|
||||
},
|
||||
error: () => (this.loading = false)
|
||||
});
|
||||
}
|
||||
|
||||
get voucherNo(): string {
|
||||
return this.approvedVoucher || this.entry?.voucherNo || '';
|
||||
}
|
||||
|
||||
get debitLines(): any[] {
|
||||
return (this.detail?.lines || []).filter((line: any) => line.side === 'DR');
|
||||
}
|
||||
|
||||
get creditLines(): any[] {
|
||||
return (this.detail?.lines || []).filter((line: any) => line.side === 'CR');
|
||||
}
|
||||
|
||||
total(lines: any[]): number {
|
||||
return lines.reduce((sum: number, line: any) => sum + Number(line.amount || 0), 0);
|
||||
}
|
||||
|
||||
get isMine(): boolean {
|
||||
return !!this.data.currentUserId && Number(this.entry.makerId) === Number(this.data.currentUserId);
|
||||
}
|
||||
|
||||
get canAct(): boolean {
|
||||
return this.entry.status === 'PENDING' && !this.isMine && !this.done && !this.working;
|
||||
}
|
||||
|
||||
statusClass(status: string): string {
|
||||
const map: Record<string, string> = {
|
||||
PENDING: 'dri-status--pending',
|
||||
APPROVED: 'dri-status--approved',
|
||||
REJECTED: 'dri-status--rejected'
|
||||
};
|
||||
return map[status] ?? '';
|
||||
}
|
||||
|
||||
act(command: 'approve' | 'reject'): void {
|
||||
this.working = true;
|
||||
this.error = '';
|
||||
this.organizationService.actOnDdsApproval(this.entry.id, command).subscribe({
|
||||
next: (result: any) => {
|
||||
this.working = false;
|
||||
this.done = true;
|
||||
this.approvedVoucher = result?.voucherNo || '';
|
||||
this.entry = {
|
||||
...this.entry,
|
||||
status: command === 'approve' ? 'APPROVED' : 'REJECTED',
|
||||
voucherCancelled: command === 'reject' && !!this.voucherNo
|
||||
};
|
||||
// The approved entry's sides are now the voucher's own lines.
|
||||
this.load();
|
||||
},
|
||||
error: (err: any) => {
|
||||
this.working = false;
|
||||
const body = err?.error;
|
||||
this.error =
|
||||
body?.errors?.[0]?.defaultUserMessage ||
|
||||
body?.defaultUserMessage ||
|
||||
body?.developerMessage ||
|
||||
'Could not complete this.';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** The same form Disbursement & Transfers prints its times in: 29 Sept 2026, 01:25 pm. */
|
||||
formatDateTime(val: any): string {
|
||||
if (!val) {
|
||||
return '—';
|
||||
}
|
||||
const d = new Date(String(val).replace(' ', 'T'));
|
||||
return isNaN(d.getTime())
|
||||
? String(val)
|
||||
: d.toLocaleString('en-IN', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
close(): void {
|
||||
this.dialogRef.close(this.done);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
<!--
|
||||
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 wri-tab">
|
||||
<div class="wri-action-bar">
|
||||
<div class="wri-action-bar__left">
|
||||
<mat-icon class="wri-action-bar__icon">savings</mat-icon>
|
||||
<div>
|
||||
<div class="wri-action-bar__title">DDS Approvals</div>
|
||||
<div class="wri-action-bar__sub">
|
||||
Review, approve or reject DDS entries - transfers, payouts, early closures, receipts applied and postings.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wri-filter-bar">
|
||||
<select class="wri-filter-select" [(ngModel)]="filterStatus" (change)="onFilterChange()">
|
||||
@for (opt of statusOptions; track opt.value) {
|
||||
<option [value]="opt.value">{{ opt.label }}</option>
|
||||
}
|
||||
</select>
|
||||
|
||||
<span class="wri-fb-sep"></span>
|
||||
|
||||
<div class="wri-presets">
|
||||
@for (p of datePresets; track p.key) {
|
||||
<button
|
||||
type="button"
|
||||
class="wri-preset-chip"
|
||||
[class.wri-preset-chip--active]="activePreset === p.key"
|
||||
(click)="applyPreset(p.key)"
|
||||
>
|
||||
{{ p.label }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<span class="wri-fb-sep"></span>
|
||||
|
||||
<div class="wri-date-range">
|
||||
<div class="wri-date-box">
|
||||
<span class="wri-date-box__lbl">From</span>
|
||||
<input
|
||||
class="wri-date-box__input"
|
||||
[matDatepicker]="fromPicker"
|
||||
[(ngModel)]="fromDate"
|
||||
[max]="maxDate"
|
||||
(dateChange)="onFromDateChange()"
|
||||
readonly
|
||||
/>
|
||||
<button type="button" class="wri-date-box__btn" (click)="fromPicker.open()">
|
||||
<mat-icon>event</mat-icon>
|
||||
</button>
|
||||
<mat-datepicker #fromPicker></mat-datepicker>
|
||||
</div>
|
||||
<span class="wri-date-range__sep">—</span>
|
||||
<div class="wri-date-box">
|
||||
<span class="wri-date-box__lbl">To</span>
|
||||
<input
|
||||
class="wri-date-box__input"
|
||||
[matDatepicker]="toPicker"
|
||||
[(ngModel)]="toDate"
|
||||
[min]="fromDate"
|
||||
[max]="maxDate"
|
||||
(dateChange)="onToDateChange()"
|
||||
readonly
|
||||
/>
|
||||
<button type="button" class="wri-date-box__btn" (click)="toPicker.open()">
|
||||
<mat-icon>event</mat-icon>
|
||||
</button>
|
||||
<mat-datepicker #toPicker></mat-datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="wri-btn wri-btn--refresh" (click)="load()" [disabled]="loading">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (loading) {
|
||||
<div class="empty-state">
|
||||
<p class="empty-title">Loading…</p>
|
||||
</div>
|
||||
} @else if (loaded && entries.length === 0) {
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-inbox empty-icon"></i>
|
||||
<p class="empty-title">No DDS entries</p>
|
||||
<p class="empty-text">
|
||||
@if (filterStatus === 'PENDING') {
|
||||
There are no DDS entries waiting for approval.
|
||||
} @else {
|
||||
No {{ filterStatus | lowercase }} DDS entries found.
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="wri-table-wrap">
|
||||
<table class="wri-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="wri-th-id">Voucher No</th>
|
||||
<th>Type</th>
|
||||
<th>Account / Details</th>
|
||||
<th class="num">Amount</th>
|
||||
<th>Entries</th>
|
||||
<th>Clerk</th>
|
||||
<th>Reviewed By</th>
|
||||
<th>Submitted At</th>
|
||||
<th>Status</th>
|
||||
<th class="wri-th-action">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (e of pagedEntries; track e.id) {
|
||||
<tr class="wri-row" (click)="review(e)">
|
||||
<td class="cell-mono wri-voucher">
|
||||
{{ e.voucherNo || '—' }}
|
||||
@if (e.voucherCancelled) {
|
||||
<span class="wri-gl-name">(cancelled)</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<span class="wri-credit-badge" [style.background]="typeColor(e)">{{ e.type }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="wri-gl-name">{{ e.details || '—' }}</span>
|
||||
</td>
|
||||
<td class="num wri-amount">
|
||||
{{ e.amount !== null && e.amount !== undefined ? '₹' + (e.amount | number: '1.2-2') : '—' }}
|
||||
</td>
|
||||
<td class="wri-credit-count">
|
||||
@if (e.entries) {
|
||||
<span class="wri-credit-badge">{{ e.entries }} account{{ e.entries !== 1 ? 's' : '' }}</span>
|
||||
} @else {
|
||||
—
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{{ e.makerName || e.maker || '—' }}
|
||||
@if (isMine(e) && e.status === 'PENDING') {
|
||||
<span class="wri-gl-name">(you)</span>
|
||||
}
|
||||
</td>
|
||||
<td>{{ e.status === 'PENDING' ? '—' : e.checkerName || e.checker || '—' }}</td>
|
||||
<td class="wri-dt">{{ formatDateTime(e.madeOn) }}</td>
|
||||
<td>
|
||||
<span class="wri-status" [ngClass]="statusClass(e.status)">{{ e.status | titlecase }}</span>
|
||||
</td>
|
||||
<td class="wri-action-cell" (click)="$event.stopPropagation()">
|
||||
<button type="button" class="wri-btn wri-btn--review" (click)="review(e)">
|
||||
<mat-icon>rate_review</mat-icon>
|
||||
Review
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<mat-paginator
|
||||
[length]="entries.length"
|
||||
[pageSize]="pageSize"
|
||||
[pageSizeOptions]="pageSizeOptions"
|
||||
[pageIndex]="pageIndex"
|
||||
showFirstLastButtons
|
||||
(page)="onPageChange($event)"
|
||||
></mat-paginator>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,215 @@
|
||||
/**
|
||||
* 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 { MatIconModule } from '@angular/material/icon';
|
||||
import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatNativeDateModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { of } from 'rxjs';
|
||||
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
import { AuthenticationService } from 'app/core/authentication/authentication.service';
|
||||
import { DdsApprovalReviewComponent } from './dds-approval-review/dds-approval-review.component';
|
||||
|
||||
/**
|
||||
* Approval Center › DDS Approvals: every DDS entry waiting on a checker, in the clerk's terms - what
|
||||
* it does, on which accounts, for how much - and, once approved, the voucher it moved under.
|
||||
*
|
||||
* Laid out like Disbursement & Transfers beside it, and sharing its styles, so the two queues read the
|
||||
* same way. The entries are the platform's own maker-checker entries; approving one here carries it out.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-dds-approvals',
|
||||
templateUrl: './dds-approvals.component.html',
|
||||
styleUrls: ['../../tasks/checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatIconModule,
|
||||
MatPaginatorModule,
|
||||
MatNativeDateModule,
|
||||
MatDatepickerModule
|
||||
]
|
||||
})
|
||||
export class DdsApprovalsComponent implements OnInit {
|
||||
private organizationService = inject(OrganizationService);
|
||||
private settingsService = inject(SettingsService);
|
||||
private authenticationService = inject(AuthenticationService);
|
||||
private dialog = inject(MatDialog);
|
||||
|
||||
entries: any[] = [];
|
||||
pageSize = 20;
|
||||
pageIndex = 0;
|
||||
readonly pageSizeOptions = [
|
||||
10,
|
||||
20,
|
||||
50
|
||||
];
|
||||
|
||||
/** The page of entries on screen. */
|
||||
get pagedEntries(): any[] {
|
||||
const start = this.pageIndex * this.pageSize;
|
||||
return this.entries.slice(start, start + this.pageSize);
|
||||
}
|
||||
|
||||
onPageChange(event: PageEvent): void {
|
||||
this.pageSize = event.pageSize;
|
||||
this.pageIndex = event.pageIndex;
|
||||
}
|
||||
filterStatus = 'PENDING';
|
||||
fromDate: Date | null = null;
|
||||
toDate: Date | null = null;
|
||||
maxDate!: Date;
|
||||
activePreset = 'today';
|
||||
loading = false;
|
||||
loaded = false;
|
||||
|
||||
readonly currentUserId = this.authenticationService.getCredentials()?.userId;
|
||||
|
||||
readonly statusOptions = [
|
||||
{ value: 'PENDING', label: 'Pending' },
|
||||
{ value: 'APPROVED', label: 'Approved' },
|
||||
{ value: 'REJECTED', label: 'Rejected' }
|
||||
];
|
||||
|
||||
readonly datePresets = [
|
||||
{ key: 'today', label: 'Today' },
|
||||
{ key: 'week', label: 'This Week' },
|
||||
{ key: 'month', label: 'This Month' },
|
||||
{ key: 'all', label: 'All' }
|
||||
];
|
||||
|
||||
ngOnInit(): void {
|
||||
const today = new Date(this.settingsService.businessDate || new Date());
|
||||
today.setHours(0, 0, 0, 0);
|
||||
this.maxDate = today;
|
||||
this.applyPreset('today');
|
||||
}
|
||||
|
||||
load(): void {
|
||||
this.loading = true;
|
||||
this.organizationService
|
||||
.getDdsApprovals(this.filterStatus, this.isoDate(this.fromDate), this.isoDate(this.toDate))
|
||||
.pipe(catchError(() => of([])))
|
||||
.subscribe((rows: any) => {
|
||||
this.entries = Array.isArray(rows) ? rows : [];
|
||||
this.pageIndex = 0;
|
||||
this.loading = false;
|
||||
this.loaded = true;
|
||||
});
|
||||
}
|
||||
|
||||
onFilterChange(): void {
|
||||
this.load();
|
||||
}
|
||||
|
||||
onFromDateChange(): void {
|
||||
this.activePreset = '';
|
||||
if (this.fromDate && this.toDate && this.fromDate > this.toDate) {
|
||||
this.toDate = new Date(this.fromDate);
|
||||
}
|
||||
this.load();
|
||||
}
|
||||
|
||||
onToDateChange(): void {
|
||||
this.activePreset = '';
|
||||
this.load();
|
||||
}
|
||||
|
||||
applyPreset(key: string): void {
|
||||
this.activePreset = key;
|
||||
const today = new Date(this.settingsService.businessDate || new Date());
|
||||
today.setHours(0, 0, 0, 0);
|
||||
if (key === 'today') {
|
||||
this.fromDate = new Date(today);
|
||||
this.toDate = new Date(today);
|
||||
} else if (key === 'week') {
|
||||
const start = new Date(today);
|
||||
start.setDate(today.getDate() - today.getDay());
|
||||
this.fromDate = start;
|
||||
this.toDate = new Date(today);
|
||||
} else if (key === 'month') {
|
||||
this.fromDate = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
this.toDate = new Date(today);
|
||||
} else {
|
||||
this.fromDate = null;
|
||||
this.toDate = null;
|
||||
}
|
||||
this.load();
|
||||
}
|
||||
|
||||
review(entry: any): void {
|
||||
this.dialog
|
||||
.open(DdsApprovalReviewComponent, { data: { entry, currentUserId: this.currentUserId }, autoFocus: false })
|
||||
.afterClosed()
|
||||
// However the dialog was closed - its Close button, a click outside, Esc - the list is read
|
||||
// again, so an entry just approved or rejected leaves the Pending list at once.
|
||||
.subscribe(() => this.load());
|
||||
}
|
||||
|
||||
/** Whose entry it is - a checker cannot pass their own. */
|
||||
isMine(entry: any): boolean {
|
||||
return !!this.currentUserId && Number(entry.makerId) === Number(this.currentUserId);
|
||||
}
|
||||
|
||||
statusClass(status: string): string {
|
||||
const map: Record<string, string> = {
|
||||
PENDING: 'wri-status--pending',
|
||||
APPROVED: 'wri-status--approved',
|
||||
REJECTED: 'wri-status--rejected'
|
||||
};
|
||||
return map[status] ?? '';
|
||||
}
|
||||
|
||||
typeColor(entry: any): string {
|
||||
const map: Record<string, string> = {
|
||||
Transfer: '#e3f2fd',
|
||||
'Apply Receipt': '#fce4ec'
|
||||
};
|
||||
if (String(entry.type).startsWith('Premature')) {
|
||||
return '#fff3e0';
|
||||
}
|
||||
if (String(entry.type).startsWith('Maturity')) {
|
||||
return '#e8f5e9';
|
||||
}
|
||||
if (String(entry.type).startsWith('Post')) {
|
||||
return '#ede7f6';
|
||||
}
|
||||
return map[entry.type] ?? '#f5f5f5';
|
||||
}
|
||||
|
||||
formatDateTime(val: any): string {
|
||||
if (!val) {
|
||||
return '—';
|
||||
}
|
||||
const d = new Date(String(val).replace(' ', 'T'));
|
||||
return isNaN(d.getTime())
|
||||
? String(val)
|
||||
: d.toLocaleString('en-IN', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
private isoDate(d: Date | null): string | undefined {
|
||||
if (!d) {
|
||||
return undefined;
|
||||
}
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<!--
|
||||
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="dr-container">
|
||||
<div class="dr-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="dr-back">
|
||||
<i class="fas fa-arrow-left"></i> Deposits
|
||||
</button>
|
||||
<h2 class="dr-header__title">DDS Reports</h2>
|
||||
</div>
|
||||
|
||||
@for (group of reportGroups; track group.title) {
|
||||
<div class="dr-group">
|
||||
<div class="dr-group__title">{{ group.title }}</div>
|
||||
<div class="dr-grid">
|
||||
@for (report of group.reports; track report) {
|
||||
<a class="dr-card" [routerLink]="['view', report]">
|
||||
<div class="dr-card__icon">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
</div>
|
||||
<div class="dr-card__title">{{ report }}</div>
|
||||
<i class="fas fa-chevron-right dr-card__arrow"></i>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* 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;
|
||||
|
||||
.dr-container {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.dr-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.dr-back {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.dr-group {
|
||||
margin-bottom: 24px;
|
||||
|
||||
&__title {
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: $primary;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dr-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dr-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: var(--md-sys-color-surface, #fff);
|
||||
border: 1px solid rgb(0 0 0 / 8%);
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: box-shadow 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
color: $primary;
|
||||
font-size: 16px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
color: rgb(0 0 0 / 30%);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 900px) {
|
||||
.dr-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
.dr-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component } from '@angular/core';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
* DDS Reports hub component.
|
||||
*
|
||||
* Lists every DDS report from the legacy Reports menu, grouped the same
|
||||
* way (As-On-Date, Interest, Daily/Balance/Master, Transaction). Each
|
||||
* links to the shared report viewer, parameterised by report name.
|
||||
*
|
||||
* UI only for now: no report actually queries the backend yet — see
|
||||
* ReportViewerComponent.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-dds-reports',
|
||||
templateUrl: './dds-reports.component.html',
|
||||
styleUrls: ['./dds-reports.component.scss'],
|
||||
imports: [...STANDALONE_SHARED_IMPORTS]
|
||||
})
|
||||
export class DdsReportsComponent {
|
||||
reportGroups = [
|
||||
{
|
||||
title: 'As On Date',
|
||||
reports: [
|
||||
'Supplementary-DDS (As On)',
|
||||
'Agent Check List',
|
||||
'Party Check List-As On',
|
||||
'Party Balance',
|
||||
'Agent Wise Balance',
|
||||
'Agent Wise Monthly Collection',
|
||||
'Commission Register',
|
||||
'Collection Summary Agent Wise',
|
||||
'Close Party Ac Register',
|
||||
'Agent Partywise Daily Collection',
|
||||
'Daily Collection Balance',
|
||||
'Interest Certificate',
|
||||
'Mature Date Wise Report'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Interest',
|
||||
reports: [
|
||||
'Party Int. Register',
|
||||
'Commission Register'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Daily / Balance / Master',
|
||||
reports: [
|
||||
'Daily Collection Report',
|
||||
'Balance Summary',
|
||||
'Master Data Export'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Transaction',
|
||||
reports: ['Transaction Register']
|
||||
},
|
||||
{
|
||||
title: 'Statements',
|
||||
reports: ['Agent Commission Statement']
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
<!--
|
||||
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="rv-container">
|
||||
<div class="rv-header">
|
||||
<button mat-stroked-button [routerLink]="['../../']" class="rv-back">
|
||||
<i class="fas fa-arrow-left"></i> DDS Reports
|
||||
</button>
|
||||
<h2 class="rv-header__title">{{ reportName }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="rv-card">
|
||||
<form [formGroup]="filterForm">
|
||||
<!-- Only the filters this report's query actually reads are offered. One that changed nothing
|
||||
would read as a report ignoring what it was asked. -->
|
||||
@if (!hasNoFilters) {
|
||||
<div class="rv-grid">
|
||||
@if (usesDate) {
|
||||
<mat-form-field appearance="outline" class="rv-field">
|
||||
<mat-label>{{ dateLabel }} — from</mat-label>
|
||||
<input matInput required [matDatepicker]="fromPicker" formControlName="fromDate" />
|
||||
<mat-datepicker-toggle matIconSuffix [for]="fromPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #fromPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="rv-field">
|
||||
<mat-label>{{ dateLabel }} — to</mat-label>
|
||||
<input matInput required [matDatepicker]="toPicker" formControlName="toDate" />
|
||||
<mat-datepicker-toggle matIconSuffix [for]="toPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #toPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (usesAgent) {
|
||||
<mat-form-field appearance="outline" class="rv-field">
|
||||
<mat-label>Agent From</mat-label>
|
||||
<input matInput type="number" formControlName="agentFrom" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="rv-field">
|
||||
<mat-label>Agent To</mat-label>
|
||||
<input matInput type="number" formControlName="agentTo" />
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (usesParty) {
|
||||
<mat-form-field appearance="outline" class="rv-field">
|
||||
<mat-label>Party From</mat-label>
|
||||
<input matInput type="number" formControlName="partyFrom" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="rv-field">
|
||||
<mat-label>Party To</mat-label>
|
||||
<input matInput type="number" formControlName="partyTo" />
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="rv-action-bar">
|
||||
<button mat-raised-button type="button" (click)="exit()">Exit</button>
|
||||
<!-- A report with nothing to fill in has already run itself; the button then only offers to
|
||||
fetch the figures again, which is what it is called. -->
|
||||
<button mat-raised-button color="primary" type="button" [disabled]="filterForm.invalid" (click)="runReport()">
|
||||
<i class="fas" [class.fa-play]="!hasNoFilters" [class.fa-rotate-right]="hasNoFilters"></i>
|
||||
{{ hasNoFilters ? 'Refresh' : 'Run Report' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (hasRun) {
|
||||
<div class="rv-results">
|
||||
@if (!available) {
|
||||
<p class="rv-empty">{{ unavailableMessage }}</p>
|
||||
} @else if (rows.length === 0) {
|
||||
<p class="rv-empty">No rows matched these filters.</p>
|
||||
} @else {
|
||||
<!-- Laid out as the legacy statement printed it: a heading naming the report and the
|
||||
period, numbered rows, and a total under every money column. -->
|
||||
<div class="rv-statement">
|
||||
<div class="rv-statement__head">
|
||||
<h3 class="rv-statement__title">{{ reportName }}</h3>
|
||||
@if (usesDate) {
|
||||
<p class="rv-statement__period">
|
||||
{{ dateLabel | lowercase }} {{ ranFromDate | dateFormat }} and
|
||||
{{ ranToDate | dateFormat }}
|
||||
</p>
|
||||
} @else {
|
||||
<p class="rv-statement__period">as on {{ ranOnDate | dateFormat }}</p>
|
||||
}
|
||||
<button mat-stroked-button type="button" class="rv-print" (click)="print()">
|
||||
<i class="fas fa-print"></i> Print
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rv-table-scroll">
|
||||
<table class="rv-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="rv-sr">#</th>
|
||||
@for (column of columns; track column) {
|
||||
<th [class.rv-num]="isAmountColumn(column)">{{ column }}</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of rows; track $index) {
|
||||
<tr>
|
||||
<td class="rv-sr">{{ $index + 1 }}</td>
|
||||
@for (column of columns; track column) {
|
||||
<td [class.rv-num]="isAmountColumn(column)">{{ cell(row, column) }}</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
@if (hasTotalledColumn) {
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="rv-sr"></td>
|
||||
@for (column of columns; track column; let first = $first) {
|
||||
<td [class.rv-num]="isAmountColumn(column)">
|
||||
@if (first) {
|
||||
Total :
|
||||
} @else if (isTotalledColumn(column)) {
|
||||
{{ columnTotal(column) }}
|
||||
}
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
</tfoot>
|
||||
}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="rv-statement__count">{{ rows.length }} {{ rows.length === 1 ? 'row' : 'rows' }}</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,190 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
$primary: #0f766e;
|
||||
|
||||
.rv-container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.rv-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.rv-back {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.rv-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;
|
||||
}
|
||||
|
||||
.rv-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px 16px;
|
||||
}
|
||||
|
||||
.rv-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rv-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%);
|
||||
}
|
||||
|
||||
.rv-results {
|
||||
margin-top: 20px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgb(0 0 0 / 8%);
|
||||
}
|
||||
|
||||
.rv-empty {
|
||||
color: rgb(0 0 0 / 50%);
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.rv-table-scroll {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.rv-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
white-space: nowrap;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
padding: 8px 10px;
|
||||
border-bottom: 2px solid rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
/* Figures line up column-wise so a wrong order of magnitude is visible at a glance. */
|
||||
.rv-num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* The row number down the left, as the printed statement carried it. */
|
||||
.rv-sr {
|
||||
width: 1%;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
font-style: italic;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
tfoot td {
|
||||
border-bottom: none;
|
||||
border-top: 2px solid rgb(0 0 0 / 20%);
|
||||
font-weight: 600;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- the statement block: heading, table, footer count ---- */
|
||||
|
||||
.rv-action-bar i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.rv-statement__head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.rv-statement__title {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.rv-statement__period {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
}
|
||||
|
||||
.rv-print {
|
||||
margin-left: auto;
|
||||
|
||||
i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.rv-statement__count {
|
||||
margin: 10px 0 0;
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Printing a statement should give the statement, not the screen around it. */
|
||||
@media print {
|
||||
.rv-header,
|
||||
.rv-grid,
|
||||
.rv-action-bar,
|
||||
.rv-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rv-card {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rv-table-scroll {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
.rv-table {
|
||||
white-space: normal;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 900px) {
|
||||
.rv-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,344 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/** Custom Services */
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
import { Dates } from 'app/core/utils/dates';
|
||||
|
||||
/**
|
||||
* Generic DDS report viewer.
|
||||
*
|
||||
* One shared screen for all 13+ DDS reports — the report name comes from
|
||||
* the route and is mapped to a backend report key. Every report in the
|
||||
* legacy system shared the same basic filter shape (date, agent range,
|
||||
* party range), so this avoids building a bespoke screen per report - the
|
||||
* backend returns a generic {columns, rows} shape this renders as one
|
||||
* table regardless of which report it is.
|
||||
*
|
||||
* One legacy report (Close Party Ac Register) has no corresponding data in
|
||||
* the backend yet - Party accounts have no closed/open status at all. Run
|
||||
* Report still calls through, and the backend's `available: false` +
|
||||
* message is shown instead of a table.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-dds-report-viewer',
|
||||
templateUrl: './report-viewer.component.html',
|
||||
styleUrls: ['./report-viewer.component.scss'],
|
||||
imports: [...STANDALONE_SHARED_IMPORTS]
|
||||
})
|
||||
export class ReportViewerComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private formBuilder = inject(UntypedFormBuilder);
|
||||
private organizationService = inject(OrganizationService);
|
||||
private dateUtils = inject(Dates);
|
||||
|
||||
private static readonly REPORT_KEYS: Record<string, string> = {
|
||||
'Supplementary-DDS (As On)': 'SUPPLEMENTARY_DDS',
|
||||
'Agent Check List': 'AGENT_CHECK_LIST',
|
||||
'Party Check List-As On': 'PARTY_CHECK_LIST',
|
||||
'Party Balance': 'PARTY_BALANCE',
|
||||
'Agent Wise Balance': 'AGENT_WISE_BALANCE',
|
||||
'Agent Wise Monthly Collection': 'AGENT_WISE_MONTHLY_COLLECTION',
|
||||
'Commission Register': 'COMMISSION_REGISTER',
|
||||
'Collection Summary Agent Wise': 'COLLECTION_SUMMARY_AGENT_WISE',
|
||||
'Close Party Ac Register': 'CLOSE_PARTY_AC_REGISTER',
|
||||
'Agent Partywise Daily Collection': 'AGENT_PARTYWISE_DAILY_COLLECTION',
|
||||
'Daily Collection Balance': 'DAILY_COLLECTION_REPORT',
|
||||
'Interest Certificate': 'INTEREST_CERTIFICATE',
|
||||
'Mature Date Wise Report': 'MATURE_DATE_WISE',
|
||||
'Party Int. Register': 'PARTY_INTEREST_REGISTER',
|
||||
'Daily Collection Report': 'DAILY_COLLECTION_REPORT',
|
||||
'Balance Summary': 'BALANCE_SUMMARY',
|
||||
'Master Data Export': 'MASTER_DATA_EXPORT',
|
||||
'Transaction Register': 'TRANSACTION_REGISTER',
|
||||
'Agent Commission Statement': 'AGENT_COMMISSION_STATEMENT'
|
||||
};
|
||||
|
||||
/**
|
||||
* Which filters each report actually uses, and what its date range means.
|
||||
*
|
||||
* Every report used to be offered the same six filters whether it read them or not — so a date
|
||||
* range could be typed on the Agent Check List, which has no date in its query at all, and the
|
||||
* same rows would come back however it was set. A filter that changes nothing is worse than no
|
||||
* filter: it reads as a report that ignores what it was asked.
|
||||
*
|
||||
* Kept in step with the backend by hand; the source of truth is the switch in
|
||||
* `DdsReportReadPlatformServiceImpl.runReport`.
|
||||
*/
|
||||
private static readonly REPORT_FILTERS: Record<string, { date?: string; agent?: boolean; party?: boolean }> = {
|
||||
AGENT_CHECK_LIST: {},
|
||||
PARTY_CHECK_LIST: { agent: true, party: true },
|
||||
PARTY_BALANCE: { agent: true, party: true },
|
||||
AGENT_WISE_BALANCE: { agent: true },
|
||||
BALANCE_SUMMARY: { agent: true, party: true },
|
||||
MASTER_DATA_EXPORT: { agent: true, party: true },
|
||||
|
||||
AGENT_WISE_MONTHLY_COLLECTION: { date: 'Collected between', agent: true },
|
||||
COLLECTION_SUMMARY_AGENT_WISE: { date: 'Collected between', agent: true },
|
||||
DAILY_COLLECTION_REPORT: { date: 'Collected between', agent: true },
|
||||
AGENT_PARTYWISE_DAILY_COLLECTION: { date: 'Collected between', agent: true, party: true },
|
||||
SUPPLEMENTARY_DDS: { date: 'Collected between', agent: true, party: true },
|
||||
|
||||
COMMISSION_REGISTER: { date: 'Posted between', agent: true },
|
||||
AGENT_COMMISSION_STATEMENT: { date: 'Posted between' },
|
||||
PARTY_INTEREST_REGISTER: { date: 'Posted between', party: true },
|
||||
INTEREST_CERTIFICATE: { date: 'Interest earned between', agent: true, party: true },
|
||||
|
||||
TRANSACTION_REGISTER: { date: 'Transacted between', agent: true, party: true },
|
||||
CLOSE_PARTY_AC_REGISTER: { date: 'Closed between', agent: true, party: true },
|
||||
MATURE_DATE_WISE: { date: 'Maturing between', agent: true, party: true }
|
||||
};
|
||||
|
||||
reportName: string = this.route.snapshot.paramMap.get('reportName') || 'Report';
|
||||
|
||||
hasRun = false;
|
||||
available = true;
|
||||
unavailableMessage = '';
|
||||
columns: string[] = [];
|
||||
rows: Array<Record<string, any>> = [];
|
||||
|
||||
/** The range the rows on screen were actually fetched for — not whatever the filter says now. */
|
||||
ranFromDate: Date | null = null;
|
||||
ranToDate: Date | null = null;
|
||||
|
||||
/** When a report carries no date range, the moment it was run is what dates its figures. */
|
||||
ranOnDate: Date | null = null;
|
||||
|
||||
private static readonly MONEY = new Intl.NumberFormat('en-IN', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
|
||||
private static readonly DATE = new Intl.DateTimeFormat('en-GB', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
|
||||
/**
|
||||
* One cell, rendered the way a printed statement shows it.
|
||||
*
|
||||
* Dates arrive from the platform as `[yyyy, m, d]` and numbers as raw decimals, so printing them
|
||||
* as they come gives "2026,9,2" and "10052.6" — unreadable on a statement someone checks figures
|
||||
* against. Amounts get Indian grouping and two decimals; identifiers that merely look numeric
|
||||
* (account numbers, codes) are left alone, since grouping them would corrupt them.
|
||||
*/
|
||||
cell(row: Record<string, any>, column: string): string {
|
||||
const value = row[column];
|
||||
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '—';
|
||||
}
|
||||
if (Array.isArray(value) && value.length >= 3) {
|
||||
return ReportViewerComponent.DATE.format(new Date(value[0], value[1] - 1, value[2]));
|
||||
}
|
||||
if (this.isAmountColumn(column) && typeof value === 'number') {
|
||||
return ReportViewerComponent.MONEY.format(value);
|
||||
}
|
||||
return String(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether a column holds money, and so should be right-aligned with two decimals.
|
||||
*
|
||||
* Decided from the column's name rather than its values: a count column and an account-number
|
||||
* column are both numbers, and neither reads as an amount.
|
||||
*/
|
||||
isAmountColumn(column: string): boolean {
|
||||
const name = column.toLowerCase();
|
||||
|
||||
// Ruled out first, because several of these also contain a money word: a rate is a percentage,
|
||||
// "Total Accounts" is a count that happens to say total, and an account number is an identifier
|
||||
// that would be corrupted by grouping.
|
||||
//
|
||||
// "agents" is matched exactly rather than as a substring: the two count columns are named
|
||||
// "Total Agents" and "Active Agents", but "Cash With Agents" and "Commission Due To Agents"
|
||||
// are money, and a substring test swept those two up and printed them ungrouped.
|
||||
//
|
||||
// A "type" column names a kind, never a quantity — "Interest Type" holds the word "Interest",
|
||||
// which is enough for the money test below to claim it and put a meaningless total under it.
|
||||
if (
|
||||
name.includes('a/c no') ||
|
||||
name.includes('code') ||
|
||||
name.includes('rate') ||
|
||||
name.includes('%') ||
|
||||
name.includes('count') ||
|
||||
name.includes('entries') ||
|
||||
name.includes('accounts') ||
|
||||
name === 'total agents' ||
|
||||
name === 'active agents' ||
|
||||
name.includes('type') ||
|
||||
name.includes('pan')
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
name.includes('amount') ||
|
||||
name.includes('balance') ||
|
||||
name.includes('collect') ||
|
||||
name.includes('commission') ||
|
||||
name.includes('deduction') ||
|
||||
name.includes('deposit') ||
|
||||
name.includes('advance') ||
|
||||
name.includes('interest') ||
|
||||
name.includes('tds') ||
|
||||
name.includes('total') ||
|
||||
name.includes('diff') ||
|
||||
name.includes('cash') ||
|
||||
name.includes('debit') ||
|
||||
name.includes('credit') ||
|
||||
name.includes('settled') ||
|
||||
name.includes('shortfall') ||
|
||||
name.includes('due')
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether a total under this column would mean anything.
|
||||
*
|
||||
* Not every amount is worth adding up. A "Balance After" on a transaction register is the running
|
||||
* balance *at that moment*, so its column holds several snapshots of the same account at different
|
||||
* times — summing them produces a figure that corresponds to nothing, and a reader would sooner or
|
||||
* later try to reconcile it against something.
|
||||
*
|
||||
* A plain balance on a listing report is different: there each row is one account's position at
|
||||
* one moment, and the sum is the real "total held", which is exactly what a branch wants to see.
|
||||
*/
|
||||
isTotalledColumn(column: string): boolean {
|
||||
if (!this.isAmountColumn(column)) {
|
||||
return false;
|
||||
}
|
||||
return !column.toLowerCase().includes('balance after');
|
||||
}
|
||||
|
||||
/** The figure printed under a column, as the legacy statement's "Total :" row does. */
|
||||
columnTotal(column: string): string {
|
||||
const sum = this.rows.reduce((running, row) => {
|
||||
const value = row[column];
|
||||
return running + (typeof value === 'number' ? value : 0);
|
||||
}, 0);
|
||||
return ReportViewerComponent.MONEY.format(sum);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to print a Total row at all.
|
||||
*
|
||||
* A single-row report is already its own total - Balance Summary is one line of figures for the
|
||||
* whole scheme, and repeating it underneath itself only invites the reader to look for a difference
|
||||
* between the two.
|
||||
*/
|
||||
get hasTotalledColumn(): boolean {
|
||||
return this.rows.length > 1 && this.columns.some((column) => this.isTotalledColumn(column));
|
||||
}
|
||||
|
||||
print(): void {
|
||||
window.print();
|
||||
}
|
||||
|
||||
filterForm: UntypedFormGroup = this.formBuilder.group({
|
||||
fromDate: [''],
|
||||
toDate: [''],
|
||||
agentFrom: [1],
|
||||
agentTo: [99999],
|
||||
partyFrom: [1],
|
||||
partyTo: [99999999]
|
||||
});
|
||||
|
||||
private get filters(): { date?: string; agent?: boolean; party?: boolean } {
|
||||
return ReportViewerComponent.REPORT_FILTERS[ReportViewerComponent.REPORT_KEYS[this.reportName]] ?? {};
|
||||
}
|
||||
|
||||
/** True when this report's query actually reads a date range - only then is one asked for. */
|
||||
get usesDate(): boolean {
|
||||
return !!this.filters.date;
|
||||
}
|
||||
|
||||
/** What this report's date range means, e.g. "Posted between" rather than a bare "From Date". */
|
||||
get dateLabel(): string {
|
||||
return this.filters.date ?? '';
|
||||
}
|
||||
|
||||
get usesAgent(): boolean {
|
||||
return !!this.filters.agent;
|
||||
}
|
||||
|
||||
get usesParty(): boolean {
|
||||
return !!this.filters.party;
|
||||
}
|
||||
|
||||
/** True when this report takes no filters at all, so there is nothing for anyone to fill in. */
|
||||
get hasNoFilters(): boolean {
|
||||
return !this.usesDate && !this.usesAgent && !this.usesParty;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
// A date is required exactly for the reports that read one, so a report without dates can be run
|
||||
// straight away instead of demanding two values it will ignore.
|
||||
if (this.usesDate) {
|
||||
this.filterForm.get('fromDate')?.setValidators([Validators.required]);
|
||||
this.filterForm.get('toDate')?.setValidators([Validators.required]);
|
||||
this.filterForm.get('fromDate')?.updateValueAndValidity();
|
||||
this.filterForm.get('toDate')?.updateValueAndValidity();
|
||||
}
|
||||
|
||||
// Nothing to narrow it by means nothing to decide, so the report simply opens showing its
|
||||
// figures. Making someone press Run on an empty form asks a question with only one answer.
|
||||
if (this.hasNoFilters) {
|
||||
this.runReport();
|
||||
}
|
||||
}
|
||||
|
||||
runReport(): void {
|
||||
const reportKey = ReportViewerComponent.REPORT_KEYS[this.reportName];
|
||||
if (!reportKey) {
|
||||
return;
|
||||
}
|
||||
const raw = this.filterForm.getRawValue();
|
||||
|
||||
// Only what this report reads is sent. The backend defaults the rest to the full range, so a
|
||||
// report that ignores a filter is never handed a value that looks like it was applied.
|
||||
const params: Record<string, any> = {};
|
||||
if (this.usesDate) {
|
||||
params['fromDate'] = this.dateUtils.getDate(raw.fromDate);
|
||||
params['toDate'] = this.dateUtils.getDate(raw.toDate);
|
||||
}
|
||||
if (this.usesAgent) {
|
||||
params['agentFrom'] = raw.agentFrom;
|
||||
params['agentTo'] = raw.agentTo;
|
||||
}
|
||||
if (this.usesParty) {
|
||||
params['partyFrom'] = raw.partyFrom;
|
||||
params['partyTo'] = raw.partyTo;
|
||||
}
|
||||
|
||||
this.organizationService.runDdsReport(reportKey, params).subscribe((result: any) => {
|
||||
this.available = result.available;
|
||||
this.unavailableMessage = result.message || '';
|
||||
this.columns = result.columns || [];
|
||||
this.rows = result.rows || [];
|
||||
// Captured here so the printed heading names the range these rows came from, and does not
|
||||
// silently change if the filter is edited without re-running.
|
||||
this.ranFromDate = raw.fromDate;
|
||||
this.ranToDate = raw.toDate;
|
||||
this.ranOnDate = new Date();
|
||||
this.hasRun = true;
|
||||
});
|
||||
}
|
||||
|
||||
exit(): void {
|
||||
this.router.navigate(['../../'], { relativeTo: this.route });
|
||||
}
|
||||
}
|
||||
-6
@@ -130,12 +130,6 @@
|
||||
<mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
|
||||
<span>{{ 'labels.text.View Transaction' | translate }}</span>
|
||||
</button>
|
||||
@if (!isFirstTransaction(idx)) {
|
||||
<button mat-menu-item (click)="undoTransaction(transaction)">
|
||||
<mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
|
||||
<span>{{ 'tooltips.Undo Transaction' | translate }}</span>
|
||||
</button>
|
||||
}
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="routeEdit($event)"
|
||||
|
||||
+1
-14
@@ -6,20 +6,7 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container m-b-20 align-end-center gap-2percent">
|
||||
@if (allowUndo()) {
|
||||
<span>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="warn"
|
||||
*mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
|
||||
(click)="undoTransaction()"
|
||||
>
|
||||
<fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
|
||||
</button>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div class="container m-b-20 align-end-center gap-2percent"></div>
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* 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 { Observable, forkJoin, of } from 'rxjs';
|
||||
import { catchError, map } from 'rxjs/operators';
|
||||
import { ClientsService } from 'app/clients/clients.service';
|
||||
|
||||
/**
|
||||
* Finds clients by name whatever case the officer types it in.
|
||||
*
|
||||
* The platform's name filter matches anywhere in the name but only in the exact case typed, so
|
||||
* "sneha" finds nobody while "Sneha" finds Ms. Sneha Iyer. Names are stored capitalised, so the term
|
||||
* is tried as typed, capitalised word by word, and in upper and lower case, and the results merged.
|
||||
* Done here rather than by changing the platform's search, which every other screen relies on.
|
||||
*/
|
||||
export function searchClientsAnyCase(clientsService: ClientsService, term: string, officeId?: any): Observable<any[]> {
|
||||
const variants = Array.from(
|
||||
new Set([
|
||||
term,
|
||||
term.toLowerCase().replace(/(^|[\s.])(\p{L})/gu, (_match, lead, letter) => lead + letter.toUpperCase()),
|
||||
term.toUpperCase(),
|
||||
term.toLowerCase()
|
||||
])
|
||||
);
|
||||
return forkJoin(
|
||||
variants.map((variant) =>
|
||||
clientsService.getFilteredClients('displayName', 'ASC', false, variant, officeId).pipe(
|
||||
map((response: any) => {
|
||||
const found = response?.pageItems || response || [];
|
||||
return Array.isArray(found) ? found : [];
|
||||
}),
|
||||
catchError(() => of([]))
|
||||
)
|
||||
)
|
||||
).pipe(
|
||||
map((lists: any[][]) => {
|
||||
const byId = new Map<number, any>();
|
||||
for (const client of lists.flat()) {
|
||||
byId.set(client.id, client);
|
||||
}
|
||||
return Array.from(byId.values()).sort((a, b) => String(a.displayName).localeCompare(String(b.displayName)));
|
||||
})
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,528 @@
|
||||
/**
|
||||
* 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;
|
||||
|
||||
.pm-container {
|
||||
// Wider than the usual form page: the extra width is what keeps this many fields off a
|
||||
// second screen.
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 12px 16px 20px;
|
||||
}
|
||||
|
||||
.pm-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.pm-back {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.pm-card {
|
||||
background: var(--md-sys-color-surface, #fff);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
|
||||
}
|
||||
|
||||
.pm-tabs {
|
||||
::ng-deep .mat-mdc-tab-body-wrapper {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.pm-tab-content {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.pm-section {
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 8%);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// The subtitle sits beside the title where there is room and drops below it where there is not.
|
||||
flex-wrap: wrap;
|
||||
gap: 2px 10px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
i {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
// Held at its natural width: letting it shrink breaks a two-word heading onto three lines.
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pm-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 2px 18px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/*
|
||||
* Label to the left of its field, the way the screen this replaces laid them out. A stacked label
|
||||
* costs a whole row of height per field, and with 60-odd fields that is the difference between an
|
||||
* operator seeing the form at once and scrolling through three screens of it.
|
||||
*/
|
||||
.pm-f {
|
||||
display: grid;
|
||||
grid-template-columns: 104px minmax(0, 1fr);
|
||||
align-items: start;
|
||||
column-gap: 7px;
|
||||
|
||||
&--wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.pm-f-lbl {
|
||||
font-size: 11.5px;
|
||||
line-height: 1.25;
|
||||
text-align: right;
|
||||
color: rgb(0 0 0 / 68%);
|
||||
padding-top: 7px;
|
||||
|
||||
// Required marker, in the same red the legacy screen used.
|
||||
b {
|
||||
color: #c1121f;
|
||||
font-weight: 400;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.pm-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pm-checkbox-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.pm-radio-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.pm-add-nominee {
|
||||
color: $primary;
|
||||
height: fit-content;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* The running total of the shares entered, beside the button that adds another. Reads as ordinary
|
||||
* text while the split still adds up and turns to the warning colour when it does not, so the clerk
|
||||
* sees the state of the whole nomination without having to try to save it.
|
||||
*/
|
||||
.pm-share-total {
|
||||
align-self: center;
|
||||
margin-left: 12px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
.pm-share-total-bad {
|
||||
color: #b3261e;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pm-empty {
|
||||
color: rgb(0 0 0 / 50%);
|
||||
font-size: 14px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
* One nominee, laid out as fields that wrap rather than columns that must all fit.
|
||||
*
|
||||
* A fixed column per field only works while the count is fixed, and it is not - the Share % field
|
||||
* appears and disappears with the split mode, and a tenth column pushed the remove button onto a
|
||||
* line of its own. Each field instead states the width it needs to stay readable and the row breaks
|
||||
* where it runs out of space, so nothing is squeezed and nothing is orphaned.
|
||||
*/
|
||||
.pm-nominee-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 12px;
|
||||
align-items: start;
|
||||
padding: 12px 0;
|
||||
border-top: 1px dashed rgb(0 0 0 / 10%);
|
||||
|
||||
&:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Names and addresses need room; a date, Yes/No or a percentage does not. */
|
||||
.pm-f {
|
||||
flex: 1 1 170px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.pm-f--date {
|
||||
flex: 0 1 140px;
|
||||
}
|
||||
|
||||
.pm-f--tight {
|
||||
flex: 0 1 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.pm-remove-nominee {
|
||||
color: #b91c1c;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.pm-action-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid rgb(0 0 0 / 8%);
|
||||
}
|
||||
|
||||
.pm-callout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 0 24px;
|
||||
padding: 12px 16px;
|
||||
background: rgb(185 28 28 / 8%);
|
||||
border: 1px solid rgb(185 28 28 / 25%);
|
||||
border-radius: 6px;
|
||||
color: #b91c1c;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (width <= 1000px) {
|
||||
.pm-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Resolved name shown under a Client / Agent / Guardian id, as the legacy screen did in red. */
|
||||
.pm-hint--found {
|
||||
color: #15803d;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pm-hint--missing {
|
||||
color: #b91c1c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Explains why a block of fields is absent, so the screen does not just look unfinished. */
|
||||
.pm-note {
|
||||
margin: 4px 0 0;
|
||||
font-size: 0.8rem;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.pm-closed-badge {
|
||||
margin-left: 12px;
|
||||
padding: 3px 11px;
|
||||
border-radius: 11px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
background: rgb(0 0 0 / 7%);
|
||||
color: rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
/* Says whose details a block of fields is for, so the screen explains itself. */
|
||||
.pm-section__sub {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.45;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
}
|
||||
|
||||
.pm-search-ic {
|
||||
color: rgb(0 0 0 / 38%);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Money reads right to left, so a column of figures only lines up when it is right-aligned; the
|
||||
* tabular figures keep every digit the same width so the decimal points stack.
|
||||
*/
|
||||
input.pm-money {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* One row of a Client / Sub Type search list: the id, the name, and where it belongs. */
|
||||
.pm-opt {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* The "there are more" footer row. Quieter than a real option, since it is not one. */
|
||||
.pm-opt-more {
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.pm-opt-id {
|
||||
flex: 0 0 auto;
|
||||
min-width: 52px;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
color: var(--pl-accent, #b45309);
|
||||
}
|
||||
|
||||
/*
|
||||
The name is the reason the row exists, so it gets whatever width is going and is the last thing
|
||||
to be cut. Before this the branch was fixed-width and the name carried the ellipsis, so in the
|
||||
narrow panel every customer read as a single letter.
|
||||
*/
|
||||
|
||||
.pm-opt-main {
|
||||
flex: 1 1 auto;
|
||||
min-width: 8rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pm-opt-sub {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.75rem;
|
||||
color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
/* stylelint-disable no-duplicate-selectors -- the dense layout below deliberately re-targets the base selectors above to override them. */
|
||||
|
||||
/*
|
||||
* Dense data-entry layout.
|
||||
*
|
||||
* The screen this replaces fitted the whole form on one page - an officer opening accounts all day
|
||||
* reads it at a glance and never scrolls. Material's default field height and spacing turn the same
|
||||
* 56 fields into three screens' worth, so the whole card is tightened: shorter fields, smaller type,
|
||||
* and just enough room under each field for the hint that names the client or agent it resolved.
|
||||
*/
|
||||
|
||||
/*
|
||||
* With the label moved outside, the box only has to hold the value - so it loses the height Material
|
||||
* reserves for a floating label, and the form fits a screen instead of three.
|
||||
*/
|
||||
.pm-card {
|
||||
::ng-deep {
|
||||
.mat-mdc-form-field {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
min-height: 26px;
|
||||
padding-top: 3px !important;
|
||||
padding-bottom: 3px !important;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.mat-mdc-input-element,
|
||||
.mat-mdc-select-value-text {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
// Room for one line of hint - the resolved client/agent name that confirms the right record.
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
height: 14px;
|
||||
min-height: 14px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-hint {
|
||||
font-size: 10.5px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
// Suffix icons and the datepicker toggle default to a 48px touch target, which reopens all the
|
||||
// height just saved.
|
||||
.mat-mdc-icon-button.mat-mdc-button-base {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-icon-suffix {
|
||||
padding-left: 2px;
|
||||
|
||||
.mat-datepicker-toggle svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body-wrapper {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pm-tab-content {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Blocks drawn the way the screen this replaces drew them: a hairline between groups of fields,
|
||||
* with the group's name as a quiet caption above it rather than a heading bar of its own. An
|
||||
* operator who has filled this form a hundred times navigates by field position; one filling their
|
||||
* first still gets told which block is which.
|
||||
*/
|
||||
.pm-section {
|
||||
padding: 8px 0 2px;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 11%);
|
||||
|
||||
&__header {
|
||||
margin-bottom: 6px;
|
||||
gap: 0 10px;
|
||||
|
||||
// Decoration the legacy screen did without, and the row is tighter for losing it.
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pm-section__sub {
|
||||
font-size: 0.72rem;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.pm-grid {
|
||||
gap: 0 12px;
|
||||
}
|
||||
|
||||
.pm-checkbox-field,
|
||||
.pm-radio-group {
|
||||
height: 28px;
|
||||
|
||||
::ng-deep label {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
}
|
||||
|
||||
// The nominee grid is its own row of fields, so its labels sit above rather than beside - there is
|
||||
// no room for a label column eight fields across.
|
||||
.pm-nominee-row {
|
||||
gap: 0 10px;
|
||||
padding: 3px 0;
|
||||
|
||||
.pm-f {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
row-gap: 1px;
|
||||
}
|
||||
|
||||
.pm-f-lbl {
|
||||
text-align: left;
|
||||
padding-top: 0;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.pm-note {
|
||||
margin: 0;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.pm-action-bar {
|
||||
padding: 10px 18px;
|
||||
}
|
||||
|
||||
/*
|
||||
The customer's real deposit account. Not a form field - nothing here is typed, it is what the
|
||||
bank's books say - so it reads as a fact rather than sitting in an input box pretending to be one.
|
||||
*/
|
||||
.pm-account {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 3px 0;
|
||||
min-height: 26px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pm-account-no {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.pm-account-meta {
|
||||
font-size: 0.75rem;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
}
|
||||
|
||||
.pm-account-live {
|
||||
color: #15803d;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Said plainly: this party has no account behind it, which is a real gap, not a blank field. */
|
||||
.pm-account-missing {
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
color: #9b2c2c;
|
||||
}
|
||||
|
||||
/*
|
||||
Something the branch has to do, rather than something that has gone wrong - so it reads as an
|
||||
instruction in the warning colour, not an error in red like the closed-account notice.
|
||||
*/
|
||||
.pm-callout--action {
|
||||
background: rgb(180 83 9 / 8%);
|
||||
border-color: rgb(180 83 9 / 25%);
|
||||
color: #b45309;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,166 @@
|
||||
<!--
|
||||
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="pl-root">
|
||||
<div class="pl-header">
|
||||
<div class="pl-header-left">
|
||||
<div class="pl-header-ic"><fa-icon icon="clipboard-check"></fa-icon></div>
|
||||
<div class="pl-header-text">
|
||||
<h2>Accounts Due for Closure</h2>
|
||||
<p>Matured DDS accounts still open — pay the customer, then close the account.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-header-right">
|
||||
<button class="pl-create-btn" type="button" [routerLink]="['/accounts/dds']">
|
||||
<fa-icon icon="arrow-left"></fa-icon>
|
||||
<span>Party Master</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!loading && parties.length > 0) {
|
||||
<div class="pl-kpis">
|
||||
<div class="pl-kpi pl-kpi--purple" matTooltip="Matured accounts still open, at either step">
|
||||
<div class="pl-kpi-ic"><fa-icon icon="clipboard-check"></fa-icon></div>
|
||||
<div>
|
||||
<div class="pl-kpi-n">{{ parties.length | number }}</div>
|
||||
<div class="pl-kpi-l">Outstanding</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pl-kpi pl-kpi--teal"
|
||||
matTooltip="Money the bank is holding on matured accounts it has not yet paid out"
|
||||
>
|
||||
<div class="pl-kpi-ic"><fa-icon icon="wallet"></fa-icon></div>
|
||||
<div>
|
||||
<div class="pl-kpi-n">{{ totalPayable | number: '1.2-2' }}</div>
|
||||
<div class="pl-kpi-l">Still to Pay</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Already paid, waiting only on the close. Separated because it is the quicker half of the
|
||||
list and needs no customer to be reached. -->
|
||||
@if (awaitingCloseCount > 0) {
|
||||
<div class="pl-kpi pl-kpi--blue" matTooltip="Paid out in full — these only need closing">
|
||||
<div class="pl-kpi-ic"><fa-icon icon="check"></fa-icon></div>
|
||||
<div>
|
||||
<div class="pl-kpi-n">{{ awaitingCloseCount | number }}</div>
|
||||
<div class="pl-kpi-l">Ready to Close</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="pl-card">
|
||||
@if (loading) {
|
||||
<div class="pl-empty"><p>Loading…</p></div>
|
||||
} @else if (parties.length === 0) {
|
||||
<!-- An empty list here is good news, so it says so rather than looking like a failed load. -->
|
||||
<div class="pl-empty">
|
||||
<div class="pl-empty-ic dfc-empty-ic"><fa-icon icon="check"></fa-icon></div>
|
||||
<h3>Nothing to close</h3>
|
||||
<p>No DDS account has matured and been left open. Every matured account has been paid out and closed.</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="pl-table-wrap">
|
||||
<table class="pl-table dfc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Party</th>
|
||||
<th>Customer</th>
|
||||
<th>Collected By</th>
|
||||
<th>Matured On</th>
|
||||
<th class="num">Payable</th>
|
||||
<th class="num">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (party of parties; track party.id) {
|
||||
<tr class="pl-row">
|
||||
<td>
|
||||
<div class="pl-product-meta">
|
||||
<div class="pl-product-name">{{ party.partyCode }}</div>
|
||||
<div class="pl-product-sub dfc-account">{{ party.accountNo || party.savingsAccountNo || '—' }}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ party.partyName }}</td>
|
||||
<td>
|
||||
<div class="pl-product-meta">
|
||||
<div class="pl-product-name">{{ party.agentName || '—' }}</div>
|
||||
<div class="pl-product-sub">{{ party.agentCode }}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="pl-product-meta">
|
||||
<div class="pl-product-name">{{ party.maturityDate | dateFormat }}</div>
|
||||
<!-- How long the bank has been holding it. A maturity from months back is a
|
||||
different problem from yesterday's, and the date alone does not say so. -->
|
||||
<div class="pl-product-sub" [class.dfc-stale]="daysOverdue(party) > 30">
|
||||
{{ daysOverdue(party) }} {{ daysOverdue(party) === 1 ? 'day' : 'days' }} ago
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="num">
|
||||
@if (awaitingPayout(party)) {
|
||||
<strong>{{ party.currentBalance | number: '1.2-2' }}</strong>
|
||||
} @else {
|
||||
<!-- Paid. Shown as words rather than 0.00 so a settled account is not mistaken for
|
||||
one that was never collected on. -->
|
||||
<span class="dfc-paid">Paid out</span>
|
||||
}
|
||||
</td>
|
||||
<td class="num">
|
||||
<!--
|
||||
Two steps, and an account stays on this list through both: pay the customer, then
|
||||
close. The officer sees the balance fall to nil before closing, so nothing is
|
||||
closed on a payment nobody checked.
|
||||
-->
|
||||
@if (heldUnderLien(party)) {
|
||||
<!--
|
||||
Pledged against a loan. Offering Pay Out here would only be refused by the
|
||||
server, so the row says why instead — the deposit is the bank's security until
|
||||
the borrowing against it is cleared.
|
||||
-->
|
||||
<span
|
||||
class="dfc-lien"
|
||||
[matTooltip]="
|
||||
(party.amountHeldUnderLien | number: '1.2-2') +
|
||||
' is pledged against a loan. It is paid out once the loan is repaid and the lien released.'
|
||||
"
|
||||
>
|
||||
<fa-icon icon="lock"></fa-icon>
|
||||
<span>Held under lien</span>
|
||||
</span>
|
||||
} @else if (awaitingPayout(party)) {
|
||||
<button
|
||||
type="button"
|
||||
class="pl-action-btn pl-action-btn--edit"
|
||||
(click)="payOut(party)"
|
||||
matTooltip="Pay this money out to the customer"
|
||||
>
|
||||
<fa-icon icon="wallet"></fa-icon><span>Pay Out</span>
|
||||
</button>
|
||||
} @else {
|
||||
<button
|
||||
type="button"
|
||||
class="pl-action-btn dfc-close-btn"
|
||||
(click)="closeAccount(party)"
|
||||
matTooltip="The money has gone out — close this account"
|
||||
>
|
||||
<fa-icon icon="check"></fa-icon><span>Close Account</span>
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
@use 'assets/styles/product-list' as pl;
|
||||
|
||||
@include pl.product-list-styles;
|
||||
|
||||
/* An empty list here means the work is done, so the mark is the reassuring colour, not the grey one. */
|
||||
.dfc-empty-ic {
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.dfc-account {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* A maturity the bank has been sitting on for over a month. Called out because the date alone reads
|
||||
* the same whether it passed yesterday or in the spring, and the two are not the same problem.
|
||||
*/
|
||||
.dfc-stale {
|
||||
color: #b45309;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/*
|
||||
* An account whose money has already gone out. Words rather than 0.00, so a settled account is not
|
||||
* read as one that was never collected on - both would show the same figure.
|
||||
*/
|
||||
.dfc-paid {
|
||||
color: #15803d;
|
||||
font-weight: 600;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* The close action. Green rather than the list's usual blue because it is the step that finishes the
|
||||
* account, and it only ever appears on a row already paid.
|
||||
*/
|
||||
.dfc-close-btn {
|
||||
color: #15803d;
|
||||
border-color: rgb(21 128 61 / 30%);
|
||||
background: rgb(21 128 61 / 6%);
|
||||
|
||||
&:hover {
|
||||
background: rgb(21 128 61 / 12%);
|
||||
border-color: rgb(21 128 61 / 45%);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* A deposit pledged against a loan. Not a button, because there is nothing for the clerk to do here
|
||||
* until the loan is cleared — showing one would only lead to a refusal.
|
||||
*/
|
||||
.dfc-lien {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid rgb(90 74 156 / 30%);
|
||||
border-radius: 4px;
|
||||
background: rgb(90 74 156 / 8%);
|
||||
color: #5a4a9c;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Plain table rather than mat-table: this list is short by design and needs no sort or paging. */
|
||||
.dfc-table {
|
||||
th,
|
||||
td {
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
background: rgb(0 0 0 / 2%);
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/** Custom Services */
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
import { AlertService } from 'app/core/alert/alert.service';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
import { Dates } from 'app/core/utils/dates';
|
||||
|
||||
/** Custom Components */
|
||||
import { PayoutDialogComponent } from '../payout-dialog/payout-dialog.component';
|
||||
import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
|
||||
|
||||
/**
|
||||
* The DDS accounts whose term has run out and which are still open - the branch's list of closures
|
||||
* waiting to be done.
|
||||
*
|
||||
* A list of work, not a report. Nothing closes itself: a matured account is money the bank now owes
|
||||
* the customer, and where it goes has to be agreed with them, so each one waits here until an
|
||||
* officer deals with it. Before this existed the maturity date simply passed and nobody was told -
|
||||
* the bank held the money and the customer had to think to ask for it.
|
||||
*
|
||||
* Two steps, not one, and an account stays on this list through both:
|
||||
*
|
||||
* balance owing pay it out - to another account of theirs, or into matured-deposits payable
|
||||
* balance nil paid; close it
|
||||
*
|
||||
* Splitting them is what a branch actually does. The officer pays, sees the balance fall to nil and
|
||||
* the money land where it was meant to, and only then closes. One click doing both would close
|
||||
* accounts whose payment nobody had checked, and a closed account is far harder to put right.
|
||||
*
|
||||
* Oldest maturity first, because that is the one the bank has been holding longest.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-due-for-closure',
|
||||
templateUrl: './due-for-closure.component.html',
|
||||
styleUrls: ['./due-for-closure.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FaIconComponent
|
||||
]
|
||||
})
|
||||
export class DueForClosureComponent implements OnInit {
|
||||
private organizationService = inject(OrganizationService);
|
||||
private dialog = inject(MatDialog);
|
||||
private alertService = inject(AlertService);
|
||||
private settingsService = inject(SettingsService);
|
||||
private dateUtils = inject(Dates);
|
||||
|
||||
parties: any[] = [];
|
||||
loading = true;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.load();
|
||||
}
|
||||
|
||||
private load(): void {
|
||||
this.loading = true;
|
||||
this.organizationService.getPartiesDueForClosure().subscribe({
|
||||
next: (parties: any) => {
|
||||
this.parties = Array.isArray(parties) ? parties : parties?.pageItems || [];
|
||||
this.loading = false;
|
||||
},
|
||||
error: () => {
|
||||
this.parties = [];
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** What the bank is holding in total across every matured account still open. */
|
||||
get totalPayable(): number {
|
||||
return this.parties.reduce((sum, party) => sum + Number(party.currentBalance || 0), 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether this one is still waiting on its payment. Anything left on the account is the customer's
|
||||
* money, so it is paid before the account can be closed.
|
||||
*/
|
||||
awaitingPayout(party: any): boolean {
|
||||
return Number(party.currentBalance || 0) > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether this deposit is standing as security for a loan.
|
||||
*
|
||||
* The term has ended and the money is owed, but it cannot leave while it is pledged - so the row
|
||||
* says so rather than offering a Pay Out the server would refuse. A customer who needed cash before
|
||||
* their term ended borrowed against the deposit instead of breaking it; the deposit is paid when
|
||||
* that loan is cleared.
|
||||
*/
|
||||
heldUnderLien(party: any): boolean {
|
||||
return Number(party.amountHeldUnderLien || 0) > 0;
|
||||
}
|
||||
|
||||
/** How many are already paid and now only need closing - the quicker half of the list. */
|
||||
get awaitingCloseCount(): number {
|
||||
return this.parties.filter((party) => !this.awaitingPayout(party)).length;
|
||||
}
|
||||
|
||||
/**
|
||||
* How long the bank has been sitting on this one. Shown because a maturity from three months ago
|
||||
* is a different problem from one from yesterday, and the list alone would not say so.
|
||||
*/
|
||||
daysOverdue(party: any): number {
|
||||
const matured = this.toDate(party.maturityDate);
|
||||
if (!matured) {
|
||||
return 0;
|
||||
}
|
||||
return Math.max(0, Math.floor((Date.now() - matured.getTime()) / 86400000));
|
||||
}
|
||||
|
||||
/** The API sends dates as [year, month, day]; month is 1-based there and 0-based in Date. */
|
||||
private toDate(value: any): Date | null {
|
||||
if (Array.isArray(value) && value.length >= 3) {
|
||||
return new Date(value[0], value[1] - 1, value[2]);
|
||||
}
|
||||
return value ? new Date(value) : null;
|
||||
}
|
||||
|
||||
payOut(party: any): void {
|
||||
const dialogRef = this.dialog.open(PayoutDialogComponent, {
|
||||
data: party,
|
||||
width: '520px',
|
||||
autoFocus: false
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((payoutCommand: any) => {
|
||||
if (!payoutCommand) {
|
||||
return;
|
||||
}
|
||||
this.organizationService.payOutParty(party.id, payoutCommand).subscribe({
|
||||
next: (result: any) => {
|
||||
if (awaitingApproval(result)) {
|
||||
this.alertService.alert({
|
||||
type: 'Sent for Approval',
|
||||
message: `Payout of ${party.partyCode} is waiting for a manager's approval. Nothing has been paid yet.`
|
||||
});
|
||||
this.load();
|
||||
return;
|
||||
}
|
||||
this.alertService.alert({
|
||||
type: 'Party Paid Out',
|
||||
message: payoutCommand.toSavingsAccountNo
|
||||
? `${party.partyCode} paid into ${payoutCommand.toSavingsAccountNo} and the account is closed.`
|
||||
: `${party.partyCode} parked in Sundry in the customer's name and the account is closed.`
|
||||
});
|
||||
this.load();
|
||||
}
|
||||
// A refusal is shown by the platform's own error handler, which names the reason - repeating
|
||||
// it here would say the same thing twice.
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes an account whose money has already gone out. The server refuses one still carrying a
|
||||
* balance, so this cannot close an account out from under an unpaid customer.
|
||||
*
|
||||
* Asked for first, because closing is the one step here with no way back.
|
||||
*/
|
||||
closeAccount(party: any): void {
|
||||
const confirmation = this.dialog.open(ConfirmationDialogComponent, {
|
||||
data: {
|
||||
heading: `Close ${party.partyCode}?`,
|
||||
dialogContext: `${party.partyName}'s account has been paid out in full and can be closed. It cannot be reopened.`,
|
||||
type: 'warn'
|
||||
}
|
||||
});
|
||||
|
||||
confirmation.afterClosed().subscribe((response: any) => {
|
||||
if (!response?.confirm) {
|
||||
return;
|
||||
}
|
||||
const dateFormat = this.settingsService.dateFormat;
|
||||
const locale = this.settingsService.language.code;
|
||||
this.organizationService
|
||||
.closeParty(party.id, {
|
||||
closeDate: this.dateUtils.formatDate(this.settingsService.businessDate || new Date(), dateFormat),
|
||||
dateFormat,
|
||||
locale
|
||||
})
|
||||
.subscribe({
|
||||
next: (result: any) => {
|
||||
this.alertService.alert(
|
||||
awaitingApproval(result)
|
||||
? {
|
||||
type: 'Sent for Approval',
|
||||
message: `Closing ${party.partyCode} is waiting for a manager's approval. It stays open until then.`
|
||||
}
|
||||
: { type: 'Party Closed', message: `${party.partyCode} is closed.` }
|
||||
);
|
||||
this.load();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** Under maker-checker the command is only recorded - it has a command id but no resource yet. */
|
||||
function awaitingApproval(result: any): boolean {
|
||||
return !!result?.commandId && result?.resourceId == null;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
<!--
|
||||
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 class="nd-title">
|
||||
Nominees
|
||||
<span class="nd-party">{{ data.partyCode }} · {{ data.partyName }}</span>
|
||||
</h2>
|
||||
|
||||
<mat-dialog-content class="nd-body">
|
||||
@if (nominees.length === 0) {
|
||||
<p class="nd-empty">Nobody is nominated on this account.</p>
|
||||
} @else {
|
||||
<p class="nd-mode">
|
||||
@if (bySequence) {
|
||||
Paid in the order listed — the first named who can be found receives the deposit.
|
||||
} @else {
|
||||
Split by share of the deposit.
|
||||
}
|
||||
</p>
|
||||
|
||||
<table class="nd-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
@if (bySequence) {
|
||||
Order
|
||||
} @else {
|
||||
#
|
||||
}
|
||||
</th>
|
||||
<th>Name</th>
|
||||
<th>Relation</th>
|
||||
<th>Nominated</th>
|
||||
@if (!bySequence) {
|
||||
<th class="nd-num">Share</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (nominee of nominees; track nominee.id; let i = $index) {
|
||||
<tr>
|
||||
<!-- The stated order where there is one; otherwise just the position in the list. -->
|
||||
<td class="nd-seq">{{ nominee.sequenceNo ?? i + 1 }}</td>
|
||||
<td>
|
||||
{{ nominee.name }}
|
||||
@if (nominee.minor) {
|
||||
<span class="nd-minor">minor · guardian {{ nominee.guardianName || '—' }}</span>
|
||||
}
|
||||
</td>
|
||||
<td>{{ nominee.relation }}</td>
|
||||
<td>{{ nominee.nominationDate | dateFormat }}</td>
|
||||
@if (!bySequence) {
|
||||
<td class="nd-num">
|
||||
@if (nominee.sharePercent !== null && nominee.sharePercent !== undefined) {
|
||||
{{ nominee.sharePercent }}%
|
||||
} @else {
|
||||
—
|
||||
}
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@if (shareWarning) {
|
||||
<p class="nd-warn">{{ shareWarning }}</p>
|
||||
}
|
||||
}
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-raised-button color="primary" mat-dialog-close>Close</button>
|
||||
</mat-dialog-actions>
|
||||
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
.nd-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nd-party {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
}
|
||||
|
||||
.nd-body {
|
||||
min-width: 420px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.nd-mode {
|
||||
margin: 0 0 12px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
.nd-empty {
|
||||
margin: 8px 0;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
}
|
||||
|
||||
.nd-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(0 0 0 / 50%);
|
||||
padding: 0 8px 6px 0;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 8px 8px 0;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 6%);
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
/* Shares line up to be read down the column, not across the row. */
|
||||
.nd-num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.nd-seq {
|
||||
width: 32px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.nd-minor {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.nd-warn {
|
||||
margin: 12px 0 0;
|
||||
font-size: 13px;
|
||||
color: #b3261e;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
/** Custom Pipes */
|
||||
import { DateFormatPipe } from 'app/pipes/date-format.pipe';
|
||||
|
||||
/**
|
||||
* Who this account is nominated to, read without opening it for editing.
|
||||
*
|
||||
* A clerk asked "who is on this account" has one question, not an intention to change anything, and
|
||||
* the edit form answers it only after a load, a tab and a scroll - with every field live the whole
|
||||
* time. This states it and closes.
|
||||
*
|
||||
* What is shown follows the split the account was nominated under: a share per nominee under
|
||||
* Percentage, and the order they are paid in under Sequence, because that ordering is the whole of
|
||||
* what Sequence records.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-nominee-list-dialog',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatDialogModule,
|
||||
MatButtonModule,
|
||||
DateFormatPipe
|
||||
],
|
||||
templateUrl: './nominee-list-dialog.component.html',
|
||||
styleUrls: ['./nominee-list-dialog.component.scss']
|
||||
})
|
||||
export class NomineeListDialogComponent {
|
||||
/** { partyCode, partyName, splitMode, nominees } */
|
||||
data = inject<any>(MAT_DIALOG_DATA);
|
||||
|
||||
get bySequence(): boolean {
|
||||
return this.data?.splitMode === 'Sequence';
|
||||
}
|
||||
|
||||
get nominees(): any[] {
|
||||
return this.data?.nominees || [];
|
||||
}
|
||||
|
||||
/**
|
||||
* What the shares come to. Shown only when it is not the whole deposit - a nomination recorded
|
||||
* before shares were captured reads as complete otherwise, and the remainder has nobody named
|
||||
* to receive it.
|
||||
*/
|
||||
get shareTotal(): number | null {
|
||||
if (this.bySequence) {
|
||||
return null;
|
||||
}
|
||||
const stated = this.nominees.filter((n) => n?.sharePercent !== null && n?.sharePercent !== undefined);
|
||||
if (stated.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return stated.reduce((sum, n) => sum + Number(n.sharePercent || 0), 0);
|
||||
}
|
||||
|
||||
get shareWarning(): string | null {
|
||||
if (this.bySequence) {
|
||||
// Under Sequence the order is the whole of the nomination, so an order nobody stated is the
|
||||
// same gap a missing share is under Percentage.
|
||||
const stated = this.nominees.filter((n) => n?.sequenceNo !== null && n?.sequenceNo !== undefined);
|
||||
return stated.length === this.nominees.length ? null : 'No order was recorded against these nominees.';
|
||||
}
|
||||
const total = this.shareTotal;
|
||||
if (total === null) {
|
||||
return 'No shares were recorded against these nominees.';
|
||||
}
|
||||
return total === 100 ? null : `The shares come to ${total}%, not 100%.`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
<!--
|
||||
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="pl-root">
|
||||
<div class="pl-header">
|
||||
<div class="pl-header-left">
|
||||
<div class="pl-header-ic"><fa-icon icon="users"></fa-icon></div>
|
||||
<div class="pl-header-text">
|
||||
<h2>Party Master</h2>
|
||||
<p>The DDS accounts on file — each one a customer collected from daily.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-header-right">
|
||||
<div class="pl-count-chip" matTooltip="Total parties">
|
||||
<fa-icon icon="users"></fa-icon>
|
||||
<strong>{{ totalCount }}</strong>
|
||||
<span>{{ totalCount === 1 ? 'party' : 'parties' }}</span>
|
||||
</div>
|
||||
<button class="pl-create-btn" type="button" [routerLink]="['create']">
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
<span>Create Party</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Matured accounts still open. Money the bank owes a customer that nobody has been told about, so
|
||||
it is called out on the screen an officer already opens rather than left on a report they would
|
||||
have to think to run.
|
||||
-->
|
||||
@if (dueForClosureCount > 0) {
|
||||
<a class="pm-due-banner" [routerLink]="['dueforclosure']">
|
||||
<fa-icon icon="clipboard-check" class="pm-due-banner__ic"></fa-icon>
|
||||
<span class="pm-due-banner__text">
|
||||
<strong>{{ dueForClosureCount }}</strong>
|
||||
{{ dueForClosureCount === 1 ? 'account has' : 'accounts have' }} matured and
|
||||
{{ dueForClosureCount === 1 ? 'is' : 'are' }} still open —
|
||||
<!-- Nil once every one of them has been paid: what is left then is the closing, not the money. -->
|
||||
@if (dueForClosurePayable > 0) {
|
||||
<strong>{{ dueForClosurePayable | number: '1.2-2' }}</strong> still owed to customers.
|
||||
} @else {
|
||||
paid in full, waiting to be closed.
|
||||
}
|
||||
</span>
|
||||
<span class="pm-due-banner__cta"
|
||||
>Settle {{ dueForClosureCount === 1 ? 'it' : 'them' }} <fa-icon icon="arrow-right"></fa-icon
|
||||
></span>
|
||||
</a>
|
||||
}
|
||||
|
||||
<div class="pl-kpis">
|
||||
<div class="pl-kpi pl-kpi--blue">
|
||||
<div class="pl-kpi-ic"><fa-icon icon="users"></fa-icon></div>
|
||||
<div>
|
||||
<div class="pl-kpi-n">{{ activeCount | number }}</div>
|
||||
<div class="pl-kpi-l">Open Accounts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pl-kpi pl-kpi--purple"
|
||||
matTooltip="What the agents should collect between them on a full collection day"
|
||||
>
|
||||
<div class="pl-kpi-ic"><fa-icon icon="calendar-day"></fa-icon></div>
|
||||
<div>
|
||||
<div class="pl-kpi-n">{{ totalDailyDue | number: '1.2-2' }}</div>
|
||||
<div class="pl-kpi-l">Daily Collection Due</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-kpi pl-kpi--teal" matTooltip="Every open account's running balance added up">
|
||||
<div class="pl-kpi-ic"><fa-icon icon="wallet"></fa-icon></div>
|
||||
<div>
|
||||
<div class="pl-kpi-n">{{ totalCurrentBalance | number: '1.2-2' }}</div>
|
||||
<div class="pl-kpi-l">Total Deposits Held</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-card">
|
||||
<div class="pl-toolbar">
|
||||
<div class="pl-search">
|
||||
<fa-icon icon="search" class="pl-search-ic"></fa-icon>
|
||||
<input
|
||||
type="text"
|
||||
(input)="applyFilter($any($event.target).value)"
|
||||
placeholder="Search by code, name or agent…"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (totalCount === 0) {
|
||||
<div class="pl-empty">
|
||||
<div class="pl-empty-ic"><fa-icon icon="users"></fa-icon></div>
|
||||
<h3>No parties yet</h3>
|
||||
<p>Open one so an agent can start collecting daily deposits against it.</p>
|
||||
<button class="pl-create-btn" type="button" [routerLink]="['create']">
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
<span>Create Party</span>
|
||||
</button>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="pl-table-wrap">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="pl-table">
|
||||
<ng-container matColumnDef="partyCode">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Party Code</th>
|
||||
<td mat-cell *matCellDef="let p">
|
||||
<div class="pl-product-cell">
|
||||
<div class="pl-product-icon"><fa-icon icon="user"></fa-icon></div>
|
||||
<div class="pl-product-meta">
|
||||
<div class="pl-product-name">{{ p.partyCode }}</div>
|
||||
<div class="pl-product-sub">{{ p.city || '—' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="partyName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Party Name</th>
|
||||
<td mat-cell *matCellDef="let p">{{ p.partyName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="subType">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Sub Type</th>
|
||||
<td mat-cell *matCellDef="let p">
|
||||
<span class="pl-tag" [matTooltip]="p.subType">{{ p.subTypeDescription || p.subType }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="agentName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Collected By</th>
|
||||
<td mat-cell *matCellDef="let p">
|
||||
<div class="pl-product-meta">
|
||||
<div class="pl-product-name">{{ p.agentName || '—' }}</div>
|
||||
<div class="pl-product-sub">{{ p.agentCode }}</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!--
|
||||
The customer's real deposit account. A party without one is money the bank's books do not
|
||||
know about, so it is called out rather than shown as a blank cell.
|
||||
-->
|
||||
<ng-container matColumnDef="savingsAccountNo">
|
||||
<th mat-header-cell *matHeaderCellDef>DDS Account</th>
|
||||
<td mat-cell *matCellDef="let p">
|
||||
@if (p.accountNo) {
|
||||
<div class="pl-product-meta">
|
||||
<div class="pm-list-account">{{ p.accountNo }}</div>
|
||||
<div class="pl-product-sub">{{ p.subTypeDescription || p.subType }}</div>
|
||||
</div>
|
||||
} @else if (p.savingsAccountNo) {
|
||||
<div class="pl-product-meta">
|
||||
<div class="pm-list-account">{{ p.savingsAccountNo }}</div>
|
||||
<div class="pl-product-sub">{{ p.savingsAccountStatus }}</div>
|
||||
</div>
|
||||
} @else {
|
||||
<span class="pm-list-no-account">Not opened</span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="dailyDepositAmount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header class="num">Daily Deposit</th>
|
||||
<td mat-cell *matCellDef="let p" class="num">{{ p.dailyDepositAmount | number: '1.2-2' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="currentBalance">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header class="num">Current Balance</th>
|
||||
<td mat-cell *matCellDef="let p" class="num">
|
||||
<strong>{{ p.currentBalance | number: '1.2-2' }}</strong>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef>Status</th>
|
||||
<td mat-cell *matCellDef="let p">
|
||||
<span class="pm-pill" [class.pm-pill--off]="p.status === 'CLOSED'">
|
||||
{{ p.status === 'CLOSED' ? 'Closed' : 'Active' }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="nominees">
|
||||
<th mat-header-cell *matHeaderCellDef>Nominees</th>
|
||||
<td mat-cell *matCellDef="let p">
|
||||
@if (nomineeCount(p) > 0) {
|
||||
<button
|
||||
type="button"
|
||||
class="pl-nominee-btn"
|
||||
(click)="showNominees(p)"
|
||||
matTooltip="See who this account is nominated to"
|
||||
>
|
||||
{{ nomineeCount(p) }} nominated
|
||||
</button>
|
||||
} @else {
|
||||
<span class="pl-muted">None</span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef class="num">Actions</th>
|
||||
<td mat-cell *matCellDef="let p" class="num">
|
||||
<button
|
||||
type="button"
|
||||
class="pl-action-btn pl-action-btn--edit"
|
||||
[routerLink]="[p.id, 'edit']"
|
||||
[matTooltip]="p.status === 'CLOSED' ? 'View this closed party' : 'Edit this party'"
|
||||
>
|
||||
<fa-icon [icon]="p.status === 'CLOSED' ? 'eye' : 'edit'"></fa-icon>
|
||||
<span>{{ p.status === 'CLOSED' ? 'View' : 'Edit' }}</span>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
class="pl-row"
|
||||
[class.pm-row--closed]="row.status === 'CLOSED'"
|
||||
></tr>
|
||||
</table>
|
||||
|
||||
@if (filteredCount === 0 && totalCount > 0) {
|
||||
<div class="pl-no-match">
|
||||
<fa-icon icon="search"></fa-icon>
|
||||
<span>No parties match your filter.</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
@use 'assets/styles/product-list' as pl;
|
||||
|
||||
@include pl.product-list-styles;
|
||||
|
||||
/* Party-specific amber accent */
|
||||
:host {
|
||||
--pl-accent: #b45309;
|
||||
--pl-accent-l: #fef3c7;
|
||||
}
|
||||
|
||||
/* A closed party stays listed - its collections and interest are still on the books. */
|
||||
.pm-row--closed td:not(.num) {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.pm-pill {
|
||||
display: inline-block;
|
||||
padding: 3px 11px;
|
||||
border-radius: 11px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.7;
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pm-pill--off {
|
||||
background: rgb(0 0 0 / 7%);
|
||||
color: rgb(0 0 0 / 52%);
|
||||
}
|
||||
|
||||
/* The customer's real deposit account number, in the list. */
|
||||
.pm-list-account {
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/*
|
||||
A party with no account behind it. Called out rather than left blank: the balance beside it is
|
||||
money the bank's own books have no record of, which is the thing worth noticing here.
|
||||
*/
|
||||
.pm-list-no-account {
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
color: #9b2c2c;
|
||||
}
|
||||
|
||||
/*
|
||||
Matured accounts still open. Deliberately loud: it is money the bank owes a customer who has not
|
||||
been told, and every day it sits there is a day the bank is holding somebody else's money. Styled
|
||||
as a link to the work rather than a notice about it - reading it should be the same click as
|
||||
starting on it.
|
||||
*/
|
||||
.pm-due-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 0 0 14px;
|
||||
padding: 12px 16px;
|
||||
background: rgb(180 83 9 / 8%);
|
||||
border: 1px solid rgb(180 83 9 / 28%);
|
||||
border-radius: 8px;
|
||||
color: #92400e;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgb(180 83 9 / 13%);
|
||||
}
|
||||
|
||||
&__ic {
|
||||
font-size: 1.05rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__text {
|
||||
flex: 1 1 auto;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 700px) {
|
||||
.pm-due-banner {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The nominee count, which opens the list of names rather than the account itself.
|
||||
*
|
||||
* Styled as text that can be clicked rather than as a second action button: the row already has one
|
||||
* action, and a pair of equal-looking buttons would put "look at this" beside "change this" as
|
||||
* though the two were the same kind of thing.
|
||||
*/
|
||||
.pl-nominee-btn {
|
||||
border: 0;
|
||||
background: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: var(--pl-accent);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
|
||||
&:hover {
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.pl-muted {
|
||||
color: rgb(0 0 0 / 40%);
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, ViewChild, inject } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
||||
import {
|
||||
MatTable,
|
||||
MatTableDataSource,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
MatCellDef,
|
||||
MatCell,
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow
|
||||
} from '@angular/material/table';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
/** Custom Services */
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
|
||||
/** Custom Components */
|
||||
import { NomineeListDialogComponent } from './nominee-list-dialog/nominee-list-dialog.component';
|
||||
|
||||
/**
|
||||
* Party Master list.
|
||||
*
|
||||
* The DDS accounts on file - each one a customer's daily deposit account, opened under a scheme
|
||||
* (Sub Type) and assigned to the agent who collects for it. Follows the same list -> create/edit
|
||||
* shape as Agent Master and the product lists, and shares their stylesheet.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-party-master',
|
||||
templateUrl: './party-master.component.html',
|
||||
styleUrls: ['./party-master.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FaIconComponent,
|
||||
MatTable,
|
||||
MatSort,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
MatSortHeader,
|
||||
MatCellDef,
|
||||
MatCell,
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow,
|
||||
MatPaginator,
|
||||
MatTooltip
|
||||
]
|
||||
})
|
||||
export class PartyMasterComponent implements OnInit {
|
||||
private organizationService = inject(OrganizationService);
|
||||
private dialog = inject(MatDialog);
|
||||
|
||||
displayedColumns: string[] = [
|
||||
'partyCode',
|
||||
'partyName',
|
||||
'subType',
|
||||
'agentName',
|
||||
'savingsAccountNo',
|
||||
'dailyDepositAmount',
|
||||
'currentBalance',
|
||||
'nominees',
|
||||
'status',
|
||||
'actions'
|
||||
];
|
||||
|
||||
/**
|
||||
* Who a party is nominated to, without opening it for editing.
|
||||
*
|
||||
* Asked often enough to belong on the list, and answered from what the list already holds - the
|
||||
* parties come back with their nominees on them, so this opens rather than fetches.
|
||||
*/
|
||||
showNominees(party: any): void {
|
||||
this.dialog.open(NomineeListDialogComponent, {
|
||||
data: {
|
||||
partyCode: party.partyCode,
|
||||
partyName: party.partyName,
|
||||
splitMode: party.nomineeSplitMode,
|
||||
nominees: party.nominees || []
|
||||
},
|
||||
autoFocus: false
|
||||
});
|
||||
}
|
||||
|
||||
/** How many people are named on an account, which is what the list column shows. */
|
||||
nomineeCount(party: any): number {
|
||||
return (party?.nominees || []).length;
|
||||
}
|
||||
|
||||
/**
|
||||
* Matured accounts still open, and what they add up to. Shown here because this is the screen an
|
||||
* officer already opens - money the bank owes a customer should not wait on somebody thinking to
|
||||
* run a report.
|
||||
*/
|
||||
dueForClosureCount = 0;
|
||||
dueForClosurePayable = 0;
|
||||
|
||||
dataSource: MatTableDataSource<any> = new MatTableDataSource<any>([]);
|
||||
parties: any[] = [];
|
||||
filteredCount = 0;
|
||||
|
||||
paginator: MatPaginator;
|
||||
sort: MatSort;
|
||||
|
||||
// The table sits inside an @if, so these only exist once the list has loaded. Read statically they
|
||||
// were never there, the table was never paged, and the paginator read "0 of 0" over a full list.
|
||||
@ViewChild(MatPaginator) set matPaginator(paginator: MatPaginator) {
|
||||
this.paginator = paginator;
|
||||
if (paginator) {
|
||||
this.dataSource.paginator = paginator;
|
||||
}
|
||||
}
|
||||
|
||||
@ViewChild(MatSort) set matSort(sort: MatSort) {
|
||||
this.sort = sort;
|
||||
if (sort) {
|
||||
this.dataSource.sort = sort;
|
||||
}
|
||||
}
|
||||
|
||||
get totalCount(): number {
|
||||
return this.parties.length;
|
||||
}
|
||||
|
||||
get activeCount(): number {
|
||||
return this.parties.filter((party) => party.status !== 'CLOSED').length;
|
||||
}
|
||||
|
||||
/** What the whole book is worth today - every open account's running balance added up. */
|
||||
get totalCurrentBalance(): number {
|
||||
return this.parties.reduce((sum, party) => sum + Number(party.currentBalance || 0), 0);
|
||||
}
|
||||
|
||||
/** What the agents should be collecting between them on a full collection day. */
|
||||
get totalDailyDue(): number {
|
||||
return this.parties
|
||||
.filter((party) => party.status !== 'CLOSED')
|
||||
.reduce((sum, party) => sum + Number(party.dailyDepositAmount || 0), 0);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.organizationService.getParties().subscribe((parties: any[]) => {
|
||||
this.parties = parties || [];
|
||||
this.dataSource = new MatTableDataSource(this.parties);
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource.sort = this.sort;
|
||||
this.filteredCount = this.parties.length;
|
||||
this.dataSource.connect().subscribe((rows) => (this.filteredCount = rows.length));
|
||||
});
|
||||
|
||||
this.loadDueForClosure();
|
||||
}
|
||||
|
||||
/**
|
||||
* Matured accounts still open. A separate call rather than filtered out of the list above, because
|
||||
* the server decides what counts as matured - comparing dates here would drift from it the first
|
||||
* time either changed.
|
||||
*/
|
||||
private loadDueForClosure(): void {
|
||||
this.organizationService.getPartiesDueForClosure().subscribe({
|
||||
next: (due: any) => {
|
||||
const rows = Array.isArray(due) ? due : due?.pageItems || [];
|
||||
this.dueForClosureCount = rows.length;
|
||||
this.dueForClosurePayable = rows.reduce(
|
||||
(sum: number, party: any) => sum + Number(party.currentBalance || 0),
|
||||
0
|
||||
);
|
||||
},
|
||||
// The party list is the point of this screen; a failed banner must not take it down with it.
|
||||
error: () => {
|
||||
this.dueForClosureCount = 0;
|
||||
this.dueForClosurePayable = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
applyFilter(filterValue: string): void {
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
<!--
|
||||
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>Pay out {{ data.partyCode }}</h2>
|
||||
|
||||
<mat-dialog-content>
|
||||
<!-- What is being paid and to whom, stated once at the top so the officer confirms against the
|
||||
customer in front of them rather than against a row they clicked a moment ago. -->
|
||||
<div class="po-summary">
|
||||
<div class="po-summary__row">
|
||||
<span class="po-summary__label">Customer</span>
|
||||
<span class="po-summary__value">{{ data.partyName }}</span>
|
||||
</div>
|
||||
<div class="po-summary__row">
|
||||
<span class="po-summary__label">Matured on</span>
|
||||
<span class="po-summary__value">{{ data.maturityDate | dateFormat }}</span>
|
||||
</div>
|
||||
<div class="po-summary__row">
|
||||
<span class="po-summary__label">Opened on</span>
|
||||
<span class="po-summary__value">{{ data.openingDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
@if (breakdown) {
|
||||
<div class="po-breakdown">
|
||||
<div class="po-summary__row">
|
||||
<span class="po-summary__label">Deposits collected</span>
|
||||
<span class="po-summary__value">{{ breakdown.deposits | number: '1.2-2' }}</span>
|
||||
</div>
|
||||
@if (breakdown.transfersIn > 0) {
|
||||
<div class="po-summary__row">
|
||||
<span class="po-summary__label">Transferred in</span>
|
||||
<span class="po-summary__value">+ {{ breakdown.transfersIn | number: '1.2-2' }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (breakdown.transfersOut > 0) {
|
||||
<div class="po-summary__row">
|
||||
<span class="po-summary__label">Transferred out</span>
|
||||
<span class="po-summary__value">− {{ breakdown.transfersOut | number: '1.2-2' }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (breakdown.other !== 0) {
|
||||
<div class="po-summary__row">
|
||||
<span class="po-summary__label">Other (opening balance / adjustments)</span>
|
||||
<span class="po-summary__value">{{ breakdown.other | number: '1.2-2' }}</span>
|
||||
</div>
|
||||
}
|
||||
<div class="po-summary__row">
|
||||
<span class="po-summary__label">
|
||||
Interest @ {{ data.interestRate | number: '1.2-2' }}%
|
||||
<span class="po-summary__note"
|
||||
>{{ data.openingDate | dateFormat }} to {{ data.interestDate | dateFormat }}</span
|
||||
>
|
||||
</span>
|
||||
<span class="po-summary__value">+ {{ breakdown.interest | number: '1.2-2' }}</span>
|
||||
</div>
|
||||
@if (breakdown.interestToPost > 0) {
|
||||
<div class="po-summary__row">
|
||||
<span class="po-summary__label"> Interest calculated, posted with this payout </span>
|
||||
<span class="po-summary__value">+ {{ breakdown.interestToPost | number: '1.2-2' }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="po-summary__row po-summary__row--amount">
|
||||
<span class="po-summary__label">Total payable</span>
|
||||
<span class="po-summary__value">{{ (breakdown ? breakdown.total : data.currentBalance) | number: '1.2-2' }}</span>
|
||||
</div>
|
||||
@if (interestStillToCome) {
|
||||
<p class="po-summary__note">
|
||||
Interest from {{ data.interestDate | dateFormat }} to {{ data.maturityDate | dateFormat }} is not worked out yet
|
||||
- it is added when this is paid out, so the amount paid will be a little more.
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
<p class="po-summary__note">
|
||||
Paying out closes {{ data.partyCode }} - the balance is nil afterwards and it takes nothing more.
|
||||
</p>
|
||||
|
||||
@if (loading) {
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
} @else {
|
||||
<p class="po-question">Where should this go?</p>
|
||||
|
||||
<mat-radio-group [(ngModel)]="destination" class="po-choices">
|
||||
<mat-radio-button value="own" [disabled]="ownAccounts.length === 0" class="po-choice">
|
||||
<span class="po-choice__title">Into another account of theirs here</span>
|
||||
@if (ownAccounts.length === 0) {
|
||||
<span class="po-choice__note">{{ data.partyName }} has no other savings account at this bank</span>
|
||||
} @else {
|
||||
<span class="po-choice__note">Moved across today</span>
|
||||
}
|
||||
</mat-radio-button>
|
||||
|
||||
@if (destination === 'own' && ownAccounts.length > 0) {
|
||||
<mat-form-field appearance="outline" class="po-account">
|
||||
<mat-label>Account</mat-label>
|
||||
<mat-select [(ngModel)]="selectedAccountNo" panelWidth="min(28rem, 90vw)">
|
||||
@for (account of ownAccounts; track account.id) {
|
||||
<mat-option [value]="account.accountNo"> {{ account.accountNo }} · {{ account.productName }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
<mat-radio-button value="other" class="po-choice">
|
||||
<span class="po-choice__title">Park in Sundry</span>
|
||||
<span class="po-choice__note"
|
||||
>When the customer has no account here - held in the bank's Sundry account in their name</span
|
||||
>
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
@if (destination === 'other') {
|
||||
<mat-form-field appearance="outline" class="po-account">
|
||||
<mat-label>Park in GL account</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[ngModel]="sundrySearch"
|
||||
(ngModelChange)="onSundryTyped($event)"
|
||||
[matAutocomplete]="sundryAuto"
|
||||
placeholder="Type GL code or name…"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#sundryAuto="matAutocomplete"
|
||||
panelWidth="min(28rem, 90vw)"
|
||||
[displayWith]="sundryDisplay"
|
||||
(optionSelected)="pickSundry($event.option.value)"
|
||||
>
|
||||
@for (account of sundryOptions; track account.id) {
|
||||
<mat-option [value]="account">{{ account.glCode }} · {{ account.name }}</mat-option>
|
||||
}
|
||||
@if (sundryOptions.length === 0) {
|
||||
<mat-option disabled>No liability GL matches</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
@if (!sundryGlAccountId) {
|
||||
<mat-hint class="po-hint-warn">Search and pick your bank's Sundry GL account</mat-hint>
|
||||
} @else {
|
||||
<mat-hint>The balance is held here in the customer's name until it is paid to them</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (destination === 'other') {
|
||||
<!-- Said plainly, because the officer will be asked by the customer when the money arrives. -->
|
||||
<div class="po-callout">
|
||||
The money comes off {{ data.partyCode }} today and is held in the Sundry account chosen above against
|
||||
{{ data.partyName }} until it is paid to them - so it is accounted for the whole time and nothing is lost.
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-stroked-button mat-dialog-close>Cancel</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!canPayOut" (click)="payOut()">Pay out & Close</button>
|
||||
</mat-dialog-actions>
|
||||
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/* What is being paid and to whom. Read against the customer standing there, so it comes first. */
|
||||
.po-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 18px;
|
||||
background: rgb(0 0 0 / 3%);
|
||||
border-radius: 6px;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
font-size: 0.85rem;
|
||||
|
||||
/* The figure the officer is about to hand over - given the weight that deserves. */
|
||||
&--amount {
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid rgb(0 0 0 / 8%);
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
color: rgb(0 0 0 / 55%);
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
&__note {
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
}
|
||||
|
||||
/* How the amount payable is made up - one line per source, adding up to the total below. */
|
||||
.po-breakdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding-top: 6px;
|
||||
border-top: 1px dashed rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.po-question {
|
||||
margin: 0 0 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.po-choices {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Each choice carries its own consequence underneath it. Two radio labels alone would not tell an
|
||||
* officer that one keeps the money inside the bank and the other starts it on its way out.
|
||||
*/
|
||||
.po-choice {
|
||||
display: block;
|
||||
padding: 4px 0;
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
&__note {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.po-account {
|
||||
width: 100%;
|
||||
margin: 8px 0 4px 32px;
|
||||
max-width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
/* What will actually happen, in the words the customer will ask about. */
|
||||
.po-callout {
|
||||
margin-top: 12px;
|
||||
padding: 10px 12px;
|
||||
background: rgb(180 83 9 / 8%);
|
||||
border: 1px solid rgb(180 83 9 / 22%);
|
||||
border-radius: 6px;
|
||||
color: #92400e;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.po-hint-warn {
|
||||
color: #c62828;
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
|
||||
/** Custom Services */
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
|
||||
/** Custom Pipes */
|
||||
import { DateFormatPipe } from 'app/pipes/date-format.pipe';
|
||||
|
||||
/**
|
||||
* Where a matured DDS account's money should go.
|
||||
*
|
||||
* Two destinations, and the difference is whether the money leaves the bank. Another account of the
|
||||
* customer's here is a move across the books. Anywhere else means a transfer out, which clears later
|
||||
* or fails - so the money is parked in the matured-deposits payable account first and the branch
|
||||
* sends it on from there, rather than being launched into a gap where it has left one account and
|
||||
* arrived at none.
|
||||
*
|
||||
* The amount is not asked for. It is whatever the account holds, worked out by the server: a figure
|
||||
* typed here could pay out more than the customer has, or quietly leave some behind.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-payout-dialog',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatDialogModule,
|
||||
MatButtonModule,
|
||||
MatRadioModule,
|
||||
MatSelectModule,
|
||||
MatAutocompleteModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatProgressBarModule,
|
||||
DateFormatPipe
|
||||
],
|
||||
templateUrl: './payout-dialog.component.html',
|
||||
styleUrls: ['./payout-dialog.component.scss']
|
||||
})
|
||||
export class PayoutDialogComponent implements OnInit {
|
||||
private organizationService = inject(OrganizationService);
|
||||
private dialogRef = inject(MatDialogRef<PayoutDialogComponent>);
|
||||
data = inject<any>(MAT_DIALOG_DATA);
|
||||
|
||||
/** 'own' moves it to another account here; 'other' parks it for a transfer to another bank. */
|
||||
destination: 'own' | 'other' = 'own';
|
||||
|
||||
/**
|
||||
* The customer's accounts this maturity can be paid into.
|
||||
*
|
||||
* Worked out by the server, which applies the same conditions the payout enforces: an active
|
||||
* savings account of theirs, not a fixed or recurring deposit, and not one of their DDS scheme
|
||||
* accounts. Filtering here instead let the two drift - the list once offered a scheme account
|
||||
* belonging to a party that had already closed, which would have stranded the money.
|
||||
*/
|
||||
ownAccounts: any[] = [];
|
||||
selectedAccountNo = '';
|
||||
|
||||
/** Where the balance is parked when the customer has no account here. */
|
||||
sundryAccounts: any[] = [];
|
||||
sundryGlAccountId: number | null = null;
|
||||
/** What is typed in the GL box - a code or part of a name. */
|
||||
sundrySearch = '';
|
||||
|
||||
/** The accounts matching what is typed, by GL code or name, in any case. */
|
||||
get sundryOptions(): any[] {
|
||||
const typed = this.sundrySearch.trim().toLowerCase();
|
||||
if (!typed || typed === this.sundryLabel(this.chosenSundry).toLowerCase()) {
|
||||
return this.sundryAccounts;
|
||||
}
|
||||
return this.sundryAccounts.filter(
|
||||
(account: any) =>
|
||||
String(account.glCode).toLowerCase().includes(typed) ||
|
||||
String(account.name || '')
|
||||
.toLowerCase()
|
||||
.includes(typed)
|
||||
);
|
||||
}
|
||||
|
||||
get chosenSundry(): any {
|
||||
return this.sundryAccounts.find((account: any) => account.id === this.sundryGlAccountId);
|
||||
}
|
||||
|
||||
/** Shows a picked account in the box as its code and name. */
|
||||
readonly sundryDisplay = (value: any): string =>
|
||||
value && typeof value === 'object' ? this.sundryLabel(value) : value || '';
|
||||
|
||||
sundryLabel(account: any): string {
|
||||
return account ? `${account.glCode} · ${account.name}` : '';
|
||||
}
|
||||
|
||||
pickSundry(account: any): void {
|
||||
this.sundryGlAccountId = account ? account.id : null;
|
||||
this.sundrySearch = this.sundryLabel(account);
|
||||
}
|
||||
|
||||
/** Typing again clears the choice until an account is picked, so a half-typed code is never sent. */
|
||||
onSundryTyped(value: any): void {
|
||||
// Picking from the list hands over the account itself rather than text.
|
||||
if (value && typeof value === 'object') {
|
||||
this.pickSundry(value);
|
||||
return;
|
||||
}
|
||||
value = String(value ?? '');
|
||||
this.sundrySearch = value;
|
||||
if (value !== this.sundryLabel(this.chosenSundry)) {
|
||||
const exact = this.sundryAccounts.find(
|
||||
(account: any) => String(account.glCode).toLowerCase() === value.trim().toLowerCase()
|
||||
);
|
||||
this.sundryGlAccountId = exact ? exact.id : null;
|
||||
}
|
||||
}
|
||||
loading = true;
|
||||
|
||||
/**
|
||||
* How the amount payable was made up - what was deposited, what came in or went out by transfer,
|
||||
* and the interest - read from the account's own transactions so the officer can explain the
|
||||
* figure to the customer line by line. Null until the transactions have arrived.
|
||||
*/
|
||||
breakdown: {
|
||||
deposits: number;
|
||||
transfersIn: number;
|
||||
transfersOut: number;
|
||||
interest: number;
|
||||
other: number;
|
||||
interestToPost: number;
|
||||
total: number;
|
||||
} | null = null;
|
||||
|
||||
ngOnInit(): void {
|
||||
// The accounts the balance can be parked in. None is chosen: each bank has its own Sundry account,
|
||||
// and the clerk searches for it and picks it.
|
||||
this.organizationService.getDdsSundryAccounts().subscribe({
|
||||
next: (accounts: any) => (this.sundryAccounts = accounts || []),
|
||||
error: () => (this.sundryAccounts = [])
|
||||
});
|
||||
this.organizationService.getPartyTransactionsOfParty(this.data.id).subscribe({
|
||||
next: (transactions: any) => (this.breakdown = this.breakdownOf(Array.isArray(transactions) ? transactions : [])),
|
||||
error: () => (this.breakdown = null)
|
||||
});
|
||||
|
||||
this.organizationService.getCreditableAccounts(this.data.clientId).subscribe({
|
||||
next: (accounts: any) => {
|
||||
this.ownAccounts = accounts || [];
|
||||
|
||||
// Nothing here to pay into, so the only real choice is a transfer out - offered as the
|
||||
// default rather than leaving the officer on an option that cannot be completed.
|
||||
if (this.ownAccounts.length === 0) {
|
||||
this.destination = 'other';
|
||||
} else if (this.ownAccounts.length === 1) {
|
||||
this.selectedAccountNo = this.ownAccounts[0].accountNo;
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
error: () => {
|
||||
this.ownAccounts = [];
|
||||
this.destination = 'other';
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Interest is still to be worked out for part of the term, and the payout will add it. */
|
||||
get interestStillToCome(): boolean {
|
||||
return (
|
||||
!!this.data.interestDate &&
|
||||
!!this.data.maturityDate &&
|
||||
String(this.data.interestDate) < String(this.data.maturityDate)
|
||||
);
|
||||
}
|
||||
|
||||
private breakdownOf(transactions: any[]) {
|
||||
const sum = (test: (txn: any) => boolean) =>
|
||||
transactions.filter(test).reduce((total: number, txn: any) => total + Number(txn.amount || 0), 0);
|
||||
const signed = (type: string) =>
|
||||
sum((txn) => txn.transactionType === type && txn.direction === 'CREDIT') -
|
||||
sum((txn) => txn.transactionType === type && txn.direction === 'DEBIT');
|
||||
const isTransfer = (txn: any) => txn.transactionType === 'WITHDRAW_DEPOSITE' || txn.transactionType === 'TRANSFER';
|
||||
|
||||
const deposits = signed('PARTY_TRAN');
|
||||
const transfersIn = sum((txn) => isTransfer(txn) && txn.direction === 'CREDIT');
|
||||
const transfersOut = sum((txn) => isTransfer(txn) && txn.direction === 'DEBIT');
|
||||
const interest =
|
||||
signed('INTEREST_POST') +
|
||||
signed('OD_INTEREST_POST') +
|
||||
signed('PREMATURE_AGENT_TOP_UP') +
|
||||
signed('PREMATURE_INT_RECOVERY');
|
||||
const balance = Number(this.data.currentBalance || 0);
|
||||
// Anything the four lines above do not cover - an opening balance brought over, say - so the lines
|
||||
// still add up to the balance rather than leaving the officer a gap to explain.
|
||||
const other = Math.round((balance - (deposits + transfersIn - transfersOut + interest)) * 100) / 100;
|
||||
// Interest already worked out but not yet credited is posted by the payout itself, first.
|
||||
const interestToPost = Number(this.data.interestCalc || 0);
|
||||
return { deposits, transfersIn, transfersOut, interest, other, interestToPost, total: balance + interestToPost };
|
||||
}
|
||||
|
||||
get canPayOut(): boolean {
|
||||
if (this.loading) {
|
||||
return false;
|
||||
}
|
||||
return this.destination === 'other' ? !!this.sundryGlAccountId : !!this.selectedAccountNo;
|
||||
}
|
||||
|
||||
payOut(): void {
|
||||
this.dialogRef.close(
|
||||
this.destination === 'own'
|
||||
? { toSavingsAccountNo: this.selectedAccountNo }
|
||||
: { sundryGlAccountId: this.sundryGlAccountId }
|
||||
);
|
||||
}
|
||||
}
|
||||
+175
@@ -0,0 +1,175 @@
|
||||
<!--
|
||||
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>Close {{ data.partyCode }} early</h2>
|
||||
|
||||
<mat-dialog-content>
|
||||
@if (loading) {
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
}
|
||||
|
||||
<!--
|
||||
The account as it stands, so the clerk is choosing against real figures rather than from memory.
|
||||
The term still to run is the whole reason there is a charge at all.
|
||||
-->
|
||||
<div class="pcd-summary">
|
||||
<div class="pcd-row">
|
||||
<span>Customer</span>
|
||||
<strong>{{ data.partyName }}</strong>
|
||||
</div>
|
||||
<div class="pcd-row">
|
||||
<span>Balance</span>
|
||||
<strong class="pcd-amount">{{ data.currentBalance | number: '1.2-2' }}</strong>
|
||||
</div>
|
||||
<div class="pcd-row">
|
||||
<span>Matures on</span>
|
||||
<strong>{{ data.maturityDate | dateFormat }}</strong>
|
||||
</div>
|
||||
<div class="pcd-row">
|
||||
<span>Scheme rate</span>
|
||||
<strong>{{ data.interestRate | number: '1.0-2' }}%</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="pcd-question">Who bears the cost of closing early?</h4>
|
||||
|
||||
<mat-radio-group class="pcd-choices" [(ngModel)]="borneBy">
|
||||
<label class="pcd-choice" [class.pcd-choice--on]="borneBy === 'CUSTOMER'">
|
||||
<mat-radio-button value="CUSTOMER"></mat-radio-button>
|
||||
<div class="pcd-choice-body">
|
||||
<div class="pcd-choice-title">Customer</div>
|
||||
@if (scheme) {
|
||||
<div class="pcd-choice-detail">
|
||||
Interest recalculated at
|
||||
<strong>{{ reducedRate | number: '1.0-2' }}%</strong>
|
||||
instead of {{ data.interestRate | number: '1.0-2' }}% for the whole period, and the difference taken back
|
||||
before the balance is paid out.
|
||||
</div>
|
||||
} @else {
|
||||
<div class="pcd-choice-detail">Their interest is recalculated at the scheme's reduced rate.</div>
|
||||
}
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="pcd-choice" [class.pcd-choice--on]="borneBy === 'AGENT'">
|
||||
<mat-radio-button value="AGENT"></mat-radio-button>
|
||||
<div class="pcd-choice-body">
|
||||
<div class="pcd-choice-title">Agent — {{ data.agentCode }}</div>
|
||||
<div class="pcd-choice-detail">
|
||||
The customer keeps a full month's interest, and the agent funds the days left in this month. The balance is
|
||||
paid out in full.
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</mat-radio-group>
|
||||
|
||||
<!--
|
||||
Stated rather than offered as a third option: the agent is charged whichever answer is picked, and
|
||||
a clerk who did not know that would be surprised by it afterwards.
|
||||
-->
|
||||
@if (scheme && scheme.prematureAgentCommissionPenalty > 0) {
|
||||
<p class="pcd-note">
|
||||
Either way, {{ data.agentCode }} is charged
|
||||
<strong>{{ scheme.prematureAgentCommissionPenalty | number: '1.0-2' }}%</strong>
|
||||
of the commission owed to them — the round was not kept going.
|
||||
</p>
|
||||
}
|
||||
|
||||
<h4 class="pcd-question">Where should the balance go?</h4>
|
||||
|
||||
<mat-radio-group class="pcd-destinations" [(ngModel)]="destination">
|
||||
<mat-radio-button value="own" [disabled]="ownAccounts.length === 0">
|
||||
Into another account of theirs at this bank
|
||||
</mat-radio-button>
|
||||
<mat-radio-button value="other">Park in Sundry (no account here)</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
@if (destination === 'own' && ownAccounts.length > 0) {
|
||||
<mat-form-field appearance="outline" class="pcd-field">
|
||||
<mat-label>Credit to account</mat-label>
|
||||
<mat-select [(ngModel)]="selectedAccountNo">
|
||||
@for (account of ownAccounts; track account.accountNo) {
|
||||
<mat-option [value]="account.accountNo"> {{ account.accountNo }} — {{ account.productName }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (destination === 'other') {
|
||||
<mat-form-field appearance="outline" class="pcd-field">
|
||||
<mat-label>Park in GL account</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[ngModel]="sundrySearch"
|
||||
(ngModelChange)="onSundryTyped($event)"
|
||||
[matAutocomplete]="sundryAuto"
|
||||
placeholder="Type GL code or name…"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#sundryAuto="matAutocomplete"
|
||||
panelWidth="min(28rem, 90vw)"
|
||||
[displayWith]="sundryDisplay"
|
||||
(optionSelected)="pickSundry($event.option.value)"
|
||||
>
|
||||
@for (account of sundryOptions; track account.id) {
|
||||
<mat-option [value]="account">{{ account.glCode }} · {{ account.name }}</mat-option>
|
||||
}
|
||||
@if (sundryOptions.length === 0) {
|
||||
<mat-option disabled>No liability GL matches</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
@if (!sundryGlAccountId) {
|
||||
<mat-hint class="po-hint-warn">Search and pick your bank's Sundry GL account</mat-hint>
|
||||
} @else {
|
||||
<mat-hint>The balance is held here in the customer's name until it is paid to them</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (ownAccounts.length === 0 && !loading) {
|
||||
<p class="pcd-note">
|
||||
This customer has no other account here, so the balance is parked in the Sundry account chosen above, in their
|
||||
name until it is paid to them.
|
||||
</p>
|
||||
}
|
||||
|
||||
<!--
|
||||
Inside the lock-in the scheme does not allow closing early, so this is asked for rather than done:
|
||||
the reason goes to a manager, who approves this one account. The scheme's lock-in stays as it is.
|
||||
-->
|
||||
@if (withinLockin) {
|
||||
<div class="pcd-lockin">
|
||||
<p class="pcd-lockin-title">Within lock-in until {{ closableFrom | dateFormat }}</p>
|
||||
<p class="pcd-note">
|
||||
{{ data.partyCode }} opened on {{ data.openingDate | dateFormat }} and the scheme locks it in for
|
||||
{{ scheme?.prematureLockinMonths }} months. It can be closed early only if a manager approves it.
|
||||
</p>
|
||||
<mat-form-field appearance="outline" class="pcd-field">
|
||||
<mat-label>Reason for closing within lock-in</mat-label>
|
||||
<textarea matInput rows="2" maxlength="250" required [(ngModel)]="lockinReason"></textarea>
|
||||
<mat-hint align="end">{{ lockinReason.length }}/250</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
|
||||
<p class="pcd-warn">
|
||||
@if (withinLockin) {
|
||||
Once approved, this closes the account. It cannot be reopened.
|
||||
} @else {
|
||||
This closes the account. It cannot be reopened.
|
||||
}
|
||||
</p>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button mat-dialog-close type="button">Cancel</button>
|
||||
<button mat-raised-button color="warn" type="button" [disabled]="!canClose" (click)="close()">
|
||||
{{ withinLockin ? 'Send for Approval' : 'Close Account' }}
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* 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 account as it stands, so the choice below is made against figures rather than from memory. */
|
||||
.pcd-summary {
|
||||
margin: 4px 0 20px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 6px;
|
||||
background: rgb(0 0 0 / 3%);
|
||||
}
|
||||
|
||||
.pcd-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 3px 0;
|
||||
font-size: 0.85rem;
|
||||
|
||||
span {
|
||||
color: rgb(0 0 0 / 60%);
|
||||
}
|
||||
}
|
||||
|
||||
.pcd-amount {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.pcd-question {
|
||||
margin: 20px 0 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pcd-choices {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Each answer is a card rather than a bare radio, because the two are not interchangeable - they take
|
||||
* money from different people, and the consequence has to be readable before the choice is made.
|
||||
*/
|
||||
.pcd-choice {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
padding: 10px 12px 12px;
|
||||
border: 1px solid rgb(0 0 0 / 12%);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgb(0 0 0 / 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.pcd-choice--on {
|
||||
border-color: #b45309;
|
||||
background: rgb(180 83 9 / 5%);
|
||||
}
|
||||
|
||||
.pcd-choice-body {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.pcd-choice-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.pcd-choice-detail {
|
||||
margin-top: 3px;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
}
|
||||
|
||||
.pcd-destinations {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pcd-field {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.pcd-note {
|
||||
margin: 12px 0 0;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
}
|
||||
|
||||
/* The one step here with no way back, so it is said plainly rather than left to the button colour. */
|
||||
.pcd-warn {
|
||||
margin: 18px 0 0;
|
||||
padding: 9px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgb(185 28 28 / 25%);
|
||||
background: rgb(185 28 28 / 6%);
|
||||
color: #b91c1c;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Inside the lock-in: a request for a manager, not a closure, so it is set apart from the terms above. */
|
||||
.pcd-lockin {
|
||||
margin-top: 18px;
|
||||
padding: 12px 14px 4px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(180 83 9 / 30%);
|
||||
background: rgb(245 158 11 / 8%);
|
||||
}
|
||||
|
||||
.pcd-lockin-title {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.po-hint-warn {
|
||||
color: #c62828;
|
||||
}
|
||||
+228
@@ -0,0 +1,228 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
|
||||
/** Custom Services */
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
import { ProductsService } from 'app/products/products.service';
|
||||
|
||||
/** Custom Pipes */
|
||||
import { DateFormatPipe } from 'app/pipes/date-format.pipe';
|
||||
|
||||
/**
|
||||
* Closing a DDS account before its term is up.
|
||||
*
|
||||
* A customer who stops saving early costs the bank the interest it had promised on money it no longer
|
||||
* has for as long as it expected. Somebody has to carry that, and the bank allows two answers - so
|
||||
* this asks which, and it is the only thing it asks.
|
||||
*
|
||||
* What each answer costs is the scheme's, not the clerk's: the reduced rate and the agent's share are
|
||||
* set once when the scheme is created and shown here as fact. A figure typed at the counter is a
|
||||
* figure that can be typed differently for the next customer, which is exactly what a published term
|
||||
* is meant to prevent.
|
||||
*
|
||||
* The destination works as it does on a maturity payout - another account of theirs here, or parked
|
||||
* in matured-deposits payable for a transfer out - because what is left over is still their money and
|
||||
* has to reach them the same way.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-premature-close-dialog',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatDialogModule,
|
||||
MatButtonModule,
|
||||
MatRadioModule,
|
||||
MatSelectModule,
|
||||
MatAutocompleteModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatProgressBarModule,
|
||||
DateFormatPipe
|
||||
],
|
||||
templateUrl: './premature-close-dialog.component.html',
|
||||
styleUrls: ['./premature-close-dialog.component.scss']
|
||||
})
|
||||
export class PrematureCloseDialogComponent implements OnInit {
|
||||
private organizationService = inject(OrganizationService);
|
||||
private productsService = inject(ProductsService);
|
||||
private dialogRef = inject(MatDialogRef<PrematureCloseDialogComponent>);
|
||||
data = inject<any>(MAT_DIALOG_DATA);
|
||||
|
||||
/** Who carries the shortfall. No default - the two answers take money from different people. */
|
||||
borneBy: 'CUSTOMER' | 'AGENT' | '' = '';
|
||||
|
||||
/** 'own' moves what is left to another account here; 'other' parks it for a transfer out. */
|
||||
destination: 'own' | 'other' = 'own';
|
||||
|
||||
ownAccounts: any[] = [];
|
||||
selectedAccountNo = '';
|
||||
|
||||
/** Where the balance is parked when the customer has no account here. */
|
||||
sundryAccounts: any[] = [];
|
||||
sundryGlAccountId: number | null = null;
|
||||
/** What is typed in the GL box - a code or part of a name. */
|
||||
sundrySearch = '';
|
||||
|
||||
/** The accounts matching what is typed, by GL code or name, in any case. */
|
||||
get sundryOptions(): any[] {
|
||||
const typed = this.sundrySearch.trim().toLowerCase();
|
||||
if (!typed || typed === this.sundryLabel(this.chosenSundry).toLowerCase()) {
|
||||
return this.sundryAccounts;
|
||||
}
|
||||
return this.sundryAccounts.filter(
|
||||
(account: any) =>
|
||||
String(account.glCode).toLowerCase().includes(typed) ||
|
||||
String(account.name || '')
|
||||
.toLowerCase()
|
||||
.includes(typed)
|
||||
);
|
||||
}
|
||||
|
||||
get chosenSundry(): any {
|
||||
return this.sundryAccounts.find((account: any) => account.id === this.sundryGlAccountId);
|
||||
}
|
||||
|
||||
/** Shows a picked account in the box as its code and name. */
|
||||
readonly sundryDisplay = (value: any): string =>
|
||||
value && typeof value === 'object' ? this.sundryLabel(value) : value || '';
|
||||
|
||||
sundryLabel(account: any): string {
|
||||
return account ? `${account.glCode} · ${account.name}` : '';
|
||||
}
|
||||
|
||||
pickSundry(account: any): void {
|
||||
this.sundryGlAccountId = account ? account.id : null;
|
||||
this.sundrySearch = this.sundryLabel(account);
|
||||
}
|
||||
|
||||
/** Typing again clears the choice until an account is picked, so a half-typed code is never sent. */
|
||||
onSundryTyped(value: any): void {
|
||||
// Picking from the list hands over the account itself rather than text.
|
||||
if (value && typeof value === 'object') {
|
||||
this.pickSundry(value);
|
||||
return;
|
||||
}
|
||||
value = String(value ?? '');
|
||||
this.sundrySearch = value;
|
||||
if (value !== this.sundryLabel(this.chosenSundry)) {
|
||||
const exact = this.sundryAccounts.find(
|
||||
(account: any) => String(account.glCode).toLowerCase() === value.trim().toLowerCase()
|
||||
);
|
||||
this.sundryGlAccountId = exact ? exact.id : null;
|
||||
}
|
||||
}
|
||||
loading = true;
|
||||
|
||||
/**
|
||||
* The scheme's terms, shown so the clerk can tell the customer what each answer costs before
|
||||
* choosing. Null while loading, and left null if the scheme cannot be read - the choice is then
|
||||
* still offered, because the server applies the terms either way and a screen that could not
|
||||
* display them should not block a closure the customer has asked for.
|
||||
*/
|
||||
scheme: any = null;
|
||||
|
||||
ngOnInit(): void {
|
||||
// The accounts the balance can be parked in. None is chosen: each bank has its own Sundry account,
|
||||
// and the clerk searches for it and picks it.
|
||||
this.organizationService.getDdsSundryAccounts().subscribe({
|
||||
next: (accounts: any) => (this.sundryAccounts = accounts || []),
|
||||
error: () => (this.sundryAccounts = [])
|
||||
});
|
||||
this.organizationService.getCreditableAccounts(this.data.clientId).subscribe({
|
||||
next: (accounts: any) => {
|
||||
this.ownAccounts = accounts || [];
|
||||
if (this.ownAccounts.length === 0) {
|
||||
this.destination = 'other';
|
||||
} else if (this.ownAccounts.length === 1) {
|
||||
this.selectedAccountNo = this.ownAccounts[0].accountNo;
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
error: () => {
|
||||
this.ownAccounts = [];
|
||||
this.destination = 'other';
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
|
||||
// The terms are read from the scheme the account runs on, so what is shown here is what the
|
||||
// server will actually charge rather than a second copy that can drift from it. Matched on the
|
||||
// code the party carries, which is the only handle it has on its scheme.
|
||||
this.productsService.getDdsAccountTypes().subscribe({
|
||||
next: (schemes: any) => {
|
||||
const all = Array.isArray(schemes) ? schemes : schemes?.pageItems || [];
|
||||
this.scheme = all.find((s: any) => s.accountTypeCode === this.data.subType) || null;
|
||||
},
|
||||
error: () => (this.scheme = null)
|
||||
});
|
||||
}
|
||||
|
||||
/** The rate the customer would be left on if they carry it. Never below nothing. */
|
||||
get reducedRate(): number {
|
||||
const rate = Number(this.data.interestRate || 0);
|
||||
const reduction = Number(this.scheme?.prematureInterestReduction || 0);
|
||||
return Math.max(0, rate - reduction);
|
||||
}
|
||||
|
||||
/** Why the lock-in should be waived for this account - required when it is inside it. */
|
||||
lockinReason = '';
|
||||
|
||||
/**
|
||||
* The day the scheme's lock-in ends for this account, or null when the scheme has none. Inside it
|
||||
* the account cannot be closed early on the scheme's terms; it can only be asked for, with a reason,
|
||||
* for a manager to approve - the scheme's lock-in itself is never changed to let one account through.
|
||||
*/
|
||||
get closableFrom(): Date | null {
|
||||
const months = Number(this.scheme?.prematureLockinMonths || 0);
|
||||
const opened = this.data.openingDate ? new Date(this.data.openingDate) : null;
|
||||
if (months <= 0 || !opened || isNaN(opened.getTime())) {
|
||||
return null;
|
||||
}
|
||||
const closable = new Date(opened);
|
||||
closable.setMonth(closable.getMonth() + months);
|
||||
return closable;
|
||||
}
|
||||
|
||||
get withinLockin(): boolean {
|
||||
const closable = this.closableFrom;
|
||||
return !!closable && closable.getTime() > Date.now();
|
||||
}
|
||||
|
||||
get canClose(): boolean {
|
||||
if (this.loading || !this.borneBy) {
|
||||
return false;
|
||||
}
|
||||
if (this.withinLockin && !this.lockinReason.trim()) {
|
||||
return false;
|
||||
}
|
||||
return this.destination === 'other' ? !!this.sundryGlAccountId : !!this.selectedAccountNo;
|
||||
}
|
||||
|
||||
close(): void {
|
||||
this.dialogRef.close({
|
||||
shortfallBorneBy: this.borneBy,
|
||||
...(this.destination === 'own' && this.selectedAccountNo ? { toSavingsAccountNo: this.selectedAccountNo } : {}),
|
||||
...(this.destination === 'other' && this.sundryGlAccountId ? { sundryGlAccountId: this.sundryGlAccountId } : {}),
|
||||
...(this.withinLockin ? { lockinOverrideReason: this.lockinReason.trim() } : {})
|
||||
});
|
||||
}
|
||||
}
|
||||
-8
@@ -15,14 +15,6 @@
|
||||
</button>
|
||||
}
|
||||
</span>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="warn"
|
||||
*mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
|
||||
(click)="undoTransaction()"
|
||||
>
|
||||
<fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@ import { CommonModule } from '@angular/common';
|
||||
import { HasPermissionDirective } from './has-permission/has-permission.directive';
|
||||
import { FormatAmountDirective } from './format-amount.directive';
|
||||
import { ValidateOnFocusDirective } from './validate-on-focus.directive';
|
||||
import { RestrictInputDirective } from './restrict-input.directive';
|
||||
|
||||
/**
|
||||
* Directives Module
|
||||
@@ -25,12 +26,14 @@ import { ValidateOnFocusDirective } from './validate-on-focus.directive';
|
||||
CommonModule,
|
||||
HasPermissionDirective,
|
||||
FormatAmountDirective,
|
||||
ValidateOnFocusDirective
|
||||
ValidateOnFocusDirective,
|
||||
RestrictInputDirective
|
||||
],
|
||||
exports: [
|
||||
HasPermissionDirective,
|
||||
FormatAmountDirective,
|
||||
ValidateOnFocusDirective
|
||||
ValidateOnFocusDirective,
|
||||
RestrictInputDirective
|
||||
]
|
||||
})
|
||||
export class DirectivesModule {}
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Directive, HostListener, Input, ElementRef, inject } from '@angular/core';
|
||||
import { NgControl } from '@angular/forms';
|
||||
|
||||
/** The kinds of field this knows how to hold to a shape. */
|
||||
export type RestrictKind = 'digits' | 'phone' | 'pan' | 'aadhaar';
|
||||
|
||||
interface Rule {
|
||||
/** Characters this kind will accept at all. */
|
||||
allowed: RegExp;
|
||||
/** How many of them the field can hold, so it cannot be overfilled. */
|
||||
maxLength: number;
|
||||
/** Whether what is typed is forced to upper case as it is entered. */
|
||||
upper?: boolean;
|
||||
}
|
||||
|
||||
const RULES: Record<RestrictKind, Rule> = {
|
||||
digits: { allowed: /[0-9]/, maxLength: 20 },
|
||||
phone: { allowed: /[0-9+()\-\s]/, maxLength: 20 },
|
||||
// A PAN is five letters, four digits, one letter - and is always written in capitals.
|
||||
pan: { allowed: /[A-Za-z0-9]/, maxLength: 10, upper: true },
|
||||
// Twelve digits, or the masked form CKYC returns, which is Xs and the last four digits.
|
||||
aadhaar: { allowed: /[0-9Xx]/, maxLength: 12, upper: true }
|
||||
};
|
||||
|
||||
/**
|
||||
* Stops a field being filled with something it could never hold.
|
||||
*
|
||||
* A mobile number typed as letters, or a PAN of fifteen characters, is not a mistake worth
|
||||
* discovering on save - the customer is at the counter now, and the clerk is looking at the field
|
||||
* they just typed. Refusing the keystroke says so at the moment it happens, with nothing to read
|
||||
* and nothing to undo.
|
||||
*
|
||||
* Pasting is handled too, and is where this earns its place: a number copied from a spreadsheet
|
||||
* arrives with spaces, dashes or a +91 in front, and pasting is the one way into a field that
|
||||
* bypasses every keystroke rule. What can be salvaged is kept, the rest dropped.
|
||||
*
|
||||
* This only refuses characters the field cannot contain. Whether what is left is a valid number is
|
||||
* a separate question, answered by the form's own validators and again by the server - a screen
|
||||
* restriction is a convenience, not a guarantee.
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[mifosxRestrictInput]',
|
||||
standalone: true
|
||||
})
|
||||
export class RestrictInputDirective {
|
||||
private el = inject(ElementRef<HTMLInputElement>);
|
||||
private control = inject(NgControl, { optional: true });
|
||||
|
||||
@Input('mifosxRestrictInput') kind: RestrictKind = 'digits';
|
||||
|
||||
private get rule(): Rule {
|
||||
return RULES[this.kind] ?? RULES.digits;
|
||||
}
|
||||
|
||||
/**
|
||||
* Keys that move around or edit rather than enter a character, plus the usual copy/paste and
|
||||
* select-all chords. Blocking these would leave the clerk unable to correct their own typing.
|
||||
*/
|
||||
private isEditingKey(event: KeyboardEvent): boolean {
|
||||
const navigation = [
|
||||
'Backspace',
|
||||
'Delete',
|
||||
'Tab',
|
||||
'Escape',
|
||||
'Enter',
|
||||
'Home',
|
||||
'End',
|
||||
'ArrowLeft',
|
||||
'ArrowRight',
|
||||
'ArrowUp',
|
||||
'ArrowDown'
|
||||
];
|
||||
return navigation.includes(event.key) || event.ctrlKey || event.metaKey;
|
||||
}
|
||||
|
||||
@HostListener('keydown', ['$event'])
|
||||
onKeydown(event: KeyboardEvent): void {
|
||||
if (this.isEditingKey(event) || event.key.length > 1) {
|
||||
return;
|
||||
}
|
||||
const input = this.el.nativeElement as HTMLInputElement;
|
||||
const hasSelection = input.selectionStart !== input.selectionEnd;
|
||||
|
||||
if (!this.rule.allowed.test(event.key)) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
// Replacing a selection does not make the field any longer, so only a plain insert can overfill.
|
||||
if (!hasSelection && input.value.length >= this.rule.maxLength) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('paste', ['$event'])
|
||||
onPaste(event: ClipboardEvent): void {
|
||||
event.preventDefault();
|
||||
const pasted = event.clipboardData?.getData('text') ?? '';
|
||||
const kept = Array.from(pasted)
|
||||
.filter((ch) => this.rule.allowed.test(ch))
|
||||
.join('')
|
||||
.slice(0, this.rule.maxLength);
|
||||
this.write(this.rule.upper ? kept.toUpperCase() : kept);
|
||||
}
|
||||
|
||||
/** Upper case is applied as the field is left, so the caret does not jump while typing. */
|
||||
@HostListener('blur')
|
||||
onBlur(): void {
|
||||
if (!this.rule.upper) {
|
||||
return;
|
||||
}
|
||||
const current = String(this.el.nativeElement.value ?? '');
|
||||
if (current !== current.toUpperCase()) {
|
||||
this.write(current.toUpperCase());
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Writes through the form control where there is one, so the value the form holds and the value
|
||||
* on screen stay the same thing - setting only the element would leave the form with the old one.
|
||||
*/
|
||||
private write(value: string): void {
|
||||
this.el.nativeElement.value = value;
|
||||
if (this.control?.control) {
|
||||
this.control.control.setValue(value);
|
||||
} else {
|
||||
this.el.nativeElement.dispatchEvent(new Event('input'));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -74,9 +74,7 @@
|
||||
(3%)" while Admin holds 4% states a rate the bank is not on. -->
|
||||
<div class="sc-label">CRR Required{{ crrRate === null ? '' : ' (' + crrRate + '%)' }}</div>
|
||||
<div class="sc-value">{{ crore(crrRequired) }}<span class="cr" *ngIf="crrRequired !== null">Cr</span></div>
|
||||
<div class="sc-sub">
|
||||
SLR Req: {{ crore(slrRequired) }}{{ slrRate === null ? '' : ' Cr (' + slrRate + '%)' }}
|
||||
</div>
|
||||
<div class="sc-sub">SLR Req: {{ crore(slrRequired) }}{{ slrRate === null ? '' : ' Cr (' + slrRate + '%)' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -143,21 +141,22 @@
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@empty {
|
||||
} @empty {
|
||||
<tr class="empty-row">
|
||||
<td colspan="7">
|
||||
No accounts are mapped to this head, so the return reports nothing under it. Map them in
|
||||
Admin → RBI Reserve Configuration.
|
||||
No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin →
|
||||
RBI Reserve Configuration.
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3"><strong>Total Demand Liabilities ({{ demandLiabilities.length }} accounts)</strong></td>
|
||||
<td class="right foot-demand">{{ totalOf(demandLiabilities, "openingValue") }}</td>
|
||||
<td class="right foot-demand">{{ totalOf(demandLiabilities, "currentValue") }}</td>
|
||||
<td colspan="3">
|
||||
<strong>Total Demand Liabilities ({{ demandLiabilities.length }} accounts)</strong>
|
||||
</td>
|
||||
<td class="right foot-demand">{{ totalOf(demandLiabilities, 'openingValue') }}</td>
|
||||
<td class="right foot-demand">{{ totalOf(demandLiabilities, 'currentValue') }}</td>
|
||||
<td class="right">{{ totalChange(demandLiabilities) }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
@@ -206,21 +205,22 @@
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@empty {
|
||||
} @empty {
|
||||
<tr class="empty-row">
|
||||
<td colspan="7">
|
||||
No accounts are mapped to this head, so the return reports nothing under it. Map them in
|
||||
Admin → RBI Reserve Configuration.
|
||||
No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin →
|
||||
RBI Reserve Configuration.
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3"><strong>Total Time Liabilities ({{ timeLiabilities.length }} accounts)</strong></td>
|
||||
<td class="right foot-time">{{ totalOf(timeLiabilities, "openingValue") }}</td>
|
||||
<td class="right foot-time">{{ totalOf(timeLiabilities, "currentValue") }}</td>
|
||||
<td colspan="3">
|
||||
<strong>Total Time Liabilities ({{ timeLiabilities.length }} accounts)</strong>
|
||||
</td>
|
||||
<td class="right foot-time">{{ totalOf(timeLiabilities, 'openingValue') }}</td>
|
||||
<td class="right foot-time">{{ totalOf(timeLiabilities, 'currentValue') }}</td>
|
||||
<td class="right">{{ totalChange(timeLiabilities) }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
@@ -263,12 +263,11 @@
|
||||
<span class="status-chip chip-active">{{ item.status }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@empty {
|
||||
} @empty {
|
||||
<tr class="empty-row">
|
||||
<td colspan="7">
|
||||
No accounts are mapped to this head, so the return reports nothing under it. Map them in
|
||||
Admin → RBI Reserve Configuration.
|
||||
No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin →
|
||||
RBI Reserve Configuration.
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@@ -278,8 +277,8 @@
|
||||
<td colspan="3">
|
||||
<strong>Total Assets with Banking System</strong> <span class="deduct-tag">( Deducted from NDTL )</span>
|
||||
</td>
|
||||
<td class="right foot-asset">{{ totalOf(bankingAssets, "openingValue") }}</td>
|
||||
<td class="right foot-asset">{{ totalOf(bankingAssets, "currentValue") }}</td>
|
||||
<td class="right foot-asset">{{ totalOf(bankingAssets, 'openingValue') }}</td>
|
||||
<td class="right foot-asset">{{ totalOf(bankingAssets, 'currentValue') }}</td>
|
||||
<td class="right">{{ totalChange(bankingAssets) }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
@@ -328,12 +327,11 @@
|
||||
<span class="status-chip chip-active">{{ item.status }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@empty {
|
||||
} @empty {
|
||||
<tr class="empty-row">
|
||||
<td colspan="7">
|
||||
No accounts are mapped to this head, so the return reports nothing under it. Map them in
|
||||
Admin → RBI Reserve Configuration.
|
||||
No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin →
|
||||
RBI Reserve Configuration.
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@@ -341,8 +339,8 @@
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4"><strong>Total Liquid Assets (SLR Eligible)</strong></td>
|
||||
<td class="right foot-slr">{{ totalOf(liquidAssets, "openingValue") }}</td>
|
||||
<td class="right foot-slr">{{ totalOf(liquidAssets, "currentValue") }}</td>
|
||||
<td class="right foot-slr">{{ totalOf(liquidAssets, 'openingValue') }}</td>
|
||||
<td class="right foot-slr">{{ totalOf(liquidAssets, 'currentValue') }}</td>
|
||||
<td class="right">{{ totalChange(liquidAssets) }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
@@ -128,8 +128,7 @@ export class CrrSlrDialogComponent implements OnInit {
|
||||
|
||||
if (!columns.length) {
|
||||
this.unavailable =
|
||||
data?.unmetRequirements?.[0] ??
|
||||
'Form 1 could not be computed. Check the CRR/SLR configuration in Admin.';
|
||||
data?.unmetRequirements?.[0] ?? 'Form 1 could not be computed. Check the CRR/SLR configuration in Admin.';
|
||||
return;
|
||||
}
|
||||
// The return computes but says something would make it wrong to file — a rate never set, a
|
||||
@@ -175,7 +174,6 @@ export class CrrSlrDialogComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* The four tabs, filled from the return's own lines.
|
||||
*
|
||||
|
||||
@@ -33,11 +33,15 @@
|
||||
rate Admin was on. -->
|
||||
<div class="card-metrics">
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">CRR Required{{ crrSlr.crrRate === null ? '' : ' (' + crrSlr.crrRate + '%)' }}</span>
|
||||
<span class="metric-label"
|
||||
>CRR Required{{ crrSlr.crrRate === null ? '' : ' (' + crrSlr.crrRate + '%)' }}</span
|
||||
>
|
||||
<span class="metric-value">{{ crrSlr.crrRequired }}</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">SLR Required{{ crrSlr.slrRate === null ? '' : ' (' + crrSlr.slrRate + '%)' }}</span>
|
||||
<span class="metric-label"
|
||||
>SLR Required{{ crrSlr.slrRate === null ? '' : ' (' + crrSlr.slrRate + '%)' }}</span
|
||||
>
|
||||
<span class="metric-value">{{ crrSlr.slrRequired }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -116,7 +116,12 @@ export class DashboardComponent implements OnInit {
|
||||
const crrNeed = data?.partB?.required?.[latest];
|
||||
const slrHeld = data?.partC?.maintained?.[latest];
|
||||
const slrNeed = data?.partC?.required?.[latest];
|
||||
if ([crrHeld, crrNeed, slrHeld, slrNeed].every((v) => v !== null && v !== undefined)) {
|
||||
if ([
|
||||
crrHeld,
|
||||
crrNeed,
|
||||
slrHeld,
|
||||
slrNeed
|
||||
].every((v) => v !== null && v !== undefined)) {
|
||||
this.crrSlr.status = crrHeld >= crrNeed && slrHeld >= slrNeed ? 'ok' : 'short';
|
||||
}
|
||||
},
|
||||
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
<!--
|
||||
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/.
|
||||
-->
|
||||
|
||||
@if (product) {
|
||||
<div class="lptc">
|
||||
<div class="lptc__head">
|
||||
<strong>{{ product.name }}</strong>
|
||||
<span class="lptc__chip">{{ category }}</span>
|
||||
<span class="lptc__chip lptc__chip--type">{{ type }}</span>
|
||||
</div>
|
||||
<div class="lptc__grid">
|
||||
<div>
|
||||
<span class="lptc__label">Amount</span>
|
||||
<span>
|
||||
@if (product.minPrincipal != null || product.maxPrincipal != null) {
|
||||
{{ product.minPrincipal | number: '1.0-0' }} – {{ product.maxPrincipal | number: '1.0-0' }}
|
||||
} @else {
|
||||
—
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="lptc__label">Tenure (repayments)</span>
|
||||
<span>
|
||||
@if (product.minNumberOfRepayments != null || product.maxNumberOfRepayments != null) {
|
||||
{{ product.minNumberOfRepayments }} – {{ product.maxNumberOfRepayments }}
|
||||
} @else {
|
||||
—
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="lptc__label">Short name</span>
|
||||
<span>{{ product.shortName || '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.lptc {
|
||||
margin: 4px 0 16px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 8px;
|
||||
background: #f0f9ff;
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__chip {
|
||||
padding: 1px 10px;
|
||||
border-radius: 999px;
|
||||
background: #e0f2fe;
|
||||
color: #075985;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
||||
&--type {
|
||||
background: #ede9fe;
|
||||
color: #5b21b6;
|
||||
}
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: #64748b;
|
||||
}
|
||||
}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* 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 { DecimalPipe } from '@angular/common';
|
||||
import { productCategoryLabel, productTypeLabel } from 'app/products/loan-products/loan-product-types';
|
||||
|
||||
/**
|
||||
* The product picked on the loan account form, summarised with its category, type and the main limits, so the
|
||||
* officer can see what the account will be opened under before going on.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-loan-product-template-card',
|
||||
templateUrl: './loan-product-template-card.component.html',
|
||||
styleUrls: ['./loan-product-template-card.component.scss'],
|
||||
imports: [DecimalPipe]
|
||||
})
|
||||
export class LoanProductTemplateCardComponent {
|
||||
/** A product from the catalogue (the list shape), or undefined when none is picked. */
|
||||
@Input() product: any;
|
||||
|
||||
get category(): string {
|
||||
return productCategoryLabel(this.product?.advanceExtensions?.productTypeGroup);
|
||||
}
|
||||
|
||||
get type(): string {
|
||||
return productTypeLabel(
|
||||
this.product?.advanceExtensions?.productTypeGroup,
|
||||
this.product?.advanceExtensions?.productTypeSubGroup
|
||||
);
|
||||
}
|
||||
}
|
||||
+67
-2
@@ -32,6 +32,9 @@ import { MatCheckbox } from '@angular/material/checkbox';
|
||||
import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { LoanProductCatalogService } from '../../services/loan-product-catalog.service';
|
||||
import { LoanProductTemplateCardComponent } from '../loan-product-template-card/loan-product-template-card.component';
|
||||
import { PRODUCT_SUB_TYPES, PRODUCT_TYPE_GROUPS } from 'app/products/loan-products/loan-product-types';
|
||||
|
||||
/**
|
||||
* Loans Account Details Step
|
||||
@@ -49,7 +52,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
MatStepperPrevious,
|
||||
FaIconComponent,
|
||||
MatStepperNext,
|
||||
AsyncPipe
|
||||
AsyncPipe,
|
||||
LoanProductTemplateCardComponent
|
||||
]
|
||||
})
|
||||
export class LoansAccountDetailsStepComponent implements OnInit, OnDestroy {
|
||||
@@ -59,6 +63,7 @@ export class LoansAccountDetailsStepComponent implements OnInit, OnDestroy {
|
||||
private translateService = inject(TranslateService);
|
||||
private settingsService = inject(SettingsService);
|
||||
private commons = inject(Commons);
|
||||
private catalog = inject(LoanProductCatalogService);
|
||||
|
||||
//** Defining PlaceHolders for the search bar */
|
||||
placeHolderLabel = '';
|
||||
@@ -88,6 +93,27 @@ export class LoansAccountDetailsStepComponent implements OnInit, OnDestroy {
|
||||
|
||||
loanId: any = null;
|
||||
|
||||
/** Category and product type narrow the product picker to the active products of that kind. */
|
||||
readonly categories = PRODUCT_TYPE_GROUPS;
|
||||
categoryFilter = '';
|
||||
typeFilter = '';
|
||||
/** Ids of the products active today; null until read, or if the read failed (then nothing is hidden). */
|
||||
private activeProductIds: Set<number> | null = null;
|
||||
/** Every product from the template, before any filter. */
|
||||
private allProducts: any[] = [];
|
||||
|
||||
/** Types offered for the chosen category; every type when no category is chosen. */
|
||||
get typeOptions() {
|
||||
return this.categoryFilter
|
||||
? (PRODUCT_SUB_TYPES[this.categoryFilter] ?? [])
|
||||
: Object.values(PRODUCT_SUB_TYPES).flat();
|
||||
}
|
||||
|
||||
/** The product picked in the form, with its category and type, for the template card. */
|
||||
get selectedProduct(): any {
|
||||
return this.catalog.get(this.loansAccountDetailsForm?.get('productId')?.value);
|
||||
}
|
||||
|
||||
loanProductSelected = false;
|
||||
/** Currency data. */
|
||||
protected productData: ReplaySubject<string[]> = new ReplaySubject<string[]>(1);
|
||||
@@ -115,7 +141,8 @@ export class LoansAccountDetailsStepComponent implements OnInit, OnDestroy {
|
||||
this.maxDate = this.settingsService.maxFutureDate;
|
||||
this.buildDependencies();
|
||||
if (this.loansAccountTemplate) {
|
||||
this.productList = this.loansAccountTemplate.productOptions.sort(this.commons.dynamicSort('name'));
|
||||
this.allProducts = this.loansAccountTemplate.productOptions.sort(this.commons.dynamicSort('name'));
|
||||
this.productList = this.allProducts;
|
||||
if (this.loansAccountTemplate.loanProductId) {
|
||||
this.loansAccountDetailsForm.patchValue({
|
||||
productId: this.loansAccountTemplate.loanProductId,
|
||||
@@ -136,6 +163,44 @@ export class LoansAccountDetailsStepComponent implements OnInit, OnDestroy {
|
||||
this.searchItem();
|
||||
});
|
||||
this.productData.next(this.productList.slice());
|
||||
this.loadActiveProducts();
|
||||
}
|
||||
|
||||
/**
|
||||
* A new account can only be opened on a product that is active today, and the picker can be narrowed by category
|
||||
* and type. Editing an existing account keeps every product, since its own product may have closed since.
|
||||
*/
|
||||
private loadActiveProducts(): void {
|
||||
if (this.loanId) {
|
||||
return;
|
||||
}
|
||||
this.catalog.activeProducts().subscribe((products) => {
|
||||
this.activeProductIds = products.length > 0 ? new Set(products.map((product) => Number(product.id))) : null;
|
||||
this.applyProductFilters();
|
||||
});
|
||||
}
|
||||
|
||||
onCategoryChange(): void {
|
||||
// A type belongs to one category, so a type from another category cannot stay selected.
|
||||
if (this.typeFilter && !this.typeOptions.some((type) => type.id === this.typeFilter)) {
|
||||
this.typeFilter = '';
|
||||
}
|
||||
this.applyProductFilters();
|
||||
}
|
||||
|
||||
/** Rebuilds the product list from the template: active only, then category and type, then the search text. */
|
||||
applyProductFilters(): void {
|
||||
this.productList = this.allProducts.filter((product: any) => {
|
||||
if (this.activeProductIds && !this.activeProductIds.has(Number(product.id))) {
|
||||
return false;
|
||||
}
|
||||
const ext = this.catalog.classification(product.id);
|
||||
if (this.categoryFilter && ext['productTypeGroup'] !== this.categoryFilter) {
|
||||
return false;
|
||||
}
|
||||
return !this.typeFilter || ext['productTypeSubGroup'] === this.typeFilter;
|
||||
});
|
||||
this.searchItem();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
|
||||
@@ -177,10 +177,6 @@
|
||||
}
|
||||
@if (allowUndoTransaction(transaction)) {
|
||||
<span>
|
||||
<button mat-menu-item *mifosxHasPermission="'ADJUST_LOAN'" (click)="undoTransaction(transaction, $event)">
|
||||
<mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
|
||||
<span>{{ 'tooltips.Undo Transaction' | translate }}</span>
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
class="account-action-button"
|
||||
|
||||
@@ -12,9 +12,6 @@
|
||||
<button mat-raised-button color="primary" [routerLink]="'edit'" [disabled]="!allowEdition">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'Edit' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="undoTransaction()" [disabled]="!allowUndo">
|
||||
<fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'Undo' | translate }}
|
||||
</button>
|
||||
</span>
|
||||
<span *mifosxHasPermission="'CHARGEBACK_LOAN'">
|
||||
<button mat-raised-button color="warn" [disabled]="!allowChargeback" (click)="chargebackTransaction()">
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* 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 { Observable, of } from 'rxjs';
|
||||
import { catchError, map, tap } from 'rxjs/operators';
|
||||
import { ProductsService } from 'app/products/products.service';
|
||||
|
||||
/**
|
||||
* Read-only view of the loan product catalogue for the loan account screens: which products are active today and
|
||||
* what category and type each one is. Reads the normal product list once; the category and type of each product
|
||||
* come from the classification the list carries (`advanceExtensions`).
|
||||
*/
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class LoanProductCatalogService {
|
||||
private productsService = inject(ProductsService);
|
||||
|
||||
private byId = new Map<number, any>();
|
||||
|
||||
/**
|
||||
* The products that are active today. Also remembers every product it saw, so `get` and `classification` can
|
||||
* answer for them afterwards. An empty list on failure, so the picker never ends up with nothing to choose.
|
||||
*/
|
||||
activeProducts(): Observable<any[]> {
|
||||
return this.productsService.getLoanProducts().pipe(
|
||||
tap((products: any[]) => (products ?? []).forEach((product) => this.byId.set(Number(product.id), product))),
|
||||
map((products: any[]) => (products ?? []).filter((product) => product?.status === 'loanProduct.active')),
|
||||
catchError(() => of([]))
|
||||
);
|
||||
}
|
||||
|
||||
/** A product seen by `activeProducts`, or undefined before it ran or for an unknown id. */
|
||||
get(productId: any): any {
|
||||
return this.byId.get(Number(productId));
|
||||
}
|
||||
|
||||
/** The product's category and type (`productTypeGroup`, `productTypeSubGroup`, ...), empty when it has none. */
|
||||
classification(productId: any): Record<string, any> {
|
||||
return this.get(productId)?.advanceExtensions ?? {};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
<!--
|
||||
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="pl-root">
|
||||
<div class="pl-header">
|
||||
<div class="pl-header-left">
|
||||
<div class="pl-header-ic"><fa-icon icon="user-tie"></fa-icon></div>
|
||||
<div class="pl-header-text">
|
||||
<h2>Agent Master</h2>
|
||||
<p>The DDS collection agents on file.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-header-right">
|
||||
<div class="pl-count-chip" matTooltip="Total agents">
|
||||
<fa-icon icon="user-tie"></fa-icon>
|
||||
<strong>{{ totalCount }}</strong>
|
||||
<span>{{ totalCount === 1 ? 'agent' : 'agents' }}</span>
|
||||
</div>
|
||||
<button class="pl-create-btn" type="button" [routerLink]="['create']">
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
<span>Create Agent</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-kpis">
|
||||
<div class="pl-kpi pl-kpi--blue">
|
||||
<div class="pl-kpi-ic"><fa-icon icon="user-tie"></fa-icon></div>
|
||||
<div>
|
||||
<div class="pl-kpi-n">{{ totalCount | number }}</div>
|
||||
<div class="pl-kpi-l">Total Agents</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-kpi pl-kpi--purple">
|
||||
<div class="pl-kpi-ic"><fa-icon icon="toggle-on"></fa-icon></div>
|
||||
<div>
|
||||
<div class="pl-kpi-n">{{ activeCount | number }}</div>
|
||||
<div class="pl-kpi-l">Active Agents</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pl-kpi pl-kpi--teal"
|
||||
matTooltip="Money collected from parties that agents have not yet handed over to a branch"
|
||||
>
|
||||
<div class="pl-kpi-ic"><fa-icon icon="wallet"></fa-icon></div>
|
||||
<div>
|
||||
<div class="pl-kpi-n">{{ totalCurrentBalance | number: '1.2-2' }}</div>
|
||||
<div class="pl-kpi-l">Cash With Agents (Unsettled)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-card">
|
||||
<div class="pl-toolbar">
|
||||
<div class="pl-search">
|
||||
<fa-icon icon="search" class="pl-search-ic"></fa-icon>
|
||||
<input type="text" (input)="applyFilter($any($event.target).value)" placeholder="Search by code or name…" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (totalCount === 0) {
|
||||
<div class="pl-empty">
|
||||
<div class="pl-empty-ic"><fa-icon icon="user-tie"></fa-icon></div>
|
||||
<h3>No agents yet</h3>
|
||||
<p>Create one so daily collections can be recorded against it.</p>
|
||||
<button class="pl-create-btn" type="button" [routerLink]="['create']">
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
<span>Create Agent</span>
|
||||
</button>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="pl-table-wrap">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="pl-table">
|
||||
<ng-container matColumnDef="agentCode">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Agent Code</th>
|
||||
<td mat-cell *matCellDef="let a">
|
||||
<div class="pl-product-cell">
|
||||
<div class="pl-product-icon"><fa-icon icon="user-tie"></fa-icon></div>
|
||||
<div class="pl-product-meta">
|
||||
<div class="pl-product-name">{{ a.agentCode }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="clientName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Agent Name</th>
|
||||
<td mat-cell *matCellDef="let a">{{ a.agentNameId }}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Which branch the agent's collections belong to. Its own column rather than a subtitle:
|
||||
it decides which branch's batch run picks the agent up, so it has to be scannable. -->
|
||||
<!-- The GL the cashier takes this agent's cash into, so it is to hand without opening the agent. -->
|
||||
<ng-container matColumnDef="glAccount">
|
||||
<th mat-header-cell *matHeaderCellDef>GL Account</th>
|
||||
<td mat-cell *matCellDef="let a">
|
||||
@if (a.glAccountCode) {
|
||||
<span class="pl-tag">{{ a.glAccountCode }} · {{ a.glAccountName }}</span>
|
||||
} @else {
|
||||
<span class="am-no-branch">Not set</span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="homeBranch">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Branch</th>
|
||||
<td mat-cell *matCellDef="let a">
|
||||
@if (a.homeBranch) {
|
||||
<span class="pl-tag">{{ a.homeBranch }}</span>
|
||||
} @else {
|
||||
<span class="am-no-branch">Not set</span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="agentCity">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>City</th>
|
||||
<td mat-cell *matCellDef="let a">{{ a.agentCity }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="agentSavingAccountNo">
|
||||
<th mat-header-cell *matHeaderCellDef>Saving A/C No</th>
|
||||
<td mat-cell *matCellDef="let a">
|
||||
<span class="pl-tag">{{ a.agentSavingAccountNo }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="agentCurrentBalance">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header class="num">Current Balance</th>
|
||||
<td mat-cell *matCellDef="let a" class="num">
|
||||
<strong>{{ a.agentCurrentBalance | number: '1.2-2' }}</strong>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef>Status</th>
|
||||
<td mat-cell *matCellDef="let a">
|
||||
<span class="am-pill" [class.am-pill--off]="!a.active">
|
||||
{{ a.active ? 'Active' : 'Inactive' }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="createdDate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
|
||||
<td mat-cell *matCellDef="let a">
|
||||
{{ a.createdDate ? (a.createdDate | dateFormat: 'DD MMM YYYY, hh:mm A') : '—' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef class="num">Actions</th>
|
||||
<td mat-cell *matCellDef="let a" class="num">
|
||||
<!-- A closed agent is off the books: nothing can be changed on it, only read. -->
|
||||
@if (a.closeDate) {
|
||||
<span class="am-closed-on">Closed {{ a.closeDate | dateFormat }}</span>
|
||||
} @else {
|
||||
<button
|
||||
type="button"
|
||||
class="pl-action-btn pl-action-btn--edit"
|
||||
[routerLink]="[a.id, 'edit']"
|
||||
matTooltip="Edit this agent"
|
||||
>
|
||||
<fa-icon icon="edit"></fa-icon><span>Edit</span>
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
class="pl-row"
|
||||
[class.am-row--inactive]="!row.active"
|
||||
></tr>
|
||||
</table>
|
||||
|
||||
@if (filteredCount === 0 && totalCount > 0) {
|
||||
<div class="pl-no-match">
|
||||
<fa-icon icon="search"></fa-icon>
|
||||
<span>No agents match your filter.</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
@use 'assets/styles/product-list' as pl;
|
||||
|
||||
@include pl.product-list-styles;
|
||||
|
||||
/* Agent-specific indigo accent */
|
||||
:host {
|
||||
--pl-accent: #4338ca;
|
||||
--pl-accent-l: #e0e7ff;
|
||||
}
|
||||
|
||||
/* A retired agent stays listed but reads as switched off. */
|
||||
.am-row--inactive td:not(.num) {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
/* Closing is the last, irreversible step, so it does not read like the buttons beside it. */
|
||||
.pl-action-btn--close {
|
||||
color: #9b2c2c;
|
||||
}
|
||||
|
||||
/* A closed agent shows when, in place of the actions it no longer has. */
|
||||
.am-closed-on {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
color: #9b2c2c;
|
||||
}
|
||||
|
||||
.am-pill {
|
||||
display: inline-block;
|
||||
padding: 3px 11px;
|
||||
border-radius: 11px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.7;
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.am-pill--off {
|
||||
background: rgb(0 0 0 / 7%);
|
||||
color: rgb(0 0 0 / 52%);
|
||||
}
|
||||
|
||||
/* An agent with no branch is an agent no branch's batch run will collect for - say so plainly
|
||||
rather than showing an em dash that reads like "nothing to see here". */
|
||||
.am-no-branch {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
color: #9b2c2c;
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, ViewChild, inject } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
||||
import {
|
||||
MatTable,
|
||||
MatTableDataSource,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
MatCellDef,
|
||||
MatCell,
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow
|
||||
} from '@angular/material/table';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/** Custom Services */
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
import { AuthenticationService } from 'app/core/authentication/authentication.service';
|
||||
import { forkJoin, of } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { officesUnder } from './offices-under';
|
||||
|
||||
/**
|
||||
* Agent Master list.
|
||||
*
|
||||
* The DDS collection agents on file. Follows the same list -> create/edit shape as the product lists
|
||||
* and shares their stylesheet.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-agent-master',
|
||||
templateUrl: './agent-master.component.html',
|
||||
styleUrls: ['./agent-master.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FaIconComponent,
|
||||
MatTable,
|
||||
MatSort,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
MatSortHeader,
|
||||
MatCellDef,
|
||||
MatCell,
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow,
|
||||
MatPaginator,
|
||||
MatTooltip
|
||||
]
|
||||
})
|
||||
export class AgentMasterComponent implements OnInit {
|
||||
private organizationService = inject(OrganizationService);
|
||||
private authenticationService = inject(AuthenticationService);
|
||||
|
||||
displayedColumns: string[] = [
|
||||
'agentCode',
|
||||
'clientName',
|
||||
'homeBranch',
|
||||
'glAccount',
|
||||
'agentCity',
|
||||
'agentSavingAccountNo',
|
||||
'agentCurrentBalance',
|
||||
'status',
|
||||
'createdDate',
|
||||
'actions'
|
||||
];
|
||||
|
||||
dataSource: MatTableDataSource<any> = new MatTableDataSource<any>([]);
|
||||
agents: any[] = [];
|
||||
filteredCount = 0;
|
||||
|
||||
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
|
||||
get totalCount(): number {
|
||||
return this.agents.length;
|
||||
}
|
||||
|
||||
get activeCount(): number {
|
||||
return this.agents.filter((agent) => agent.active).length;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cash the agents are collectively holding but have not settled to a branch yet — an agent's
|
||||
* balance rises on every party collection and falls when it hands the money over. Inactive agents
|
||||
* count too: money still out with a retired agent is exactly what this figure is for.
|
||||
*/
|
||||
get totalCurrentBalance(): number {
|
||||
return this.agents.reduce((sum, agent) => sum + Number(agent.agentCurrentBalance || 0), 0);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadAgents();
|
||||
}
|
||||
|
||||
private loadAgents(): void {
|
||||
const loginOfficeId = this.authenticationService.getCredentials()?.officeId;
|
||||
forkJoin({
|
||||
agents: this.organizationService.getAgents(),
|
||||
offices: this.organizationService.getOffices().pipe(catchError(() => of([])))
|
||||
}).subscribe(({ agents, offices }: any) => {
|
||||
// The branch logged in to sees its own agents and those of every branch under it - Head Office,
|
||||
// at the top, sees them all.
|
||||
const visible = new Set(
|
||||
officesUnder(Array.isArray(offices) ? offices : offices?.pageItems || [], loginOfficeId).map(
|
||||
(office: any) => office.id
|
||||
)
|
||||
);
|
||||
this.agents = (agents || []).filter(
|
||||
(agent: any) => !loginOfficeId || visible.size === 0 || visible.has(agent.officeId)
|
||||
);
|
||||
this.dataSource = new MatTableDataSource(this.agents);
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource.sort = this.sort;
|
||||
this.filteredCount = this.agents.length;
|
||||
this.dataSource.connect().subscribe((rows) => (this.filteredCount = rows.length));
|
||||
});
|
||||
}
|
||||
|
||||
applyFilter(filterValue: string): void {
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
private static readonly MONEY = new Intl.NumberFormat('en-IN', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
|
||||
money(value: any): string {
|
||||
return AgentMasterComponent.MONEY.format(Number(value || 0));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,318 @@
|
||||
<!--
|
||||
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="am-container">
|
||||
<div class="am-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="am-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Organization' | translate }}
|
||||
</button>
|
||||
<h2 class="am-header__title">Agent Master Entry</h2>
|
||||
</div>
|
||||
|
||||
<div class="am-card">
|
||||
<form [formGroup]="agentForm">
|
||||
<!--
|
||||
Follows the legacy Agent Master Entry screen field for field. Entering a Client ID fills the
|
||||
name, address, city, pincode and telephone from that client, as the legacy screen did, and
|
||||
also defaults the home branch and stocks the two savings-account dropdowns from that client.
|
||||
-->
|
||||
<div class="am-section">
|
||||
<div class="am-section__header">
|
||||
<i class="fas fa-id-card"></i>
|
||||
<h3>Agent Details</h3>
|
||||
</div>
|
||||
<div class="am-grid">
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Client ID or Name</mat-label>
|
||||
<input
|
||||
matInput
|
||||
required
|
||||
formControlName="clientId"
|
||||
[matAutocomplete]="clientAuto"
|
||||
#clientInput
|
||||
#clientTrigger="matAutocompleteTrigger"
|
||||
(focus)="onClientFocus()"
|
||||
placeholder="Click to see clients, or type a name or ID…"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<i matSuffix class="fas fa-search am-search-ic"></i>
|
||||
<!-- Picking a client puts their id in the field, which then fills the rest as before. -->
|
||||
<mat-autocomplete #clientAuto="matAutocomplete" panelWidth="min(30rem, 92vw)">
|
||||
@for (client of clientOptions; track client.id) {
|
||||
<mat-option [value]="client.id">
|
||||
<div class="am-opt">
|
||||
<span class="am-opt-id">{{ client.id }}</span>
|
||||
<span class="am-opt-main">{{ client.displayName }}</span>
|
||||
<span class="am-opt-sub">{{ client.officeName }}</span>
|
||||
</div>
|
||||
</mat-option>
|
||||
}
|
||||
@if (clientListIsPartial) {
|
||||
<mat-option disabled class="am-opt-more">
|
||||
Showing {{ clientOptions.length }} of {{ clientTotal }} — type a name to find the rest
|
||||
</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
@if (agentForm.get('clientId')?.hasError('pattern')) {
|
||||
<mat-hint class="am-hint--error">Pick a client from the list</mat-hint>
|
||||
} @else if (clientAlreadyAgent) {
|
||||
<mat-hint class="am-hint--error">This client is already agent {{ clientAlreadyAgent }}</mat-hint>
|
||||
} @else if (clientAgeProblem) {
|
||||
<mat-hint class="am-hint--error">{{ clientAgeProblem }}</mat-hint>
|
||||
} @else if (clientOtherBranch) {
|
||||
<mat-hint class="am-hint--error">This client belongs to another branch</mat-hint>
|
||||
} @else if (clientLookupFailed) {
|
||||
<mat-hint class="am-hint--error">No client found with this ID</mat-hint>
|
||||
} @else if (loadedClientName) {
|
||||
<mat-hint>{{ loadedClientName }}</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Agent Code</mat-label>
|
||||
<input matInput formControlName="agentCode" placeholder="Auto-generated" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="am-field am-field--wide">
|
||||
<mat-label>Agent Name ID</mat-label>
|
||||
<input matInput required formControlName="agentNameId" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="am-field am-field--wide">
|
||||
<mat-label>Agent Address (Line 1)</mat-label>
|
||||
<input matInput required formControlName="agentAddress1" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="am-field am-field--wide">
|
||||
<mat-label>Agent Address (Line 2)</mat-label>
|
||||
<input matInput formControlName="agentAddress2" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Agent City</mat-label>
|
||||
<input matInput required formControlName="agentCity" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Agent PinCode</mat-label>
|
||||
<input matInput required formControlName="agentPinCode" mifosxRestrictInput="digits" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Agent Telephone</mat-label>
|
||||
<input matInput formControlName="agentTelephone" mifosxRestrictInput="phone" />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Which branch the agent collects out of: the one logged in to or a branch under it. The
|
||||
option carries the office's id while showing its name, so renaming a branch later
|
||||
leaves the agent where it is. -->
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Home Branch</mat-label>
|
||||
<mat-select required formControlName="officeId">
|
||||
@for (office of offices; track office.id) {
|
||||
<mat-option [value]="office.id">{{ office.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
<mat-hint>The branch this agent's collections belong to</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- The account this agent's cash sits in between collecting it and bringing it in, so a
|
||||
balance left standing on it is this agent's and nobody else's. Required, and one agent
|
||||
to an account - an account already taken is refused by name, not by number. Only
|
||||
detail accounts are offered: a header account is a heading over others and carries no
|
||||
entries of its own. -->
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>GL Account</mat-label>
|
||||
<mat-select required formControlName="glAccountId">
|
||||
@for (account of glAccounts; track account.id) {
|
||||
<mat-option [value]="account.id">{{ account.glCode }} · {{ account.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
<mat-hint>This agent's collections pass through it. One agent to an account.</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Type first, then the number - the order the legacy screen used. The list is built from
|
||||
the client's own accounts, so every type offered is one they actually hold. -->
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Agent Saving A/C Type</mat-label>
|
||||
<mat-select
|
||||
required
|
||||
formControlName="agentSavingAccountType"
|
||||
(selectionChange)="onSavingsAccountTypePicked()"
|
||||
>
|
||||
@for (accountType of savingsAccountTypes; track accountType) {
|
||||
<mat-option [value]="accountType">{{ savingsAccountTypeCodes[accountType] || accountType }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
<!-- Two different reasons for an empty list, and the fix differs: enter a client, or
|
||||
open them a savings account. Saying which saves a guess. -->
|
||||
@if (savingsAccountTypes.length === 0) {
|
||||
@if (loadedClientName) {
|
||||
<mat-hint class="am-hint--error">
|
||||
{{ loadedClientName }} has no savings account — commission can only be paid into one
|
||||
</mat-hint>
|
||||
} @else {
|
||||
<mat-hint class="am-hint--error"
|
||||
>Enter a Client ID first — types come from that client's own accounts</mat-hint
|
||||
>
|
||||
}
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Picked from the client's own accounts, never typed: commission is paid into this
|
||||
account, and a number that exists only as text is a payment with nowhere to land. -->
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Agent Saving A/C No</mat-label>
|
||||
<mat-select required formControlName="agentSavingAccountNo">
|
||||
@for (account of accountsOfChosenType; track account.id) {
|
||||
<mat-option [value]="account.accountNo">{{ account.accountNo }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (accountsOfChosenType.length === 0) {
|
||||
<mat-hint>Choose an A/C Type first</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Agent Opening Date</mat-label>
|
||||
<input matInput required [matDatepicker]="openingDatePicker" formControlName="agentOpeningDate" />
|
||||
<mat-datepicker-toggle matIconSuffix [for]="openingDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #openingDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Copied from the client, whose date of birth was taken and checked when they were opened. -->
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Agent Birth Date</mat-label>
|
||||
<input matInput readonly [matDatepicker]="birthDatePicker" formControlName="agentBirthDate" />
|
||||
<mat-datepicker #birthDatePicker></mat-datepicker>
|
||||
<mat-hint>From the client's record</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="am-section">
|
||||
<div class="am-section__header">
|
||||
<i class="fas fa-user-shield"></i>
|
||||
<h3>Guarantor's Detail</h3>
|
||||
<button mat-stroked-button type="button" class="am-add-guarantor" (click)="addGuarantor()">
|
||||
<i class="fas fa-plus"></i> Add Guarantor
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (guarantors.length === 0) {
|
||||
<p class="am-empty-guarantors">No guarantors added yet.</p>
|
||||
}
|
||||
|
||||
@for (guarantor of guarantors.controls; track guarantor; let i = $index) {
|
||||
<div class="am-guarantor-row" [formGroup]="$any(guarantor)">
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Client ID or Name</mat-label>
|
||||
<input
|
||||
matInput
|
||||
required
|
||||
formControlName="clientId"
|
||||
[matAutocomplete]="guarantorAuto"
|
||||
#guarantorInput
|
||||
#guarantorTrigger="matAutocompleteTrigger"
|
||||
(focus)="onGuarantorFocus(guarantor, guarantorTrigger, guarantorInput)"
|
||||
placeholder="Click to see clients, or type…"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<i matSuffix class="fas fa-search am-search-ic"></i>
|
||||
<mat-autocomplete #guarantorAuto="matAutocomplete" panelWidth="min(30rem, 92vw)">
|
||||
@for (client of guarantorOptionsFor(guarantor); track client.id) {
|
||||
<mat-option [value]="client.id">
|
||||
<div class="am-opt">
|
||||
<span class="am-opt-id">{{ client.id }}</span>
|
||||
<span class="am-opt-main">{{ client.displayName }}</span>
|
||||
<span class="am-opt-sub">{{ client.officeName }}</span>
|
||||
</div>
|
||||
</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
<!-- Shown as soon as it is keyed, not only after leaving the field. -->
|
||||
@if (guarantor.get('clientId')?.hasError('selfGuarantor')) {
|
||||
<mat-hint class="am-hint--error">The agent cannot be their own guarantor</mat-hint>
|
||||
} @else if (guarantor.get('clientId')?.hasError('duplicateGuarantor')) {
|
||||
<mat-hint class="am-hint--error">This client is already a guarantor above</mat-hint>
|
||||
} @else if (guarantor.get('clientId')?.hasError('pattern')) {
|
||||
<mat-hint class="am-hint--error">Pick a client from the list</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Guarantor Name</mat-label>
|
||||
<input matInput required formControlName="guarantorName" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Address 1</mat-label>
|
||||
<input matInput required formControlName="address1" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Address 2</mat-label>
|
||||
<input matInput formControlName="address2" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>City</mat-label>
|
||||
<input matInput required formControlName="city" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Pin Code</mat-label>
|
||||
<input matInput required formControlName="pinCode" mifosxRestrictInput="digits" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Telephone</mat-label>
|
||||
<input matInput formControlName="telephone" mifosxRestrictInput="phone" />
|
||||
</mat-form-field>
|
||||
<button
|
||||
mat-icon-button
|
||||
type="button"
|
||||
class="am-remove-guarantor"
|
||||
(click)="removeGuarantor(i)"
|
||||
matTooltip="Remove guarantor"
|
||||
>
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="am-section">
|
||||
<div class="am-section__header">
|
||||
<i class="fas fa-balance-scale"></i>
|
||||
<h3>Balances</h3>
|
||||
</div>
|
||||
<div class="am-grid">
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Agent Current Balance</mat-label>
|
||||
<input matInput formControlName="agentCurrentBalance" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="am-field">
|
||||
<mat-label>Agent Opening Balance</mat-label>
|
||||
<input matInput type="number" formControlName="agentOpeningBalance" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="am-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-raised-button
|
||||
color="primary"
|
||||
type="button"
|
||||
[disabled]="agentForm.invalid || clientOtherBranch || !!clientAlreadyAgent || !!clientAgeProblem"
|
||||
(click)="save()"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,191 @@
|
||||
/**
|
||||
* 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;
|
||||
|
||||
.am-container {
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.am-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.am-back {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.am-card {
|
||||
background: var(--md-sys-color-surface, #fff);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
|
||||
padding: 8px 24px 24px;
|
||||
}
|
||||
|
||||
.am-section {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 8%);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.am-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px 16px;
|
||||
}
|
||||
|
||||
.am-field {
|
||||
width: 100%;
|
||||
|
||||
&--wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.am-add-guarantor {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.am-empty-guarantors {
|
||||
color: rgb(0 0 0 / 50%);
|
||||
font-size: 14px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.am-guarantor-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr) auto;
|
||||
gap: 8px 12px;
|
||||
align-items: start;
|
||||
padding: 10px 0;
|
||||
border-top: 1px dashed rgb(0 0 0 / 10%);
|
||||
|
||||
&:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.am-limit-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr) auto;
|
||||
gap: 8px 12px;
|
||||
align-items: start;
|
||||
padding: 10px 0;
|
||||
border-top: 1px dashed rgb(0 0 0 / 10%);
|
||||
|
||||
&:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.am-remove-guarantor {
|
||||
color: #b91c1c;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.am-action-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
padding-top: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Client ID lookup came back empty — the officer typed an id that doesn't exist. */
|
||||
.am-hint--error {
|
||||
color: #b3261e;
|
||||
}
|
||||
|
||||
@media (width <= 900px) {
|
||||
.am-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.am-guarantor-row,
|
||||
.am-limit-row {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* One row of the client search list: the id, the name, and the branch - as on the Party form. */
|
||||
.am-opt {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.am-opt-more {
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.am-opt-id {
|
||||
flex: 0 0 auto;
|
||||
min-width: 52px;
|
||||
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.am-opt-main {
|
||||
flex: 1 1 auto;
|
||||
min-width: 8rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.am-opt-sub {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.75rem;
|
||||
color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.am-search-ic {
|
||||
margin-right: 8px;
|
||||
color: rgb(0 0 0 / 40%);
|
||||
}
|
||||
@@ -0,0 +1,929 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
|
||||
import {
|
||||
UntypedFormBuilder,
|
||||
UntypedFormGroup,
|
||||
UntypedFormArray,
|
||||
Validators,
|
||||
ValidatorFn,
|
||||
AbstractControl,
|
||||
ValidationErrors
|
||||
} from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/** Custom Services */
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
import { AccountingService } from 'app/accounting/accounting.service';
|
||||
import { SystemService } from 'app/system/system.service';
|
||||
import { ClientsService } from 'app/clients/clients.service';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
import { Dates } from 'app/core/utils/dates';
|
||||
import { AlertService } from 'app/core/alert/alert.service';
|
||||
import { AuthenticationService } from 'app/core/authentication/authentication.service';
|
||||
|
||||
/** Custom Directives */
|
||||
import { RestrictInputDirective } from 'app/directives/restrict-input.directive';
|
||||
import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
|
||||
import { searchClientsAnyCase } from 'app/deposits/party-master/client-search';
|
||||
import { officesUnder } from '../offices-under';
|
||||
|
||||
/** Writes a value into a form group only when there is something to write. */
|
||||
function setGroupField(group: UntypedFormGroup, controlName: string, value: any): void {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return;
|
||||
}
|
||||
group.get(controlName)?.setValue(String(value));
|
||||
}
|
||||
|
||||
/**
|
||||
* Agent Master Entry component.
|
||||
*
|
||||
* A DDS collection agent — either a person or an institution — registered with its own settlement
|
||||
* savings account and one or more guarantors. Modelled on the legacy Agent Master Entry screen, field
|
||||
* for field.
|
||||
*
|
||||
* Entering a Client ID fills the name, address, city, pincode and telephone from that client, the way
|
||||
* the legacy screen did, defaults the home branch to that client's office, and stocks the account
|
||||
* type and account number dropdowns from that client's own accounts. Filled fields stay editable.
|
||||
*
|
||||
* Backed by its own DDS Agent API (`/dds/agents`) — independent of Staff/Client CRUD, per the DDS
|
||||
* agent/commission hierarchy being genuinely new feature work.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-create-agent',
|
||||
templateUrl: './create-agent.component.html',
|
||||
styleUrls: ['./create-agent.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
// See the Party form: an unimported directive is ignored without a word.
|
||||
RestrictInputDirective,
|
||||
MatAutocompleteModule
|
||||
]
|
||||
})
|
||||
export class CreateAgentComponent implements OnInit {
|
||||
private formBuilder = inject(UntypedFormBuilder);
|
||||
private router = inject(Router);
|
||||
private route = inject(ActivatedRoute);
|
||||
private organizationService = inject(OrganizationService);
|
||||
private clientsService = inject(ClientsService);
|
||||
private accountingService = inject(AccountingService);
|
||||
private systemService = inject(SystemService);
|
||||
private settingsService = inject(SettingsService);
|
||||
private dateUtils = inject(Dates);
|
||||
private alertService = inject(AlertService);
|
||||
private authenticationService = inject(AuthenticationService);
|
||||
private changeDetector = inject(ChangeDetectorRef);
|
||||
|
||||
/** The agent's client field and its list, so a list that arrives late can still be opened. */
|
||||
@ViewChild('clientTrigger') clientTrigger?: MatAutocompleteTrigger;
|
||||
@ViewChild('clientInput') clientInput?: ElementRef<HTMLInputElement>;
|
||||
|
||||
/**
|
||||
* The branch the officer is logged in to. An agent is opened there and nowhere else: the Home
|
||||
* Branch list offers only it, and only its clients can be picked.
|
||||
*/
|
||||
private readonly loginOfficeId: number | null = this.authenticationService.getCredentials()?.officeId ?? null;
|
||||
|
||||
/**
|
||||
* The branch the agent is being opened for - the one picked in Home Branch, the login branch until
|
||||
* then. Its clients are the ones offered, since an agent collects for the branch they belong to.
|
||||
*/
|
||||
private get branchOfficeId(): number | null {
|
||||
return Number(this.agentForm?.get('officeId')?.value) || this.loginOfficeId;
|
||||
}
|
||||
|
||||
/** Set when the client keyed belongs to another branch, which cannot be made an agent here. */
|
||||
clientOtherBranch = false;
|
||||
|
||||
/**
|
||||
* The code of the agent the keyed client already is, if any. One client is one agent, so they are
|
||||
* left out of the list and refused when typed.
|
||||
*/
|
||||
clientAlreadyAgent = '';
|
||||
private agentCodeByClientId: Record<string, string> = {};
|
||||
|
||||
/** Why the picked client's age rules them out as an agent, or empty when it does not. */
|
||||
clientAgeProblem = '';
|
||||
/** The ages an agent is taken on at, matching the rule the server applies. */
|
||||
private static readonly MIN_AGENT_AGE = 16;
|
||||
private static readonly MAX_AGENT_AGE = 60;
|
||||
|
||||
/** The agent's client list without the clients who are already agents. */
|
||||
private notYetAgents(clients: any[]): any[] {
|
||||
return clients.filter((client: any) => !this.agentCodeByClientId[String(client.id)]);
|
||||
}
|
||||
|
||||
agentId: number | null = null;
|
||||
|
||||
/** Shown under the Client ID field once a client has been resolved. */
|
||||
loadedClientName = '';
|
||||
clientLookupFailed = false;
|
||||
|
||||
/**
|
||||
* Clients to pick from, as on the Party form: the first page when the field is focused, then
|
||||
* whatever matches what has been typed. An officer knows the agent's name, rarely their client id.
|
||||
*/
|
||||
clientOptions: any[] = [];
|
||||
private initialClients: any[] = [];
|
||||
private static readonly CLIENT_LIST_SIZE = 50;
|
||||
clientTotal = 0;
|
||||
showingClientList = false;
|
||||
|
||||
get clientListIsPartial(): boolean {
|
||||
return this.showingClientList && this.clientTotal > this.clientOptions.length;
|
||||
}
|
||||
|
||||
/**
|
||||
* The client's own open savings accounts, fetched once the client is resolved. The commission
|
||||
* account is picked from these rather than typed, so it is always an account that exists and
|
||||
* always belongs to this agent.
|
||||
*/
|
||||
clientSavingsAccounts: any[] = [];
|
||||
|
||||
/**
|
||||
* The account types this client actually holds, taken from their own accounts rather than a fixed
|
||||
* list. A fixed list would offer types the client has nothing under, and its wording would have to
|
||||
* match the product names by hand for the filter below to work at all.
|
||||
*/
|
||||
savingsAccountTypes: string[] = [];
|
||||
|
||||
/**
|
||||
* Each type's product code, which is what the dropdown shows. The type is still saved by its name,
|
||||
* as before, so what other screens and reports read is unchanged.
|
||||
*/
|
||||
savingsAccountTypeCodes: Record<string, string> = {};
|
||||
|
||||
/** Fineract's deposit-account kinds: 100 savings, 200 fixed deposit, 300 recurring deposit. */
|
||||
private static readonly SAVINGS_DEPOSIT_TYPE = 100;
|
||||
|
||||
/** Branches, for the Home Branch field. Defaulted from the client's own office. */
|
||||
offices: any[] = [];
|
||||
|
||||
/**
|
||||
* The ledger accounts an agent's collections may pass through. Header accounts are left out: they
|
||||
* are headings over other accounts and carry no entries, so offering one only leads to a refusal.
|
||||
*/
|
||||
glAccounts: any[] = [];
|
||||
|
||||
/**
|
||||
* The savings product a DDS customer's own scheme account is opened under, read from the setting
|
||||
* that names it rather than guessed from a product name a bank is free to change.
|
||||
*
|
||||
* Held so those accounts can be kept out of the agent's own list. They are savings accounts and
|
||||
* pass every other test, but they belong to a customer's scheme: commission paid into one would be
|
||||
* counted as that customer's deposits by every interest run afterwards. The server refuses it
|
||||
* either way - this is so the choice is never offered rather than taken and then thrown back.
|
||||
*/
|
||||
private ddsProductId: number | null = null;
|
||||
|
||||
/**
|
||||
* The accounts on offer once a type has been chosen. Type is asked first, as the legacy screen
|
||||
* did, so the officer narrows to a kind of account and then picks one of that kind.
|
||||
*/
|
||||
get accountsOfChosenType(): any[] {
|
||||
const chosenType = this.agentForm?.get('agentSavingAccountType')?.value;
|
||||
if (!chosenType) {
|
||||
return [];
|
||||
}
|
||||
return this.clientSavingsAccounts.filter((account: any) => account.productName === chosenType);
|
||||
}
|
||||
|
||||
agentForm: UntypedFormGroup = this.formBuilder.group({
|
||||
clientId: [
|
||||
'',
|
||||
// A name typed to search with is not a client; only an id picked or keyed saves.
|
||||
[
|
||||
Validators.required,
|
||||
Validators.pattern(/^\d+$/)
|
||||
]
|
||||
],
|
||||
agentCode: [
|
||||
{
|
||||
value: '',
|
||||
disabled: true
|
||||
}
|
||||
],
|
||||
agentNameId: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
agentAddress1: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
agentAddress2: [''],
|
||||
agentCity: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
agentPinCode: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
agentTelephone: [''],
|
||||
// Which branch this agent collects out of. Holds the office's id, not its name - the name is
|
||||
// only what the dropdown shows. The DDS batch runs filter by it.
|
||||
officeId: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
// Asked before the account number, which is then narrowed to accounts of this type.
|
||||
agentSavingAccountType: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
agentSavingAccountNo: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
agentOpeningDate: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
// Filled from the client, whose date of birth was checked when they were opened.
|
||||
agentBirthDate: [''],
|
||||
agentCurrentBalance: [
|
||||
{
|
||||
value: 0,
|
||||
disabled: true
|
||||
}
|
||||
],
|
||||
agentOpeningBalance: [0],
|
||||
/*
|
||||
* Required. An agent sharing the scheme's one account leaves a balance that says money is
|
||||
* outstanding without saying whose - which is exactly what this field was added to answer.
|
||||
*/
|
||||
glAccountId: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
guarantors: this.formBuilder.array([])
|
||||
});
|
||||
|
||||
ngOnInit(): void {
|
||||
// A different branch has different clients: the list is read again, and a client already keyed
|
||||
// is checked against the new branch.
|
||||
this.agentForm
|
||||
.get('officeId')
|
||||
?.valueChanges.pipe(distinctUntilChanged())
|
||||
.subscribe(() => {
|
||||
this.initialClients = [];
|
||||
if (!this.agentId && this.agentForm.get('clientId')?.value) {
|
||||
this.loadClient();
|
||||
}
|
||||
});
|
||||
// Who is already an agent, so they are neither offered nor accepted as a new one.
|
||||
this.organizationService.getAgents().subscribe({
|
||||
next: (agents: any[]) => {
|
||||
this.agentCodeByClientId = {};
|
||||
for (const agent of agents || []) {
|
||||
if (agent.active !== false && agent.clientId != null) {
|
||||
this.agentCodeByClientId[String(agent.clientId)] = agent.agentCode;
|
||||
}
|
||||
}
|
||||
},
|
||||
error: () => (this.agentCodeByClientId = {})
|
||||
});
|
||||
|
||||
this.organizationService.getOffices().subscribe({
|
||||
next: (offices: any) => {
|
||||
const all = Array.isArray(offices) ? offices : offices?.pageItems || [];
|
||||
// The branch logged in to and every branch under it - Head Office, at the top, sees them all.
|
||||
this.offices = officesUnder(all, this.loginOfficeId);
|
||||
if (!this.agentId && this.offices.some((office: any) => office.id === this.loginOfficeId)) {
|
||||
this.agentForm.get('officeId')?.setValue(this.loginOfficeId);
|
||||
}
|
||||
},
|
||||
error: () => (this.offices = [])
|
||||
});
|
||||
|
||||
this.systemService.getConfigurationByName('dds-deposit-product').subscribe({
|
||||
next: (config: any) => {
|
||||
this.ddsProductId = config?.enabled && config?.value ? Number(config.value) : null;
|
||||
// The client may already have been keyed while this was in flight, so the list is rebuilt
|
||||
// rather than left showing an account this now knows to exclude.
|
||||
const clientId = this.agentForm.get('clientId')?.value;
|
||||
if (clientId) {
|
||||
this.loadClientSavingsAccounts(String(clientId));
|
||||
}
|
||||
},
|
||||
error: () => (this.ddsProductId = null)
|
||||
});
|
||||
|
||||
this.accountingService.getChartOfAccounts().subscribe({
|
||||
next: (accounts: any) => {
|
||||
const rows = Array.isArray(accounts) ? accounts : accounts?.pageItems || [];
|
||||
// usage 1 is a detail account, 2 a header. Disabled accounts refuse every posting, so an
|
||||
// agent pointed at one would fail on their first collection rather than here.
|
||||
this.glAccounts = rows.filter((a: any) => a.usage?.id === 1 && !a.disabled);
|
||||
},
|
||||
error: () => (this.glAccounts = [])
|
||||
});
|
||||
|
||||
// An id in the route means this is an edit; load that agent into the form.
|
||||
const routeId = this.route.snapshot.paramMap.get('agentId');
|
||||
if (routeId) {
|
||||
this.organizationService.getAgent(routeId).subscribe((agent: any) => this.patchFormFromAgent(agent));
|
||||
}
|
||||
|
||||
// Fill the client-derived fields as soon as typing settles - no need to tab out of the field.
|
||||
this.agentForm
|
||||
.get('clientId')
|
||||
?.valueChanges.pipe(debounceTime(500), distinctUntilChanged())
|
||||
.subscribe((value) => {
|
||||
const typed = String(value ?? '').trim();
|
||||
// A name is something to search for, not a client yet - the fields stay until one is picked.
|
||||
if (typed && !/^\d+$/.test(typed)) {
|
||||
this.searchClients(typed);
|
||||
return;
|
||||
}
|
||||
if (!typed) {
|
||||
this.showClientList();
|
||||
}
|
||||
this.loadClient();
|
||||
// A guarantor row that was fine may now be the agent itself, or the other way round.
|
||||
for (const row of this.guarantors.controls) {
|
||||
row.get('clientId')?.updateValueAndValidity();
|
||||
// And the agent's own client leaves (or rejoins) each row's list.
|
||||
if (!row.get('clientId')?.value) {
|
||||
this.setGuarantorOptions(row, this.eligibleGuarantors(row, this.initialClients));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get guarantors(): UntypedFormArray {
|
||||
return this.agentForm.get('guarantors') as UntypedFormArray;
|
||||
}
|
||||
|
||||
private buildGuarantorGroup(): UntypedFormGroup {
|
||||
const group = this.formBuilder.group({
|
||||
clientId: [
|
||||
'',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.pattern(/^\d+$/),
|
||||
this.notTheAgentItself(),
|
||||
this.notAlreadyAGuarantor()
|
||||
]
|
||||
],
|
||||
guarantorName: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
address1: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
address2: [''],
|
||||
city: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
pinCode: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
telephone: ['']
|
||||
});
|
||||
|
||||
// A guarantor is a client too, so its row fills from the client the same way the agent's does.
|
||||
// Searched by name like the agent's own client field; a picked or keyed id fills the row.
|
||||
group
|
||||
.get('clientId')
|
||||
?.valueChanges.pipe(debounceTime(500), distinctUntilChanged())
|
||||
.subscribe((value) => {
|
||||
const typed = String(value ?? '').trim();
|
||||
if (typed && !/^\d+$/.test(typed)) {
|
||||
searchClientsAnyCase(this.clientsService, typed).subscribe((found: any[]) => {
|
||||
this.setGuarantorOptions(group, this.eligibleGuarantors(group, found).slice(0, 25));
|
||||
const panel = (group as any).panel;
|
||||
this.openWhenFocused(panel?.trigger, panel?.input);
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setGuarantorOptions(group, []);
|
||||
this.loadGuarantorClient(group, typed);
|
||||
if (!typed) {
|
||||
// Emptied: the list comes back rather than leaving nothing to pick from.
|
||||
this.onGuarantorFocus(group);
|
||||
}
|
||||
// Two rows naming the same client: the other row's check has to be run again too.
|
||||
for (const row of this.guarantors.controls) {
|
||||
if (row !== group) {
|
||||
row.get('clientId')?.updateValueAndValidity({ emitEvent: false });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return group;
|
||||
}
|
||||
|
||||
/**
|
||||
* Each guarantor row's list lives on the row itself, as a plain array the template reads - the same
|
||||
* way the agent's own list works - so one row's typing never fills another's.
|
||||
*/
|
||||
private setGuarantorOptions(group: AbstractControl, options: any[]): void {
|
||||
(group as any).clientOptions = options;
|
||||
}
|
||||
|
||||
guarantorOptionsFor(group: AbstractControl): any[] {
|
||||
return (group as any).clientOptions || GUARANTOR_NO_OPTIONS;
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the client list on a guarantor row as soon as it is focused, as the agent's field does.
|
||||
* The list is filled before the panel is asked to open, since a panel opened empty stays shut.
|
||||
*/
|
||||
onGuarantorFocus(group: AbstractControl, trigger?: MatAutocompleteTrigger, input?: HTMLElement): void {
|
||||
if (trigger) {
|
||||
// Kept so a search answered later can open this row's list too.
|
||||
(group as any).panel = { trigger, input };
|
||||
}
|
||||
if (group.get('clientId')?.value) {
|
||||
return;
|
||||
}
|
||||
const show = () => {
|
||||
this.setGuarantorOptions(group, this.eligibleGuarantors(group, this.initialClients));
|
||||
const panel = (group as any).panel;
|
||||
this.openWhenFocused(panel?.trigger, panel?.input);
|
||||
};
|
||||
if (this.initialClients.length > 0) {
|
||||
show();
|
||||
return;
|
||||
}
|
||||
this.clientsService.getFilteredClients('displayName', 'ASC', false, '', this.branchOfficeId).subscribe({
|
||||
next: (response: any) => {
|
||||
const found = response?.pageItems || response || [];
|
||||
this.initialClients = Array.isArray(found) ? found.slice(0, CreateAgentComponent.CLIENT_LIST_SIZE) : [];
|
||||
this.clientTotal = response?.totalFilteredRecords ?? this.initialClients.length;
|
||||
show();
|
||||
},
|
||||
error: () => undefined
|
||||
});
|
||||
}
|
||||
|
||||
/** Clients who can stand guarantor on this row: not the agent, and not already on another row. */
|
||||
private eligibleGuarantors(group: AbstractControl, found: any[]): any[] {
|
||||
const agentClientId = String(this.agentForm.get('clientId')?.value ?? '');
|
||||
const taken = new Set(
|
||||
this.guarantors.controls.filter((row) => row !== group).map((row) => String(row.get('clientId')?.value ?? ''))
|
||||
);
|
||||
return found.filter((client: any) => String(client.id) !== agentClientId && !taken.has(String(client.id)));
|
||||
}
|
||||
|
||||
/** The same client cannot guarantee one agent twice - it counts as one guarantee, not two. */
|
||||
private notAlreadyAGuarantor(): ValidatorFn {
|
||||
return (control: AbstractControl): ValidationErrors | null => {
|
||||
if (!control.value || !this.agentForm) {
|
||||
return null;
|
||||
}
|
||||
const repeated = this.guarantors.controls.some(
|
||||
(row) => row.get('clientId') !== control && String(row.get('clientId')?.value) === String(control.value)
|
||||
);
|
||||
return repeated ? { duplicateGuarantor: true } : null;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* An agent cannot stand guarantor for itself - a guarantee is only worth something if it comes
|
||||
* from someone else.
|
||||
*/
|
||||
private notTheAgentItself(): ValidatorFn {
|
||||
return (control: AbstractControl): ValidationErrors | null => {
|
||||
const agentClientId = this.agentForm?.get('clientId')?.value;
|
||||
if (!control.value || !agentClientId) {
|
||||
return null;
|
||||
}
|
||||
return String(control.value) === String(agentClientId) ? { selfGuarantor: true } : null;
|
||||
};
|
||||
}
|
||||
|
||||
/** Refills a guarantor row from its Client ID, mirroring the agent's own client lookup. */
|
||||
private loadGuarantorClient(group: UntypedFormGroup, clientId: any): void {
|
||||
for (const controlName of [
|
||||
'guarantorName',
|
||||
'telephone',
|
||||
'address1',
|
||||
'address2',
|
||||
'city',
|
||||
'pinCode'
|
||||
]) {
|
||||
group.get(controlName)?.setValue('');
|
||||
}
|
||||
if (!clientId) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.clientsService.getClientData(String(clientId), true).subscribe({
|
||||
next: (client: any) => {
|
||||
setGroupField(group, 'guarantorName', client?.displayName);
|
||||
setGroupField(group, 'telephone', client?.mobileNo);
|
||||
this.clientsService.getClientAddressData(String(clientId), true).subscribe({
|
||||
next: (addresses: any) => {
|
||||
const address = Array.isArray(addresses) ? addresses[0] : addresses;
|
||||
if (!address) {
|
||||
return;
|
||||
}
|
||||
setGroupField(group, 'address1', address.addressLine1 || address.street);
|
||||
setGroupField(group, 'address2', address.addressLine2);
|
||||
setGroupField(group, 'city', address.city);
|
||||
setGroupField(group, 'pinCode', address.postalCode);
|
||||
},
|
||||
error: () => undefined
|
||||
});
|
||||
},
|
||||
// An id that matches no client just leaves the row for the officer to fill in.
|
||||
error: () => undefined
|
||||
});
|
||||
}
|
||||
|
||||
addGuarantor(): void {
|
||||
const group = this.buildGuarantorGroup();
|
||||
this.guarantors.push(group);
|
||||
// Ready before the field is ever focused, so the list is there the moment it is clicked.
|
||||
this.setGuarantorOptions(group, this.eligibleGuarantors(group, this.initialClients));
|
||||
}
|
||||
|
||||
removeGuarantor(index: number): void {
|
||||
this.guarantors.removeAt(index);
|
||||
// A row that clashed with the removed one no longer does.
|
||||
for (const row of this.guarantors.controls) {
|
||||
row.get('clientId')?.updateValueAndValidity({ emitEvent: false });
|
||||
}
|
||||
}
|
||||
|
||||
/** The fields the legacy screen filled from the client, rather than asking the officer for. */
|
||||
private static readonly CLIENT_DERIVED_FIELDS = [
|
||||
'agentNameId',
|
||||
'agentTelephone',
|
||||
'agentAddress1',
|
||||
'agentAddress2',
|
||||
'agentCity',
|
||||
'agentPinCode'
|
||||
];
|
||||
|
||||
/** Opens the client list when the field is focused, unless a client is already in it. */
|
||||
onClientFocus(): void {
|
||||
if (this.agentId || this.agentForm.get('clientId')?.value) {
|
||||
return;
|
||||
}
|
||||
this.showClientList();
|
||||
}
|
||||
|
||||
/** Shows the first page of clients, fetching it the first time it is asked for. */
|
||||
private showClientList(): void {
|
||||
if (this.agentId) {
|
||||
return;
|
||||
}
|
||||
if (this.initialClients.length > 0) {
|
||||
this.showingClientList = true;
|
||||
this.clientOptions = this.notYetAgents(this.initialClients);
|
||||
this.openWhenFocused(this.clientTrigger, this.clientInput?.nativeElement);
|
||||
return;
|
||||
}
|
||||
// The chosen branch's clients only, since an agent is opened for the branch they belong to.
|
||||
this.clientsService.getFilteredClients('displayName', 'ASC', false, '', this.branchOfficeId).subscribe({
|
||||
next: (response: any) => {
|
||||
const found = response?.pageItems || response || [];
|
||||
this.initialClients = Array.isArray(found) ? found.slice(0, CreateAgentComponent.CLIENT_LIST_SIZE) : [];
|
||||
this.clientTotal = response?.totalFilteredRecords ?? this.initialClients.length;
|
||||
this.showingClientList = true;
|
||||
this.clientOptions = this.notYetAgents(this.initialClients);
|
||||
this.openWhenFocused(this.clientTrigger, this.clientInput?.nativeElement);
|
||||
},
|
||||
// A failed list is not a failed screen - the id can still be typed.
|
||||
error: () => (this.clientOptions = [])
|
||||
});
|
||||
}
|
||||
|
||||
private searchClients(term: string): void {
|
||||
searchClientsAnyCase(this.clientsService, term, this.branchOfficeId).subscribe((found: any[]) => {
|
||||
this.showingClientList = false;
|
||||
this.clientOptions = this.notYetAgents(found).slice(0, 25);
|
||||
this.openWhenFocused(this.clientTrigger, this.clientInput?.nativeElement);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows a list that has just arrived. An autocomplete opened while its list was still empty stays
|
||||
* shut when the options come in, so the screen is refreshed and the panel opened again - but only
|
||||
* on the field still being typed in, never one the officer has moved on from.
|
||||
*/
|
||||
private openWhenFocused(trigger?: MatAutocompleteTrigger, input?: HTMLElement): void {
|
||||
this.changeDetector.detectChanges();
|
||||
if (trigger && input && document.activeElement === input) {
|
||||
trigger.openPanel();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Refills the client-derived fields whenever the Client ID changes, as the legacy screen did.
|
||||
* They always show the client currently entered: changing the id replaces them, clearing it
|
||||
* empties them.
|
||||
*/
|
||||
loadClient(): void {
|
||||
if (this.agentId) {
|
||||
return;
|
||||
}
|
||||
this.clearClientDerivedFields();
|
||||
this.agentForm.get('agentBirthDate')?.setValue('');
|
||||
this.loadedClientName = '';
|
||||
this.clientLookupFailed = false;
|
||||
// A different client has different accounts, so anything picked for the previous one is stale.
|
||||
this.clientSavingsAccounts = [];
|
||||
this.savingsAccountTypes = [];
|
||||
this.agentForm.get('agentSavingAccountType')?.setValue('');
|
||||
this.agentForm.get('agentSavingAccountNo')?.setValue('');
|
||||
|
||||
this.clientOtherBranch = false;
|
||||
this.clientAlreadyAgent = '';
|
||||
this.clientAgeProblem = '';
|
||||
const clientId = this.agentForm.get('clientId')?.value;
|
||||
if (!clientId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// One client is one agent: someone already on the books is not made a second agent.
|
||||
this.clientAlreadyAgent = this.agentCodeByClientId[String(clientId)] || '';
|
||||
if (this.clientAlreadyAgent) {
|
||||
return;
|
||||
}
|
||||
this.clientsService.getClientData(String(clientId), true).subscribe({
|
||||
next: (client: any) => {
|
||||
// An agent is opened at the branch chosen, from that branch's own clients.
|
||||
if (this.branchOfficeId && client?.officeId && Number(client.officeId) !== this.branchOfficeId) {
|
||||
this.clientOtherBranch = true;
|
||||
this.loadedClientName = '';
|
||||
return;
|
||||
}
|
||||
this.loadedClientName = client?.displayName || '';
|
||||
this.setField('agentNameId', client?.displayName);
|
||||
this.setField('agentTelephone', client?.mobileNo);
|
||||
// The client's own date of birth, already taken and checked when the client was opened -
|
||||
// copied across rather than keyed again.
|
||||
const birthDate = asDate(client?.dateOfBirth);
|
||||
this.agentForm.get('agentBirthDate')?.setValue(birthDate);
|
||||
// Agents are taken on at 16 to 59 - said here, before the rest is filled in, not on Save.
|
||||
const age = ageOn(birthDate, new Date());
|
||||
this.clientAgeProblem =
|
||||
age === null
|
||||
? 'This client has no date of birth on record'
|
||||
: age < CreateAgentComponent.MIN_AGENT_AGE || age >= CreateAgentComponent.MAX_AGENT_AGE
|
||||
? `Age is ${age}. An agent must be ${CreateAgentComponent.MIN_AGENT_AGE} to ${CreateAgentComponent.MAX_AGENT_AGE - 1} years old`
|
||||
: '';
|
||||
this.loadClientAddress(String(clientId));
|
||||
this.loadClientSavingsAccounts(String(clientId));
|
||||
},
|
||||
error: () => {
|
||||
this.clientLookupFailed = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* The client's own open savings accounts, to be picked from rather than typed.
|
||||
*
|
||||
* The account number used to be free text, and the live data showed the cost: agent AG0001 carried
|
||||
* "1234567890", which matches no account at all - so every commission recorded against it had
|
||||
* nowhere to go. Offering only the client's real accounts makes that impossible to key, and the
|
||||
* account number then carries its correct product prefix by construction rather than by memory.
|
||||
*/
|
||||
private loadClientSavingsAccounts(clientId: string): void {
|
||||
this.clientsService.getClientAccountData(clientId).subscribe({
|
||||
next: (accounts: any) => {
|
||||
this.clientSavingsAccounts = (accounts?.savingsAccounts || []).filter(
|
||||
(account: any) =>
|
||||
// Savings only. Commission is credited whenever a run posts, and a fixed deposit is a
|
||||
// single sum placed for a term while a recurring one takes only its own instalments -
|
||||
// neither accepts the credit, so the posting would fail rather than the choice.
|
||||
// A DDS scheme account is a savings account too and so passes the test above. It is
|
||||
// dropped by the product the setting names - not by a product called "DDS", which is a
|
||||
// name the bank may change - so the list offers only accounts the agent can be paid in.
|
||||
account.depositType?.id === CreateAgentComponent.SAVINGS_DEPOSIT_TYPE &&
|
||||
(this.ddsProductId === null || account.productId !== this.ddsProductId) &&
|
||||
(account.status?.active || account.status?.submittedAndPendingApproval || account.status?.approved)
|
||||
);
|
||||
this.savingsAccountTypes = [
|
||||
...new Set(this.clientSavingsAccounts.map((account: any) => account.productName).filter(Boolean))
|
||||
];
|
||||
for (const account of this.clientSavingsAccounts) {
|
||||
if (account.productName && account.shortProductName) {
|
||||
this.savingsAccountTypeCodes[account.productName] = account.shortProductName;
|
||||
}
|
||||
}
|
||||
},
|
||||
error: () => {
|
||||
this.clientSavingsAccounts = [];
|
||||
this.savingsAccountTypes = [];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears the account number when the type changes.
|
||||
*
|
||||
* Without this the previously picked account stays in the field while the list below it now shows
|
||||
* a different type - the form would submit an account that contradicts its own type.
|
||||
*/
|
||||
onSavingsAccountTypePicked(): void {
|
||||
this.agentForm.get('agentSavingAccountNo')?.setValue('');
|
||||
}
|
||||
|
||||
private loadClientAddress(clientId: string): void {
|
||||
this.clientsService.getClientAddressData(clientId, true).subscribe({
|
||||
next: (addresses: any) => {
|
||||
const address = Array.isArray(addresses) ? addresses[0] : addresses;
|
||||
if (!address) {
|
||||
return;
|
||||
}
|
||||
this.setField('agentAddress1', address.addressLine1 || address.street);
|
||||
this.setField('agentAddress2', address.addressLine2);
|
||||
this.setField('agentCity', address.city);
|
||||
this.setField('agentPinCode', address.postalCode);
|
||||
},
|
||||
// A client with no address on file is normal — the officer just types it.
|
||||
error: () => undefined
|
||||
});
|
||||
}
|
||||
|
||||
private clearClientDerivedFields(): void {
|
||||
for (const controlName of CreateAgentComponent.CLIENT_DERIVED_FIELDS) {
|
||||
this.agentForm.get(controlName)?.setValue('');
|
||||
}
|
||||
}
|
||||
|
||||
private setField(controlName: string, value: any): void {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return;
|
||||
}
|
||||
this.agentForm.get(controlName)?.setValue(String(value));
|
||||
}
|
||||
|
||||
retrieve(): void {
|
||||
const clientId = this.agentForm.get('clientId')?.value;
|
||||
if (!clientId) {
|
||||
return;
|
||||
}
|
||||
this.organizationService.getAgents().subscribe((agents: any[]) => {
|
||||
const match = (agents || []).find((agent) => String(agent.clientId) === String(clientId));
|
||||
if (match) {
|
||||
this.patchFormFromAgent(match);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.agentId = null;
|
||||
this.loadedClientName = '';
|
||||
this.clientLookupFailed = false;
|
||||
this.agentForm.reset();
|
||||
this.agentForm.patchValue({
|
||||
agentCurrentBalance: 0,
|
||||
agentOpeningBalance: 0
|
||||
});
|
||||
this.guarantors.clear();
|
||||
}
|
||||
|
||||
exit(): void {
|
||||
this.router.navigate(['/organization/agent-master']);
|
||||
}
|
||||
|
||||
save(): void {
|
||||
const raw = this.agentForm.getRawValue();
|
||||
const dateFormat = this.settingsService.dateFormat;
|
||||
const locale = this.settingsService.language.code;
|
||||
|
||||
const payload: any = {
|
||||
clientId: Number(raw.clientId),
|
||||
agentNameId: raw.agentNameId,
|
||||
agentAddress1: raw.agentAddress1,
|
||||
agentAddress2: raw.agentAddress2 || undefined,
|
||||
agentCity: raw.agentCity,
|
||||
agentPinCode: raw.agentPinCode,
|
||||
agentTelephone: raw.agentTelephone || undefined,
|
||||
officeId: Number(raw.officeId),
|
||||
glAccountId: raw.glAccountId ? Number(raw.glAccountId) : undefined,
|
||||
agentSavingAccountType: raw.agentSavingAccountType,
|
||||
agentSavingAccountNo: raw.agentSavingAccountNo,
|
||||
agentOpeningDate: this.dateUtils.formatDate(raw.agentOpeningDate, dateFormat),
|
||||
agentBirthDate: this.dateUtils.formatDate(raw.agentBirthDate, dateFormat),
|
||||
agentOpeningBalance: raw.agentOpeningBalance || 0,
|
||||
dateFormat,
|
||||
locale,
|
||||
guarantors: (raw.guarantors || []).map((guarantor: any) => ({
|
||||
clientId: Number(guarantor.clientId),
|
||||
guarantorName: guarantor.guarantorName,
|
||||
address1: guarantor.address1,
|
||||
address2: guarantor.address2 || undefined,
|
||||
city: guarantor.city,
|
||||
pinCode: guarantor.pinCode,
|
||||
telephone: guarantor.telephone || undefined
|
||||
}))
|
||||
};
|
||||
|
||||
const done = (response: any) => {
|
||||
// Under maker-checker the command is only recorded, and nothing has been saved yet.
|
||||
if (!!response?.commandId && response?.resourceId == null) {
|
||||
this.alertService.alert({
|
||||
type: 'Sent for Approval',
|
||||
message: this.agentId
|
||||
? `Changes to agent ${raw.agentNameId} were sent for a manager's approval and will take effect once approved.`
|
||||
: `New agent ${raw.agentNameId} was sent for a manager's approval and will be created once approved.`
|
||||
});
|
||||
}
|
||||
this.exit();
|
||||
};
|
||||
|
||||
if (this.agentId) {
|
||||
this.organizationService.updateAgent(this.agentId, payload).subscribe(done);
|
||||
} else {
|
||||
this.organizationService.createAgent(payload).subscribe(done);
|
||||
}
|
||||
}
|
||||
|
||||
private patchFormFromAgent(agent: any): void {
|
||||
this.agentId = agent.id;
|
||||
this.loadedClientName = agent.clientName || '';
|
||||
this.clientLookupFailed = false;
|
||||
this.agentForm.patchValue({
|
||||
clientId: agent.clientId,
|
||||
agentCode: agent.agentCode,
|
||||
agentNameId: agent.agentNameId,
|
||||
agentAddress1: agent.agentAddress1,
|
||||
agentAddress2: agent.agentAddress2,
|
||||
agentCity: agent.agentCity,
|
||||
agentPinCode: agent.agentPinCode,
|
||||
agentTelephone: agent.agentTelephone,
|
||||
officeId: agent.officeId ? Number(agent.officeId) : '',
|
||||
glAccountId: agent.glAccountId ? Number(agent.glAccountId) : '',
|
||||
agentSavingAccountType: agent.agentSavingAccountType,
|
||||
agentSavingAccountNo: agent.agentSavingAccountNo,
|
||||
agentOpeningDate: agent.agentOpeningDate ? new Date(agent.agentOpeningDate) : null,
|
||||
agentBirthDate: agent.agentBirthDate ? new Date(agent.agentBirthDate) : null,
|
||||
agentCurrentBalance: agent.agentCurrentBalance,
|
||||
agentOpeningBalance: agent.agentOpeningBalance
|
||||
});
|
||||
|
||||
// The account list is needed for the dropdown to show the already-saved account as chosen
|
||||
// rather than blank, so it is fetched on edit as well as on the client lookup.
|
||||
if (agent.clientId) {
|
||||
this.loadClientSavingsAccounts(String(agent.clientId));
|
||||
}
|
||||
|
||||
this.guarantors.clear();
|
||||
for (const guarantor of agent.guarantors || []) {
|
||||
const group = this.buildGuarantorGroup();
|
||||
group.patchValue({
|
||||
clientId: guarantor.clientId,
|
||||
guarantorName: guarantor.guarantorName,
|
||||
address1: guarantor.address1,
|
||||
address2: guarantor.address2,
|
||||
city: guarantor.city,
|
||||
pinCode: guarantor.pinCode,
|
||||
telephone: guarantor.telephone
|
||||
});
|
||||
this.guarantors.push(group);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** A date as the platform sends it - [yyyy, mm, dd] or an ISO string - or null when there is none. */
|
||||
function asDate(value: any): Date | null {
|
||||
if (Array.isArray(value) && value.length >= 3) {
|
||||
return new Date(value[0], value[1] - 1, value[2]);
|
||||
}
|
||||
if (value) {
|
||||
const parsed = new Date(value);
|
||||
return isNaN(parsed.getTime()) ? null : parsed;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/** One shared empty list, so a row with nothing to offer hands the template the same array each time. */
|
||||
const GUARANTOR_NO_OPTIONS: any[] = [];
|
||||
|
||||
/** Full years between a date of birth and a day, or null without a date of birth. */
|
||||
function ageOn(birthDate: Date | null, on: Date): number | null {
|
||||
if (!birthDate) {
|
||||
return null;
|
||||
}
|
||||
let age = on.getFullYear() - birthDate.getFullYear();
|
||||
const birthdayPassed =
|
||||
on.getMonth() > birthDate.getMonth() ||
|
||||
(on.getMonth() === birthDate.getMonth() && on.getDate() >= birthDate.getDate());
|
||||
if (!birthdayPassed) {
|
||||
age--;
|
||||
}
|
||||
return age;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* 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 given office and every office under it, read from the office hierarchy (".", ".2.", ".2.5."):
|
||||
* an office's own branches are the ones whose hierarchy starts with its own. Head Office, at the
|
||||
* top, has them all. Falls back to the office alone when its hierarchy is not known.
|
||||
*/
|
||||
export function officesUnder(offices: any[], officeId: number | null | undefined): any[] {
|
||||
if (!officeId) {
|
||||
return offices;
|
||||
}
|
||||
const own = offices.find((office: any) => office.id === officeId);
|
||||
if (!own) {
|
||||
return [];
|
||||
}
|
||||
const hierarchy = String(own.hierarchy || '');
|
||||
if (!hierarchy) {
|
||||
return [own];
|
||||
}
|
||||
return offices.filter((office: any) => String(office.hierarchy || '').startsWith(hierarchy));
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="csm-container">
|
||||
<div class="csm-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="csm-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Organization' | translate }}
|
||||
</button>
|
||||
<h2 class="csm-header__title">Commission Slab Master</h2>
|
||||
</div>
|
||||
|
||||
<div class="csm-card">
|
||||
<table class="csm-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Slab Type</th>
|
||||
<th>Slab From</th>
|
||||
<th>Slab To</th>
|
||||
<th>Comm Per</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (slab of slabs; track slab; let i = $index) {
|
||||
@if (editingIndex === i) {
|
||||
<!-- The same row turned into inputs, so a correction is made where the value is read. -->
|
||||
<tr [formGroup]="editSlabForm" class="csm-new-row">
|
||||
<td>
|
||||
<mat-form-field appearance="outline" class="csm-inline-field">
|
||||
<mat-select formControlName="slabType">
|
||||
@for (type of slabTypes; track type) {
|
||||
<mat-option [value]="type">{{ type }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td>
|
||||
<mat-form-field appearance="outline" class="csm-inline-field">
|
||||
<input matInput type="number" formControlName="slabFrom" />
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td>
|
||||
<mat-form-field appearance="outline" class="csm-inline-field">
|
||||
<input matInput type="number" formControlName="slabTo" />
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td>
|
||||
<mat-form-field appearance="outline" class="csm-inline-field">
|
||||
<input matInput type="number" formControlName="commissionPercent" />
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td class="csm-row-actions">
|
||||
<button mat-icon-button color="primary" type="button" (click)="saveEdit()" matTooltip="Save correction">
|
||||
<i class="fas fa-check"></i>
|
||||
</button>
|
||||
<button mat-icon-button type="button" (click)="cancelEdit()" matTooltip="Cancel">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
} @else {
|
||||
<tr>
|
||||
<td>{{ slab.slabType }}</td>
|
||||
<td>{{ slab.slabFrom }}</td>
|
||||
<td>{{ slab.slabTo }}</td>
|
||||
<td>{{ slab.commissionPercent }}%</td>
|
||||
<td class="csm-row-actions">
|
||||
@if (slab.id) {
|
||||
<!--
|
||||
A saved slab is corrected, never removed. Deleting a range would leave a hole
|
||||
that pays nothing to any agent whose volume lands in it, with nothing on screen
|
||||
to say why - and there is deliberately no delete endpoint behind it.
|
||||
-->
|
||||
<button mat-icon-button color="primary" type="button" (click)="startEdit(i)" matTooltip="Edit slab">
|
||||
<i class="fas fa-pen"></i>
|
||||
</button>
|
||||
} @else {
|
||||
<!-- Not saved yet, so taking it back off the table costs nothing. -->
|
||||
<button mat-icon-button type="button" (click)="removeSlab(i)" matTooltip="Remove before saving">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
|
||||
<tr [formGroup]="newSlabForm" class="csm-new-row">
|
||||
<td>
|
||||
<mat-form-field appearance="outline" class="csm-inline-field">
|
||||
<mat-select required formControlName="slabType" placeholder="Slab Type">
|
||||
@for (type of slabTypes; track type) {
|
||||
<mat-option [value]="type">{{ type }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td>
|
||||
<mat-form-field appearance="outline" class="csm-inline-field">
|
||||
<input matInput required type="number" formControlName="slabFrom" />
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td>
|
||||
<mat-form-field appearance="outline" class="csm-inline-field">
|
||||
<input matInput required type="number" formControlName="slabTo" />
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td>
|
||||
<mat-form-field appearance="outline" class="csm-inline-field">
|
||||
<input matInput required type="number" formControlName="commissionPercent" />
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td class="csm-row-actions">
|
||||
<!--
|
||||
Deliberately not disabled while the row is incomplete. A greyed-out button says the
|
||||
screen will not accept this, but never which field it is waiting for; letting the
|
||||
click through means addSlab() can say so.
|
||||
-->
|
||||
<button mat-icon-button color="primary" type="button" (click)="addSlab()" matTooltip="Add slab">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@if (slabs.length === 0) {
|
||||
<p class="csm-empty">No commission slabs defined yet — add one using the row above.</p>
|
||||
}
|
||||
|
||||
@if (coverage.length > 0) {
|
||||
<div class="csm-coverage">
|
||||
@for (entry of coverage; track entry.slabType) {
|
||||
<div class="csm-coverage__row">
|
||||
<span class="csm-coverage__type">{{ entry.slabType }}</span>
|
||||
<span class="csm-coverage__range"> covers {{ entry.from | number }} to {{ entry.to | number }} </span>
|
||||
@if (entry.gaps.length > 0) {
|
||||
<span class="csm-coverage__gap">
|
||||
nothing set for {{ entry.gaps.join(', ') }} — an agent landing there earns no commission
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="csm-action-bar">
|
||||
<button mat-raised-button type="button" (click)="exit()">Exit</button>
|
||||
<button mat-raised-button color="primary" type="button" (click)="save()">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,163 @@
|
||||
/**
|
||||
* 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;
|
||||
|
||||
.csm-container {
|
||||
// Four inputs sit side by side in the entry row; 760px squeezed them out of the card.
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.csm-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.csm-back {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.csm-card {
|
||||
background: var(--md-sys-color-surface, #fff);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
|
||||
padding: 16px 24px 24px;
|
||||
}
|
||||
|
||||
.csm-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
|
||||
// Sized rather than left to the browser, so the entry row keeps its shape whatever is typed in.
|
||||
th:nth-child(1),
|
||||
td:nth-child(1) {
|
||||
width: 26%;
|
||||
}
|
||||
|
||||
th:nth-child(2),
|
||||
td:nth-child(2) {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
th:nth-child(3),
|
||||
td:nth-child(3) {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
th:nth-child(4),
|
||||
td:nth-child(4) {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
th:nth-child(5),
|
||||
td:nth-child(5) {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: rgb(0 0 0 / 55%);
|
||||
padding: 8px 10px;
|
||||
border-bottom: 2px solid rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 6%);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.csm-inline-field {
|
||||
width: 100%;
|
||||
// Without this the field holds its own 180px floor and pushes the next column out of the card.
|
||||
min-width: 0;
|
||||
|
||||
::ng-deep .mat-mdc-text-field-wrapper {
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.csm-row-actions {
|
||||
text-align: center;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.csm-new-row {
|
||||
background: rgb(15 118 110 / 4%);
|
||||
}
|
||||
|
||||
.csm-empty {
|
||||
color: rgb(0 0 0 / 50%);
|
||||
font-size: 14px;
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
.csm-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%);
|
||||
}
|
||||
|
||||
/*
|
||||
* What the slabs actually cover, and any figure between them that none of them claims.
|
||||
*
|
||||
* A gap is legitimate - a bank may set no commission below some floor - so this reports rather than
|
||||
* warns. But it has to be said out loud: the commission run finds no slab for a volume in a gap and
|
||||
* moves on, so the agent is simply paid nothing that month and nothing on screen explains it.
|
||||
*/
|
||||
.csm-coverage {
|
||||
margin-top: 14px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid rgb(0 0 0 / 12%);
|
||||
border-radius: 6px;
|
||||
background: rgb(0 0 0 / 2.5%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
&__type {
|
||||
font-weight: 600;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
&__range {
|
||||
color: rgb(0 0 0 / 62%);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
&__gap {
|
||||
color: #b45309;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/** Custom Services */
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
import { AlertService } from 'app/core/alert/alert.service';
|
||||
import { announceHeldForApproval, heldForApproval } from 'app/deposits/dds-approvals/dds-approval-notice';
|
||||
|
||||
/**
|
||||
* Commission Slab Master component.
|
||||
*
|
||||
* Two kinds of slab: ACCOUNT (commission percentage on collection volume)
|
||||
* and COMMISSION (a senior-agent override on another agent's commission -
|
||||
* deferred: there is no agent hierarchy modelled yet, see the DDS punch
|
||||
* list). Modelled directly on the legacy Commission Slab Master screen this
|
||||
* replaces.
|
||||
*
|
||||
* Backed by its own DDS Commission Slab API (`/dds/commissionslabs`) - an
|
||||
* append-only chart, same as the legacy screen: existing rows load on open,
|
||||
* newly-added rows post on Save, and there is no edit/delete of a
|
||||
* previously-saved row.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-commission-slab-master',
|
||||
templateUrl: './commission-slab-master.component.html',
|
||||
styleUrls: ['./commission-slab-master.component.scss'],
|
||||
imports: [...STANDALONE_SHARED_IMPORTS]
|
||||
})
|
||||
export class CommissionSlabMasterComponent implements OnInit {
|
||||
private formBuilder = inject(UntypedFormBuilder);
|
||||
private router = inject(Router);
|
||||
private organizationService = inject(OrganizationService);
|
||||
private alertService = inject(AlertService);
|
||||
|
||||
private static readonly SLAB_TYPE_CODES: Record<string, string> = {
|
||||
Account: 'ACCOUNT',
|
||||
Commission: 'COMMISSION'
|
||||
};
|
||||
private static readonly SLAB_TYPE_LABELS: Record<string, string> = {
|
||||
ACCOUNT: 'Account',
|
||||
COMMISSION: 'Commission'
|
||||
};
|
||||
|
||||
slabTypes = [
|
||||
'Account',
|
||||
'Commission'
|
||||
];
|
||||
|
||||
displayedColumns: string[] = [
|
||||
'slabType',
|
||||
'slabFrom',
|
||||
'slabTo',
|
||||
'commissionPercent',
|
||||
'actions'
|
||||
];
|
||||
|
||||
slabs: Array<{ id?: number; slabType: string; slabFrom: number; slabTo: number; commissionPercent: number }> = [];
|
||||
|
||||
newSlabForm: UntypedFormGroup = this.formBuilder.group({
|
||||
slabType: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
slabFrom: [
|
||||
0,
|
||||
Validators.required
|
||||
],
|
||||
slabTo: [
|
||||
0,
|
||||
Validators.required
|
||||
],
|
||||
commissionPercent: [
|
||||
0,
|
||||
Validators.required
|
||||
]
|
||||
});
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadSlabs();
|
||||
}
|
||||
|
||||
private loadSlabs(): void {
|
||||
this.organizationService.getCommissionSlabs().subscribe((slabs: any[]) => {
|
||||
this.slabs = (slabs || []).map((slab) => ({
|
||||
id: slab.id,
|
||||
slabType: CommissionSlabMasterComponent.SLAB_TYPE_LABELS[slab.slabType] || slab.slabType,
|
||||
slabFrom: slab.slabFrom,
|
||||
slabTo: slab.slabTo,
|
||||
commissionPercent: slab.commissionPercent
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Where each slab type's coverage begins and ends, and any figure in between that no slab claims.
|
||||
*
|
||||
* A gap is not an error - a bank may well decide there is no commission below some floor - but it
|
||||
* has to be visible. The commission run simply finds no slab for a volume that falls in a gap and
|
||||
* moves on, so the agent is paid nothing for that month with nothing on screen to say why.
|
||||
*/
|
||||
get coverage(): Array<{ slabType: string; from: number; to: number; gaps: string[] }> {
|
||||
return this.slabTypes
|
||||
.map((slabType) => {
|
||||
const rows = this.slabs
|
||||
.filter((slab) => slab.slabType === slabType)
|
||||
.map((slab) => ({ from: Number(slab.slabFrom), to: Number(slab.slabTo) }))
|
||||
.sort((a, b) => a.from - b.from);
|
||||
|
||||
if (rows.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const gaps: string[] = [];
|
||||
for (let i = 1; i < rows.length; i++) {
|
||||
const previousEnd = rows[i - 1].to;
|
||||
const nextStart = rows[i].from;
|
||||
if (nextStart > previousEnd + 1) {
|
||||
gaps.push(`${previousEnd + 1} - ${nextStart - 1}`);
|
||||
}
|
||||
}
|
||||
|
||||
return { slabType, from: rows[0].from, to: rows[rows.length - 1].to, gaps };
|
||||
})
|
||||
.filter((entry): entry is { slabType: string; from: number; to: number; gaps: string[] } => entry !== null);
|
||||
}
|
||||
|
||||
/**
|
||||
* The slab already on the table that this range would collide with, if any.
|
||||
*
|
||||
* The backend refuses overlapping slabs, but only when Save is pressed - by then the officer may
|
||||
* have keyed several rows and has to work out which one it objected to. Catching it as the row is
|
||||
* added names the clash while it is still the row in front of them.
|
||||
*/
|
||||
private clashingSlab(candidate: { slabType: string; slabFrom: number; slabTo: number }): any {
|
||||
return this.slabs.find(
|
||||
(slab) =>
|
||||
slab.slabType === candidate.slabType &&
|
||||
Number(candidate.slabFrom) <= Number(slab.slabTo) &&
|
||||
Number(candidate.slabTo) >= Number(slab.slabFrom)
|
||||
);
|
||||
}
|
||||
|
||||
addSlab(): void {
|
||||
if (this.newSlabForm.invalid) {
|
||||
// Marking the controls touched is what makes Material show which one is missing; without it
|
||||
// the button simply does nothing and the officer has no idea what the screen is waiting for.
|
||||
this.newSlabForm.markAllAsTouched();
|
||||
this.alertService.alert({ type: 'Error', message: 'Fill the slab type, range and percentage first' });
|
||||
return;
|
||||
}
|
||||
|
||||
const candidate = this.newSlabForm.getRawValue();
|
||||
|
||||
if (Number(candidate.slabFrom) > Number(candidate.slabTo)) {
|
||||
this.alertService.alert({ type: 'Error', message: 'Slab From cannot be greater than Slab To' });
|
||||
return;
|
||||
}
|
||||
if (Number(candidate.commissionPercent) > 100) {
|
||||
this.alertService.alert({ type: 'Error', message: 'Commission cannot be more than 100%' });
|
||||
return;
|
||||
}
|
||||
|
||||
const clash = this.clashingSlab(candidate);
|
||||
if (clash) {
|
||||
this.alertService.alert({
|
||||
type: 'Error',
|
||||
message: `Overlaps the existing ${clash.slabType} slab ${clash.slabFrom} to ${clash.slabTo}`
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.slabs.push(candidate);
|
||||
this.newSlabForm.reset({
|
||||
slabType: '',
|
||||
slabFrom: 0,
|
||||
slabTo: 0,
|
||||
commissionPercent: 0
|
||||
});
|
||||
}
|
||||
|
||||
/** Only ever an unsaved row - a saved slab is corrected, not taken away. */
|
||||
removeSlab(index: number): void {
|
||||
this.slabs.splice(index, 1);
|
||||
}
|
||||
|
||||
/** Which saved row is currently open for correction, or -1 when none is. */
|
||||
editingIndex = -1;
|
||||
|
||||
editSlabForm: UntypedFormGroup = this.formBuilder.group({
|
||||
slabType: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
slabFrom: [
|
||||
0,
|
||||
Validators.required
|
||||
],
|
||||
slabTo: [
|
||||
0,
|
||||
Validators.required
|
||||
],
|
||||
commissionPercent: [
|
||||
0,
|
||||
Validators.required
|
||||
]
|
||||
});
|
||||
|
||||
startEdit(index: number): void {
|
||||
const slab = this.slabs[index];
|
||||
this.editingIndex = index;
|
||||
this.editSlabForm.setValue({
|
||||
slabType: slab.slabType,
|
||||
slabFrom: slab.slabFrom,
|
||||
slabTo: slab.slabTo,
|
||||
commissionPercent: slab.commissionPercent
|
||||
});
|
||||
}
|
||||
|
||||
cancelEdit(): void {
|
||||
this.editingIndex = -1;
|
||||
}
|
||||
|
||||
saveEdit(): void {
|
||||
const slab = this.slabs[this.editingIndex];
|
||||
const corrected = this.editSlabForm.getRawValue();
|
||||
|
||||
if (this.editSlabForm.invalid) {
|
||||
this.editSlabForm.markAllAsTouched();
|
||||
this.alertService.alert({ type: 'Error', message: 'Fill the slab type, range and percentage' });
|
||||
return;
|
||||
}
|
||||
if (Number(corrected.slabFrom) > Number(corrected.slabTo)) {
|
||||
this.alertService.alert({ type: 'Error', message: 'Slab From cannot be greater than Slab To' });
|
||||
return;
|
||||
}
|
||||
if (Number(corrected.commissionPercent) > 100) {
|
||||
this.alertService.alert({ type: 'Error', message: 'Commission cannot be more than 100%' });
|
||||
return;
|
||||
}
|
||||
|
||||
this.organizationService
|
||||
.updateCommissionSlab(slab.id, {
|
||||
slabType: CommissionSlabMasterComponent.SLAB_TYPE_CODES[corrected.slabType] || corrected.slabType,
|
||||
slabFrom: corrected.slabFrom,
|
||||
slabTo: corrected.slabTo,
|
||||
commissionPercent: corrected.commissionPercent,
|
||||
locale: 'en'
|
||||
})
|
||||
.subscribe({
|
||||
next: (response: any) => {
|
||||
if (heldForApproval(response)) {
|
||||
announceHeldForApproval(response, 'The slab correction', this.organizationService, this.alertService);
|
||||
} else {
|
||||
this.alertService.alert({ type: 'Success', message: 'Slab corrected' });
|
||||
}
|
||||
this.editingIndex = -1;
|
||||
this.loadSlabs();
|
||||
},
|
||||
// The backend refuses a correction that overlaps another slab; the reason has to reach the
|
||||
// officer, not vanish.
|
||||
error: (error: any) => {
|
||||
this.alertService.alert({
|
||||
type: 'Error',
|
||||
message:
|
||||
error?.error?.errors?.[0]?.defaultUserMessage ||
|
||||
error?.error?.defaultUserMessage ||
|
||||
'Could not correct the slab'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
exit(): void {
|
||||
this.router.navigate(['/organization']);
|
||||
}
|
||||
|
||||
save(): void {
|
||||
const newSlabs = this.slabs.filter((slab) => !slab.id);
|
||||
if (newSlabs.length === 0) {
|
||||
// Save used to return here without a word, so a slab typed into the entry row but never added
|
||||
// looked exactly like a slab that had been saved.
|
||||
this.alertService.alert({
|
||||
type: 'Error',
|
||||
message: 'Nothing new to save — add the slab to the table with + first'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = newSlabs.map((slab) => ({
|
||||
slabType: CommissionSlabMasterComponent.SLAB_TYPE_CODES[slab.slabType] || slab.slabType,
|
||||
slabFrom: slab.slabFrom,
|
||||
slabTo: slab.slabTo,
|
||||
commissionPercent: slab.commissionPercent
|
||||
}));
|
||||
|
||||
this.organizationService.createCommissionSlabs(payload).subscribe({
|
||||
next: (response: any) => {
|
||||
if (heldForApproval(response)) {
|
||||
announceHeldForApproval(
|
||||
response,
|
||||
`${newSlabs.length} ${newSlabs.length === 1 ? 'slab' : 'slabs'}`,
|
||||
this.organizationService,
|
||||
this.alertService
|
||||
);
|
||||
} else {
|
||||
this.alertService.alert({
|
||||
type: 'Success',
|
||||
message: `${newSlabs.length} ${newSlabs.length === 1 ? 'slab' : 'slabs'} saved`
|
||||
});
|
||||
}
|
||||
this.loadSlabs();
|
||||
},
|
||||
// The backend refuses an overlapping range; the officer needs to read why, not watch nothing
|
||||
// happen and assume the save went through.
|
||||
error: (error: any) => {
|
||||
this.alertService.alert({
|
||||
type: 'Error',
|
||||
message:
|
||||
error?.error?.errors?.[0]?.defaultUserMessage ||
|
||||
error?.error?.defaultUserMessage ||
|
||||
'Could not save the slabs'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user