Bill Splitting Specification

Implementation due 18 March 2022

Authors

Jackson Chadfield
Fraser McCallum

Editor/Translator: Kayla Aylward

Specification

• User can add bills to a flat.
  • The user who makes the bill is the owner.
  • Should have a description of what it is for and how to pay.
  • Upload pdf option.
  • Bills have due dates (will be sorted by due date).
  • Add users from the flat to bill.
  • Enter manually the number to be paid from each user.
    • Shortcuts to split bill evenly.
• Users can mark bills as paid. Will show on the bill which users have paid.
  • Optionally the user can upload proof (as image).
  • Can unmark as paid if accidentally marked as paid.
• Save a bill as a template.
  • Templates can be loaded quickly when creating new bill.

Back-End Specification

• Introduce new bills table with the following columns:
  • Name,
  • Description,
  • Owner,
  • Due,
  • Users,
    • id,
    • amount,
    • paid (boolean),
    • proof (blob storage id)
• Proof should be able to be accessed from blob storage.
  • https://firebase.google.com/products/storage.
• Add endpoints:
  • GET /house/bills
    • Retrieve all bills in the users flat.
    • Bills Ordered first ordered by not paid first then paid.
      • Then ordered by the due date (most urgent at top).
    • Response structure should be the same as db structure.
  • POST /house/bills
    • Create a new bill.
  • PUT /house/bills/{id}
    • Update a bill.
    • Ensure requestor is the owner.
    • Can only update name and description.
  • PUT /house/bills/{id}/payment
    • Mark a user as having paid or unpaid a bill.
  • DELETE /house/bills/{id}
    • Delete a bill.
    • Ensure requestor is the owner.

Front-End Specifications

• Add a new PRIVATE page - /bills.
  • Add to private page router.
  • Dashboard: bill splitting card to navigate to bill splitting page.
  • Should list bills:
    • Bills ordered first by not paid, then paid after.
    • Then ordered by the due date (most urgent at top).
    • Suggestion: make design similar to the “upcoming” cards on the dashboard page, but ultimately up to implementers.
    • This card should show the bill name, description, cost.
  • People can click a bill to open a details page.
    • This page should be on /bills/{id} - to implement this and for getting path params, look at the react router.
    • There the user can upload proof (pdf or image).
    • This will be uploaded to here.
    • Generate a uuidv4 string (npm uuid), name the file that, send the generated link to the backend.
    • The details page should also name the bill, show description, cost etc.
    • There should be a button (i.e. a toggle) to indicate it is paid.
      • You do not need to upload a bill in order to select this toggle.
    • The OWNER of the task should be able to edit parameters, such as the description, name.
  • Go back to the dashboard button.
  • At the top of the page there should be an option to create a new bill
    • This can be modal:
      • Bill name.
      • Description.
      • Due date.
      • Total cost.
      • Option for splitting bill evenly (default on)
      • If unchecked, show a table of all the people in the house, the user can enter specific quantities for each user to pay.
  • Also ensure a go back to dashboard option at the top that navigates back to the dashboard.