feat: complete UI redesign — client creation tabs, footer, home page, CIF & occupation fields
- Client creation: replaced vertical stepper with 3-tab layout (General, KYC & Nominee, Preview) - All form fields redesigned with appearance="outline" and section grouping - Preview tab with profile card, info tables, KYC details, family members - Footer redesigned: security bar, LincShield certifications, regulatory & legal, quick navigation, support & contact, LincPay branding - Home page redesigned: welcome banner, quick action cards, info row - Client view header redesigned: ID chips row (Account No, CIF Number, External Id), 4-column details grid - Added CIF Number column to clients list table - Added CIF Number display to client view sidebar and personal data tab - Added occupationCategoryId and occupationId dropdowns to client creation form - Added occupation fields to client view sidebar, personal data tab, and preview - Added 51+ missing translation keys to en-US.json - Toolbar: added Last login chip - Registered faUserPlus icon 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
b3a4cce0cf
commit
7b1f2e8ad7
+234
-270
@@ -6,280 +6,244 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container p-b-20">
|
||||
<h3>{{ 'labels.heading.General' | translate }}</h3>
|
||||
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.name' | translate }}</span>
|
||||
@if (client.legalFormId === LegalFormId.ENTITY) {
|
||||
<span class="flex-60">{{ client.fullname }}</span>
|
||||
}
|
||||
@if (client.legalFormId === LegalFormId.PERSON) {
|
||||
<span class="flex-60"
|
||||
>{{ client.firstname }}
|
||||
{{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span
|
||||
>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Office' | translate }}</span>
|
||||
<span class="flex-60">{{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Legal Form' | translate }}</span>
|
||||
<span class="flex-60">{{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }}</span>
|
||||
</div>
|
||||
|
||||
@if (client.staffId) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Staff' | translate }}</span>
|
||||
<span class="flex-60">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
|
||||
<div class="preview-container">
|
||||
<!-- Client Profile Card -->
|
||||
<div class="profile-card">
|
||||
<div class="profile-avatar">
|
||||
<fa-icon [icon]="client?.legalFormId === LegalFormId.PERSON ? 'user' : 'building'" class="avatar-icon"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.dateOfBirth) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{
|
||||
client.legalFormId === LegalFormId.PERSON ? 'Date of Birth' : 'Incorporation Date'
|
||||
}}</span>
|
||||
<span class="flex-60">{{ client.dateOfBirth | dateFormat }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.externalId) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
|
||||
<span class="flex-60">
|
||||
<mifosx-external-identifier externalId="{{ client.externalId }}"></mifosx-external-identifier>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.mobileNo) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Mobile No' | translate }}</span>
|
||||
<span class="flex-60">{{ client.mobileNo }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.emailAddress) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Email Address' | translate }}</span>
|
||||
<span class="flex-60">{{ client.emailAddress }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.clientTypeId) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Client Type' | translate }}</span>
|
||||
<span class="flex-60">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.clientClassificationId) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Client Classification' | translate }}</span>
|
||||
<span class="flex-60">{{
|
||||
client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
|
||||
}}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.savingsProductId) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Savings Product' | translate }}</span>
|
||||
<span class="flex-60">{{
|
||||
client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name'
|
||||
}}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.submittedOnDate) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Submitted On Date' | translate }}</span>
|
||||
<span class="flex-60">{{ client.submittedOnDate | dateFormat }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Active' | translate }}?</span>
|
||||
<span class="flex-60">{{ client.active | yesNo }}</span>
|
||||
</div>
|
||||
|
||||
@if (client.activationDate) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Activation Date' | translate }}</span>
|
||||
<span class="flex-60">{{ client.activationDate | dateFormat }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.legalFormId === LegalFormId.PERSON) {
|
||||
@if (client.genderId) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Gender' | translate }}</span>
|
||||
<span class="flex-60">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
|
||||
</div>
|
||||
}
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Is staff' | translate }}?</span>
|
||||
<span class="flex-60">{{ client.isStaff | yesNo }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.legalFormId === LegalFormId.ENTITY) {
|
||||
@if (client.clientNonPersonDetails.incorpValidityTillDate) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
|
||||
<span class="flex-60">{{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
|
||||
</div>
|
||||
}
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Incorportation Number' | translate }}</span>
|
||||
<span class="flex-60">{{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}</span>
|
||||
</div>
|
||||
@if (client.clientNonPersonDetails.mainBusinessLineId) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Main Business Line' | translate }}</span>
|
||||
<span class="flex-60">{{
|
||||
client.clientNonPersonDetails.mainBusinessLineId
|
||||
| find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
|
||||
}}</span>
|
||||
</div>
|
||||
}
|
||||
@if (client.clientNonPersonDetails.constitutionId) {
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Constitution' | translate }}</span>
|
||||
<span class="flex-60">{{
|
||||
client.clientNonPersonDetails.constitutionId
|
||||
| find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
|
||||
}}</span>
|
||||
</div>
|
||||
}
|
||||
<div class="flex-fill">
|
||||
<span class="flex-40">{{ 'labels.inputs.Remarks' | translate }}</span>
|
||||
<span class="flex-60">{{ client.clientNonPersonDetails.remarks || 'N/A' }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (client.familyMembers.length) {
|
||||
<div class="layout-row-wrap responsive-column flex-fill m-b-20">
|
||||
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Family Members' | translate }}</h3>
|
||||
<mat-divider class="flex-fill"></mat-divider>
|
||||
<mat-accordion class="flex-fill m-t-5">
|
||||
@for (member of client.familyMembers; track member) {
|
||||
<mat-expansion-panel class="family-member">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ member.firstName }}
|
||||
{{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{ member.relationship }}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-divider></mat-divider>
|
||||
<p>
|
||||
{{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
|
||||
{{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
|
||||
{{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
|
||||
{{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
|
||||
{{ 'labels.inputs.Relationship' | translate }} :
|
||||
{{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
|
||||
}}<br />
|
||||
{{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
|
||||
{{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
|
||||
{{ 'labels.inputs.Marital Status' | translate }} :
|
||||
{{
|
||||
member.maritalStatusId
|
||||
| find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
|
||||
}}<br />
|
||||
{{ 'labels.inputs.Gender' | translate }} :
|
||||
{{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
|
||||
{{ 'labels.inputs.Profession' | translate }} :
|
||||
{{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name'
|
||||
}}<br />
|
||||
{{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
|
||||
</p>
|
||||
</mat-expansion-panel>
|
||||
<div class="profile-info">
|
||||
<h3 class="profile-name">
|
||||
@if (client?.legalFormId === LegalFormId.ENTITY) {
|
||||
{{ client.fullname }}
|
||||
}
|
||||
</mat-accordion>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (clientTemplate.isAddressEnabled && client.address && client.address.length) {
|
||||
<div class="flex-fill layout-row-wrap responsive-column">
|
||||
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Address' | translate }}</h3>
|
||||
<mat-divider class="flex-fill"></mat-divider>
|
||||
<mat-accordion class="flex-fill m-t-5">
|
||||
@for (address of client.address; track address) {
|
||||
<mat-expansion-panel class="address">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{ address.relationship }}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-divider></mat-divider>
|
||||
<p>
|
||||
@if (isFieldEnabled('street')) {
|
||||
<span>{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br /></span>
|
||||
}
|
||||
@if (isFieldEnabled('addressLine1')) {
|
||||
<span>{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br /></span>
|
||||
}
|
||||
@if (isFieldEnabled('addressLine2')) {
|
||||
<span>{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br /></span>
|
||||
}
|
||||
@if (isFieldEnabled('addressLine3')) {
|
||||
<span>{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br /></span>
|
||||
}
|
||||
@if (isFieldEnabled('townVillage')) {
|
||||
<span>{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br /></span>
|
||||
}
|
||||
@if (isFieldEnabled('city')) {
|
||||
<span>{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
|
||||
}
|
||||
@if (isFieldEnabled('stateProvinceId')) {
|
||||
<span
|
||||
>{{ 'labels.inputs.State / Province' | translate }} :
|
||||
{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
|
||||
/></span>
|
||||
}
|
||||
@if (isFieldEnabled('countryId')) {
|
||||
<span
|
||||
>{{ 'labels.inputs.Country' | translate }} :
|
||||
{{ getSelectedValue('countryIdOptions', address.countryId)?.name }}<br
|
||||
/></span>
|
||||
}
|
||||
@if (isFieldEnabled('postalCode')) {
|
||||
<span>{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br /></span>
|
||||
}
|
||||
@if (isFieldEnabled('isActive')) {
|
||||
<span>{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br /></span>
|
||||
}
|
||||
</p>
|
||||
</mat-expansion-panel>
|
||||
@if (client?.legalFormId === LegalFormId.PERSON) {
|
||||
{{ client.firstname }} {{ client.middlename ? client.middlename + ' ' : '' }}{{ client.lastname }}
|
||||
}
|
||||
</mat-accordion>
|
||||
</h3>
|
||||
<div class="profile-meta">
|
||||
@if (client?.officeId) {
|
||||
<span class="meta-chip">
|
||||
<fa-icon icon="briefcase" class="chip-icon"></fa-icon>
|
||||
{{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }}
|
||||
</span>
|
||||
}
|
||||
@if (client?.legalFormId) {
|
||||
<span class="meta-chip">
|
||||
{{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }}
|
||||
</span>
|
||||
}
|
||||
@if (client?.active) {
|
||||
<span class="meta-chip status-active">Active</span>
|
||||
} @else {
|
||||
<span class="meta-chip status-inactive">Inactive</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- General Information Card -->
|
||||
<div class="info-card">
|
||||
<div class="card-header">
|
||||
<fa-icon icon="user" class="card-icon"></fa-icon>
|
||||
<span>{{ 'labels.heading.General' | translate }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="info-table">
|
||||
<tbody>
|
||||
@if (client?.dateOfBirth) {
|
||||
<tr>
|
||||
<td class="info-label">{{ client.legalFormId === LegalFormId.PERSON ? 'Date of Birth' : 'Incorporation Date' }}</td>
|
||||
<td class="info-value">{{ client.dateOfBirth | dateFormat }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.externalId) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.External Id' | translate }}</td>
|
||||
<td class="info-value">
|
||||
<mifosx-external-identifier externalId="{{ client.externalId }}"></mifosx-external-identifier>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.staffId) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Staff' | translate }}</td>
|
||||
<td class="info-value">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.legalFormId === LegalFormId.PERSON && client?.genderId) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Gender' | translate }}</td>
|
||||
<td class="info-value">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.mobileNo) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Mobile No' | translate }}</td>
|
||||
<td class="info-value">{{ client.mobileNo }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.emailAddress) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Email Address' | translate }}</td>
|
||||
<td class="info-value">{{ client.emailAddress }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.clientTypeId) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Client Type' | translate }}</td>
|
||||
<td class="info-value">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.clientClassificationId) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Client Classification' | translate }}</td>
|
||||
<td class="info-value">{{ client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name' }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.occupationCategoryId) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Occupation Category' | translate }}</td>
|
||||
<td class="info-value">{{ client.occupationCategoryId | find: clientTemplate.occupationCategoryOptions : 'id' : 'name' }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.occupationId) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Occupation' | translate }}</td>
|
||||
<td class="info-value">{{ client.occupationId | find: clientTemplate.occupationOptions : 'id' : 'name' }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.submittedOnDate) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Submitted On Date' | translate }}</td>
|
||||
<td class="info-value">{{ client.submittedOnDate | dateFormat }}</td>
|
||||
</tr>
|
||||
}
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Active' | translate }}?</td>
|
||||
<td class="info-value">
|
||||
<span [class]="client?.active ? 'badge-yes' : 'badge-no'">{{ client?.active | yesNo }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
@if (client?.activationDate) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Activation Date' | translate }}</td>
|
||||
<td class="info-value">{{ client.activationDate | dateFormat }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.savingsProductId) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Savings Product' | translate }}</td>
|
||||
<td class="info-value">{{ client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name' }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.legalFormId === LegalFormId.PERSON) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Is staff' | translate }}?</td>
|
||||
<td class="info-value">{{ client.isStaff | yesNo }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (client?.legalFormId === LegalFormId.ENTITY && client?.clientNonPersonDetails) {
|
||||
@if (client.clientNonPersonDetails.constitutionId) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Constitution' | translate }}</td>
|
||||
<td class="info-value">{{ client.clientNonPersonDetails.constitutionId | find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name' }}</td>
|
||||
</tr>
|
||||
}
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Incorporation Number' | translate }}</td>
|
||||
<td class="info-value">{{ client.clientNonPersonDetails.incorpNumber || 'N/A' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KYC Details Card -->
|
||||
@if (kycData?.panNumber || kycData?.aadhaarNumberMasked || kycData?.gstinNumber) {
|
||||
<div class="info-card">
|
||||
<div class="card-header">
|
||||
<fa-icon icon="fingerprint" class="card-icon"></fa-icon>
|
||||
<span>{{ 'labels.inputs.KYC' | translate }}</span>
|
||||
<span class="kyc-badge">KYC</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="info-table">
|
||||
<tbody>
|
||||
@if (kycData.panNumber) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.PAN Number' | translate }}</td>
|
||||
<td class="info-value mono">{{ kycData.panNumber }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (kycData.aadhaarNumberMasked) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Aadhaar Number' | translate }}</td>
|
||||
<td class="info-value mono">{{ kycData.aadhaarNumberMasked }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (kycData.gstinNumber) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.GSTIN Number' | translate }}</td>
|
||||
<td class="info-value mono">{{ kycData.gstinNumber }}</td>
|
||||
</tr>
|
||||
}
|
||||
@if (kycData.remarks) {
|
||||
<tr>
|
||||
<td class="info-label">{{ 'labels.inputs.Remarks' | translate }}</td>
|
||||
<td class="info-value">{{ kycData.remarks }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="layout-row responsive-column align-center gap-2px margin-t">
|
||||
<button mat-raised-button matStepperPrevious>
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Previous' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button [routerLink]="['../']">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="submitEvent.emit()">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
<!-- Family Members / Nominee Card -->
|
||||
@if (client?.familyMembers?.length) {
|
||||
<div class="info-card">
|
||||
<div class="card-header">
|
||||
<fa-icon icon="users" class="card-icon"></fa-icon>
|
||||
<span>{{ 'labels.heading.Family Members' | translate }} / {{ 'labels.inputs.Nominee' | translate }}</span>
|
||||
<span class="count-badge">{{ client.familyMembers.length }}</span>
|
||||
</div>
|
||||
<div class="card-body no-padding">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ 'labels.inputs.name' | translate }}</th>
|
||||
<th>{{ 'labels.inputs.Relationship' | translate }}</th>
|
||||
<th>{{ 'labels.inputs.Date Of Birth' | translate }}</th>
|
||||
<th>{{ 'labels.inputs.Is Dependent' | translate }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (member of client.familyMembers; track member) {
|
||||
<tr>
|
||||
<td>{{ member.firstName }} {{ member.lastName }}</td>
|
||||
<td>{{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name' }}</td>
|
||||
<td>{{ member.dateOfBirth | dateFormat }}</td>
|
||||
<td>
|
||||
<span [class]="member.isDependent ? 'badge-yes' : 'badge-no'">{{ member.isDependent ? 'Yes' : 'No' }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Submit Section -->
|
||||
<div class="submit-section">
|
||||
<button mat-raised-button [routerLink]="['../']" class="cancel-btn">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" class="submit-btn" (click)="submitEvent.emit()">
|
||||
<fa-icon icon="check" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user