From 186a9057a1eba9a5fad1d29c264d74396f30e09a Mon Sep 17 00:00:00 2001 From: Nitesh Yadav Date: Thu, 30 Jul 2026 13:38:10 +0530 Subject: [PATCH] feat(clients): confirm linked Client ID + details after adding a family member MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "Add Member" dialog closed silently on submit, giving no acknowledgement of what got recorded — most notably the linked client's own CBS Client ID when the member was linked to an existing client rather than entered manually. Added a confirmation popup showing Client ID (when linked), name, relationship, DOB and dependent status right after submit. --- .../client-family-members-step.component.ts | 17 ++ .../family-member-added-dialog.component.ts | 145 ++++++++++++++++++ 2 files changed, 162 insertions(+) create mode 100644 src/app/clients/client-stepper/client-family-members-step/family-member-added-dialog.component.ts diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts index d324ac254..cf7209829 100644 --- a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts +++ b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts @@ -12,6 +12,7 @@ import { TranslateService } from '@ngx-translate/core'; import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component'; import { ClientFamilyMemberDialogComponent } from './client-family-member-dialog/client-family-member-dialog.component'; import { ImageZoomDialogComponent } from './client-family-member-dialog/client-family-member-dialog.component'; +import { FamilyMemberAddedDialogComponent } from './family-member-added-dialog.component'; import { ClientsService } from '../../clients.service'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { MatIcon } from '@angular/material/icon'; @@ -152,6 +153,22 @@ export class ClientFamilyMembersStepComponent implements OnInit { ref.afterClosed().subscribe((response: any) => { if (response?.member) { this.clientFamilyMembers.push(response.member); + this.showFamilyMemberAddedConfirmation(response.member); + } + }); + } + + /** Confirms what was just recorded — in particular the linked client's own CBS Client ID, + * since the "Add Member" dialog closes silently otherwise and gives no acknowledgement. */ + private showFamilyMemberAddedConfirmation(member: any): void { + this.dialog.open(FamilyMemberAddedDialogComponent, { + width: '360px', + data: { + clientId: member._linkedClient?.id ?? member.linkedClientId ?? null, + name: member._linkedClient?.displayName || member.firstName, + relationship: this.getRelName(member.relationshipId), + dateOfBirth: member.dateOfBirth, + isDependent: member.isDependent } }); } diff --git a/src/app/clients/client-stepper/client-family-members-step/family-member-added-dialog.component.ts b/src/app/clients/client-stepper/client-family-members-step/family-member-added-dialog.component.ts new file mode 100644 index 000000000..5a7679e80 --- /dev/null +++ b/src/app/clients/client-stepper/client-family-members-step/family-member-added-dialog.component.ts @@ -0,0 +1,145 @@ +/** + * 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, inject } from '@angular/core'; +import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogActions } from '@angular/material/dialog'; +import { MatIcon } from '@angular/material/icon'; +import { MatButton } from '@angular/material/button'; + +/** + * Confirmation popup shown right after a family member is added — surfaces the linked + * client's own CBS Client ID (when the member was linked to an existing client rather than + * entered manually) alongside name/relationship, since the "Add Member" dialog itself just + * closed silently before this with no acknowledgement of what got recorded. + */ +@Component({ + selector: 'mifosx-family-member-added-dialog', + imports: [ + MatDialogTitle, + MatDialogActions, + MatIcon, + MatButton + ], + template: ` +

+ check_circle + Family Member Added +

+
+ @if (data.clientId) { +
+ Client ID + {{ data.clientId }} +
+ } +
+ Name + {{ data.name }} +
+ @if (data.relationship) { +
+ Relationship + {{ data.relationship }} +
+ } + @if (data.dateOfBirth) { +
+ Date of Birth + {{ data.dateOfBirth }} +
+ } + @if (data.isDependent) { +
+ Dependent + Yes +
+ } +
+ + + + `, + styles: [ + ` + .fma-title { + display: flex; + align-items: center; + gap: 8px; + font-size: 17px; + font-weight: 700; + color: #0f172a; + margin: 0; + padding: 20px 24px 4px; + } + + .fma-title__icon { + color: #059669; + } + + .fma-body { + display: flex; + flex-direction: column; + gap: 2px; + padding: 12px 24px 8px; + min-width: 280px; + } + + .fma-row { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; + padding: 8px 0; + border-bottom: 1px solid #f1f5f9; + + &:last-child { + border-bottom: none; + } + } + + .fma-row__label { + font-size: 12px; + color: #64748b; + font-weight: 500; + } + + .fma-row__value { + font-size: 13px; + color: #0f172a; + font-weight: 600; + text-align: right; + } + + .fma-row--id { + background: #eff6ff; + margin: 0 -24px; + padding: 10px 24px; + } + + .fma-row__value--id { + font-family: 'Roboto Mono', monospace; + color: #1353a0; + font-size: 14px; + } + + mat-dialog-actions { + padding: 8px 24px 16px; + } + ` + ] +}) +export class FamilyMemberAddedDialogComponent { + dialogRef = inject>(MatDialogRef); + data: { + clientId?: string | number | null; + name: string; + relationship?: string; + dateOfBirth?: string; + isDependent?: boolean; + } = inject(MAT_DIALOG_DATA); +}