Add audit logs.

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

@@ -1,13 +1,10 @@
 <div class="page">
-  <header class="page-header">
-    <h2>Giving Types / 奉獻類型</h2>
-    <div class="header-actions">
-      <label class="inactive-toggle">
-        <input type="checkbox" [(ngModel)]="includeInactive" (change)="load()" /> Show inactive
-      </label>
-      <button kendoButton themeColor="primary" (click)="openAdd()">+ Add</button>
-    </div>
-  </header>
+  <ng-template appPageHeaderActions>
+    <label class="inactive-toggle">
+      <input type="checkbox" [(ngModel)]="includeInactive" (change)="load()" /> Show inactive
+    </label>
+    <button kendoButton themeColor="primary" (click)="openAdd()">+ Add</button>
+  </ng-template>
 
   <kendo-grid [data]="data" [loading]="isLoading">
     <kendo-grid-column field="sortOrder" title="#" [width]="60"></kendo-grid-column>

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

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

APP/src/app/features/giving/pages/giving-categories-page/giving-categories-page.component.ts

@@ -9,11 +9,12 @@ import { GivingCategoryApiService } from '../../services/giving-category-api.ser
 import {
   GivingCategoryDto, CreateGivingCategoryRequest, UpdateGivingCategoryRequest,
 } from '../../models/giving.model';
+import { PageHeaderActionsDirective } from '../../../../shared/directives/page-header-actions.directive';
 
 @Component({
   selector: 'app-giving-categories-page',
   standalone: true,
-  imports: [CommonModule, FormsModule, GridModule, InputsModule, ButtonsModule, DialogsModule],
+  imports: [CommonModule, FormsModule, GridModule, InputsModule, ButtonsModule, DialogsModule, PageHeaderActionsDirective],
   templateUrl: './giving-categories-page.component.html',
   styleUrls: ['./giving-categories-page.component.scss'],
 })

APP/src/app/features/giving/pages/givings-page/givings-page.component.html

@@ -1,8 +1,7 @@
 <div class="page">
-  <header class="page-header">
-    <h2>Givings / 單筆奉獻</h2>
+  <ng-template appPageHeaderActions>
     <button kendoButton themeColor="primary" (click)="openAdd()">+ Add Giving</button>
-  </header>
+  </ng-template>
 
   <div class="filters">
     <kendo-textbox placeholder="Search name / check # / notes" [(ngModel)]="search" (keydown.enter)="onSearch()"></kendo-textbox>

APP/src/app/features/giving/pages/givings-page/givings-page.component.scss

@@ -1,2 +1 @@
-.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
 .filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

APP/src/app/features/giving/pages/givings-page/givings-page.component.ts

@@ -15,6 +15,7 @@ import {
   GivingListItemDto, GivingCategoryDto, CreateGivingRequest, PaymentMethod, PagedResult,
 } from '../../models/giving.model';
 import { PAYMENT_METHOD_OPTIONS } from '../../../../shared/i18n/option-lists';
+import { PageHeaderActionsDirective } from '../../../../shared/directives/page-header-actions.directive';
 
 /** Flattened member item with a single displayName field for the dropdown. */
 interface MemberOption {
@@ -27,7 +28,7 @@ interface MemberOption {
   standalone: true,
   imports: [
     CommonModule, FormsModule, GridModule, InputsModule, ButtonsModule,
-    DropDownsModule, DialogsModule, DateInputsModule,
+    DropDownsModule, DialogsModule, DateInputsModule, PageHeaderActionsDirective,
   ],
   templateUrl: './givings-page.component.html',
   styleUrls: ['./givings-page.component.scss'],

APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.html

@@ -1,10 +1,4 @@
 <div class="off">
-  <!-- Header (always) -->
-  <header class="off__head">
-    <span class="off__eyebrow">River of Life · Offering</span>
-    <h1 class="off__title">Sunday Offering Entry <span>主日奉獻錄入</span></h1>
-  </header>
-
   <!-- ============================ LANDING ============================ -->
   <ng-container *ngIf="mode === 'landing'">
     <!-- Start card -->

APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.scss

@@ -21,33 +21,6 @@
   min-height: 100%;
 }
 
-.off__head { margin-bottom: 22px; }
-
-.off__eyebrow {
-  display: inline-block;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: var(--kendo-color-primary, #0279cf);
-  margin-bottom: 6px;
-}
-
-.off__title {
-  font-size: clamp(26px, 3.2vw, 36px);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  line-height: 1.1;
-  margin: 0;
-
-  span {
-    font-weight: 400;
-    color: var(--ink-soft);
-    margin-left: 8px;
-    font-size: 0.62em;
-  }
-}
-
 /* ---------- Card ---------- */
 .card {
   background: var(--card-bg);