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
+113
-102
@@ -1,132 +1,143 @@
|
||||
<!--
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
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/.
|
||||
-->
|
||||
<!-- Modern Material Design 3 Login Layout -->
|
||||
|
||||
<!-- Modern Glassmorphism Login with Animated Gradient Background -->
|
||||
<div class="login-wrapper">
|
||||
<!-- Left Panel - Hero Section (Hidden on tablet and mobile) -->
|
||||
<div class="hero-panel hide-lt-lg" [class.production-mode]="productionMode">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content">
|
||||
<!-- Default Mode: Full content -->
|
||||
@if (!productionMode) {
|
||||
<div class="hero-text">
|
||||
<h1 class="hero-title">{{ 'APP_NAME' | translate }}</h1>
|
||||
<p class="hero-subtitle">
|
||||
{{ 'labels.text.A' | translate }}
|
||||
<span class="hero-highlight">{{ 'labels.text.global community' | translate }}</span>
|
||||
{{ 'labels.text.elimination of poverty' | translate }}
|
||||
</p>
|
||||
<div class="hero-features">
|
||||
<div class="feature-item">
|
||||
<fa-icon icon="shield-alt" class="feature-icon"></fa-icon>
|
||||
<span class="feature-text">{{ 'labels.heading.Secure & Reliable' | translate }}</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<fa-icon icon="users" class="feature-icon"></fa-icon>
|
||||
<span class="feature-text">{{ 'labels.heading.Community Driven' | translate }}</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<fa-icon icon="globe" class="feature-icon"></fa-icon>
|
||||
<span class="feature-text">{{ 'labels.heading.Global Impact' | translate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<!-- Production Mode: Minimal branding at bottom -->
|
||||
@if (productionMode) {
|
||||
<div class="hero-branding-bottom">
|
||||
<h1 class="hero-title-minimal">{{ 'APP_NAME' | translate }}</h1>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<!-- Animated Gradient Background -->
|
||||
<div class="gradient-bg">
|
||||
<div class="gradient-orb orb-1"></div>
|
||||
<div class="gradient-orb orb-2"></div>
|
||||
<div class="gradient-orb orb-3"></div>
|
||||
<div class="gradient-orb orb-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel - Login Form -->
|
||||
<div class="login-panel">
|
||||
<!-- Header Controls -->
|
||||
<div class="login-header">
|
||||
@if (allowServerSwitch()) {
|
||||
<mifosx-server-selector class="header-control" appearance="outline" [showLabel]="false">
|
||||
</mifosx-server-selector>
|
||||
}
|
||||
<mifosx-theme-toggle class="header-control theme-toggle"></mifosx-theme-toggle>
|
||||
<mifosx-language-selector class="header-control" appearance="outline" [showLabel]="false">
|
||||
</mifosx-language-selector>
|
||||
</div>
|
||||
<!-- Settings Icon - Top Right -->
|
||||
<button
|
||||
class="settings-trigger"
|
||||
(click)="toggleSettingsPanel()"
|
||||
matTooltip="Settings"
|
||||
attr.aria-label="Settings"
|
||||
>
|
||||
<mifosx-m3-icon [name]="settingsPanelOpen ? 'close' : 'settings'"></mifosx-m3-icon>
|
||||
</button>
|
||||
|
||||
<!-- Main Login Card -->
|
||||
<div class="login-card-container">
|
||||
<div class="login-card">
|
||||
<!-- Logo Section -->
|
||||
<div class="logo-section">
|
||||
@if (!themeDarkEnabled) {
|
||||
<img [src]="logoPath" (error)="onLogoError()" alt="{{ 'APP_NAME' | translate }} Logo" class="logo-image" />
|
||||
} @else {
|
||||
<img
|
||||
[src]="logoPathDark"
|
||||
(error)="onLogoErrorDark()"
|
||||
alt="{{ 'APP_NAME' | translate }} Logo"
|
||||
class="logo-image"
|
||||
/>
|
||||
}
|
||||
<!-- Settings Popup Panel -->
|
||||
@if (settingsPanelOpen) {
|
||||
<div class="settings-overlay" (click)="toggleSettingsPanel()"></div>
|
||||
<div class="settings-panel" @settingsAnimation>
|
||||
<div class="settings-panel-header">
|
||||
<h3 class="settings-title">
|
||||
<mifosx-m3-icon name="tune"></mifosx-m3-icon>
|
||||
{{ 'labels.heading.Settings' | translate }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="settings-panel-body">
|
||||
<!-- Theme Toggle -->
|
||||
<div class="settings-item">
|
||||
<span class="settings-label">
|
||||
<mifosx-m3-icon name="dark_mode"></mifosx-m3-icon>
|
||||
{{ 'labels.heading.Theme' | translate }}
|
||||
</span>
|
||||
<mifosx-theme-toggle></mifosx-theme-toggle>
|
||||
</div>
|
||||
|
||||
<!-- Form Section -->
|
||||
<div class="form-section">
|
||||
<!-- Tenant Selector -->
|
||||
@if (showTenantSelector) {
|
||||
<div class="tenant-section">
|
||||
<mifosx-tenant-selector></mifosx-tenant-selector>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Login Forms -->
|
||||
@if (!resetPassword && !twoFactorAuthenticationRequired) {
|
||||
<mifosx-login-form></mifosx-login-form>
|
||||
}
|
||||
|
||||
@if (resetPassword) {
|
||||
<mifosx-reset-password></mifosx-reset-password>
|
||||
}
|
||||
|
||||
@if (twoFactorAuthenticationRequired) {
|
||||
<mifosx-two-factor-authentication></mifosx-two-factor-authentication>
|
||||
}
|
||||
<!-- Language Selector -->
|
||||
<div class="settings-item">
|
||||
<span class="settings-label">
|
||||
<mifosx-m3-icon name="language"></mifosx-m3-icon>
|
||||
{{ 'labels.heading.Language' | translate }}
|
||||
</span>
|
||||
<mifosx-language-selector appearance="outline" [showLabel]="false"></mifosx-language-selector>
|
||||
</div>
|
||||
|
||||
<!-- Version Info Section -->
|
||||
<div class="login-version-info" *ngIf="displayBackendInfo"></div>
|
||||
|
||||
<!-- Resources Links (hidden in production mode) -->
|
||||
@if (!productionMode) {
|
||||
<div class="resources-section">
|
||||
<div class="resources-branding"></div>
|
||||
<!-- Server Selector -->
|
||||
@if (allowServerSwitch()) {
|
||||
<div class="settings-item">
|
||||
<span class="settings-label">
|
||||
<mifosx-m3-icon name="dns"></mifosx-m3-icon>
|
||||
{{ 'labels.heading.Server' | translate }}
|
||||
</span>
|
||||
<mifosx-server-selector appearance="outline" [showLabel]="false"></mifosx-server-selector>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="login-footer">
|
||||
<div class="settings-panel-footer">
|
||||
<button
|
||||
mat-icon-button
|
||||
mat-button
|
||||
(click)="reloadSettings()"
|
||||
class="reload-button"
|
||||
title="Reload Settings"
|
||||
matTooltip="Reload Settings"
|
||||
attr.aria-label="Reload Settings"
|
||||
class="reload-settings-btn"
|
||||
>
|
||||
<mifosx-m3-icon name="refresh"></mifosx-m3-icon>
|
||||
{{ 'labels.buttons.Reload' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Floating Glass Login Card -->
|
||||
<div class="glass-card-container">
|
||||
<div class="glass-card" @cardAnimation>
|
||||
<!-- Logo Section -->
|
||||
<div class="logo-section">
|
||||
@if (!themeDarkEnabled) {
|
||||
<img [src]="logoPath" (error)="onLogoError()" alt="{{ 'APP_NAME' | translate }} Logo" class="logo-image" />
|
||||
} @else {
|
||||
<img
|
||||
[src]="logoPathDark"
|
||||
(error)="onLogoErrorDark()"
|
||||
alt="{{ 'APP_NAME' | translate }} Logo"
|
||||
class="logo-image"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Welcome Text -->
|
||||
<div class="welcome-section">
|
||||
<h1 class="welcome-title">{{ 'labels.heading.Welcome Back' | translate }}</h1>
|
||||
<p class="welcome-subtitle">{{ 'labels.text.Sign in to continue' | translate }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Tenant Selector -->
|
||||
@if (showTenantSelector) {
|
||||
<div class="tenant-section">
|
||||
<mifosx-tenant-selector></mifosx-tenant-selector>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Login Forms -->
|
||||
@if (!resetPassword && !twoFactorAuthenticationRequired) {
|
||||
<mifosx-login-form></mifosx-login-form>
|
||||
}
|
||||
|
||||
@if (resetPassword) {
|
||||
<mifosx-reset-password></mifosx-reset-password>
|
||||
}
|
||||
|
||||
@if (twoFactorAuthenticationRequired) {
|
||||
<mifosx-two-factor-authentication></mifosx-two-factor-authentication>
|
||||
}
|
||||
|
||||
<!-- Version Info Section -->
|
||||
<div class="login-version-info" *ngIf="displayBackendInfo"></div>
|
||||
|
||||
<!-- Branding Footer -->
|
||||
@if (!productionMode) {
|
||||
<div class="card-footer">
|
||||
<span class="footer-text">
|
||||
{{ 'APP_NAME' | translate }}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resource Menus -->
|
||||
<!-- Resource Menus (kept for compatibility) -->
|
||||
<mat-menu #resourcesMenu="matMenu" class="modern-menu">
|
||||
<a [href]="'userManual' | documentationLink" target="_blank" rel="noopener noreferrer" mat-menu-item>
|
||||
<fa-icon icon="book-open" class="menu-icon"></fa-icon>
|
||||
|
||||
Reference in New Issue
Block a user