Expense Calculation Preview
Component Detail
Description
Displays the automatically computed reimbursement estimate for the current selection in real time. Updates as the user selects or deselects expense types, showing line-item breakdowns (e.g., per-km amount, flat receipt amounts) so the peer mentor knows what to expect before submitting.
expense-calculation-preview
Summaries
The Expense Calculation Preview gives peer mentors immediate, transparent visibility into their expected reimbursement before they submit a claim. By displaying a real-time line-item breakdown — including per-kilometer rates and flat receipt amounts — as soon as expense types are selected, the component builds trust in the reimbursement process and reduces the uncertainty that often leads to support inquiries. When mentors can see exactly what they will be paid for each selection, they submit more confidently and accurately, reducing the volume of claim corrections and administrative overhead. This transparency is a direct contributor to peer mentor satisfaction and program participation rates.
This is a low-complexity display widget with two dependencies: the Expense Calculation Service (which computes the actual amounts) and the Expense Selection BLoC (which provides the current selection state). It is a leaf component in the dependency graph, meaning it cannot be meaningfully tested without both dependencies being available or mocked. The primary delivery risk is in the upstream calculation service — if reimbursement rates or formulas change during development, the preview display logic is unaffected but test data must be updated. Ensure the zero-state (no types selected) design is signed off by UX before implementation, as it appears frequently in the user flow.
This component has low maintenance burden once delivered, assuming the calculation service API remains stable.
ExpenseCalculationPreview is a stateless widget that accepts an ExpenseCalculationResult value object and renders it as a list of line items. It subscribes to the Expense Selection BLoC stream (via BlocBuilder or Riverpod watch) to receive updated ExpenseCalculationResult instances whenever the selection changes — the BLoC triggers recalculation via the Expense Calculation Service on each toggle. The result object should carry a list of typed line items (e.g., {label: 'Mileage (42km × $0.61)', amount: 25.62}) and a total. Render each line item as a Row with label and right-aligned formatted amount.
The zero-state (result.lineItems.isEmpty) should render a neutral placeholder message. Use intl package for currency formatting to respect locale. Avoid embedding calculation logic here — this widget is purely presentational. If ExpenseCalculationResult can be null during async recalculation, show a loading shimmer to prevent layout shift.
Responsibilities
- Render live payout estimate for selected expense types
- Show per-type calculation breakdown
- Update immediately on every selection change
- Display zero-state when no types are selected
Interfaces
ExpenseCalculationPreview({required ExpenseCalculationResult result})
build(BuildContext context)
Relationships
Dependencies (2)
Components this component depends on