From a87cf42c5c68a6022fbe77092db7b5dba720ae6f Mon Sep 17 00:00:00 2001 From: Nitesh Yadav Date: Mon, 12 Oct 2026 11:55:03 +0530 Subject: [PATCH] feat(ui): compact navigation with grouped mega menus and branded loaders Navigation bar (shell.component.html/.scss) - Restyle top-level nav items as compact tabs and add responsive breakpoints (1400px, 1200px, 1080px, 880px) that shrink icon, caret and padding so the full menu fits on smaller laptop screens. - Long labels now carry a short form shown on narrow widths: Loan Origination -> Loans, General Ledger -> GL, Sub Ledger -> Sub GL, Reconciliation -> Recon, Documents Hub -> Docs Hub. - Reports and Insurance menus are regrouped into titled mega panels (reports-mega-panel, insurance-mega-panel) using deposit-menu-group sections instead of one long flat list. - No route was added or removed: all 64 menu links (Account Register, Day Book, End of the Day, Form 97/98, Risk Review, Re-KYC, Dormancy, Savings/FD Interest Posting, TDS, BOR, DIP lookups, digital payment reports, CKYC, DICGC, Clerk Desk, ...) still point to the same routes. Global mega panel styles (main.scss) - Shared grid and overlay styling for every Material mega menu (cdk-overlay-pane with a menu panel) plus a coloured top accent per panel: admin, cashier, clerk, branch-ops, hrm, digital, reports, share, others, npa, letter, insurance, ckyc and reconciliation. - Fixed column layouts for the dense panels (NPA 3 columns, Reconciliation 5 columns, Reports, CKYC). Toolbar (toolbar.component.html/.scss) - User account dropdown gets its own t-user-menu panel style and opens towards the left (xPosition="before") so it no longer clips at the screen edge. - Restyled AI assistant menu cards. Density and products page - Material density lowered from 0 to -1 (mifosx-theme.scss) for a tighter, more data-dense UI. - Products page cards: wider container (1280px), smaller icons, fonts, gaps and padding to match the compact look. Loaders (index.html, loading-screen component) - Boot splash in index.html and the fullscreen mifosx-loading-screen now show the CBS Nexora logo image (assets/images/cbsnexora-logo.png) instead of the generic four-square SVG and text title. Lint clean-up required by the pre-commit hook - Prettier formatting and stylelint auto-fixes (modern rgb() notation, range media queries, shorthand properties, empty lines before rules). - Merged duplicate selectors into their first block without changing the cascade: the second .reports-mega-panel (top accent border) in main.scss and the second ::ng-deep .ai-menu (AI card styles) in toolbar.component.scss. Co-Authored-By: Claude Opus 5.5 --- src/app/core/shell/shell.component.html | 647 ++++++++++-------- src/app/core/shell/shell.component.scss | 321 +++++---- .../core/shell/toolbar/toolbar.component.html | 2 +- .../core/shell/toolbar/toolbar.component.scss | 246 +++++-- src/app/products/products.component.scss | 54 +- .../loading-screen.component.html | 10 +- .../loading-screen.component.scss | 8 + src/index.html | 61 +- src/main.scss | 380 +++++++++- src/theme/mifosx-theme.scss | 2 +- 10 files changed, 1178 insertions(+), 553 deletions(-) diff --git a/src/app/core/shell/shell.component.html b/src/app/core/shell/shell.component.html index 437da9532..bfd79b8ab 100644 --- a/src/app/core/shell/shell.component.html +++ b/src/app/core/shell/shell.component.html @@ -503,7 +503,8 @@ [matMenuTriggerFor]="loanOriginationMenu" *mifosxHasPermission="'MENU_LOAN_ORIGINATION'" > - Loan Origination + Loan OriginationLoans - General Ledger + General LedgerGL - Sub Ledger + Sub LedgerSub GL @@ -583,14 +586,16 @@ [matMenuTriggerFor]="reconciliationMenu" *mifosxHasPermission="'MENU_CONFIG_WIZARD'" > - Reconciliation + ReconciliationRecon Cheque Book - Documents Hub + Documents HubDocs Hub @@ -617,80 +622,89 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + +
+ +
+
Core Reports
+ + + + + + + +
+ + +
+
Operations & Interest
+ + + + + + + +
+ + +
+
Compliance & Registers
+ + + + + + + + +
+
- - - - - - - - + +
+
+
Day Operations
+ + + +
+
+
Verification & Reports
+ + +
+
- - - - - - - - - - - - - - - - + + +
+ +
+
Clerk Desk
+ + + + +
+ + +
+
Vouchers
+ + + + +
+ + +
+
Counter & Reports
+ + + +
+
- - - - - - - - - - - - - - + + +
+ +
+
Cash & Counter
+ + + + +
+ + +
+
Transfers & Settlement
+ + + + + +
+ + +
+
Reports & Audit
+ + + + +
+
-
+
Accounts
- - - - - - - - - - + +
+ +
+
CTS Clearing
+ + + +
+ + +
+
Settlement & Recon
+ + + +
+ + +
+
NACH & Direct
+ + + +
+
-
+
Payroll
@@ -1573,23 +1632,33 @@
- - - - - - - + +
+ +
+
KYC Operations
+ + +
+ + +
+
Reports & Screening
+ + + +
+
+
+
Schemes & Social
+ + + + +
+ + +
+
Institutional & Loans
+ + + + +
+
- - - - - - - + +
+ +
+
Payments
+ + + +
+ + +
+
Cards & Mandates
+ + + +
+
diff --git a/src/app/core/shell/shell.component.scss b/src/app/core/shell/shell.component.scss index 1dc00244e..c752a9d22 100644 --- a/src/app/core/shell/shell.component.scss +++ b/src/app/core/shell/shell.component.scss @@ -266,7 +266,7 @@ $color: #e2e4ec; max-width: 100%; overflow-x: hidden; box-sizing: border-box; - padding: 16px 28px; + padding: 10px 18px; } } @@ -282,21 +282,15 @@ $gray-700: #334155; /* ============================================================ Main header (top 2-row navigation) -------------------------------------------------------------- - Redesigned 2026 — clean, modern enterprise SaaS feel: - • Both rows live on the same white surface separated only by a - hairline; r2 has a barely-there blue-50 wash so frequent vs - secondary menus read at a glance without dark/light contrast. - • Items are now equal-width "tabs" with NO vertical dividers - between them (the old cell borders made it look spreadsheet-y). - • Hover / active = a 3 px brand-coloured TOP bar + brand text + - coloured icon. Reads instantly without colour-flooding the row. - • Icons larger (12.5 px) and full-opacity always — easier to scan - during demos. Caret is subtle and rotates on open. + Compact, modern enterprise SaaS navigation: + • Height reduced to 32px per row (64px total) to save screen space. + • Smooth horizontal scrolling prevents menu items from getting cut off. + • Compact typography, icons and paddings fit all banking modules cleanly. ============================================================ */ .main-header { background: #fff; - border-bottom: 2.5px solid $brand; - box-shadow: 0 1px 4px rgb(0 0 0 / 7%); + border-bottom: 2px solid $brand; + box-shadow: 0 1px 3px rgb(0 0 0 / 6%); position: sticky; /* Sit directly under the sticky toolbar (32px tall) so both stay visible. */ @@ -306,19 +300,19 @@ $gray-700: #334155; } .nav-row { - height: 44px; + height: 32px; display: flex; align-items: stretch; - overflow: visible; + overflow: auto visible; position: relative; - - /* Outer frame; vertical dividers between cells are drawn as `border-right` - on each `.ni` below. Switched away from the equal-column grid so each - cell can size to its own label — long names (General Ledger, Documents - Hub) no longer overflow and short ones (Approvals, HRM) no longer waste - space. */ border: 1px solid $gray-200; background: #fff; + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } } .r2.nav-row { @@ -334,25 +328,17 @@ $gray-700: #334155; background: #f8fafc; } -// ===== Nav Item — modern tab style ===== -// Typography spec — same family / size / weight / color for BOTH rows. +// ===== Nav Item — compact modern tab style ===== .ni { position: relative; display: inline-flex; align-items: center; justify-content: center; - gap: 7px; + gap: 2.5px; height: 100%; - - /* Each cell sizes to its own label (min-width: max-content) and grows - to share any leftover row width. Short labels stay compact, long ones - get the room they need — no overlap, no wasted gap. */ flex: 1 0 auto; - min-width: max-content; - padding: 0 14px; - - /* Vertical divider between adjacent cells; outer frame is the row's - own border, and the last cell drops its right border below. */ + min-width: 0; + padding: 0 4px; border-right: 1px solid $gray-200; cursor: pointer; white-space: nowrap; @@ -360,11 +346,11 @@ $gray-700: #334155; 'IBM Plex Sans', -apple-system, sans-serif; - font-size: 12px; + font-size: 10px; font-weight: 500; color: #0a1a2e; - line-height: 1.3; - letter-spacing: 0.01em; + line-height: 1.2; + letter-spacing: -0.015em; text-decoration: none; user-select: none; transition: @@ -373,17 +359,15 @@ $gray-700: #334155; box-shadow 0.15s ease; border-radius: 0; - /* 3px accent strip that fills on hover / active (uses ::before so we - don't reflow the row when toggling). */ &::before { content: ''; position: absolute; - left: 4px; - right: 4px; + left: 2px; + right: 2px; top: 0; - height: 3px; + height: 2px; background: transparent; - border-radius: 0 0 3px 3px; + border-radius: 0 0 2px 2px; transition: background 0.15s ease; } @@ -410,17 +394,19 @@ $gray-700: #334155; outline-offset: -2px; } - /* Last cell in a row sits flush against the row's own right edge, so - drop its divider to avoid a double 2 px line. */ &:last-child { border-right: none; } + + .ni-short { + display: none; + } } .ni-ico { - width: 12px; - height: 12px; - font-size: 12px; + width: 9.5px; + height: 9.5px; + font-size: 9.5px; color: $gray-500; flex-shrink: 0; transition: color 0.15s ease; @@ -432,11 +418,12 @@ $gray-700: #334155; } .ni-caret { - width: 7px; - height: 7px; - font-size: 7px; + width: 5px; + height: 5px; + font-size: 5px; color: $gray-400; flex-shrink: 0; + margin-left: 0.5px; transition: transform 0.18s ease, color 0.18s ease; @@ -447,17 +434,89 @@ $gray-700: #334155; } } -@media (width <= 1200px) { +@media (width >= 1400px) { .ni { - padding: 0 8px; - gap: 5px; + padding: 0 6px; + gap: 3.5px; + font-size: 10.8px; + letter-spacing: 0; + } + + .ni-ico { + width: 10px; + height: 10px; + font-size: 10px; + } + + .ni-caret { + width: 5.5px; + height: 5.5px; + font-size: 5.5px; + margin-left: 1px; } } -@media (width <= 980px) { +@media (width <= 1200px) { .ni { + padding: 0 3px; + gap: 2px; + font-size: 9.8px; + letter-spacing: -0.02em; + } + + .ni-ico { + width: 9px; + height: 9px; + font-size: 9px; + } + + .ni-caret { + width: 4.5px; + height: 4.5px; + font-size: 4.5px; + } +} + +@media (width <= 1080px) { + .ni { + padding: 0 2.5px; + gap: 1.5px; + font-size: 9.4px; + letter-spacing: -0.025em; + + .ni-full { + display: none; + } + + .ni-short { + display: inline; + } + } + + .ni-ico { + width: 8.5px; + height: 8.5px; + font-size: 8.5px; + } + + .ni-caret { + width: 4px; + height: 4px; + font-size: 4px; + } +} + +@media (width <= 880px) { + .nav-row { + overflow-x: auto; + scrollbar-width: thin; + } + + .ni { + flex: 0 0 auto; padding: 0 6px; - gap: 4px; + gap: 3px; + font-size: 10px; } } @@ -699,21 +758,29 @@ $gray-700: #334155; // ===== Nav Dropdown Menus ===== ::ng-deep .nav-dropdown { - border-radius: 8px !important; + border-radius: 6px !important; border: 1px solid $gray-200 !important; - box-shadow: 0 6px 24px rgb(0 0 0 / 10%) !important; - min-width: 180px !important; - padding: 4px 0 !important; - margin-top: 2px !important; + box-shadow: 0 4px 16px rgb(0 0 0 / 12%) !important; + min-width: 170px !important; + padding: 3px 0 !important; + margin-top: 1px !important; .mat-mdc-menu-item { - font-size: 12.5px !important; + font-size: 10.5px !important; font-weight: 500 !important; - height: 34px !important; - min-height: 34px !important; - padding: 0 14px !important; + height: 25px !important; + min-height: 25px !important; + padding: 0 6px !important; + line-height: 25px !important; color: $gray-700 !important; - font-family: 'DM Sans', Roboto, sans-serif !important; + font-family: 'IBM Plex Sans', Roboto, sans-serif !important; + white-space: nowrap !important; + + .menu-item-icon { + font-size: 10.5px !important; + margin-right: 5px !important; + opacity: 0.8; + } &:hover { background: $brand-hover !important; @@ -728,39 +795,44 @@ $gray-700: #334155; } /* Deposits Mega Panel (inside mat-menu overlay) */ -.deposit-menu-grid { +::ng-deep .deposit-menu-grid { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 8px 24px; - padding: 8px 12px; - min-width: 600px; + gap: 4px 12px; + padding: 6px 10px; + min-width: 0; + width: 100%; + box-sizing: border-box; + overflow-x: hidden; } -.deposit-menu-group { +::ng-deep .deposit-menu-group { .deposit-group-title { font-weight: 700; - font-size: 11px; + font-size: 9.5px; text-transform: uppercase; - letter-spacing: 0.6px; + letter-spacing: 0.5px; color: #1074b9; - padding: 4px 16px 6px; + padding: 2px 6px 3px; margin-bottom: 2px; - border-bottom: 2px solid #1074b9; + border-bottom: 1.5px solid #1074b9; + white-space: nowrap; } } -/* NPA Mega Panel — 4 columns (Reports / Analysis / Classification / Recovery Management) */ -.npa-grid { - grid-template-columns: repeat(4, minmax(200px, 1fr)); - min-width: 880px; - max-width: 96vw; +/* NPA Mega Panel — 3 columns */ +::ng-deep .npa-grid { + grid-template-columns: repeat(3, minmax(210px, 1fr)); + min-width: 0; + max-width: 100%; + overflow-x: hidden; } -/* Reconciliation Mega Panel — 5 columns, teal accent to match the icon palette */ -.reconciliation-grid { - grid-template-columns: repeat(5, minmax(190px, 1fr)); - min-width: 1040px; - max-width: 96vw; +/* Reconciliation Mega Panel — 5 columns */ +::ng-deep .reconciliation-grid { + grid-template-columns: repeat(5, minmax(170px, 1fr)); + min-width: 0; + max-width: 100%; + overflow-x: hidden; .deposit-group-title { color: #0d9488; @@ -780,47 +852,49 @@ $gray-700: #334155; .gl-mega-menu { position: absolute; - top: 100px; + top: 96px; left: 50%; transform: translateX(-50%); background: #fff; - width: 860px; - max-width: 95vw; - padding: 20px 24px; - box-shadow: 0 6px 24px rgb(0 0 0 / 22%); - border-radius: 0 0 10px 10px; + width: 760px; + max-width: 94vw; + max-height: 72vh; + overflow-y: auto; + padding: 12px 16px; + box-shadow: 0 6px 20px rgb(0 0 0 / 18%); + border-radius: 0 0 8px 8px; z-index: 1000; - border-top: 3px solid #0d47a1; + border-top: 2.5px solid #0d47a1; } .gl-mega-menu-header { display: flex; align-items: center; - gap: 10px; - margin-bottom: 14px; - padding-bottom: 12px; + gap: 8px; + margin-bottom: 8px; + padding-bottom: 6px; border-bottom: 1px solid #e5e7eb; span { - font-size: 18px; + font-size: 14px; font-weight: 700; color: #0d47a1; - letter-spacing: 0.02em; + letter-spacing: 0.01em; } } .gl-mega-menu-header-icon { - font-size: 18px; + font-size: 14px; color: #0d47a1; } .gl-search { width: 100%; - padding: 10px 14px; - margin-bottom: 16px; + padding: 6px 10px; + margin-bottom: 10px; border: 1px solid #d0d5dd; - border-radius: 6px; - font-size: 14px; + border-radius: 5px; + font-size: 12px; box-sizing: border-box; background: #f9fafb; @@ -828,36 +902,37 @@ $gray-700: #334155; outline: none; border-color: #0d47a1; background: #fff; - box-shadow: 0 0 0 3px rgb(13 71 161 / 10%); + box-shadow: 0 0 0 2px rgb(13 71 161 / 10%); } } .gl-columns { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 24px; + gap: 10px 16px; } .gl-group-title { font-weight: 700; - font-size: 11px; + font-size: 10px; text-transform: uppercase; - letter-spacing: 0.8px; + letter-spacing: 0.6px; color: #0d47a1; - margin-bottom: 10px; - padding-bottom: 6px; - border-bottom: 2px solid #0d47a1; + margin-bottom: 5px; + padding-bottom: 3px; + border-bottom: 1.5px solid #0d47a1; } .gl-link { display: flex; align-items: center; - padding: 7px 6px; + padding: 3.5px 5px; text-decoration: none; color: #344054; - font-size: 13px; + font-size: 11.5px; + line-height: 1.3; cursor: pointer; - border-radius: 5px; + border-radius: 4px; transition: background 0.15s, color 0.15s; @@ -873,23 +948,21 @@ $gray-700: #334155; } .gl-icon { - width: 18px; - margin-right: 8px; + width: 14px; + margin-right: 5px; color: #667085; - font-size: 13px; + font-size: 11px; + flex-shrink: 0; .gl-link:hover & { color: #0d47a1; } } -// Marks a menu link as actually wired to a working screen/dialog (vs a still-unwired -// placeholder) — a small green dot at the end of the row, so a reviewer can tell at a glance -// which items in a mega-menu are functional without having to click every one of them. .gl-link--live::after { content: ''; - width: 6px; - height: 6px; + width: 5px; + height: 5px; margin-left: auto; flex-shrink: 0; border-radius: 50%; @@ -899,9 +972,9 @@ $gray-700: #334155; /* RBI Mega Menu */ .rbi-mega-menu { - width: 1100px; - max-width: 97vw; - max-height: 80vh; + width: 880px; + max-width: 94vw; + max-height: 72vh; overflow-y: auto; border-top-color: #b71c1c; } @@ -909,7 +982,7 @@ $gray-700: #334155; .rbi-columns { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 20px; + gap: 10px 16px; } @keyframes move { diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html index 947cb6e68..46a9edad8 100644 --- a/src/app/core/shell/toolbar/toolbar.component.html +++ b/src/app/core/shell/toolbar/toolbar.component.html @@ -522,7 +522,7 @@ - +