72 single invoice page

[lanaramadan]

Description

For the background PNG, since the image is a set size, the content would also have to be a set size. So, we weren't sure how to go about that.
Also, the Figma says that we don't need the save changes functionality yet, but the issue says to have the changes reflected in the database. We went with the first route but let us know if we need to change anything.

Issues

Closes #72

[theNatePi]

Hey @lanaramadan @antsuh1028, sorry for the confusion! I think the "Changes reflected in the DB" may have been referring to reflecting changes in the DB on the page itself. Either way we'll take a look since you were correct in not doing the save functionality. Thanks guys!

[jessieh9]

Hey guys @antsuh1028 @lanaramadan, really really good work here, just a couple small changes I'd like:

Single Invoice

• If the remaining balance is null, let's try to show $0.00 instead of NaN (Check invoice id 4 to see it) - additionally, if any of the balances are null, try to use $0.00 so it's more intuitive over NaN

Invoice Editable

• As Anthony mentioned, since the background is a set size, let's try to make the comments table a scrollable after a certain height, you can notice when viewing editables for invoice id 4 that as the comments grow, all content gets pushed beyond the image

• For editable with invoice id 11, it seems that the bottom note gets pushed down and I also cannot see the full lower part of the image.

  • You can keep the backgroundSize that you guys have (try editing the height and the width - to do so it's just backgroundSize = {width height} i.e backgroundSize = {50px 100px})

  • Can you also try to change the width of the VStack so that it's more like 80% of the entire width of the page and that way the Save Changes button and the Go Back icon has more padding and space (gives a more coherent look to the page)

Other Things

• Let's try to remove some imports not used (I noticed some in EditInvoice.jsx)

Other than that, really good work guys. I see a lot of good practices and the code is very readable and easily navigable. Thank you for the work!

[jessieh9]

LGTM