From 91247a7c69bf4feea2490f3915671617f7bcba1c Mon Sep 17 00:00:00 2001
From: Chris Chen <yuanson.ch@gmail.com>
Date: Thu, 28 May 2026 17:00:49 -0700
Subject: [PATCH] feat(giving): add role-gated finance nav section

---
 .../user-navbar/user-navbar.component.html           |  9 +++++++++
 .../components/user-navbar/user-navbar.component.ts  | 12 ++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/APP/src/app/portals/user-portal/components/user-navbar/user-navbar.component.html b/APP/src/app/portals/user-portal/components/user-navbar/user-navbar.component.html
index 01f88c7..40e4bcf 100644
--- a/APP/src/app/portals/user-portal/components/user-navbar/user-navbar.component.html
+++ b/APP/src/app/portals/user-portal/components/user-navbar/user-navbar.component.html
@@ -51,6 +51,15 @@
                             </button>
                         </ng-container>
                     </div>
+
+                    <div class="nav-section" *ngIf="showFinanceSection">
+                        <h4>Finance</h4>
+                        <button *ngFor="let item of financeNavItems" kendoButton
+                            [fillMode]="item.active ? 'solid' : 'flat'" [themeColor]="item.active ? 'primary' : 'base'"
+                            [svgIcon]="item.icon" class="nav-button" (click)="navigateTo(item.path)">
+                            {{ item.text }}
+                        </button>
+                    </div>
                 </nav>
             </div>
         </kendo-drawer-content>
diff --git a/APP/src/app/portals/user-portal/components/user-navbar/user-navbar.component.ts b/APP/src/app/portals/user-portal/components/user-navbar/user-navbar.component.ts
index 33f484a..1ac5a30 100644
--- a/APP/src/app/portals/user-portal/components/user-navbar/user-navbar.component.ts
+++ b/APP/src/app/portals/user-portal/components/user-navbar/user-navbar.component.ts
@@ -68,8 +68,15 @@ export class UserNavbarComponent implements OnInit, OnDestroy {
     { text: 'User Management', icon: userIcon, path: '/user-portal/admin/users' },
   ];
 
+  public financeNavItems: NavItem[] = [
+    { text: 'Offering Entry', icon: this.creditCardIcon, path: '/user-portal/finance/offering-session' },
+    { text: 'Givings',        icon: this.chartIcon,      path: '/user-portal/finance/givings' },
+    { text: 'Giving Types',   icon: this.buildingIcon,   path: '/user-portal/finance/giving-categories' },
+  ];
+
   public showMemberAdminSection = false;
   public showUserAdminSection = false;
+  public showFinanceSection = false;
 
   private destroy$ = new Subject<void>();
 
@@ -97,6 +104,7 @@ export class UserNavbarComponent implements OnInit, OnDestroy {
       const roles = user?.roles ?? [];
       this.showMemberAdminSection = roles.some(r => r === 'super_admin' || r === 'secretary');
       this.showUserAdminSection   = roles.includes('super_admin');
+      this.showFinanceSection     = roles.some(r => r === 'finance' || r === 'super_admin');
     });
   }
 
@@ -113,12 +121,12 @@ export class UserNavbarComponent implements OnInit, OnDestroy {
   private updateActiveStates(currentUrl: string): void {
     // Reset all active states
     [...this.mainNavItems, ...this.managementNavItems, ...this.supportNavItems,
-     ...this.memberAdminNavItems, ...this.userAdminNavItems]
+     ...this.memberAdminNavItems, ...this.userAdminNavItems, ...this.financeNavItems]
       .forEach(item => item.active = false);
 
     // Set active state for current route
     const activeItem = [...this.mainNavItems, ...this.managementNavItems, ...this.supportNavItems,
-      ...this.memberAdminNavItems, ...this.userAdminNavItems]
+      ...this.memberAdminNavItems, ...this.userAdminNavItems, ...this.financeNavItems]
       .find(item => currentUrl.startsWith(item.path));
 
     if (activeItem) {