From 61e34d343aff8286c695f70320e51afb9104d182 Mon Sep 17 00:00:00 2001
From: Chris Chen <yuanson.ch@gmail.com>
Date: Fri, 29 May 2026 22:09:19 -0700
Subject: [PATCH] feat(i18n): bilingual category + method dropdowns on givings
 page

---
 .../pages/givings-page/givings-page.component.html       | 9 +++++----
 .../giving/pages/givings-page/givings-page.component.ts  | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/APP/src/app/features/giving/pages/givings-page/givings-page.component.html b/APP/src/app/features/giving/pages/givings-page/givings-page.component.html
index c36ca70..d3f4fc6 100644
--- a/APP/src/app/features/giving/pages/givings-page/givings-page.component.html
+++ b/APP/src/app/features/giving/pages/givings-page/givings-page.component.html
@@ -6,9 +6,9 @@
 
   <div class="filters">
     <kendo-textbox placeholder="Search name / check # / notes" [(ngModel)]="search" (keydown.enter)="onSearch()"></kendo-textbox>
-    <kendo-dropdownlist [data]="categories" textField="name_en" valueField="id"
+    <kendo-dropdownlist [data]="categories" textField="label" valueField="id"
         [valuePrimitive]="true" [(ngModel)]="filterCategoryId" (valueChange)="onSearch()"
-        [defaultItem]="{ id: null, name_en: 'All types' }"></kendo-dropdownlist>
+        [defaultItem]="{ id: null, label: 'All types/全部類型' }"></kendo-dropdownlist>
     <button kendoButton (click)="onSearch()">Search</button>
   </div>
 
@@ -45,12 +45,13 @@
       </label>
 
       <label class="flex flex-col gap-1">Type
-        <kendo-dropdownlist [data]="categories" textField="name_en" valueField="id"
+        <kendo-dropdownlist [data]="categories" textField="label" valueField="id"
             [valuePrimitive]="true" [(ngModel)]="form.givingCategoryId"></kendo-dropdownlist>
       </label>
 
       <label class="flex flex-col gap-1">Payment method
-        <kendo-dropdownlist [data]="paymentMethods" [(ngModel)]="form.paymentMethod"></kendo-dropdownlist>
+        <kendo-dropdownlist [data]="paymentMethods" textField="label" valueField="value" [valuePrimitive]="true"
+          [(ngModel)]="form.paymentMethod"></kendo-dropdownlist>
       </label>
 
       <label *ngIf="form.paymentMethod === 'Check'" class="flex flex-col gap-1">Check #
diff --git a/APP/src/app/features/giving/pages/givings-page/givings-page.component.ts b/APP/src/app/features/giving/pages/givings-page/givings-page.component.ts
index eee0e68..a0a5a0d 100644
--- a/APP/src/app/features/giving/pages/givings-page/givings-page.component.ts
+++ b/APP/src/app/features/giving/pages/givings-page/givings-page.component.ts
@@ -14,6 +14,7 @@ import { MemberListItemDto, memberDisplayName } from '../../../members/models/me
 import {
   GivingListItemDto, GivingCategoryDto, CreateGivingRequest, PaymentMethod, PagedResult,
 } from '../../models/giving.model';
+import { PAYMENT_METHOD_OPTIONS } from '../../../../shared/i18n/option-lists';
 
 /** Flattened member item with a single displayName field for the dropdown. */
 interface MemberOption {
@@ -41,7 +42,7 @@ export class GivingsPageComponent implements OnInit {
   filterCategoryId: number | null = null;
   categories: GivingCategoryDto[] = [];
 
-  readonly paymentMethods: PaymentMethod[] = ['Cash', 'Check', 'Zelle', 'PayPal', 'Other'];
+  readonly paymentMethods = PAYMENT_METHOD_OPTIONS;
 
   memberResults: MemberOption[] = [];