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>
|
||||
|
||||
Reference in New Issue
Block a user