View Real-Time Expense Calculation Preview Before Submitting
The expense calculation preview component renders a summary panel below or adjacent to the expense type picker and detail fields. It updates in real time as the peer mentor selects expense types, enters distance, or adds toll amounts. The calculation uses the organisation's current reimbursement rates (fetched from the rate configuration repository) and applies the correct rate per kilometre, toll thresholds, or flat parking rates. The preview distinguishes between amounts that will be auto-approved and amounts requiring manual attestation. If the total exceeds the auto-approval threshold, a notice is shown. If no expense types are selected yet, the panel shows a placeholder indicating how the calculation will appear.
User Story
Acceptance Criteria
- Given the peer mentor selects 'mileage' and enters a distance, when the distance field updates, then the preview panel recalculates and displays the reimbursement amount within 300 ms without a full page reload
- Given the calculated amount is below the auto-approval threshold, when the preview renders, then a green indicator and label 'Auto-approved' are shown
- Given the calculated amount exceeds the auto-approval threshold, when the preview renders, then an amber indicator and label 'Requires coordinator approval' are shown
- Given multiple expense types are selected (e.g., mileage + parking), when any field updates, then the preview shows a line-item breakdown per type and a total
- Given the organisation's rate configuration changes, when the preview is rendered on a new session, then the updated rates are used in the calculation
- Given a screen reader is active, when the calculation updates, then the updated total is announced via a live region without interrupting the user's current focus
Business Value
Real-time calculation preview reduces submission errors caused by misunderstood reimbursement rules and gives peer mentors immediate confidence that their claim reflects actual entitlement. For HLF, where 60–70 percent of registrations involve no reimbursement at all and the rest have strict rules, transparent calculation builds trust in the system. Showing auto-approval eligibility at claim time also reduces coordinator workload by setting correct expectations before claims enter the queue.
Components
- Expense Calculation Preview ui
- Expense Calculation Service service
- Expense Selection BLoC service
- Expense Threshold Configuration infrastructure
- Expense Type Accessibility Service service