From 95008788f3f09597125cdfd24ca42e01032d15f9 Mon Sep 17 00:00:00 2001
From: Chris Chen <yuanson.ch@gmail.com>
Date: Fri, 29 May 2026 18:59:25 -0700
Subject: [PATCH] feat(expense): wire routes + sidebar nav for expense pages

Also fix kendo-grid [total] binding in expenses-page template by
switching to GridDataResult object form ({ data, total }) on [data].

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 APP/src/app/app.routes.ts                     | 23 +++++++++++++++++++
 .../expenses-page.component.html              |  3 +--
 .../user-portal/user-portal.component.html    | 11 +++++++++
 .../user-portal/user-portal.component.ts      | 18 ++++++++++++---
 4 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/APP/src/app/app.routes.ts b/APP/src/app/app.routes.ts
index f9d6097..a8ddb1b 100644
--- a/APP/src/app/app.routes.ts
+++ b/APP/src/app/app.routes.ts
@@ -9,6 +9,10 @@ import { UsersPageComponent } from './features/users/pages/users-page/users-page
 import { GivingCategoriesPageComponent } from './features/giving/pages/giving-categories-page/giving-categories-page.component';
 import { GivingsPageComponent } from './features/giving/pages/givings-page/givings-page.component';
 import { OfferingSessionPageComponent } from './features/giving/pages/offering-session-page/offering-session-page.component';
+import { ExpenseCategoriesPageComponent } from './features/expense/pages/expense-categories-page/expense-categories-page.component';
+import { ExpensesPageComponent } from './features/expense/pages/expenses-page/expenses-page.component';
+import { MyReimbursementsPageComponent } from './features/expense/pages/my-reimbursements-page/my-reimbursements-page.component';
+import { MonthlyStatementPageComponent } from './features/expense/pages/monthly-statement-page/monthly-statement-page.component';
 
 export const routes: Routes = [
     // Public routes
@@ -47,6 +51,25 @@ export const routes: Routes = [
                 canActivate: [RoleGuard],
                 data: { roles: ['finance', 'super_admin'] },
             },
+            { path: 'reimbursements', component: MyReimbursementsPageComponent },
+            {
+                path: 'finance/expenses',
+                component: ExpensesPageComponent,
+                canActivate: [RoleGuard],
+                data: { roles: ['finance', 'super_admin'] },
+            },
+            {
+                path: 'finance/expense-categories',
+                component: ExpenseCategoriesPageComponent,
+                canActivate: [RoleGuard],
+                data: { roles: ['finance', 'super_admin'] },
+            },
+            {
+                path: 'finance/monthly-statement',
+                component: MonthlyStatementPageComponent,
+                canActivate: [RoleGuard],
+                data: { roles: ['finance', 'super_admin'] },
+            },
         ]
     },
 
diff --git a/APP/src/app/features/expense/pages/expenses-page/expenses-page.component.html b/APP/src/app/features/expense/pages/expenses-page/expenses-page.component.html
index 639263b..483e1e1 100644
--- a/APP/src/app/features/expense/pages/expenses-page/expenses-page.component.html
+++ b/APP/src/app/features/expense/pages/expenses-page/expenses-page.component.html
@@ -44,12 +44,11 @@
 
   <!-- Main grid -->
   <kendo-grid
-    [data]="rows"
+    [data]="{ data: rows, total: total }"
     [loading]="loading"
     [pageable]="true"
     [skip]="skip"
     [pageSize]="pageSize"
-    [total]="total"
     (pageChange)="onPageChange($event)">
 
     <kendo-grid-column field="expenseDate" title="Date" [width]="110"></kendo-grid-column>
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 71d1cf5..7c7a524 100644
--- a/APP/src/app/portals/user-portal/user-portal.component.html
+++ b/APP/src/app/portals/user-portal/user-portal.component.html
@@ -43,6 +43,17 @@
                     </a>
                 </div>
 
+                <div class="nav-section">
+                    <h4 *ngIf="!sidebarCollapsed">Personal</h4>
+                    <a *ngFor="let item of personalNavItems" 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>
+
                 <div class="nav-section">
                     <h4 *ngIf="!sidebarCollapsed">Management</h4>
                     <a *ngFor="let item of managementNavItems" class="nav-item" [class.active]="item.active"
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 dbdd669..f685694 100644
--- a/APP/src/app/portals/user-portal/user-portal.component.ts
+++ b/APP/src/app/portals/user-portal/user-portal.component.ts
@@ -71,9 +71,16 @@ export class UserPortalComponent implements OnInit, OnDestroy {
   ];
 
   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' },
+    { 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' },
+    { text: 'Expenses',            icon: this.creditCardIcon, path: '/user-portal/finance/expenses' },
+    { text: 'Expense Categories',  icon: this.creditCardIcon, path: '/user-portal/finance/expense-categories' },
+    { text: 'Monthly Statement',   icon: this.creditCardIcon, path: '/user-portal/finance/monthly-statement' },
+  ];
+
+  public personalNavItems: NavItem[] = [
+    { text: 'My Reimbursements', icon: this.creditCardIcon, path: '/user-portal/reimbursements' },
   ];
 
   public showMemberAdminSection = false;
@@ -153,6 +160,7 @@ export class UserPortalComponent implements OnInit, OnDestroy {
       ...this.memberAdminNavItems,
       ...this.userAdminNavItems,
       ...this.financeNavItems,
+      ...this.personalNavItems,
     ];
     allItems.forEach(item => (item.active = false));
 
@@ -194,6 +202,10 @@ export class UserPortalComponent implements OnInit, OnDestroy {
       'finance/offering-session': 'Sunday Offering Entry',
       'finance/givings': 'Givings',
       'finance/giving-categories': 'Giving Types',
+      'reimbursements': 'My Reimbursements',
+      'finance/expenses': 'Expenses',
+      'finance/expense-categories': 'Expense Categories',
+      'finance/monthly-statement': 'Monthly Statement',
     };
     return titles[page] ?? 'Dashboard';
   }