From a2d394029aa9e7c579819228775fead5742bd9b5 Mon Sep 17 00:00:00 2001
From: Chris Chen <yuanson.ch@gmail.com>
Date: Thu, 28 May 2026 18:22:50 -0700
Subject: [PATCH] fix(giving): render Finance nav section in UserPortal sidebar

Task 11 added the finance nav to user-navbar.component, but the active
sidebar is rendered inline by UserPortalComponent (app-user-navbar is
not mounted). Added the role-gated Finance section (Offering Entry /
Givings / Giving Types) to UserPortalComponent, matching its
Administration pattern. Verified at runtime: section renders for
super_admin and links load the giving pages.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../portals/user-portal/user-portal.component.html   | 11 +++++++++++
 .../app/portals/user-portal/user-portal.component.ts | 12 ++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/APP/src/app/portals/user-portal/user-portal.component.html b/APP/src/app/portals/user-portal/user-portal.component.html
index 045af41..397ed78 100644
--- a/APP/src/app/portals/user-portal/user-portal.component.html
+++ b/APP/src/app/portals/user-portal/user-portal.component.html
@@ -73,6 +73,17 @@
                         </a>
                     </ng-container>
                 </div>
+
+                <div class="nav-section" *ngIf="showFinanceSection">
+                    <h4 *ngIf="!sidebarCollapsed">Finance</h4>
+                    <a *ngFor="let item of financeNavItems" class="nav-item" [class.active]="item.active"
+                        [title]="item.text" (click)="navigateTo(item.path)">
+                        <div class="nav-icon">
+                            <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
+                        </div>
+                        <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
+                    </a>
+                </div>
             </nav>
 
             <div class="sidebar-footer" *ngIf="!sidebarCollapsed">
diff --git a/APP/src/app/portals/user-portal/user-portal.component.ts b/APP/src/app/portals/user-portal/user-portal.component.ts
index cb0b975..dbdd669 100644
--- a/APP/src/app/portals/user-portal/user-portal.component.ts
+++ b/APP/src/app/portals/user-portal/user-portal.component.ts
@@ -70,8 +70,15 @@ export class UserPortalComponent 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.creditCardIcon, path: '/user-portal/finance/givings' },
+    { text: 'Giving Types',   icon: this.creditCardIcon, path: '/user-portal/finance/giving-categories' },
+  ];
+
   public showMemberAdminSection = false;
   public showUserAdminSection = false;
+  public showFinanceSection = false;
 
   private destroy$ = new Subject<void>();
 
@@ -114,6 +121,7 @@ export class UserPortalComponent 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');
       });
   }
 
@@ -144,6 +152,7 @@ export class UserPortalComponent implements OnInit, OnDestroy {
       ...this.supportNavItems,
       ...this.memberAdminNavItems,
       ...this.userAdminNavItems,
+      ...this.financeNavItems,
     ];
     allItems.forEach(item => (item.active = false));
 
@@ -182,6 +191,9 @@ export class UserPortalComponent implements OnInit, OnDestroy {
       'settings': 'Settings',
       'admin/members': 'Member Management',
       'admin/users': 'User Management',
+      'finance/offering-session': 'Sunday Offering Entry',
+      'finance/givings': 'Givings',
+      'finance/giving-categories': 'Giving Types',
     };
     return titles[page] ?? 'Dashboard';
   }