+
+
+
+
- }
-
- @if (client.dateOfBirth) {
-
- {{
- client.legalFormId === LegalFormId.PERSON ? 'Date of Birth' : 'Incorporation Date'
- }}
- {{ client.dateOfBirth | dateFormat }}
-
- }
-
- @if (client.externalId) {
-
- {{ 'labels.inputs.External Id' | translate }}
-
-
-
-
- }
-
- @if (client.mobileNo) {
-
- {{ 'labels.inputs.Mobile No' | translate }}
- {{ client.mobileNo }}
-
- }
-
- @if (client.emailAddress) {
-
- {{ 'labels.inputs.Email Address' | translate }}
- {{ client.emailAddress }}
-
- }
-
- @if (client.clientTypeId) {
-
- {{ 'labels.inputs.Client Type' | translate }}
- {{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}
-
- }
-
- @if (client.clientClassificationId) {
-
- {{ 'labels.inputs.Client Classification' | translate }}
- {{
- client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
- }}
-
- }
-
- @if (client.savingsProductId) {
-
- {{ 'labels.inputs.Savings Product' | translate }}
- {{
- client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name'
- }}
-
- }
-
- @if (client.submittedOnDate) {
-
- {{ 'labels.inputs.Submitted On Date' | translate }}
- {{ client.submittedOnDate | dateFormat }}
-
- }
-
-
- {{ 'labels.inputs.Active' | translate }}?
- {{ client.active | yesNo }}
-
-
- @if (client.activationDate) {
-
- {{ 'labels.inputs.Activation Date' | translate }}
- {{ client.activationDate | dateFormat }}
-
- }
-
- @if (client.legalFormId === LegalFormId.PERSON) {
- @if (client.genderId) {
-
- {{ 'labels.inputs.Gender' | translate }}
- {{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}
-
- }
-
- {{ 'labels.inputs.Is staff' | translate }}?
- {{ client.isStaff | yesNo }}
-
- }
-
- @if (client.legalFormId === LegalFormId.ENTITY) {
- @if (client.clientNonPersonDetails.incorpValidityTillDate) {
-
- {{ 'labels.inputs.Incorporation Validity Till Date' | translate }}
- {{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}
-
- }
-
- {{ 'labels.inputs.Incorportation Number' | translate }}
- {{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}
-
- @if (client.clientNonPersonDetails.mainBusinessLineId) {
-
- {{ 'labels.inputs.Main Business Line' | translate }}
- {{
- client.clientNonPersonDetails.mainBusinessLineId
- | find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
- }}
-
- }
- @if (client.clientNonPersonDetails.constitutionId) {
-
- {{ 'labels.inputs.Constitution' | translate }}
- {{
- client.clientNonPersonDetails.constitutionId
- | find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
- }}
-
- }
-
- {{ 'labels.inputs.Remarks' | translate }}
- {{ client.clientNonPersonDetails.remarks || 'N/A' }}
-
- }
-
- @if (client.familyMembers.length) {
-
-
{{ 'labels.heading.Family Members' | translate }}
-
-
- @for (member of client.familyMembers; track member) {
-
-
-
- {{ member.firstName }}
- {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
-
-
- {{ member.relationship }}
-
-
-
-
- {{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}
- {{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}
- {{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}
- {{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}
- {{ 'labels.inputs.Relationship' | translate }} :
- {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
- }}
- {{ 'labels.inputs.Age' | translate }} : {{ member.age }}
- {{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}
- {{ 'labels.inputs.Marital Status' | translate }} :
- {{
- member.maritalStatusId
- | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
- }}
- {{ 'labels.inputs.Gender' | translate }} :
- {{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}
- {{ 'labels.inputs.Profession' | translate }} :
- {{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name'
- }}
- {{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}
-
-
+
+
+ @if (client?.legalFormId === LegalFormId.ENTITY) {
+ {{ client.fullname }}
}
-
-
- }
-
- @if (clientTemplate.isAddressEnabled && client.address && client.address.length) {
-
-
{{ 'labels.heading.Address' | translate }}
-
-
- @for (address of client.address; track address) {
-
-
-
- {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
-
-
- {{ address.relationship }}
-
-
-
-
- @if (isFieldEnabled('street')) {
- {{ 'labels.inputs.Street' | translate }} : {{ address.street }}
- }
- @if (isFieldEnabled('addressLine1')) {
- {{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}
- }
- @if (isFieldEnabled('addressLine2')) {
- {{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}
- }
- @if (isFieldEnabled('addressLine3')) {
- {{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}
- }
- @if (isFieldEnabled('townVillage')) {
- {{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}
- }
- @if (isFieldEnabled('city')) {
- {{ 'labels.inputs.City' | translate }} : {{ address.city }}
- }
- @if (isFieldEnabled('stateProvinceId')) {
- {{ 'labels.inputs.State / Province' | translate }} :
- {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}
- }
- @if (isFieldEnabled('countryId')) {
- {{ 'labels.inputs.Country' | translate }} :
- {{ getSelectedValue('countryIdOptions', address.countryId)?.name }}
- }
- @if (isFieldEnabled('postalCode')) {
- {{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}
- }
- @if (isFieldEnabled('isActive')) {
- {{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}
- }
-
-
+ @if (client?.legalFormId === LegalFormId.PERSON) {
+ {{ client.firstname }} {{ client.middlename ? client.middlename + ' ' : '' }}{{ client.lastname }}
}
-
+
+
+ @if (client?.officeId) {
+
+
+ {{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }}
+
+ }
+ @if (client?.legalFormId) {
+
+ {{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }}
+
+ }
+ @if (client?.active) {
+ Active
+ } @else {
+ Inactive
+ }
+
+
+
+
+
+
+
+
+
+ @if (client?.dateOfBirth) {
+
+ | {{ client.legalFormId === LegalFormId.PERSON ? 'Date of Birth' : 'Incorporation Date' }} |
+ {{ client.dateOfBirth | dateFormat }} |
+
+ }
+ @if (client?.externalId) {
+
+ | {{ 'labels.inputs.External Id' | translate }} |
+
+
+ |
+
+ }
+ @if (client?.staffId) {
+
+ | {{ 'labels.inputs.Staff' | translate }} |
+ {{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }} |
+
+ }
+ @if (client?.legalFormId === LegalFormId.PERSON && client?.genderId) {
+
+ | {{ 'labels.inputs.Gender' | translate }} |
+ {{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }} |
+
+ }
+ @if (client?.mobileNo) {
+
+ | {{ 'labels.inputs.Mobile No' | translate }} |
+ {{ client.mobileNo }} |
+
+ }
+ @if (client?.emailAddress) {
+
+ | {{ 'labels.inputs.Email Address' | translate }} |
+ {{ client.emailAddress }} |
+
+ }
+ @if (client?.clientTypeId) {
+
+ | {{ 'labels.inputs.Client Type' | translate }} |
+ {{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }} |
+
+ }
+ @if (client?.clientClassificationId) {
+
+ | {{ 'labels.inputs.Client Classification' | translate }} |
+ {{ client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name' }} |
+
+ }
+ @if (client?.occupationCategoryId) {
+
+ | {{ 'labels.inputs.Occupation Category' | translate }} |
+ {{ client.occupationCategoryId | find: clientTemplate.occupationCategoryOptions : 'id' : 'name' }} |
+
+ }
+ @if (client?.occupationId) {
+
+ | {{ 'labels.inputs.Occupation' | translate }} |
+ {{ client.occupationId | find: clientTemplate.occupationOptions : 'id' : 'name' }} |
+
+ }
+ @if (client?.submittedOnDate) {
+
+ | {{ 'labels.inputs.Submitted On Date' | translate }} |
+ {{ client.submittedOnDate | dateFormat }} |
+
+ }
+
+ | {{ 'labels.inputs.Active' | translate }}? |
+
+ {{ client?.active | yesNo }}
+ |
+
+ @if (client?.activationDate) {
+
+ | {{ 'labels.inputs.Activation Date' | translate }} |
+ {{ client.activationDate | dateFormat }} |
+
+ }
+ @if (client?.savingsProductId) {
+
+ | {{ 'labels.inputs.Savings Product' | translate }} |
+ {{ client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name' }} |
+
+ }
+ @if (client?.legalFormId === LegalFormId.PERSON) {
+
+ | {{ 'labels.inputs.Is staff' | translate }}? |
+ {{ client.isStaff | yesNo }} |
+
+ }
+ @if (client?.legalFormId === LegalFormId.ENTITY && client?.clientNonPersonDetails) {
+ @if (client.clientNonPersonDetails.constitutionId) {
+
+ | {{ 'labels.inputs.Constitution' | translate }} |
+ {{ client.clientNonPersonDetails.constitutionId | find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name' }} |
+
+ }
+
+ | {{ 'labels.inputs.Incorporation Number' | translate }} |
+ {{ client.clientNonPersonDetails.incorpNumber || 'N/A' }} |
+
+ }
+
+
+
+
+
+
+ @if (kycData?.panNumber || kycData?.aadhaarNumberMasked || kycData?.gstinNumber) {
+
+
+
+
+
+ @if (kycData.panNumber) {
+
+ | {{ 'labels.inputs.PAN Number' | translate }} |
+ {{ kycData.panNumber }} |
+
+ }
+ @if (kycData.aadhaarNumberMasked) {
+
+ | {{ 'labels.inputs.Aadhaar Number' | translate }} |
+ {{ kycData.aadhaarNumberMasked }} |
+
+ }
+ @if (kycData.gstinNumber) {
+
+ | {{ 'labels.inputs.GSTIN Number' | translate }} |
+ {{ kycData.gstinNumber }} |
+
+ }
+ @if (kycData.remarks) {
+
+ | {{ 'labels.inputs.Remarks' | translate }} |
+ {{ kycData.remarks }} |
+
+ }
+
+
+
}
-
-
-
-
-
+
+ @if (client?.familyMembers?.length) {
+
+
+
+
+
+
+ | {{ 'labels.inputs.name' | translate }} |
+ {{ 'labels.inputs.Relationship' | translate }} |
+ {{ 'labels.inputs.Date Of Birth' | translate }} |
+ {{ 'labels.inputs.Is Dependent' | translate }} |
+
+
+
+ @for (member of client.familyMembers; track member) {
+
+ | {{ member.firstName }} {{ member.lastName }} |
+ {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name' }} |
+ {{ member.dateOfBirth | dateFormat }} |
+
+ {{ member.isDependent ? 'Yes' : 'No' }}
+ |
+
+ }
+
+
+
+
+ }
+
+
+
+
+
+
diff --git a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.scss b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.scss
index 0c25f5685..701219434 100644
--- a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.scss
+++ b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.scss
@@ -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;
+ }
}
}
diff --git a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.ts b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.ts
index 2340e91e2..923ed73df 100644
--- a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.ts
+++ b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.ts
@@ -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();
diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html
index e4702a913..f7c4d192c 100644
--- a/src/app/clients/clients-view/clients-view.component.html
+++ b/src/app/clients/clients-view/clients-view.component.html
@@ -51,150 +51,116 @@