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
@@ -25,105 +25,120 @@
|
||||
|
||||
<!-- Content -->
|
||||
<mat-sidenav-content class="sidenav">
|
||||
<!-- Sidebar Toggle Handle -->
|
||||
<div
|
||||
class="sidebar-handle"
|
||||
[class.collapsed]="sidenavCollapsed"
|
||||
(click)="toggleSidebarCollapse()"
|
||||
matTooltip="{{ sidenavCollapsed ? 'Expand sidebar' : 'Collapse sidebar' }}"
|
||||
matTooltipPosition="right"
|
||||
>
|
||||
<svg viewBox="0 0 8 14" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
@if (!sidenavCollapsed) {
|
||||
<path d="M6 1L1 7l5 6"/>
|
||||
}
|
||||
@if (sidenavCollapsed) {
|
||||
<path d="M2 1l5 6-5 6"/>
|
||||
}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<mifosx-toolbar [sidenav]="sidenav" (collapse)="toggleCollapse($event)"></mifosx-toolbar>
|
||||
|
||||
<!-- Sub Menu Bar — Row 1 (7 items) -->
|
||||
<div class="sub-menu-bar">
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="institutionMenu">
|
||||
<fa-icon icon="university" class="sub-menu-icon" size="lg"></fa-icon>Institution
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" routerLink="/checker-inbox-and-tasks/checker-inbox">
|
||||
<fa-icon icon="check" class="sub-menu-icon" size="lg"></fa-icon>Tasks
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" routerLink="/accounting">
|
||||
<fa-icon icon="money-bill-alt" class="sub-menu-icon" size="lg"></fa-icon>Accounting
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="reportsMenu">
|
||||
<fa-icon icon="chart-bar" class="sub-menu-icon" size="lg"></fa-icon>Reports
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="adminMenu">
|
||||
<fa-icon icon="shield-alt" class="sub-menu-icon" size="lg"></fa-icon>Admin
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" (click)="subLedgerOpen = !subLedgerOpen; glMenuOpen = false">
|
||||
<fa-icon icon="book" class="sub-menu-icon" size="lg"></fa-icon>Sub Ledger
|
||||
<fa-icon [icon]="subLedgerOpen ? 'caret-up' : 'caret-down'" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" (click)="glMenuOpen = !glMenuOpen; subLedgerOpen = false">
|
||||
<fa-icon icon="book-open" class="sub-menu-icon" size="lg"></fa-icon>General Ledger
|
||||
<fa-icon [icon]="glMenuOpen ? 'caret-up' : 'caret-down'" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<span class="sub-menu-link sub-menu-spacer"></span>
|
||||
</div>
|
||||
<!-- Main Header — 2-Row Navigation -->
|
||||
<div class="main-header">
|
||||
<!-- Row 1 — 11 items -->
|
||||
<div class="nav-row r1">
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="institutionMenu">
|
||||
<fa-icon icon="university" class="ni-ico"></fa-icon>Institution
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" routerLink="/checker-inbox-and-tasks/checker-inbox">
|
||||
<fa-icon icon="check" class="ni-ico"></fa-icon>Tasks
|
||||
</a>
|
||||
<a class="ni" tabindex="0" routerLink="/accounting">
|
||||
<fa-icon icon="money-bill-alt" class="ni-ico"></fa-icon>Accounting
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="reportsMenu">
|
||||
<fa-icon icon="chart-bar" class="ni-ico"></fa-icon>Reports
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="adminMenu">
|
||||
<fa-icon icon="shield-alt" class="ni-ico"></fa-icon>Admin
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" (click)="subLedgerOpen = !subLedgerOpen; glMenuOpen = false">
|
||||
<fa-icon icon="book" class="ni-ico"></fa-icon>Sub Ledger
|
||||
<fa-icon [icon]="subLedgerOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" (click)="glMenuOpen = !glMenuOpen; subLedgerOpen = false">
|
||||
<fa-icon icon="book-open" class="ni-ico"></fa-icon>General Ledger
|
||||
<fa-icon [icon]="glMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="cashierMenu">
|
||||
<fa-icon icon="money-bill" class="ni-ico"></fa-icon>Cashier
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0">
|
||||
<fa-icon icon="user-tie" class="ni-ico"></fa-icon>Officer
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="depositsMenu">
|
||||
<fa-icon icon="piggy-bank" class="ni-ico"></fa-icon>Deposits
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="clearingMenu">
|
||||
<fa-icon icon="exchange" class="ni-ico"></fa-icon>Clearing
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Sub Menu Bar — Row 2 (8 items) -->
|
||||
<div class="sub-menu-bar sub-menu-row-2">
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="cashierMenu">
|
||||
<fa-icon icon="money-bill" class="sub-menu-icon" size="lg"></fa-icon>Cashier
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0">
|
||||
<fa-icon icon="user-tie" class="sub-menu-icon" size="lg"></fa-icon>Officer
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="depositsMenu">
|
||||
<fa-icon icon="piggy-bank" class="sub-menu-icon" size="lg"></fa-icon>Deposits
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="clearingMenu">
|
||||
<fa-icon icon="exchange" class="sub-menu-icon" size="lg"></fa-icon>Clearing
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="hrmMenu">
|
||||
<fa-icon icon="money-check" class="sub-menu-icon" size="lg"></fa-icon>HRM
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="shareMenu">
|
||||
<fa-icon icon="coins" class="sub-menu-icon" size="lg"></fa-icon>Share
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="othersMenu">
|
||||
<fa-icon icon="folder-open" class="sub-menu-icon" size="lg"></fa-icon>Others
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="npaMenu">
|
||||
<fa-icon icon="exclamation-triangle" class="sub-menu-icon" size="lg"></fa-icon>NPA
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Sub Menu Bar — Row 3 (8 items) -->
|
||||
<div class="sub-menu-bar sub-menu-row-3">
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="advancesMenu">
|
||||
<fa-icon icon="hand-holding-usd" class="sub-menu-icon" size="lg"></fa-icon>Advances
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="insuranceMenu">
|
||||
<fa-icon icon="shield-alt" class="sub-menu-icon" size="lg"></fa-icon>Insurance
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" (click)="rbiMenuOpen = !rbiMenuOpen; glMenuOpen = false">
|
||||
<fa-icon icon="university" class="sub-menu-icon" size="lg"></fa-icon>RBI
|
||||
<fa-icon [icon]="rbiMenuOpen ? 'caret-up' : 'caret-down'" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="digitalMenu">
|
||||
<fa-icon icon="mobile-alt" class="sub-menu-icon" size="lg"></fa-icon>Digital
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" (click)="openConfigWizard()">
|
||||
<fa-icon icon="info" class="sub-menu-icon" size="lg"></fa-icon>Config Wizard
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="ckycMenu">
|
||||
<fa-icon icon="fingerprint" class="sub-menu-icon" size="lg"></fa-icon>CKYC Mgmt
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="sub-menu-link" tabindex="0" [matMenuTriggerFor]="letterMgmtMenu">
|
||||
<fa-icon icon="envelope" class="sub-menu-icon" size="lg"></fa-icon>Letter Mgmt
|
||||
<fa-icon icon="caret-down" class="sub-menu-caret"></fa-icon>
|
||||
</a>
|
||||
<span class="sub-menu-link sub-menu-spacer"></span>
|
||||
<!-- Row 2 — 11 items -->
|
||||
<div class="nav-row r2">
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="hrmMenu">
|
||||
<fa-icon icon="money-check" class="ni-ico"></fa-icon>HRM
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="shareMenu">
|
||||
<fa-icon icon="coins" class="ni-ico"></fa-icon>Share
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="othersMenu">
|
||||
<fa-icon icon="folder-open" class="ni-ico"></fa-icon>Others
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="npaMenu">
|
||||
<fa-icon icon="exclamation-triangle" class="ni-ico"></fa-icon>NPA
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="advancesMenu">
|
||||
<fa-icon icon="hand-holding-usd" class="ni-ico"></fa-icon>Advances
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="insuranceMenu">
|
||||
<fa-icon icon="shield-alt" class="ni-ico"></fa-icon>Insurance
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" (click)="rbiMenuOpen = !rbiMenuOpen; glMenuOpen = false">
|
||||
<fa-icon icon="university" class="ni-ico"></fa-icon>RBI
|
||||
<fa-icon [icon]="rbiMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="digitalMenu">
|
||||
<fa-icon icon="mobile-alt" class="ni-ico"></fa-icon>Digital
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" (click)="openConfigWizard()">
|
||||
<fa-icon icon="cog" class="ni-ico"></fa-icon>Config Wizard
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="ckycMenu">
|
||||
<fa-icon icon="fingerprint" class="ni-ico"></fa-icon>CKYC Mgmt
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
<a class="ni" tabindex="0" [matMenuTriggerFor]="letterMgmtMenu">
|
||||
<fa-icon icon="envelope" class="ni-ico"></fa-icon>Letter Mgmt
|
||||
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 1 Menus -->
|
||||
@@ -1039,8 +1054,6 @@
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<mifosx-breadcrumb></mifosx-breadcrumb>
|
||||
<!-- Content -->
|
||||
<mifosx-content></mifosx-content>
|
||||
<!-- Footer -->
|
||||
|
||||
@@ -13,18 +13,73 @@
|
||||
.sidebar-panel {
|
||||
min-height: 100vh;
|
||||
overflow: auto;
|
||||
box-shadow:
|
||||
0 3px 1px -2px rgb(0 0 0 / 20%),
|
||||
0 2px 2px 0 rgb(0 0 0 / 14%),
|
||||
0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||
background: #fff;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
box-shadow: 1px 0 4px rgb(0 0 0 / 5%);
|
||||
transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// Custom thin scrollbar
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #cbd5e1 transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-full {
|
||||
width: 15rem;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.sidebar-compact {
|
||||
width: 4rem;
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Sidebar Toggle Handle =====
|
||||
.sidebar-handle {
|
||||
position: fixed;
|
||||
left: 228px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1000;
|
||||
width: 28px;
|
||||
height: 48px;
|
||||
background: #1a6ef5;
|
||||
border-radius: 0 10px 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 3px 0 12px rgb(0 0 0 / 20%);
|
||||
|
||||
svg {
|
||||
width: 10px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 34px;
|
||||
background: #1558cc;
|
||||
box-shadow: 4px 0 16px rgb(0 0 0 / 25%);
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
left: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,54 +92,98 @@ $color: #e2e4ec;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sub-menu-bar {
|
||||
display: flex;
|
||||
background-color: #1074b9;
|
||||
padding: 0 100px 0 48px;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: normal;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
box-sizing: border-box;
|
||||
// ===== 2-Row Main Header =====
|
||||
$brand: #1353a0;
|
||||
$brand-light: #eaf1fc;
|
||||
$brand-hover: #ddeafb;
|
||||
$gray-200: #e2e8f0;
|
||||
$gray-700: #334155;
|
||||
|
||||
.main-header {
|
||||
background: #fff;
|
||||
border-bottom: 2.5px solid $brand;
|
||||
box-shadow: 0 1px 4px rgb(0 0 0 / 7%);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 900;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sub-menu-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 11px 2px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: rgb(255 255 255 / 70%);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
.nav-row {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
.r1 {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
.r2 {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
// ===== Nav Item =====
|
||||
.ni {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
color: $gray-700;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
user-select: none;
|
||||
border-right: 1px solid $gray-200;
|
||||
text-decoration: none;
|
||||
font-family: 'DM Sans', 'Roboto', sans-serif;
|
||||
|
||||
&:last-child { border-right: none; }
|
||||
&:hover { background: $brand-hover; color: $brand; }
|
||||
&.active { background: $brand-light; color: $brand; font-weight: 600; }
|
||||
|
||||
&.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 18%;
|
||||
bottom: 18%;
|
||||
width: 2.5px;
|
||||
background: $brand;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu-icon {
|
||||
margin-right: 0.35rem;
|
||||
.ni-ico {
|
||||
font-size: 11px;
|
||||
opacity: 0.55;
|
||||
flex-shrink: 0;
|
||||
|
||||
.ni:hover &,
|
||||
.ni.active & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu-caret {
|
||||
margin-left: 0.35rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
.ni-caret {
|
||||
font-size: 8px;
|
||||
opacity: 0.3;
|
||||
transition: transform 0.18s, opacity 0.18s;
|
||||
flex-shrink: 0;
|
||||
|
||||
.sub-menu-spacer {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
.ni:hover & {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item-icon {
|
||||
|
||||
@@ -25,6 +25,7 @@ import { ContentComponent } from './content/content.component';
|
||||
import { FooterComponent } from '../../shared/footer/footer.component';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
@@ -47,7 +48,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
FooterComponent,
|
||||
AsyncPipe,
|
||||
FaIconComponent,
|
||||
MatMenuModule
|
||||
MatMenuModule,
|
||||
MatTooltipModule
|
||||
]
|
||||
})
|
||||
export class ShellComponent implements OnInit, OnDestroy {
|
||||
@@ -112,6 +114,11 @@ export class ShellComponent implements OnInit, OnDestroy {
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
|
||||
toggleSidebarCollapse(): void {
|
||||
this.sidenavCollapsed = !this.sidenavCollapsed;
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
|
||||
openConfigWizard(): void {
|
||||
// Placeholder — config wizard is handled by toolbar component
|
||||
}
|
||||
|
||||
@@ -15,53 +15,11 @@
|
||||
<div class="navigation-panel layout-column">
|
||||
<!-- TODO: Allow customization by organization -->
|
||||
<div class="app-brand" [routerLink]="['/home']">
|
||||
<img src="assets/images/MifosX_logo.png" alt="app-logo" class="app-logo" />
|
||||
<div class="app-logomark"><span></span><span></span><span></span><span></span></div>
|
||||
<span #logo class="app-logo-text text-muted">{{ 'APP_NAME' | translate }}</span>
|
||||
</div>
|
||||
|
||||
<div class="app-user">
|
||||
<div class="app-user-photo">
|
||||
<!-- TODO: Decision to be taken on providing this feature -->
|
||||
<img src="assets/images/user_placeholder.png" alt="app-user-photo" />
|
||||
</div>
|
||||
<span class="app-user-name mb-05"> {{ tenantIdentifier }} / {{ username }} </span>
|
||||
<div #userPanel class="app-user-controls">
|
||||
<button
|
||||
class="xs-button"
|
||||
mat-icon-button
|
||||
matTooltip="{{ 'tooltips.Settings' | translate }}"
|
||||
[routerLink]="['/settings']"
|
||||
>
|
||||
<fa-icon icon="cog"></fa-icon>
|
||||
</button>
|
||||
<button class="xs-button" mat-icon-button matTooltip="{{ 'tooltips.Sign Out' | translate }}" (click)="logout()">
|
||||
<fa-icon icon="sign-out-alt"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-sidenav">
|
||||
<div #frequentlyAccessed>
|
||||
<div class="mt-1 mb-1 nav-item-sep">
|
||||
<mat-divider></mat-divider>
|
||||
<span class="text-muted icon-menu-title">{{ 'labels.menus.Frequently Accessed' | translate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-menu">
|
||||
@for (activity of mappedActivities; track activity) {
|
||||
<div class="icon-menu-item">
|
||||
<button
|
||||
mat-raised-button
|
||||
[matTooltipPosition]="tooltipPosition"
|
||||
[matTooltip]="activity.toolTip"
|
||||
[routerLink]="[activity.path]"
|
||||
>
|
||||
<fa-icon [icon]="activity.icon" size="lg"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="nav-item-sep">
|
||||
<mat-divider></mat-divider>
|
||||
<span class="text-muted">{{ 'labels.menus.Main Items' | translate }}</span>
|
||||
|
||||
@@ -6,55 +6,88 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
$brand: #1353a0;
|
||||
$brand-light: #eaf1fc;
|
||||
$bg: #fff;
|
||||
$text: #334155;
|
||||
$text-muted: #64748b;
|
||||
$text-light: #94a3b8;
|
||||
$active-bg: #eaf1fc;
|
||||
$active-text: #1353a0;
|
||||
$border: #e2e8f0;
|
||||
$hover-bg: #f1f5f9;
|
||||
|
||||
// ===== Shared Full & Compact =====
|
||||
.sidebar-full,
|
||||
.sidebar-compact {
|
||||
.navigation-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 20%;
|
||||
padding-top: 0;
|
||||
overflow-x: hidden;
|
||||
background: $bg;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// ===== Brand / Logo =====
|
||||
.app-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
max-width: 15rem;
|
||||
z-index: 9999;
|
||||
padding: 10px 10px 8px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid $border;
|
||||
|
||||
.app-logomark {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2.5px;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
|
||||
span {
|
||||
border-radius: 2px;
|
||||
|
||||
&:nth-child(1) { background: $brand; }
|
||||
&:nth-child(2) { background: #0ea5e9; }
|
||||
&:nth-child(3) { background: #10b981; }
|
||||
&:nth-child(4) { background: #cbd5e1; }
|
||||
}
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
width: auto;
|
||||
height: 42px;
|
||||
margin-right: 8px;
|
||||
height: 28px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.app-logo-text {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 2rem;
|
||||
font-weight: normal;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== User Section =====
|
||||
.app-user {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 1rem 0 0.4rem;
|
||||
padding: 10px 12px 8px;
|
||||
border-bottom: 1px solid $border;
|
||||
|
||||
.app-user-photo {
|
||||
width: 72px;
|
||||
margin: 0 auto 8px;
|
||||
height: 72px;
|
||||
/* stylelint-disable-next-line color-function-notation */
|
||||
border: 1px solid hsla(210deg, 8%, 51%, 13%);
|
||||
padding: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto 4px;
|
||||
border: 2px solid $border;
|
||||
padding: 2px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -66,48 +99,68 @@
|
||||
|
||||
.app-user-name {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 300;
|
||||
margin-left: -2px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: $text-muted;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.app-user-controls {
|
||||
.mat-icon-button {
|
||||
.xs-button {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 20px;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
|
||||
.xs-button,
|
||||
button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
color: $text-light;
|
||||
transition: color 0.15s;
|
||||
|
||||
&:hover {
|
||||
color: $brand;
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: rgba(0 0 0 / 54%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Section Separator =====
|
||||
.nav-item-sep {
|
||||
mat-divider {
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 16px 0 0 16px;
|
||||
padding: 8px 0 2px 14px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: $text-light;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Sidenav Content =====
|
||||
.app-sidenav {
|
||||
.icon-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
padding: 4px 8px;
|
||||
|
||||
.mat-divider {
|
||||
margin: 0 -24px;
|
||||
mat-divider {
|
||||
border-color: $border;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.icon-menu-title {
|
||||
padding-left: 0;
|
||||
margin-left: -8px;
|
||||
color: $text-light;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.icon-menu-item {
|
||||
@@ -115,35 +168,106 @@
|
||||
|
||||
button {
|
||||
min-width: auto;
|
||||
margin: 4px;
|
||||
margin: 2px;
|
||||
background: $hover-bg;
|
||||
color: $text-muted;
|
||||
box-shadow: none;
|
||||
border: 1px solid $border;
|
||||
border-radius: 6px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
&:hover {
|
||||
background: $active-bg;
|
||||
color: $brand;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item-sep {
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.mat-nav-list {
|
||||
// ===== Nav List — Compact Items =====
|
||||
mat-nav-list,
|
||||
.mat-nav-list,
|
||||
.mat-mdc-nav-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
padding: 2px 0;
|
||||
|
||||
.mat-list-item {
|
||||
.mat-list-icon {
|
||||
height: 30px;
|
||||
font-size: 22px;
|
||||
::ng-deep {
|
||||
.mat-mdc-list-item,
|
||||
.mdc-list-item {
|
||||
height: 34px !important;
|
||||
min-height: 34px !important;
|
||||
padding: 0 12px !important;
|
||||
border-radius: 6px;
|
||||
margin: 1px 6px;
|
||||
color: $text;
|
||||
font-size: 12px;
|
||||
transition: all 0.12s;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
color: $brand;
|
||||
}
|
||||
|
||||
&.active-menu {
|
||||
background: $active-bg;
|
||||
color: $active-text;
|
||||
font-weight: 600;
|
||||
|
||||
.mat-icon,
|
||||
mat-icon,
|
||||
fa-icon,
|
||||
i {
|
||||
color: $active-text;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
.mat-icon,
|
||||
mat-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
color: $text-light;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Text
|
||||
[matLine],
|
||||
a {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Compact Mode Overrides =====
|
||||
.sidebar-compact {
|
||||
.app-brand {
|
||||
padding: 10px 4px 8px;
|
||||
flex-direction: column;
|
||||
|
||||
.app-logo {
|
||||
margin: auto;
|
||||
margin: 0 auto;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.app-logomark {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.app-logo-text {
|
||||
@@ -163,8 +287,8 @@
|
||||
}
|
||||
|
||||
.icon-menu {
|
||||
padding: 8px 0 0;
|
||||
width: 4rem;
|
||||
padding: 4px 0 0;
|
||||
width: 64px;
|
||||
|
||||
.nav-item-sep {
|
||||
display: none;
|
||||
@@ -174,17 +298,39 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-list-item,
|
||||
.mdc-list-item {
|
||||
justify-content: center;
|
||||
padding: 0 4px !important;
|
||||
margin: 1px 4px;
|
||||
|
||||
[matLine],
|
||||
a {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mat-icon,
|
||||
mat-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Full Mode Overrides =====
|
||||
.sidebar-full {
|
||||
.navigation-panel {
|
||||
padding-top: 5%;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.app-sidenav {
|
||||
.icon-menu {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,70 +6,43 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<mat-toolbar class="layout-row" color="primary" id="mifosx-toolbar">
|
||||
@if (!sidenavCollapsed) {
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleSidenav()"
|
||||
matTooltip="{{ 'tooltips.Toggle Hide/Open' | translate }}"
|
||||
tabindex="0"
|
||||
>
|
||||
<fa-icon icon="bars" size="lg"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
|
||||
@if (sidenav.opened) {
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleSidenavCollapse()"
|
||||
matTooltip="{{ 'tooltips.Toggle Collapse' | translate }}"
|
||||
class="hide-lt-md"
|
||||
tabindex="0"
|
||||
>
|
||||
@if (!sidenavCollapsed) {
|
||||
<fa-icon icon="chevron-left"></fa-icon>
|
||||
}
|
||||
@if (sidenavCollapsed) {
|
||||
<fa-icon icon="chevron-right"></fa-icon>
|
||||
}
|
||||
</button>
|
||||
}
|
||||
|
||||
<span class="toolbar-spacer"></span>
|
||||
|
||||
<div #notifications>
|
||||
<mifosx-notifications-tray #notificationsTray class="hide-lt-md" tabindex="0"></mifosx-notifications-tray>
|
||||
<!-- Top Identity Bar -->
|
||||
<div class="top-bar" id="mifosx-toolbar">
|
||||
<!-- Logo -->
|
||||
<div class="t-logo">
|
||||
<div class="t-logomark"><span></span><span></span><span></span><span></span></div>
|
||||
<span class="t-logotext">CBS<em>Nexora</em></span>
|
||||
</div>
|
||||
<div #themeToggle>
|
||||
<mifosx-theme-toggle tabindex="0"></mifosx-theme-toggle>
|
||||
</div>
|
||||
<div #appMenu>
|
||||
<button mat-icon-button class="ml-1 img-button" [matMenuTriggerFor]="applicationMenu" tabindex="0">
|
||||
<img src="assets/images/user_placeholder.png" [alt]="'labels.headings.User Profile' | translate" />
|
||||
</button>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
|
||||
<mat-menu #institutionMenu="matMenu" [overlapTrigger]="false">
|
||||
<button mat-menu-item routerLink="/clients" tabindex="0" *mifosxHasPermission="'READ_CLIENT'">
|
||||
{{ 'labels.menus.Clients' | translate }}
|
||||
</button>
|
||||
<button mat-menu-item routerLink="/groups" tabindex="0" *mifosxHasPermission="'READ_GROUP'">
|
||||
{{ 'labels.menus.Groups' | translate }}
|
||||
</button>
|
||||
<button mat-menu-item routerLink="/centers" tabindex="0" *mifosxHasPermission="'READ_CENTER'">
|
||||
{{ 'labels.menus.Centers' | translate }}
|
||||
</button>
|
||||
<span class="hide-lt-md">
|
||||
<button mat-menu-item [routerLink]="['/accounting']" tabindex="0">
|
||||
{{ 'labels.menus.Accounting' | translate }}
|
||||
</button>
|
||||
<button mat-menu-item [matMenuTriggerFor]="reportsMenu" tabindex="0">
|
||||
{{ 'labels.menus.Reports' | translate }}
|
||||
</button>
|
||||
<button mat-menu-item [matMenuTriggerFor]="adminMenu" tabindex="0">{{ 'labels.menus.Admin' | translate }}</button>
|
||||
</span>
|
||||
</mat-menu>
|
||||
<!-- Meta Chips -->
|
||||
<div class="t-meta">
|
||||
<div class="t-chip"><div class="t-live"></div> LIVE</div>
|
||||
<div class="t-chip">Branch: <strong>HO</strong></div>
|
||||
<div class="t-chip">Date: <strong>{{ today | date:'dd MMM yyyy' }}</strong></div>
|
||||
<div class="t-chip">Last login: <strong>{{ lastLoginTime }}</strong></div>
|
||||
</div>
|
||||
|
||||
<!-- Right Actions -->
|
||||
<div class="t-actions">
|
||||
<div #notifications class="t-action-btn" matTooltip="Notifications">
|
||||
<mifosx-notifications-tray #notificationsTray class="hide-lt-md" tabindex="0"></mifosx-notifications-tray>
|
||||
</div>
|
||||
|
||||
<div class="t-action-btn" [routerLink]="['/settings']" matTooltip="{{ 'tooltips.Settings' | translate }}">
|
||||
<fa-icon icon="cog"></fa-icon>
|
||||
</div>
|
||||
|
||||
<div #themeToggle class="t-action-btn">
|
||||
<mifosx-theme-toggle tabindex="0"></mifosx-theme-toggle>
|
||||
</div>
|
||||
|
||||
<div class="t-divider"></div>
|
||||
|
||||
<div #appMenu class="t-action-btn t-user-btn" [matMenuTriggerFor]="applicationMenu" matTooltip="Account">
|
||||
<img src="assets/images/user_placeholder.png" [alt]="'labels.headings.User Profile' | translate" class="t-user-img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sub Ledger Mega Menu -->
|
||||
@if (subLedgerOpen) {
|
||||
@@ -85,11 +58,7 @@
|
||||
<!-- Transactions -->
|
||||
<div class="subledger-group">
|
||||
<div class="subledger-group-title">Transactions</div>
|
||||
<a
|
||||
class="subledger-link"
|
||||
[class.hidden]="!matchesSearch('Cash / Clearing / Transfer')"
|
||||
(click)="subLedgerOpen = false"
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesSearch('Cash / Clearing / Transfer')" (click)="subLedgerOpen = false">
|
||||
<fa-icon icon="money-bill" class="subledger-icon"></fa-icon> Cash / Clearing / Transfer
|
||||
</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesSearch('Batch Transaction')" (click)="subLedgerOpen = false">
|
||||
@@ -137,12 +106,7 @@
|
||||
<!-- Customer -->
|
||||
<div class="subledger-group">
|
||||
<div class="subledger-group-title">Customer</div>
|
||||
<a
|
||||
class="subledger-link"
|
||||
[class.hidden]="!matchesSearch('Client Master')"
|
||||
routerLink="/clients"
|
||||
(click)="subLedgerOpen = false"
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesSearch('Client Master')" routerLink="/clients" (click)="subLedgerOpen = false">
|
||||
<fa-icon icon="user" class="subledger-icon"></fa-icon> Client Master
|
||||
</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesSearch('Account Master')" (click)="subLedgerOpen = false">
|
||||
@@ -159,18 +123,10 @@
|
||||
<!-- Account Status -->
|
||||
<div class="subledger-group">
|
||||
<div class="subledger-group-title">Account Status</div>
|
||||
<a
|
||||
class="subledger-link"
|
||||
[class.hidden]="!matchesSearch('Inoperative to Operative')"
|
||||
(click)="subLedgerOpen = false"
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesSearch('Inoperative to Operative')" (click)="subLedgerOpen = false">
|
||||
<fa-icon icon="lock-open" class="subledger-icon"></fa-icon> Inoperative → Operative
|
||||
</a>
|
||||
<a
|
||||
class="subledger-link"
|
||||
[class.hidden]="!matchesSearch('Account Status Master')"
|
||||
(click)="subLedgerOpen = false"
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesSearch('Account Status Master')" (click)="subLedgerOpen = false">
|
||||
<fa-icon icon="cog" class="subledger-icon"></fa-icon> Account Status Master
|
||||
</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesSearch('Restrict Account')" (click)="subLedgerOpen = false">
|
||||
@@ -196,11 +152,7 @@
|
||||
<a class="subledger-link" [class.hidden]="!matchesSearch('Holiday Marking')" (click)="subLedgerOpen = false">
|
||||
<fa-icon icon="calendar" class="subledger-icon"></fa-icon> Holiday Marking
|
||||
</a>
|
||||
<a
|
||||
class="subledger-link"
|
||||
[class.hidden]="!matchesSearch('Open Closed Register')"
|
||||
(click)="subLedgerOpen = false"
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesSearch('Open Closed Register')" (click)="subLedgerOpen = false">
|
||||
<fa-icon icon="book-open" class="subledger-icon"></fa-icon> Open Closed Register
|
||||
</a>
|
||||
</div>
|
||||
@@ -221,66 +173,27 @@
|
||||
<div class="subledger-columns">
|
||||
<div class="subledger-group">
|
||||
<div class="subledger-group-title">Financial Statements</div>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Trial Balance')" (click)="glMenuOpen = false"
|
||||
><fa-icon icon="balance-scale" class="subledger-icon"></fa-icon> Trial Balance</a
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Profit and Loss')" (click)="glMenuOpen = false"
|
||||
><fa-icon icon="chart-line" class="subledger-icon"></fa-icon> Profit and Loss</a
|
||||
>
|
||||
<a
|
||||
class="subledger-link"
|
||||
[class.hidden]="!matchesGlSearch('Consolidate Balance Sheet')"
|
||||
(click)="glMenuOpen = false"
|
||||
><fa-icon icon="file-alt" class="subledger-icon"></fa-icon> Consolidate Balance Sheet</a
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Trial Balance')" (click)="glMenuOpen = false"><fa-icon icon="balance-scale" class="subledger-icon"></fa-icon> Trial Balance</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Profit and Loss')" (click)="glMenuOpen = false"><fa-icon icon="chart-line" class="subledger-icon"></fa-icon> Profit and Loss</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Consolidate Balance Sheet')" (click)="glMenuOpen = false"><fa-icon icon="file-alt" class="subledger-icon"></fa-icon> Consolidate Balance Sheet</a>
|
||||
</div>
|
||||
<div class="subledger-group">
|
||||
<div class="subledger-group-title">GL Reports</div>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('GL Average Balance')" (click)="glMenuOpen = false"
|
||||
><fa-icon icon="calculator" class="subledger-icon"></fa-icon> GL Average Balance</a
|
||||
>
|
||||
<a
|
||||
class="subledger-link"
|
||||
[class.hidden]="!matchesGlSearch('GL Mapping for Report')"
|
||||
(click)="glMenuOpen = false"
|
||||
><fa-icon icon="project-diagram" class="subledger-icon"></fa-icon> GL Mapping for Report</a
|
||||
>
|
||||
<a
|
||||
class="subledger-link"
|
||||
[class.hidden]="!matchesGlSearch('Account wise Balance List')"
|
||||
(click)="glMenuOpen = false"
|
||||
><fa-icon icon="list" class="subledger-icon"></fa-icon> Account wise Balance List</a
|
||||
>
|
||||
<a
|
||||
class="subledger-link"
|
||||
[class.hidden]="!matchesGlSearch('Distribution of Balance')"
|
||||
(click)="glMenuOpen = false"
|
||||
><fa-icon icon="chart-pie" class="subledger-icon"></fa-icon> Distribution of Balance</a
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('GL Average Balance')" (click)="glMenuOpen = false"><fa-icon icon="calculator" class="subledger-icon"></fa-icon> GL Average Balance</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('GL Mapping for Report')" (click)="glMenuOpen = false"><fa-icon icon="project-diagram" class="subledger-icon"></fa-icon> GL Mapping for Report</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Account wise Balance List')" (click)="glMenuOpen = false"><fa-icon icon="list" class="subledger-icon"></fa-icon> Account wise Balance List</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Distribution of Balance')" (click)="glMenuOpen = false"><fa-icon icon="chart-pie" class="subledger-icon"></fa-icon> Distribution of Balance</a>
|
||||
</div>
|
||||
<div class="subledger-group">
|
||||
<div class="subledger-group-title">Account Reports</div>
|
||||
<a
|
||||
class="subledger-link"
|
||||
[class.hidden]="!matchesGlSearch('Client wise Balance Report')"
|
||||
(click)="glMenuOpen = false"
|
||||
><fa-icon icon="users" class="subledger-icon"></fa-icon> Client wise Balance Report</a
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Contingent Expense')" (click)="glMenuOpen = false"
|
||||
><fa-icon icon="exclamation-circle" class="subledger-icon"></fa-icon> Contingent Expense</a
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Banker Head Report')" (click)="glMenuOpen = false"
|
||||
><fa-icon icon="university" class="subledger-icon"></fa-icon> Banker Head Report</a
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Client wise Balance Report')" (click)="glMenuOpen = false"><fa-icon icon="users" class="subledger-icon"></fa-icon> Client wise Balance Report</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Contingent Expense')" (click)="glMenuOpen = false"><fa-icon icon="exclamation-circle" class="subledger-icon"></fa-icon> Contingent Expense</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Banker Head Report')" (click)="glMenuOpen = false"><fa-icon icon="university" class="subledger-icon"></fa-icon> Banker Head Report</a>
|
||||
</div>
|
||||
<div class="subledger-group">
|
||||
<div class="subledger-group-title">Registers</div>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Sundry Register')" (click)="glMenuOpen = false"
|
||||
><fa-icon icon="clipboard-list" class="subledger-icon"></fa-icon> Sundry Register</a
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Voucher Register')" (click)="glMenuOpen = false"
|
||||
><fa-icon icon="receipt" class="subledger-icon"></fa-icon> Voucher Register</a
|
||||
>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Sundry Register')" (click)="glMenuOpen = false"><fa-icon icon="clipboard-list" class="subledger-icon"></fa-icon> Sundry Register</a>
|
||||
<a class="subledger-link" [class.hidden]="!matchesGlSearch('Voucher Register')" (click)="glMenuOpen = false"><fa-icon icon="receipt" class="subledger-icon"></fa-icon> Voucher Register</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -423,11 +336,7 @@
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateAdmin, admin)">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(templateConfigWizard, configWizard)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateConfigWizard, configWizard)">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -443,11 +352,7 @@
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateSelfService, selfService)">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(templateNotifications, notifications)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateNotifications, notifications)">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -460,11 +365,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(templateConfigWizard, configWizard)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateConfigWizard, configWizard)">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateThemePicker, themeToggle)">
|
||||
@@ -480,11 +381,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(templateNotifications, notifications)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateNotifications, notifications)">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateAppMenu, appMenu)">
|
||||
|
||||
@@ -6,72 +6,240 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
#mifosx-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
$brand-dark: #0d3d78;
|
||||
$accent: #0ea5e9;
|
||||
$accent-2: #10b981;
|
||||
$top-h: 32px;
|
||||
|
||||
// ===== Top Identity Bar =====
|
||||
.top-bar {
|
||||
height: $top-h;
|
||||
background: $brand-dark;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(
|
||||
108deg, transparent 0, transparent 80px,
|
||||
rgb(255 255 255 / 2.2%) 80px, rgb(255 255 255 / 2.2%) 160px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Logo =====
|
||||
.t-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px 0 14px;
|
||||
border-right: 1px solid rgb(255 255 255 / 11%);
|
||||
height: $top-h;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.t-logomark {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2.5px;
|
||||
|
||||
span {
|
||||
border-radius: 1.5px;
|
||||
|
||||
&:nth-child(1) { background: #fff; }
|
||||
&:nth-child(2) { background: $accent; }
|
||||
&:nth-child(3) { background: $accent-2; }
|
||||
&:nth-child(4) { background: rgb(255 255 255 / 30%); }
|
||||
}
|
||||
}
|
||||
|
||||
.t-logotext {
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.055em;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
min-height: 0;
|
||||
height: 44px;
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: #5ec9f8;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Meta Chips =====
|
||||
.t-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
* {
|
||||
pointer-events: auto;
|
||||
.t-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 0 12px;
|
||||
font-size: 10px;
|
||||
font-family: 'DM Mono', 'Roboto Mono', monospace;
|
||||
color: rgb(255 255 255 / 48%);
|
||||
border-right: 1px solid rgb(255 255 255 / 8%);
|
||||
white-space: nowrap;
|
||||
height: $top-h;
|
||||
flex-shrink: 0;
|
||||
|
||||
strong {
|
||||
color: rgb(255 255 255 / 85%);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.t-live {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: $accent-2;
|
||||
box-shadow: 0 0 0 2.5px rgb(16 185 129 / 25%);
|
||||
}
|
||||
|
||||
// ===== Right Actions — Unified =====
|
||||
$btn-size: 30px;
|
||||
$icon-size: 14px;
|
||||
$icon-color: rgb(255 255 255 / 55%);
|
||||
$icon-hover: #fff;
|
||||
$icon-hover-bg: rgb(255 255 255 / 10%);
|
||||
|
||||
.t-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
height: $top-h;
|
||||
flex-shrink: 0;
|
||||
gap: 2px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.t-divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: rgb(255 255 255 / 12%);
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.t-action-btn {
|
||||
width: $btn-size;
|
||||
height: $btn-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: $icon-color;
|
||||
border-radius: 6px;
|
||||
transition: all 0.15s;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
color: $icon-hover;
|
||||
background: $icon-hover-bg;
|
||||
}
|
||||
|
||||
.mat-mdc-icon-button {
|
||||
color: #fff;
|
||||
// Direct fa-icon (Settings)
|
||||
fa-icon {
|
||||
font-size: $icon-size;
|
||||
}
|
||||
|
||||
.img-button {
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
// Notifications tray — force same size
|
||||
::ng-deep mifosx-notifications-tray {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.mat-mdc-icon-button {
|
||||
width: $btn-size;
|
||||
height: $btn-size;
|
||||
padding: 0;
|
||||
color: $icon-color;
|
||||
line-height: $btn-size;
|
||||
|
||||
&:hover {
|
||||
color: $icon-hover;
|
||||
background: transparent; // parent handles hover bg
|
||||
}
|
||||
|
||||
.mat-icon,
|
||||
mat-icon {
|
||||
font-size: $icon-size;
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
line-height: $icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-badge-content {
|
||||
font-size: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
top: 2px !important;
|
||||
right: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.5rem;
|
||||
// Theme toggle — force same size
|
||||
::ng-deep mifosx-theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
width: $btn-size;
|
||||
height: $btn-size;
|
||||
padding: 0;
|
||||
color: $icon-color;
|
||||
line-height: $btn-size;
|
||||
|
||||
&:hover {
|
||||
color: $icon-hover;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
mat-icon,
|
||||
.mat-icon {
|
||||
font-size: $icon-size;
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
line-height: $icon-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::host-context(.dark-theme) #mifosx-toolbar {
|
||||
// transparent, inherits from sub-menu-bar background
|
||||
// ===== User Button — Same size, round avatar =====
|
||||
.t-user-btn {
|
||||
width: $btn-size;
|
||||
height: $btn-size;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toolbar-spacer {
|
||||
flex: 1 1 auto;
|
||||
.t-user-img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1.5px solid rgb(255 255 255 / 20%);
|
||||
}
|
||||
|
||||
/* Toolbar Deposit Mega Grid */
|
||||
.toolbar-deposit-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px 24px;
|
||||
padding: 8px 12px;
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
.toolbar-deposit-group {
|
||||
.toolbar-deposit-title {
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: #1074b9;
|
||||
padding: 4px 16px 6px;
|
||||
margin-bottom: 2px;
|
||||
border-bottom: 2px solid #1074b9;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sub Ledger Mega Menu */
|
||||
// ===== Sub Ledger Mega Menu =====
|
||||
.subledger-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -82,31 +250,41 @@
|
||||
}
|
||||
|
||||
.subledger-mega-menu {
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
position: fixed;
|
||||
top: 92px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #fff;
|
||||
width: 800px;
|
||||
width: 860px;
|
||||
max-width: 95vw;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0 0 8px 8px;
|
||||
padding: 20px 24px;
|
||||
box-shadow: 0 6px 24px rgb(0 0 0 / 22%);
|
||||
border-radius: 0 0 10px 10px;
|
||||
z-index: 1000;
|
||||
border-top: 3px solid #0d47a1;
|
||||
animation: slideDown 0.13s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
|
||||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
}
|
||||
|
||||
.subledger-search {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #d0d5dd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: #f9fafb;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #1074b9;
|
||||
border-color: #0d47a1;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgb(13 71 161 / 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,30 +295,30 @@
|
||||
}
|
||||
|
||||
.subledger-group-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 2px solid #1074b9;
|
||||
letter-spacing: 0.8px;
|
||||
color: #0d47a1;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 2px solid #0d47a1;
|
||||
}
|
||||
|
||||
.subledger-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 4px;
|
||||
padding: 6px 6px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
color: #344054;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background 0.15s;
|
||||
border-radius: 5px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: #e3f2fd;
|
||||
color: #1074b9;
|
||||
color: #0d47a1;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
@@ -151,6 +329,22 @@
|
||||
.subledger-icon {
|
||||
width: 18px;
|
||||
margin-right: 8px;
|
||||
color: #666;
|
||||
color: #667085;
|
||||
font-size: 13px;
|
||||
|
||||
.subledger-link:hover & {
|
||||
color: #0d47a1;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Responsive =====
|
||||
/* stylelint-disable-next-line media-feature-range-notation -- Safari compatibility */
|
||||
@media (max-width: 768px) {
|
||||
.t-meta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.t-logo {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,6 +102,20 @@ export class ToolbarComponent implements OnInit, AfterViewInit, AfterContentChec
|
||||
/** Sets the initial state of sidenav as collapsed. Not collapsed if false. */
|
||||
sidenavCollapsed = true;
|
||||
|
||||
/** Current date for top bar display */
|
||||
today = new Date();
|
||||
|
||||
/** Last login time display */
|
||||
lastLoginTime = this.formatLastLogin();
|
||||
|
||||
private formatLastLogin(): string {
|
||||
const now = new Date();
|
||||
const h = now.getHours() % 12 || 12;
|
||||
const m = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
|
||||
const ampm = now.getHours() >= 12 ? 'PM' : 'AM';
|
||||
return `Today, ${h}:${m} ${ampm}`;
|
||||
}
|
||||
|
||||
/** Sub Ledger mega menu state */
|
||||
subLedgerOpen = false;
|
||||
subLedgerSearch = '';
|
||||
|
||||
Reference in New Issue
Block a user