add approve.

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

@@ -0,0 +1,98 @@
+<kendo-dialog title="Review Expense / 審核支出" (close)="cancel.emit()"
+  [width]="showReceiptPanel ? 1100 : 620" [maxWidth]="'95vw'" [maxHeight]="'90vh'">
+
+  <div *ngIf="loading" class="p-6 text-center text-gray-500">Loading… / 載入中…</div>
+
+  <div *ngIf="!loading && expense" class="flex flex-col gap-4 md:flex-row">
+
+    <!-- Left: read-only expense detail -->
+    <div class="flex-1 min-w-0 flex flex-col gap-3">
+      <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">Description / 說明</div><div>{{ expense.description }}</div>
+        <div class="text-gray-500">Status / 狀態</div><div>{{ expense.status }}</div>
+      </div>
+
+      <!-- Line items -->
+      <div class="flex flex-col gap-1">
+        <div class="font-semibold text-sm">明細 / Line Items</div>
+        <table class="w-full text-sm border-collapse">
+          <thead>
+            <tr class="text-left text-gray-500 border-b">
+              <th class="py-1">Category / 類別</th>
+              <th class="py-1">Description / 說明</th>
+              <th class="py-1 text-right">Amount / 金額</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let line of expense.lines" class="border-b border-gray-100">
+              <td class="py-1">{{ line.categoryGroupName }}<span *ngIf="line.subCategoryName"> / {{ line.subCategoryName }}</span></td>
+              <td class="py-1 text-gray-600">{{ line.description || '—' }}</td>
+              <td class="py-1 text-right tabular-nums">{{ line.amount | currency }}</td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr class="font-semibold">
+              <td class="py-1" colspan="2">Total / 合計</td>
+              <td class="py-1 text-right tabular-nums">{{ expense.amount | currency }}</td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+
+      <!-- Reject reason capture (shown after clicking Reject) -->
+      <div *ngIf="rejecting" class="flex flex-col gap-2 rounded border border-red-200 bg-red-50 p-3">
+        <label class="flex flex-col gap-1 text-sm">Reject Reason / 拒絕原因
+          <kendo-dropdownlist [data]="rejectReasons" textField="label" valueField="value" [valuePrimitive]="true"
+            [(ngModel)]="rejectReason" [defaultItem]="{ value: null, label: '-- Select reason --/請選擇原因' }">
+          </kendo-dropdownlist>
+        </label>
+        <label *ngIf="isOtherReason" class="flex flex-col gap-1 text-sm">Detail / 說明
+          <kendo-textbox [(ngModel)]="rejectOther" placeholder="Please enter the reason / 請輸入原因"></kendo-textbox>
+        </label>
+      </div>
+    </div>
+
+    <!-- Right: receipt preview -->
+    <div class="md:w-[30rem] md:shrink-0 md:border-l md:pl-4 flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="font-semibold">收據預覽 / Receipt</span>
+        <div *ngIf="receiptImageUrl" class="flex items-center gap-1">
+          <button kendoButton size="small" fillMode="flat" (click)="zoomOut()"
+            [disabled]="receiptZoom <= minZoom" title="縮小 / Zoom out">−</button>
+          <span class="w-12 text-center text-sm tabular-nums">{{ receiptZoom * 100 | number:'1.0-0' }}%</span>
+          <button kendoButton size="small" fillMode="flat" (click)="zoomIn()"
+            [disabled]="receiptZoom >= maxZoom" title="放大 / Zoom in">＋</button>
+          <button kendoButton size="small" fillMode="flat" (click)="resetZoom()" title="重設 / Reset">⟲</button>
+        </div>
+      </div>
+
+      <div *ngIf="receiptImageUrl" class="overflow-auto rounded border border-gray-200 bg-gray-50" style="max-height: 72vh;">
+        <img [src]="receiptImageUrl" alt="Receipt preview" [style.width.%]="receiptZoom * 100" class="block max-w-none" />
+      </div>
+      <iframe *ngIf="receiptPdfUrl" [src]="receiptPdfUrl" title="Receipt PDF"
+        class="w-full rounded border border-gray-200" style="height: 72vh;"></iframe>
+
+      <div *ngIf="!showReceiptPanel" class="rounded border border-dashed border-gray-300 p-6 text-center text-gray-400 text-sm">
+        No receipt attached / 無收據
+      </div>
+    </div>
+
+  </div>
+
+  <kendo-dialog-actions>
+    <!-- Decision row -->
+    <ng-container *ngIf="!rejecting">
+      <button kendoButton (click)="cancel.emit()">Cancel / 取消</button>
+      <button kendoButton themeColor="error" fillMode="flat" (click)="startReject()">Reject / 拒絕</button>
+      <button kendoButton themeColor="success" (click)="confirmApprove()">Approve / 核准</button>
+    </ng-container>
+    <!-- Reject confirmation row -->
+    <ng-container *ngIf="rejecting">
+      <button kendoButton (click)="cancelReject()">Back / 返回</button>
+      <button kendoButton themeColor="error" [disabled]="!canConfirmReject" (click)="confirmReject()">Confirm Reject / 確認拒絕</button>
+    </ng-container>
+  </kendo-dialog-actions>
+</kendo-dialog>

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

@@ -0,0 +1,106 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { DialogsModule } from '@progress/kendo-angular-dialog';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { ExpenseApiService } from '../../services/expense-api.service';
+import { ExpenseDto } from '../../models/expense.model';
+import { EXPENSE_REJECT_REASON_OPTIONS } from '../../../../shared/i18n/option-lists';
+
+/**
+ * Approval review dialog: shows the full expense detail and a receipt preview side by side,
+ * then lets a reviewer Approve or Reject (with a templated or free-text reason). The parent
+ * performs the actual api.approve / api.reject call from the emitted events.
+ */
+@Component({
+  selector: 'app-expense-review-dialog',
+  standalone: true,
+  imports: [CommonModule, FormsModule, ButtonsModule, DialogsModule, DropDownsModule, InputsModule],
+  templateUrl: './expense-review-dialog.component.html',
+})
+export class ExpenseReviewDialogComponent implements OnInit, OnDestroy {
+  /** Expense to review; the full detail (with lines) is fetched on open. */
+  @Input() expenseId!: number;
+  @Output() approve = new EventEmitter<void>();
+  @Output() reject = new EventEmitter<string>();   // emits the composed reviewNotes
+  @Output() cancel = new EventEmitter<void>();
+
+  expense: ExpenseDto | null = null;
+  loading = true;
+
+  readonly rejectReasons = EXPENSE_REJECT_REASON_OPTIONS;
+  /** false = the Approve/Reject choice; true = the reject reason is being collected. */
+  rejecting = false;
+  rejectReason: string | null = null;
+  rejectOther = '';
+
+  // ── Receipt preview (mirrors expense-form-dialog) ───────────────────────
+  receiptImageUrl: string | null = null;
+  receiptPdfUrl: SafeResourceUrl | null = null;
+  private receiptObjectUrl: string | null = null;
+  receiptZoom = 1;
+  readonly minZoom = 0.5;
+  readonly maxZoom = 5;
+
+  get showReceiptPanel(): boolean { return !!(this.receiptImageUrl || this.receiptPdfUrl); }
+
+  zoomIn(): void { this.receiptZoom = Math.min(this.maxZoom, +(this.receiptZoom + 0.25).toFixed(2)); }
+  zoomOut(): void { this.receiptZoom = Math.max(this.minZoom, +(this.receiptZoom - 0.25).toFixed(2)); }
+  resetZoom(): void { this.receiptZoom = 1; }
+
+  constructor(private api: ExpenseApiService, private sanitizer: DomSanitizer) {}
+
+  ngOnInit(): void {
+    this.api.getById(this.expenseId).subscribe({
+      next: dto => {
+        this.expense = dto;
+        this.loading = false;
+        if (dto.hasReceipt) {
+          this.api.downloadReceipt(dto.id).subscribe(blob => this.setPreview(blob, blob.type));
+        }
+      },
+      error: () => { this.loading = false; },
+    });
+  }
+
+  ngOnDestroy(): void { this.clearPreview(); }
+
+  private setPreview(blob: Blob, contentType: string): void {
+    this.clearPreview();
+    this.receiptZoom = 1;
+    this.receiptObjectUrl = URL.createObjectURL(blob);
+    if (contentType.startsWith('image/')) {
+      this.receiptImageUrl = this.receiptObjectUrl;
+    } else {
+      this.receiptPdfUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.receiptObjectUrl);
+    }
+  }
+
+  private clearPreview(): void {
+    if (this.receiptObjectUrl) { URL.revokeObjectURL(this.receiptObjectUrl); this.receiptObjectUrl = null; }
+    this.receiptImageUrl = null;
+    this.receiptPdfUrl = null;
+  }
+
+  startReject(): void { this.rejecting = true; this.rejectReason = null; this.rejectOther = ''; }
+  cancelReject(): void { this.rejecting = false; }
+
+  get isOtherReason(): boolean { return this.rejectReason === 'Other'; }
+
+  /** The reason text actually sent: the template value, or the free text when "Other" is chosen. */
+  get composedReviewNotes(): string {
+    return this.isOtherReason ? this.rejectOther.trim() : (this.rejectReason ?? '');
+  }
+
+  get canConfirmReject(): boolean { return this.composedReviewNotes.length > 0; }
+
+  confirmApprove(): void { this.approve.emit(); }
+
+  confirmReject(): void {
+    if (!this.canConfirmReject) return;
+    this.reject.emit(this.composedReviewNotes);
+  }
+}

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

@@ -26,10 +26,11 @@ export interface ExpenseListItemDto {
   vendorName: string | null;
   memberId: number | null; memberName: string | null; expenseDate: string; hasReceipt: boolean;
   checkNumber: string | null;
+  reviewedByName: string | null; reviewedAt: string | null; reviewNotes: string | null;
 }
 export interface ExpenseDto extends ExpenseListItemDto {
-  notes: string | null; reviewNotes: string | null;
-  submittedBy: string | null; submittedAt: string | null; reviewedAt: string | null; paidAt: string | null;
+  notes: string | null;
+  submittedBy: string | null; submittedAt: string | null; paidAt: string | null;
   lines: ExpenseLineItemDto[];
 }
 export interface ExpenseLineInput {

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

@@ -62,19 +62,23 @@
       </ng-template>
     </kendo-grid-column>
 
-    <kendo-grid-column title="Status" [width]="140">
+    <kendo-grid-column title="Status" [width]="200">
       <ng-template kendoGridCellTemplate let-dataItem>
         <span [class]="statusClass(dataItem.status)">{{ dataItem.status }}</span>
+        <div *ngIf="dataItem.reviewedByName && (dataItem.status === 'Approved' || dataItem.status === 'Paid')"
+          class="review-meta">✓ Approved by {{ dataItem.reviewedByName }}<br>{{ dataItem.reviewedAt | date:'yyyy-MM-dd HH:mm' }}</div>
+        <div *ngIf="dataItem.reviewedByName && dataItem.status === 'Rejected'" class="review-meta review-meta-reject">
+          ✗ Rejected by {{ dataItem.reviewedByName }}<br>{{ dataItem.reviewedAt | date:'yyyy-MM-dd HH:mm' }}
+          <div *ngIf="dataItem.reviewNotes" class="review-reason">{{ dataItem.reviewNotes }}</div>
+        </div>
       </ng-template>
     </kendo-grid-column>
 
     <kendo-grid-column title="Actions" [width]="160">
       <ng-template kendoGridCellTemplate let-dataItem>
         <button *ngIf="canEdit(dataItem)" kendoButton fillMode="flat" (click)="openEdit(dataItem)">Edit</button>
-        <ng-container *ngIf="canApproveOrReject(dataItem)">
-          <button kendoButton themeColor="success" fillMode="flat" (click)="approve(dataItem)">Approve</button>
-          <button kendoButton themeColor="error" fillMode="flat" (click)="openReject(dataItem)">Reject</button>
-        </ng-container>
+        <button *ngIf="canApproveOrReject(dataItem)" kendoButton themeColor="primary" fillMode="flat"
+          (click)="openReview(dataItem)">Review</button>
         <button *ngIf="canPay(dataItem)" kendoButton themeColor="primary" fillMode="flat"
           (click)="openPay(dataItem)">Pay</button>
         <button *ngIf="dataItem.hasReceipt" kendoButton fillMode="flat" (click)="openReceipt(dataItem.id)"
@@ -118,19 +122,10 @@
     </kendo-dialog-actions>
   </kendo-dialog>
 
-  <!-- Reject dialog -->
-  <kendo-dialog *ngIf="rejectRow" title="Reject Expense" [width]="400" [maxWidth]="'95vw'" (close)="rejectRow = null">
-    <div class="grid grid-cols-1 gap-3 p-2">
-      <label class="flex flex-col gap-1">
-        Review Notes
-        <kendo-textbox [(ngModel)]="rejectNotes" placeholder="Optional notes for submitter"></kendo-textbox>
-      </label>
-    </div>
-    <kendo-dialog-actions>
-      <button kendoButton (click)="rejectRow = null">Cancel</button>
-      <button kendoButton themeColor="error" (click)="confirmReject()">Reject</button>
-    </kendo-dialog-actions>
-  </kendo-dialog>
+  <!-- Review dialog: detail + receipt preview, with Approve / Reject(reason) -->
+  <app-expense-review-dialog *ngIf="reviewRow" [expenseId]="reviewRow.id"
+    (approve)="onReviewApprove()" (reject)="onReviewReject($event)" (cancel)="closeReview()">
+  </app-expense-review-dialog>
 
   <!-- Transient save confirmation (sits above the open dialog during continuous entry) -->
   <div *ngIf="toast" class="save-toast">{{ toast }}</div>

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

@@ -45,6 +45,24 @@
   text-decoration: underline;
 }
 
+// Small "Approved/Rejected by X · date" note under the status badge.
+.review-meta {
+  margin-top: 4px;
+  font-size: 0.7rem;
+  line-height: 1.2;
+  color: #6b7280;
+}
+
+.review-meta-reject {
+  color: #b91c1c;
+}
+
+.review-reason {
+  margin-top: 2px;
+  font-style: italic;
+  color: #991b1b;
+}
+
 // Save confirmation pill. z-index sits above the Kendo dialog overlay so it
 // stays visible while the continuous-entry dialog remains open.
 .save-toast {

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

@@ -11,6 +11,7 @@ import { EXPENSE_STATUS_OPTIONS } from '../../../../shared/i18n/option-lists';
 import { ExpenseApiService, ExpenseQuery } from '../../services/expense-api.service';
 import { MinistryApiService } from '../../services/ministry-api.service';
 import { ExpenseFormDialogComponent, ExpenseFormResult } from '../../components/expense-form-dialog/expense-form-dialog.component';
+import { ExpenseReviewDialogComponent } from '../../components/expense-review-dialog/expense-review-dialog.component';
 import { ExpenseDto, ExpenseListItemDto, MinistryDto } from '../../models/expense.model';
 import { switchMap, of } from 'rxjs';
 
@@ -20,6 +21,7 @@ import { switchMap, of } from 'rxjs';
   imports: [
     CommonModule, FormsModule, GridModule, ButtonsModule, DropDownsModule,
     InputsModule, DialogsModule, DateInputsModule, ExpenseFormDialogComponent,
+    ExpenseReviewDialogComponent,
   ],
   templateUrl: './expenses-page.component.html',
   styleUrls: ['./expenses-page.component.scss'],
@@ -46,8 +48,8 @@ export class ExpensesPageComponent implements OnInit {
   payCheckNumber = '';
   payDate = new Date();
 
-  rejectRow: ExpenseListItemDto | null = null;
-  rejectNotes = '';
+  /** Row whose detail+receipt are open in the review dialog for an approve/reject decision. */
+  reviewRow: ExpenseListItemDto | null = null;
 
   /** Transient confirmation pill, used so the user gets feedback during continuous entry. */
   toast: string | null = null;
@@ -110,19 +112,18 @@ export class ExpensesPageComponent implements OnInit {
     ).subscribe(() => { this.closeEdit(); this.load(); });
   }
 
-  approve(row: ExpenseListItemDto): void {
-    this.api.approve(row.id).subscribe(() => this.load());
+  openReview(row: ExpenseListItemDto): void { this.reviewRow = row; }
+  closeReview(): void { this.reviewRow = null; }
+
+  onReviewApprove(): void {
+    if (!this.reviewRow) return;
+    this.api.approve(this.reviewRow.id).subscribe(() => { this.reviewRow = null; this.load(); });
   }
 
-  openReject(row: ExpenseListItemDto): void {
-    this.rejectRow = row;
-    this.rejectNotes = '';
-  }
-
-  confirmReject(): void {
-    if (!this.rejectRow) return;
-    this.api.reject(this.rejectRow.id, { reviewNotes: this.rejectNotes || null }).subscribe(() => {
-      this.rejectRow = null;
+  onReviewReject(reviewNotes: string): void {
+    if (!this.reviewRow) return;
+    this.api.reject(this.reviewRow.id, { reviewNotes: reviewNotes || null }).subscribe(() => {
+      this.reviewRow = null;
       this.load();
     });
   }

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

@@ -15,15 +15,22 @@
         </ng-template>
       </kendo-grid-column>
       <kendo-grid-column field="amount" title="Amount" [width]="110" format="c2"></kendo-grid-column>
-      <kendo-grid-column title="Status" [width]="140">
+      <kendo-grid-column title="Status" [width]="220">
         <ng-template kendoGridCellTemplate let-dataItem>
           <span [class]="statusClass(dataItem.status)">{{ dataItem.status }}</span>
+          <div *ngIf="dataItem.reviewedByName && (dataItem.status === 'Approved' || dataItem.status === 'Paid')"
+            class="review-meta">✓ Approved by {{ dataItem.reviewedByName }}<br>{{ dataItem.reviewedAt | date:'yyyy-MM-dd HH:mm' }}</div>
+          <div *ngIf="dataItem.status === 'Rejected'" class="review-meta review-meta-reject">
+            ✗ Rejected<span *ngIf="dataItem.reviewedByName"> by {{ dataItem.reviewedByName }}</span><br>{{ dataItem.reviewedAt | date:'yyyy-MM-dd HH:mm' }}
+            <div *ngIf="dataItem.reviewNotes" class="review-reason">{{ dataItem.reviewNotes }}</div>
+          </div>
         </ng-template>
       </kendo-grid-column>
-      <kendo-grid-column title="Actions" [width]="200">
+      <kendo-grid-column title="Actions" [width]="230">
         <ng-template kendoGridCellTemplate let-dataItem>
           <button *ngIf="canEdit(dataItem)" kendoButton fillMode="flat" (click)="openEdit(dataItem)">Edit</button>
           <button *ngIf="isDraft(dataItem)" kendoButton themeColor="primary" fillMode="flat" (click)="submit(dataItem)">Submit</button>
+          <button *ngIf="isRejected(dataItem)" kendoButton themeColor="primary" fillMode="flat" (click)="resubmit(dataItem)">Resubmit</button>
           <button *ngIf="isDraft(dataItem)" kendoButton fillMode="flat" (click)="remove(dataItem)">Delete</button>
           <button *ngIf="dataItem.hasReceipt" kendoButton fillMode="flat"
             (click)="openReceipt(dataItem.id)" class="receipt-link">Receipt</button>
@@ -60,9 +67,20 @@
         <span [class]="statusClass(row.status)">{{ row.status }}</span>
       </div>
 
+      <!-- Rejection feedback: what the submitter must fix before resubmitting -->
+      <div *ngIf="row.status === 'Rejected'" class="rmb-card__reject">
+        ✗ Rejected<span *ngIf="row.reviewedByName"> by {{ row.reviewedByName }}</span>
+        <span *ngIf="row.reviewedAt"> · {{ row.reviewedAt | date:'yyyy-MM-dd HH:mm' }}</span>
+        <div *ngIf="row.reviewNotes" class="rmb-card__reject-reason">{{ row.reviewNotes }}</div>
+      </div>
+      <div *ngIf="row.reviewedByName && (row.status === 'Approved' || row.status === 'Paid')" class="rmb-card__approved">
+        ✓ Approved by {{ row.reviewedByName }} · {{ row.reviewedAt | date:'yyyy-MM-dd HH:mm' }}
+      </div>
+
       <div class="rmb-card__actions" *ngIf="canEdit(row) || row.hasReceipt">
         <button *ngIf="canEdit(row)" kendoButton fillMode="outline" (click)="openEdit(row)">Edit</button>
         <button *ngIf="isDraft(row)" kendoButton themeColor="primary" (click)="submit(row)">Submit</button>
+        <button *ngIf="isRejected(row)" kendoButton themeColor="primary" (click)="resubmit(row)">Resubmit</button>
         <button *ngIf="isDraft(row)" kendoButton fillMode="outline" (click)="remove(row)">Delete</button>
         <button *ngIf="row.hasReceipt" kendoButton fillMode="flat" (click)="openReceipt(row.id)">Receipt</button>
       </div>

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

@@ -45,6 +45,24 @@
   text-decoration: underline;
 }
 
+// Small "Approved/Rejected by X · date" note under the status badge (desktop grid).
+.review-meta {
+  margin-top: 4px;
+  font-size: 0.7rem;
+  line-height: 1.2;
+  color: #6b7280;
+}
+
+.review-meta-reject {
+  color: #b91c1c;
+}
+
+.review-reason {
+  margin-top: 2px;
+  font-style: italic;
+  color: #991b1b;
+}
+
 // Mobile card list
 // NOTE: display/flex layout lives on the element via Tailwind (flex flex-col gap-3)
 // so the responsive `md:hidden` utility wins on desktop. Setting `display: flex`
@@ -116,6 +134,28 @@
     margin-top: 12px;
   }
 
+  &__reject {
+    margin-top: 10px;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    font-size: 0.8rem;
+    color: #b91c1c;
+  }
+
+  &__reject-reason {
+    margin-top: 2px;
+    font-weight: 600;
+    color: #991b1b;
+  }
+
+  &__approved {
+    margin-top: 10px;
+    font-size: 0.8rem;
+    color: #047857;
+  }
+
   &__actions {
     margin-top: 12px;
     padding-top: 12px;

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

@@ -56,6 +56,8 @@ export class MyReimbursementsPageComponent implements OnInit {
   }
 
   submit(row: ExpenseListItemDto): void { this.api.submit(row.id).subscribe(() => this.load()); }
+  /** Re-submit a rejected reimbursement after fixing the flagged issue (clears the prior review server-side). */
+  resubmit(row: ExpenseListItemDto): void { this.api.submit(row.id).subscribe(() => this.load()); }
   remove(row: ExpenseListItemDto): void {
     if (!confirm('Delete this reimbursement?')) return;
     this.api.delete(row.id).subscribe(() => this.load());
@@ -69,10 +71,14 @@ export class MyReimbursementsPageComponent implements OnInit {
     });
   }
 
-  /** Editing (and reuploading the photo) is allowed while a reimbursement is still Draft or awaiting review. */
-  canEdit(row: ExpenseListItemDto): boolean { return row.status === 'Draft' || row.status === 'PendingApproval'; }
+  /** Editing (and reuploading the photo) is allowed while Draft, awaiting review, or after a rejection. */
+  canEdit(row: ExpenseListItemDto): boolean {
+    return row.status === 'Draft' || row.status === 'PendingApproval' || row.status === 'Rejected';
+  }
   /** Submit and Delete only apply before the reimbursement has been submitted. */
   isDraft(row: ExpenseListItemDto): boolean { return row.status === 'Draft'; }
+  /** A rejected reimbursement can be fixed and re-submitted by its owner. */
+  isRejected(row: ExpenseListItemDto): boolean { return row.status === 'Rejected'; }
   statusClass(status: string): string {
     return ({ Draft: 'badge-draft', PendingApproval: 'badge-pending', Approved: 'badge-approved', Paid: 'badge-paid', Rejected: 'badge-rejected' } as Record<string, string>)[status] ?? '';
   }

APP/src/app/shared/i18n/option-lists.ts

@@ -22,6 +22,18 @@ export const EXPENSE_STATUS_OPTIONS: readonly BilingualOption[] = [
   { value: 'Rejected',        label: 'Rejected/已拒絕' },
 ];
 
+// Expense reject reason templates. For preset reasons the `value` is stored verbatim into
+// ReviewNotes; selecting 'Other' switches the dialog to a free-text box.
+export const EXPENSE_REJECT_REASON_OPTIONS: readonly BilingualOption[] = [
+  { value: 'Receipt unclear, please retake', label: 'Receipt unclear/收據不夠清楚' },
+  { value: 'Amount does not match receipt',  label: 'Amount mismatch/金額不符' },
+  { value: 'Receipt missing',                label: 'Receipt missing/缺少收據' },
+  { value: 'Wrong category or ministry',     label: 'Wrong category/分類錯誤' },
+  { value: 'Duplicate submission',           label: 'Duplicate/重複申請' },
+  { value: 'Needs more information',          label: 'Needs more info/需補充說明' },
+  { value: 'Other',                          label: 'Other/其他' },
+];
+
 export const CHECK_STATUS_OPTIONS: readonly BilingualOption[] = [
   { value: 'Issued', label: 'Issued/已開立' },
   { value: 'Voided', label: 'Voided/已作廢' },