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
@@ -6,81 +6,110 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-stepper orientation="vertical" [linear]="false" class="mat-elevation-z8" labelPosition="bottom" #clientStepper>
|
||||
<ng-template matStepperIcon="number">
|
||||
<fa-icon icon="pencil-alt" size="sm"></fa-icon>
|
||||
</ng-template>
|
||||
<div class="create-client-container">
|
||||
<div class="client-header">
|
||||
<fa-icon icon="user-plus" class="header-icon"></fa-icon>
|
||||
<h2>{{ 'labels.heading.Create Client' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<ng-template matStepperIcon="edit">
|
||||
<fa-icon icon="pencil-alt" size="sm"></fa-icon>
|
||||
</ng-template>
|
||||
|
||||
<ng-template matStepperIcon="done">
|
||||
<fa-icon icon="check" size="sm"></fa-icon>
|
||||
</ng-template>
|
||||
|
||||
<ng-template matStepperIcon="error">
|
||||
<fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
|
||||
</ng-template>
|
||||
|
||||
<ng-template matStepperIcon="preview">
|
||||
<fa-icon icon="eye" size="sm"></fa-icon>
|
||||
</ng-template>
|
||||
|
||||
<mat-step [stepControl]="clientGeneralForm">
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.GENERAL' | translate }}</ng-template>
|
||||
|
||||
<mifosx-client-general-step
|
||||
[clientTemplate]="clientTemplate"
|
||||
(legalFormChangeEvent)="legalFormChange($event)"
|
||||
></mifosx-client-general-step>
|
||||
</mat-step>
|
||||
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.Nominee' | translate }}</ng-template>
|
||||
|
||||
<mifosx-client-family-members-step
|
||||
#clientFamily
|
||||
[clientTemplate]="clientTemplate"
|
||||
></mifosx-client-family-members-step>
|
||||
</mat-step>
|
||||
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.KYC' | translate }}</ng-template>
|
||||
<mifosx-client-kyc-step #clientKyc></mifosx-client-kyc-step>
|
||||
</mat-step>
|
||||
|
||||
@if (clientTemplate.isAddressEnabled) {
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.ADDRESS' | translate }}</ng-template>
|
||||
<mifosx-client-address-step
|
||||
#clientAddress
|
||||
<mat-tab-group class="client-tabs" animationDuration="200ms" [preserveContent]="true" [(selectedIndex)]="selectedTabIndex">
|
||||
<!-- Tab 1: General Details -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<fa-icon icon="user" class="tab-icon"></fa-icon>
|
||||
{{ 'labels.inputs.GENERAL' | translate }}
|
||||
</ng-template>
|
||||
<div class="tab-content">
|
||||
<mifosx-client-general-step
|
||||
[clientTemplate]="clientTemplate"
|
||||
[clientAddressFieldConfig]="clientAddressFieldConfig"
|
||||
>
|
||||
</mifosx-client-address-step>
|
||||
</mat-step>
|
||||
}
|
||||
(legalFormChangeEvent)="legalFormChange($event)"
|
||||
></mifosx-client-general-step>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
@for (datatable of datatables; track datatable) {
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{ datatable.registeredTableName }}</ng-template>
|
||||
<mifosx-client-datatable-step [datatableData]="datatable" #dtclient></mifosx-client-datatable-step>
|
||||
</mat-step>
|
||||
}
|
||||
<!-- Tab 2: KYC & Nominee -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<fa-icon icon="id-card" class="tab-icon"></fa-icon>
|
||||
{{ 'labels.inputs.KYC' | translate }} & {{ 'labels.inputs.Nominee' | translate }}
|
||||
</ng-template>
|
||||
<div class="tab-content">
|
||||
<div class="tab-section">
|
||||
<mifosx-client-kyc-step #clientKyc></mifosx-client-kyc-step>
|
||||
</div>
|
||||
|
||||
@if (areFormvalids()) {
|
||||
<mat-step completed>
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
|
||||
<mat-divider class="section-divider"></mat-divider>
|
||||
|
||||
<div class="tab-section">
|
||||
<mifosx-client-family-members-step
|
||||
#clientFamily
|
||||
[clientTemplate]="clientTemplate"
|
||||
></mifosx-client-family-members-step>
|
||||
</div>
|
||||
|
||||
@if (clientTemplate.isAddressEnabled) {
|
||||
<mat-divider class="section-divider"></mat-divider>
|
||||
<div class="tab-section">
|
||||
<mifosx-client-address-step
|
||||
#clientAddress
|
||||
[clientTemplate]="clientTemplate"
|
||||
[clientAddressFieldConfig]="clientAddressFieldConfig"
|
||||
></mifosx-client-address-step>
|
||||
</div>
|
||||
}
|
||||
|
||||
@for (datatable of datatables; track datatable) {
|
||||
<mat-divider class="section-divider"></mat-divider>
|
||||
<div class="tab-section">
|
||||
<h3>{{ datatable.registeredTableName }}</h3>
|
||||
<mifosx-client-datatable-step [datatableData]="datatable" #dtclient></mifosx-client-datatable-step>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Tab 3: Preview & Submit -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<fa-icon icon="eye" class="tab-icon"></fa-icon>
|
||||
{{ 'labels.inputs.PREVIEW' | translate }}
|
||||
</ng-template>
|
||||
<div class="tab-content">
|
||||
<mifosx-client-preview-step
|
||||
[clientTemplate]="clientTemplate"
|
||||
[clientAddressFieldConfig]="clientAddressFieldConfig"
|
||||
[client]="client"
|
||||
[kycData]="clientKycStep?.kycData"
|
||||
(submitEvent)="submit()"
|
||||
>
|
||||
</mifosx-client-preview-step>
|
||||
</mat-step>
|
||||
}
|
||||
</mat-stepper>
|
||||
></mifosx-client-preview-step>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
<!-- Bottom Action Bar -->
|
||||
<div class="action-bar">
|
||||
<button mat-raised-button [routerLink]="['../']" class="cancel-btn">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<div class="action-bar-right">
|
||||
@if (selectedTabIndex > 0) {
|
||||
<button mat-raised-button (click)="selectedTabIndex = selectedTabIndex - 1">
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Previous' | translate }}
|
||||
</button>
|
||||
}
|
||||
@if (selectedTabIndex < 2) {
|
||||
<button mat-raised-button color="primary" (click)="selectedTabIndex = selectedTabIndex + 1">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
@if (selectedTabIndex === 2 && areFormvalids()) {
|
||||
<button mat-raised-button color="primary" (click)="submit()">
|
||||
<fa-icon icon="check" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,3 +5,104 @@
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.create-client-container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.client-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 20px;
|
||||
color: var(--md-sys-color-primary, #1074b9);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.client-tabs {
|
||||
background: var(--md-sys-color-surface, #fff);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-tab-header {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.mat-mdc-tab {
|
||||
min-width: 160px;
|
||||
padding: 0 24px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body-wrapper {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body-content {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.tab-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.no-address-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 32px 16px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
font-size: 14px;
|
||||
|
||||
mat-icon {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.action-bar-right {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@@ -19,12 +19,14 @@ import { ClientFamilyMembersStepComponent } from '../client-stepper/client-famil
|
||||
import { ClientAddressStepComponent } from '../client-stepper/client-address-step/client-address-step.component';
|
||||
import { ClientDatatableStepComponent } from '../client-stepper/client-datatable-step/client-datatable-step.component';
|
||||
import { ClientKycStepComponent } from '../client-stepper/client-kyc-step/client-kyc-step.component';
|
||||
import { ClientPreviewStepComponent } from '../client-stepper/client-preview-step/client-preview-step.component';
|
||||
|
||||
/** Custom Services */
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
import { MatStepper, MatStepperIcon, MatStep, MatStepLabel } from '@angular/material/stepper';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatDivider } from '@angular/material/divider';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { ClientPreviewStepComponent } from '../client-stepper/client-preview-step/client-preview-step.component';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
@@ -36,11 +38,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
styleUrls: ['./create-client.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatStepper,
|
||||
MatStepperIcon,
|
||||
MatTabsModule,
|
||||
MatIconModule,
|
||||
MatDivider,
|
||||
FaIconComponent,
|
||||
MatStep,
|
||||
MatStepLabel,
|
||||
ClientGeneralStepComponent,
|
||||
ClientFamilyMembersStepComponent,
|
||||
ClientAddressStepComponent,
|
||||
@@ -55,19 +56,15 @@ export class CreateClientComponent {
|
||||
private clientsService = inject(ClientsService);
|
||||
private settingsService = inject(SettingsService);
|
||||
|
||||
/** Client General Step */
|
||||
@ViewChild(ClientGeneralStepComponent, { static: true }) clientGeneralStep: ClientGeneralStepComponent;
|
||||
/** Client Family Members Step */
|
||||
@ViewChild(ClientGeneralStepComponent) clientGeneralStep: ClientGeneralStepComponent;
|
||||
@ViewChild('clientFamily') clientFamilyMembersStep: ClientFamilyMembersStepComponent;
|
||||
/** Client Address Step */
|
||||
@ViewChild('clientAddress') clientAddressStep: ClientAddressStepComponent;
|
||||
/** Client KYC Step */
|
||||
@ViewChild('clientKyc') clientKycStep: ClientKycStepComponent;
|
||||
/** Get handle on dtclient tags in the template */
|
||||
@ViewChildren('dtclient') clientDatatables: QueryList<ClientDatatableStepComponent>;
|
||||
|
||||
datatables: any = [];
|
||||
legalFormType = 1;
|
||||
selectedTabIndex = 0;
|
||||
|
||||
/** Client Template */
|
||||
clientTemplate: any;
|
||||
@@ -89,38 +86,26 @@ export class CreateClientComponent {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves general information about client.
|
||||
*/
|
||||
get clientGeneralForm() {
|
||||
return this.clientGeneralStep.createClientForm;
|
||||
return this.clientGeneralStep?.createClientForm;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves the client object
|
||||
*/
|
||||
get client() {
|
||||
if (this.clientTemplate.isAddressEnabled) {
|
||||
return {
|
||||
...this.clientGeneralStep.clientGeneralDetails,
|
||||
...this.clientFamilyMembersStep.familyMembers,
|
||||
...this.clientAddressStep.address
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...this.clientGeneralStep.clientGeneralDetails,
|
||||
...this.clientFamilyMembersStep.familyMembers
|
||||
};
|
||||
}
|
||||
const general = this.clientGeneralStep?.clientGeneralDetails || {};
|
||||
const family = this.clientFamilyMembersStep?.familyMembers || {};
|
||||
const addr = this.clientTemplate.isAddressEnabled && this.clientAddressStep ? this.clientAddressStep.address : {};
|
||||
return { ...general, ...family, ...addr };
|
||||
}
|
||||
|
||||
areFormvalids(): boolean {
|
||||
if (!this.clientGeneralStep || !this.clientGeneralForm) {
|
||||
return false;
|
||||
}
|
||||
let areValids = this.clientGeneralForm.valid;
|
||||
// Block form if sanctions match found
|
||||
if (this.clientGeneralStep.sanctionsBlocked) {
|
||||
return false;
|
||||
}
|
||||
if (this.clientTemplate.isAddressEnabled) {
|
||||
if (this.clientTemplate.isAddressEnabled && this.clientAddressStep) {
|
||||
areValids = areValids && this.clientAddressStep.address.address.length > 0;
|
||||
}
|
||||
if (this.clientTemplate.datatables && this.clientTemplate.datatables.length > 0 && this.clientDatatables) {
|
||||
@@ -128,7 +113,6 @@ export class CreateClientComponent {
|
||||
areValids = areValids && clientDatatable.datatableForm.valid;
|
||||
});
|
||||
}
|
||||
|
||||
return areValids;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user