View Attached Receipt Thumbnails and Open Full-Screen Viewer
The Receipt Upload Screen renders a thumbnail grid via the Receipt Thumbnail Widget. Each thumbnail shows the compressed preview image. Tapping a thumbnail opens a full-screen image viewer for close-up inspection. The Receipt Thumbnail Widget also displays status indicators — a spinner for pending uploads, an error icon for failed uploads, and a checkmark for confirmed uploads — so the user always knows the persistence state of each image. This gives users confidence that their receipt is correctly attached before they submit the expense for approval.
User Story
Acceptance Criteria
- Given an expense item has attached receipts, when the Receipt Upload Screen is opened, then all attached receipt thumbnails are displayed in a grid layout
- Given a thumbnail is displayed, when the user taps it, then the receipt image opens in a full-screen viewer
- Given an image is uploading, when the thumbnail is rendered, then a spinner or pending indicator is visible on the thumbnail
- Given an upload has failed, when the thumbnail is rendered, then an error indicator is visible and the user can see the upload failed
- Given an upload has succeeded, when the thumbnail is rendered, then a confirmed state indicator is shown with no progress spinner
Business Value
Providing immediate visual feedback with status indicators prevents duplicate uploads caused by users retapping when unsure whether their first upload succeeded. The full-screen viewer allows users to confirm image legibility before submission, reducing rejection rates during coordinator approval and avoiding unnecessary follow-up.
Components
- Receipt Upload Screen ui
- Receipt Thumbnail Widget ui
- Receipt Storage Repository data
- Image Storage Backend infrastructure