feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API
- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview - Hide Financial & Classification section for non-individual entities in personal data and preview - Fix legal form column in clients list — fetch legalForm from client API for correct display - Add person/business icon before client name in list rows - Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API - Add registration number format hint (mat-hint) based on constitution type - Add spacing between verification row and constitution type dropdowns - Reduce table cell padding and prevent action buttons from being clipped - Add missing MPL-2.0 license headers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ab01111424
commit
b890d24bb7
@@ -7,118 +7,83 @@
|
||||
-->
|
||||
|
||||
<div class="nom-container mat-typography">
|
||||
<!-- Header -->
|
||||
|
||||
<!-- ═══ FAMILY MEMBERS SECTION ═══ -->
|
||||
<div class="nom-header">
|
||||
<div class="nom-header__left">
|
||||
<i class="fa fa-users nom-header__icon"></i>
|
||||
<h3 class="nom-header__title">{{ 'labels.heading.Family Members' | translate }}</h3>
|
||||
<span class="nom-header__badge">{{ clientFamilyMembers?.length || 0 }}</span>
|
||||
<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>
|
||||
<button mat-flat-button color="primary" class="nom-header__btn" (click)="addNominee()">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
|
||||
<button mat-flat-button color="primary" class="nom-header__btn" (click)="addFamilyMember()">
|
||||
<mat-icon>add</mat-icon> Add Member
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
@if (!clientFamilyMembers || clientFamilyMembers.length === 0) {
|
||||
@if (familyMembers.length === 0) {
|
||||
<div class="nom-empty">
|
||||
<i class="fa fa-user-o nom-empty__icon"></i>
|
||||
<p class="nom-empty__text">{{ 'labels.text.No nominees added yet' | translate }}</p>
|
||||
<mat-icon class="nom-empty__mat-icon">people_outline</mat-icon>
|
||||
<p class="nom-empty__text">No family members added yet.</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Nominee Cards -->
|
||||
<mat-accordion multi>
|
||||
@for (member of clientFamilyMembers; track member.id; let i = $index) {
|
||||
@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">
|
||||
<i class="fa fa-user nom-panel__type-icon"></i>
|
||||
<mat-icon class="nom-panel__mat-icon">person</mat-icon>
|
||||
<span class="nom-panel__name">{{ displayName(member) }}</span>
|
||||
@if (member.relationship) {
|
||||
<span class="nom-panel__badge nom-panel__badge--relation">{{ member.relationship }}</span>
|
||||
}
|
||||
@if (member.nominationType) {
|
||||
<span class="nom-panel__badge nom-panel__badge--type">{{ member.nominationType }}</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.percentageShare != null) {
|
||||
{{ member.percentageShare }}%
|
||||
@if (member.dateOfBirth) {
|
||||
{{ member.dateOfBirth | dateFormat }}
|
||||
}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<!-- Actions Bar -->
|
||||
<div class="nom-actions">
|
||||
<div class="nom-actions__buttons">
|
||||
<button mat-stroked-button color="primary" class="nom-actions__edit" (click)="editNominee(member, i)">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
|
||||
<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)="deleteFamilyMember(member.clientId, member.id, member.firstName, i)"
|
||||
>
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
|
||||
<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>
|
||||
|
||||
<!-- Details Grid -->
|
||||
<div class="nom-grid">
|
||||
@if (member.nominationType) {
|
||||
<div class="nom-field">
|
||||
<div class="nom-field__label">{{ 'labels.inputs.Nomination Type' | translate }}</div>
|
||||
<div class="nom-field__value">{{ member.nominationType }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (member.firstName) {
|
||||
<div class="nom-field">
|
||||
<div class="nom-field__label">{{ 'labels.inputs.Nominee Name' | translate }}</div>
|
||||
<div class="nom-field__label">Name</div>
|
||||
<div class="nom-field__value">{{ member.firstName }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (member.relationship) {
|
||||
@if (getRelationship(member)) {
|
||||
<div class="nom-field">
|
||||
<div class="nom-field__label">{{ 'labels.inputs.Relationship' | translate }}</div>
|
||||
<div class="nom-field__value">{{ member.relationship }}</div>
|
||||
<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">{{ 'labels.inputs.Date Of Birth' | translate }}</div>
|
||||
<div class="nom-field__label">Date of Birth</div>
|
||||
<div class="nom-field__value">{{ member.dateOfBirth | dateFormat }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (member.percentageShare != null) {
|
||||
<div class="nom-field">
|
||||
<div class="nom-field__label">{{ 'labels.inputs.Percentage Share' | translate }}</div>
|
||||
<div class="nom-field__value nom-field__value--mono">{{ member.percentageShare }}%</div>
|
||||
</div>
|
||||
}
|
||||
@if (member.isDependent != null) {
|
||||
<div class="nom-field">
|
||||
<div class="nom-field__label">{{ 'labels.inputs.Nominee is Minor' | translate }}</div>
|
||||
<div class="nom-field__label">Dependent</div>
|
||||
<div class="nom-field__value">{{ member.isDependent | yesNo }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (member.guardianName) {
|
||||
<div class="nom-field">
|
||||
<div class="nom-field__label">{{ 'labels.inputs.Guardian Name' | translate }}</div>
|
||||
<div class="nom-field__value">{{ member.guardianName }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (member.guardianRelationship) {
|
||||
<div class="nom-field">
|
||||
<div class="nom-field__label">{{ 'labels.inputs.Relationship with Minor' | translate }}</div>
|
||||
<div class="nom-field__value">{{ member.guardianRelationship }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (member.remarks) {
|
||||
<div class="nom-field">
|
||||
<div class="nom-field__label">{{ 'labels.inputs.Remarks' | translate }}</div>
|
||||
<div class="nom-field__label">Remarks</div>
|
||||
<div class="nom-field__value">{{ member.remarks }}</div>
|
||||
</div>
|
||||
}
|
||||
@@ -126,4 +91,5 @@
|
||||
</mat-expansion-panel>
|
||||
}
|
||||
</mat-accordion>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user