🏠 Overview › 🎯 Features ›🎯 Receipt Capture and Attachment

Receipt Capture and Attachment

Feature Detail

medium complexity extracted Travel Reimbursement & Expense Handling Confidence: 100%
7
Components
198
Shared
12
User Stories
Yes
Analyzed

Description

Enables peer mentors to photograph or upload a receipt image directly within the expense entry flow for claims above a configurable monetary threshold (100 kr per HLF's requirement). The camera sheet opens inline within the wizard without navigating away from the form, and a thumbnail preview is shown before submission. Receipts are stored securely and linked to the specific claim record. For accessibility, the feature must support both camera capture and file-picker upload (for scanned PDFs or existing gallery images). VoiceOver/TalkBack labels must describe the attachment state clearly. The threshold is org-configurable so that Blindeforbundet and future organizations can apply their own rules.

Analysis

Business Value

Satisfies auditing requirements for Bufdir reimbursement documentation and provides organizations with the evidence trail needed for accounting reconciliation, without requiring peer mentors to manage physical receipts or email attachments separately.

Implementation Notes

Use `image_picker` Flutter package. Upload to Supabase Storage with a path scoped to org/user/claim. Store the storage path in the claim record. Apply a file size limit and compress images client-side before upload. The threshold check (e.g., >100 kr) should gate whether receipt attachment is required vs. optional. Ensure the upload is non-blocking — allow form submission with an in-progress upload indicator.

Components (205)

User Interface (3)

ui Receipt Attachment Indicator low ui Receipt Camera Sheet medium ui Receipt Thumbnail Preview Widget low

Service Layer (2)

service Receipt Attachment Service high service Receipt Image Compressor medium

Data Layer (2)

data Claim Receipt Repository low data Receipt Storage Repository medium

Shared Components

These components are reused across multiple features

User Interface (59)

ui Role Switch Widget medium Shared ui Role-Aware Bottom Navigation medium Shared ui Activity Type Selection Screen low Shared ui Speech-to-Text Field Overlay medium Shared ui Receipt Capture Widget medium Shared ui Peer Mentor Single Selector low Shared ui Proxy Audit Badge Widget low Shared ui Export Period Picker low Shared ui Contact Card Widget low Shared ui Contact Search Bar low Shared ui Peer Mentor Card Widget low Shared ui Activity History List low Shared ui Multi-Chapter Affiliation Chip Widget medium Shared ui Certification Status Badge low Shared ui Duplicate Activity Warning Dialog medium Shared ui Mentor Multi-Select Widget medium Shared ui Map Filter Panel medium Shared ui Claim Status Badge low Shared ui Export Date Range Picker low Shared ui Custom Date Range Picker low Shared ui Duplicate Activity Warning Dialog low Shared ui Proxy Activity Form medium Shared ui Proxy Peer Mentor Selector medium Shared ui Expected Return Date Picker low Shared ui Pause Activation Screen low Shared ui Pause Status Indicator low Shared ui Admin KPI Stat Widget low Shared ui Organisation Hierarchy Navigator high Shared ui Bufdir Period Selector Widget low Shared ui Export History List medium Shared ui Activity Type Donut Chart medium Shared ui Monthly Activity Bar Chart medium Shared ui Statistics Period Filter Bar low Shared ui Statistics Summary Cards low Shared ui Notification Badge Widget low Shared ui Certificate Expiry Status Indicator low Shared ui Animated Stat Card Widget medium Shared ui In-App Notification Banner low Shared ui Accessible Modal Sheet Widget high Shared ui Live Region Announcer medium Shared ui Semantics Wrapper Widget medium Shared ui Sensitive Field Warning Dialog high Shared ui Confirm Before Submit Screen medium Shared ui Inline Contextual Help Widget low Shared ui Labelled Navigation Bar low Shared ui Plain Language Error Display low Shared ui Single-Action Screen Layout medium Shared ui Wizard Progress Indicator low Shared ui Accessible Text Style System medium Shared ui Accessible Touch Target Wrapper low Shared ui Contrast-Safe Color Palette Widget medium Shared ui Accessible Bottom Navigation Bar medium Shared ui Modal Close Button low Shared ui Persistent Back Button low Shared ui Vertical Scroll Container low Shared ui Organization Card Widget low Shared ui Terminology-Aware Text Widget low Shared ui FeatureGate Widget low Shared ui Chapter Switcher medium Shared

Service Layer (52)

service Authentication Service medium Shared service Authentication Session Manager medium Shared service Biometric Authentication Service medium Shared service Biometric Authentication Service medium Shared service Biometric Authentication Service medium Shared service Permission Checker Service medium Shared service Role State Manager medium Shared service No-Access Route Guard low Shared service Activity Type Metadata Resolver low Shared service Chapter Scope Resolver medium Shared service Organisation Hierarchy Resolver medium Shared service Coordinator Notification Service medium Shared service Duplicate Activity Detection Service high Shared service Mentor Filter Service low Shared service Receipt Threshold Validator low Shared service Approval Status Notification Service medium Shared service Threshold Evaluation Service medium Shared service Declaration Encryption Service high Shared service Organization Feature Flag Service low Shared service Participant Deduplication Service high Shared service Reporting Period Service medium Shared service Activity Attribution Service low Shared service Proxy Duplicate Detection Service medium Shared service Pause Management Service medium Shared service Pause Notification Service medium Shared service Admin Export Service medium Shared service Admin Row-Level Security Guard high Shared service Organisation Hierarchy Service high Shared service User Management Service high Shared service Role Access Validator low Shared service Peer Mentor Stats Aggregator medium Shared service Push Notification Dispatcher medium Shared service Notification Preference Service low Shared service Scenario Deep-Link Router medium Shared service Scenario Notification Content Builder medium Shared service Badge Criteria Integration medium Shared service Activity Summary Aggregator low Shared service Focus Management Service medium Shared service Screen Reader Detection Service medium Shared service Sensitive Field Privacy Guard high Shared service Plain Language Content Service medium Shared service Wizard State Manager medium Shared service Tab State Manager medium Shared service Organization Route Guard medium Shared service Tenant Context Service high Shared service Label Key Resolver Service low Shared service Organization Labels Notifier medium Shared service FeatureFlagProvider (Riverpod) medium Shared service Access Scope Service high Shared service Hierarchy Aggregation Service high Shared service Hierarchy Service high Shared service Unit Assignment Service medium Shared

Data Layer (33)

data Authentication Repository low Shared data Auth Token Store low Shared data Secure Session Storage low Shared data Activity Type Cache Provider medium Shared data Receipt Storage Adapter medium Shared data Proxy Contact List Provider low Shared data Contact Repository medium Shared data Contact Detail Repository medium Shared data Peer Mentor Repository low Shared data Mentor Status Repository low Shared data Contact Chapter Repository medium Shared data Contact Cache Sync Repository low Shared data Organisation Rate Configuration Repository low Shared data Multi-Organization Data Isolator medium Shared data Bufdir Aggregation Repository low Shared data Report File Storage Client low Shared data Certification Status Repository low Shared data Peer Mentor Status Repository medium Shared data Statistics Cache Manager low Shared data In-App Notification Repository low Shared data Pause Status Record Repository low Shared data Activity Aggregation Repository medium Shared data Notification Preferences Repository low Shared data Scenario Notification Repository medium Shared data Sensitive Field Configuration low Shared data Error Message Registry low Shared data Help Content Registry low Shared data Wizard Draft Repository low Shared data Design Token Provider medium Shared data Organization Repository medium Shared data Terminology Local Cache Adapter low Shared data Organization Unit Repository high Shared data Unit Assignment Repository medium Shared

Infrastructure (54)

infrastructure Keyboard-Aware Layout Utility low Shared infrastructure Supabase Auth Client low Shared infrastructure Deep Link / OAuth Redirect Handler medium Shared infrastructure Secure Storage Adapter low Shared infrastructure Supabase Session Manager medium Shared infrastructure URL Launcher Utility low Shared infrastructure Local Storage Adapter low Shared infrastructure Supabase Activity Client low Shared infrastructure Organization Labels Provider low Shared infrastructure Supabase Client low Shared infrastructure Organisation Field Config Loader medium Shared infrastructure Speech-to-Text Adapter medium Shared infrastructure File Download Handler low Shared infrastructure Duplicate Reviewed Flag Middleware low Shared infrastructure Contact RLS Query Builder low Shared infrastructure Contact Form Validator low Shared infrastructure Design Token Theme low Shared infrastructure Organization Labels Provider low Shared infrastructure Supabase Client Provider low Shared infrastructure Search Debounce Utility low Shared infrastructure Expense Type Analytics Tracker low Shared infrastructure Receipt Image Picker Integration low Shared infrastructure CSV / JSON File Generator medium Shared infrastructure Coordinator Role Guard low Shared infrastructure Nightly Job Scheduler medium Shared infrastructure Supabase RLS Policy Configuration high Shared infrastructure Export File Storage Adapter low Shared infrastructure Supabase Storage Adapter low Shared infrastructure Peer Mentor Pause Management Service medium Shared infrastructure Push Notification Service medium Shared infrastructure fl_chart Adapter medium Shared infrastructure Push Notification Service low Shared infrastructure FCM Push Notification Sender medium Shared infrastructure FCM Notification Dispatcher medium Shared infrastructure Push Notification Dispatcher medium Shared infrastructure Supabase Realtime Subscription Service medium Shared infrastructure Organisation Data Isolation Guard low Shared infrastructure Push Notification Dispatcher medium Shared infrastructure Deep Link Handler medium Shared infrastructure QR Code Generator low Shared infrastructure Share Sheet Bridge low Shared infrastructure Semantics Service Facade medium Shared infrastructure Accessibility Design Token Enforcer medium Shared infrastructure Accessible Theme Builder medium Shared infrastructure Navigation Route Configuration medium Shared infrastructure Accessibility Live Region Announcer low Shared infrastructure Feature Flag Provider low Shared infrastructure Secure Storage Adapter low Shared infrastructure Supabase RLS Tenant Scope Configurator medium Shared infrastructure Label Key Registry low Shared infrastructure Terminology Riverpod Providers low Shared infrastructure WCAG Semantics Label Resolver low Shared infrastructure Feature Flag Key Constants low Shared infrastructure RLS Policy Manager high Shared

User Stories (12)

Access Previously Submitted Receipt for Reference
medium 3 pts

As a As a Peer Mentor (Likeperson)

I want to view the receipt image I attached to a previously submitted expense claim

So that I can verify what was submitted if a claim is queried or rejected by the coordinator

Acceptance Criteria
  • Given I have submitted an expense claim with a receipt, When I navigate to my expense history and open the claim, Then the receipt thumbnail is visible in the claim detail view
  • Given I tap the receipt thumbnail on a submitted claim, When the image loads, Then a full-screen modal opens with the receipt image
  • Given the full-screen modal is open, When I pinch the image, Then I can zoom in to read receipt details
  • +3 more
View Full Story →
Attach Receipt When Offline and Sync When Connected
medium 8 pts

As a As a Peer Mentor (Likeperson)

I want to capture and attach a receipt image even when I have no internet connection, with the upload occurring automatically when connectivity is restored

So that I can complete my expense registration immediately after an activity without worrying about network availability

Acceptance Criteria
  • Given I have no internet connection, When I capture a receipt and fill in the expense form, Then I can complete the form and the claim is saved locally in a pending state
  • Given a claim is in pending state due to no connectivity, When I view the expense list, Then the pending claim is shown with a 'Waiting for connection' indicator
  • Given connectivity is restored, When the app detects the network, Then pending uploads are processed automatically in the background without requiring me to reopen the form
  • +3 more
View Full Story →
Access Previously Submitted Receipt for Reference
medium 3 pts

As a As a Coordinator

I want to view the receipt image I attached to a previously submitted expense claim

So that I can verify what was submitted if a claim is queried or rejected by the coordinator

Acceptance Criteria
  • Given I have submitted an expense claim with a receipt, When I navigate to my expense history and open the claim, Then the receipt thumbnail is visible in the claim detail view
  • Given I tap the receipt thumbnail on a submitted claim, When the image loads, Then a full-screen modal opens with the receipt image
  • Given the full-screen modal is open, When I pinch the image, Then I can zoom in to read receipt details
  • +3 more
View Full Story →
Attach Receipt When Offline and Sync When Connected
medium 8 pts

As a As a Coordinator

I want to capture and attach a receipt image even when I have no internet connection, with the upload occurring automatically when connectivity is restored

So that I can complete my expense registration immediately after an activity without worrying about network availability

Acceptance Criteria
  • Given I have no internet connection, When I capture a receipt and fill in the expense form, Then I can complete the form and the claim is saved locally in a pending state
  • Given a claim is in pending state due to no connectivity, When I view the expense list, Then the pending claim is shown with a 'Waiting for connection' indicator
  • Given connectivity is restored, When the app detects the network, Then pending uploads are processed automatically in the background without requiring me to reopen the form
  • +3 more
View Full Story →
View and Replace Attached Receipt Before Submission
high 3 pts

As a As a Peer Mentor (Likeperson)

I want to preview, replace, or remove an attached receipt image before submitting my expense claim

So that I can correct mistakes (blurry photo, wrong receipt) before the claim is sent for approval

Acceptance Criteria
  • Given a receipt is attached to my expense, When I tap the thumbnail preview, Then a full-screen preview modal opens showing the receipt image
  • Given the preview modal is open, When I tap 'Replace', Then the camera sheet reopens and I can capture a new image that replaces the previous one
  • Given the preview modal is open, When I tap 'Remove', Then the attachment is cleared and the thumbnail indicator is removed from the form
  • +3 more
View Full Story →
Receive Clear Feedback When Receipt Is Required But Missing
high 3 pts

As a As a Peer Mentor (Likeperson)

I want to be clearly informed when my expense amount requires a receipt attachment before I can submit

So that I understand exactly what is blocking submission and can take the correct action without confusion or frustration

Acceptance Criteria
  • Given I enter an expense amount above the org-configured receipt threshold, When the amount field loses focus, Then a visual indicator appears on the receipt attachment section showing 'Receipt required for amounts over [X] NOK'
  • Given the threshold indicator is shown, When a screen reader is active, Then the threshold requirement is announced via an accessibility live region
  • Given I have not yet attached a receipt and the amount is above threshold, When I tap the Submit button, Then submission is blocked and the receipt section is scrolled into view with an error state highlighted
  • +3 more
View Full Story →
View and Replace Attached Receipt Before Submission
high 3 pts

As a As a Coordinator

I want to preview, replace, or remove an attached receipt image before submitting my expense claim

So that I can correct mistakes (blurry photo, wrong receipt) before the claim is sent for approval

Acceptance Criteria
  • Given a receipt is attached to my expense, When I tap the thumbnail preview, Then a full-screen preview modal opens showing the receipt image
  • Given the preview modal is open, When I tap 'Replace', Then the camera sheet reopens and I can capture a new image that replaces the previous one
  • Given the preview modal is open, When I tap 'Remove', Then the attachment is cleared and the thumbnail indicator is removed from the form
  • +3 more
View Full Story →
Receive Clear Feedback When Receipt Is Required But Missing
high 3 pts

As a As a Coordinator

I want to be clearly informed when my expense amount requires a receipt attachment before I can submit

So that I understand exactly what is blocking submission and can take the correct action without confusion or frustration

Acceptance Criteria
  • Given I enter an expense amount above the org-configured receipt threshold, When the amount field loses focus, Then a visual indicator appears on the receipt attachment section showing 'Receipt required for amounts over [X] NOK'
  • Given the threshold indicator is shown, When a screen reader is active, Then the threshold requirement is announced via an accessibility live region
  • Given I have not yet attached a receipt and the amount is above threshold, When I tap the Submit button, Then submission is blocked and the receipt section is scrolled into view with an error state highlighted
  • +3 more
View Full Story →
Capture Receipt Photo for Expense Claim
critical 5 pts

As a As a Peer Mentor (Likeperson)

I want to photograph a receipt directly within the expense registration flow using my phone camera

So that I can attach proof of purchase to my expense claim without leaving the app or using a separate scanning app

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
  • +3 more
View Full Story →
Submit Expense Claim with Receipt Stored Securely
critical 5 pts

As a As a Peer Mentor (Likeperson)

I want my receipt image to be securely uploaded and stored when I submit my expense claim

So that the receipt is available to the coordinator for review and is retained for audit purposes without me needing to manage file storage manually

Acceptance Criteria
  • Given I submit an expense claim with a receipt attached, When the form is submitted, Then the receipt image is uploaded to Supabase Storage before the claim record is created
  • Given the upload is in progress, When I am on the submission screen, Then an upload progress indicator is shown so I know the operation is ongoing
  • Given the upload completes successfully, When the claim is saved, Then the receipt storage path is linked to the claim record in the database
  • +3 more
View Full Story →
Capture Receipt Photo for Expense Claim
critical 5 pts

As a As a Coordinator

I want to photograph a receipt directly within the expense registration flow using my phone camera

So that I can attach proof of purchase to my expense claim without leaving the app or using a separate scanning app

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
  • +3 more
View Full Story →
Submit Expense Claim with Receipt Stored Securely
critical 5 pts

As a As a Coordinator

I want my receipt image to be securely uploaded and stored when I submit my expense claim

So that the receipt is available to the coordinator for review and is retained for audit purposes without me needing to manage file storage manually

Acceptance Criteria
  • Given I submit an expense claim with a receipt attached, When the form is submitted, Then the receipt image is uploaded to Supabase Storage before the claim record is created
  • Given the upload is in progress, When I am on the submission screen, Then an upload progress indicator is shown so I know the operation is ongoing
  • Given the upload completes successfully, When the claim is saved, Then the receipt storage path is linked to the claim record in the database
  • +3 more
View Full Story →