🏠 Overview › 🧩 Components ›🧩 Expense Queue Page

Expense Queue Page

Component Detail

User Interface medium complexity frontend
2
Dependencies
0
Dependents
6
Entities
0
Integrations

Description

Server-rendered Next.js page presenting all pending expense claims in a filterable, paginated queue. Coordinators and Org Admins can review individual claims with inline receipt previews, apply batch approve/reject actions, and filter by status, date range, expense type, or submitting user. The page uses server components for initial data load and client components for interactive approval actions.

Feature: Expense Approval Queue

expense-queue-page

Responsibilities

  • Render paginated list of pending expense claims with key details (type, amount, submitter, date)
  • Display inline receipt image previews fetched from storage
  • Provide individual approve/reject action buttons with confirmation dialogs
  • Support batch selection and bulk approve/reject operations
  • Offer server-side filtering by status, date range, expense type, and submitting peer mentor

Interfaces

renderQueueTable(expenses: Expense[])
handleApprove(expenseId: string)
handleReject(expenseId: string, reason: string)
handleBatchApprove(expenseIds: string[])
handleBatchReject(expenseIds: string[], reason: string)
applyFilters(filters: ExpenseQueueFilters)
handlePageChange(page: number)
renderReceiptPreview(receiptUrl: string)
renderExpenseDetail(expense: Expense)
toggleSelectAll()
toggleSelectExpense(expenseId: string)

Relationships

Dependencies (2)

Components this component depends on

data Expense Approval Store service Expense Approval Service

Related Data Entities (6)

Data entities managed by this component

Expense 23 fields core Expense Approval 13 fields core Expense Receipt 20 fields core Expense Approvals 13 fields core Expense Receipts 22 fields core Expenses 31 fields core