Add customer search dialog and sponsor DD/reconciliation modules
Adds sponsor-dd and sponsor-dd-reconciliation feature modules, a shared customer search dialog, and wires them into routing/shell/ organization screens alongside cashier and deposit-request updates.
This commit is contained in:
@@ -0,0 +1,307 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
|
||||
export interface CustomerSearchResult {
|
||||
clientId: number;
|
||||
displayName: string;
|
||||
mobileNo: string | null;
|
||||
officeName: string | null;
|
||||
accountNo: string | null;
|
||||
accountType: 'SAVINGS' | 'CURRENT' | 'FIXED_DEPOSIT' | 'RECURRING_DEPOSIT' | null;
|
||||
panNumber: string | null;
|
||||
aadhaarNumber: string | null;
|
||||
address: string | null;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-customer-search-dialog',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
MatDialogModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatButtonModule,
|
||||
MatTableModule,
|
||||
MatCheckboxModule,
|
||||
MatSnackBarModule
|
||||
],
|
||||
template: `
|
||||
<h2 mat-dialog-title>Search Customer</h2>
|
||||
<mat-dialog-content>
|
||||
<p class="hint-text">
|
||||
Fill in any one field, or combine several to narrow the search (e.g. name + account number).
|
||||
</p>
|
||||
<form [formGroup]="form" class="search-form">
|
||||
<mat-form-field appearance="outline" class="field">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput formControlName="name" placeholder="Customer name" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="field">
|
||||
<mat-label>Account Number</mat-label>
|
||||
<input matInput formControlName="accountNumber" placeholder="Savings / Current / FD / RD" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="field">
|
||||
<mat-label>Aadhaar Number</mat-label>
|
||||
<input matInput formControlName="aadhaarNumber" placeholder="12-digit Aadhaar" maxlength="12" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="field">
|
||||
<mat-label>PAN Number</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="panNumber"
|
||||
placeholder="e.g. ABCDE1234F"
|
||||
maxlength="10"
|
||||
style="text-transform: uppercase;"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="field field--wide">
|
||||
<mat-label>Address</mat-label>
|
||||
<input matInput formControlName="address" placeholder="Street, town, city, or postal code" />
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
||||
<div class="account-type-filter" [formGroup]="form">
|
||||
<span class="account-type-filter__label">Account Type</span>
|
||||
<mat-checkbox formControlName="savings">Savings</mat-checkbox>
|
||||
<mat-checkbox formControlName="current">Current</mat-checkbox>
|
||||
<mat-checkbox formControlName="fixedDeposit">Fixed Deposit</mat-checkbox>
|
||||
<mat-checkbox formControlName="recurringDeposit">Recurring Deposit</mat-checkbox>
|
||||
<span class="account-type-filter__hint">(leave all unchecked to search every account type)</span>
|
||||
</div>
|
||||
|
||||
<div class="results" *ngIf="searched">
|
||||
<p *ngIf="!loading && results.length === 0" class="no-results">No matching customer found.</p>
|
||||
|
||||
<table mat-table [dataSource]="results" *ngIf="results.length > 0">
|
||||
<ng-container matColumnDef="displayName">
|
||||
<th mat-header-cell *matHeaderCellDef>Name</th>
|
||||
<td mat-cell *matCellDef="let r">{{ r.displayName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="account">
|
||||
<th mat-header-cell *matHeaderCellDef>Account</th>
|
||||
<td mat-cell *matCellDef="let r">
|
||||
<span *ngIf="r.accountNo">{{ r.accountNo }} ({{ accountTypeLabel(r.accountType) }})</span>
|
||||
<span *ngIf="!r.accountNo" class="muted">No account</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="mobileNo">
|
||||
<th mat-header-cell *matHeaderCellDef>Mobile</th>
|
||||
<td mat-cell *matCellDef="let r">{{ r.mobileNo || '-' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="officeName">
|
||||
<th mat-header-cell *matHeaderCellDef>Branch</th>
|
||||
<td mat-cell *matCellDef="let r">{{ r.officeName || '-' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="panNumber">
|
||||
<th mat-header-cell *matHeaderCellDef>PAN</th>
|
||||
<td mat-cell *matCellDef="let r">{{ r.panNumber || '-' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="aadhaarNumber">
|
||||
<th mat-header-cell *matHeaderCellDef>Aadhaar</th>
|
||||
<td mat-cell *matCellDef="let r">{{ r.aadhaarNumber || '-' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="address">
|
||||
<th mat-header-cell *matHeaderCellDef>Address</th>
|
||||
<td mat-cell *matCellDef="let r">{{ r.address || '-' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="select">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let r">
|
||||
<button mat-flat-button color="primary" [disabled]="!r.accountNo" (click)="onSelect(r)">Select</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="onClose()">Close</button>
|
||||
<button mat-flat-button color="primary" [disabled]="loading" (click)="onSearch()">Search</button>
|
||||
</mat-dialog-actions>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
.hint-text {
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
.search-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 16px;
|
||||
}
|
||||
.field {
|
||||
flex: 1 1 220px;
|
||||
}
|
||||
.field--wide {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.account-type-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 16px;
|
||||
margin: 4px 0 16px 0;
|
||||
}
|
||||
.account-type-filter__label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
}
|
||||
.account-type-filter__hint {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.results {
|
||||
margin-top: 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
th {
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
td {
|
||||
color: #334155;
|
||||
}
|
||||
.muted {
|
||||
color: #94a3b8;
|
||||
}
|
||||
.no-results {
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
padding: 16px 0;
|
||||
}
|
||||
`
|
||||
]
|
||||
})
|
||||
export class CustomerSearchDialogComponent implements OnInit {
|
||||
private fb = inject(FormBuilder);
|
||||
private http = inject(HttpClient);
|
||||
private dialogRef = inject(MatDialogRef<CustomerSearchDialogComponent>);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
|
||||
form!: FormGroup;
|
||||
loading = false;
|
||||
searched = false;
|
||||
results: CustomerSearchResult[] = [];
|
||||
displayedColumns = [
|
||||
'displayName',
|
||||
'account',
|
||||
'mobileNo',
|
||||
'officeName',
|
||||
'panNumber',
|
||||
'aadhaarNumber',
|
||||
'address',
|
||||
'select'
|
||||
];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.form = this.fb.group({
|
||||
name: [''],
|
||||
accountNumber: [''],
|
||||
aadhaarNumber: [''],
|
||||
panNumber: [''],
|
||||
address: [''],
|
||||
savings: [false],
|
||||
current: [false],
|
||||
fixedDeposit: [false],
|
||||
recurringDeposit: [false]
|
||||
});
|
||||
}
|
||||
|
||||
accountTypeLabel(type: string | null): string {
|
||||
switch (type) {
|
||||
case 'SAVINGS':
|
||||
return 'Savings';
|
||||
case 'CURRENT':
|
||||
return 'Current';
|
||||
case 'FIXED_DEPOSIT':
|
||||
return 'FD';
|
||||
case 'RECURRING_DEPOSIT':
|
||||
return 'RD';
|
||||
default:
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
|
||||
onSearch(): void {
|
||||
const v = this.form.value;
|
||||
const accountTypes: string[] = [];
|
||||
if (v.savings) accountTypes.push('SAVINGS');
|
||||
if (v.current) accountTypes.push('CURRENT');
|
||||
if (v.fixedDeposit) accountTypes.push('FIXED_DEPOSIT');
|
||||
if (v.recurringDeposit) accountTypes.push('RECURRING_DEPOSIT');
|
||||
|
||||
if (!v.name && !v.accountNumber && !v.aadhaarNumber && !v.panNumber && !v.address && accountTypes.length === 0) {
|
||||
this.snackBar.open('Enter at least one search field, or check an account type.', 'Close', { duration: 3000 });
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
let params = new HttpParams();
|
||||
if (v.name) params = params.set('name', v.name);
|
||||
if (v.accountNumber) params = params.set('accountNumber', v.accountNumber);
|
||||
if (v.aadhaarNumber) params = params.set('aadhaarNumber', v.aadhaarNumber);
|
||||
if (v.panNumber) params = params.set('panNumber', v.panNumber);
|
||||
if (v.address) params = params.set('address', v.address);
|
||||
if (accountTypes.length > 0) params = params.set('accountTypes', accountTypes.join(','));
|
||||
|
||||
this.http.get<CustomerSearchResult[]>('/customer-search', { params }).subscribe({
|
||||
next: (data) => {
|
||||
this.results = data || [];
|
||||
this.searched = true;
|
||||
this.loading = false;
|
||||
},
|
||||
error: (err) => {
|
||||
this.loading = false;
|
||||
this.snackBar.open('Error: ' + (err.error?.message || err.message), 'Close', { duration: 5000 });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onSelect(result: CustomerSearchResult): void {
|
||||
this.dialogRef.close(result);
|
||||
}
|
||||
|
||||
onClose(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user