Expense Summary Card
Component Detail
Description
Read-only card widget displayed on the activity detail view summarising the attached expense claim, its approval status badge, and a link to the full expense detail. Used by both peer mentors (own claims) and coordinators (others' claims).
expense-summary-card
Summaries
The Expense Summary Card gives both field workers and coordinators immediate visibility into the status of submitted expense claims directly within the activity view, eliminating the need to navigate to separate administrative screens. This accelerates approval workflows, reduces back-and-forth communication, and improves transparency across the organization. For coordinators reviewing peer mentor activities, the card provides a clear at-a-glance overview — including total amount, distance, and approval state — that supports faster decision-making and reduces the risk of claims being overlooked or delayed unnecessarily.
This is a low-complexity, self-contained mobile UI component with no declared dependencies, making it a safe candidate for early or parallel development. It consumes a single expense record and renders four distinct pieces of information: type labels, total amount, distance, and an approval status badge with four possible states (auto-approved, pending, approved, rejected). The optional receipt thumbnail introduces a conditional rendering path that must be tested across both presence and absence. Since it serves two user roles — peer mentors and coordinators — acceptance testing should include both personas to confirm role-appropriate display behavior.
Expense Summary Card is a stateless, read-only mobile widget built around a single build(expenseRecord) constructor. It derives badge color from getStatusBadgeColor(status), which must handle all four approval states cleanly. The onTap(expenseId) callback delegates navigation to the parent — the card itself has no routing logic. Receipt thumbnail rendering is conditional on data availability and should degrade gracefully when absent, avoiding layout shifts.
Because this card is consumed from the activity detail view by multiple user roles, it must be designed for reuse without role-specific branching inside the component itself — role context belongs in the parent, not here.
Responsibilities
- Display expense type labels, total amount, and distance
- Show approval status badge (auto-approved, pending, approved, rejected)
- Provide navigation to full expense detail screen
- Render receipt thumbnail if available
Interfaces
build(expenseRecord)
onTap(expenseId)
getStatusBadgeColor(status)
Related Data Entities (2)
Data entities managed by this component