Capture Receipt Photo for Expense Claim
When registering an expense claim that exceeds the organization's threshold (e.g., 100 NOK for HLF), the peer mentor must attach a receipt image. The app opens a camera sheet allowing the user to take a photo or select an existing image from the device gallery. The captured image is compressed to reduce storage and upload size while maintaining legibility, then attached to the claim before submission. A thumbnail preview confirms successful attachment. This flow must be accessible via screen reader and support sufficient touch target sizes per WCAG 2.2 AA requirements.
User Story
Acceptance Criteria
- Given I am on the expense registration screen and the expense amount exceeds the receipt threshold, When I tap the receipt attachment button, Then a bottom sheet opens with camera and gallery options
- Given the camera sheet is open, When I take a photo, Then a preview of the image is displayed and I can confirm or retake
- Given I confirm the photo, When the image is attached, Then a thumbnail indicator appears on the expense form confirming the attachment
- Given the image is captured, When it is processed, Then it is automatically compressed to under 500KB without losing legibility of receipt text
- Given I am using a screen reader, When I interact with the receipt capture flow, Then all controls have meaningful semantic labels and focus is managed correctly throughout the sheet
- Given the expense amount is below the receipt threshold, When I register the expense, Then the receipt attachment is optional and the form can be submitted without one
Business Value
Receipt capture directly addresses the HLF requirement for receipts on expenses over 100 NOK and enables automated approval workflows. Without this, all expense claims require manual coordinator review, creating bottlenecks. Inline camera capture reduces friction to near zero — the peer mentor never leaves the app context — which directly combats the underreporting problem identified across all organizations.
Components
- Receipt Camera Sheet ui
- Receipt Thumbnail Preview Widget ui
- Receipt Attachment Indicator ui
- Receipt Attachment Service service
- Receipt Image Compressor service
- Receipt Image Picker Integration infrastructure
- Expense Registration Screen ui
- Receipt Capture Widget ui
- Expense Form BLoC service