Single invoice page and Email history component

[jessieh9]

Tasks

Your task is to create the single invoice page, editing the invoice, and the email history component for the page matching this Figma
This page will allow users to view a more thorough information on a single invoice and view the history of the invoice versions.

The email history component should be created in:
/lpa/client/src/components/invoices/EmailHistory.jsx

The Single Invoice page page should be created in:
/lpa/client/src/components/invoices/Invoice.jsx
The Single Invoice page should be at the URL:
localhost/invoices/:id where id = id of the specific invoice

The Edit Invoice page should be created in:
/lpa/client/src/components/invoices/EditInvoice.jsx
The Edit Invoice page should be at the URL
localhost/invoices/edit/:id where id = id of the specific invoice

---

This task requires you to create the following:

1. Single Invoice Page

This page should match this Figma

Routing

You'll need to set up dynamic routing so that each invoice has its own unique url.
To do this:
When adding the route to App.jsx, do the following:

<Route
  path="/invoices/:id"
  element={
    <ProtectedRoute
      element={<SingleInvoice />}
    />
  }
/>

In your page, grab the ID from the url:

const SingleInvoice = () => {
    const {id}= useParams()
  return (
    <div style={{ fontSize: 32, textAlign: "center", padding: 10 }}>
      Invoice Id - {id}
    </div>
  );
}

• When a user clicks on a specific invoice from the /invoices route, you should be able to show the specific invoice page
• You will need to make relevant calls to API to get the correct information for all the tables.

Invoice Editable

• Implement editing the invoice functionality when the user clicks on Edit button in the Single Invoice page.
• Match this Figma to create the Editable for the Invoice
  • The background PNG can be found at lpa/client/src/assets/background
  • The logo can be found at lpa/client/src/assets/logo
  • Query the database for the current information on the invoice and display on the page according to the Figma

See all comments on the Figma before you begin. Please ask any questions you may have about how to implement the page functionality.

2. Email history Component

• You will need to query the historic_invoices table in the DB to get all the file_references matching the invoice_id. You will be linking View PDF with the file_reference (you can use sample links for now).
  See the Figma and comments for more details.

---

Important

When getting data from the DB, always do the following:

1. Check: Is there already a DB endpoint which gives me ALL of the data I need, without having to modify it in JS?
2. Add: A new endpoint that uses SQL to get all relevant data on the backend. For example, you might create a new endpoint to get all payees for an event, instead of getting all clients and filtering them locally
3. Finally: Use JS to filter results if the above two options wont work

ALSO: If possible, dont make calls which get you duplicate data. If one call to the DB gets you all program data, keep using that data rather than making another query.
Why? It is faster to query data in SQL than it is to filter it in JS on the client side.

Note

This is a relatively medium sized task. Please start early and ask any questions that come up as soon as possible.

---

Resources

• Use the Chakra Table component
• Use other Chakra components when possible

Deliverables (please check off as you go!):

• Single Invoice page matched Figma
• Editable Invoice
  • Changes reflected in DB
• Email History component
  • shows all historic invoices