feat(giving): add role-gated finance nav section

This commit is contained in:
Chris Chen
2026-05-28 17:00:49 -07:00
parent 4a2b142061
commit 91247a7c69
2 changed files with 19 additions and 2 deletions
@@ -51,6 +51,15 @@
</button> </button>
</ng-container> </ng-container>
</div> </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> </nav>
</div> </div>
</kendo-drawer-content> </kendo-drawer-content>
@@ -68,8 +68,15 @@ export class UserNavbarComponent implements OnInit, OnDestroy {
{ text: 'User Management', icon: userIcon, path: '/user-portal/admin/users' }, { 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 showMemberAdminSection = false;
public showUserAdminSection = false; public showUserAdminSection = false;
public showFinanceSection = false;
private destroy$ = new Subject<void>(); private destroy$ = new Subject<void>();
@@ -97,6 +104,7 @@ export class UserNavbarComponent implements OnInit, OnDestroy {
const roles = user?.roles ?? []; const roles = user?.roles ?? [];
this.showMemberAdminSection = roles.some(r => r === 'super_admin' || r === 'secretary'); this.showMemberAdminSection = roles.some(r => r === 'super_admin' || r === 'secretary');
this.showUserAdminSection = roles.includes('super_admin'); 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 { private updateActiveStates(currentUrl: string): void {
// Reset all active states // Reset all active states
[...this.mainNavItems, ...this.managementNavItems, ...this.supportNavItems, [...this.mainNavItems, ...this.managementNavItems, ...this.supportNavItems,
...this.memberAdminNavItems, ...this.userAdminNavItems] ...this.memberAdminNavItems, ...this.userAdminNavItems, ...this.financeNavItems]
.forEach(item => item.active = false); .forEach(item => item.active = false);
// Set active state for current route // Set active state for current route
const activeItem = [...this.mainNavItems, ...this.managementNavItems, ...this.supportNavItems, const activeItem = [...this.mainNavItems, ...this.managementNavItems, ...this.supportNavItems,
...this.memberAdminNavItems, ...this.userAdminNavItems] ...this.memberAdminNavItems, ...this.userAdminNavItems, ...this.financeNavItems]
.find(item => currentUrl.startsWith(item.path)); .find(item => currentUrl.startsWith(item.path));
if (activeItem) { if (activeItem) {