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

Compare commits

base: CBSNexora/cbsnexora:799a6930b88dfd4f296368ee6a31bc1d219f6780
Branches Tags
CBSNexora/cbsnexora:dev CBSNexora/cbsnexora:dev-latest CBSNexora/cbsnexora:feature/investment CBSNexora/cbsnexora:feature-demo CBSNexora/cbsnexora:feature/advanceLoanProduct CBSNexora/cbsnexora:feature/approval-live-badge-counts CBSNexora/cbsnexora:feature/voucher-correction-and-cash-transfer-approval CBSNexora/cbsnexora:feature/cashier-cash-ops-and-txn-undo-lock CBSNexora/cbsnexora:feature/merge-dds-advance-loan-into-dev-latest CBSNexora/cbsnexora:feature/fd-interest-posting CBSNexora/cbsnexora:main CBSNexora/cbsnexora:feature/fd-interest-posting-approval CBSNexora/cbsnexora:feature/locker CBSNexora/cbsnexora:feature/dds CBSNexora/cbsnexora:feature/bugfix CBSNexora/cbsnexora:maker-checker CBSNexora/cbsnexora:feature/loanProductCreation CBSNexora/cbsnexora:feature/dds-agent-settlement-reports CBSNexora/cbsnexora:demo-backup CBSNexora/cbsnexora:demo CBSNexora/cbsnexora:dev-backup CBSNexora/cbsnexora:uate
...
compare: CBSNexora/cbsnexora:feature/fd-interest-posting
Branches Tags
CBSNexora/cbsnexora:dev-latest CBSNexora/cbsnexora:feature/investment CBSNexora/cbsnexora:feature-demo CBSNexora/cbsnexora:feature/advanceLoanProduct CBSNexora/cbsnexora:feature/approval-live-badge-counts CBSNexora/cbsnexora:feature/voucher-correction-and-cash-transfer-approval CBSNexora/cbsnexora:feature/cashier-cash-ops-and-txn-undo-lock CBSNexora/cbsnexora:feature/merge-dds-advance-loan-into-dev-latest CBSNexora/cbsnexora:feature/fd-interest-posting CBSNexora/cbsnexora:main CBSNexora/cbsnexora:feature/fd-interest-posting-approval CBSNexora/cbsnexora:feature/locker CBSNexora/cbsnexora:feature/dds CBSNexora/cbsnexora:feature/bugfix CBSNexora/cbsnexora:dev CBSNexora/cbsnexora:maker-checker CBSNexora/cbsnexora:feature/loanProductCreation CBSNexora/cbsnexora:feature/dds-agent-settlement-reports CBSNexora/cbsnexora:demo-backup CBSNexora/cbsnexora:demo CBSNexora/cbsnexora:dev-backup CBSNexora/cbsnexora:uate
2 Commits
799a6930b8 ... feature/fd-interest-posting
Author SHA1 Message Date
niteshandClaude Opus 5.5 a87cf42c5c 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 <noreply@anthropic.com>
 2026-10-12 11:55:03 +05:30
niteshandClaude Opus 5.5 3928936b93 feat(ui): animated boot splash and loading screen 
Show a Lottie-animated splash while the app bundle boots and dismiss it
once WebAppComponent initialises, plus a reusable mifosx-loading-screen
component with loading and error animations. lottie.min.js is served
from the lottie-web package instead of being vendored into src/assets.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 2026-10-10 15:34:31 +05:30
23 changed files with 8090 additions and 565 deletions
Expand all files Collapse all files
angular.json
+7
View File
@@ -31,6 +31,8 @@
"@angular/localize/init" "@angular/localize/init"
], ],
"assets": [ "assets": [
"src/favicon.ico",
"src/apple-touch-icon.png",
"src/assets/images/cbsnexora-favicon.svg", "src/assets/images/cbsnexora-favicon.svg",
"src/robots.txt", "src/robots.txt",
"src/manifest.json", "src/manifest.json",
@@ -39,6 +41,11 @@
"glob": "**/*", "glob": "**/*",
"input": "node_modules/tinymce", "input": "node_modules/tinymce",
"output": "assets/tinymce" "output": "assets/tinymce"
},
{
"glob": "lottie.min.js",
"input": "node_modules/lottie-web/build/player",
"output": "assets/js"
} }
], ],
"styles": [ "styles": [
package-lock.json
Generated
+7
View File
@@ -41,6 +41,7 @@
"jspdf-autotable": "^5.0.2", "jspdf-autotable": "^5.0.2",
"lightgallery": "^2.9.0", "lightgallery": "^2.9.0",
"lodash": "4.17.23", "lodash": "4.17.23",
"lottie-web": "^5.13.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"ngx-image-cropper": "^9.1.6", "ngx-image-cropper": "^9.1.6",
"ngx-mat-select-search": "^8.0.2", "ngx-mat-select-search": "^8.0.2",
@@ -18380,6 +18381,12 @@
"url": "https://github.com/chalk/wrap-ansi?sponsor=1" "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
} }
}, },
"node_modules/lottie-web": {
"version": "5.13.0",
"resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
"integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
"license": "MIT"
},
"node_modules/lru-cache": { "node_modules/lru-cache": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
package.json
+1
View File
@@ -71,6 +71,7 @@
"jspdf-autotable": "^5.0.2", "jspdf-autotable": "^5.0.2",
"lightgallery": "^2.9.0", "lightgallery": "^2.9.0",
"lodash": "4.17.23", "lodash": "4.17.23",
"lottie-web": "^5.13.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"ngx-image-cropper": "^9.1.6", "ngx-image-cropper": "^9.1.6",
"ngx-mat-select-search": "^8.0.2", "ngx-mat-select-search": "^8.0.2",
src/app/app.module.ts
+2
View File
@@ -96,6 +96,7 @@ import { TokenInterceptor as ZitadelTokenInterceptor } from './zitadel/token.int
import { AuthService } from './zitadel/auth.service'; import { AuthService } from './zitadel/auth.service';
import { environment } from '../environments/environment'; import { environment } from '../environments/environment';
import { CallbackComponent } from './zitadel/callback/callback.component'; import { CallbackComponent } from './zitadel/callback/callback.component';
import { LoadingScreenComponent } from './shared/loading-screen/loading-screen.component';
import { OAuthModule } from 'angular-oauth2-oidc'; import { OAuthModule } from 'angular-oauth2-oidc';
export class CustomMissingTranslationHandler implements MissingTranslationHandler { export class CustomMissingTranslationHandler implements MissingTranslationHandler {
@@ -195,6 +196,7 @@ export function HttpLoaderFactory(http: HttpClient) {
AppRoutingModule, AppRoutingModule,
NotFoundComponent, NotFoundComponent,
CallbackComponent, CallbackComponent,
LoadingScreenComponent,
OAuthModule.forRoot() OAuthModule.forRoot()
], ],
providers: [ providers: [
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
+80
View File
@@ -0,0 +1,80 @@
<!--
Copyright since 2025 Mifos Initiative
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
@if (active) {
@if (currentMode === 'overlay') {
<!-- Mifos Mobile Transaction / Action Progress Overlay -->
<div class="cbs-loading-backdrop" (click)="preventDismiss($event)">
<div class="cbs-loading-dialog" role="dialog" aria-modal="true" [attr.aria-label]="title || 'Loading'">
<div class="cbs-lottie-container" #lottieContainer>
<!-- Vector Fallback if Lottie is loading -->
@if (!lottieLoaded) {
<div class="cbs-vector-spinner">
<div class="spinner-ring ring-outer"></div>
<div class="spinner-ring ring-mid"></div>
<div class="spinner-ring ring-inner"></div>
</div>
}
</div>
<div class="cbs-loading-dialog__content">
<h3 class="cbs-loading-dialog__title">{{ title || 'CBS Nexora' }}</h3>
<p class="cbs-loading-dialog__message">{{ message || 'Please wait...' }}</p>
</div>
<div class="cbs-loading-pulse-bar">
<div class="cbs-pulse-bar__indicator"></div>
</div>
</div>
</div>
}
@if (currentMode === 'fullscreen') {
<!-- Full-Screen App Boot / Splash Screen -->
<div class="cbs-fullscreen-loader">
<div class="cbs-fullscreen-loader__brand">
<img src="assets/images/cbsnexora-logo.png" alt="CBS Nexora" class="cbs-fullscreen-loader__logo-img" />
<span class="cbs-brand-sub">Core Banking System</span>
</div>
<div class="cbs-lottie-container cbs-lottie-container--large" #lottieContainer>
@if (!lottieLoaded) {
<div class="cbs-vector-spinner cbs-vector-spinner--large">
<div class="spinner-ring ring-outer"></div>
<div class="spinner-ring ring-mid"></div>
<div class="spinner-ring ring-inner"></div>
</div>
}
</div>
<div class="cbs-progress-track">
<div class="cbs-progress-fill"></div>
</div>
<p class="cbs-fullscreen-loader__status">{{ message || 'Connecting to Core Banking Engine...' }}</p>
</div>
}
@if (currentMode === 'inline') {
<!-- Inline Component Loader -->
<div class="cbs-inline-loader">
<div class="cbs-lottie-container cbs-lottie-container--compact" #lottieContainer>
@if (!lottieLoaded) {
<div class="cbs-vector-spinner cbs-vector-spinner--compact">
<div class="spinner-ring ring-outer"></div>
<div class="spinner-ring ring-mid"></div>
<div class="spinner-ring ring-inner"></div>
</div>
}
</div>
@if (message) {
<p class="cbs-inline-loader__message">{{ message }}</p>
}
</div>
}
}
src/app/shared/loading-screen/loading-screen.component.scss
+349
View File
@@ -0,0 +1,349 @@
/**
* Copyright since 2025 Mifos Initiative
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
:host {
display: block;
}
/* ==========================================================================
Overlay Mode (MifosProgressIndicatorOverlay / MifosLoadingDialog)
========================================================================== */
.cbs-loading-backdrop {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: rgb(9 13 22 / 72%);
backdrop-filter: blur(8px);
animation: backdrop-fade-in 0.25s ease-out forwards;
}
.cbs-loading-dialog {
position: relative;
width: 90%;
max-width: 340px;
padding: 28px 24px;
background: #111827;
color: #f8fafc;
border-radius: 20px;
border: 1px solid rgb(255 255 255 / 12%);
box-shadow:
0 25px 60px -15px rgb(0 0 0 / 65%),
0 0 35px rgb(37 99 235 / 18%);
text-align: center;
overflow: hidden;
animation: dialog-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
:host-context([data-theme='light']) .cbs-loading-dialog,
:host-context(.light-theme) .cbs-loading-dialog {
background: #fff;
color: #0f172a;
border-color: rgb(0 0 0 / 8%);
box-shadow:
0 25px 50px -12px rgb(0 0 0 / 25%),
0 0 25px rgb(37 99 235 / 12%);
}
.cbs-loading-dialog__content {
margin-top: 10px;
margin-bottom: 16px;
}
.cbs-loading-dialog__title {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 6px;
}
.cbs-loading-dialog__message {
font-size: 0.82rem;
color: #94a3b8;
line-height: 1.45;
margin: 0;
}
:host-context([data-theme='light']) .cbs-loading-dialog__message,
:host-context(.light-theme) .cbs-loading-dialog__message {
color: #64748b;
}
/* Pulse bar at dialog bottom */
.cbs-loading-pulse-bar {
width: 100%;
height: 3px;
background: rgb(255 255 255 / 8%);
border-radius: 99px;
overflow: hidden;
position: relative;
margin-top: 6px;
}
.cbs-pulse-bar__indicator {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
background: linear-gradient(90deg, #2563eb, #38bdf8);
border-radius: 99px;
animation: pulse-bar-slide 1.4s infinite ease-in-out;
}
/* ==========================================================================
Full-Screen Mode (App Boot / Splash)
========================================================================== */
.cbs-fullscreen-loader {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, #0f172a 0%, #090d16 100%);
color: #f8fafc;
padding: 24px;
text-align: center;
}
:host-context([data-theme='light']) .cbs-fullscreen-loader,
:host-context(.light-theme) .cbs-fullscreen-loader {
background: radial-gradient(circle at center, #fff 0%, #f1f5f9 100%);
color: #0f172a;
}
.cbs-fullscreen-loader__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
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 {
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgb(14 165 233 / 35%);
margin-bottom: 6px;
}
.cbs-brand-name {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0;
}
.cbs-brand-sub {
font-size: 0.8rem;
color: #94a3b8;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cbs-progress-track {
width: 240px;
height: 5px;
background: rgb(255 255 255 / 10%);
border-radius: 99px;
overflow: hidden;
margin: 18px 0 12px;
position: relative;
}
.cbs-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 45%;
background: linear-gradient(90deg, #2563eb, #38bdf8);
border-radius: 99px;
box-shadow: 0 0 12px rgb(56 189 248 / 50%);
animation: pulse-bar-slide 1.5s infinite ease-in-out;
}
.cbs-fullscreen-loader__status {
font-size: 0.82rem;
color: #94a3b8;
font-family: inherit;
margin: 0;
}
/* ==========================================================================
Inline Mode
========================================================================== */
.cbs-inline-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
text-align: center;
}
.cbs-inline-loader__message {
font-size: 0.82rem;
color: #94a3b8;
margin-top: 10px;
}
/* ==========================================================================
Lottie & Vector Spinner Dimensions
========================================================================== */
.cbs-lottie-container {
width: 110px;
height: 110px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.cbs-lottie-container--large {
width: 140px;
height: 140px;
}
.cbs-lottie-container--compact {
width: 64px;
height: 64px;
}
/* Vector Spinner Fallback (CSS Multi-Ring Loader) */
.cbs-vector-spinner {
width: 72px;
height: 72px;
position: relative;
}
.cbs-vector-spinner--large {
width: 96px;
height: 96px;
}
.cbs-vector-spinner--compact {
width: 44px;
height: 44px;
}
.spinner-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 3px solid transparent;
}
.ring-outer {
border-top-color: #2563eb;
border-right-color: #2563eb;
animation: spin-outer 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.ring-mid {
inset: 6px;
border-bottom-color: #0ea5e9;
border-left-color: #0ea5e9;
animation: spin-mid 1.6s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
}
.ring-inner {
inset: 13px;
border-top-color: #10b981;
animation: spin-inner 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
/* ==========================================================================
Keyframe Animations
========================================================================== */
@keyframes backdrop-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes dialog-scale-in {
from {
opacity: 0;
transform: scale(0.92);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes pulse-bar-slide {
0% {
left: -40%;
width: 30%;
}
50% {
left: 35%;
width: 50%;
}
100% {
left: 100%;
width: 30%;
}
}
@keyframes spin-outer {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-mid {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-inner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/app/shared/loading-screen/loading-screen.component.ts
+168
View File
@@ -0,0 +1,168 @@
/**
* Copyright since 2025 Mifos Initiative
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
import {
Component,
OnInit,
OnDestroy,
Input,
ElementRef,
ViewChild,
AfterViewInit,
inject,
ChangeDetectorRef
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { Subscription } from 'rxjs';
import { LoadingScreenService, LoadingConfig } from './loading-screen.service';
declare const lottie: any;
@Component({
selector: 'mifosx-loading-screen',
standalone: true,
imports: [CommonModule],
templateUrl: './loading-screen.component.html',
styleUrls: ['./loading-screen.component.scss']
})
export class LoadingScreenComponent implements OnInit, AfterViewInit, OnDestroy {
private readonly loadingService = inject(LoadingScreenService);
private readonly cdr = inject(ChangeDetectorRef);
@Input() mode: 'overlay' | 'inline' | 'fullscreen' = 'overlay';
@Input() title: string = 'CBS Nexora';
@Input() message: string = 'Processing transaction...';
@Input() active: boolean = false;
@Input() isGlobalOverlay: boolean = true;
@ViewChild('lottieContainer') lottieContainerRef?: ElementRef<HTMLDivElement>;
currentMode: 'overlay' | 'inline' | 'fullscreen' = 'overlay';
lottieLoaded: boolean = false;
private animInstance: any = null;
private subscription?: Subscription;
ngOnInit(): void {
this.currentMode = this.mode;
if (this.isGlobalOverlay) {
this.subscription = new Subscription();
this.subscription.add(
this.loadingService.isVisible$.subscribe((visible) => {
this.active = visible;
this.cdr.markForCheck();
if (visible) {
setTimeout(() => this.initLottie(), 50);
} else {
this.destroyLottie();
}
})
);
this.subscription.add(
this.loadingService.config$.subscribe((cfg: LoadingConfig) => {
if (cfg.title !== undefined) this.title = cfg.title;
if (cfg.message !== undefined) this.message = cfg.message;
if (cfg.mode !== undefined) this.currentMode = cfg.mode;
this.cdr.markForCheck();
})
);
}
}
ngAfterViewInit(): void {
if (this.active) {
this.initLottie();
}
}
ngOnDestroy(): void {
this.subscription?.unsubscribe();
this.destroyLottie();
}
preventDismiss(event: MouseEvent): void {
event.stopPropagation();
}
private initLottie(): void {
if (!this.lottieContainerRef?.nativeElement) return;
this.destroyLottie();
const container = this.lottieContainerRef.nativeElement;
// Check if lottie-web global is available
if (typeof lottie !== 'undefined') {
try {
this.animInstance = lottie.loadAnimation({
container,
renderer: 'svg',
loop: true,
autoplay: true,
path: 'assets/animations/loading_animation.json'
});
this.lottieLoaded = true;
this.cdr.markForCheck();
return;
} catch (err) {
console.warn('Could not load Lottie animation, using vector fallback', err);
}
}
// Try dynamic script load of local asset if not loaded yet
this.loadLottieScript()
.then(() => {
if (typeof lottie !== 'undefined' && this.lottieContainerRef?.nativeElement) {
this.animInstance = lottie.loadAnimation({
container: this.lottieContainerRef.nativeElement,
renderer: 'svg',
loop: true,
autoplay: true,
path: 'assets/animations/loading_animation.json'
});
this.lottieLoaded = true;
this.cdr.markForCheck();
}
})
.catch(() => {
this.lottieLoaded = false;
this.cdr.markForCheck();
});
}
private loadLottieScript(): Promise<void> {
return new Promise((resolve, reject) => {
if (typeof lottie !== 'undefined') {
resolve();
return;
}
const existingScript = document.getElementById('cbs-lottie-script');
if (existingScript) {
existingScript.addEventListener('load', () => resolve());
return;
}
const script = document.createElement('script');
script.id = 'cbs-lottie-script';
script.src = 'assets/js/lottie.min.js';
script.onload = () => resolve();
script.onerror = () => reject();
document.head.appendChild(script);
});
}
private destroyLottie(): void {
if (this.animInstance) {
try {
this.animInstance.destroy();
} catch (_) {}
this.animInstance = null;
}
}
}
src/app/shared/loading-screen/loading-screen.service.ts
+61
View File
@@ -0,0 +1,61 @@
/**
* Copyright since 2025 Mifos Initiative
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
export interface LoadingConfig {
title?: string;
message?: string;
mode?: 'overlay' | 'inline' | 'fullscreen';
}
@Injectable({
providedIn: 'root'
})
export class LoadingScreenService {
private readonly visibleSubject = new BehaviorSubject<boolean>(false);
private readonly configSubject = new BehaviorSubject<LoadingConfig>({
title: 'CBS Nexora',
message: 'Processing transaction...',
mode: 'overlay'
});
readonly isVisible$: Observable<boolean> = this.visibleSubject.asObservable();
readonly config$: Observable<LoadingConfig> = this.configSubject.asObservable();
/**
* Show the loading screen/overlay
* @param message Optional message to display (e.g. "Processing Transfer...")
* @param title Optional title to display (defaults to "CBS Nexora")
* @param mode Optional display mode ('overlay' | 'fullscreen')
*/
show(message?: string, title?: string, mode: 'overlay' | 'fullscreen' = 'overlay'): void {
this.configSubject.next({
title: title || 'CBS Nexora',
message: message || 'Please wait...',
mode
});
this.visibleSubject.next(true);
}
/**
* Hide the loading screen/overlay
*/
hide(): void {
this.visibleSubject.next(false);
}
/**
* Update message while loading screen is active
*/
setMessage(message: string): void {
const current = this.configSubject.getValue();
this.configSubject.next({ ...current, message });
}
}
src/app/shared/shared.module.ts
+3
View File
@@ -30,6 +30,7 @@ import { SearchToolComponent } from './search-tool/search-tool.component';
import { KeyboardShortcutsDialogComponent } from './keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component'; import { KeyboardShortcutsDialogComponent } from './keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
import { ServerSelectorComponent } from './server-selector/server-selector.component'; import { ServerSelectorComponent } from './server-selector/server-selector.component';
import { TenantSelectorComponent } from './tenant-selector/tenant-selector.component'; import { TenantSelectorComponent } from './tenant-selector/tenant-selector.component';
import { LoadingScreenComponent } from './loading-screen/loading-screen.component';
/** Custom Modules */ /** Custom Modules */
import { IconsModule } from './icons.module'; import { IconsModule } from './icons.module';
@@ -116,9 +117,11 @@ import { DatetimePickerStubComponent } from './datetime-picker-stub/datetime-pic
DropdownComponent, DropdownComponent,
InputAmountComponent, InputAmountComponent,
InputPasswordComponent, InputPasswordComponent,
LoadingScreenComponent,
DatetimePickerStubComponent // temporarily added stub for datetime picker DatetimePickerStubComponent // temporarily added stub for datetime picker
], ],
exports: [ exports: [
LoadingScreenComponent,
FileUploadComponent, FileUploadComponent,
FooterComponent, FooterComponent,
LanguageSelectorComponent, LanguageSelectorComponent,
src/app/web-app.component.html
+1
View File
@@ -7,3 +7,4 @@
--> -->
<router-outlet></router-outlet> <router-outlet></router-outlet>
<mifosx-loading-screen></mifosx-loading-screen>
src/app/web-app.component.ts
+5
View File
@@ -296,6 +296,11 @@ export class WebAppComponent implements OnInit, OnDestroy {
}); });
}); });
} }
// Dismiss initial application boot splash screen smoothly
if (typeof (window as any).hideAppSplash === 'function') {
(window as any).hideAppSplash();
}
} }
ngOnDestroy() { ngOnDestroy() {
src/assets/animations/error_animation.json
+2755
View File
File diff suppressed because it is too large Load Diff
src/assets/animations/loading_animation.json
+3168
View File
File diff suppressed because it is too large Load Diff
src/assets/images/mifos_splash_screen_logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

src/assets/styles/_loader.scss
+72 -30
View File
@@ -6,53 +6,95 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. * file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/ */
/* ==========================================================================
Modernized Loader Wrapper (Inspired by openMF/mifos-mobile)
Supports full-screen and embedded containers with smooth vector physics.
========================================================================== */
.loader-wrapper { .loader-wrapper {
height: 100vh; position: relative;
width: 100vw; display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 280px;
height: 100%;
background: transparent;
/* Modern orbital rings that replace legacy rigid triangles smoothly */
.triangle { .triangle {
width: 0;
height: 0;
border-style: solid;
position: absolute; position: absolute;
animation: rotate 0.8s infinite 0.2s; border-radius: 50%;
border-style: solid;
box-sizing: border-box;
transition: all 0.3s ease;
} }
.bottom { .bottom {
border-width: 0 90px 90px; width: 72px;
border-color: transparent transparent #1fb050; height: 72px;
bottom: calc(50% - 100px); border-width: 3px;
left: calc(50% - 90px); border-color: #2563eb transparent transparent;
animation: cbs-spin-ring 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
box-shadow: 0 0 16px rgb(37 99 235 / 35%);
} }
.top { .top {
border-width: 90px 90px 0; width: 54px;
border-color: #b4d575 transparent transparent; height: 54px;
top: calc(50% - 100px); border-width: 3px;
left: calc(50% - 90px); border-color: transparent transparent #0ea5e9;
animation: cbs-spin-ring 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
box-shadow: 0 0 14px rgb(14 165 233 / 35%);
} }
.left { .left {
border-width: 90px 0 90px 90px; width: 36px;
border-color: transparent transparent transparent #1074b9; height: 36px;
top: calc(50% - 90px); border-width: 2.5px;
left: calc(50% - 100px); border-color: #10b981 transparent transparent;
animation: cbs-spin-ring 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
box-shadow: 0 0 10px rgb(16 185 129 / 35%);
} }
.right { .right {
border-width: 90px 90px 90px 0; width: 18px;
border-color: transparent #1daeec transparent transparent; height: 18px;
top: calc(50% - 90px); border-width: 2px;
right: calc(50% - 100px); border-color: transparent #38bdf8 transparent transparent;
animation: cbs-spin-ring 0.7s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
} }
@keyframes rotate { /* Optional central glowing core */
from { &::after {
transform: rotate(0deg); content: '';
} width: 8px;
height: 8px;
to { border-radius: 50%;
transform: rotate(360deg); background: #38bdf8;
} box-shadow: 0 0 12px #38bdf8;
animation: cbs-pulse-core 1.5s ease-in-out infinite;
}
}
@keyframes cbs-spin-ring {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes cbs-pulse-core {
0%,
100% {
transform: scale(0.85);
opacity: 0.6;
}
50% {
transform: scale(1.3);
opacity: 1;
} }
} }
src/index.html
+286 -8
View File
@@ -11,7 +11,7 @@
<html lang="en" class="h-full bg-gray-100"> <html lang="en" class="h-full bg-gray-100">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>{{'APP_NAME' | translate}}</title> <title>CBS Nexora</title>
<base href="/" /> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -111,13 +111,291 @@
}); });
</script> </script>
<mifosx-web-app> <div id="cbs-app-splash-screen" class="cbs-init-screen">
<div class="loader-wrapper"> <style>
<div class="bottom triangle"></div> .cbs-init-screen {
<div class="top triangle"></div> position: fixed;
<div class="left triangle"></div> inset: 0;
<div class="right triangle"></div> display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, #0f172a 0%, #090d16 100%);
color: #f8fafc;
font-family:
'Plus Jakarta Sans',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
sans-serif;
z-index: 999999;
overflow: hidden;
transition:
opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cbs-init-screen.cbs-splash-fade-out {
opacity: 0;
transform: scale(1.02);
pointer-events: none;
}
.cbs-init-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
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 {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(14, 165, 233, 0.35);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.cbs-init-title {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0;
}
.cbs-init-sub {
font-size: 0.78rem;
color: #94a3b8;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cbs-init-lottie-box {
width: 130px;
height: 130px;
margin: 8px auto;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.25));
}
.cbs-init-spinner {
width: 64px;
height: 64px;
position: relative;
}
.cbs-init-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 3px solid transparent;
}
.cbs-init-ring-1 {
border-top-color: #2563eb;
border-right-color: #2563eb;
animation: cbsInitSpin 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.cbs-init-ring-2 {
inset: 6px;
border-bottom-color: #0ea5e9;
border-left-color: #0ea5e9;
animation: cbsInitSpin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
}
.cbs-init-ring-3 {
inset: 12px;
border-top-color: #10b981;
animation: cbsInitSpin 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.cbs-init-track {
width: 260px;
height: 5px;
background: rgba(255, 255, 255, 0.1);
border-radius: 99px;
overflow: hidden;
margin: 18px 0 12px;
position: relative;
}
.cbs-init-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #2563eb, #38bdf8);
border-radius: 99px;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
transition: width 0.3s ease;
}
.cbs-init-status {
font-size: 0.82rem;
color: #94a3b8;
font-family: inherit;
margin: 0;
height: 20px;
}
@keyframes cbsInitSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<div class="cbs-init-brand">
<div class="cbs-init-logo-wrap">
<img
src="assets/images/cbsnexora-logo.png"
alt="CBS Nexora"
class="cbs-init-logo-img"
onerror="
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>
<span class="cbs-init-sub">Next-Generation Core Banking</span>
</div> </div>
</mifosx-web-app>
<div id="cbs-init-lottie-target" class="cbs-init-lottie-box">
<div class="cbs-init-spinner">
<div class="cbs-init-ring cbs-init-ring-1"></div>
<div class="cbs-init-ring cbs-init-ring-2"></div>
<div class="cbs-init-ring cbs-init-ring-3"></div>
</div>
</div>
<div class="cbs-init-track">
<div class="cbs-init-fill" id="cbs-init-progress-bar"></div>
</div>
<p class="cbs-init-status" id="cbs-init-status-text">Connecting to Secure Banking Gateway...</p>
</div>
<script>
(function () {
var splash = document.getElementById('cbs-app-splash-screen');
var bar = document.getElementById('cbs-init-progress-bar');
var status = document.getElementById('cbs-init-status-text');
var progress = 0;
var minTimePassed = false;
var angularReady = false;
var dismissed = false;
// Load Lottie Vector Animation
var script = document.createElement('script');
script.src = 'assets/js/lottie.min.js';
script.onload = function () {
if (typeof lottie !== 'undefined') {
var target = document.getElementById('cbs-init-lottie-target');
if (target) {
target.innerHTML = '';
lottie.loadAnimation({
container: target,
renderer: 'svg',
loop: true,
autoplay: true,
path: 'assets/animations/loading_animation.json'
});
}
}
};
document.head.appendChild(script);
// Progress simulation stages (Guaranteed ~2 seconds duration on refresh)
var interval = setInterval(function () {
if (progress < 90) {
progress += 5;
} else if (angularReady && progress < 100) {
progress += 5;
}
if (bar) bar.style.width = Math.min(progress, 100) + '%';
if (status) {
if (progress >= 85) {
status.innerText = 'Launching CBS Nexora Dashboard...';
} else if (progress >= 60) {
status.innerText = 'Synchronizing core banking ledger schema...';
} else if (progress >= 30) {
status.innerText = 'Authenticating token & cryptographic keys...';
}
}
if (progress >= 100 && angularReady && minTimePassed) {
clearInterval(interval);
dismissSplash();
}
}, 90);
// Enforce minimum hold time (2000ms = 2 seconds) so refresh always shows the animation
setTimeout(function () {
minTimePassed = true;
if (angularReady) {
progress = 100;
if (bar) bar.style.width = '100%';
dismissSplash();
}
}, 2000);
function dismissSplash() {
if (dismissed) return;
dismissed = true;
clearInterval(interval);
if (bar) bar.style.width = '100%';
if (status) status.innerText = 'Ready! System loaded successfully.';
setTimeout(function () {
if (splash) {
splash.classList.add('cbs-splash-fade-out');
setTimeout(function () {
if (splash && splash.parentNode) {
splash.parentNode.removeChild(splash);
}
}, 600);
}
}, 250);
}
// Global hook for Angular to notify when ready
window.hideAppSplash = function () {
angularReady = true;
if (minTimePassed) {
dismissSplash();
}
};
// Safety fallback (Max 7s in case of backend network failure)
setTimeout(function () {
angularReady = true;
minTimePassed = true;
dismissSplash();
}, 7000);
})();
</script>
<mifosx-web-app></mifosx-web-app>
</body> </body>
</html> </html>
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(
( (