Add audit logs.

APP/src/app/features/expense/pages/expense-categories-page/expense-categories-page.component.html

@@ -1,8 +1,4 @@
 <div class="page">
-  <header class="page-header">
-    <h2>Expense Categories / 費用類別</h2>
-  </header>
-
   <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 
     <!-- Left: Category Groups -->

APP/src/app/features/expense/pages/expense-categories-page/expense-categories-page.component.scss

@@ -1,10 +1,3 @@
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
 .panel-header {
   display: flex;
   justify-content: space-between;

APP/src/app/features/expense/pages/expenses-page/expenses-page.component.html

@@ -1,8 +1,4 @@
 <div class="page">
-  <header class="page-header">
-    <h2>Expenses</h2>
-  </header>
-
   <!-- Filter toolbar -->
   <div class="flex flex-wrap gap-3 items-end mb-4">
     <label class="flex flex-col gap-1">

APP/src/app/features/expense/pages/monthly-statement-page/monthly-statement-page.component.html

@@ -1,8 +1,4 @@
 <div class="page">
-  <header class="page-header">
-    <h2>Monthly Statements</h2>
-  </header>
-
   <!-- Filter toolbar -->
   <div class="flex flex-wrap gap-3 items-end mb-4">
     <label class="flex flex-col gap-1">

APP/src/app/features/expense/pages/my-reimbursements-page/my-reimbursements-page.component.html

@@ -1,8 +1,7 @@
 <div class="page">
-  <header class="page-header">
-    <h2>My Reimbursements</h2>
+  <ng-template appPageHeaderActions>
     <button kendoButton themeColor="primary" (click)="openNew()">+ New Reimbursement</button>
-  </header>
+  </ng-template>
 
   <kendo-grid [data]="rows" [loading]="loading">
     <kendo-grid-column field="expenseDate" title="Date" [width]="110"></kendo-grid-column>

APP/src/app/features/expense/pages/my-reimbursements-page/my-reimbursements-page.component.ts

@@ -6,11 +6,12 @@ import { ExpenseApiService } from '../../services/expense-api.service';
 import { ExpenseFormDialogComponent, ExpenseFormResult } from '../../components/expense-form-dialog/expense-form-dialog.component';
 import { ExpenseListItemDto } from '../../models/expense.model';
 import { switchMap, of } from 'rxjs';
+import { PageHeaderActionsDirective } from '../../../../shared/directives/page-header-actions.directive';
 
 @Component({
   selector: 'app-my-reimbursements-page',
   standalone: true,
-  imports: [CommonModule, GridModule, ButtonsModule, ExpenseFormDialogComponent],
+  imports: [CommonModule, GridModule, ButtonsModule, ExpenseFormDialogComponent, PageHeaderActionsDirective],
   templateUrl: './my-reimbursements-page.component.html',
   styleUrls: ['./my-reimbursements-page.component.scss'],
 })