236 expenses modal - #240
Merged
Merged
Conversation
…ploadProgress component & FilePreview component when the file is being uploaded + completed respectively
nourshoreibah
approved these changes
Jun 30, 2026
nourshoreibah
left a comment
nourshoreibah
left a comment
Collaborator
There was a problem hiding this comment.
lgtm! Can we just fix the linter warnings?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ℹ️ Issue
Closes #236
📝 Description
Updated the AddExpense modal to match the new figma design & added a file upload section for it. The FileUpload component currently only accepts pdfs.
Briefly list the changes made to the code:
✔️ Verification
Ran my tests & verified everything passed. Also checked on local host to make sure everything matched figma.
Modal with FIleUpload component at default state:
FileUpload component at upload state (UploadProgressBar):
FileUpload component at upload completed state (FilePreview):
FileUpload component when incorrect file type dropped:
All tests in test folder pass:
🏕️ (Optional) Future Work / Notes
I wasn't able to match the calendar to the figma design because we'd need to make a custom date picker component rather than using the native HTML one. This seemed like it was enough extra work to be its own ticket in the future!
Also, right now since the file upload isn't connected to the backend, the progress bar has preprogrammed values in it, so when we connect this to the backend, we should update the progress bar to use the real values.