CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): compact navigation with grouped mega menus and branded loaders

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
nitesh
2026-10-12 11:55:03 +05:30
co-authored by Claude Opus 5.5
parent 3928936b93
commit a87cf42c5c
10 changed files with 1178 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/core/shell/shell.component.html
+369 -278
View File
@@ -503,7 +503,8 @@
[matMenuTriggerFor]="loanOriginationMenu" [matMenuTriggerFor]="loanOriginationMenu"
*mifosxHasPermission="'MENU_LOAN_ORIGINATION'" *mifosxHasPermission="'MENU_LOAN_ORIGINATION'"
> >
<fa-icon icon="clipboard-check" class="ni-ico"></fa-icon>Loan Origination <fa-icon icon="clipboard-check" class="ni-ico"></fa-icon><span class="ni-full">Loan Origination</span
><span class="ni-short">Loans</span>
<fa-icon icon="caret-down" class="ni-caret"></fa-icon> <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a> </a>
<a <a
@@ -512,7 +513,8 @@
(click)="glMenuOpen = !glMenuOpen; subLedgerOpen = false" (click)="glMenuOpen = !glMenuOpen; subLedgerOpen = false"
*mifosxHasPermission="'MENU_GENERAL_LEDGER'" *mifosxHasPermission="'MENU_GENERAL_LEDGER'"
> >
<fa-icon icon="book-open" class="ni-ico"></fa-icon>General Ledger <fa-icon icon="book-open" class="ni-ico"></fa-icon><span class="ni-full">General Ledger</span
><span class="ni-short">GL</span>
<fa-icon [icon]="glMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon> <fa-icon [icon]="glMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
</a> </a>
<a <a
@@ -521,7 +523,8 @@
(click)="subLedgerOpen = !subLedgerOpen; glMenuOpen = false" (click)="subLedgerOpen = !subLedgerOpen; glMenuOpen = false"
*mifosxHasPermission="'MENU_SUB_LEDGER'" *mifosxHasPermission="'MENU_SUB_LEDGER'"
> >
<fa-icon icon="book" class="ni-ico"></fa-icon>Sub Ledger <fa-icon icon="book" class="ni-ico"></fa-icon><span class="ni-full">Sub Ledger</span
><span class="ni-short">Sub GL</span>
<fa-icon [icon]="subLedgerOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon> <fa-icon [icon]="subLedgerOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
</a> </a>
</div> </div>
@@ -583,14 +586,16 @@
[matMenuTriggerFor]="reconciliationMenu" [matMenuTriggerFor]="reconciliationMenu"
*mifosxHasPermission="'MENU_CONFIG_WIZARD'" *mifosxHasPermission="'MENU_CONFIG_WIZARD'"
> >
<fa-icon icon="sync-alt" class="ni-ico"></fa-icon>Reconciliation <fa-icon icon="sync-alt" class="ni-ico"></fa-icon><span class="ni-full">Reconciliation</span
><span class="ni-short">Recon</span>
<fa-icon icon="caret-down" class="ni-caret"></fa-icon> <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a> </a>
<a class="ni" tabindex="0" routerLink="/chequebook" *mifosxHasPermission="'MENU_CHEQUEBOOK'"> <a class="ni" tabindex="0" routerLink="/chequebook" *mifosxHasPermission="'MENU_CHEQUEBOOK'">
<fa-icon icon="book" class="ni-ico"></fa-icon>Cheque Book <fa-icon icon="book" class="ni-ico"></fa-icon>Cheque Book
</a> </a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="letterMgmtMenu" *mifosxHasPermission="'MENU_LETTER_MGMT'"> <a class="ni" tabindex="0" [matMenuTriggerFor]="letterMgmtMenu" *mifosxHasPermission="'MENU_LETTER_MGMT'">
<fa-icon icon="envelope" class="ni-ico"></fa-icon>Documents Hub <fa-icon icon="envelope" class="ni-ico"></fa-icon><span class="ni-full">Documents Hub</span
><span class="ni-short">Docs Hub</span>
<fa-icon icon="caret-down" class="ni-caret"></fa-icon> <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a> </a>
</div> </div>
@@ -617,80 +622,89 @@
</button> </button>
</mat-menu> </mat-menu>
<mat-menu #reportsMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown"> <mat-menu #reportsMenu="matMenu" class="reports-mega-panel" [overlapTrigger]="false">
<button mat-menu-item [routerLink]="['/branch-ops/account-register']" tabindex="0"> <div class="deposit-menu-grid reports-grid" (click)="$event.stopPropagation()">
<i class="fa fa-book menu-item-icon"></i> Account Register <!-- Core Reports -->
</button> <div class="deposit-menu-group">
<button mat-menu-item [routerLink]="['/reports']" tabindex="0"> <div class="deposit-group-title">Core Reports</div>
<i class="fa fa-th-list menu-item-icon"></i> All Reports <button mat-menu-item [routerLink]="['/branch-ops/account-register']" tabindex="0">
</button> <i class="fa fa-book menu-item-icon"></i> Account Register
<button mat-menu-item [routerLink]="['/reports', 'Client']" tabindex="0"> </button>
<i class="fa fa-user menu-item-icon"></i> Clients <button mat-menu-item [routerLink]="['/reports']" tabindex="0">
</button> <i class="fa fa-th-list menu-item-icon"></i> All Reports
<button mat-menu-item [routerLink]="['/reports', 'Loan']" tabindex="0"> </button>
<i class="fa fa-credit-card menu-item-icon"></i> Loans <button mat-menu-item [routerLink]="['/reports', 'Client']" tabindex="0">
</button> <i class="fa fa-user menu-item-icon"></i> Clients
<button mat-menu-item [routerLink]="['/reports', 'Savings']" tabindex="0"> </button>
<i class="fa fa-piggy-bank menu-item-icon"></i> Savings <button mat-menu-item [routerLink]="['/reports', 'Loan']" tabindex="0">
</button> <i class="fa fa-credit-card menu-item-icon"></i> Loans
<button mat-menu-item [routerLink]="['/reports', 'Fund']" tabindex="0"> </button>
<i class="fa fa-hand-holding-usd menu-item-icon"></i> Funds <button mat-menu-item [routerLink]="['/reports', 'Savings']" tabindex="0">
</button> <i class="fa fa-piggy-bank menu-item-icon"></i> Savings
<button mat-menu-item [routerLink]="['/reports', 'Accounting']" tabindex="0"> </button>
<i class="fa fa-calculator menu-item-icon"></i> Accounting <button mat-menu-item [routerLink]="['/reports', 'Fund']" tabindex="0">
</button> <i class="fa fa-hand-holding-usd menu-item-icon"></i> Funds
<mat-divider></mat-divider> </button>
<!-- Listed here as well as under Branch Ops: an officer looking for the day's figures reaches <button mat-menu-item [routerLink]="['/reports', 'Accounting']" tabindex="0">
for Reports, and the same screen answers both. --> <i class="fa fa-calculator menu-item-icon"></i> Accounting
<button mat-menu-item routerLink="/branch-ops/day-book" tabindex="0"> </button>
<i class="fa fa-book menu-item-icon"></i> Day Book &amp; Officer Verification </div>
</button>
<button mat-menu-item routerLink="/branch-ops/end-of-day" tabindex="0"> <!-- Operations & Interest -->
<i class="fa fa-clipboard-check menu-item-icon"></i> End of the Day Report <div class="deposit-menu-group">
</button> <div class="deposit-group-title">Operations &amp; Interest</div>
<button mat-menu-item routerLink="/reports/form-97-98" tabindex="0"> <button mat-menu-item routerLink="/branch-ops/day-book" tabindex="0">
<i class="fa fa-file-invoice menu-item-icon"></i> Form 97/98 Transaction Report <i class="fa fa-book menu-item-icon"></i> Day Book &amp; Officer Verification
</button> </button>
<button mat-menu-item routerLink="/reports/risk-review" tabindex="0"> <button mat-menu-item routerLink="/branch-ops/end-of-day" tabindex="0">
<i class="fa fa-user-shield menu-item-icon"></i> Risk Review Report <i class="fa fa-clipboard-check menu-item-icon"></i> End of the Day Report
</button> </button>
<button mat-menu-item routerLink="/reports/kyc-expiry" tabindex="0"> <button mat-menu-item routerLink="/reports/savings-interest" tabindex="0">
<i class="fa fa-id-card menu-item-icon"></i> Re-KYC Expiry &amp; Outreach <i class="fa fa-percentage menu-item-icon"></i> Savings Interest Posted
</button> </button>
<button mat-menu-item routerLink="/reports/dormancy" tabindex="0"> <button mat-menu-item routerLink="/reports/interest-posting" tabindex="0">
<i class="fa fa-hourglass-half menu-item-icon"></i> Inactive, Dormant &amp; DEAF <i class="fa fa-clipboard-check menu-item-icon"></i> Interest Posting Reports
</button> </button>
<button mat-menu-item routerLink="/reports/savings-interest" tabindex="0"> <button mat-menu-item routerLink="/reports/fd-interest-posting" tabindex="0">
<i class="fa fa-percentage menu-item-icon"></i> Savings Interest Posted <i class="fa fa-clipboard-check menu-item-icon"></i> FD Interest Posting Reports
</button> </button>
<button mat-menu-item routerLink="/reports/interest-posting" tabindex="0"> <button mat-menu-item routerLink="/reports/interest-posting-summary" tabindex="0">
<i class="fa fa-clipboard-check menu-item-icon"></i> Interest Posting Reports <i class="fa fa-table menu-item-icon"></i> Interest Posting Summary (Branch-wise)
</button> </button>
<button mat-menu-item routerLink="/reports/fd-interest-posting" tabindex="0"> <button mat-menu-item routerLink="/reports/tds-interest" tabindex="0">
<i class="fa fa-clipboard-check menu-item-icon"></i> FD Interest Posting Reports <i class="fa fa-percent menu-item-icon"></i> Deposit Interest &amp; TDS
</button> </button>
<button mat-menu-item routerLink="/reports/interest-posting-summary" tabindex="0"> </div>
<i class="fa fa-table menu-item-icon"></i> Interest Posting Summary (Branch-wise)
</button> <!-- Compliance & Registers -->
<!-- <div class="deposit-menu-group">
The Principal Officer clears flagged UNSC screenings here. It is not a runnable report, <div class="deposit-group-title">Compliance &amp; Registers</div>
so it never shows up under the report categories above and had no nav entry at all. <button mat-menu-item routerLink="/reports/form-97-98" tabindex="0">
--> <i class="fa fa-file-invoice menu-item-icon"></i> Form 97/98 Transaction Report
<button mat-menu-item routerLink="/reports/sanctions-logs" tabindex="0"> </button>
<i class="fa fa-shield-alt menu-item-icon"></i> Sanctions Screening &amp; Alerts <button mat-menu-item routerLink="/reports/risk-review" tabindex="0">
</button> <i class="fa fa-user-shield menu-item-icon"></i> Risk Review Report
<button mat-menu-item routerLink="/reports/dip-lookups" tabindex="0"> </button>
<i class="fa fa-satellite-dish menu-item-icon"></i> DIP / MNRL Mobile Lookups <button mat-menu-item routerLink="/reports/kyc-expiry" tabindex="0">
</button> <i class="fa fa-id-card menu-item-icon"></i> Re-KYC Expiry &amp; Outreach
<button mat-menu-item routerLink="/reports/tds-interest" tabindex="0"> </button>
<i class="fa fa-percent menu-item-icon"></i> Deposit Interest &amp; TDS <button mat-menu-item routerLink="/reports/dormancy" tabindex="0">
</button> <i class="fa fa-hourglass-half menu-item-icon"></i> Inactive, Dormant &amp; DEAF
<button mat-menu-item routerLink="/reports/tds-remittance" tabindex="0"> </button>
<i class="fa fa-landmark menu-item-icon"></i> TDS Remitted to Government <button mat-menu-item routerLink="/reports/sanctions-logs" tabindex="0">
</button> <i class="fa fa-shield-alt menu-item-icon"></i> Sanctions Screening &amp; Alerts
<button mat-menu-item routerLink="/reports/bor" tabindex="0"> </button>
<i class="fa fa-gavel menu-item-icon"></i> BOR Register &mdash; Share Capital <button mat-menu-item routerLink="/reports/dip-lookups" tabindex="0">
</button> <i class="fa fa-satellite-dish menu-item-icon"></i> DIP / MNRL Mobile Lookups
</button>
<button mat-menu-item routerLink="/reports/tds-remittance" tabindex="0">
<i class="fa fa-landmark menu-item-icon"></i> TDS Remitted to Government
</button>
<button mat-menu-item routerLink="/reports/bor" tabindex="0">
<i class="fa fa-gavel menu-item-icon"></i> BOR Register &mdash; Share Capital
</button>
</div>
</div>
</mat-menu> </mat-menu>
<!-- Admin Mega Menu — 3-column rectangular panel grouping Setup, <!-- Admin Mega Menu — 3-column rectangular panel grouping Setup,
@@ -1063,121 +1077,146 @@
<!-- Sub Menu Dropdowns --> <!-- Sub Menu Dropdowns -->
<!-- Branch-level operations. Starts with the day register; other branch-wide controls belong <!-- Branch-level operations. Starts with the day register; other branch-wide controls belong
here rather than under Cashier, which is one role's workspace. --> here rather than under Cashier, which is one role's workspace. -->
<mat-menu #branchOpsMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown"> <mat-menu #branchOpsMenu="matMenu" class="branch-ops-mega-panel" [overlapTrigger]="false">
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-register']"> <div class="deposit-menu-grid branch-ops-grid" (click)="$event.stopPropagation()">
<fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> Day Open / Day Close <div class="deposit-menu-group">
</button> <div class="deposit-group-title">Day Operations</div>
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/missed-close']"> <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-register']">
<fa-icon icon="exclamation-triangle" class="menu-item-icon"></fa-icon> Missed Close Register <fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> Day Open / Day Close
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/vault-position']"> <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/missed-close']">
<fa-icon icon="lock" class="menu-item-icon"></fa-icon> Vault Position <fa-icon icon="exclamation-triangle" class="menu-item-icon"></fa-icon> Missed Close Register
</button> </button>
<!-- The day book carries the Officer Verification Sheet — each person's credit, debit and net <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/vault-position']">
for the day. It was reachable only from the Clerk and Cashier menus, which is the one <fa-icon icon="lock" class="menu-item-icon"></fa-icon> Vault Position
place a principal officer signing the day off does not look. --> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-book']"> </div>
<fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book &amp; Verification <div class="deposit-menu-group">
</button> <div class="deposit-group-title">Verification &amp; Reports</div>
<!-- The signed sheet, as against the day book's working list: the day's modes, the drawer <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-book']">
against the books, and what is still open. This is what goes in the file. --> <fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book &amp; Verification
<button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/end-of-day']"> </button>
<fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/end-of-day']">
</button> <fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report
</button>
</div>
</div>
</mat-menu> </mat-menu>
<!-- Clerk was a bare link straight into the fullscreen dashboard, which left the clerk's other <!-- Clerk Desk -->
screens reachable only from inside that fullscreen nav. Anything a clerk needs from the <mat-menu #clerkMenu="matMenu" class="clerk-mega-panel" [overlapTrigger]="false">
normal shell — an open voucher exception above all — belongs here. --> <div class="deposit-menu-grid clerk-grid" (click)="$event.stopPropagation()">
<mat-menu #clerkMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown"> <!-- Clerk Desk -->
<button mat-menu-item tabindex="0" routerLink="/clerk/dashboard" (click)="hideShellLayout = true"> <div class="deposit-menu-group">
<fa-icon icon="id-card" class="menu-item-icon"></fa-icon> Clerk Dashboard <div class="deposit-group-title">Clerk Desk</div>
</button> <button mat-menu-item tabindex="0" routerLink="/clerk/dashboard" (click)="hideShellLayout = true">
<!-- The clerk reads the day as a sheet to sign off, not as a working list of vouchers: the <fa-icon icon="id-card" class="menu-item-icon"></fa-icon> Clerk Dashboard
day's summary, the counter counted against the books, and what is still open. The day </button>
book's own row-by-row view stays reachable from Branch Ops and from the Cashier menu. --> <button mat-menu-item tabindex="0" [routerLink]="['/clerk/withdrawal-requests']">
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/end-of-day']"> <fa-icon icon="money-bill-wave" class="menu-item-icon"></fa-icon> My Withdrawal Requests
<fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-disbursement-requests']">
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/withdrawal-requests']"> <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Disbursements &amp; Transfer
<fa-icon icon="money-bill-wave" class="menu-item-icon"></fa-icon> My Withdrawal Requests </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/clerk/dividend-dashboard']">
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-disbursement-requests']"> <fa-icon icon="chart-pie" class="menu-item-icon"></fa-icon> Dividend Dashboard
<fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Disbursements &amp; Transfer </button>
</button> </div>
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/dividend-dashboard']">
<fa-icon icon="chart-pie" class="menu-item-icon"></fa-icon> Dividend Dashboard <!-- Vouchers -->
</button> <div class="deposit-menu-group">
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-work']"> <div class="deposit-group-title">Vouchers</div>
<fa-icon icon="user-check" class="menu-item-icon"></fa-icon> My Vouchers <button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-work']">
</button> <fa-icon icon="user-check" class="menu-item-icon"></fa-icon> My Vouchers
<!-- Sits under My Vouchers because it answers the same question for the one worker who has no </button>
own list: the system. A nightly run belongs to nobody, so it appears on no person's page. --> <button mat-menu-item tabindex="0" [routerLink]="['/clerk/system-vouchers']">
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/system-vouchers']"> <fa-icon icon="robot" class="menu-item-icon"></fa-icon> System Vouchers
<fa-icon icon="robot" class="menu-item-icon"></fa-icon> System Vouchers </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/clerk/received-report']">
<!-- A clerk supervises the counter, so they need to see what each cashier is holding and what <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Received Vouchers
went through their drawer. Both screens already return every cashier for a non-cashier </button>
caller (CashierRoleHelper scopes only a cashier to themselves) — they were simply not <button mat-menu-item tabindex="0" [routerLink]="['/clerk/payment-report']">
reachable from this menu. --> <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Payment Vouchers
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']"> </button>
<fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position </div>
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']"> <!-- Counter & Reports -->
<fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Closing Cash Report <div class="deposit-menu-group">
</button> <div class="deposit-group-title">Counter &amp; Reports</div>
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/received-report']"> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']">
<fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Received Vouchers <fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/payment-report']"> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']">
<fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Payment Vouchers <fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Closing Cash Report
</button> </button>
<button mat-menu-item tabindex="0" [routerLink]="['/clerk/end-of-day']">
<fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report
</button>
</div>
</div>
</mat-menu> </mat-menu>
<mat-menu #cashierMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown"> <!-- Cashier Desk -->
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-exchange']"> <mat-menu #cashierMenu="matMenu" class="cashier-mega-panel" [overlapTrigger]="false">
<fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Cash Exchange Entry <div class="deposit-menu-grid cashier-grid" (click)="$event.stopPropagation()">
</button> <!-- Cash Entries & Exchange -->
<button mat-menu-item tabindex="0" [routerLink]="['/system/denomination-master']"> <div class="deposit-menu-group">
<fa-icon icon="coins" class="menu-item-icon"></fa-icon> Cash Denomination <div class="deposit-group-title">Cash &amp; Counter</div>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-exchange']">
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']"> <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Cash Exchange Entry
<fa-icon icon="file-alt" class="menu-item-icon"></fa-icon> Closing Cash Report </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/exchange-detail']">
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/exchange-detail']"> <fa-icon icon="globe" class="menu-item-icon"></fa-icon> Currency Exchange Detail
<fa-icon icon="globe" class="menu-item-icon"></fa-icon> Currency Exchange Detail </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/cashier/transaction-entry']">
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-transfer']"> <fa-icon icon="keyboard" class="menu-item-icon"></fa-icon> Transaction Entry
<fa-icon icon="random" class="menu-item-icon"></fa-icon> Cash Transfer </button>
</button> <button mat-menu-item tabindex="0" [routerLink]="['/system/denomination-master']">
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/excess-report']"> <fa-icon icon="coins" class="menu-item-icon"></fa-icon> Cash Denomination
<fa-icon icon="exclamation-circle" class="menu-item-icon"></fa-icon> Excess Transaction Report </button>
</button> </div>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-settlement']">
<fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Cash Settlement <!-- Transfers & Settlement -->
</button> <div class="deposit-menu-group">
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/inter-cashier']"> <div class="deposit-group-title">Transfers &amp; Settlement</div>
<fa-icon icon="exchange-alt" class="menu-item-icon"></fa-icon> Inter-Cashier Transfer <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-transfer']">
</button> <fa-icon icon="random" class="menu-item-icon"></fa-icon> Cash Transfer
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']"> </button>
<fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position <button mat-menu-item tabindex="0" [routerLink]="['/cashier/inter-cashier']">
</button> <fa-icon icon="exchange-alt" class="menu-item-icon"></fa-icon> Inter-Cashier Transfer
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/reconciliation']"> </button>
<fa-icon icon="balance-scale" class="menu-item-icon"></fa-icon> Reconciliation <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-settlement']">
</button> <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Cash Settlement
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-history']"> </button>
<fa-icon icon="history" class="menu-item-icon"></fa-icon> Cash History <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']">
</button> <fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/day-book']"> </button>
<fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book <button mat-menu-item tabindex="0" [routerLink]="['/cashier/day-book']">
</button> <fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/transaction-entry']"> </button>
<fa-icon icon="keyboard" class="menu-item-icon"></fa-icon> Transaction Entry </div>
</button>
<!-- Reports & Audit -->
<div class="deposit-menu-group">
<div class="deposit-group-title">Reports &amp; Audit</div>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']">
<fa-icon icon="file-alt" class="menu-item-icon"></fa-icon> Closing Cash Report
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/excess-report']">
<fa-icon icon="exclamation-circle" class="menu-item-icon"></fa-icon> Excess Transaction Report
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/reconciliation']">
<fa-icon icon="balance-scale" class="menu-item-icon"></fa-icon> Reconciliation
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-history']">
<fa-icon icon="history" class="menu-item-icon"></fa-icon> Cash History
</button>
</div>
</div>
</mat-menu> </mat-menu>
<mat-menu #depositsMenu="matMenu" class="deposits-mega-panel" [overlapTrigger]="false"> <mat-menu #depositsMenu="matMenu" class="deposits-mega-panel" [overlapTrigger]="false">
<div class="deposit-menu-grid" (click)="$event.stopPropagation()"> <div class="deposit-menu-grid deposits-grid" (click)="$event.stopPropagation()">
<div class="deposit-menu-group"> <div class="deposit-menu-group">
<div class="deposit-group-title">Accounts</div> <div class="deposit-group-title">Accounts</div>
<button mat-menu-item tabindex="0" [routerLink]="['/accounts/savings']"> <button mat-menu-item tabindex="0" [routerLink]="['/accounts/savings']">
@@ -1239,34 +1278,54 @@
</div> </div>
</mat-menu> </mat-menu>
<mat-menu #clearingMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown"> <mat-menu #clearingMenu="matMenu" class="clearing-mega-panel" [overlapTrigger]="false">
<button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/inward']"> <div class="deposit-menu-grid clearing-grid" (click)="$event.stopPropagation()">
<fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward Clearing (CTS) <!-- CTS Clearing -->
</button> <div class="deposit-menu-group">
<button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/outward']"> <div class="deposit-group-title">CTS Clearing</div>
<fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward Clearing (CTS) <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/inward']">
</button> <fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward Clearing (CTS)
<button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/positive-pay']"> </button>
<fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Positive Pay (PPS) <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/outward']">
</button> <fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward Clearing (CTS)
<button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/settlement']"> </button>
<fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Settlement <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/positive-pay']">
</button> <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Positive Pay (PPS)
<button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/reconciliation']"> </button>
<fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Reconciliation </div>
</button>
<button mat-menu-item tabindex="0" [routerLink]="['/nachclearing']"> <!-- Settlement & Recon -->
<fa-icon icon="money-check" class="menu-item-icon"></fa-icon> NACH Clearing <div class="deposit-menu-group">
</button> <div class="deposit-group-title">Settlement &amp; Recon</div>
<button mat-menu-item tabindex="0"><fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward</button> <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/settlement']">
<button mat-menu-item tabindex="0"><fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward</button> <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Settlement
<button mat-menu-item [routerLink]="['/sponsor-dd/inventory']" tabindex="0"> </button>
<fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Sponsor DD Inventory <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/reconciliation']">
</button> <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Reconciliation
</button>
<button mat-menu-item [routerLink]="['/sponsor-dd/inventory']" tabindex="0">
<fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Sponsor DD Inventory
</button>
</div>
<!-- NACH & Other -->
<div class="deposit-menu-group">
<div class="deposit-group-title">NACH &amp; Direct</div>
<button mat-menu-item tabindex="0" [routerLink]="['/nachclearing']">
<fa-icon icon="money-check" class="menu-item-icon"></fa-icon> NACH Clearing
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward
</button>
</div>
</div>
</mat-menu> </mat-menu>
<mat-menu #hrmMenu="matMenu" class="hrm-mega-panel" [overlapTrigger]="false"> <mat-menu #hrmMenu="matMenu" class="hrm-mega-panel" [overlapTrigger]="false">
<div class="deposit-menu-grid" (click)="$event.stopPropagation()"> <div class="deposit-menu-grid hrm-grid" (click)="$event.stopPropagation()">
<!-- Payroll --> <!-- Payroll -->
<div class="deposit-menu-group"> <div class="deposit-menu-group">
<div class="deposit-group-title">Payroll</div> <div class="deposit-group-title">Payroll</div>
@@ -1573,23 +1632,33 @@
</div> </div>
</mat-menu> </mat-menu>
<mat-menu #ckycMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown"> <mat-menu #ckycMenu="matMenu" class="ckyc-mega-panel" [overlapTrigger]="false">
<button mat-menu-item routerLink="/ckyc" tabindex="0"> <div class="deposit-menu-grid ckyc-grid" (click)="$event.stopPropagation()">
<fa-icon icon="id-card" class="menu-item-icon"></fa-icon> CKYC Management <!-- KYC Operations -->
</button> <div class="deposit-menu-group">
<button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('REKYC')"> <div class="deposit-group-title">KYC Operations</div>
<fa-icon icon="sync-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> Re-KYC Report <button mat-menu-item routerLink="/ckyc" tabindex="0">
</button> <fa-icon icon="id-card" class="menu-item-icon"></fa-icon> CKYC Management
<button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('RISK-REVIEW')"> </button>
<fa-icon icon="history" class="menu-item-icon" style="color: #be185d"></fa-icon> Risk Review <button mat-menu-item tabindex="0">
</button> <fa-icon icon="database" class="menu-item-icon" style="color: #be185d"></fa-icon> Dump KYC &amp; Loan Data
<button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('CERSAI')"> </button>
<fa-icon icon="shield-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> CERSAI Report </div>
</button>
<mat-divider></mat-divider> <!-- Reports & Screening -->
<button mat-menu-item tabindex="0"> <div class="deposit-menu-group">
<fa-icon icon="database" class="menu-item-icon" style="color: #be185d"></fa-icon> Dump KYC &amp; Loan Data <div class="deposit-group-title">Reports &amp; Screening</div>
</button> <button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('REKYC')">
<fa-icon icon="sync-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> Re-KYC Report
</button>
<button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('RISK-REVIEW')">
<fa-icon icon="history" class="menu-item-icon" style="color: #be185d"></fa-icon> Risk Review
</button>
<button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('CERSAI')">
<fa-icon icon="shield-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> CERSAI Report
</button>
</div>
</div>
</mat-menu> </mat-menu>
<!-- CFCFRMS — single landing page (CfcfrmsShell) hosts the full <!-- CFCFRMS — single landing page (CfcfrmsShell) hosts the full
@@ -1607,11 +1676,11 @@
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/sundry-dr-cr"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/sundry-dr-cr">
<fa-icon icon="random" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="random" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Sundry Dr / Cr Reconciliation Sundry Dr / Cr
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/pnl-impact"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/pnl-impact">
<fa-icon icon="chart-line" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="chart-line" class="menu-item-icon" style="color: #0d9488"></fa-icon>
P&amp;L Impact Reconciliation P&amp;L Impact
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/gl-reconciliation"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/gl-reconciliation">
<fa-icon icon="book-open" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="book-open" class="menu-item-icon" style="color: #0d9488"></fa-icon>
@@ -1619,11 +1688,11 @@
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/fixed-assets"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/fixed-assets">
<fa-icon icon="cube" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="cube" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Fixed Assets Reconciliation Fixed Assets
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/inter-company"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/inter-company">
<fa-icon icon="sitemap" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="sitemap" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Inter-Company Reconciliation Inter-Company
</button> </button>
</div> </div>
@@ -1636,15 +1705,15 @@
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/api-bank-reco"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/api-bank-reco">
<fa-icon icon="code-branch" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="code-branch" class="menu-item-icon" style="color: #0d9488"></fa-icon>
API Based Bank Reconciliation API Bank Reco
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/neft-rtgs"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/neft-rtgs">
<fa-icon icon="exchange" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="exchange" class="menu-item-icon" style="color: #0d9488"></fa-icon>
NEFT / RTGS Reconciliation NEFT / RTGS Reco
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/clearing-reco"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/clearing-reco">
<fa-icon icon="hand-holding-usd" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="hand-holding-usd" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Clearing Reconciliation Clearing Reco
</button> </button>
</div> </div>
@@ -1657,11 +1726,11 @@
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/three-way-digital"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/three-way-digital">
<fa-icon icon="project-diagram" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="project-diagram" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Three-way Digital Reconciliation Three-way Digital
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/nach-reco"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/nach-reco">
<fa-icon icon="sync-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="sync-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon>
NACH Reconciliation NACH Reco
</button> </button>
</div> </div>
@@ -1670,11 +1739,11 @@
<div class="deposit-group-title">Instruments &amp; Members</div> <div class="deposit-group-title">Instruments &amp; Members</div>
<button mat-menu-item [routerLink]="['/sponsor-dd-reconciliation']" tabindex="0"> <button mat-menu-item [routerLink]="['/sponsor-dd-reconciliation']" tabindex="0">
<fa-icon icon="money-check-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="money-check-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon>
DD / Pay Order Reconciliation DD / Pay Order
</button> </button>
<button mat-menu-item tabindex="0" routerLink="/reconciliation/share-member"> <button mat-menu-item tabindex="0" routerLink="/reconciliation/share-member">
<fa-icon icon="coins" class="menu-item-icon" style="color: #0d9488"></fa-icon> <fa-icon icon="coins" class="menu-item-icon" style="color: #0d9488"></fa-icon>
Share Member Reconciliation Share Member
</button> </button>
</div> </div>
@@ -1850,46 +1919,68 @@
</div> </div>
</mat-menu> </mat-menu>
<mat-menu #insuranceMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown"> <mat-menu #insuranceMenu="matMenu" class="insurance-mega-panel" [overlapTrigger]="false">
<button mat-menu-item routerLink="/dicgc" tabindex="0"> <div class="deposit-menu-grid insurance-grid" (click)="$event.stopPropagation()">
<fa-icon icon="building" class="menu-item-icon" style="color: #c2410c"></fa-icon> DICGC <!-- Social & Policy Schemes -->
</button> <div class="deposit-menu-group">
<button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMJBY</button> <div class="deposit-group-title">Schemes &amp; Social</div>
<button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMSBY</button> <button mat-menu-item routerLink="/dicgc" tabindex="0">
<button mat-menu-item tabindex="0"> <fa-icon icon="building" class="menu-item-icon" style="color: #c2410c"></fa-icon> DICGC
<fa-icon icon="hand-holding-heart" class="menu-item-icon"></fa-icon> Indemnity </button>
</button> <button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMJBY</button>
<button mat-menu-item tabindex="0"> <button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMSBY</button>
<fa-icon icon="home" class="menu-item-icon"></fa-icon> Assets Insurance <button mat-menu-item tabindex="0">
</button> <fa-icon icon="hand-holding-heart" class="menu-item-icon"></fa-icon> Indemnity
<button mat-menu-item tabindex="0"> </button>
<fa-icon icon="laptop" class="menu-item-icon"></fa-icon> Cyber Insurance </div>
</button>
<button mat-menu-item tabindex="0"> <!-- Institutional & Loans -->
<fa-icon icon="university" class="menu-item-icon"></fa-icon> Bank Insurance <div class="deposit-menu-group">
</button> <div class="deposit-group-title">Institutional &amp; Loans</div>
<button mat-menu-item tabindex="0"> <button mat-menu-item tabindex="0">
<fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Loan Insurance <fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Loan Insurance
</button> </button>
<button mat-menu-item tabindex="0">
<fa-icon icon="home" class="menu-item-icon"></fa-icon> Assets Insurance
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="laptop" class="menu-item-icon"></fa-icon> Cyber Insurance
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="university" class="menu-item-icon"></fa-icon> Bank Insurance
</button>
</div>
</div>
</mat-menu> </mat-menu>
<mat-menu #digitalMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown"> <mat-menu #digitalMenu="matMenu" class="digital-mega-panel" [overlapTrigger]="false">
<button mat-menu-item routerLink="/digital/neft-rtgs-report" tabindex="0"> <div class="deposit-menu-grid digital-grid" (click)="$event.stopPropagation()">
<fa-icon icon="exchange" class="menu-item-icon"></fa-icon> NEFT / RTGS <!-- Payment Systems -->
</button> <div class="deposit-menu-group">
<button mat-menu-item routerLink="/digital/imps-report" tabindex="0"> <div class="deposit-group-title">Payments</div>
<fa-icon icon="bolt" class="menu-item-icon"></fa-icon> IMPS <button mat-menu-item routerLink="/digital/neft-rtgs-report" tabindex="0">
</button> <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> NEFT / RTGS
<button mat-menu-item routerLink="/digital/upi-report" tabindex="0"> </button>
<fa-icon icon="mobile-alt" class="menu-item-icon"></fa-icon> UPI Reports <button mat-menu-item routerLink="/digital/imps-report" tabindex="0">
</button> <fa-icon icon="bolt" class="menu-item-icon"></fa-icon> IMPS
<button mat-menu-item routerLink="/digital/atm-pos-ecom" tabindex="0"> </button>
<fa-icon icon="credit-card" class="menu-item-icon"></fa-icon> ATM / POS / ECOM Reports <button mat-menu-item routerLink="/digital/upi-report" tabindex="0">
</button> <fa-icon icon="mobile-alt" class="menu-item-icon"></fa-icon> UPI Reports
<button mat-menu-item tabindex="0"><fa-icon icon="sync" class="menu-item-icon"></fa-icon> NACH</button> </button>
<button mat-menu-item tabindex="0"> </div>
<fa-icon icon="file-signature" class="menu-item-icon"></fa-icon> Mandate
</button> <!-- Cards & Mandates -->
<div class="deposit-menu-group">
<div class="deposit-group-title">Cards &amp; Mandates</div>
<button mat-menu-item routerLink="/digital/atm-pos-ecom" tabindex="0">
<fa-icon icon="credit-card" class="menu-item-icon"></fa-icon> ATM / POS / ECOM Reports
</button>
<button mat-menu-item tabindex="0"><fa-icon icon="sync" class="menu-item-icon"></fa-icon> NACH</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="file-signature" class="menu-item-icon"></fa-icon> Mandate
</button>
</div>
</div>
</mat-menu> </mat-menu>
<!-- RBI Mega Menu --> <!-- RBI Mega Menu -->
src/app/core/shell/shell.component.scss
+197 -124
View File
@@ -266,7 +266,7 @@ $color: #e2e4ec;
max-width: 100%; max-width: 100%;
overflow-x: hidden; overflow-x: hidden;
box-sizing: border-box; box-sizing: border-box;
padding: 16px 28px; padding: 10px 18px;
} }
} }
@@ -282,21 +282,15 @@ $gray-700: #334155;
/* ============================================================ /* ============================================================
Main header (top 2-row navigation) Main header (top 2-row navigation)
-------------------------------------------------------------- --------------------------------------------------------------
Redesigned 2026 — clean, modern enterprise SaaS feel: Compact, modern enterprise SaaS navigation:
• Both rows live on the same white surface separated only by a • Height reduced to 32px per row (64px total) to save screen space.
hairline; r2 has a barely-there blue-50 wash so frequent vs • Smooth horizontal scrolling prevents menu items from getting cut off.
secondary menus read at a glance without dark/light contrast. • Compact typography, icons and paddings fit all banking modules cleanly.
• 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.
============================================================ */ ============================================================ */
.main-header { .main-header {
background: #fff; background: #fff;
border-bottom: 2.5px solid $brand; border-bottom: 2px solid $brand;
box-shadow: 0 1px 4px rgb(0 0 0 / 7%); box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
position: sticky; position: sticky;
/* Sit directly under the sticky toolbar (32px tall) so both stay visible. */ /* Sit directly under the sticky toolbar (32px tall) so both stay visible. */
@@ -306,19 +300,19 @@ $gray-700: #334155;
} }
.nav-row { .nav-row {
height: 44px; height: 32px;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
overflow: visible; overflow: auto visible;
position: relative; 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; border: 1px solid $gray-200;
background: #fff; background: #fff;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
} }
.r2.nav-row { .r2.nav-row {
@@ -334,25 +328,17 @@ $gray-700: #334155;
background: #f8fafc; background: #f8fafc;
} }
// ===== Nav Item — modern tab style ===== // ===== Nav Item — compact modern tab style =====
// Typography spec — same family / size / weight / color for BOTH rows.
.ni { .ni {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 7px; gap: 2.5px;
height: 100%; 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; flex: 1 0 auto;
min-width: max-content; min-width: 0;
padding: 0 14px; padding: 0 4px;
/* Vertical divider between adjacent cells; outer frame is the row's
own border, and the last cell drops its right border below. */
border-right: 1px solid $gray-200; border-right: 1px solid $gray-200;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -360,11 +346,11 @@ $gray-700: #334155;
'IBM Plex Sans', 'IBM Plex Sans',
-apple-system, -apple-system,
sans-serif; sans-serif;
font-size: 12px; font-size: 10px;
font-weight: 500; font-weight: 500;
color: #0a1a2e; color: #0a1a2e;
line-height: 1.3; line-height: 1.2;
letter-spacing: 0.01em; letter-spacing: -0.015em;
text-decoration: none; text-decoration: none;
user-select: none; user-select: none;
transition: transition:
@@ -373,17 +359,15 @@ $gray-700: #334155;
box-shadow 0.15s ease; box-shadow 0.15s ease;
border-radius: 0; border-radius: 0;
/* 3px accent strip that fills on hover / active (uses ::before so we
don't reflow the row when toggling). */
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 4px; left: 2px;
right: 4px; right: 2px;
top: 0; top: 0;
height: 3px; height: 2px;
background: transparent; background: transparent;
border-radius: 0 0 3px 3px; border-radius: 0 0 2px 2px;
transition: background 0.15s ease; transition: background 0.15s ease;
} }
@@ -410,17 +394,19 @@ $gray-700: #334155;
outline-offset: -2px; 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 { &:last-child {
border-right: none; border-right: none;
} }
.ni-short {
display: none;
}
} }
.ni-ico { .ni-ico {
width: 12px; width: 9.5px;
height: 12px; height: 9.5px;
font-size: 12px; font-size: 9.5px;
color: $gray-500; color: $gray-500;
flex-shrink: 0; flex-shrink: 0;
transition: color 0.15s ease; transition: color 0.15s ease;
@@ -432,11 +418,12 @@ $gray-700: #334155;
} }
.ni-caret { .ni-caret {
width: 7px; width: 5px;
height: 7px; height: 5px;
font-size: 7px; font-size: 5px;
color: $gray-400; color: $gray-400;
flex-shrink: 0; flex-shrink: 0;
margin-left: 0.5px;
transition: transition:
transform 0.18s ease, transform 0.18s ease,
color 0.18s ease; color 0.18s ease;
@@ -447,17 +434,89 @@ $gray-700: #334155;
} }
} }
@media (width <= 1200px) { @media (width >= 1400px) {
.ni { .ni {
padding: 0 8px; padding: 0 6px;
gap: 5px; 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 { .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; padding: 0 6px;
gap: 4px; gap: 3px;
font-size: 10px;
} }
} }
@@ -699,21 +758,29 @@ $gray-700: #334155;
// ===== Nav Dropdown Menus ===== // ===== Nav Dropdown Menus =====
::ng-deep .nav-dropdown { ::ng-deep .nav-dropdown {
border-radius: 8px !important; border-radius: 6px !important;
border: 1px solid $gray-200 !important; border: 1px solid $gray-200 !important;
box-shadow: 0 6px 24px rgb(0 0 0 / 10%) !important; box-shadow: 0 4px 16px rgb(0 0 0 / 12%) !important;
min-width: 180px !important; min-width: 170px !important;
padding: 4px 0 !important; padding: 3px 0 !important;
margin-top: 2px !important; margin-top: 1px !important;
.mat-mdc-menu-item { .mat-mdc-menu-item {
font-size: 12.5px !important; font-size: 10.5px !important;
font-weight: 500 !important; font-weight: 500 !important;
height: 34px !important; height: 25px !important;
min-height: 34px !important; min-height: 25px !important;
padding: 0 14px !important; padding: 0 6px !important;
line-height: 25px !important;
color: $gray-700 !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 { &:hover {
background: $brand-hover !important; background: $brand-hover !important;
@@ -728,39 +795,44 @@ $gray-700: #334155;
} }
/* Deposits Mega Panel (inside mat-menu overlay) */ /* Deposits Mega Panel (inside mat-menu overlay) */
.deposit-menu-grid { ::ng-deep .deposit-menu-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); gap: 4px 12px;
gap: 8px 24px; padding: 6px 10px;
padding: 8px 12px; min-width: 0;
min-width: 600px; width: 100%;
box-sizing: border-box;
overflow-x: hidden;
} }
.deposit-menu-group { ::ng-deep .deposit-menu-group {
.deposit-group-title { .deposit-group-title {
font-weight: 700; font-weight: 700;
font-size: 11px; font-size: 9.5px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.6px; letter-spacing: 0.5px;
color: #1074b9; color: #1074b9;
padding: 4px 16px 6px; padding: 2px 6px 3px;
margin-bottom: 2px; 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 Mega Panel — 3 columns */
.npa-grid { ::ng-deep .npa-grid {
grid-template-columns: repeat(4, minmax(200px, 1fr)); grid-template-columns: repeat(3, minmax(210px, 1fr));
min-width: 880px; min-width: 0;
max-width: 96vw; max-width: 100%;
overflow-x: hidden;
} }
/* Reconciliation Mega Panel — 5 columns, teal accent to match the icon palette */ /* Reconciliation Mega Panel — 5 columns */
.reconciliation-grid { ::ng-deep .reconciliation-grid {
grid-template-columns: repeat(5, minmax(190px, 1fr)); grid-template-columns: repeat(5, minmax(170px, 1fr));
min-width: 1040px; min-width: 0;
max-width: 96vw; max-width: 100%;
overflow-x: hidden;
.deposit-group-title { .deposit-group-title {
color: #0d9488; color: #0d9488;
@@ -780,47 +852,49 @@ $gray-700: #334155;
.gl-mega-menu { .gl-mega-menu {
position: absolute; position: absolute;
top: 100px; top: 96px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: #fff; background: #fff;
width: 860px; width: 760px;
max-width: 95vw; max-width: 94vw;
padding: 20px 24px; max-height: 72vh;
box-shadow: 0 6px 24px rgb(0 0 0 / 22%); overflow-y: auto;
border-radius: 0 0 10px 10px; padding: 12px 16px;
box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
border-radius: 0 0 8px 8px;
z-index: 1000; z-index: 1000;
border-top: 3px solid #0d47a1; border-top: 2.5px solid #0d47a1;
} }
.gl-mega-menu-header { .gl-mega-menu-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
margin-bottom: 14px; margin-bottom: 8px;
padding-bottom: 12px; padding-bottom: 6px;
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
span { span {
font-size: 18px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: #0d47a1; color: #0d47a1;
letter-spacing: 0.02em; letter-spacing: 0.01em;
} }
} }
.gl-mega-menu-header-icon { .gl-mega-menu-header-icon {
font-size: 18px; font-size: 14px;
color: #0d47a1; color: #0d47a1;
} }
.gl-search { .gl-search {
width: 100%; width: 100%;
padding: 10px 14px; padding: 6px 10px;
margin-bottom: 16px; margin-bottom: 10px;
border: 1px solid #d0d5dd; border: 1px solid #d0d5dd;
border-radius: 6px; border-radius: 5px;
font-size: 14px; font-size: 12px;
box-sizing: border-box; box-sizing: border-box;
background: #f9fafb; background: #f9fafb;
@@ -828,36 +902,37 @@ $gray-700: #334155;
outline: none; outline: none;
border-color: #0d47a1; border-color: #0d47a1;
background: #fff; 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 { .gl-columns {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 24px; gap: 10px 16px;
} }
.gl-group-title { .gl-group-title {
font-weight: 700; font-weight: 700;
font-size: 11px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.8px; letter-spacing: 0.6px;
color: #0d47a1; color: #0d47a1;
margin-bottom: 10px; margin-bottom: 5px;
padding-bottom: 6px; padding-bottom: 3px;
border-bottom: 2px solid #0d47a1; border-bottom: 1.5px solid #0d47a1;
} }
.gl-link { .gl-link {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 7px 6px; padding: 3.5px 5px;
text-decoration: none; text-decoration: none;
color: #344054; color: #344054;
font-size: 13px; font-size: 11.5px;
line-height: 1.3;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 4px;
transition: transition:
background 0.15s, background 0.15s,
color 0.15s; color 0.15s;
@@ -873,23 +948,21 @@ $gray-700: #334155;
} }
.gl-icon { .gl-icon {
width: 18px; width: 14px;
margin-right: 8px; margin-right: 5px;
color: #667085; color: #667085;
font-size: 13px; font-size: 11px;
flex-shrink: 0;
.gl-link:hover & { .gl-link:hover & {
color: #0d47a1; 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 { .gl-link--live::after {
content: ''; content: '';
width: 6px; width: 5px;
height: 6px; height: 5px;
margin-left: auto; margin-left: auto;
flex-shrink: 0; flex-shrink: 0;
border-radius: 50%; border-radius: 50%;
@@ -899,9 +972,9 @@ $gray-700: #334155;
/* RBI Mega Menu */ /* RBI Mega Menu */
.rbi-mega-menu { .rbi-mega-menu {
width: 1100px; width: 880px;
max-width: 97vw; max-width: 94vw;
max-height: 80vh; max-height: 72vh;
overflow-y: auto; overflow-y: auto;
border-top-color: #b71c1c; border-top-color: #b71c1c;
} }
@@ -909,7 +982,7 @@ $gray-700: #334155;
.rbi-columns { .rbi-columns {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 20px; gap: 10px 16px;
} }
@keyframes move { @keyframes move {
src/app/core/shell/toolbar/toolbar.component.html
+1 -1
View File
@@ -522,7 +522,7 @@
</mat-menu> </mat-menu>
<!-- Application User Help Menu --> <!-- Application User Help Menu -->
<mat-menu #applicationMenu="matMenu" [overlapTrigger]="false"> <mat-menu #applicationMenu="matMenu" [overlapTrigger]="false" class="t-user-menu" xPosition="before">
<button mat-menu-item (click)="help()" tabindex="0"> <button mat-menu-item (click)="help()" tabindex="0">
<mat-icon matListIcon> <mat-icon matListIcon>
<fa-icon icon="question-circle" size="sm"></fa-icon> <fa-icon icon="question-circle" size="sm"></fa-icon>
src/app/core/shell/toolbar/toolbar.component.scss
+187 -59
View File
@@ -390,6 +390,103 @@ $icon-hover-border: rgb(255 255 255 / 28%);
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
} }
// Compact card per AI module
.ai-card.mat-mdc-menu-item {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 10px !important;
min-height: 52px !important;
height: auto !important;
border-radius: 9px !important;
font-family: inherit !important;
line-height: 1.3 !important;
white-space: normal !important;
overflow: visible !important;
transition: background 0.16s ease !important;
.mat-mdc-menu-item-text,
.mdc-list-item__primary-text,
.mdc-list-item__content {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
width: 100% !important;
white-space: normal !important;
overflow: visible !important;
}
.ai-card-ic {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
font-size: 13px !important;
flex-shrink: 0 !important;
background: var(--c-bg) !important;
color: var(--c-color) !important;
margin: 0 !important;
opacity: 1 !important;
transition:
background 0.16s ease,
color 0.16s ease,
transform 0.16s ease !important;
fa-icon {
font-size: 13px !important;
width: auto !important;
min-width: auto !important;
margin: 0 !important;
color: inherit !important;
opacity: 1 !important;
}
}
.ai-card-body {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
min-width: 0 !important;
text-align: left !important;
white-space: normal !important;
}
.ai-card-t {
font-size: 12.5px !important;
font-weight: 600 !important;
color: #0f172a !important;
line-height: 1.25 !important;
white-space: normal !important;
display: block !important;
}
.ai-card-d {
font-size: 10.5px !important;
color: #64748b !important;
margin-top: 3px !important;
line-height: 1.35 !important;
white-space: normal !important;
display: block !important;
}
&:hover {
background: var(--c-bg) !important;
.ai-card-ic {
background: var(--c-hover) !important;
color: #fff !important;
transform: scale(1.06) !important;
}
.ai-card-t {
color: var(--c-color) !important;
}
}
}
} }
.ai-menu-header { .ai-menu-header {
@@ -488,70 +585,101 @@ $icon-hover-border: rgb(255 255 255 / 28%);
font-size: 11px; font-size: 11px;
} }
// Compact card per AI module // ===== User Account Dropdown Menu =====
.ai-card.mat-mdc-menu-item { ::ng-deep .t-user-menu.mat-mdc-menu-panel {
display: flex !important; min-width: 190px !important;
align-items: flex-start; border-radius: 10px !important;
gap: 10px; box-shadow:
padding: 9px 10px; 0 10px 25px rgb(15 23 42 / 12%),
min-height: 0; 0 2px 6px rgb(15 23 42 / 6%) !important;
height: auto; border: 1px solid #e2e8f0 !important;
border-radius: 9px; padding: 6px 0 !important;
font-family: inherit; background: #fff !important;
line-height: 1.3;
white-space: normal;
transition: background 0.16s ease;
.ai-card-ic { .mat-mdc-menu-content {
width: 32px; padding: 4px 0 !important;
height: 32px; }
display: inline-flex;
align-items: center; .mat-mdc-menu-item {
justify-content: center; height: 38px !important;
border-radius: 8px; min-height: 38px !important;
font-size: 13px; line-height: 38px !important;
flex-shrink: 0; padding: 0 14px !important;
background: var(--c-bg); display: flex !important;
color: var(--c-color); align-items: center !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #334155 !important;
transition: transition:
background 0.16s ease, background-color 0.15s ease,
color 0.16s ease, color 0.15s ease !important;
transform 0.16s ease;
}
.ai-card-body { .mat-mdc-menu-item-text {
display: flex; display: inline-flex !important;
flex-direction: column; align-items: center !important;
flex: 1; width: 100% !important;
min-width: 0; font-size: 13px !important;
text-align: left; color: inherit !important;
} font-weight: 500 !important;
.ai-card-t {
font-size: 12.5px;
font-weight: 600;
color: #0f172a;
line-height: 1.25;
}
.ai-card-d {
font-size: 10.5px;
color: #64748b;
margin-top: 2px;
line-height: 1.35;
}
&:hover {
background: var(--c-bg);
.ai-card-ic {
background: var(--c-hover);
color: #fff;
transform: scale(1.06);
} }
.ai-card-t { mat-icon {
color: var(--c-color); margin-right: 10px !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #64748b !important;
font-size: 14px !important;
flex-shrink: 0 !important;
fa-icon {
font-size: 14px !important;
width: 14px !important;
min-width: 14px !important;
text-align: center !important;
margin-right: 0 !important;
color: inherit !important;
opacity: 1 !important;
}
}
span {
font-size: 13px !important;
color: inherit !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
&:hover {
background-color: #f1f5f9 !important;
color: #0d47a1 !important;
mat-icon {
color: #0d47a1 !important;
}
}
&#logout {
color: #dc2626 !important;
border-top: 1px solid #f1f5f9 !important;
margin-top: 4px !important;
padding-top: 2px !important;
mat-icon {
color: #dc2626 !important;
}
&:hover {
background-color: #fef2f2 !important;
color: #b91c1c !important;
mat-icon {
color: #b91c1c !important;
}
}
} }
} }
} }
src/app/products/products.component.scss
+27 -27
View File
@@ -15,43 +15,43 @@ $gray-900: #0f172a;
// ── Container ── // ── Container ──
.pd-container { .pd-container {
max-width: 1100px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 24px 20px; padding: 12px 16px;
} }
// ── Page Header ── // ── Page Header ──
.pd-header { .pd-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 10px;
margin-bottom: 28px; margin-bottom: 14px;
&__icon { &__icon {
width: 44px; width: 34px;
height: 44px; height: 34px;
border-radius: 10px; border-radius: 7px;
background: linear-gradient(135deg, #0d3d78, #1a5276); background: linear-gradient(135deg, #0d3d78, #1a5276);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
font-size: 18px; font-size: 14px;
flex-shrink: 0; flex-shrink: 0;
} }
&__title { &__title {
font-size: 20px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: $gray-900; color: $gray-900;
margin: 0; margin: 0;
letter-spacing: -0.3px; letter-spacing: -0.2px;
} }
&__sub { &__sub {
font-size: 13px; font-size: 11.5px;
color: $gray-500; color: $gray-500;
margin: 2px 0 0; margin: 1px 0 0;
} }
} }
@@ -59,7 +59,7 @@ $gray-900: #0f172a;
.pd-grid { .pd-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 12px; gap: 8px;
@media (width <= 768px) { @media (width <= 768px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -70,11 +70,11 @@ $gray-900: #0f172a;
.pd-card { .pd-card {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14px; gap: 10px;
padding: 14px 16px; padding: 8px 12px;
background: #fff; background: #fff;
border: 1px solid $border; border: 1px solid $border;
border-radius: 10px; border-radius: 7px;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
@@ -82,7 +82,7 @@ $gray-900: #0f172a;
&:hover { &:hover {
border-color: #cbd5e1; border-color: #cbd5e1;
background: $gray-50; background: $gray-50;
box-shadow: 0 2px 8px rgb(0 0 0 / 4%); box-shadow: 0 1px 6px rgb(0 0 0 / 4%);
.pd-card__arrow { .pd-card__arrow {
color: $gray-700; color: $gray-700;
@@ -91,13 +91,13 @@ $gray-900: #0f172a;
} }
&__icon { &__icon {
width: 40px; width: 30px;
height: 40px; height: 30px;
border-radius: 9px; border-radius: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 15px; font-size: 12.5px;
flex-shrink: 0; flex-shrink: 0;
&--blue { &--blue {
@@ -167,25 +167,25 @@ $gray-900: #0f172a;
} }
&__title { &__title {
font-size: 13.5px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: $gray-900; color: $gray-900;
margin: 0; margin: 0;
line-height: 1.3; line-height: 1.25;
} }
&__desc { &__desc {
font-size: 11.5px; font-size: 10.5px;
color: $gray-400; color: $gray-400;
margin: 3px 0 0; margin: 1px 0 0;
line-height: 1.35; line-height: 1.3;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&__arrow { &__arrow {
font-size: 11px; font-size: 10px;
color: #cbd5e1; color: #cbd5e1;
flex-shrink: 0; flex-shrink: 0;
transition: all 0.15s ease; transition: all 0.15s ease;
src/app/shared/loading-screen/loading-screen.component.html
+1 -9
View File
@@ -38,15 +38,7 @@
<!-- Full-Screen App Boot / Splash Screen --> <!-- Full-Screen App Boot / Splash Screen -->
<div class="cbs-fullscreen-loader"> <div class="cbs-fullscreen-loader">
<div class="cbs-fullscreen-loader__brand"> <div class="cbs-fullscreen-loader__brand">
<div class="cbs-brand-icon"> <img src="assets/images/cbsnexora-logo.png" alt="CBS Nexora" class="cbs-fullscreen-loader__logo-img" />
<svg width="40" height="40" viewBox="0 0 32 32" aria-hidden="true">
<rect x="1" y="1" width="14" height="14" rx="2" fill="#2563eb" />
<rect x="17" y="1" width="14" height="14" rx="2" fill="#0ea5e9" />
<rect x="1" y="17" width="14" height="14" rx="2" fill="#10b981" />
<rect x="17" y="17" width="14" height="14" rx="2" fill="#94a3b8" />
</svg>
</div>
<h2 class="cbs-brand-name">{{ title || 'CBS Nexora' }}</h2>
<span class="cbs-brand-sub">Core Banking System</span> <span class="cbs-brand-sub">Core Banking System</span>
</div> </div>
src/app/shared/loading-screen/loading-screen.component.scss
+8
View File
@@ -129,6 +129,14 @@
margin-bottom: 16px; margin-bottom: 16px;
} }
.cbs-fullscreen-loader__logo-img {
height: 52px;
width: auto;
max-width: 260px;
object-fit: contain;
filter: drop-shadow(0 6px 18px rgb(0 0 0 / 45%));
}
.cbs-brand-icon { .cbs-brand-icon {
width: 64px; width: 64px;
height: 64px; height: 64px;
src/index.html
+44 -17
View File
@@ -144,31 +144,45 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 12px; gap: 10px;
margin-bottom: 24px; margin-bottom: 20px;
text-align: center;
}
.cbs-init-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.cbs-init-logo-img {
height: 52px;
width: auto;
max-width: 260px;
object-fit: contain;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
transition: transform 0.3s ease;
} }
.cbs-init-icon { .cbs-init-icon {
width: 72px; width: 56px;
height: 72px; height: 56px;
border-radius: 18px; border-radius: 14px;
background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%); background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 12px 28px rgba(14, 165, 233, 0.35); box-shadow: 0 10px 24px rgba(14, 165, 233, 0.35);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
} }
.cbs-init-title { .cbs-init-title {
font-size: 1.6rem; font-size: 1.5rem;
font-weight: 800; font-weight: 800;
letter-spacing: -0.02em; letter-spacing: -0.02em;
margin: 0; margin: 0;
} }
.cbs-init-sub { .cbs-init-sub {
font-size: 0.8rem; font-size: 0.78rem;
color: #94a3b8; color: #94a3b8;
font-weight: 500; font-weight: 500;
letter-spacing: 0.04em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
} }
.cbs-init-lottie-box { .cbs-init-lottie-box {
@@ -241,15 +255,28 @@
} }
</style> </style>
<div class="cbs-init-brand"> <div class="cbs-init-brand">
<div class="cbs-init-icon"> <div class="cbs-init-logo-wrap">
<svg width="40" height="40" viewBox="0 0 32 32"> <img
<rect x="2" y="2" width="13" height="13" rx="2.5" fill="#ffffff" /> src="assets/images/cbsnexora-logo.png"
<rect x="17" y="2" width="13" height="13" rx="2.5" fill="#29abe2" /> alt="CBS Nexora"
<rect x="2" y="17" width="13" height="13" rx="2.5" fill="#00b388" /> class="cbs-init-logo-img"
<rect x="17" y="17" width="13" height="13" rx="2.5" fill="#6b7fa3" /> onerror="
</svg> this.style.display = 'none';
document.getElementById('cbs-init-fallback-brand').style.display = 'flex';
"
/>
<div id="cbs-init-fallback-brand" style="display: none; align-items: center; gap: 8px">
<div class="cbs-init-icon">
<svg width="32" height="32" viewBox="0 0 32 32">
<rect x="2" y="2" width="13" height="13" rx="2.5" fill="#ffffff" />
<rect x="17" y="2" width="13" height="13" rx="2.5" fill="#29abe2" />
<rect x="2" y="17" width="13" height="13" rx="2.5" fill="#00b388" />
<rect x="17" y="17" width="13" height="13" rx="2.5" fill="#6b7fa3" />
</svg>
</div>
<h2 class="cbs-init-title" style="margin: 0; font-size: 1.4rem">CBS Nexora</h2>
</div>
</div> </div>
<h2 class="cbs-init-title">CBS Nexora</h2>
<span class="cbs-init-sub">Next-Generation Core Banking</span> <span class="cbs-init-sub">Next-Generation Core Banking</span>
</div> </div>
src/main.scss
+343 -37
View File
@@ -81,66 +81,332 @@
// ===== Sub-menu Mega Panels (rendered in CDK overlay) ===== // ===== Sub-menu Mega Panels (rendered in CDK overlay) =====
.deposits-mega-panel, .deposits-mega-panel,
.hrm-mega-panel { .hrm-mega-panel,
max-width: 700px !important; .cashier-mega-panel,
.clerk-mega-panel,
.clearing-mega-panel,
.npa-mega-panel,
.advances-mega-panel,
.admin-mega-panel {
min-width: 680px !important;
max-width: 740px !important;
}
.branch-ops-mega-panel,
.insurance-mega-panel,
.digital-mega-panel,
.ckyc-mega-panel {
min-width: 440px !important;
max-width: 480px !important;
overflow-x: hidden !important;
} }
.share-mega-panel, .share-mega-panel,
.others-mega-panel { .others-mega-panel {
max-width: 850px !important; min-width: 780px !important;
max-width: 840px !important;
} }
.share-grid, .reports-mega-panel {
.others-grid { min-width: 740px !important;
grid-template-columns: repeat(4, 1fr) !important;
}
.others-grid,
.npa-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.npa-mega-panel,
.advances-mega-panel {
max-width: 800px !important; max-width: 800px !important;
border-top: 2.5px solid #0369a1 !important;
} }
.advances-grid { .letter-mega-panel,
grid-template-columns: repeat(3, 1fr) !important; .reconciliation-mega-panel {
min-width: 900px !important;
max-width: 960px !important;
}
/* ==========================================================================
Mega Menu Panel CDK Overlay Rules (Anchor naturally under triggers)
========================================================================== */
.cdk-overlay-pane:has(.mat-mdc-menu-panel) {
max-width: 96vw !important;
}
/* Individual Top Accent Border for Mega Panels */
.deposits-mega-panel,
.advances-mega-panel {
border-top: 2.5px solid #1074b9 !important;
}
.cashier-mega-panel {
border-top: 2.5px solid #0284c7 !important;
}
.clerk-mega-panel {
border-top: 2.5px solid #2563eb !important;
}
.branch-ops-mega-panel {
border-top: 2.5px solid #4f46e5 !important;
}
.clearing-mega-panel,
.reconciliation-mega-panel {
border-top: 2.5px solid #0d9488 !important;
}
.hrm-mega-panel {
border-top: 2.5px solid #0284c7 !important;
}
.admin-mega-panel,
.digital-mega-panel {
border-top: 2.5px solid #7c3aed !important;
}
.share-mega-panel {
border-top: 2.5px solid #d97706 !important;
}
.others-mega-panel {
border-top: 2.5px solid #0284c7 !important;
}
.npa-mega-panel {
border-top: 2.5px solid #dc2626 !important;
} }
.letter-mega-panel { .letter-mega-panel {
max-width: 1100px !important; border-top: 2.5px solid #15803d !important;
} }
.letter-grid { .insurance-mega-panel {
grid-template-columns: repeat(5, minmax(190px, 1fr)) !important; border-top: 2.5px solid #c2410c !important;
min-width: 1040px;
} }
.reconciliation-mega-panel { .ckyc-mega-panel {
max-width: 1100px !important; border-top: 2.5px solid #be185d !important;
} }
/* Universal Mega Panel Grid styling inside Material Menu Overlays */
.deposit-menu-grid {
display: grid !important;
gap: 4px 12px !important;
padding: 6px 10px !important;
box-sizing: border-box !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
/* Mega Panel Grids with exact column definitions */
.deposit-menu-grid.cashier-grid,
.deposit-menu-grid.clerk-grid,
.deposit-menu-grid.clearing-grid,
.deposit-menu-grid.advances-grid,
.deposit-menu-grid.deposits-grid,
.deposit-menu-grid.hrm-grid,
.deposit-menu-grid.admin-grid,
.deposit-menu-grid.npa-grid,
.cashier-grid,
.clerk-grid,
.clearing-grid,
.advances-grid,
.deposits-grid,
.hrm-grid,
.admin-grid,
.npa-grid {
grid-template-columns: repeat(3, minmax(210px, 1fr)) !important;
}
.deposit-menu-grid.reports-grid,
.reports-grid {
grid-template-columns: repeat(3, minmax(230px, 1fr)) !important;
}
.deposit-menu-grid.branch-ops-grid,
.deposit-menu-grid.insurance-grid,
.deposit-menu-grid.digital-grid,
.deposit-menu-grid.ckyc-grid,
.branch-ops-grid,
.insurance-grid,
.digital-grid,
.ckyc-grid {
grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
}
.deposit-menu-grid.share-grid,
.deposit-menu-grid.others-grid,
.share-grid,
.others-grid {
grid-template-columns: repeat(4, minmax(185px, 1fr)) !important;
}
.deposit-menu-grid.letter-grid,
.deposit-menu-grid.reconciliation-grid,
.letter-grid,
.reconciliation-grid { .reconciliation-grid {
grid-template-columns: repeat(5, minmax(190px, 1fr)) !important; grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
min-width: 1040px;
} }
/* Admin Mega Menu — 3-column rectangular panel (Setup · Catalog · .deposit-menu-group {
Audit & Compliance). Reuses the deposit-mega-menu grid + group chrome display: flex !important;
and retints the group-title accent to Admin purple. */ flex-direction: column !important;
.admin-mega-panel { gap: 1px !important;
max-width: 760px !important; min-width: 0 !important;
}
.admin-grid {
grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
min-width: 680px;
.deposit-group-title { .deposit-group-title {
color: #7c3aed !important; font-weight: 700 !important;
border-bottom-color: #7c3aed !important; font-size: 9.5px !important;
text-transform: uppercase !important;
letter-spacing: 0.6px !important;
color: #1074b9 !important;
padding: 3px 6px !important;
margin-bottom: 2px !important;
border-bottom: 1.5px solid #1074b9 !important;
display: flex !important;
align-items: center !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
}
/* Specific Accent Colors for Mega Panel Group Titles */
.cashier-grid .deposit-group-title {
color: #0284c7 !important;
border-bottom-color: #0284c7 !important;
}
.clerk-grid .deposit-group-title {
color: #2563eb !important;
border-bottom-color: #2563eb !important;
}
.clearing-grid .deposit-group-title {
color: #0d9488 !important;
border-bottom-color: #0d9488 !important;
}
.branch-ops-grid .deposit-group-title {
color: #4f46e5 !important;
border-bottom-color: #4f46e5 !important;
}
.reports-grid .deposit-group-title {
color: #0369a1 !important;
border-bottom-color: #0369a1 !important;
}
.insurance-grid .deposit-group-title {
color: #c2410c !important;
border-bottom-color: #c2410c !important;
}
.digital-grid .deposit-group-title {
color: #7c3aed !important;
border-bottom-color: #7c3aed !important;
}
.ckyc-grid .deposit-group-title {
color: #be185d !important;
border-bottom-color: #be185d !important;
}
.admin-grid .deposit-group-title {
color: #7c3aed !important;
border-bottom-color: #7c3aed !important;
}
.reconciliation-grid .deposit-group-title {
color: #0d9488 !important;
border-bottom-color: #0d9488 !important;
}
/* Compact, RBI-Style Menu Item Overrides in CDK Overlays */
/* Compact, RBI-Style Menu Item Overrides for Navbar Mega Panels ONLY */
.mat-mdc-menu-panel:has(.deposit-menu-grid) {
--mat-menu-item-label-text-size: 10.5px !important;
--mat-menu-item-label-text-line-height: 14px !important;
border-radius: 8px !important;
box-shadow:
0 10px 28px rgb(15 23 42 / 14%),
0 2px 6px rgb(15 23 42 / 8%) !important;
border: 1px solid #d1d5db !important;
background: #fff !important;
max-height: 75vh !important;
overflow: hidden auto !important;
.mat-mdc-menu-content {
padding: 4px 6px !important;
overflow-x: hidden !important;
}
.deposit-menu-grid .mat-mdc-menu-item {
font-size: 10.5px !important;
font-weight: 500 !important;
height: 25px !important;
min-height: 25px !important;
line-height: 25px !important;
padding: 0 6px !important;
border-radius: 4px !important;
color: #334155 !important;
font-family:
'IBM Plex Sans',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
sans-serif !important;
transition:
background-color 0.12s ease,
color 0.12s ease !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
.mat-mdc-menu-item-text,
.mdc-list-item__primary-text,
.mdc-list-item__content {
font-size: 10.5px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
color: #334155 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: inline-flex !important;
align-items: center !important;
width: 100% !important;
}
.menu-item-icon,
fa-icon,
i {
font-size: 10.5px !important;
width: 13px !important;
min-width: 13px !important;
text-align: center !important;
margin-right: 5px !important;
opacity: 0.8 !important;
flex-shrink: 0 !important;
}
&:hover {
background-color: #f0f7ff !important;
color: #0d47a1 !important;
.mat-mdc-menu-item-text,
.mdc-list-item__primary-text {
color: #0d47a1 !important;
}
.menu-item-icon,
fa-icon,
i {
opacity: 1 !important;
color: #0d47a1 !important;
}
}
} }
} }
@@ -2012,3 +2278,43 @@ mifosx-client-datatable-step * {
} }
} }
} }
// ===== CBS Compact Enterprise Density Polish =====
// Reduces excessive whitespace and oversized elements across the banking UI
.mat-mdc-table {
th.mat-mdc-header-cell {
padding: 8px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
}
td.mat-mdc-cell {
padding: 6px 12px !important;
font-size: 12px !important;
line-height: 1.35 !important;
}
tr.mat-mdc-row,
tr.mat-mdc-header-row {
height: 36px !important;
min-height: 36px !important;
}
}
// Compact Material Cards
.mat-mdc-card {
padding: 12px 16px !important;
}
// Breadcrumb & Page Titles Compact Spacing
.breadcrumb-container {
margin-bottom: 8px !important;
padding: 4px 0 !important;
}
.mifosx-page-title,
.page-title {
font-size: 17px !important;
margin-bottom: 8px !important;
}
src/theme/mifosx-theme.scss
+1 -1
View File
@@ -53,7 +53,7 @@ $mifosx-typography: mat.m2-define-typography-config(
$button: $mifosx-typography-level $button: $mifosx-typography-level
); );
$mifosx-density: 0; $mifosx-density: -1;
$mifosx-app-theme: mat.m2-define-light-theme( $mifosx-app-theme: mat.m2-define-light-theme(
( (