From 7b1f2e8ad75c28a767e5256210d8eaf889292226 Mon Sep 17 00:00:00 2001 From: Aditya Date: Fri, 20 Mar 2026 19:19:47 +0530 Subject: [PATCH] =?UTF-8?q?feat:=20complete=20UI=20redesign=20=E2=80=94=20?= =?UTF-8?q?client=20creation=20tabs,=20footer,=20home=20page,=20CIF=20&=20?= =?UTF-8?q?occupation=20fields?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- angular.json | 2 +- .../client-address-step.component.html | 186 ++- .../client-address-step.component.scss | 107 +- .../client-address-step.component.ts | 6 +- .../client-datatable-step.component.html | 11 - .../client-datatable-step.component.ts | 6 +- .../client-family-members-step.component.html | 139 +- .../client-family-members-step.component.scss | 106 +- .../client-family-members-step.component.ts | 4 +- .../client-general-step.component.html | 589 ++++--- .../client-general-step.component.scss | 275 ++-- .../client-general-step.component.ts | 12 +- .../client-kyc-step.component.html | 150 +- .../client-kyc-step.component.scss | 227 +-- .../client-kyc-step.component.ts | 4 +- .../client-preview-step.component.html | 504 +++--- .../client-preview-step.component.scss | 309 +++- .../client-preview-step.component.ts | 4 +- .../clients-view/clients-view.component.html | 240 ++- .../clients-view/clients-view.component.scss | 125 +- .../personal-data-tab.component.html | 16 + src/app/clients/clients.component.html | 103 +- src/app/clients/clients.component.ts | 1 + .../create-client.component.html | 165 +- .../create-client.component.scss | 101 ++ .../create-client/create-client.component.ts | 52 +- src/app/core/shell/shell.component.html | 207 +-- src/app/core/shell/shell.component.scss | 189 ++- src/app/core/shell/shell.component.ts | 9 +- .../core/shell/sidenav/sidenav.component.html | 44 +- .../core/shell/sidenav/sidenav.component.scss | 242 ++- .../core/shell/toolbar/toolbar.component.html | 215 +-- .../core/shell/toolbar/toolbar.component.scss | 338 +++- .../core/shell/toolbar/toolbar.component.ts | 14 + .../crar-dialog/crar-dialog.component.html | 380 +++++ .../crar-dialog/crar-dialog.component.scss | 657 ++++++++ .../crar-dialog/crar-dialog.component.ts | 99 ++ .../crr-slr-dialog.component.html | 384 +++++ .../crr-slr-dialog.component.scss | 686 ++++++++ .../crr-slr-dialog.component.ts | 119 ++ .../home/dashboard/dashboard.component.html | 48 +- .../home/dashboard/dashboard.component.scss | 46 +- src/app/home/dashboard/dashboard.component.ts | 29 + src/app/home/home.component.html | 176 +- src/app/home/home.component.scss | 303 +++- src/app/home/home.component.ts | 12 +- .../login-form/login-form.component.html | 9 + .../login-form/login-form.component.scss | 209 ++- src/app/login/login.component.html | 215 +-- src/app/login/login.component.scss | 1250 +++++++-------- src/app/login/login.component.ts | 31 +- .../reset-password.component.scss | 25 +- .../two-factor-authentication.component.scss | 4 +- src/app/shared/footer/footer.component.html | 214 ++- src/app/shared/footer/footer.component.scss | 729 ++++++++- src/app/shared/footer/footer.component.ts | 45 +- src/app/shared/icons.module.ts | 2 + src/app/shared/styles/list-layout.scss | 374 ++++- src/assets/images/cbsnexora-favicon.svg | 6 + src/assets/images/cbsnexora-logo.png | Bin 0 -> 7050 bytes src/assets/images/cbsnexora-logo2.png | Bin 0 -> 1514807 bytes ...esized.png => cover_image_resized_new.png} | Bin src/assets/translations/cs-CS.json | 7 + src/assets/translations/de-DE.json | 7 + src/assets/translations/en-US.json | 1418 +++++++++-------- src/assets/translations/es-CL.json | 7 + src/assets/translations/es-MX.json | 7 + src/assets/translations/fr-FR.json | 7 + src/assets/translations/it-IT.json | 7 + src/assets/translations/ko-KO.json | 7 + src/assets/translations/lt-LT.json | 7 + src/assets/translations/lv-LV.json | 7 + src/assets/translations/ne-NE.json | 7 + src/assets/translations/pt-PT.json | 7 + src/assets/translations/sw-SW.json | 7 + src/environments/.env.ts | 11 +- src/environments/environment.prod.ts | 2 +- src/environments/environment.ts | 2 +- src/index.html | 5 +- src/main.scss | 19 + src/manifest.json | 12 +- 81 files changed, 8384 insertions(+), 3923 deletions(-) create mode 100644 src/app/home/dashboard/crar-dialog/crar-dialog.component.html create mode 100644 src/app/home/dashboard/crar-dialog/crar-dialog.component.scss create mode 100644 src/app/home/dashboard/crar-dialog/crar-dialog.component.ts create mode 100644 src/app/home/dashboard/crr-slr-dialog/crr-slr-dialog.component.html create mode 100644 src/app/home/dashboard/crr-slr-dialog/crr-slr-dialog.component.scss create mode 100644 src/app/home/dashboard/crr-slr-dialog/crr-slr-dialog.component.ts create mode 100644 src/assets/images/cbsnexora-favicon.svg create mode 100644 src/assets/images/cbsnexora-logo.png create mode 100644 src/assets/images/cbsnexora-logo2.png rename src/assets/images/{cover_image_resized.png => cover_image_resized_new.png} (100%) diff --git a/angular.json b/angular.json index 1920fbe55..b4daea670 100644 --- a/angular.json +++ b/angular.json @@ -31,7 +31,7 @@ "@angular/localize/init" ], "assets": [ - "src/favicon.ico", + "src/assets/images/cbsnexora-favicon.svg", "src/robots.txt", "src/manifest.json", "src/assets", diff --git a/src/app/clients/client-stepper/client-address-step/client-address-step.component.html b/src/app/clients/client-stepper/client-address-step/client-address-step.component.html index 4e39aca21..aa49253fc 100644 --- a/src/app/clients/client-stepper/client-address-step/client-address-step.component.html +++ b/src/app/clients/client-stepper/client-address-step/client-address-step.component.html @@ -7,87 +7,115 @@ -->
-

{{ 'labels.heading.Address' | translate }}

+
+
+

+ + {{ 'labels.heading.Address' | translate }} +

+ +
-
- -
+ @if (clientAddressData.length === 0) { +
+ + No address added yet. Click Add to add an address. +
+ } - @if (clientAddressData.length > 0) { - - @for (address of clientAddressData; track address; let i = $index) { - - - - {{ 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 (clientAddressData.length > 0) { + + @for (address of clientAddressData; track address; let i = $index) { + + + + + {{ 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 ? 'Active' : 'Inactive' }} +
+ } +
+ + } + + }
diff --git a/src/app/clients/client-stepper/client-address-step/client-address-step.component.scss b/src/app/clients/client-stepper/client-address-step/client-address-step.component.scss index a6fa88b59..ae630b653 100644 --- a/src/app/clients/client-stepper/client-address-step/client-address-step.component.scss +++ b/src/app/clients/client-stepper/client-address-step/client-address-step.component.scss @@ -6,25 +6,102 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.address { - .address-actions { - margin-top: 1%; +.section-block { + margin-bottom: 8px; +} - button { - margin-right: 1%; - } - } +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} - h3 { - margin: 1% auto; - } +.section-title { + display: flex; + align-items: center; + gap: 8px; + font-size: 15px; + font-weight: 600; + color: #333; + margin: 0; - p { - line-height: 30px; - margin-left: 2%; + .section-icon { + color: var(--md-sys-color-primary, #1074b9); + font-size: 14px; } } -.margin-t { - margin-top: 2em; +.add-btn { + font-size: 13px; +} + +.empty-state { + display: flex; + align-items: center; + gap: 10px; + padding: 24px 16px; + color: rgba(0, 0, 0, 0.45); + font-size: 14px; + background: rgba(0, 0, 0, 0.02); + border-radius: 6px; + border: 1px dashed rgba(0, 0, 0, 0.12); + + .empty-icon { + font-size: 18px; + } +} + +.address-panel { + margin-bottom: 8px; + + .panel-icon { + margin-right: 8px; + font-size: 13px; + color: rgba(0, 0, 0, 0.45); + } +} + +.address-actions { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 4px; + margin: 8px 0 4px; +} + +.address-details { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px 24px; + padding: 8px 0; +} + +.detail-row { + display: flex; + flex-direction: column; + gap: 2px; +} + +.detail-label { + font-size: 12px; + color: rgba(0, 0, 0, 0.5); + font-weight: 500; +} + +.detail-value { + font-size: 14px; + color: #333; +} + +@media (max-width: 768px) { + .section-header { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + + .address-details { + grid-template-columns: 1fr; + } } diff --git a/src/app/clients/client-stepper/client-address-step/client-address-step.component.ts b/src/app/clients/client-stepper/client-address-step/client-address-step.component.ts index c4c5e57ef..69ea99419 100644 --- a/src/app/clients/client-stepper/client-address-step/client-address-step.component.ts +++ b/src/app/clients/client-stepper/client-address-step/client-address-step.component.ts @@ -29,7 +29,7 @@ import { } from '@angular/material/expansion'; import { MatDivider } from '@angular/material/divider'; import { MatSlideToggle } from '@angular/material/slide-toggle'; -import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper'; + import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; /** @@ -48,9 +48,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; MatExpansionPanelTitle, MatExpansionPanelDescription, MatDivider, - MatSlideToggle, - MatStepperPrevious, - MatStepperNext + MatSlideToggle ] }) export class ClientAddressStepComponent { diff --git a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html index bcbab7078..e4344a505 100644 --- a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html +++ b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html @@ -53,15 +53,4 @@
} - -
- - -
diff --git a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts index a8ecde9ee..7279dc58b 100644 --- a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts +++ b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts @@ -17,7 +17,7 @@ import { import { Datatables } from 'app/core/utils/datatables'; import { SettingsService } from 'app/settings/settings.service'; import { MatCheckbox } from '@angular/material/checkbox'; -import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper'; + import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; @@ -28,9 +28,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; imports: [ ...STANDALONE_SHARED_IMPORTS, MatCheckbox, - MatStepperPrevious, - FaIconComponent, - MatStepperNext + FaIconComponent ] }) export class ClientDatatableStepComponent implements OnInit { diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html index 0cfb46e48..6133800b4 100644 --- a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html +++ b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html @@ -7,63 +7,92 @@ -->
-

{{ 'labels.heading.Family Members' | translate }}

+
+
+

+ + {{ 'labels.heading.Family Members' | translate }} +

+ +
-
- -
- - - @for (member of clientFamilyMembers; track member; let i = $index) { - - - - {{ member.firstName }} - - - {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name' }} - - - -
- - -
-

- {{ 'labels.inputs.Nomination Type' | translate }} : {{ member.nominationType }}
- {{ 'labels.inputs.Nominee Name' | translate }} : {{ member.firstName }}
- {{ 'labels.inputs.Relationship' | translate }} : - {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name' - }}
- {{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}
- {{ 'labels.inputs.Percentage Share' | translate }} : {{ member.percentageShare }}%
- {{ 'labels.inputs.Nominee is Minor' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}
- @if (member.isDependent) { - {{ 'labels.inputs.Guardian Name' | translate }} : {{ member.guardianName }}
- {{ 'labels.inputs.Relationship with Minor' | translate }} : {{ member.guardianRelationship }}
- } - @if (member.remarks) { - {{ 'labels.inputs.Remarks' | translate }} : {{ member.remarks }}
- } -

- + @if (clientFamilyMembers.length === 0) { +
+ + No family members / nominees added yet. +
} - -
- - + + @for (member of clientFamilyMembers; track member; let i = $index) { + + + + + {{ member.firstName }} + + + {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name' }} + + + + + +
+ + +
+ +
+
+ {{ 'labels.inputs.Nomination Type' | translate }} + {{ member.nominationType }} +
+
+ {{ 'labels.inputs.Nominee Name' | translate }} + {{ member.firstName }} +
+
+ {{ 'labels.inputs.Relationship' | translate }} + {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name' }} +
+
+ {{ 'labels.inputs.Date Of Birth' | translate }} + {{ member.dateOfBirth | dateFormat }} +
+
+ {{ 'labels.inputs.Percentage Share' | translate }} + {{ member.percentageShare }}% +
+
+ {{ 'labels.inputs.Nominee is Minor' | translate }} + {{ member.isDependent ? 'Yes' : 'No' }} +
+ @if (member.isDependent) { +
+ {{ 'labels.inputs.Guardian Name' | translate }} + {{ member.guardianName }} +
+
+ {{ 'labels.inputs.Relationship with Minor' | translate }} + {{ member.guardianRelationship }} +
+ } + @if (member.remarks) { +
+ {{ 'labels.inputs.Remarks' | translate }} + {{ member.remarks }} +
+ } +
+ + } +
diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.scss b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.scss index 017dca43c..0d6af8241 100644 --- a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.scss +++ b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.scss @@ -6,25 +6,101 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.family-member { - .family-member-actions { - margin-top: 1%; +.section-block { + margin-bottom: 8px; +} - button { - margin-right: 1%; - } - } +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} - h3 { - margin: 1% auto; - } +.section-title { + display: flex; + align-items: center; + gap: 8px; + font-size: 15px; + font-weight: 600; + color: #333; + margin: 0; - p { - line-height: 30px; - margin-left: 2%; + .section-icon { + color: var(--md-sys-color-primary, #1074b9); + font-size: 14px; } } -.margin-t { - margin-top: 2em; +.add-btn { + font-size: 13px; +} + +.empty-state { + display: flex; + align-items: center; + gap: 10px; + padding: 24px 16px; + color: rgba(0, 0, 0, 0.45); + font-size: 14px; + background: rgba(0, 0, 0, 0.02); + border-radius: 6px; + border: 1px dashed rgba(0, 0, 0, 0.12); + + .empty-icon { + font-size: 18px; + } +} + +.member-panel { + margin-bottom: 8px; + + .panel-icon { + margin-right: 8px; + font-size: 13px; + color: rgba(0, 0, 0, 0.45); + } +} + +.member-actions { + display: flex; + justify-content: flex-end; + gap: 4px; + margin: 8px 0 4px; +} + +.member-details { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px 24px; + padding: 8px 0; +} + +.detail-row { + display: flex; + flex-direction: column; + gap: 2px; +} + +.detail-label { + font-size: 12px; + color: rgba(0, 0, 0, 0.5); + font-weight: 500; +} + +.detail-value { + font-size: 14px; + color: #333; +} + +@media (max-width: 768px) { + .section-header { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + + .member-details { + grid-template-columns: 1fr; + } } diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts index 18cd3eb4a..7a0116b9d 100644 --- a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts +++ b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts @@ -23,7 +23,7 @@ import { MatExpansionPanelDescription } from '@angular/material/expansion'; import { MatDivider } from '@angular/material/divider'; -import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper'; + import { FindPipe } from '../../../pipes/find.pipe'; import { DateFormatPipe } from '../../../pipes/date-format.pipe'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; @@ -44,8 +44,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; MatExpansionPanelTitle, MatExpansionPanelDescription, MatDivider, - MatStepperPrevious, - MatStepperNext, FindPipe, DateFormatPipe ] diff --git a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html index 59666449d..e9f423690 100644 --- a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html +++ b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html @@ -7,230 +7,228 @@ -->
-
- - {{ 'labels.inputs.Office' | translate }} - - @for (office of officeOptions; track office) { - - {{ office.name }} - - } - - @if (createClientForm.controls.officeId.hasError('required')) { - - {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - - - - {{ 'labels.inputs.Legal Form' | translate }} - - @for (legalForm of legalFormOptions; track legalForm) { - - {{ legalForm.value | translateKey: 'inputs' }} - - } - - - - - {{ 'labels.inputs.External Id' | translate }} - - @if (!externalNationalIdService.isLoading && externalNationalIdService.statusMessageKey) { - - - {{ 'labels.inputs.' + externalNationalIdService.statusMessageKey | translate }} - - - } - - - @if (createClientForm.get('fullname')) { - - - {{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }} - - - @if (createClientForm.controls.fullname.hasError('required')) { + +
+

+ + {{ 'labels.inputs.Basic Information' | translate }} +

+
+ + {{ 'labels.inputs.Office' | translate }} + + @for (office of officeOptions; track office) { + {{ office.name }} + } + + @if (createClientForm.controls.officeId.hasError('required')) { - {{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }} {{ 'labels.commons.required' | translate }} } - @if (createClientForm.controls.fullname.hasError('pattern')) { - - {{ 'labels.inputs.Client name' | translate }} {{ 'labels.inputs.cannot' | translate }} - {{ 'labels.commons.begin with a special character or number' | translate }} - + + + + {{ 'labels.inputs.Legal Form' | translate }} + + @for (legalForm of legalFormOptions; track legalForm) { + {{ legalForm.value | translateKey: 'inputs' }} + } + + + + + {{ 'labels.inputs.External Id' | translate }} + + @if (!externalNationalIdService.isLoading && externalNationalIdService.statusMessageKey) { + + + {{ 'labels.inputs.' + externalNationalIdService.statusMessageKey | translate }} + + } - } - @if (createClientForm.get('firstname') || createClientForm.get('middlename') || createClientForm.get('lastname')) { -
- @if (createClientForm.get('firstname')) { - - {{ 'labels.inputs.First Name' | translate }} - - @if (createClientForm.controls.firstname.hasError('required')) { - - {{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - @if (createClientForm.controls.firstname.hasError('pattern')) { - - {{ 'labels.inputs.Client first name' | translate }} - {{ 'labels.inputs.cannot' | translate }} - {{ 'labels.commons.begin with a special character or number' | translate }} - - } - - } - @if (createClientForm.get('middlename')) { - - {{ 'labels.inputs.Middle Name' | translate }} - - @if (createClientForm.controls.middlename.hasError('pattern')) { - - {{ 'labels.inputs.Client middle name' | translate }} - {{ 'labels.inputs.cannot' | translate }} - {{ 'labels.commons.begin with a special character or number' | translate }} - - } - - } - @if (createClientForm.get('lastname')) { - - {{ 'labels.inputs.Last Name' | translate }} - - @if (createClientForm.controls.lastname.hasError('required')) { - - {{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - @if (createClientForm.controls.lastname.hasError('pattern')) { - - {{ 'labels.inputs.Client last name' | translate }} - {{ 'labels.inputs.cannot' | translate }} - {{ 'labels.commons.begin with a special character or number' | translate }} - - } - - } -
- } +
+
- + +
+

+ + {{ 'labels.inputs.Client Details' | translate }} +

+
+ @if (createClientForm.get('fullname')) { + + + {{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }} + + + @if (createClientForm.controls.fullname.hasError('required')) { + + {{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + @if (createClientForm.controls.fullname.hasError('pattern')) { + + {{ 'labels.inputs.Client name' | translate }} {{ 'labels.inputs.cannot' | translate }} + {{ 'labels.commons.begin with a special character or number' | translate }} + + } + + } - - - {{ - 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date']) - | translate - }} - - - - - + @if (createClientForm.get('firstname') || createClientForm.get('middlename') || createClientForm.get('lastname')) { +
+ @if (createClientForm.get('firstname')) { + + {{ 'labels.inputs.First Name' | translate }} + + @if (createClientForm.controls.firstname.hasError('required')) { + + {{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + @if (createClientForm.controls.firstname.hasError('pattern')) { + + {{ 'labels.inputs.Client first name' | translate }} + {{ 'labels.inputs.cannot' | translate }} + {{ 'labels.commons.begin with a special character or number' | translate }} + + } + + } + @if (createClientForm.get('middlename')) { + + {{ 'labels.inputs.Middle Name' | translate }} + + @if (createClientForm.controls.middlename.hasError('pattern')) { + + {{ 'labels.inputs.Client middle name' | translate }} + {{ 'labels.inputs.cannot' | translate }} + {{ 'labels.commons.begin with a special character or number' | translate }} + + } + + } + @if (createClientForm.get('lastname')) { + + {{ 'labels.inputs.Last Name' | translate }} + + @if (createClientForm.controls.lastname.hasError('required')) { + + {{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + @if (createClientForm.controls.lastname.hasError('pattern')) { + + {{ 'labels.inputs.Client last name' | translate }} + {{ 'labels.inputs.cannot' | translate }} + {{ 'labels.commons.begin with a special character or number' | translate }} + + } + + } +
+ } + + + {{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date']) | translate }} + + + + + + + @if (createClientForm.value.legalFormId === LegalFormId.PERSON) { + + {{ 'labels.inputs.Gender' | translate }} + + @for (gender of genderOptions; track gender) { + {{ gender.name }} + } + + + } + + + {{ 'labels.inputs.Staff' | translate }} + + @for (staff of staffOptions; track staff) { + {{ staff.displayName }} + } + + + + @if (createClientForm.value.legalFormId === LegalFormId.PERSON) { +
+ + {{ 'labels.inputs.Is staff' | translate }}? + +
+ } +
+ + @if (createClientForm.get('clientNonPersonDetails')) { -
- +
+ {{ 'labels.inputs.Constitution' | translate }} @for (constitution of constitutionOptions; track constitution) { - - {{ constitution.name }} - + {{ constitution.name }} } - + {{ 'labels.inputs.Main Business Line' | translate }} @for (business of businessLineOptions; track business) { - - {{ business.name }} - + {{ business.name }} } - + {{ 'labels.inputs.Incorporation Validity Till Date' | translate }} - + - + {{ 'labels.inputs.Incorporation Number' | translate }} - + {{ 'labels.inputs.Remarks' | translate }}
} +
- @if (createClientForm.value.legalFormId === LegalFormId.PERSON) { - - {{ 'labels.inputs.Gender' | translate }} - - @for (gender of genderOptions; track gender) { - - {{ gender.name }} - - } - - - } + +
+

+ + {{ 'labels.inputs.Verification' | translate }} +

- - {{ 'labels.inputs.Staff' | translate }} - - @for (staff of staffOptions; track staff) { - - {{ staff.displayName }} - - } - - - - @if (createClientForm.value.legalFormId === LegalFormId.PERSON) { - - {{ 'labels.inputs.Is staff' | translate }}? - - } - -
+
@if (!sanctionsVerified && !sanctionsBlocked) { - } @@ -253,145 +251,132 @@ }
- - -
- + info + matTooltipPosition="above">info DIP Verification
-
- +
+ {{ 'labels.inputs.Mobile No' | translate }} @if (!mobileVerified) { - } @else { ✔ Verified }
+
- - {{ 'labels.inputs.Email Address' | translate }} - - @if (createClientForm.controls.emailAddress.errors?.email) { - - {{ 'error.Email not valid' | translate }} - - } - - - - {{ 'labels.inputs.Client Type' | translate }} - - @for (clientType of clientTypeOptions; track clientType) { - - {{ clientType.name }} - - } - - - - - {{ 'labels.inputs.Client Classification' | translate }} - - @for (clientClassification of clientClassificationTypeOptions; track clientClassification) { - - {{ clientClassification.name }} - - } - - - - - {{ 'labels.inputs.Submitted On' | translate }} - - - - - -
- - - {{ 'labels.inputs.Active' | translate }}? - - - @if (createClientForm.contains('activationDate')) { - - {{ 'labels.inputs.Activation Date' | translate }} - - - - @if (createClientForm.controls.activationDate.hasError('required')) { - - {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - + +
+

+ + {{ 'labels.inputs.Contact & Classification' | translate }} +

+
+ + {{ 'labels.inputs.Email Address' | translate }} + + @if (createClientForm.controls.emailAddress.errors?.email) { + {{ 'error.Email not valid' | translate }} } - } - - {{ 'labels.inputs.Open Savings Account' | translate }}? - - - @if (createClientForm.contains('savingsProductId')) { - - {{ 'labels.inputs.Savings Product' | translate }} - - @for (product of savingProductOptions; track product) { - - {{ product.name }} - + + {{ 'labels.inputs.Client Type' | translate }} + + @for (clientType of clientTypeOptions; track clientType) { + {{ clientType.name }} } - @if (createClientForm.controls.savingsProductId.hasError('required')) { - - {{ 'labels.inputs.Savings Product' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - } -
-
- - + + {{ 'labels.inputs.Client Classification' | translate }} + + @for (clientClassification of clientClassificationTypeOptions; track clientClassification) { + {{ clientClassification.name }} + } + + + + + {{ 'labels.inputs.Occupation Category' | translate }} + + @for (cat of occupationCategoryOptions; track cat) { + {{ cat.name }} + } + + + + + {{ 'labels.inputs.Occupation' | translate }} + + @for (occ of occupationOptions; track occ) { + {{ occ.name }} + } + + + + + {{ 'labels.inputs.Submitted On' | translate }} + + + + + +
+ + {{ 'labels.inputs.Active' | translate }}? + +
+ + @if (createClientForm.contains('activationDate')) { + + {{ 'labels.inputs.Activation Date' | translate }} + + + + @if (createClientForm.controls.activationDate.hasError('required')) { + + {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + + } + +
+ + {{ 'labels.inputs.Open Savings Account' | translate }}? + +
+ + @if (createClientForm.contains('savingsProductId')) { + + {{ 'labels.inputs.Savings Product' | translate }} + + @for (product of savingProductOptions; track product) { + {{ product.name }} + } + + @if (createClientForm.controls.savingsProductId.hasError('required')) { + + {{ 'labels.inputs.Savings Product' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + + } +
diff --git a/src/app/clients/client-stepper/client-general-step/client-general-step.component.scss b/src/app/clients/client-stepper/client-general-step/client-general-step.component.scss index 1c5c9c623..e1db112b6 100644 --- a/src/app/clients/client-stepper/client-general-step/client-general-step.component.scss +++ b/src/app/clients/client-stepper/client-general-step/client-general-step.component.scss @@ -7,191 +7,80 @@ */ form { - padding: 16px 0; + padding: 0; +} - .layout-row-wrap { - gap: 8px !important; +.section-block { + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + + &:last-child { + border-bottom: none; + margin-bottom: 0; } } -mat-form-field { - margin-bottom: 8px; +.section-title { + display: flex; + align-items: center; + gap: 8px; + font-size: 15px; + font-weight: 600; + color: #333; + margin: 0 0 16px 0; + + .section-icon { + color: var(--md-sys-color-primary, #1074b9); + font-size: 14px; + } } -mat-divider { - margin: 16px 0; +.form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4px 16px; } -.margin-v { - margin: 2em 0 0; +.form-field { + width: 100%; } -.margin-t { - margin-top: 2em; +.full-width { + grid-column: 1 / -1; +} + +.checkbox-field { + display: flex; + align-items: center; + padding: 8px 0; } .name-fields-row { display: flex; - gap: 8px; + gap: 12px; flex-wrap: wrap; width: 100%; - margin-bottom: 8px; + grid-column: 1 / -1; .name-field { flex: 1; - min-width: 200px; + min-width: 180px; &.first-name, &.last-name { flex: 1.2; } - - &.middle-name { - flex: 1; - } - } -} - -@media (width <= 768px) { - .name-fields-row { - flex-direction: column; - gap: 4px; - - .name-field { - width: 100%; - min-width: unset; - flex: none; - } - } -} - -.name-fields-row + mat-form-field, -.name-fields-row + mat-divider, -.name-fields-row + div { - margin-top: 8px; -} - -.layout-row.align-center { - padding-top: 16px; - margin-top: 12px; - - button { - margin: 0 6px; - } -} - -.flex-100 { - margin: 16px 0; - padding: 8px 0; -} - -mat-checkbox { - margin: 8px 0; - - &.margin-v { - margin-top: 12px; - } -} - -@media (width <= 768px) { - form { - padding: 12px 0; - - .layout-row-wrap { - gap: 6px !important; - } - } - - mat-form-field { - margin-bottom: 6px; - } - - mat-divider { - margin: 12px 0; - } - - .layout-row.align-center { - padding-top: 12px; - margin-top: 8px; - flex-direction: column; - gap: 8px; - - button { - width: 100%; - margin: 2px 0; - } - } -} - -.dip-info { - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 4px; - - .dip-info-icon { - font-size: 18px; - width: 18px; - height: 18px; - color: #1976d2; - cursor: pointer; - } - - .dip-info-text { - font-size: 13px; - font-weight: 500; - color: #555; - } -} - -.mobile-verify-row { - display: flex; - align-items: center; - gap: 10px; - - .mobile-field { - flex: 1; - } - - .verify-btn { - height: 40px; - white-space: nowrap; - font-size: 13px; - margin-bottom: 18px; - } - - .verified-label { - white-space: nowrap; - margin-bottom: 18px; - } - - .text-success { - color: #388e3c; - font-size: 14px; - font-weight: 600; } } +/* Verification Section */ .sanctions-verify-section { - margin: 12px 0; + margin-bottom: 16px; .verify-client-btn { height: 40px; font-size: 13px; - white-space: nowrap; - } - - .sanctions-progress { - mat-progress-bar { - margin-bottom: 8px; - } - - .sanctions-msg { - font-size: 13px; - color: #555; - line-height: 1.5; - margin: 0; - } } .sanctions-result { @@ -216,7 +105,6 @@ mat-checkbox { border-left: 4px solid #d32f2f; border-radius: 4px; padding: 10px 16px; - margin: 12px 0; .text-danger { color: #d32f2f; @@ -230,14 +118,60 @@ mat-checkbox { } } +.dip-info { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 12px; + + .dip-info-icon { + font-size: 18px; + width: 18px; + height: 18px; + color: #1976d2; + cursor: pointer; + } + + .dip-info-text { + font-size: 13px; + font-weight: 500; + color: #555; + } +} + +.mobile-verify-row { + display: flex; + align-items: center; + gap: 12px; + + .mobile-field { + flex: 1; + max-width: 320px; + } + + .verify-btn { + height: 40px; + white-space: nowrap; + font-size: 13px; + margin-bottom: 18px; + } + + .verified-label { + white-space: nowrap; + margin-bottom: 18px; + } + + .text-success { + color: #388e3c; + font-size: 14px; + font-weight: 600; + } +} + .external-id-status { font-size: 12px; font-weight: 500; - &.loading { - color: #1976d2; - } - &.success { color: #388e3c; } @@ -247,12 +181,27 @@ mat-checkbox { } } -@media (width <= 480px) { - form { - padding: 8px 0; +@media (max-width: 768px) { + .form-grid { + grid-template-columns: 1fr; + } - .layout-row-wrap { - gap: 4px !important; + .name-fields-row { + flex-direction: column; + gap: 4px; + + .name-field { + min-width: unset; + flex: none; + } + } + + .mobile-verify-row { + flex-direction: column; + align-items: stretch; + + .mobile-field { + max-width: none; } } } diff --git a/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts b/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts index 0128db64b..198c88fb8 100644 --- a/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts +++ b/src/app/clients/client-stepper/client-general-step/client-general-step.component.ts @@ -27,7 +27,7 @@ import { SettingsService } from 'app/settings/settings.service'; import { MatDivider } from '@angular/material/divider'; import { CdkTextareaAutosize } from '@angular/cdk/text-field'; import { MatCheckbox } from '@angular/material/checkbox'; -import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper'; + import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { MatIcon } from '@angular/material/icon'; import { MatTooltip } from '@angular/material/tooltip'; @@ -49,9 +49,7 @@ import { DipVerifyDialogComponent } from './dip-verify-dialog.component'; MatDivider, CdkTextareaAutosize, MatCheckbox, - MatStepperPrevious, FaIconComponent, - MatStepperNext, MatIcon, MatTooltip ] @@ -100,6 +98,10 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy { genderOptions: any; /** Saving Product Options */ savingProductOptions: any; + /** Occupation Category Options */ + occupationCategoryOptions: any; + /** Occupation Options */ + occupationOptions: any; /** Mobile number DIP verification status */ mobileVerified = false; /** Sanctions verification state */ @@ -152,6 +154,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy { dateOfBirth: [''], clientTypeId: [''], clientClassificationId: [''], + occupationCategoryId: [''], + occupationId: [''], submittedOnDate: [ this.settingsService.businessDate, Validators.required @@ -172,6 +176,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy { this.constitutionOptions = this.clientTemplate.clientNonPersonConstitutionOptions; this.genderOptions = this.clientTemplate.genderOptions; this.savingProductOptions = this.clientTemplate.savingProductOptions; + this.occupationCategoryOptions = this.clientTemplate.occupationCategoryOptions || []; + this.occupationOptions = this.clientTemplate.occupationOptions || []; } /** diff --git a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.html b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.html index ceed0902e..023623dad 100644 --- a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.html +++ b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.html @@ -7,111 +7,59 @@ -->
-
-

{{ 'labels.inputs.KYC Verification' | translate }}

- KYC -
+
+

+ + {{ 'labels.inputs.KYC Verification' | translate }} + KYC +

-

- {{ 'labels.inputs.KYC' | translate }} — RBI Master Direction compliant. Fields are optional but recommended for - compliance. -

- -
- info - Verification (PAN, Aadhaar, GSTIN) will be available from the KYC tab after the client is created. -
- - - - -
-
- {{ 'labels.inputs.PAN Number' | translate }} - KYC +
+ info + Verification (PAN, Aadhaar, GSTIN) will be available from the KYC tab after the client is created.
- - {{ 'labels.inputs.PAN Number' | translate }} - - @if (kycForm.get('panNumber')?.hasError('pattern') && kycForm.get('panNumber')?.touched) { - {{ 'labels.inputs.Enter 10-character PAN' | translate }} - } - -
- +
+ + + {{ 'labels.inputs.PAN Number' | translate }} + + @if (kycForm.get('panNumber')?.hasError('pattern') && kycForm.get('panNumber')?.touched) { + {{ 'labels.inputs.Enter 10-character PAN' | translate }} + } + - -
-
- {{ 'labels.inputs.Aadhaar Number' | translate }} - KYC + + + {{ 'labels.inputs.Aadhaar Number' | translate }} + + @if (kycForm.get('aadhaarNumber')?.hasError('pattern') && kycForm.get('aadhaarNumber')?.touched) { + {{ 'labels.inputs.Enter 12-digit Aadhaar' | translate }} + } + + + + + {{ 'labels.inputs.GSTIN Number' | translate }} + + @if (kycForm.get('gstinNumber')?.hasError('pattern') && kycForm.get('gstinNumber')?.touched) { + {{ 'labels.inputs.Enter 15-character GSTIN' | translate }} + } + + + + + {{ 'labels.inputs.Remarks' | translate }} + +
- - {{ 'labels.inputs.Aadhaar Number' | translate }} - - @if (kycForm.get('aadhaarNumber')?.hasError('pattern') && kycForm.get('aadhaarNumber')?.touched) { - {{ 'labels.inputs.Enter 12-digit Aadhaar' | translate }} - } - -
- - - - -
-
- {{ 'labels.inputs.GSTIN Number' | translate }} - KYC -
- - {{ 'labels.inputs.GSTIN Number' | translate }} - - @if (kycForm.get('gstinNumber')?.hasError('pattern') && kycForm.get('gstinNumber')?.touched) { - {{ 'labels.inputs.Enter 15-character GSTIN' | translate }} - } - -
- - - - -
- - {{ 'labels.inputs.Remarks' | translate }} - - -
- - -
- -
diff --git a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss index 400792bc6..01c9d3c7e 100644 --- a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss +++ b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss @@ -6,21 +6,29 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.kyc-header { +.section-block { + margin-bottom: 8px; +} + +.section-title { display: flex; align-items: center; - gap: 12px; - margin-bottom: 4px; + gap: 8px; + font-size: 15px; + font-weight: 600; + color: #333; + margin: 0 0 16px 0; - h3 { - margin: 0; + .section-icon { + color: var(--md-sys-color-primary, #1074b9); + font-size: 14px; } } .kyc-badge { background-color: #1976d2; color: #fff; - font-size: 11px; + font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; @@ -28,24 +36,6 @@ line-height: 18px; } -.kyc-tag { - background-color: #e3f2fd; - color: #1565c0; - font-size: 10px; - font-weight: 700; - padding: 2px 7px; - border-radius: 10px; - border: 1px solid #90caf9; - letter-spacing: 0.5px; - line-height: 16px; -} - -.kyc-subtitle { - color: #666; - font-size: 13px; - margin: 0 0 8px; -} - .kyc-info-hint { display: flex; align-items: center; @@ -56,7 +46,7 @@ background-color: #e3f2fd; border: 1px solid #90caf9; border-radius: 6px; - margin-bottom: 4px; + margin-bottom: 16px; } .kyc-info-hint-icon { @@ -66,187 +56,22 @@ color: #1565c0; } -.kyc-field-row { - margin-bottom: 8px; +.form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4px 16px; } -.kyc-field-label-row { - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 8px; -} - -.kyc-field-title { - font-weight: 600; - font-size: 14px; -} - -.kyc-input-row { - display: flex; - align-items: flex-start; - gap: 12px; -} - -.kyc-input { - flex: 1; -} - -.verify-btn { - margin-top: 4px; - min-width: 100px; - display: flex; - align-items: center; - justify-content: center; -} - -.kyc-status-row { - margin-top: 4px; - margin-bottom: 8px; -} - -.status-chip { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 13px; - font-weight: 500; - padding: 4px 10px; - border-radius: 16px; - - &.verified { - background-color: #e8f5e9; - color: #2e7d32; - border: 1px solid #a5d6a7; - } - - &.pending { - background-color: #fff8e1; - color: #f57f17; - border: 1px solid #ffe082; - } - - &.failed { - background-color: #ffebee; - color: #c62828; - border: 1px solid #ef9a9a; - } -} - -.status-chip-icon { - font-size: 16px; - height: 16px; - width: 16px; -} - -.status-icon { - font-size: 20px; - - &.verified { - color: #2e7d32; - } - - &.failed { - color: #c62828; - } -} - -.kyc-additional { - margin-top: 8px; -} - -.full-width { +.form-field { width: 100%; } -.m-b-20 { - margin-bottom: 20px; +.full-width { + grid-column: 1 / -1; } -.m-t-10 { - margin-top: 10px; -} - -/* OTP Section */ -.otp-section { - margin-top: 8px; - padding: 12px 16px; - background-color: #f3f8ff; - border: 1px solid #bbdefb; - border-radius: 8px; -} - -.otp-info { - display: flex; - align-items: center; - gap: 6px; - font-size: 13px; - color: #1565c0; - margin: 0 0 10px; - font-weight: 500; -} - -.otp-info-icon { - font-size: 18px; - height: 18px; - width: 18px; - color: #1565c0; -} - -.otp-input { - max-width: 200px; -} - -.resend-btn { - margin-top: 4px; - font-size: 12px; -} - -/* Warning & Error messages */ -.kyc-warning { - display: flex; - align-items: center; - gap: 6px; - font-size: 12px; - color: #f57f17; - margin-top: 4px; - padding: 6px 10px; - background-color: #fffde7; - border: 1px solid #fff59d; - border-radius: 6px; -} - -.kyc-warning-icon { - font-size: 16px; - height: 16px; - width: 16px; - color: #f57f17; -} - -.kyc-error-msg { - display: flex; - align-items: center; - gap: 6px; - font-size: 12px; - color: #c62828; - margin-top: 4px; - padding: 6px 10px; - background-color: #ffebee; - border: 1px solid #ef9a9a; - border-radius: 6px; -} - -.kyc-error-icon { - font-size: 16px; - height: 16px; - width: 16px; - color: #c62828; -} - -.verification-detail { - display: inline-block; - font-size: 12px; - color: #333; - margin-left: 8px; - font-weight: 500; +@media (max-width: 768px) { + .form-grid { + grid-template-columns: 1fr; + } } diff --git a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts index cfe37e4b6..397838d67 100644 --- a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts +++ b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts @@ -11,7 +11,7 @@ import { Component, inject } from '@angular/core'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; /** Custom Imports */ -import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper'; + import { MatDivider } from '@angular/material/divider'; import { MatIcon } from '@angular/material/icon'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; @@ -29,8 +29,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; styleUrls: ['./client-kyc-step.component.scss'], imports: [ ...STANDALONE_SHARED_IMPORTS, - MatStepperPrevious, - MatStepperNext, MatDivider, MatIcon, FaIconComponent diff --git a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html index 7573b331b..81976f6e2 100644 --- a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html +++ b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html @@ -6,280 +6,244 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
-

{{ 'labels.heading.General' | translate }}

- - - -
- {{ 'labels.inputs.name' | translate }} - @if (client.legalFormId === LegalFormId.ENTITY) { - {{ client.fullname }} - } - @if (client.legalFormId === LegalFormId.PERSON) { - {{ client.firstname }} - {{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }} - } -
- -
- {{ 'labels.inputs.Office' | translate }} - {{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }} -
- -
- {{ 'labels.inputs.Legal Form' | translate }} - {{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }} -
- - @if (client.staffId) { -
- {{ 'labels.inputs.Staff' | translate }} - {{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }} +
+ +
+
+
- } - - @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 + } +
+
+
+ + +
+
+ + {{ 'labels.heading.General' | translate }} +
+
+ + + @if (client?.dateOfBirth) { + + + + + } + @if (client?.externalId) { + + + + + } + @if (client?.staffId) { + + + + + } + @if (client?.legalFormId === LegalFormId.PERSON && client?.genderId) { + + + + + } + @if (client?.mobileNo) { + + + + + } + @if (client?.emailAddress) { + + + + + } + @if (client?.clientTypeId) { + + + + + } + @if (client?.clientClassificationId) { + + + + + } + @if (client?.occupationCategoryId) { + + + + + } + @if (client?.occupationId) { + + + + + } + @if (client?.submittedOnDate) { + + + + + } + + + + + @if (client?.activationDate) { + + + + + } + @if (client?.savingsProductId) { + + + + + } + @if (client?.legalFormId === LegalFormId.PERSON) { + + + + + } + @if (client?.legalFormId === LegalFormId.ENTITY && client?.clientNonPersonDetails) { + @if (client.clientNonPersonDetails.constitutionId) { + + + + + } + + + + + } + +
{{ client.legalFormId === LegalFormId.PERSON ? 'Date of Birth' : 'Incorporation Date' }}{{ client.dateOfBirth | dateFormat }}
{{ 'labels.inputs.External Id' | translate }} + +
{{ 'labels.inputs.Staff' | translate }}{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}
{{ 'labels.inputs.Gender' | translate }}{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}
{{ 'labels.inputs.Mobile No' | translate }}{{ client.mobileNo }}
{{ 'labels.inputs.Email Address' | translate }}{{ client.emailAddress }}
{{ 'labels.inputs.Client Type' | translate }}{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}
{{ 'labels.inputs.Client Classification' | translate }}{{ client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name' }}
{{ 'labels.inputs.Occupation Category' | translate }}{{ client.occupationCategoryId | find: clientTemplate.occupationCategoryOptions : 'id' : 'name' }}
{{ 'labels.inputs.Occupation' | translate }}{{ client.occupationId | find: clientTemplate.occupationOptions : 'id' : 'name' }}
{{ 'labels.inputs.Submitted On Date' | translate }}{{ client.submittedOnDate | dateFormat }}
{{ 'labels.inputs.Active' | translate }}? + {{ client?.active | yesNo }} +
{{ 'labels.inputs.Activation Date' | translate }}{{ client.activationDate | dateFormat }}
{{ 'labels.inputs.Savings Product' | translate }}{{ client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name' }}
{{ 'labels.inputs.Is staff' | translate }}?{{ client.isStaff | yesNo }}
{{ '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) { +
+
+ + {{ 'labels.inputs.KYC' | translate }} + KYC +
+
+ + + @if (kycData.panNumber) { + + + + + } + @if (kycData.aadhaarNumberMasked) { + + + + + } + @if (kycData.gstinNumber) { + + + + + } + @if (kycData.remarks) { + + + + + } + +
{{ 'labels.inputs.PAN Number' | translate }}{{ kycData.panNumber }}
{{ 'labels.inputs.Aadhaar Number' | translate }}{{ kycData.aadhaarNumberMasked }}
{{ 'labels.inputs.GSTIN Number' | translate }}{{ kycData.gstinNumber }}
{{ 'labels.inputs.Remarks' | translate }}{{ kycData.remarks }}
+
} -
-
- - - + + @if (client?.familyMembers?.length) { +
+
+ + {{ 'labels.heading.Family Members' | translate }} / {{ 'labels.inputs.Nominee' | translate }} + {{ client.familyMembers.length }} +
+
+ + + + + + + + + + + @for (member of client.familyMembers; track member) { + + + + + + + } + +
{{ 'labels.inputs.name' | translate }}{{ 'labels.inputs.Relationship' | translate }}{{ 'labels.inputs.Date Of Birth' | translate }}{{ 'labels.inputs.Is Dependent' | translate }}
{{ 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 @@