Scanvo APP

1. Login Screen
2. Sign Up Screen
3. Forgot Password Screen
4. Dashboard (Home Page)
5. Upload Invoice Screen
6. Scan Invoice Screen
7. Invoice Management Screen (List & Filter View)
8. Invoice Details Screen
9. Accountant Forwarding Screen
10. Profile & Settings Screen
11. Notifications Screen
12. Onboarding screen

1. Login Screen

1. Email Input Field:

○ Purpose: Allow users to input their registered email address.
○ Functions:
■ Text input field for entering the email.
■ Placeholder text: "Enter your email."
■ Validation: Ensure the input is in a valid email format (e.g.,
"[email protected]").
2. Password Input Field:
○ Purpose: Allow users to enter their password for authentication.
○ Functions:
■ Text input field for entering the password.
■ Placeholder text: "Enter your password."
■ Option to display or hide the password (e.g., eye icon to toggle
visibility).
■ Validation: Ensure the password meets required conditions (e.g.,
minimum length).
3. Login Button:
○ Purpose: Trigger the login process once the email and password are
entered.
○ Functions:
■ Button labeled “Login.”
■ Disabled state when input fields are empty or invalid.
 ■ Error message if the login credentials are incorrect (e.g., “Invalid
email or password”).
■ Redirect to the Dashboard or Home Page upon successful
login.
4. Forgot Password Link:
○ Purpose: Allow users to reset their password if they’ve forgotten it.
○ Functions:
■ A text link labeled “Forgot password?”
■ Redirects users to the Forgot Password Screen where they
can initiate a password reset.
5. Sign Up Link:
○ Purpose: Redirect users who don’t have an account to the sign-up
process.
○ Functions:
■ Text link labeled “Don’t have an account? Sign up.”
■ Redirects users to the Sign Up Screen.
6. Social Media Login:
○ Purpose: Allow users to log in using their social media accounts (e.g.,
Google, Facebook, Apple).
○ Functions:
■ Buttons for each social media login option.
■ OAuth integration to authenticate using Google, Facebook, etc.
■ Redirect to Dashboard upon successful login.
7. Error Messages:
○ Purpose: Provide feedback for invalid login attempts or empty fields.
○ Functions:
■ Display error messages for incorrect login credentials, missing
input, or system errors.
8. Remember Me Checkbox (Optional):
○ Purpose: Allow users to stay logged in for future sessions.
○ Functions:
■ Checkbox labeled “Remember me.”
■ Stores login session for future visits.

2. Sign Up Screen

1. Name Input Field:

○ Purpose: Allow users to enter their full name.
○ Functions:
■ Text input field for entering the name.
■ Placeholder text: “Enter your full name.”
■ Validation: Ensure the field is not empty.
2. Company Input Field:
Purpose: Allow users to enter their Company name.
Functions:
○ Text input field for entering the name.
○ Placeholder text: “Enter your company name.”
○ Validation: Ensure the field is not empty.
3.
4. Email Input Field:
○ Purpose: Allow users to enter their email address for registration.
○ Functions:
■ Text input field for entering the email.
■ Placeholder text: “Enter your email.”
■ Validation: Check for proper email format (e.g.,
"[email protected]").
■ Check for duplicate emails in the system to prevent multiple
accounts with the same email.
5. Password Input Field:
○ Purpose: Allow users to create a password for their account.
○ Functions:
■ Text input field for entering the password.
■ Placeholder text: “Enter your password.”
■ Option to toggle visibility (eye icon to show/hide the password).
■ Validation: Enforce password requirements (e.g., minimum 8
characters, a mix of letters and numbers).
6. Confirm Password Input Field:
○ Purpose: Ensure the user entered their password correctly.
○ Functions:
■ Text input field for re-entering the password.
■ Placeholder text: “Confirm your password.”
■ Validation: Check if the password matches the initial password
field.
7. Sign Up Button:
○ Purpose: Trigger the account creation process.
○ Functions:
■ Button labeled “Sign Up.”
■ Disabled state until all required fields are filled out and valid.
■ When clicked, validate all fields (name, email, password).
■ After successful validation, create a user account and redirect to
the Dashboard or Home Page.
8. Pricing Information:
○ Purpose: Inform users of the pricing structure during sign-up.
○ Functions:
■ Display a clear message: “First month free, then €7.99 per
month” below the sign-up form.
 ■ Ensure that users are aware of the pricing plan before account
creation.
9. Login Link:
○ Purpose: Redirect users who already have an account to the login
page.
○ Functions:
■ Text link labeled “Already have an account? Login.”
■ Redirects users to the Login Screen.
10. Terms & Conditions / Privacy Policy Checkbox:
○ Purpose: Ensure users agree to the terms and conditions before
creating an account.
○ Functions:
■ Checkbox labeled “I agree to the Terms & Conditions and
Privacy Policy.”
■ Link to terms and privacy policy documents.
■ The sign-up button should be disabled until the checkbox is
selected.
11. Error Messages:
○ Purpose: Provide feedback for invalid input or issues during sign-up.
○ Functions:
■ Display error messages for invalid email, password mismatch,
missing input, or system errors.
12. Social Media Sign Up:
○ Purpose: Allow users to sign up using social media accounts (e.g.,
Google, Facebook).
○ Functions:
■ Buttons for each social media platform.
■ OAuth integration for easy registration using Google, Facebook,
etc.
■ Automatically populate name and email fields if using social
sign-up.

3. Forgot Password Screen

1. Email Input Field:

○ Purpose: Allow users to enter their registered email address to receive
password reset instructions.
○ Functions:
■ Text input field for entering the email.
■ Placeholder text: “Enter your registered email.”
■ Validation: Ensure the input is in a valid email format (e.g.,
"[email protected]").
■ Error handling if the email doesn’t exist in the system (e.g.,
“Email not found”).
 2. Send Reset Link Button:
○ Purpose: Send a password reset link to the provided email address.
○ Functions:
■ Button labeled “Send Reset Link.”
■ Disabled state if the email input field is empty or contains an
invalid email.
■ When clicked, validate the email and trigger an email with a
password reset link to be sent to the user.
■ Display success message after the link is sent (e.g., “Check
your email for the reset link”).
3. Back to Login Link:
○ Purpose: Allow users to return to the login page if they remember their
password or want to go back.
○ Functions:
■ Text link labeled “Back to Login.”
■ Redirects users to the Login Screen.
4. Security Measures:
○ Purpose: Ensure secure handling of password reset requests.
○ Functions:
■ Limit the number of reset attempts to avoid abuse.
■ Use secure tokens in the reset link for authentication.
5. Error Messages:
○ Purpose: Provide feedback for invalid or non-existent email addresses.
○ Functions:
■ Display error messages like “Please enter a valid email” or
“Email not found” if the entered email isn’t registered.
6. Confirmation Message:
○ Purpose: Let the user know that the reset link was successfully sent.
○ Functions:
■ Display a message after successfully sending the reset link,
such as, “A reset link has been sent to your email.”

4. Dashboard (Home Page)

1. Top Navigation Bar:

○ Purpose: Provide quick access to the user’s profile, notifications, and
settings.
○ Functions:
■ Logo: Display the app logo on the left.
■ Profile Icon: Icon for accessing the user’s profile and settings.
■ Notifications Icon: Displays pending notifications (e.g.,
reminders, new invoices, upcoming forwarding date).
2. Quick Actions Section:
 ○ Purpose: Give users immediate access to key actions like uploading
and scanning invoices.
○ Functions:
■ Upload Invoice Button: Takes users to the Upload Invoice
Screen to upload PDF/image files.
■ Scan Invoice Button: Opens the phone’s camera (for mobile
users) or allows users to scan documents using their device
camera, redirecting to the Scan Invoice Screen.
3. Summary Section:
○ Purpose: Provide an overview of the user’s recent activity and key
metrics.
○ Functions:
■ Total Invoices: Show the total number of invoices stored in the
system.
■ Invoices Due: Display invoices with an upcoming due date or
unpaid invoices (if applicable).
■ Invoices Sent to Accountant: Display a count of invoices
forwarded to the accountant, showing the most recent
forwarding activity.
4. Recent Activity Section:
○ Purpose: Display the most recent invoices uploaded or scanned for
easy access.
○ Functions:
■ List of recent invoices, showing:
■ Invoice date.
■ Company name.
■ Invoice amount (if available).
■ Clicking on any item takes the user to the Invoice Details
Screen.
5. Invoices Filter/Sort Button:
○ Purpose: Enable users to quickly access all invoices and filter/sort
them based on specific criteria.
○ Functions:
■ Button to access the Invoice Management Screen with filtering
options (by date, company, etc.).
6. Search Bar with Date Filters:
○ Purpose: Allow users to search for specific invoices directly from the
dashboard.
○ Functions:
■ Text input field with a search icon.
■ Search by invoice name, company, or date.
■ Date search includes predetermined options:
■ This Week: Filter invoices from the current week.
■ This Month: Filter invoices from the current month.
 ■ This Quarter: Filter invoices from the current quarter.
■ Custom Date Range: Users can select a custom date
range for invoice searches.
7. Add New Invoice Button (Optional):
○ Purpose: Give users a prominent way to add a new invoice quickly.
○ Functions:
■ Floating button at the bottom of the screen labeled “Add
Invoice.”
■ Clicking takes users directly to the Upload Invoice Screen.

5. Upload Invoice Screen

1. File Upload Button:

○ Purpose: Allow users to upload invoices in PDF or image format from
their device.
○ Functions:
■ A large button labeled “Upload Invoice” or “Choose File.”
■ Accepts PDF, JPEG, PNG, and other relevant formats.
■ Displays a file picker dialog for users to select the file from their
device.
■ Validation for supported file types and file size limits (e.g., up to
5MB).
2. Preview of Uploaded Invoice:
○ Purpose: Show a preview of the uploaded invoice for verification
before saving.
○ Functions:
■ Display a thumbnail or a minimized version of the uploaded file
(PDF or image).
■ Option to zoom in/out for viewing details.
■ Include an "X" or “Remove” button to delete the uploaded file
and select a new one.
3. Manual Data Entry Fields:
○ Purpose: Allow users to enter key details about the invoice manually.
○ Functions:
■ Date Field: Users can input the invoice date or use a date
picker.
■ Company Name Field: Text input field for entering the company
associated with the invoice.
■ Invoice Amount Field: Text input for entering the invoice
amount.
■ Optional: Additional fields like Category, Notes, or Tags for
organizing invoices.
4. Auto-Extract Data Option (Optional):
 ○ Purpose: Allow the app to auto-extract key data from the invoice (if
OCR is integrated).
○ Functions:
■ A button labeled “Auto-Extract Data” that uses OCR (optical
character recognition) to pull information such as date, company
name, and amount from the invoice.
■ Populate the fields automatically based on the data extracted
from the uploaded document.
5. Save Invoice Button:
○ Purpose: Save the uploaded invoice and its associated details.
○ Functions:
■ Button labeled “Save Invoice” or “Submit.”
■ Only enabled once all required fields are filled in or the file is
uploaded.
■ When clicked, validate the input and upload the file and data to
the app's database.
■ Redirect the user back to the Invoice Management Screen or
Dashboard after successful upload.
6. Cancel Button:
○ Purpose: Allow users to exit the upload process without saving.
○ Functions:
■ Button labeled “Cancel.”
■ Redirects the user back to the Dashboard or previous screen
without saving the uploaded file or data.

Additional Functionalities:

● Drag and Drop Support (Optional):

○ Allow users to drag and drop files directly into the upload area instead
of clicking “Upload Invoice.”
● File Upload Progress Bar:
○ Display a progress bar or spinner showing the file upload status,
especially for larger files.
● Error Messages:
○ Provide feedback if the file format is unsupported or the file size
exceeds the limit.
○ Validation error messages for required fields (e.g., if a user skips the
company name or date).
● Security Features:
○ Use HTTPS encryption to ensure secure transmission of uploaded
files.
○ Verify files for malware or suspicious content (optional).
6. Scan Invoice Screen

Camera Access for Scanning:

● Purpose: Enables users to scan invoices using their camera.

● Functions:
○ Button labeled “Scan with Camera” prompts for camera access.
○ Opens camera view; users position the invoice and tap to capture.
○ Multi-page option: After capturing each page, users can choose “Add Next
Page” to continue or “Finish Scanning” to complete.

Retake or Confirm Scanned Image:

● Purpose: Allows users to review or retake images.

● Functions:
○ Preview each captured page with options to “Retake” or “Confirm.”
○ For multi-page, users can review all pages in sequence.

Auto-Crop and Enhance:

● Purpose: Improves the clarity of scanned images.

● Functions:
○ Automatically detects and crops document edges.
○ Enhances brightness/contrast for better legibility.
○ Shows the adjusted image for confirmation.

Manual Data Entry Fields:

● Purpose: Allows input of key details after scanning.

● Fields:
○ Date (with date picker), Company Name, and Invoice Amount.
○ Optional fields for Category, Notes, or Tags.

Auto-Extract Data (Optional):

● Purpose: Uses OCR to automatically populate invoice details.

● Functions:
○ Button labeled “Auto-Extract Data” scans the document for key information
like date, company name, and amount.
○ Users can review and adjust as needed.

Save Invoice Button:

● Purpose: Saves the scanned invoice and entered details.

● Functions:
○ Button labeled “Save Invoice,” enabled once all fields are complete.
○ Combines multi-page scans into a single PDF if applicable.
○ Saves to the database and redirects back to Invoice Management or
Dashboard.
Cancel Button:

● Purpose: Allows users to exit without saving.

● Functions:
○ Button labeled “Cancel” redirects back to Dashboard or previous screen.

7. Invoice Management Screen (List & Filter View)

1. Invoice List:
○ Purpose: Display all invoices uploaded or scanned by the user.
○ Functions:
■ A scrollable list of invoices, each displayed as a card or row.
■ Each invoice includes key details such as:
■ Invoice Date
■ Company Name
■ Invoice Amount (if applicable)
■ Each entry is clickable, taking the user to the Invoice Details
Screen for a more detailed view.
■ Option to select multiple invoices for batch actions (e.g., bulk
deletion or downloading).
2. Search Bar:
○ Purpose: Allow users to quickly find specific invoices.
○ Functions:
■ Text input field with a search icon.
■ Users can search by:
■ Invoice name
■ Company name
■ Date range (see date filters below)
■ Auto-suggestions as the user types.
3. Predefined Date Filters:
○ Purpose: Let users filter invoices by commonly used date ranges.
○ Functions:
■ Drop-down menu or buttons with predefined date ranges:
■ This Week: Invoices from the current week.
■ This Month: Invoices from the current month.
■ This Quarter: Invoices from the current quarter.
■ Custom Date Range: Allows users to pick a custom start
and end date for filtering.
4. Filter by Company/Amount:
○ Purpose: Allow users to filter invoices by additional criteria.
○ Functions:
■ Drop-down menu to filter by company name.
■ Option to filter by invoice amount (greater than, less than, or
within a range).
 5. Sort Functionality:
○ Purpose: Enable users to sort invoices by specific criteria.
○ Functions:
■ Sort invoices by:
■ Date (ascending or descending)
■ Amount (ascending or descending)
■ Company Name (alphabetical order)
■ Drop-down menu or clickable headers in a table layout for
sorting options.
6. Batch Actions (Optional):
○ Purpose: Allow users to perform actions on multiple invoices at once.
○ Functions:
■ Users can select multiple invoices by checking boxes next to
each invoice.
■ Batch action buttons include:
■ Delete Selected Invoices
■ Download Selected Invoices (as a ZIP or combined
PDF)
7. Pagination or Infinite Scroll:
○ Purpose: Efficiently handle large numbers of invoices.
○ Functions:
■ Pagination controls (e.g., “Next Page,” “Previous Page”) or
■ Infinite scrolling where more invoices load as the user scrolls
down.
8. Add Invoice Button:
○ Purpose: Provide a quick way for users to add a new invoice directly
from the management screen.
○ Functions:
■ A floating button labeled “Add Invoice” or similar.
■ Clicking it redirects the user to the Upload Invoice Screen.

Additional Functionalities:

● Visual Indicators (Optional):

○ Use color-coded tags or icons to indicate important invoice statuses
(e.g., overdue, unpaid, sent to accountant).
● Loading Indicators:
○ Display a spinner or progress bar while the invoice list is being filtered
or sorted.
● No Results Message:
○ Display a message if the search or filter returns no results (e.g., “No
invoices found for this date range”).
 ● Error Handling:
○ Provide error messages if there are issues fetching invoices from the
database.
● Security Features:
○ Ensure that only authenticated users can view and manage their own
invoices.
○ Protect against unauthorized access with proper user verification.

8. Invoice Details Screen

1. Invoice Overview:
○ Purpose: Provide a detailed view of a specific invoice, showing key
information.
○ Functions:
■ Display key details at the top, such as:
■ Invoice Date
■ Company Name
■ Invoice Amount
■ Invoice Number (optional)
■ These fields can be displayed as text or in editable fields
(depending on whether the user can edit the invoice).
2. Invoice Preview:
○ Purpose: Allow the user to view the full scanned or uploaded invoice.
○ Functions:
■ Display the invoice as a full-page preview (PDF or image
format).
■ Users can zoom in/out, scroll through multiple pages (for PDFs),
or rotate the image if needed.
■ Optional: Add a "Download Invoice" button within the preview for
easy access.
3. Edit Invoice Details:
○ Purpose: Allow users to modify key details of the invoice.
○ Functions:
■ Editable fields for:
■ Invoice Date (with a date picker).
■ Company Name (text input).
■ Invoice Amount (number input).
■ A Save Changes button that validates the input and updates the
invoice in the database.
■ A Cancel button to discard changes and return to the previous
screen.
4. Download Invoice Button:
○ Purpose: Allow users to download the invoice for offline use or
sharing.
 ○ Functions:
■ Button labeled “Download Invoice” or “Save as PDF.”
■ Downloads the original uploaded or scanned file to the user’s
device.
5. Forward Invoice to Accountant Button:
○ Purpose: Give users the ability to forward the invoice directly to their
accountant from this screen.
○ Functions:
■ Button labeled “Forward to Accountant.”
■ Clicking it sends the invoice to the accountant’s email that was
previously saved in the user’s profile.
■ Display a success message after forwarding (e.g., “Invoice sent
to [accountant email].”).
■ Optional: Allow users to input or update the accountant’s email
before sending.
6. Add Notes or Tags (Optional):
○ Purpose: Let users add custom notes or tags to an invoice for better
organization.
○ Functions:
■ Text input field for adding notes about the invoice (e.g., project
reference, status updates).
■ Tagging feature that lets users assign custom tags (e.g., "Paid,"
"Pending," "Urgent").
7. Delete Invoice Button:
○ Purpose: Allow users to delete the invoice if it’s no longer needed.
○ Functions:
■ Button labeled “Delete Invoice.”
■ When clicked, display a confirmation dialog to prevent
accidental deletion (e.g., “Are you sure you want to delete this
invoice?”).
■ Upon confirmation, delete the invoice from the database and
redirect the user back to the Invoice Management Screen.
8. Back Button:
○ Purpose: Allow users to easily return to the previous screen without
making any changes.
○ Functions:
■ A back arrow or labeled button (e.g., “Back to Invoices”) that
redirects to the Invoice Management Screen or Dashboard.

Additional Functionalities:

● Loading Indicator:
 ○ Display a loading spinner when the invoice details are being fetched
from the database.
● Error Handling:
○ Display error messages if the invoice fails to load or if there’s an issue
with saving changes.
● Security Features:
○ Ensure that only authenticated users can view and modify their own
invoices.
○ Implement proper permissions for accessing sensitive data.

9. Accountant Forwarding Screen

1. Accountant Email Input:

○ Purpose: Allow users to enter or update their accountant’s email
address for invoice forwarding.
○ Functions:
■ Text input field for entering the accountant’s email.
■ Placeholder text: “Enter accountant’s email.”
■ Validate that the entered email is in the correct format (e.g.,
“[email protected]”).
■ Option to save or update the email address in the user's profile.
2. Set Forwarding Date:
○ Purpose: Allow users to schedule when their invoices should be
forwarded to the accountant.
○ Functions:
■ Date picker that allows users to select a specific date for
forwarding the invoices.
■ Optional: Predefined options for common intervals (e.g., "End of
Month," "Quarterly").
■ Display a confirmation message or highlight the selected
forwarding date (e.g., “Invoices will be forwarded on [date]”).
3. Select Invoices to Forward:
○ Purpose: Allow users to choose which invoices to forward to their
accountant.
○ Functions:
■ Display a list of invoices, showing key details (date, company
name, amount).
■ Checkbox next to each invoice, allowing users to select multiple
invoices for forwarding.
■ Option to select all invoices within a specific date range (e.g.,
“Forward all invoices from this month”).
4. Forward Invoices Button:
○ Purpose: Trigger the action of sending the selected invoices to the
accountant.
 ○ Functions:
■ Button labeled “Forward Invoices” or “Send to Accountant.”
■ Disabled state if no invoices are selected or if the accountant’s
email is missing.
■ When clicked, validate the input, package the selected invoices,
and email them to the accountant.
■ Display a success message after the invoices have been
successfully sent (e.g., “Invoices forwarded to [accountant
email]”).
5. Confirmation and Status Notifications:
○ Purpose: Provide users with confirmation or updates on the forwarding
status.
○ Functions:
■ Display confirmation that the invoices will be sent on the
selected date.
■ Notify the user if there was any error in forwarding the invoices.
■ Optional: Allow users to receive an email confirmation when the
invoices are successfully sent.
6. Recurring Forwarding (Optional):
○ Purpose: Allow users to set up automatic forwarding on a recurring
schedule.
○ Functions:
■ Checkbox or toggle labeled “Enable recurring forwarding.”
■ Options for frequency of recurring forwarding (e.g., “Monthly,”
“Quarterly”).
■ Once enabled, automatically forward invoices at the selected
interval without manual intervention.
7. Cancel Button:
○ Purpose: Allow users to cancel the forwarding process and return to
the previous screen.
○ Functions:
■ Button labeled “Cancel.”
■ Redirects the user back to the Dashboard or previous screen
without saving changes.

Additional Functionalities:

● Loading Indicators:
○ Display a loading spinner or progress bar while invoices are being
packaged and sent.
● Error Handling:
 ○ Provide error messages if the accountant’s email is invalid or if there
are issues with sending the invoices (e.g., failed to send email).
● Security Features:
○ Ensure that only authenticated users can access and forward invoices
to the accountant.
○ Use secure methods to transmit the email and attached invoices.

10. Profile & Settings Screen

1. User Information Section:

○ Purpose: Display and allow users to update their personal information.
○ Functions:
■ Name Field: Editable text input showing the user’s full name
with a placeholder like “John Doe.”
■ Email Field: Display the user’s registered email (optional
editable).
■ Company Field: Display company name
■ Update Button: A button labeled “Save Changes” that saves
any updates made to the name or email.
■ Change Password Link: A link that redirects users to a
password change form or screen.
■ Validation for proper email format and name input.
2. Accountant Email Section:
○ Purpose: Allow users to add or update their accountant’s email
address for invoice forwarding.
○ Functions:
■ Accountant Email Field: Editable text input for entering the
accountant’s email address.
■ Placeholder text: “Enter accountant’s email.”
■ Save Button: A button labeled “Save Email” to save the
accountant’s email address.
■ Validation to ensure the email is correctly formatted before
saving.
3. Invoice Forwarding Settings:
○ Purpose: Allow users to manage their automatic invoice forwarding
preferences.
○ Functions:
■ Enable/Disable Forwarding Toggle: A switch to enable or
disable automatic invoice forwarding.
■ Forwarding Frequency Selector: Drop-down menu or options
for selecting how often invoices are forwarded (e.g., “Monthly,”
“Quarterly”).
■ Next Forwarding Date: Display the next scheduled forwarding
date (if recurring forwarding is enabled).
 ■ Save Changes Button: Save any modifications made to the
forwarding settings.
4. Notification Preferences:
○ Purpose: Allow users to customize how they receive notifications from
the app.
○ Functions:
■ Toggle Notifications: A switch to enable or disable email or
in-app notifications.
■ Select Notification Types: Checkboxes or toggles for different
types of notifications:
■ Invoice reminders.
■ Invoice forwarding confirmations.
■ System updates and announcements.
5. Change Password (Optional):
○ Purpose: Allow users to change their password.
○ Functions:
■ A section with current password, new password, and confirm
password fields.
■ Validation to ensure the new password meets security
requirements (e.g., minimum length, complexity).
■ Save Password Button: Save the new password after
validating.
6. Delete Account Button (Optional):
○ Purpose: Provide users with the option to delete their account.
○ Functions:
■ Button labeled “Delete Account.”
■ When clicked, a confirmation dialog or screen appears asking
the user to confirm their decision (e.g., “Are you sure you want
to delete your account?”).
■ Option to permanently delete the user’s account and data from
the system.
■ Redirects the user to the login screen after successful deletion.
7. Back Button:
○ Purpose: Allow users to navigate back to the Dashboard or previous
screen without saving changes.
○ Functions:
■ Button or arrow icon labeled “Back” that takes users back to the
Dashboard or relevant screen.

Additional Functionalities:

● Loading Indicators:
 ○ Display a loading spinner when fetching user data or saving profile
changes.
● Security Features:
○ Password fields should be securely handled, and any changes to
sensitive information should require re-authentication (optional).
○ Ensure HTTPS encryption for transmitting user information.
● Error Handling:
○ Display error messages if the email is invalid or if there’s an issue
updating the profile.
○ Confirm with success messages when profile changes are saved.

11. Notifications Screen

1. List of Notifications:
○ Purpose: Display a list of notifications for the user, such as reminders
or updates.
○ Functions:
■ A list or feed of notifications, each displayed as a card or row
with:
■ Notification Type: Brief label indicating what the
notification is about (e.g., “Invoice Due,” “Forwarding
Confirmation”).
■ Date & Time: Timestamp showing when the notification
was received.
■ Short Description: A brief message about the
notification (e.g., “Your invoices have been forwarded to
your accountant.”).
■ Option to click or tap each notification for more details or to be
redirected to a relevant screen (e.g., the Invoice Details
Screen or Dashboard).
2. Mark as Read/Unread:
○ Purpose: Allow users to manage their notifications and keep track of
important ones.
○ Functions:
■ Checkbox or swipe action to mark individual notifications as
“Read” or “Unread.”
■ Visual indication (e.g., different background color) for read vs.
unread notifications.
■ Optional: A button or link at the top of the screen labeled “Mark
All as Read.”
3. Delete Notifications (Optional):
○ Purpose: Allow users to clear unwanted or old notifications.
○ Functions:
■ Checkbox or swipe action to select notifications for deletion.
 ■ Button labeled “Delete Selected” to permanently remove
selected notifications.
■ Confirmation dialog to prevent accidental deletion.
4. Filter by Notification Type (Optional):
○ Purpose: Allow users to filter notifications by category or importance.
○ Functions:
■ Drop-down menu or tabs to filter notifications by:
■ All Notifications
■ Invoice Due (e.g., reminders for unpaid or overdue
invoices)
■ Forwarding Confirmations (e.g., confirmation of
invoices sent to the accountant)
■ General Updates (e.g., system updates or app-related
announcements)
5. Notification Settings Shortcut:
○ Purpose: Provide quick access to manage notification preferences.
○ Functions:
■ Button or link labeled “Manage Notification Settings.”
■ Redirects to the Profile & Settings Screen where users can
update their notification preferences (e.g., enable/disable email
notifications).
6. Clear All Notifications Button (Optional):
○ Purpose: Allow users to quickly clear all notifications from their feed.
○ Functions:
■ A button at the top or bottom of the screen labeled “Clear All
Notifications.”
■ Confirmation dialog asking the user if they want to clear all
notifications.

Additional Functionalities:

● Real-Time Updates:
○ Automatically update the notification list as new notifications are
received, without requiring the user to refresh the screen.
● Push Notifications (Optional):
○ Option to integrate push notifications for mobile users, allowing
notifications to appear outside the app when something important
happens (e.g., invoice due or forwarding confirmation).
● Loading Indicator:
○ Display a loading spinner or progress bar while fetching notifications
from the server.
● Error Handling:
 ○ Display error messages if there’s an issue retrieving notifications (e.g.,
“Unable to load notifications, please try again later”).

12. Onboarding Screens

1. Welcome Screen:
○ Purpose: Introduce new users to the app and give an overview of its
main features.
○ Functions:
■ Display the Scanvo logo and a welcome message.
■ Brief text explaining the app’s purpose (e.g., “Welcome to
Scanvo – Easily scan, upload, and manage your invoices”).
■ A Next or Skip button to proceed or exit the onboarding
process.
■ Optional: Include an illustration or graphic to enhance the visual
appeal.
2. Feature Highlight 1: Scan & Upload Invoices:
○ Purpose: Introduce users to the app’s core functionality of scanning
and uploading invoices.
○ Functions:
■ Image or icon representing scanning or uploading.
■ Text explaining that users can scan invoices using their camera
or upload them directly from their device.
■ Next button to proceed to the next screen.
■ Optional: Include a progress indicator (e.g., dots or a bar)
showing how many onboarding screens are left.
3. Feature Highlight 2: Organize & Filter Invoices:
○ Purpose: Explain how users can manage and filter invoices by date,
company name, or amount.
○ Functions:
■ Image or icon representing filtering and sorting.
■ Brief text describing how users can easily organize and search
for invoices using custom date ranges or preset options like
“This Week,” “This Month,” and “This Quarter.”
■ Next button to proceed.
4. Feature Highlight 3: Forward Invoices to Accountant:
○ Purpose: Showcase the feature of automatically forwarding invoices to
the user’s accountant.
○ Functions:
■ Image or icon representing sending or forwarding.
■ Text explaining that users can schedule automatic forwarding of
invoices to their accountant via email.
 ■ Next button or Get Started button (to finish onboarding).
5. Get Started Screen:
○ Purpose: Final step to invite the user to start using the app.
○ Functions:
■ Display a “Get Started” button that redirects to the Sign Up or
Login Screen.
■ Optional: Include a “Skip” button at the bottom to allow users to
exit onboarding at any time.
■ Optional: Show an overview of what comes next (e.g., “Create
your account to start uploading invoices”).
6. Skip Button:
○ Purpose: Allow users to bypass the onboarding process if they’re
already familiar with the app.
○ Functions:
■ Button or link labeled “Skip” that takes users directly to the Sign
Up or Login Screen.
■ Available on every onboarding screen for easy exit.

Additional Functionalities:

● Swipe Navigation (Optional):

○ For mobile users, allow the onboarding screens to be swipeable for
easy navigation between screens.
● Progress Indicator:
○ Show a visual indicator (dots or a bar) at the bottom of the screen,
indicating how many onboarding steps are left.
● Responsive Design:
○ Ensure that the onboarding screens work well on both mobile devices
and desktop versions of the app.
● Illustrations/Animations (Optional):
○ Add simple animations or illustrations to make the onboarding
experience more engaging and visually appealing.
● Security:
○ No sensitive information is required on these screens, but ensure any
transitions between onboarding and sign-up/login screens are smooth
and secure.

Email Setup for Forwarding to Accountant

Email Sender Address:

 ● The email will be sent from a designated system email address, such as
[email protected]

Email Subject:

● The subject should clearly indicate the date range and purpose of the email.
Example subject lines:
○ "Forwarded Invoices SCANVO: [Company Name] – [Date Range]"

Email Content (Body):

● The email will include a clear message outlining what the accountant is
receiving, including the date range of the forwarded invoices and an
explanation that all files are packaged in a zip file.

Subject: "Forwarded Invoices SCANVO: [Company Name] – [Date Range]"

Dear [Accountant’s Name],

Please find attached the invoices forwarded by John Doe for the selected date
range of [Start Date] – [End Date].

Details:

● Total invoices forwarded: [Number of Invoices]

● Date range: [Start Date] – [End Date]
● All invoices have been compressed into a zip file for easy download.

If you have any questions, please email [customer email] or contact [company
name].

Note: This is an automated email from Scanvo. Please do not reply to this email.

Best regards,
The Scanvo Team

Attachment(s):

● Invoices-[DateRange].zip
Attachments:

● The system will compress all selected invoices from the specified date range
into a single zip file (e.g., Invoices-September2024.zip).
● This zip file will include each invoice as a separate PDF or image file, labeled
according to the invoice number, company name, or date.
● Ensure that the file size of the zip file stays within standard email size limits
(usually around 25MB for most email providers).

Functionality Overview:

1. User Selects Date Range:

○ From the Accountant Forwarding Screen, the user selects a custom
date range (e.g., all invoices from July 1 to September 30).
○ All invoices within this date range are automatically selected for
forwarding.
2. Invoices Packaged in Zip File:
○ After the user confirms the date range, the app will gather all invoices
from that period and compress them into a single zip file.
○ The zip file will include all relevant invoices and be attached to the
email sent to the accountant.
3. Email Sent to Accountant:
○ The app sends the email to the accountant’s email address, with the
zip file attached, including the user’s chosen subject and message
content.
○ The accountant will receive a professional email with clear details and
the zip file containing all invoices.
4. Optional Confirmation to User:
○ The user can receive a confirmation email or notification that the
invoices have been successfully forwarded to the accountant, including
details of the date range and the number of invoices sent.

Email System Setup:

● Email Service Provider: Use services like SendGrid, Mailgun, or Amazon

SES to handle email sending in FlutterFlow.
● Security: Ensure that all emails are sent via secure encrypted connections,
and follow email best practices (SPF, DKIM, and DMARC) to ensure email
deliverability.

Design Idea
(I will provide logo in a later stage, as for design this is just an idea if you have something
better feel free to update.)