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,65 +6,137 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="layout-row align-end gap-2px responsive-column container m-b-20">
|
||||
<div #buttonDashboard class="in-block">
|
||||
<button mat-raised-button color="primary" [routerLink]="['/dashboard']">
|
||||
<fa-icon icon="tachometer-alt" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Dashboard' | translate }}
|
||||
</button>
|
||||
<div class="home-container">
|
||||
<!-- Welcome Banner -->
|
||||
<div class="welcome-banner">
|
||||
<div class="welcome-left">
|
||||
<div class="welcome-greeting">
|
||||
<h2>{{ 'labels.text.Welcome' | translate }}, <strong>{{ username }}</strong></h2>
|
||||
<p class="welcome-sub">{{ tenant | titlecase }} · CBSNexora Core Banking Platform</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="welcome-right">
|
||||
<div #searchActivity class="search-box">
|
||||
<fa-icon icon="search" class="search-icon"></fa-icon>
|
||||
<input matInput
|
||||
placeholder="{{ 'labels.placeholders.Search Activity' | translate }}"
|
||||
[matAutocomplete]="activitySearch"
|
||||
[formControl]="searchText"
|
||||
class="search-input" />
|
||||
<mat-autocomplete #activitySearch="matAutocomplete">
|
||||
@for (activity of filteredActivities | async; track activity) {
|
||||
<mat-option [routerLink]="activity.path">
|
||||
<span>{{ activity.activity }}</span>
|
||||
</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Action Cards -->
|
||||
<div class="quick-actions">
|
||||
<a class="qa-card" [routerLink]="['/dashboard']" #buttonDashboard>
|
||||
<div class="qa-icon blue"><fa-icon icon="tachometer-alt"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">{{ 'labels.buttons.Dashboard' | translate }}</span>
|
||||
<span class="qa-desc">Analytics & Reports</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="qa-card" [routerLink]="['/clients/create']">
|
||||
<div class="qa-icon green"><fa-icon icon="user-plus"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">New Client</span>
|
||||
<span class="qa-desc">Onboard Customer</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="qa-card" [routerLink]="['/loans']">
|
||||
<div class="qa-icon purple"><fa-icon icon="hand-holding-usd"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">Loans</span>
|
||||
<span class="qa-desc">Manage Advances</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="qa-card" [routerLink]="['/savings']">
|
||||
<div class="qa-icon amber"><fa-icon icon="piggy-bank"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">Savings</span>
|
||||
<span class="qa-desc">Deposit Accounts</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="qa-card" [routerLink]="['/accounting']">
|
||||
<div class="qa-icon teal"><fa-icon icon="calculator"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">Accounting</span>
|
||||
<span class="qa-desc">GL & Journals</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="qa-card" [routerLink]="['/reports']">
|
||||
<div class="qa-icon red"><fa-icon icon="chart-bar"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">Reports</span>
|
||||
<span class="qa-desc">MIS & Statements</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Info Row -->
|
||||
<div class="info-row">
|
||||
<div class="info-card">
|
||||
<div class="info-card-header">
|
||||
<fa-icon icon="clock" class="info-icon"></fa-icon>
|
||||
<span>Today's Summary</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Date</span>
|
||||
<span class="info-value">{{ today | date: 'dd MMM yyyy' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Branch</span>
|
||||
<span class="info-value">Head Office</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">User</span>
|
||||
<span class="info-value">{{ username }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Tenant</span>
|
||||
<span class="info-value">{{ tenant | titlecase }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-card-header">
|
||||
<fa-icon icon="bolt" class="info-icon"></fa-icon>
|
||||
<span>Quick Links</span>
|
||||
</div>
|
||||
<div class="quick-links">
|
||||
<a [routerLink]="['/tasks']">Checker Inbox & Tasks</a>
|
||||
<a [routerLink]="['/organization']">Organization Setup</a>
|
||||
<a [routerLink]="['/products']">Product Configuration</a>
|
||||
<a [routerLink]="['/system']">System Administration</a>
|
||||
<a [routerLink]="['/users']">User Management</a>
|
||||
<a [routerLink]="['/settings']">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title class="title">
|
||||
{{ 'labels.text.Welcome' | translate }} {{ username }} {{ 'labels.text.To' | translate }}
|
||||
{{ tenant | titlecase }}!
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
|
||||
<mat-card-content #searchActivity>
|
||||
<div class="layout-column">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
|
||||
<input matInput [matAutocomplete]="activitySearch" [formControl]="searchText" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-autocomplete #activitySearch="matAutocomplete">
|
||||
@for (activity of filteredActivities | async; track activity) {
|
||||
<mat-option [routerLink]="activity.path">
|
||||
<span>{{ activity.activity }}</span>
|
||||
</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-card-content>
|
||||
|
||||
<img mat-card-image src="assets/images/{{ tenant }}_home.png" alt="Mifos X" />
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Wizard Popovers (kept for backward compat) -->
|
||||
<ng-template #popoverButtons let-popover="popover" let-prev="prev" let-next="next">
|
||||
<div class="layout-row align-end gap-2px responsive-column">
|
||||
<button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
|
||||
{{ 'labels.buttons.Close' | translate }}
|
||||
</button>
|
||||
@if (prev) {
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(prev.template, prev.target, 'bottom', true)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(prev.template, prev.target, 'bottom', true)">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
}
|
||||
@if (next) {
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(next.template, next.target, 'bottom', true)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(next.template, next.target, 'bottom', true)">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
</button>
|
||||
}
|
||||
@@ -81,11 +153,7 @@
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(templateSearchActivity, searchActivity, 'top', true)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateSearchActivity, searchActivity, 'top', true)">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -98,11 +166,7 @@
|
||||
<button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
|
||||
{{ 'labels.buttons.Close' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(templateButtonDashboard, buttonDashboard, 'bottom', true)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateButtonDashboard, buttonDashboard, 'bottom', true)">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
|
||||
|
||||
Reference in New Issue
Block a user