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

<div class="page">
  <!-- Filter toolbar -->
  <div class="flex flex-wrap gap-3 items-end mb-4">
    <label class="flex flex-col gap-1">
      Search
      <kendo-textbox placeholder="Search description / vendor / member / check #" [(ngModel)]="filter.search"
        (keydown.enter)="applyFilter()">
      </kendo-textbox>
    </label>

    <label class="flex flex-col gap-1">
      Ministry
      <kendo-dropdownlist [data]="ministries" textField="label" valueField="id" [valuePrimitive]="true"
        [(ngModel)]="filter.ministryId" [defaultItem]="{ id: null, label: 'All Ministries/全部事工' }">
      </kendo-dropdownlist>
    </label>

    <label class="flex flex-col gap-1">
      Status
      <kendo-dropdownlist [data]="statuses" textField="label" valueField="value" [valuePrimitive]="true"
        [(ngModel)]="filter.status" [defaultItem]="{ value: null, label: 'All Status/全部狀態' }">
      </kendo-dropdownlist>
    </label>

    <button kendoButton (click)="applyFilter()">Apply</button>

    <div class="ml-auto flex gap-2">
      <button kendoButton themeColor="primary" (click)="vendorDialogOpen = true">+ Vendor Payment</button>
      <button kendoButton themeColor="primary" (click)="reimbDialogOpen = true">+ Reimbursement</button>
    </div>
  </div>

  <!-- Main grid -->
  <kendo-grid [data]="{ data: rows, total: total }" [loading]="loading" [pageable]="true" [skip]="skip"
    [pageSize]="pageSize" (pageChange)="onPageChange($event)">

    <kendo-grid-column field="expenseDate" title="Date" [width]="110"></kendo-grid-column>

    <!-- <kendo-grid-column field="type" title="Type" [width]="140"></kendo-grid-column> -->


    <kendo-grid-column field="ministryName" title="Ministry" [width]="280"></kendo-grid-column>

    <kendo-grid-column title="Category" [width]="360">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem.primaryCategoryName }}<span *ngIf="dataItem.lineCount > 1" class="text-gray-500"> +{{ dataItem.lineCount - 1 }}</span>
      </ng-template>
    </kendo-grid-column>

    <kendo-grid-column field="description" title="Description"></kendo-grid-column>
    <kendo-grid-column title="Payee" [width]="180">
      <ng-template kendoGridCellTemplate let-dataItem>
        <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>

    <kendo-grid-column field="amount" title="Amount" [width]="110" format="c2"></kendo-grid-column>

    <kendo-grid-column title="Check #" [width]="90">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem.status === 'Paid' && dataItem.checkNumber ? dataItem.checkNumber : '—' }}
      </ng-template>
    </kendo-grid-column>

    <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>
        <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)"
          class="receipt-link">Receipt</button>
      </ng-template>
    </kendo-grid-column>

  </kendo-grid>

  <!-- Vendor Payment dialog -->
  <app-expense-form-dialog *ngIf="vendorDialogOpen" mode="vendor" title="Vendor Payment" (save)="onVendorSave($event)"
    (cancel)="vendorDialogOpen = false">
  </app-expense-form-dialog>

  <!-- Reimbursement (on behalf) dialog -->
  <app-expense-form-dialog *ngIf="reimbDialogOpen" mode="reimbursement" [allowMemberPick]="true"
    title="Reimbursement (on behalf)" (save)="onReimbSave($event)" (cancel)="reimbDialogOpen = false">
  </app-expense-form-dialog>

  <!-- Edit dialog -->
  <app-expense-form-dialog *ngIf="editRow" [mode]="editMode" [expense]="editRow"
    [title]="editMode === 'vendor' ? 'Edit Vendor Payment' : 'Edit Reimbursement'"
    (save)="onEditSave($event)" (cancel)="closeEdit()">
  </app-expense-form-dialog>

  <!-- Mark Paid dialog -->
  <kendo-dialog *ngIf="payRow" title="Mark Paid" [width]="400" [maxWidth]="'95vw'" (close)="payRow = null">
    <div class="grid grid-cols-1 gap-3 p-2">
      <label class="flex flex-col gap-1">
        Check #
        <kendo-textbox [(ngModel)]="payCheckNumber" placeholder="Optional"></kendo-textbox>
      </label>
      <label class="flex flex-col gap-1">
        Payment Date
        <kendo-datepicker [(ngModel)]="payDate"></kendo-datepicker>
      </label>
    </div>
    <kendo-dialog-actions>
      <button kendoButton (click)="payRow = null">Cancel</button>
      <button kendoButton themeColor="primary" (click)="confirmPay()">Confirm</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>

</div>