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
Audience Summaries
Real-time expense calculation preview directly addresses a critical trust and accuracy gap for peer mentors navigating HLF's complex reimbursement rules — where 60–70% of registrations involve no reimbursement at all and the remainder are subject to strict, multi-variable policies. By surfacing accurate cost breakdowns at the point of entry, this feature eliminates costly rework caused by misunderstood entitlements and incorrect submissions. Displaying auto-approval eligibility before submission reduces coordinator queue volume and speeds up processing, delivering measurable savings in administrative overhead. The result is a system that builds peer mentor confidence, drives higher feature adoption, and strengthens the organisation's value proposition as a self-service, low-friction reimbursement platform.
This story requires coordinated delivery across frontend UI, rate configuration backend, and auto-approval rules logic — all of which must be aligned before development begins. The hard dependency on the expense type selection mutual-exclusion story must be resolved first, as the preview panel subscribes directly to type selection state. The 300ms performance criterion is an acceptance gate that requires QA to define a load testing approach early, particularly for low-powered mobile devices used in field settings. Accessibility requirements (ARIA live region announcements) add a dedicated testing scope for screen reader compatibility across iOS and Android.
Rate configuration data availability must be confirmed in all target environments before UAT begins, or preview accuracy cannot be validated against real organisational rates.
The preview panel is a reactive UI component that subscribes to form field changes — expense type selection, distance input, toll amounts — and triggers recalculation within 300ms without a full page reload. Rate data is fetched from the rate configuration repository, ideally cached at session start to avoid per-keystroke network calls, with a session-boundary refresh to pick up configuration changes. Business logic must conditionally apply rate-per-km, toll threshold, and flat parking calculations based on selected types, rendering a line-item breakdown for multi-type selections. Auto-approval threshold comparison drives conditional rendering of green or amber status badges.
Accessibility requires an aria-live='polite' region that announces updated totals without disrupting the user's current focus position. Edge cases include the empty-state placeholder, zero or missing distance values, simultaneous multi-type field edits, and stale rate data across sessions.
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