Files
cbsnexora/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
T
AdityaandClaude Opus 4.7 b149fef72e feat: KYC re-verify UX, family/nominee tab gating, savings dialogs, cfcfrms shell
- KYC tab: fix Verify (PAN) and Send OTP (Aadhaar) being disabled in edit mode;
  unmask Aadhaar input and show on-file masked value as hint; resolve kycId
  from id/kycId/resourceId fallbacks.
- Client stepper/view: add familyAllowed / nomineeAllowed predicates +
  CanActivate route guards. Family tab hidden for non-individuals, Nominee
  tab hidden for non-proprietor entities. Family-members step accepts a
  nomineeOnly input for proprietorship clients. Add/Edit/Delete buttons
  inside family-members and nominee tabs gated by canAdd.
- cfcfrms: add cfcfrms-shell wrapper, restyle complaint/fraud/mule/escalate
  pages and dashboard.
- Savings: identity-verify and transaction-confirm dialogs, manage / activate
  / add-charge flows, account preview styling.
- Tasks, core shell, account-nominees, icons: minor style and behaviour
  updates.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 18:49:43 +05:30

108 lines
3.8 KiB
HTML

<!--
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="nom-container mat-typography">
<!-- ═══ FAMILY MEMBERS SECTION ═══ -->
<div class="nom-header">
<div class="nom-header__left">
<mat-icon class="nom-header__mat-icon">people</mat-icon>
<h3 class="nom-header__title">Family Members</h3>
<span class="nom-header__badge">{{ familyMembers.length }}</span>
</div>
@if (canAdd) {
<button mat-flat-button color="primary" class="nom-header__btn" (click)="addFamilyMember()">
<mat-icon>add</mat-icon> Add Member
</button>
}
</div>
@if (familyMembers.length === 0) {
<div class="nom-empty">
<mat-icon class="nom-empty__mat-icon">people_outline</mat-icon>
<p class="nom-empty__text">No family members added yet.</p>
</div>
}
<mat-accordion multi>
@for (member of familyMembers; track member.id; let i = $index) {
<mat-expansion-panel class="nom-panel">
<mat-expansion-panel-header class="nom-panel__header">
<mat-panel-title class="nom-panel__title">
<mat-icon class="nom-panel__mat-icon">person</mat-icon>
<span class="nom-panel__name">{{ displayName(member) }}</span>
@if (getRelationship(member)) {
<span class="nom-panel__badge nom-panel__badge--relation">{{ getRelationship(member) }}</span>
}
</mat-panel-title>
<mat-panel-description class="nom-panel__desc">
@if (member.dateOfBirth) {
{{ member.dateOfBirth | dateFormat }}
}
</mat-panel-description>
</mat-expansion-panel-header>
@if (canAdd) {
<div class="nom-actions">
<div class="nom-actions__buttons">
<button
mat-stroked-button
color="primary"
class="nom-actions__edit"
(click)="editFamilyMember(member, i)"
>
<fa-icon icon="edit" class="m-r-10"></fa-icon> Edit
</button>
<button
mat-stroked-button
color="warn"
class="nom-actions__delete"
(click)="deleteMember(member, 'Family Member')"
>
<fa-icon icon="trash" class="m-r-10"></fa-icon> Delete
</button>
</div>
</div>
}
<div class="nom-grid">
@if (member.firstName) {
<div class="nom-field">
<div class="nom-field__label">Name</div>
<div class="nom-field__value">{{ member.firstName }}</div>
</div>
}
@if (getRelationship(member)) {
<div class="nom-field">
<div class="nom-field__label">Relationship</div>
<div class="nom-field__value">{{ getRelationship(member) }}</div>
</div>
}
@if (member.dateOfBirth) {
<div class="nom-field">
<div class="nom-field__label">Date of Birth</div>
<div class="nom-field__value">{{ member.dateOfBirth | dateFormat }}</div>
</div>
}
@if (member.isDependent !== null) {
<div class="nom-field">
<div class="nom-field__label">Dependent</div>
<div class="nom-field__value">{{ member.isDependent | yesNo }}</div>
</div>
}
@if (member.remarks) {
<div class="nom-field">
<div class="nom-field__label">Remarks</div>
<div class="nom-field__value">{{ member.remarks }}</div>
</div>
}
</div>
</mat-expansion-panel>
}
</mat-accordion>
</div>