Expense Approval Page
Component Detail
User Interface
medium complexity
frontend
3
Dependencies
1
Dependents
3
Entities
0
Integrations
Description
Server-side-rendered Next.js page providing coordinators and org admins with a paginated, filterable inbox of submitted expense claims. Displays claimant name, amount, expense type, date, and attachment count per row, with inline approve and reject actions and a bulk-approve toolbar for low-value claims below auto-approval thresholds.
expense-approval-page
Responsibilities
- Render paginated expense claim list scoped to the authenticated approver's organization
- Provide filter controls for status (pending, approved, rejected), date range, and submitter
- Expose per-row approve button and reject button with mandatory comment modal
- Render bulk-approve toolbar with selection checkboxes and batch submit action
- Show optimistic UI updates on approve/reject and revert on server error
Interfaces
GET /api/v1/expense-claims?status=&from=&to=&submitter_id=&page=&limit=
POST /api/v1/expense-claims/:id/approve
POST /api/v1/expense-claims/:id/reject
POST /api/v1/expense-claims/bulk-approve
renderApprovalQueue(claims, filters, pagination)
handleApproveAction(claimId)
handleRejectAction(claimId, comment)
handleBulkApprove(selectedIds)
Relationships
Dependencies (3)
Components this component depends on
Related Data Entities (3)
Data entities managed by this component