checks

APP/src/app/features/expense/components/expense-review-dialog/expense-review-dialog.component.html

@@ -10,7 +10,17 @@
       <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
         <div class="text-gray-500">Date / 日期</div><div>{{ expense.expenseDate }}</div>
         <div class="text-gray-500">Ministry / 事工</div><div>{{ expense.ministryName }}</div>
-        <div class="text-gray-500">Payee / 收款人</div><div>{{ expense.vendorName || expense.memberName || '—' }}</div>
+        <div class="text-gray-500">Payee / 收款人</div>
+        <div>
+          <ng-container *ngIf="expense.vendorName; else memberPayee">{{ expense.vendorName }}</ng-container>
+          <ng-template #memberPayee>
+            <ng-container *ngIf="expense.memberName; else dash">
+              <div *ngIf="expense.memberNickName">{{ expense.memberNickName }}</div>
+              <div [class.text-gray-500]="expense.memberNickName" [class.text-xs]="expense.memberNickName">{{ expense.memberName }}</div>
+            </ng-container>
+            <ng-template #dash>—</ng-template>
+          </ng-template>
+        </div>
         <div class="text-gray-500">Description / 說明</div><div>{{ expense.description }}</div>
         <div class="text-gray-500">Status / 狀態</div><div>{{ expense.status }}</div>
       </div>

APP/src/app/features/expense/models/expense.model.ts

@@ -24,7 +24,8 @@ export interface ExpenseListItemDto {
   id: number; type: ExpenseType; status: ExpenseStatus; amount: number; description: string;
   ministryId: number; ministryName: string; lineCount: number; primaryCategoryName: string;
   vendorName: string | null;
-  memberId: number | null; memberName: string | null; expenseDate: string; hasReceipt: boolean;
+  memberId: number | null; memberName: string | null; memberNickName: string | null;
+  expenseDate: string; hasReceipt: boolean;
   checkNumber: string | null;
   reviewedByName: string | null; reviewedAt: string | null; reviewNotes: string | null;
 }

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

@@ -48,9 +48,16 @@
     </kendo-grid-column>
 
     <kendo-grid-column field="description" title="Description"></kendo-grid-column>
-    <kendo-grid-column title="Payee" [width]="150">
+    <kendo-grid-column title="Payee" [width]="180">
       <ng-template kendoGridCellTemplate let-dataItem>
-        {{ dataItem.vendorName || dataItem.memberName || '—' }}
+        <ng-container *ngIf="dataItem.vendorName; else memberPayee">{{ dataItem.vendorName }}</ng-container>
+        <ng-template #memberPayee>
+          <ng-container *ngIf="dataItem.memberName; else dash">
+            <div *ngIf="dataItem.memberNickName">{{ dataItem.memberNickName }}</div>
+            <div [class.text-gray-500]="dataItem.memberNickName" [class.text-xs]="dataItem.memberNickName">{{ dataItem.memberName }}</div>
+          </ng-container>
+          <ng-template #dash>—</ng-template>
+        </ng-template>
       </ng-template>
     </kendo-grid-column>