Expense Registration Screen
Component Detail
Description
Primary screen for logging travel expenses attached to an activity record. Presents the expense type selector, dynamic form fields based on selection, and receipt attachment controls within the activity registration flow.
expense-registration-screen
Summaries
The Expense Registration Screen is the primary point where employees capture travel costs, directly impacting how quickly and accurately the organization processes reimbursements. By embedding expense logging within the activity record itself, the screen eliminates the need for separate expense report submissions, reducing administrative overhead and the risk of lost or forgotten receipts. Real-time approval status feedback keeps employees informed without requiring follow-up queries to finance, improving satisfaction and trust in the reimbursement process. Faster, more accurate expense capture translates to better cash flow visibility for finance teams and reduces the cost of manual error correction.
This screen carries high complexity due to its coordination of three distinct sub-systems: the expense type selector, receipt capture, and form state management via the expense-form-bloc. Any delay in delivering these dependencies will block integration and end-to-end testing of the full expense registration flow. The dynamic form fields driven by expense type selection require thorough test coverage across all type combinations, including edge cases around receipt threshold indicators. Deployment on mobile platforms requires device-specific testing for camera permissions and image handling.
Plan for regression testing cycles whenever the expense-type catalogue or approval workflow changes upstream.
The Expense Registration Screen is a stateful mobile UI component that orchestrates three dependencies: expense-type-selector-widget, receipt-capture-widget, and expense-form-bloc. It exposes a show(activityId) entry point that binds the form context to a specific activity record. State transitions — including dynamic field visibility, receipt requirement thresholds, and validation error display — are driven by BLoC events emitted from the form-bloc and selector widget. The onSubmit() handler delegates to the bloc for persistence and triggers showApprovalStatus() upon response.
Maintain clear separation between UI rendering and business logic by keeping all validation and state mutation inside the bloc layer, not the screen itself.
Responsibilities
- Render expense form attached to a specific activity record
- Coordinate expense type selection with form field visibility
- Display receipt requirement indicator based on amount threshold
- Show submission confirmation and approval status feedback
Interfaces
show(activityId)
onExpenseTypeChanged(types)
onAmountChanged(amount)
onReceiptAttached(imageUrl)
onSubmit()
showApprovalStatus(status)
showValidationErrors(errors)
Relationships
Dependencies (3)
Components this component depends on