generouslabs / community-expenses-submission Goto Github PK

• Update the individual receipt display to a table view, where the most important fields are shown in columns.

• Open questions, what fields should be columns?

Maybe to start we could use a simple window.confirm() to try and ensure that users really understand their receipts are not editable.

As of right now it's hard coded, this is a production blocking issue.

Right now when a user registers, then creates a profile, then submits a receipt, their profile data will not be copied into the "pay to" section of the receipt. We can likely fix that by adding a fetch-policy to the query that fetches the user profile.

https://github.com/h2non/imaginary

This seems to be a docker compatible image processing HTTP server. So, in theory we could use it like so:

• We add it to docker-compose.yaml in the hasura/ directory maybe?
• We run the instance
• Then instead of pushing images to the media server we use imaginary instead

Key questions to answer:

• How do we protect images?
  • Some uploaded files have personal information, so ideally they should not be public.
  • imaginary supports various schemes for this I think, some research & choosing one is probably a good first step
• Can we use the current schema?
• Update the UI to use the new imaginary server instead of the current "media server"
  • The image upload component
  • Maybe replace the AuthImage scene?

• Add pagination for up to 50 elements per page in the receipts list.

If your JWT expires when you start the app it still says "you're logged in".

There are various approaches. Right now we do the following:

• Upload a file, get back its "ID"
• Save that ID into client state
• Move to the data entry form
• Pass the ID to the database on form submission

This means you can upload files, abandon the process, and the files are left forever. We would have a hard time matching them to ensure which files we can delete. Not impossible, but a pain.

We could instead go to the database first, but that's also a bit of a pain.

• Go to the database and get an ID
• Upload the file with the ID
• Submit the ID along with the form data

In this scenario, how do we trigger an event to delete the file? It'd need to have some kind of timeout or whatever. That's not really clear. There's also no database event that we could rely on...

Works in Chromium, Firefox. WTF?????

When reviewing expenses, some may be marked invalid for reasons that are not necessarily tied to their legality, so it would be a more precise user experience to remove that wording to avoid confusion as well as adding a new field so that the uploader knows why it was rejected.

• Remove the word "legally" from "Mark legally valid/invalid" buttons
• Add a comment field so the expense uploader knows why it was marked invalid if that's the case.

When signing up, the Auth0 says "Wrong credentials", yet it has actually created the user.

Currently the "submit a receipt" form has a whacky +/- array input that allows a single receipt to be assigned to multiple categories. It would be neat to replace this with a single category dropdown and then add an option to "Assign to multiple categories" which would in turn replace the single dropdown with the current complicated multi category selector.

When users sign in, they need to create a profile. Right now we don't enforce this.

From https://github.com/chmac/community-shift-signup

Steps to reproduce

• Stop the media server
• Submit a receipt

The upload will fail, but the form still progresses to the next step, and then the user can enter the receipt detail even though the image failed to upload.

Currently we just show the basic info from the receipt, but we also want to show the category allocations and their amounts.

We need to figure out exactly how we'll download the documents. Some ideas...

• We could name the files according to a payment reference
  • So we paid 4 receipts in a single bank transfer
  • This transfer is called transfer number 245
  • The 4 files are called 245_receipt.pdf, 245_blah.png, 245_something.jpg, 245_more.jpg

https://github.com/mozilla/pdf.js/tree/master/examples/node/pdf2png

Some basic code that seems to achieve the desired purpose on node.

• Add supplier_name to the model
• Add supplier_name to the ReceiptNew scene

The current media server is extremely basic. It takes the userId from the JWT, then names files like ${userId}__${randomUuid()}.jpg. A service like cloudinary would be great, but comes with significant cost. Ideally we'd have the following capabilities in the media server:

• Support uploading of images and PDF formats
• Produce downsized versions of these images after upload

Set both single category and multi category and then submit, error #9gNLUG...

Currently we request images from the media server using axios so that we can add the JWT to the Authorization header. However, we could achieve this in a slightly cleaner fashion as so:

• On login, the app sends a request to the media server
  • /tokenToCookie?token=XXX
  • The media server responds with a Set-Cookie header containing the passed token
• Images are loaded directly from the media server via regular paths
  • A request like /images/imageId.jpg will have the cookie attached
  • The media server can validate the JWT from the cookie against the image