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>
|
||||
|
||||
+279
-30
@@ -6,43 +6,292 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
.preview-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ── Profile Card ── */
|
||||
.profile-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: var(--md-sys-color-primary, #1074b9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.avatar-icon {
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.profile-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.meta-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: #555;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
|
||||
span {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
mat-divider {
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
.margin-t {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.family-member {
|
||||
h3 {
|
||||
margin: 1% auto;
|
||||
.chip-icon {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 30px;
|
||||
margin-left: 2%;
|
||||
&.status-active {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
border-color: #a5d6a7;
|
||||
}
|
||||
|
||||
&.status-inactive {
|
||||
background: #fff3e0;
|
||||
color: #e65100;
|
||||
border-color: #ffcc80;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
h3 {
|
||||
margin: 1% auto;
|
||||
}
|
||||
/* ── Info Cards ── */
|
||||
.info-card {
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 30px;
|
||||
margin-left: 2%;
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
|
||||
.card-icon {
|
||||
color: var(--md-sys-color-primary, #1074b9);
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 16px 20px;
|
||||
|
||||
&.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.count-badge {
|
||||
margin-left: auto;
|
||||
background: var(--md-sys-color-primary, #1074b9);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ── Info Table (Key-Value pairs) ── */
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 40%;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-weight: 500;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Data Table (Family, etc.) ── */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead {
|
||||
background: #fafafa;
|
||||
|
||||
th {
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Badges ── */
|
||||
.badge-yes {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.badge-no {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
background: #f5f5f5;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* ── KYC ── */
|
||||
.kyc-badge {
|
||||
margin-left: auto;
|
||||
background: #1976d2;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ── Submit Section ── */
|
||||
.submit-section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 20px 0 4px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
min-width: 160px;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 768px) {
|
||||
.profile-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.profile-meta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
.info-label {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
.data-table {
|
||||
thead th,
|
||||
tbody td {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,6 @@ import {
|
||||
MatExpansionPanelTitle,
|
||||
MatExpansionPanelDescription
|
||||
} from '@angular/material/expansion';
|
||||
import { MatStepperPrevious } from '@angular/material/stepper';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { FindPipe } from '../../../pipes/find.pipe';
|
||||
import { DateFormatPipe } from '../../../pipes/date-format.pipe';
|
||||
@@ -41,7 +40,6 @@ import { LegalFormId } from 'app/clients/models/legal-form.enum';
|
||||
MatExpansionPanelHeader,
|
||||
MatExpansionPanelTitle,
|
||||
MatExpansionPanelDescription,
|
||||
MatStepperPrevious,
|
||||
FaIconComponent,
|
||||
FindPipe,
|
||||
DateFormatPipe,
|
||||
@@ -55,6 +53,8 @@ export class ClientPreviewStepComponent {
|
||||
@Input() clientTemplate: any;
|
||||
/** Client Object */
|
||||
@Input() client: any;
|
||||
/** KYC Data */
|
||||
@Input() kycData: any;
|
||||
|
||||
/** Form submission event */
|
||||
@Output() submitEvent = new EventEmitter();
|
||||
|
||||
Reference in New Issue
Block a user